WIP: fix Storybook

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,21 @@
+// import '../src/styles/reset.css'
+
+// setup acquireVsCodeApi mock
+// @ts-ignore
+global.acquireVsCodeApi = () => ({
+  postMessage(event) {
+    console.log('ERROR: VSCode did not load properly in CodeRoad extension', event)
+  },
+})
+
+module.exports = {
+  core: {
+    builder: 'webpack5',
+  },
+  stories: ['../stories/Temp.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'],
+  }),
+}

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

@@ -45,12 +45,16 @@
   },
   "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/builder-webpack5": "6.4.19",
+    "@storybook/manager-webpack5": "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",
@@ -72,6 +76,7 @@
     "react-scripts": "4.0.3",
     "sass-loader": "12.3.0",
     "source-map-explorer": "2.5.2",
-    "typescript": "4.4.4"
+    "typescript": "4.4.4",
+    "webpack": "5"
   }
 }

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>