Fixes broken storybook build

.github/workflows/ui-build.yml

@@ -39,3 +39,7 @@ jobs:
       - name: Build OSS app
         working-directory: ./src/ui/app
         run: npm run build
+
+      - name: Build Storybook
+        working-directory: ./src/ui/common
+        run: npm run build-storybook

src/ui/app/package.json

@@ -43,15 +43,15 @@
     "@parcel/css": "^1.14.0",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
-    "@typescript-eslint/parser": "^5.49.0",
-    "eslint": "^8.32.0",
-    "eslint-formatter-table": "^7.32.1",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.1",
-    "eslint-plugin-simple-import-sort": "^9.0.0",
-    "eslint-plugin-unused-imports": "^2.0.0",
+    "@typescript-eslint/eslint-plugin": "5.59.5",
+    "@typescript-eslint/parser": "5.59.5",
+    "eslint": "8.40.0",
+    "eslint-formatter-table": "7.32.1",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-simple-import-sort": "10.0.0",
+    "eslint-plugin-unused-imports": "2.0.0",
     "os-browserify": "^0.3.0",
     "parcel": "^2.8.3",
     "parcel-resolver-ignore": "2.1.3",

src/ui/common/.babelrc

@@ -1,6 +1,7 @@
 {
   "presets": [
-    "@babel/preset-react"
+    "@babel/preset-react",
+    "@babel/preset-typescript"
   ],
   "plugins": [
     "@emotion/babel-plugin"

src/ui/common/.eslintrc.js

@@ -10,16 +10,16 @@ module.exports = {
     // Allows for the use of imports
     ecmaFeatures: {
       jsx: true // Allows for the parsing of JSX
-
     }
   },
+
   settings: {
     react: {
       version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
-
     }
   },
-  extends: ["plugin:react/recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
+
+  extends: ['plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended', 'plugin:storybook/recommended'],
   plugins: ['simple-import-sort', "unused-imports", "react-hooks"],
   rules: {
     // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
@@ -31,7 +31,8 @@ module.exports = {
     'no-unused-vars': 'off',
     'unused-imports/no-unused-imports': 'error',
     'react/jsx-child-element-spacing': 'off',
-    'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
-    'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
-  },
-};
+    'react-hooks/rules-of-hooks': 'error',
+    // Checks rules of Hooks
+    'react-hooks/exhaustive-deps': 'warn' // Checks effect dependencies
+  }
+};

src/ui/common/.storybook/main.js

@@ -1,30 +1,22 @@
 module.exports = {
   module: {
-    rules: [
-      {
-        test: /\.(stories|story)\.mdx$/,
-        use: [
-          {
-            loader: require.resolve('@storybook/mdx2-csf/loader'),
-            options: {},
-          }
-        ]
-      }
-    ]
+    rules: [{
+      test: /\.(stories|story)\.mdx$/,
+      use: [{
+        loader: require.resolve('@storybook/mdx2-csf/loader'),
+        options: {}
+      }]
+    }]
   },
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-  ],
-  framework: "@storybook/react",
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/addon-mdx-gfm"],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {}
+  },
   features: {
     previewMdx2: true
   },
-  core: {
-    builder: "@storybook/builder-webpack5",
-  },
   typescript: {
     check: false,
     checkOptions: {},
@@ -39,10 +31,10 @@ module.exports = {
       // makes string and boolean types that can be undefined appear as inputs and switches
       shouldRemoveUndefinedFromOptional: true,
       // Filter out third-party props from node_modules except @mui packages
-      propFilter: (prop) =>
-        prop.parent
-          ? !/node_modules\/(?!@mui)/.test(prop.parent.fileName)
-          : true,
-    },
+      propFilter: prop => prop.parent ? !/node_modules\/(?!@mui)/.test(prop.parent.fileName) : true
+    }
   },
+  docs: {
+    autodocs: true
+  }
 };