storybook

Author: righ

.babelrc

@@ -1,7 +1,8 @@
 {
   "presets": [
     "@babel/preset-env",
-    "@babel/preset-react"
+    "@babel/preset-react",
+    "@babel/preset-typescript"
   ],
   "plugins": [
     "@babel/plugin-syntax-dynamic-import"

.gitignore

@@ -108,3 +108,5 @@ stories/
 storybook-static/
 .idea
 .DS_Store
+
+*storybook.log

.storybook/main.js

@@ -0,0 +1,43 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+import path from "path";
+
+
+const config: StorybookConfig = {
+  stories: ["../.examples/**/*.mdx", "../.examples/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+    "@storybook/addon-webpack5-compiler-babel"
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+  webpackFinal: async (config, { configType }) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+
+    // Make whatever fine-grained changes you need
+    config.module?.rules?.push({
+      test: /\.less$/,
+      use: ['style-loader', 'css-loader', 'less-loader'],
+      include: path.resolve(__dirname, '../'),
+    });
+    config.module?.rules?.push({
+      test: /\.ipynb$/,
+      use: ['json-loader'],
+      include: path.resolve(__dirname, '../'),
+    });
+    // Return the altered config
+    return config;
+  },
+};
+export default config;

.storybook/main.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

.storybook/preview.js

@@ -9,8 +9,8 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "rm -rf ./dist && webpack",
     "analyze": "rm -rf ./dist && webpack --analyze",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "build-default-css": "lessc --clean-css ./src/styles/default.less ./dist/styles/default.css",
     "build-dark-css": "lessc --clean-css ./src/styles/dark.less ./dist/styles/dark.css",
     "build-darkbronco-css": "lessc --clean-css ./src/styles/darkbronco.less ./dist/styles/darkbronco.css",
@@ -41,10 +41,18 @@
     "@babel/preset-env": "^7.14.4",
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
-    "@storybook/addon-actions": "^6.0.21",
-    "@storybook/addon-essentials": "^6.0.21",
-    "@storybook/addon-links": "^6.0.21",
-    "@storybook/react": "^6.0.21",
+    "@chromatic-com/storybook": "^1.2.22",
+    "@storybook/addon-actions": "^8.0.0",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
+    "@storybook/addon-onboarding": "^8.0.0",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+    "@storybook/blocks": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-webpack5": "^8.0.0",
+    "@storybook/test": "^8.0.0",
     "@types/dompurify": "^2.4.0",
     "@types/katex": "^0.11.1",
     "@types/node": "^15.12.1",
@@ -57,6 +65,7 @@
     "eslint": "^7.19.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-storybook": "^0.8.0",
     "file-loader": "^6.2.0",
     "json-loader": "^0.5.7",
     "katex": "^0.13.18",
@@ -69,6 +78,7 @@
     "react-is": "^16.13.1",
     "rehype-katex": "^6.0.2",
     "require-context.macro": "^1.2.2",
+    "storybook": "^8.0.0",
     "ts-loader": "8.2.0",
     "typescript": "^4.0.3",
     "typescript-declaration-webpack-plugin": "^0.2.2",
@@ -97,5 +107,10 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/righ/react-ipynb-renderer.git"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
   }
 }