diff --git a/code/addons/docs/template/stories/docs2/Title.mdx b/code/addons/docs/template/stories/docs2/Title.mdx index 17e53867f95b..08d1de73a4a7 100644 --- a/code/addons/docs/template/stories/docs2/Title.mdx +++ b/code/addons/docs/template/stories/docs2/Title.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs'; - + # Docs with title diff --git a/code/addons/docs/template/stories/stories-mdx/basic.stories.mdx b/code/addons/docs/template/stories/stories-mdx/basic.stories.mdx index 55ab7cbb650f..65b7818032c4 100644 --- a/code/addons/docs/template/stories/stories-mdx/basic.stories.mdx +++ b/code/addons/docs/template/stories/stories-mdx/basic.stories.mdx @@ -1,24 +1,18 @@ import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; import globalThis from 'global'; - + # MDX Stories This file demonstrates defining stories inside MDX. - + - + diff --git a/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx b/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx index 9bbd98fd5a32..8c0b24bab32d 100644 --- a/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx +++ b/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx @@ -2,7 +2,7 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs'; import globalThis from 'global'; import * as Csf from './csf-in-mdx.stories.js'; - + # Legacy CSF in MDX Stories diff --git a/code/addons/docs/template/stories/stories-mdx/iframe.stories.mdx b/code/addons/docs/template/stories/stories-mdx/iframe.stories.mdx index b58b94568e2b..d77b4d5972a8 100644 --- a/code/addons/docs/template/stories/stories-mdx/iframe.stories.mdx +++ b/code/addons/docs/template/stories/stories-mdx/iframe.stories.mdx @@ -1,7 +1,7 @@ import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; import globalThis from 'global'; - + # MDX Stories diff --git a/code/addons/docs/template/stories/stories-mdx/play-functions.stories.mdx b/code/addons/docs/template/stories/stories-mdx/play-functions.stories.mdx index 5a0fee271bff..3b194432193b 100644 --- a/code/addons/docs/template/stories/stories-mdx/play-functions.stories.mdx +++ b/code/addons/docs/template/stories/stories-mdx/play-functions.stories.mdx @@ -1,11 +1,7 @@ import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; import globalThis from 'global'; - console.log('component play')} -/> + console.log('component play')} /> # MDX Play function Stories diff --git a/code/lib/store/template/stories/title.stories.ts b/code/lib/store/template/stories/title.stories.ts index 2457ec968120..49b5288d732f 100644 --- a/code/lib/store/template/stories/title.stories.ts +++ b/code/lib/store/template/stories/title.stories.ts @@ -4,7 +4,7 @@ import type { PlayFunctionContext } from '@storybook/types'; export default { component: globalThis.Components.Pre, - title: 'lib/store/manual title', + title: 'manual title', args: { text: 'No content' }, }; diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index 5d0530567e01..a90bd22534cb 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -230,6 +230,36 @@ function setSandboxViteFinal(mainConfig: ConfigFile) { ); } + + +// Update the stories field to ensure that no TS files +// that are linked from the renderer are picked up in non-TS projects +function updateStoriesField(mainConfig: ConfigFile, isJs: boolean) { + const stories = mainConfig.getFieldValue(['stories']) as string[]; + + // If the project is a JS project, let's make sure any linked in TS stories from the + // renderer inside src|stories are simply ignored. + const updatedStories = isJs + ? stories.map((specifier) => specifier.replace('js|jsx|ts|tsx', 'js|jsx')) + : stories; + + + mainConfig.setFieldValue(['stories'], [...updatedStories]); +} + +// Add a stories field entry for the passed symlink +function addStoriesEntry(mainConfig: ConfigFile, path: string) { + const stories = mainConfig.getFieldValue(['stories']) as string[]; + + const entry = { + directory: join('../template-stories', path), + titlePrefix: path, + files: '**/*.@(mdx|stories.@(js|jsx|ts|tsx))', + }; + + mainConfig.setFieldValue(['stories'], [...stories, entry]); +} + // packageDir is eg 'renderers/react', 'addons/actions' async function linkPackageStories( packageDir: string, @@ -247,6 +277,8 @@ async function linkPackageStories( : resolve(cwd, 'template-stories', packageDir); await ensureSymlink(source, target); + if (!linkInDir) addStoriesEntry(mainConfig, packageDir) + // Add `previewAnnotation` entries of the form // './template-stories/lib/store/preview.[tj]s' // if the file /lib/store/template/stories/preview.[jt]s exists @@ -265,25 +297,6 @@ async function linkPackageStories( ); } -// Update the stories field to ensure that: -// a) no TS files that are linked from the renderer are picked up in non-TS projects -// b) files in ./template-stories are not matched by the default glob -async function updateStoriesField(mainConfig: ConfigFile, isJs: boolean) { - const stories = mainConfig.getFieldValue(['stories']) as string[]; - - // If the project is a JS project, let's make sure any linked in TS stories from the - // renderer inside src|stories are simply ignored. - const updatedStories = isJs - ? stories.map((specifier) => specifier.replace('js|jsx|ts|tsx', 'js|jsx')) - : stories; - - // FIXME: '*.@(mdx|stories.mdx|stories.tsx|stories.ts|stories.jsx|stories.js' - const linkedStories = join('..', 'template-stories', '**', '*.stories.@(js|jsx|ts|tsx|mdx)'); - const linkedMdx = join('..', 'template-stories/addons/docs/docs2', '**', '*.@(mdx)'); - - mainConfig.setFieldValue(['stories'], [...updatedStories, linkedStories, linkedMdx]); -} - function addExtraDependencies({ cwd, dryRun, @@ -306,6 +319,7 @@ function addExtraDependencies({ } } + export const addStories: Task['run'] = async ( { sandboxDir, template }, { addon: extraAddons, dryRun, debug } @@ -315,6 +329,14 @@ export const addStories: Task['run'] = async ( const mainConfig = await readMainConfig({ cwd }); + // Ensure that we match the right stories in the stories directory + const packageJson = await import(join(cwd, 'package.json')); + updateStoriesField( + mainConfig, + detectLanguage(packageJson) === SupportedLanguage.JAVASCRIPT + ); + + // Link in the template/components/index.js from store, the renderer and the addons const rendererPath = await workspacePath('renderer', template.expected.renderer); await ensureSymlink( @@ -322,7 +344,7 @@ export const addStories: Task['run'] = async ( resolve(cwd, storiesPath, 'components') ); addPreviewAnnotations(mainConfig, [`.${sep}${join(storiesPath, 'components')}`]); - + // Add stories for the renderer. NOTE: these *do* need to be processed by the framework build system await linkPackageStories(rendererPath, { mainConfig, @@ -369,13 +391,6 @@ export const addStories: Task['run'] = async ( existingStories.map(async (packageDir) => linkPackageStories(packageDir, { mainConfig, cwd })) ); - // Ensure that we match stories from the template-stories dir - const packageJson = await import(join(cwd, 'package.json')); - await updateStoriesField( - mainConfig, - detectLanguage(packageJson) === SupportedLanguage.JAVASCRIPT - ); - // Add some extra settings (see above for what these do) if (template.expected.builder === '@storybook/builder-webpack5') addEsbuildLoaderToStories(mainConfig);