fix(storybook): fix build

.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.storybook/main.ts

@@ -1,15 +1,11 @@
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions"
-  ],
-  "framework": "@storybook/react",
-  "core": {
-    "builder": "@storybook/builder-webpack5"
+  "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
+  "framework": {
+    name: "@storybook/react-webpack5",
+    options: {}
+  },
+  docs: {
+    autodocs: true
   }
-}
+};

package.json

@@ -50,8 +50,8 @@
     "start:preload": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.preload.dev.ts",
     "start:renderer": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.renderer.dev.ts",
     "test": "jest",
-    "storybook": "concurrently \"npm run watch:css\" \"start-storybook -p 6006\"",
-    "build-storybook": "build-storybook",
+    "storybook": "concurrently \"npm run watch:css\" \"storybook dev\"",
+    "build-storybook": "storybook build",
     "build:css": "npx tailwindcss -i ./src/renderer/app/app.css -o ./src/renderer/app/tailwind.css",
     "watch:css": "npx tailwindcss -i ./src/renderer/app/app.css -o ./src/renderer/app/tailwind.css --watch"
   },
@@ -130,15 +130,17 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.5",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^7.0.2",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-actions": "^7.0.17",
+    "@storybook/addon-essentials": "^7.0.17",
+    "@storybook/addon-interactions": "^7.0.17",
+    "@storybook/addon-links": "^7.0.17",
+    "@storybook/react": "^7.0.17",
+    "@storybook/react-webpack5": "^7.0.17",
+    "@storybook/testing-library": "^0.1.0",
     "@svgr/webpack": "^6.3.1",
     "@teamsupercell/typings-for-css-modules-loader": "^2.5.2",
     "@testing-library/jest-dom": "^5.16.5",
@@ -181,7 +183,7 @@
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.10",
+    "eslint-plugin-storybook": "^0.6.12",
     "file-loader": "^6.2.0",
     "fs-lint": "^1.0.1",
     "html-webpack-plugin": "^5.5.0",
@@ -199,6 +201,7 @@
     "rimraf": "^3.0.2",
     "sass": "^1.54.4",
     "sass-loader": "^13.0.2",
+    "storybook": "^7.0.17",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.2.4",
     "terser-webpack-plugin": "^5.3.5",

src/renderer/components/atoms/button/button.stories.mdx

@@ -1,4 +1,4 @@
-<!-- button.stories.mdx -->
+{/* button.stories.mdx */}
 
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 

src/renderer/components/atoms/input/input.stories.mdx

@@ -1,4 +1,4 @@
-<!-- Input.stories.mdx -->
+{/* Input.stories.mdx */}
 
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { AlertIcon } from '@primer/octicons-react';

src/renderer/components/atoms/selection-list/selection-list.stories.mdx

@@ -1,4 +1,4 @@
-<!-- Input.stories.mdx -->
+{/* Input.stories.mdx */}
 
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { COLORS } from '../../../constants'

src/renderer/components/atoms/text/text.stories.mdx

@@ -1,4 +1,4 @@
-<!-- Text.stories.mdx -->
+{/* Text.stories.mdx */}
 
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 

src/renderer/components/molecules/select/select.stories.mdx

@@ -1,4 +1,4 @@
-<!-- Select.stories.mdx -->
+{/* Select.stories.mdx */}
 
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { COLORS } from '../../../constants'

src/stories/colors.stories.mdx

@@ -1,4 +1,4 @@
-<!-- colors.stories.mdx -->
+{/* colors.stories.mdx */}
 
 import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';