storybook

.storybook/main.js

+const postcssNormalize = require('postcss-normalize')
+const path = require('path')
+
+module.exports = {
+  stories: ['../src/common/**/*.stories.tsx'],
+  addons: [
+    {
+      name: '@storybook/preset-typescript',
+      options: {
+        tsLoaderOptions: {
+          configFile: path.resolve(__dirname, '../tsconfig.json'),
+        },
+      },
+    },
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-knobs',
+  ],
+  webpackFinal: async config => {
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: [
+        'style-loader',
+        'css-loader',
+        {
+          loader: require.resolve('postcss-loader'),
+          options: {
+            ident: 'postcss',
+            plugins: () => [
+              require('postcss-flexbugs-fixes'),
+              require('postcss-preset-env')({
+                autoprefixer: {
+                  flexbox: 'no-2009',
+                },
+                stage: 3,
+              }),
+              /*require('postcss-px-to-viewport')({
+                viewportWidth: 375,
+                unitPrecision: 6,
+                selectorBlackList: ['skip-vw'],
+              }),*/
+              postcssNormalize(),
+            ],
+            sourceMap: false,
+          },
+        },
+        {
+          loader: 'sass-loader',
+        },
+      ],
+    })
+    return config;
+  },
+};

stories/0-Welcome.stories.js

+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { Welcome } from '@storybook/react/demo';
+
+export default {
+  title: 'Welcome',
+  component: Welcome,
+};
+
+export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
+
+ToStorybook.story = {
+  name: 'to Storybook',
+};

stories/1-Button.stories.js

+import React from 'react';
+
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+
+export default {
+  title: 'Button',
+  component: Button,
+};
+
+export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+
+export const Emoji = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
+
+Emoji.story = {
+  name: 'with emoji',
+};