Add storybook to the project

.storybook/addons.js

@@ -0,0 +1,4 @@
+import '@storybook/addon-actions/register';
+import 'storybook-addon-jsx/register';
+import '@storybook/addon-backgrounds/register';
+import '@storybook/addon-viewport/register';

.storybook/config.js

@@ -0,0 +1,15 @@
+import { configure, setAddon, addDecorator } from '@storybook/react';
+import { withBackgrounds } from '@storybook/addon-backgrounds';
+import JSXAddon from 'storybook-addon-jsx';
+
+addDecorator(withBackgrounds([{ name: 'none', value: 'transparent', default: true }]));
+
+setAddon(JSXAddon);
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../src/components', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

README.md

@@ -48,3 +48,11 @@ Clone the project:
 > yarn install
 > yarn start
 ```
+
+## 5. Development Environment
+
+- [Storybook](https://storybook.js.org/docs/guides/guide-react/)
+
+```
+> yarn storybook
+```

package.json

@@ -4,9 +4,6 @@
   "private": true,
   "dependencies": {
     "classnames": "^2.2.6",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^4.0.0",
-    "eslint-plugin-import": "^2.16.0",
     "node-sass": "^4.11.0",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
@@ -21,7 +18,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "format": "prettier --write \"src/**/*.js\""
+    "format": "prettier --write \"src/**/*.js\"",
+    "storybook": "start-storybook"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -33,7 +31,17 @@
     "not op_mini all"
   ],
   "devDependencies": {
+    "@babel/core": "^7.3.4",
+    "@storybook/addon-actions": "^5.0.1",
+    "@storybook/addon-backgrounds": "^5.0.1",
+    "@storybook/addon-viewport": "^5.0.1",
+    "@storybook/react": "^5.0.1",
+    "babel-loader": "^8.0.5",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-prettier": "^4.0.0",
+    "eslint-plugin-import": "^2.16.0",
     "prettier": "^1.16.4",
-    "redux-devtools": "^3.5.0"
+    "redux-devtools": "^3.5.0",
+    "storybook-addon-jsx": "^6.0.0"
   }
 }

src/components/Note/__stories__/Note.stories.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { withViewport } from '@storybook/addon-viewport';
+
+import Note from '../index';
+import Editable from '../../Editable';
+
+storiesOf('Note', module)
+  .addDecorator(withViewport())
+  .addWithJSX(`default`, () => (
+    <Note>
+      <Editable id="1" editing="true" value="new task" onEdit={action('button-click')} />
+    </Note>
+  ))
+  .add(
+    'tablet',
+    () => (
+      <Note>
+        <Editable id="1" editing="true" value="new task" onEdit={action('button-click')} />
+      </Note>
+    ),
+    {
+      viewport: 'ipad'
+    }
+  )
+  .add(
+    'mobile',
+    () => (
+      <Note>
+        <Editable id="1" editing="true" value="new task" onEdit={action('button-click')} />
+      </Note>
+    ),
+    {
+      viewport: 'iphone8p'
+    }
+  );