fix: converting stories

web-app/.babelrc.json

@@ -0,0 +1,67 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "shippedProposals": true,
+        "loose": true
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-shorthand-properties",
+    "@babel/plugin-transform-block-scoping",
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true
+      }
+    ],
+    [
+      "@babel/plugin-proposal-private-property-in-object",
+      {
+        "loose": true
+      }
+    ],
+    [
+      "@babel/plugin-proposal-private-methods",
+      {
+        "loose": true
+      }
+    ],
+    "@babel/plugin-proposal-export-default-from",
+    "@babel/plugin-syntax-dynamic-import",
+    [
+      "@babel/plugin-proposal-object-rest-spread",
+      {
+        "loose": true,
+        "useBuiltIns": true
+      }
+    ],
+    "@babel/plugin-transform-classes",
+    "@babel/plugin-transform-arrow-functions",
+    "@babel/plugin-transform-parameters",
+    "@babel/plugin-transform-destructuring",
+    "@babel/plugin-transform-spread",
+    "@babel/plugin-transform-for-of",
+    "babel-plugin-macros",
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+    [
+      "babel-plugin-polyfill-corejs3",
+      {
+        "method": "usage-global",
+        "absoluteImports": "core-js",
+        "version": "3.21.1"
+      }
+    ]
+  ]
+}

web-app/.storybook/main.ts

@@ -0,0 +1,42 @@
+const path = require('path')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+// import '../src/styles/reset.css'
+
+module.exports = {
+  core: {
+    builder: 'webpack4',
+  },
+  stories: ['../stories/Temp.stories.tsx', '../stories/Error.stories.tsx'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-knobs', '@storybook/addon-links'],
+  babel: async (options) => ({
+    ...options,
+    presets: [...options.presets, '@emotion/babel-preset-css-prop', '@babel/preset-react'],
+    plugins: [
+      [
+        'import',
+        {
+          libraryName: '@alifd/next',
+          style: true,
+        },
+      ],
+    ],
+  }),
+  webpackFinal: (config) => {
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: ['style-loader', 'css-loader', 'sass-loader'],
+    })
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      loader: require.resolve('babel-loader'),
+    })
+
+    config.plugins.push(new MiniCssExtractPlugin({ filename: '[name].css' }))
+    config.resolve.extensions.push('.ts', '.tsx')
+
+    config.resolve.modules = ['node_modules', path.resolve(__dirname, '../src')]
+
+    return config
+  },
+}

web-app/.storybook/preview.ts

@@ -0,0 +1,7 @@
+// setup acquireVsCodeApi mock
+// @ts-ignore
+global.acquireVsCodeApi = () => ({
+  postMessage(event) {
+    console.log('ERROR: VSCode did not load properly in CodeRoad extension', event)
+  },
+})

web-app/.storybook/webpack.config.js

@@ -12,27 +12,16 @@ module.exports = ({ config }) => {
   config.module.rules.push({
     test: /\.(ts|tsx)$/,
     loader: require.resolve('babel-loader'),
-    options: {
-      plugins: [
-        new MiniCssExtractPlugin(),
-        [
-          'babel-plugin-import',
-          {
-            libraryName: '@alifd/next',
-            style: true,
-          },
-        ],
-      ],
-      presets: [
-        // react-app
-        ['react-app', { flow: false, typescript: true }],
-        // allow emotion css prop on html
-        ['@emotion/babel-preset-css-prop'],
-      ],
-    },
   })
 
   config.plugins.push(new MiniCssExtractPlugin({ filename: '[name].css' }))
+  // config.plugins.push([
+  //   'babel-plugin-import',
+  //   {
+  //     libraryName: '@alifd/next',
+  //     style: true,
+  //   },
+  // ])
 
   config.resolve.extensions.push('.ts', '.tsx')
 

web-app/package.json

@@ -35,6 +35,7 @@
     "js-yaml": "4.1.0",
     "markdown-it": "12.3.2",
     "markdown-it-emoji": "2.0.0",
+    "moment": "^2.20.1",
     "prismjs": "1.27.0",
     "react": "16.13.1",
     "react-addons-css-transition-group": "15.6.2",
@@ -46,12 +47,14 @@
   },
   "devDependencies": {
     "@babel/core": "7.14.0",
-    "@storybook/addon-actions": "6.4.0",
+    "@babel/helper-environment-visitor": "7.16.7",
+    "@babel/preset-react": "7.16.7",
+    "@storybook/addon-actions": "6.4.19",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-links": "6.4.0",
-    "@storybook/addons": "6.4.0",
-    "@storybook/preset-create-react-app": "3.2.0",
-    "@storybook/react": "6.4.0",
+    "@storybook/addon-links": "6.4.19",
+    "@storybook/addons": "6.4.19",
+    "@storybook/preset-create-react-app": "4.1.0",
+    "@storybook/react": "6.4.19",
     "@types/git-url-parse": "9.0.1",
     "@types/graphql": "14.5.0",
     "@types/highlight.js": "10.1.0",
@@ -70,8 +73,10 @@
     "prettier": "2.5.0",
     "react-app-rewired": "2.1.8",
     "react-scripts": "4.0.3",
-    "sass-loader": "12.3.0",
+    "sass-loader": "^10.0.0",
     "source-map-explorer": "2.5.2",
-    "typescript": "4.4.4"
+    "style-loader": "^2.0.0",
+    "typescript": "4.4.4",
+    "webpack": "^4.0.0"
   }
 }

web-app/stories/Error.stories.tsx

@@ -1,20 +1,27 @@
 import * as E from '../../typings/error'
-import { action } from '@storybook/addon-actions'
-import { storiesOf } from '@storybook/react'
 import React from 'react'
 import ErrorView from '../src/components/Error'
-import SideBarDecorator from './utils/SideBarDecorator'
 
-storiesOf('Error', module)
-  .addDecorator(SideBarDecorator)
-  .add('Error', () => {
-    const error: E.ErrorMessage = {
-      type: 'UnknownError',
-      message: '### Message summary\n\nSome message about what went wrong under here',
-      actions: [
-        { label: 'First', transition: 'FIRST' },
-        { label: 'Second', transition: 'SECOND' },
-      ],
-    }
-    return <ErrorView error={error} send={action('send')} />
-  })
+const Error = ({ send }) => {
+  const error: E.ErrorMessage = {
+    type: 'UnknownError',
+    message: '### Message summary\n\nSome message about what went wrong under here',
+    actions: [
+      { label: 'First', transition: 'FIRST' },
+      { label: 'Second', transition: 'SECOND' },
+    ],
+  }
+  return <ErrorView error={error} send={send} />
+}
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Error',
+  component: ErrorView,
+  argTypes: { send: { action: 'send' } },
+}
+
+export const Primary = () => <Error />

web-app/stories/Temp.stories.tsx

@@ -0,0 +1,16 @@
+// Button.stories.js|jsx
+
+import React from 'react'
+
+const Button = ({ primary, children }) => <button>{children}</button>
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+}
+
+export const Primary = () => <Button primary>Button</Button>