@nx/storybook 22.1.0-beta.5 → 22.1.0-beta.7

package/migrations.json

@@ -634,8 +634,8 @@
         }
       }
     },
-    "21.2.0": {
-      "version": "21.2.0-beta.3",
+    "22.1.0": {
+      "version": "22.1.0-beta.6",
       "x-prompt": "Do you want to update Storybook to version 10?",
       "implementation": "./src/migrations/update-21-2-0/migrate-to-storybook-10",
       "requires": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/storybook",
-  "version": "22.1.0-beta.5",
+  "version": "22.1.0-beta.7",
   "private": false,
   "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.",
   "repository": {
@@ -33,16 +33,16 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@nx/devkit": "22.1.0-beta.5",
+    "@nx/devkit": "22.1.0-beta.7",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "semver": "^7.6.3",
     "tslib": "^2.3.0",
-    "@nx/cypress": "22.1.0-beta.5",
-    "@nx/js": "22.1.0-beta.5",
-    "@nx/eslint": "22.1.0-beta.5"
+    "@nx/cypress": "22.1.0-beta.7",
+    "@nx/js": "22.1.0-beta.7",
+    "@nx/eslint": "22.1.0-beta.7"
   },
   "devDependencies": {
-    "nx": "22.1.0-beta.5"
+    "nx": "22.1.0-beta.7"
   },
   "peerDependencies": {
     "storybook": ">=7.0.0 <11.0.0"

package/src/migrations/update-22-1-0/files/ai-instructions-for-cjs-esm.md

@@ -0,0 +1,175 @@
+# Instructions for LLM: Transform Storybook Config Files from CommonJS to ESM
+
+## Task Overview
+
+Find all .storybook/main.ts and .storybook/main.js files in the workspace and transform
+any CommonJS (CJS) configurations to ES Modules (ESM).
+
+### Step 1: Find All Storybook Config Files
+
+Use glob patterns to locate all Storybook main configuration files:
+**/.storybook/main.js
+**/.storybook/main.ts
+
+### Step 2: Identify CommonJS vs ESM
+
+For each file found, read its contents and determine if it uses CommonJS syntax by
+checking for:
+
+CommonJS indicators:
+
+- `module.exports =` or `module.exports.`
+- `exports.`
+- `require()` function calls
+
+ESM indicators (already correct):
+
+- export default
+- export const/export function
+- import statements
+
+### Step 3: Transform CJS to ESM
+
+For each file identified as CommonJS, perform the following transformations:
+
+A. Convert `module.exports`
+
+// FROM (CJS):
+
+```
+module.exports = {
+    stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+    addons: ['@storybook/addon-essentials']
+};
+```
+
+// TO (ESM):
+
+```
+export default {
+    stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+    addons: ['@storybook/addon-essentials']
+};
+```
+
+B. Convert `require()` to import
+
+// FROM (CJS):
+
+```
+const { nxViteTsPaths } = require('@nx/vite/plugins/nx-tsconfig-paths.plugin');
+const { mergeConfig } = require('vite');
+```
+
+// TO (ESM):
+
+```
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { mergeConfig } from 'vite';
+```
+
+C. Handle `path.join()` patterns
+
+// FROM (CJS):
+
+```
+const path = require('path');
+const rootMain = require(path.join(__dirname, '../../.storybook/main'));
+```
+
+// TO (ESM):
+
+```
+import { join } from 'path';
+import rootMain from '../../.storybook/main';
+```
+
+D. Handle Dynamic Requires in Config Functions
+
+// FROM (CJS):
+
+```
+module.exports = {
+    viteFinal: async (config) => {
+        const { mergeConfig } = require('vite');
+        return mergeConfig(config, {});
+    }
+};
+```
+
+// TO (ESM):
+
+```
+import { mergeConfig } from 'vite';
+
+export default {
+    viteFinal: async (config) => {
+        return mergeConfig(config, {});
+    }
+};
+```
+
+### Step 4: Validation Checks
+
+After transformation, verify:
+
+1. All require() calls have been converted to import statements at the top of the file
+2. All module.exports have been converted to export default or named exports
+3. Imports are at the top of the file (before the export)
+4. The file maintains proper TypeScript typing if it's a .ts file
+
+### Step 5: Report Results
+
+Provide a summary of:
+
+- Total files found
+- Files that were already ESM (no changes needed)
+- Files that were transformed from CJS to ESM
+- List the specific files that were modified
+
+### Example Complete Transformation
+
+Before (CJS):
+
+```
+const path = require('path');
+const { mergeConfig } = require('vite');
+
+module.exports = {
+    stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+    addons: ['@storybook/addon-essentials'],
+    viteFinal: async (config) => {
+        return mergeConfig(config, {
+            resolve: {
+                alias: {}
+            }
+        });
+    }
+};
+```
+
+After (ESM):
+
+```
+import { join } from 'path';
+import { mergeConfig } from 'vite';
+
+export default {
+    stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+    addons: ['@storybook/addon-essentials'],
+    viteFinal: async (config) => {
+        return mergeConfig(config, {
+            resolve: {
+                alias: {}
+            }
+        });
+    }
+};
+```
+
+## Important Notes
+
+- Preserve all comments in the original files
+- Maintain the same indentation and formatting style
+- For TypeScript files (.ts), ensure type imports use import type when appropriate
+- Test that the transformations don't break the Storybook configuration

package/src/migrations/update-22-1-0/migrate-to-storybook-10.d.ts

@@ -1,3 +1,3 @@
 import { Tree } from '@nx/devkit';
-export default function migrateToStorybook10(tree: Tree): Promise<void>;
+export default function migrateToStorybook10(tree: Tree): Promise<string[]>;
 //# sourceMappingURL=migrate-to-storybook-10.d.ts.map

package/src/migrations/update-22-1-0/migrate-to-storybook-10.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"migrate-to-storybook-10.d.ts","sourceRoot":"","sources":["../../../../../../packages/storybook/src/migrations/update-22-1-0/migrate-to-storybook-10.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAKlC,wBAA8B,oBAAoB,CAAC,IAAI,EAAE,IAAI,iBAa5D"}
+{"version":3,"file":"migrate-to-storybook-10.d.ts","sourceRoot":"","sources":["../../../../../../packages/storybook/src/migrations/update-22-1-0/migrate-to-storybook-10.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAOlC,wBAA8B,oBAAoB,CAAC,IAAI,EAAE,IAAI,qBA6B5D"}

package/src/migrations/update-22-1-0/migrate-to-storybook-10.js

@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = migrateToStorybook10;
 const output_1 = require("nx/src/utils/output");
 const migrate_10_1 = require("../../generators/migrate-10/migrate-10");
+const path_1 = require("path");
+const fs_1 = require("fs");
 async function migrateToStorybook10(tree) {
     output_1.output.log({
         title: 'Migrating Storybook to v10',
@@ -13,7 +15,17 @@ async function migrateToStorybook10(tree) {
             `https://nx.dev/nx-api/storybook/generators/migrate-10`,
         ],
     });
-    return (0, migrate_10_1.default)(tree, {
+    await (0, migrate_10_1.default)(tree, {
         autoAcceptAllPrompts: true,
     });
+    const pathToAiInstructions = (0, path_1.join)(__dirname, 'files', 'ai-instructions-for-cjs-esm.md');
+    if (!(0, fs_1.existsSync)(pathToAiInstructions)) {
+        return;
+    }
+    const contents = (0, fs_1.readFileSync)(pathToAiInstructions);
+    tree.write('MIGRATE_STORYBOOK_10.md', contents);
+    return [
+        `Storybook 10 requires Storybook Configs to use ESM.`,
+        `We created 'MIGRATE_STORYBOOK_10.md' with instructions for an AI Agent to convert CJS Storybook Configs to ESM in your workspace.`,
+    ];
 }