Merge pull request #3 from dorbus/dev

Dev
dorbus · Nov 8, 2022 · 8d7b55e · 8d7b55e
2 parents 4012119 + 2d2a3c3
commit 8d7b55e
Show file tree

Hide file tree

Showing 8 changed files with 205 additions and 42 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,4 +1,4 @@
-Copyright 2022 @divshekhar
+Copyright 2022 @dorbus
 
 Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
 

diff --git a/README.md b/README.md
@@ -1,3 +1,175 @@
-# Flexboard
-
-React component library for re-sizable sidebars
+<div align="center">
+<img src="./img/Flexboard_icon.png" height=300 width=300 alt="Flexboard Logo">
+<h1>Flexboard</h1>
+</div>
+
+<!-- Repository stats -->
+
+<div align="center">
+
+<img alt="GitHub" src="https://img.shields.io/github/license/dorbus/flexboard?style=plastic">
+
+<img alt="GitHub release (latest by date including pre-releases" src="https://img.shields.io/github/v/release/dorbus/flexboard?include_prereleases">
+
+<br>
+
+<img alt="GitHub top language" src="https://img.shields.io/github/languages/top/dorbus/flexboard?style=plastic">
+
+<img alt="GitHub Repo forks" src="https://img.shields.io/github/forks/dorbus/flexboard?style=plastic">
+
+<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/dorbus/flexboard?style=plastic">
+
+<img alt="GitHub package.json dependency version (prod)" src="https://img.shields.io/github/package-json/dependency-version/dorbus/flexboard/react?style=plastic">
+
+<br>
+
+<img alt="GitHub Repo stars" src="https://img.shields.io/github/contributors-anon/dorbus/flexboard">
+
+<img alt="Github Repo Sponsors" src="https://img.shields.io/github/sponsors/dorbus?style=plastic)">
+
+<h4>React component library for re-sizable sidebars</h4>
+
+</div>
+
+<!-- Demo -->
+
+## Demo
+
+![react-pro-sidebar](./img/Flexboard_demo.gif)
+
+<!-- Installation -->
+
+## Installation
+
+### yarn
+
+```bash
+yarn add @dorbus/flexboard
+```
+
+### npm
+
+```bash
+npm install @dorbus/flexboard
+```
+
+<!-- Usage -->
+
+## Usage
+
+Import `FlexboardProvider`, `FlexboardFrame` and `Flexboard` and wrap `Flexboard` and `FlexboardFrame` inside `FlexboardProvider` as shown below:
+
+```tsx
+import { FlexboardProvider, Flexboard, FlexboardFrame } from 'flexboard';
+<FlexboardProvider>
+  <Flexboard
+    direction={Position.left}
+    draggable={true}
+    width={400}
+    minWidth={200}
+    maxWidth={600}
+    flexboardStyle={{ backgroundColor: '#f2f3f4' }}
+    resizerStyle={{ backgroundColor: 'pink' }}
+    resizerType={ResizerTypes.line}>
+    <div>Flexboard Content</div>
+  </Flexboard>
+  <FlexboardFrame>
+    <div>Frame Content</div>
+  </FlexboardFrame>
+</FlexboardProvider>;
+```
+
+<!-- API -->
+
+## API
+
+<table>
+    <thead>
+        <tr>
+            <th>Component</th>
+            <th>Prop</th>
+            <th>Type</th>
+            <th>Description</th>
+            <th>Default</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td rowspan=10>Flexboard</td>
+            <td >direction</td>
+            <td><code>Position</code></td>
+            <td>Flexboard position</td>
+            <td><code>left</code></td>
+        </tr>
+        <tr>
+            <td>draggable</td>
+            <td><code>boolean</code></td>
+            <td>Flexboard is resizable or not</td>
+            <td><code>false</code></td>
+        </tr>
+        <tr>
+            <td>width</td>
+            <td><code>number</code></td>
+            <td>Initial width of flexboard</td>
+            <td><code>200px</code></td>
+        </tr>
+        <tr>
+            <td>minWidth</td>
+            <td><code>number</code></td>
+            <td>Minimum width of draggable flexboard</td>
+            <td><code>150</code></td>
+        </tr>
+        <tr>
+            <td>maxWidth</td>
+            <td><code>number</code></td>
+            <td>Maximum width of draggable flexboard</td>
+            <td><code>300</code></td>
+        </tr>
+        <tr>
+            <td>flexboardStyle</td>
+            <td><code>CSS</code></td>
+            <td>Pass custom sidebar styles</td>
+            <td>-</td>
+        </tr>
+        <tr>
+            <td>resizerStyle</td>
+            <td><code>CSS</code></td>
+            <td>Pass custom resizer styles</td>
+            <td>-</td>
+        </tr>
+        <tr>
+            <td>resizerType</td>
+            <td><code>ResizerTypes</code></td>
+            <td>Choose a resizer type: <ul><li><code>line</code></li><li><code>shadowline</code></li><li><code>lane</code></li><li><code>gutterlane</code></li></ul></td>
+            <td><code>line</code></td>
+        </tr>
+    </tbody>
+</table>
+
+## Project Created & Maintained By
+
+### Divyanshu Shekhar
+
+<a href="https://twitter.com/dshekhar17"><img src="https://github.com/aritraroy/social-icons/blob/master/twitter-icon.png?raw=true" width="60"></a> <a href="https://in.linkedin.com/in/divyanshu-shekhar-a8a04a162"><img src="https://github.com/aritraroy/social-icons/blob/master/linkedin-icon.png?raw=true" width="60"></a> <a href="https://instagram.com/dshekhar17"><img src="https://github.com/aritraroy/social-icons/blob/master/instagram-icon.png?raw=true" width="60"></a>
+
+[![GitHub followers](https://img.shields.io/github/followers/divshekhar.svg?style=social&label=Follow)](https://github.com/divshekhar/)
+
+### Aniket Pathak
+
+<a href="https://www.linkedin.com/in/aniket-pathak-8925311b5/"><img src="https://github.com/aritraroy/social-icons/blob/master/linkedin-icon.png?raw=true" width="60"></a> <a href="https://www.instagram.com/anik3t_pathak/"><img src="https://github.com/aritraroy/social-icons/blob/master/instagram-icon.png?raw=true" width="60"></a>
+
+[![GitHub followers](https://img.shields.io/github/followers/aniketpathak028.svg?style=social&label=Follow)](https://github.com/aniketpathak028/)
+
+## Stargazers
+
+[![Stargazers repo roster for @dorbus/felxboard](https://reporoster.com/stars/dark/dorbus/felxboard)](https://github.com/dorbus/felxboard/stargazers)
+
+## Forkers
+
+[![Forkers repo roster for @dorbus/flexboard](https://reporoster.com/forks/dark/dorbus/flexboard)](https://github.com/dorbus/flexboard/network/members)
+
+<!-- License -->
+
+## License
+
+[ISC](LICENSE) © 2022 Dorbus.
diff --git a/img/Flexboard_demo.gif b/img/Flexboard_demo.gif
diff --git a/img/Flexboard_icon.png b/img/Flexboard_icon.png
diff --git a/package.json b/package.json
@@ -9,12 +9,12 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/DevsOnReact/flexboard.git"
+    "url": "git+https://github.com/dorbus/flexboard.git"
   },
   "bugs": {
-    "url": "https://github.com/DevsOnReact/flexboard/issues"
+    "url": "https://github.com/dorbus/flexboard/issues"
   },
-  "homepage": "https://github.com/DevsOnReact/flexboard#readme",
+  "homepage": "https://github.com/dorbus/flexboard#readme",
   "private": false,
   "license": "ISC",
   "keywords": [

diff --git a/src/components/flexboard/Flexboard.enums.ts b/src/components/flexboard/Flexboard.enums.ts
@@ -8,5 +8,5 @@ export enum ResizerTypes {
   line = 'line',
   shadowline = 'shadowline',
   lane = 'lane',
-  gutterlane = 'gutterlan'
+  gutterlane = 'gutterlane'
 }
diff --git a/src/components/flexboard/Flexboard.stories.tsx b/src/components/flexboard/Flexboard.stories.tsx
@@ -17,40 +17,23 @@ const Template: Story = () => {
   return (
     <FlexboardProvider>
       <Flexboard
-        sidebarStyle={{ backgroundColor: '#f2f3f4' }}
         direction={Position.left}
-        width={400}
         draggable={true}
+        width={400}
         minWidth={200}
         maxWidth={600}
-        resizerType={ResizerTypes.line}>
-        <ul>
-          <li>
-            <h2>Hey</h2>
-          </li>
-          <li>
-            <h2>Ananya Das,</h2>
-          </li>
-          <li>
-            <h2>I love you ❤️</h2>
-          </li>
-          <li>
-            <h2>Why you did this to me? 💔😭 </h2>
-          </li>
-        </ul>
+        flexboardStyle={{ backgroundColor: '#f2f3f4' }}
+        resizerStyle={{ backgroundColor: 'pink' }}
+        resizerType={ResizerTypes.gutterlane}>
+        <center>
+          <h2>Flexboard Content</h2>
+        </center>
       </Flexboard>
       <FlexboardFrame>
-        <h1>Aditya Abrol tum maa chuda bsdk.........</h1>
+        <center>
+          <h2>Frame Content</h2>
+        </center>
       </FlexboardFrame>
-      <Flexboard
-        sidebarStyle={{ backgroundColor: '#f2f3f4' }}
-        direction={Position.right}
-        width={400}
-        draggable={true}
-        minWidth={200}
-        maxWidth={600}
-        resizerType={ResizerTypes.gutterlane}
-        resizerStyle={{ backgroundColor: 'pink' }}></Flexboard>
     </FlexboardProvider>
   );
 };

diff --git a/src/components/flexboard/Flexboard.tsx b/src/components/flexboard/Flexboard.tsx
@@ -12,7 +12,7 @@ interface Props {
   minWidth?: number;
   maxWidth?: number;
   draggable?: boolean;
-  sidebarStyle?: React.CSSProperties;
+  flexboardStyle?: React.CSSProperties;
   resizerType?: ResizerTypes;
   resizerStyle?: React.CSSProperties;
 }
@@ -83,7 +83,7 @@ const Flexboard: FC<Props> = (props: Props) => {
               width: flexboardWidth,
               minWidth: props.minWidth,
               maxWidth: props.maxWidth,
-              ...props.sidebarStyle
+              ...props.flexboardStyle
             }}
             onMouseDown={(e) => {
               return e.preventDefault();
@@ -97,7 +97,7 @@ const Flexboard: FC<Props> = (props: Props) => {
                 onMouseDown={startResizing}
                 style={{
                   width: isHovering ? '5px' : '',
-                  background: 'none',
+                  background: 'none !important',
                   ...props.resizerStyle
                 }}
               />
@@ -110,8 +110,8 @@ const Flexboard: FC<Props> = (props: Props) => {
                 onMouseDown={startResizing}
                 style={{
                   width: isHovering ? '5px' : '',
-                  boxShadow: isHovering ? '2pxResizerTypes 2px 2px 1px rgba(0, 0, 0, 0.2)' : '',
-                  background: isHovering ? 'none' : '',
+                  boxShadow: isHovering ? '2px 2px 2px 1px rgba(0, 0, 0, 0.2)' : '',
+                  background: isHovering ? 'none !important' : '',
                   ...props.resizerStyle
                 }}
               />
@@ -132,7 +132,15 @@ const Flexboard: FC<Props> = (props: Props) => {
                 onMouseLeave={handleMouseLeave}
                 onMouseDown={startResizing}
                 style={{ ...props.resizerStyle }}>
-                <div className="gutter"></div>
+                <div
+                  className="gutter"
+                  style={{
+                    height: isHovering ? '25px' : '',
+                    width: isHovering ? '100%' : '',
+                    backgroundColor: isHovering ? 'grey' : '',
+                    borderLeft: isHovering ? 'dashed black' : '',
+                    borderRight: isHovering ? 'dashed black' : ''
+                  }}></div>
               </div>
             )}
           </div>
@@ -148,7 +156,7 @@ const Flexboard: FC<Props> = (props: Props) => {
               width: flexboardWidth,
               minWidth: props.minWidth,
               maxWidth: props.maxWidth,
-              ...props.sidebarStyle
+              ...props.flexboardStyle
             }}
             onMouseDown={(e) => {
               return e.preventDefault();