feat: new storybook generator

packages/generator/generator-common/src/locale/en.ts

@@ -30,6 +30,7 @@ export const EN_LOCALE = {
       test: 'Enable Unit Test / Integration Test',
       e2e_test: 'Enable E2E Test',
       storybook: 'Enable Storybook',
+      storybookV7: 'Enable Storybook V7',
       runtime_api: 'Enable Runtime API',
       mwa_storybook: 'Enable Visual Testing (Storybook)',
       ssg: 'Enable SSG',

packages/generator/generator-common/src/locale/zh.ts

@@ -29,6 +29,7 @@ export const ZH_LOCALE = {
       test: '启用「单元测试 / 集成测试」功能',
       e2e_test: '启用「E2E 测试」功能',
       storybook: '启用「Storybook」',
+      storybookV7: '启用「Storybook」V7',
       runtime_api: '启用「Runtime API」',
       mwa_storybook: '启用「Visual Testing (Storybook)」模式',
       ssg: '启用「SSG」功能',

packages/generator/generator-common/src/newAction/common/index.ts

@@ -60,6 +60,8 @@ export const ActionFunctionText: Record<ActionFunction, () => string> = {
   [ActionFunction.E2ETest]: () => i18n.t(localeKeys.action.function.e2e_test),
   [ActionFunction.Storybook]: () =>
     i18n.t(localeKeys.action.function.storybook),
+  [ActionFunction.StorybookV7]: () =>
+    i18n.t(localeKeys.action.function.storybookV7),
   [ActionFunction.RuntimeApi]: () =>
     i18n.t(localeKeys.action.function.runtime_api),
   [ActionFunction.SSG]: () => i18n.t(localeKeys.action.function.ssg),

packages/generator/generators/storybook-generator-next/src/index.ts

@@ -8,13 +8,17 @@ import {
   getPackageManagerText,
   fs,
   isReact18,
+  getPackageVersion,
 } from '@modern-js/generator-utils';
 import {
   DependenceGenerator,
   i18n as commonI18n,
   Language,
 } from '@modern-js/generator-common';
 import { i18n, localeKeys } from './locale';
+import { getMajorVersion } from './utils';
+
+const ADDON_ESSENTIAL = '@storybook/addon-essentials';
 
 const getGeneratorPath = (generator: string, distTag: string) => {
   if (process.env.CODESMITH_ENV === 'development') {
@@ -28,7 +32,7 @@ const getGeneratorPath = (generator: string, distTag: string) => {
 const handleTemplateFile = async (
   context: GeneratorContext,
   appApi: AppAPI,
-  _generator: GeneratorCore,
+  generator: GeneratorCore,
 ) => {
   const appDir = context.materials.default.basePath;
   const language = isTsProject(appDir) ? Language.TS : Language.JS;
@@ -94,43 +98,40 @@ const handleTemplateFile = async (
 
   const { modernVersion } = context.config;
 
-  const isExitAddons = pkg.devDependencies?.['@storybook/addon-essentials'];
+  const exitAddonsVersion = pkg.devDependencies?.[ADDON_ESSENTIAL];
   const isExitStorybook = pkg.devDependencies?.['@modern-js/storybook'];
 
+  const latestVersion = await getPackageVersion(ADDON_ESSENTIAL);
+  let availableVersion = latestVersion;
+
+  try {
+    if (exitAddonsVersion) {
+      const majorVersion = getMajorVersion(exitAddonsVersion);
+      generator.logger.info(
+        `Detected installed ${ADDON_ESSENTIAL}, version ${exitAddonsVersion}`,
+      );
+
+      // User specify addons with major version 7, so using users
+      if (majorVersion === 7) {
+        availableVersion = exitAddonsVersion;
+      }
+    } else {
+      const majorVersion = getMajorVersion(latestVersion);
+      if (majorVersion > 7) {
+        availableVersion = '^7';
+      }
+    }
+  } catch (_) {}
+
   const addStorybookDependence = {
-    ...(!isExitAddons
-      ? {
-          '@storybook/addon-essentials': 'latest',
-        }
-      : {}),
+    [ADDON_ESSENTIAL]: availableVersion,
     ...(!isExitStorybook
       ? {
           '@modern-js/storybook': modernVersion,
         }
       : {}),
   };
 
-  // // modify stories/tsconfig.json
-  // if (language === Language.TS) {
-  //   const jsonAPI = new JsonAPI(generator);
-  //   await jsonAPI.update(
-  //     context.materials.default.get(
-  //       path.join(appDir, './stories/tsconfig.json'),
-  //     ),
-  //     {
-  //       query: {},
-  //       update: {
-  //         $set: {
-  //           'compilerOptions.paths': {
-  //             [`${pkg.name}`]: ['.'],
-  //             [`${pkg.name}/*`]: ['./*'],
-  //           },
-  //         },
-  //       },
-  //     },
-  //   );
-  // }
-
   await appApi.runSubGenerator(
     getGeneratorPath(DependenceGenerator, context.config.distTag),
     undefined,

packages/generator/generators/storybook-generator-next/src/utils.ts

@@ -0,0 +1,7 @@
+export const MAJOR_VERSION_RE = /(\d+)\./;
+
+export function getMajorVersion(v: string) {
+  const major = v.match(MAJOR_VERSION_RE)![1];
+
+  return parseInt(major, 10);
+}