TheTalisman / flexboard

React component library for re-sizable sidebars

Flexboard

React component library for re-sizable sidebars

Flexboard-Skeleton

Demo

Installation

yarn

yarn add @dorbus/flexboard

npm

npm install @dorbus/flexboard

Usage

To use Flexboard in your application first import FlexboardProvider, FlexboardFrame and Flexboard.

Left Sidebar

To use Left Sidebar FlexboardFrame component must be used below the Flexboard component inside FlexboardProvider and the direction prop in Flexboard component should be set to left.

import { Flexboard, FlexboardProvider, FlexboardFrame, ResizerType, Position } from '@dorbus/flexboard';
    <FlexboardProvider>
            <Flexboard
            direction={Position.left}
            draggable={true}
            width={400}
            minWidth={200}
            maxWidth={600}
            flexboardStyle={{ backgroundColor: "#f2f3f4" }}
            resizerStyle={{ backgroundColor: "pink" }}
            resizerType={ResizerType.gutterlane}
            >
                <div>Flexboard Content</div>
            </Flexboard>
            <FlexboardFrame>
                <div>Frame Content</div>
            </FlexboardFrame>
    </FlexboardProvider>

Right Sidebar

To use Right Sidebar FlexboardFrame component must be used above the Flexboard component inside FlexboardProvider and the direction prop in Flexboard component should be set to right.

import { Flexboard, FlexboardProvider, FlexboardFrame, ResizerType, Position } from '@dorbus/flexboard';
    <FlexboardProvider>
            <FlexboardFrame>
                <div>Frame Content</div>
            </FlexboardFrame>
            <Flexboard
            direction={Position.right}
            draggable={true}
            width={400}
            minWidth={200}
            maxWidth={600}
            flexboardStyle={{ backgroundColor: "#f2f3f4" }}
            resizerStyle={{ backgroundColor: "pink" }}
            resizerType={ResizerType.gutterlane}
            >
                <div>Flexboard Content</div>
            </Flexboard>
    </FlexboardProvider>

Left-Right Sidebar

To use Left-Right Sidebar FlexboardFrame component must be used in between the Flexboard left and right components inside FlexboardProvider.

import { Flexboard, FlexboardProvider, FlexboardFrame, ResizerType, Position } from '@dorbus/flexboard';
    <FlexboardProvider>
            <Flexboard
            direction={Position.left}
            draggable={true}
            width={400}
            minWidth={200}
            maxWidth={600}
            flexboardStyle={{ backgroundColor: "#f2f3f4" }}
            resizerStyle={{ backgroundColor: "pink" }}
            resizerType={ResizerType.gutterlane}
            >
                <div>Left-Sidebar</div>
            </Flexboard>
            <FlexboardFrame>
                <div>Frame Content</div>
            </FlexboardFrame>
             <Flexboard
            direction={Position.right}
            draggable={true}
            width={400}
            minWidth={200}
            maxWidth={600}
            flexboardStyle={{ backgroundColor: "#f2f3f4" }}
            resizerStyle={{ backgroundColor: "pink" }}
            resizerType={ResizerType.gutterlane}
            >
                <div>Right-Sidebar</div>
            </Flexboard>
    </FlexboardProvider>

API

Component	Prop	Type	Description	Default
Flexboard	direction	Position	Flexboard position	left
	draggable	boolean	Flexboard is resizable or not	false
	width	number	Initial width of flexboard	200px
	minWidth	number	Minimum width of draggable flexboard	150
	maxWidth	number	Maximum width of draggable flexboard	300
	flexboardStyle	CSS	Pass custom sidebar styles	-
	resizerStyle	CSS	Pass custom resizer styles	-
	resizerType	ResizerTypes	Choose a resizer type: line shadowline lane gutterlane	line

Prerequisites / Dependencies

1. NodeJS
   • version 16.18 +
2. NodeJS NPM (installed with NodeJS)

This project uses Rollup to create distributable React component libs. The Rollup config uses ESM imports and as such the minimum NodeJS version is 16.19.0 per this post: https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library-2oe/comments

...

When running rollup -c if anyone is getting SyntaxError: Unexpected Identifier error than just upgarde your nodejs version to v18 LTS, I was on 16.3 so the importing json using the assert keyword was causing this. Thanks to @nasheomirro for providing a link to a blog where it states that nodejs 17.5+ required.

version 16.19.0 works just fine... just in case anyone needs to work with 16 version

Getting Started

Assuming that you have the prerequisites installed on your environment...

1. Sync this Git repo

2. Open a Command Line / Terminal targeting the local repo directory.

3. Execute npm install

To build the distributable React component libs (CJS and ESM)...

1. Execute: npm run build

To test and examine the component in the Storybook environment...

1. Execute: npm run storybook

To run the Jest tests...

1. Execute: npm run test

Original Project Created & Maintained By

Divyanshu Shekhar

Aniket Pathak

Stargazers

Forkers

Copyright & License

Code and documentation Copyright (c) ISC © 2022 Dorbus.