feat!: upgrade storybook v7

it also update the builder to vite(rollup-based).
refs: #121

src/getInstallArgs.ts

@@ -4,6 +4,9 @@ export default function getInstallArgs(
   cmd: InstallCommand,
   packages: string[]
 ) {
+  // replace 'package#version' with 'package@version'
+  packages = packages.map(pkg => pkg.replace(/#/, '@'));
+
   switch (cmd) {
     case 'npm':
       return ['install', ...packages, '--save-dev'];

src/templates/react-with-storybook.ts

@@ -6,22 +6,25 @@ const storybookTemplate: Template = {
   dependencies: [
     ...reactTemplate.dependencies,
     '@babel/core',
-    '@storybook/addon-essentials',
-    '@storybook/addon-links',
-    '@storybook/addon-info',
-    '@storybook/addons',
-    '@storybook/react',
+    'storybook#next',
+    "@storybook/addon-essentials#next",
+    "@storybook/addon-info#next",
+    "@storybook/addon-links#next",
+    "@storybook/addons#next",
+    "@storybook/react#next",
+    "@storybook/react-vite#next",
+    "vite",
     'react-is',
     'babel-loader',
-    '@tsconfig/create-react-app',
+    '@tsconfig/vite-react',
   ],
   name: 'react-with-storybook',
   packageJson: {
     ...reactTemplate.packageJson,
     scripts: {
       ...reactTemplate.packageJson.scripts,
-      storybook: 'start-storybook -p 6006',
-      'build-storybook': 'build-storybook',
+      storybook: 'storybook dev -p 6006',
+      'build-storybook': 'storybook build',
     } as PackageJson['scripts'],
     jest: {
       testEnvironment: 'jsdom',

templates/react-with-storybook/.storybook/main.js → templates/react-with-storybook/.storybook/main.ts

@@ -3,6 +3,14 @@ module.exports = {
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
   typescript: {
-    check: true, // type-check stories during Storybook build
+    check: true // type-check stories during Storybook build
+  },
+
+  framework: {
+    name: '@storybook/react-vite',
+    options: {}
+  },
+  docs: {
+    autodocs: true
   }
-};
+};

templates/react-with-storybook/.storybook/preview.ts

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

templates/react-with-storybook/tsconfig.json

@@ -1,5 +1,5 @@
 {
   // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
-  "extends": "@tsconfig/create-react-app/tsconfig.json",
+  "extends": "@tsconfig/vite-react/tsconfig.json",
   "include": ["src", "types"],
 }