feat: add storybook

wuweiweiwu · wuweiweiwu · commit 3a8b6e664d05 · 2020-03-24T00:10:25.000-07:00
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -0,0 +1,3 @@
+module.exports = {
+  stories: ['../stories/index.js'],
+};
diff --git a/.storybook/manager.js b/.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,
+  }),
+});
diff --git a/package.json b/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",
diff --git a/stories/BasicHorizontal.js b/stories/BasicHorizontal.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SplitPane from '../../../src';
+import SplitPane from '../src';
 
 export default () => (
   <SplitPane split="horizontal">
diff --git a/stories/BasicNested.js b/stories/BasicNested.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SplitPane from '../../../src';
+import SplitPane from '../src';
 
 export default () => (
   <SplitPane
diff --git a/stories/BasicStep.js b/stories/BasicStep.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SplitPane from '../../../src';
+import SplitPane from '../src';
 
 export default () => (
   <SplitPane
diff --git a/stories/BasicVertical.js b/stories/BasicVertical.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SplitPane from '../../../src';
+import SplitPane from '../src';
 
 export default () => (
   <SplitPane split="vertical">
diff --git a/stories/InlineStyles.js b/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' };
diff --git a/stories/MultipleHorizontal.js b/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%">
diff --git a/stories/MultipleVertical.js b/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%">
diff --git a/stories/NestedHorizontal.js b/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')`
diff --git a/stories/NestedVertical.js b/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')`
diff --git a/stories/PercentageHorizontal.js b/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">
diff --git a/stories/PercentageVertical.js b/stories/PercentageVertical.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SplitPane from '../../../src';
+import SplitPane from '../src';
 
 export default () => (
   <SplitPane defaultSize="50%">
diff --git a/stories/SnapToPosition.js b/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) {
diff --git a/stories/Subcomponent.js b/stories/Subcomponent.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SplitPane from '../../../src';
+import SplitPane from '../src';
 
 export default () => (
   <div className="parent">
diff --git a/stories/index.js b/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 />);
diff --git a/website/App.js b/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')`
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+module.exports = {`
	`2`	`+ stories: ['../stories/index.js'],`
	`3`	`+};`