Configure storybook

.storybook/addons.js

@@ -0,0 +1,3 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-viewport/register';

.storybook/config.tsx

@@ -0,0 +1,13 @@
+import { configure, addDecorator } from '@storybook/react';
+
+import storyDecorator from './storyDecorator';
+
+const req = require.context('../packages/app', true, /\.story\.[tj]sx?$/);
+
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+addDecorator(storyDecorator);
+
+configure(loadStories, module);

.storybook/storyDecorator.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ContextProvider } from 'app/shell';
+import { browserHistory } from 'app/services/history';
+import storeFactory from 'app/storeFactory';
+
+const store = storeFactory();
+
+export default story => (
+  <ContextProvider store={store} history={browserHistory}>
+    {story()}
+  </ContextProvider>
+);

.storybook/webpack.config.js

@@ -0,0 +1,14 @@
+const rootConfig = require('../webpack.config');
+
+module.exports = async ({ config }) => ({
+  ...config,
+  resolve: rootConfig.resolve,
+  module: {
+    ...config.module,
+    // our rules should satisfy all storybook needs,
+    // so replace all storybook defaults with our rules
+    rules: rootConfig.module.rules,
+  },
+
+  resolveLoader: rootConfig.resolveLoader,
+});

package.json

@@ -43,7 +43,9 @@
     "build:webpack": "webpack --colors -p --bail",
     "build:quiet": "yarn run clean && yarn run build:webpack --quiet",
     "build:dll": "node ./packages/scripts/build-dll.js",
-    "build:serve": "http-server --proxy https://dev.account.ely.by ./dist"
+    "build:serve": "http-server --proxy https://dev.account.ely.by ./dist",
+    "sb": "start-storybook -p 9009 --ci",
+    "build-storybook": "build-storybook"
   },
   "husky": {
     "hooks": {
@@ -110,6 +112,11 @@
     "@babel/preset-react": "^7.7.4",
     "@babel/preset-typescript": "^7.7.4",
     "@babel/runtime-corejs3": "^7.7.4",
+    "@storybook/addon-actions": "^5.2.8",
+    "@storybook/addon-links": "^5.2.8",
+    "@storybook/addon-viewport": "^5.2.8",
+    "@storybook/addons": "^5.2.8",
+    "@storybook/react": "^5.2.8",
     "@types/jest": "^24.0.23",
     "@types/webpack-env": "^1.14.1",
     "@typescript-eslint/eslint-plugin": "^2.9.0",

packages/app/components/ui/buttons.scss

@@ -96,3 +96,8 @@
   background: #95a5a6;
   cursor: default;
 }
+
+.disabled {
+  cursor: default;
+  pointer-events: none;
+}

packages/app/components/ui/form/Button.story.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import Button from './Button';
+
+storiesOf('ui/form', module).add('Button', () => (
+  <>
+    <div>
+      <Button label="Green Button" />{' '}
+      <Button label="Blue Button" color="blue" />{' '}
+      <Button label="DarkBlue Button" color="darkBlue" />{' '}
+      <Button label="Violet Button" color="violet" />{' '}
+      <Button label="LightViolet Button" color="lightViolet" />{' '}
+      <Button label="Orange Button" color="orange" />{' '}
+      <Button label="Red Button" color="red" />{' '}
+      <Button label="Black Button" color="black" />{' '}
+      <Button label="White Button" color="white" />
+    </div>
+    <div>
+      <h2>Disabled buttons</h2>
+      <Button disabled label="Green Button" />{' '}
+      <Button disabled label="Blue Button" color="blue" />{' '}
+      <Button disabled label="DarkBlue Button" color="darkBlue" />{' '}
+      <Button disabled label="Violet Button" color="violet" />{' '}
+      <Button disabled label="LightViolet Button" color="lightViolet" />{' '}
+      <Button disabled label="Orange Button" color="orange" />{' '}
+      <Button disabled label="Red Button" color="red" />{' '}
+      <Button disabled label="Black Button" color="black" />{' '}
+      <Button disabled label="White Button" color="white" />
+    </div>
+    <div>
+      <h2>Button sizes</h2>
+      <Button label="Default button" /> <Button label="Small button" small />{' '}
+      <br />
+      <br />
+      <Button label="Block button" block />
+      <br />
+      <Button label="Small block button" small block />
+    </div>
+    <div>
+      <h2>Loading button</h2>
+      <Button loading label="Green Button" />{' '}
+      <Button loading label="Blue Button" color="blue" />{' '}
+      <Button loading label="DarkBlue Button" color="darkBlue" />{' '}
+      <Button loading label="Violet Button" color="violet" />{' '}
+      <Button loading label="LightViolet Button" color="lightViolet" />{' '}
+      <Button loading label="Orange Button" color="orange" />{' '}
+      <Button loading label="Red Button" color="red" />{' '}
+      <Button loading label="Black Button" color="black" />{' '}
+      <Button loading label="White Button" color="white" />
+    </div>
+  </>
+));

packages/app/components/ui/form/Button.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import clsx from 'clsx';
-import buttons from 'app/components/ui/buttons.scss';
 import { COLOR_GREEN } from 'app/components/ui';
 import { MessageDescriptor } from 'react-intl';
 import { Color } from 'app/components/ui';
 
+import buttons from '../buttons.scss';
 import FormComponent from './FormComponent';
 
 export default class Button extends FormComponent<

tsconfig.json

@@ -14,5 +14,5 @@
     "resolveJsonModule": false,
     "jsx": "preserve"
   },
-  "include": ["@types", "packages", "config"]
+  "include": ["@types", "packages", "config", ".storybook"]
 }

webpack.config.js

@@ -131,7 +131,7 @@ const webpackConfig = {
   module: {
     rules: [
       {
-        test: /\.scss$/,
+        test: /\.s?css$/,
         use: [
           'style-loader',
           {