Fix Storybook preview config being set up in old config directory (re…

…dwoodjs#11869)

Co-authored-by: Tobbe Lundberg <[email protected]>

.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/`

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',

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)) {

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) => (
   <StoryFn />
@@ -17,5 +17,3 @@ const _exampleDecorator = (StoryFn: StoryFn, _context: StoryContext) => (
 const preview: Preview = {
   decorators: [],
 }
-
-export default preview

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(

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