feat: add storybook

.storybook/main.js

@@ -0,0 +1,3 @@
+module.exports = {
+  stories: ['../stories/index.js'],
+};

.storybook/manager.js

@@ -0,0 +1,11 @@
+import { addons } from '@storybook/addons';
+import { create } from '@storybook/theming/create';
+
+addons.setConfig({
+  theme: create({
+    base: 'light',
+    brandTitle: 'React Sortable Tree',
+    brandUrl: 'https://github.com/frontend-collective/react-sortable-tree',
+    gridCellSize: 12,
+  }),
+});

package.json

@@ -42,6 +42,8 @@
     "prettier": "prettier --write '{src,test}/**/*.js'",
     "lint": "eslint src test",
     "release": "standard-version",
+    "build:storybook": "build-storybook -o build",
+    "storybook": "start-storybook -p ${PORT:-3001} -h 0.0.0.0",
     "deploy": "gh-pages -d build",
     "prepublishOnly": "yarn run test && yarn run build"
   },
@@ -62,6 +64,9 @@
     "@babel/preset-react": "^7.7.0",
     "@emotion/core": "^10.0.22",
     "@emotion/styled": "^10.0.23",
+    "@storybook/addons": "^5.3.17",
+    "@storybook/react": "^5.3.17",
+    "@storybook/theming": "^5.3.17",
     "@types/react": "^16.9.11",
     "babel-eslint": "^10.0.3",
     "babelify": "^10.0.0",

website/examples/basic/BasicHorizontal.js → stories/BasicHorizontal.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import SplitPane from '../../../src';
+import SplitPane from '../src';
 
 export default () => (
   <SplitPane split="horizontal">

website/examples/basic/BasicNested.js → stories/BasicNested.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import SplitPane from '../../../src';
+import SplitPane from '../src';
 
 export default () => (
   <SplitPane

website/examples/basic/BasicStep.js → stories/BasicStep.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import SplitPane from '../../../src';
+import SplitPane from '../src';
 
 export default () => (
   <SplitPane

website/examples/basic/BasicVertical.js → stories/BasicVertical.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import SplitPane from '../../../src';
+import SplitPane from '../src';
 
 export default () => (
   <SplitPane split="vertical">

website/examples/advanced/InlineStyles.js → stories/InlineStyles.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import SplitPane from '../../../src';
+import SplitPane from '../src';
 
 export default () => {
   const styleA = { background: '#eee' };

website/examples/advanced/MultipleHorizontal.js → stories/MultipleHorizontal.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import SplitPane from '../../../src';
+import SplitPane from '../src';
 
 export default () => (
   <SplitPane split="horizontal" defaultSize="33%">

website/examples/advanced/MultipleVertical.js → stories/MultipleVertical.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import SplitPane from '../../../src';
+import SplitPane from '../src';
 
 export default () => (
   <SplitPane split="vertical" defaultSize="33%">

website/examples/advanced/NestedHorizontal.js → stories/NestedHorizontal.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import SplitPane from '../../../src';
+import SplitPane from '../src';
 import styled from '@emotion/styled';
 
 const Wrapper = styled('div')`

website/examples/advanced/NestedVertical.js → stories/NestedVertical.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import SplitPane from '../../../src';
+import SplitPane from '../src';
 import styled from '@emotion/styled';
 
 const Wrapper = styled('div')`

website/examples/basic/PercentageHorizontal.js → stories/PercentageHorizontal.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import SplitPane from '../../../src';
+import SplitPane from '../src';
 
 export default () => (
   <SplitPane defaultSize="50%" split="horizontal">

website/examples/basic/PercentageVertical.js → stories/PercentageVertical.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import SplitPane from '../../../src';
+import SplitPane from '../src';
 
 export default () => (
   <SplitPane defaultSize="50%">

website/examples/basic/SnapToPosition.js → stories/SnapToPosition.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import SplitPane from '../../../src';
+import SplitPane from '../src';
 
 export default class SnapToPositionExample extends React.Component {
   constructor(props) {

website/examples/advanced/Subcomponent.js → stories/Subcomponent.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import SplitPane from '../../../src';
+import SplitPane from '../src';
 
 export default () => (
   <div className="parent">

stories/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import BasicHorizontal from '../stories/BasicHorizontal';
+import BasicNested from './examples/basic/BasicNested';
+import BasicStep from '../stories/BasicStep';
+import BasicVertical from '../stories/BasicVertical';
+import PercentageHorizontal from '../stories/PercentageHorizontal';
+import PercentageVertical from '../stories/PercentageVertical';
+import SnapToPostion from './examples/basic/SnapToPosition';
+
+import InlineStyles from './InlineStyles';
+import MultipleHorizontal from './MultipleHorizontal';
+import MultipleVertical from './MultipleVertical';
+import NestedHorizontal from './NestedHorizontal';
+import NestedVertical from './NestedVertical';
+import Subcomponent from './Subcomponent';
+
+storiesOf('Basic', module)
+  .add('Basic Horizontal', () => <BasicHorizontal />)
+  .add('Basic Nested', () => <BasicNested />)
+  .add('Basic Step', () => <BasicStep />)
+  .add('Basic Vertical', () => <BasicVertical />)
+  .add('Percentage Horizontal', () => <PercentageHorizontal />)
+  .add('Percentage Vertical', () => <PercentageVertical />)
+  .add('Snap To Position', () => <SnapToPostion />);
+
+storiesOf('Advanced', module)
+  .add('Inline Styles', () => <InlineStyles />)
+  .add('Multiple Horizontal', () => <MultipleHorizontal />)
+  .add('Multiple Vertical', () => <MultipleVertical />)
+  .add('Nested Horizontal', () => <NestedHorizontal />)
+  .add('Nested Vertical', () => <NestedVertical />)
+  .add('Subcomponent', () => <Subcomponent />);

website/App.js

@@ -5,20 +5,20 @@ import { HashRouter, Route, Redirect } from 'react-router-dom';
 import Sidebar from './components/Sidebar';
 
 // basic examples
-import BasicHorizontal from './examples/basic/BasicHorizontal';
+import BasicHorizontal from '../stories/BasicHorizontal';
 import BasicNested from './examples/basic/BasicNested';
-import BasicStep from './examples/basic/BasicStep';
-import BasicVertical from './examples/basic/BasicVertical';
-import PercentageHorizontal from './examples/basic/PercentageHorizontal';
-import PercentageVertical from './examples/basic/PercentageVertical';
+import BasicStep from '../stories/BasicStep';
+import BasicVertical from '../stories/BasicVertical';
+import PercentageHorizontal from '../stories/PercentageHorizontal';
+import PercentageVertical from '../stories/PercentageVertical';
 import SnapToPostion from './examples/basic/SnapToPosition';
 
 // advanced examples
-import InlineStyles from './examples/advanced/InlineStyles';
+import InlineStyles from '../stories/InlineStyles';
 import MultipleHorizontal from './examples/advanced/MultipleHorizontal';
-import MultipleVertical from './examples/advanced/MultipleVertical';
+import MultipleVertical from '../stories/MultipleVertical';
 import NestedHorizontal from './examples/advanced/NestedHorizontal';
-import NestedVertical from './examples/advanced/NestedVertical';
+import NestedVertical from '../stories/NestedVertical';
 import Subcomponent from './examples/advanced/Subcomponent';
 
 const Wrapper = styled('div')`