📗 Upgraded Storybook to v7 rc (#69)

.eslintrc.js

@@ -1,14 +1,14 @@
 module.exports = {
-  extends: ["plugin:react/recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", "plugin:css-modules/recommended", "plugin:storybook/recommended", "plugin:storybook/recommended", "plugin:storybook/recommended"],
+  extends: ["plugin:react/recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", "plugin:css-modules/recommended", "plugin:storybook/recommended", "plugin:storybook/recommended", "plugin:storybook/recommended", "plugin:storybook/recommended"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     sourceType: "module",
     ecmaVersion: 2020,
     ecmaFeatures: {
       jsx: true // Allows for the parsing of JSX
-
     }
   },
+
   plugins: ["@typescript-eslint", "css-modules"],
   settings: {
     "import/resolver": {
@@ -18,9 +18,9 @@ module.exports = {
     },
     react: {
       version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
-
     }
   },
+
   // Fine tune rules
   rules: {
     "@typescript-eslint/no-var-requires": 0

.storybook/main.js

@@ -1,19 +0,0 @@
-module.exports = {
-  stories: [
-    "../src/client/stories/*.stories.mdx",
-    "../src/client/stories/*.stories.@(js|jsx|ts|tsx)",
-  ],
-  staticDirs: [
-    "../src/client/stories/assets"
-  ],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/preset-scss",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-  ],
-  framework: "@storybook/react",
-  core: {
-    builder: "webpack5",
-  },
-};

.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

.storybook/preview.js

@@ -1,9 +0,0 @@
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-}

.storybook/preview.ts

@@ -0,0 +1,18 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    backgrounds: {
+      default: "light",
+    },
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

package.json

@@ -8,7 +8,9 @@
     "build": "vite build",
     "dev": "rimraf dist && npm run build && vite",
     "prod": "npm run build && vite",
-    "docs": "jsdoc -c jsdoc.json"
+    "docs": "jsdoc -c jsdoc.json",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "author": "Rishi Ghan",
   "license": "MIT",
@@ -93,6 +95,13 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.13.0",
+    "@storybook/addon-essentials": "^7.0.0-rc.3",
+    "@storybook/addon-interactions": "^7.0.0-rc.3",
+    "@storybook/addon-links": "^7.0.0-rc.3",
+    "@storybook/blocks": "^7.0.0-rc.3",
+    "@storybook/react": "^7.0.0-rc.3",
+    "@storybook/react-vite": "^7.0.0-rc.3",
+    "@storybook/testing-library": "^0.0.14-next.1",
     "@tsconfig/node14": "^1.0.0",
     "@types/express": "^4.17.8",
     "@types/jest": "^26.0.20",
@@ -117,6 +126,7 @@
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-storybook": "^0.6.11",
     "express": "^4.17.1",
     "install": "^0.13.0",
     "jest": "^26.6.3",
@@ -126,8 +136,9 @@
     "react-refresh": "^0.14.0",
     "rimraf": "^4.1.3",
     "sass": "^1.58.1",
+    "storybook": "^7.0.0-rc.3",
     "tslint": "^6.1.3",
-    "typescript": "^4.2.3",
+    "typescript": "^4.9",
     "vite": "^4.1.1"
   }
 }

src/client/stories/MetadataPanel.stories.tsx

@@ -30,20 +30,20 @@ RawFileDetails.args = {
         },
         "inferredMetadata": {
           "issue": {
-            "name": "Fantastic Four 143",
+            "name": "Batman Annual 02",
             "number": 197402,
             "year": "1974",
             "subtitle": ""
           }
         },
         "rawFileDetails": {
-          "name": "197402 Fantastic Four 143",
+          "name": "Batman Annual 02",
           "filePath": "/Users/rishi/work/threetwo-core-service/comics/197402 Fantastic Four 143.cbz",
           "fileSize": 10341074,
           "extension": ".cbz",
           "containedIn": "./userdata/covers/197402 Fantastic Four 143",
           "cover": {
-            "filePath": "userdata/covers/197402 Fantastic Four 143/FF143_01.jpg"
+            "filePath": "userdata/covers/Batman Annual 02/Batman 002_00a.jpg"
           }
         },
         "sourcedMetadata": { "comicInfo": null, "comicvine": { "aliases": [] } },