Skip to content
Merged
26 changes: 12 additions & 14 deletions code/lib/cli-storybook/src/codemod/csf-factories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -67,23 +67,21 @@ export const csfFactories: CommandFix = {
if (!optionalEnvToBoolean(process.env.IN_STORYBOOK_SANDBOX)) {
// prompt whether the user wants to use imports map
logger.logBox(dedent`
The CSF factories format benefits from subpath imports (the imports property in your \`package.json\`), which is a node standard for module resolution (commonly known as alias imports). This makes it more convenient to import the preview config in your story files.

However, please note that this might not work if you have an outdated tsconfig, use custom paths, or have type alias plugins configured in your project. You can always rerun this codemod and select another option to update your code later.

More info: ${picocolors.yellow('https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports?ref=upgrade')}

As we modify your story files, we can create two types of imports:

- ${picocolors.bold('Subpath imports (recommended):')} ${picocolors.cyan("`import preview from '#.storybook/preview'`")}
- ${picocolors.bold('Relative imports (suitable for mono repos):')} ${picocolors.cyan("`import preview from '../../.storybook/preview'`")}
The CSF Factories format can benefit from using absolute imports of your ${picocolors.cyan(previewConfigPath)} file. We can configure that for you, using subpath imports (a node standard), by adjusting the imports property of your package.json.

However, we cannot broadly recommend it for all projects, because it might not work in some monorepo setups or if you have an outdated tsconfig, use custom paths, or have type alias plugins configured in your project. You can always rerun this codemod and select another option to update your code later.

More info: ${picocolors.yellow('https://storybook.js.org/docs/10/api/csf/csf-next#subpath-imports?ref=upgrade')}
`);

useSubPathImports = await prompt.select<boolean>({
message: 'Which would you like to use?',
message: 'Which import type would you like to use for your story files?',
options: [
{ label: 'Subpath imports (alias)', value: true },
{ label: 'Relative imports', value: false },
{
label: "Relative imports (import preview from '../../.storybook/preview')",
value: false,
},
{ label: "Subpath imports (import preview from '#.storybook/preview')", value: true },
Comment thread
yannbf marked this conversation as resolved.
],
});
}
Expand Down Expand Up @@ -128,7 +126,7 @@ export const csfFactories: CommandFix = {
You can now run Storybook with the new CSF factories format.

For more info, check out the docs:
${picocolors.yellow('https://storybook.js.org/docs/api/csf/csf-factories?ref=upgrade')}
${picocolors.yellow('https://storybook.js.org/docs/10/api/csf/csf-next?ref=upgrade')}
`
);
},
Expand Down