From a83d446095cae8885a75c872020ed12bcefc9db3 Mon Sep 17 00:00:00 2001 From: Philzen Date: Mon, 6 Jan 2025 15:52:21 +0100 Subject: [PATCH] Fix Storybook preview config being set up in old config directory (#11869) Co-authored-by: Tobbe Lundberg --- .changesets/11869.md | 3 ++ .../src/commands/setup/i18n/i18nHandler.js | 4 +-- packages/cli/src/lib/configureStorybook.js | 2 +- .../templates/storybook.preview.tsx.template | 4 +-- .../src/__tests__/paths.test.ts | 32 +++++++++---------- packages/project-config/src/paths.ts | 6 ++-- 6 files changed, 26 insertions(+), 25 deletions(-) create mode 100644 .changesets/11869.md diff --git a/.changesets/11869.md b/.changesets/11869.md new file mode 100644 index 000000000000..6dab4fe345e7 --- /dev/null +++ b/.changesets/11869.md @@ -0,0 +1,3 @@ +- Fix Storybook preview config being set up in old config directory (#11869) by @Philzen + +Store Storybook config in `web/.storybook/` diff --git a/packages/cli/src/commands/setup/i18n/i18nHandler.js b/packages/cli/src/commands/setup/i18n/i18nHandler.js index 29433e133478..7b1214edf18c 100644 --- a/packages/cli/src/commands/setup/i18n/i18nHandler.js +++ b/packages/cli/src/commands/setup/i18n/i18nHandler.js @@ -45,10 +45,10 @@ export const handler = async ({ force }) => { [ { title: - 'Install i18n, i18next, react-i18next and i18next-browser-languagedetector', + 'Install i18next, react-i18next and i18next-browser-languagedetector', task: async () => { /** - * Install i18n, i18next, react-i18next and i18next-browser-languagedetector + * Install i18next, react-i18next and i18next-browser-languagedetector */ await execa('yarn', [ 'workspace', diff --git a/packages/cli/src/lib/configureStorybook.js b/packages/cli/src/lib/configureStorybook.js index 97d0a8cd1d30..d0f784f402b9 100644 --- a/packages/cli/src/lib/configureStorybook.js +++ b/packages/cli/src/lib/configureStorybook.js @@ -25,7 +25,7 @@ export default async function extendStorybookConfiguration( const ts = isTypeScriptProject() const sbPreviewConfigPath = webPaths.storybookPreviewConfig ?? - `${webPaths.config}/storybook.preview.${ts ? 'tsx' : 'js'}` + `${webPaths.storybook}/preview.${ts ? 'tsx' : 'js'}` const read = (path) => fse.readFileSync(path, { encoding: 'utf-8' }) if (!fse.existsSync(sbPreviewConfigPath)) { diff --git a/packages/cli/src/lib/templates/storybook.preview.tsx.template b/packages/cli/src/lib/templates/storybook.preview.tsx.template index 7c747474e644..d3001c3dabf6 100644 --- a/packages/cli/src/lib/templates/storybook.preview.tsx.template +++ b/packages/cli/src/lib/templates/storybook.preview.tsx.template @@ -8,7 +8,7 @@ export const globalTypes: GlobalTypes = {} /** * An example, no-op storybook decorator. Use a function like this to create decorators. - * @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#create-a-decorator | Create a decorator} + * @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#create-a-decorator | Create a decorator} */ const _exampleDecorator = (StoryFn: StoryFn, _context: StoryContext) => ( @@ -17,5 +17,3 @@ const _exampleDecorator = (StoryFn: StoryFn, _context: StoryContext) => ( const preview: Preview = { decorators: [], } - -export default preview diff --git a/packages/project-config/src/__tests__/paths.test.ts b/packages/project-config/src/__tests__/paths.test.ts index 7446c131d90d..1814d1bd30c8 100644 --- a/packages/project-config/src/__tests__/paths.test.ts +++ b/packages/project-config/src/__tests__/paths.test.ts @@ -129,15 +129,15 @@ describe('paths', () => { storybookConfig: path.join( FIXTURE_BASEDIR, 'web', - 'config', - 'storybook.config.js', + '.storybook', + 'main.js', ), storybookPreviewConfig: null, storybookManagerConfig: path.join( FIXTURE_BASEDIR, 'web', - 'config', - 'storybook.manager.js', + '.storybook', + 'manager.js', ), dist: path.join(FIXTURE_BASEDIR, 'web', 'dist'), distSsrEntryServer: path.join( @@ -403,15 +403,15 @@ describe('paths', () => { storybookConfig: path.join( FIXTURE_BASEDIR, 'web', - 'config', - 'storybook.config.js', + '.storybook', + 'main.js', ), storybookPreviewConfig: null, storybookManagerConfig: path.join( FIXTURE_BASEDIR, 'web', - 'config', - 'storybook.manager.js', + '.storybook', + 'manager.js', ), dist: path.join(FIXTURE_BASEDIR, 'web', 'dist'), distSsrDocument: path.join( @@ -724,15 +724,15 @@ describe('paths', () => { storybookConfig: path.join( FIXTURE_BASEDIR, 'web', - 'config', - 'storybook.config.js', + '.storybook', + 'main.js', ), storybookPreviewConfig: null, storybookManagerConfig: path.join( FIXTURE_BASEDIR, 'web', - 'config', - 'storybook.manager.js', + '.storybook', + 'manager.js', ), entryClient: null, entryServer: null, @@ -1002,15 +1002,15 @@ describe('paths', () => { storybookConfig: path.join( FIXTURE_BASEDIR, 'web', - 'config', - 'storybook.config.js', + '.storybook', + 'main.js', ), storybookPreviewConfig: null, storybookManagerConfig: path.join( FIXTURE_BASEDIR, 'web', - 'config', - 'storybook.manager.js', + '.storybook', + 'manager.js', ), dist: path.join(FIXTURE_BASEDIR, 'web', 'dist'), distSsrEntryServer: path.join( diff --git a/packages/project-config/src/paths.ts b/packages/project-config/src/paths.ts index b375abfa1acd..457cf3ad9a58 100644 --- a/packages/project-config/src/paths.ts +++ b/packages/project-config/src/paths.ts @@ -123,9 +123,9 @@ const PATH_WEB_DIR_ENTRY_SERVER = 'web/src/entry.server' // .jsx,.tsx const PATH_WEB_DIR_GRAPHQL = 'web/src/graphql' // .js,.ts const PATH_WEB_DIR_CONFIG_POSTCSS = 'web/config/postcss.config.js' -const PATH_WEB_DIR_CONFIG_STORYBOOK_CONFIG = 'web/config/storybook.config.js' -const PATH_WEB_DIR_CONFIG_STORYBOOK_PREVIEW = 'web/config/storybook.preview' // .js, .tsx -const PATH_WEB_DIR_CONFIG_STORYBOOK_MANAGER = 'web/config/storybook.manager.js' +const PATH_WEB_DIR_CONFIG_STORYBOOK_CONFIG = 'web/.storybook/main.js' +const PATH_WEB_DIR_CONFIG_STORYBOOK_PREVIEW = 'web/.storybook/preview' // .js, .tsx +const PATH_WEB_DIR_CONFIG_STORYBOOK_MANAGER = 'web/.storybook/manager.js' const PATH_WEB_DIR_DIST = 'web/dist' // Used by Streaming & RSC builds to output to their individual folders