chore: upgrade storybook to v7

.gitignore

@@ -23,4 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 
-storybook-static
+storybook-static
+docs

.npmrc

@@ -1,2 +1,2 @@
 # .npmrc
-engine-strict=true
+engine-strict=true

.storybook/main.js

@@ -4,6 +4,10 @@ const toPath = (_path) => path.join(process.cwd(), _path);
 module.exports = {
   stories: ["../src/**/*.stories.@(tsx)"],
   addons: ["@storybook/addon-essentials"],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
   webpackFinal: (config) => {
     return {
       ...config,

.storybook/main.ts

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

.storybook/preview.js

@@ -1,5 +1,6 @@
 import React from "react";
-import { addDecorator } from "@storybook/react";
 import "../src/main.css";
 
-addDecorator((storyFn) => <>{storyFn()}</>);
+ export default {
+    decorators: [(storyFn) => <>{storyFn()}</>],
+  };

.storybook/preview.ts

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