feat(sb): Prep for v8 upgrade (#516)

Tobbe · greptile-apps[bot] · web-flow · commit 7f0f9f36723e · 2025-11-08T02:39:16.000+01:00
Co-authored-by: greptile-apps[bot] &lt;165735046+greptile-apps[bot]@users.noreply.github.com&gt;
diff --git a/__fixtures__/esm-test-project/web/src/CedarJS.mdx b/__fixtures__/esm-test-project/web/src/CedarJS.mdx
@@ -0,0 +1,16 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="CedarJS" />
+
+<div align="center">
+  <img src="https://avatars2.githubusercontent.com/u/211931789?v=4" width="200" />
+
+  <h1 align="center">CedarJS</h1>
+</div>
+
+_by Tom Preston-Werner, Peter Pistorius, Rob Cameron, David Price, Tobbe
+Lundberg and more than 400 amazing contributors._
+
+**Cedar is an opinionated, full-stack, JavaScript/TypeScript web application
+framework designed to keep you moving fast as your app grows from side project
+to startup.**
diff --git a/__fixtures__/esm-test-project/web/src/Redwood.stories.mdx b/__fixtures__/esm-test-project/web/src/Redwood.stories.mdx
diff --git a/__fixtures__/test-project/web/src/CedarJS.mdx b/__fixtures__/test-project/web/src/CedarJS.mdx
@@ -0,0 +1,16 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="CedarJS" />
+
+<div align="center">
+  <img src="https://avatars2.githubusercontent.com/u/211931789?v=4" width="200" />
+
+  <h1 align="center">CedarJS</h1>
+</div>
+
+_by Tom Preston-Werner, Peter Pistorius, Rob Cameron, David Price, Tobbe
+Lundberg and more than 400 amazing contributors._
+
+**Cedar is an opinionated, full-stack, JavaScript/TypeScript web application
+framework designed to keep you moving fast as your app grows from side project
+to startup.**
diff --git a/__fixtures__/test-project/web/src/Redwood.stories.mdx b/__fixtures__/test-project/web/src/Redwood.stories.mdx
diff --git a/packages/cli-packages/storybook-vite/src/__tests__/storybookConfigFixtures.test.ts b/packages/cli-packages/storybook-vite/src/__tests__/storybookConfigFixtures.test.ts
@@ -20,7 +20,7 @@ describe('storybook config file fixtures', () => {
         stories: [
           \`\${importStatementPath(
             cedarProjectPaths.web.src
-          )}/**/*.stories.@(js|jsx|ts|tsx|mdx)\`,
+          )}/**/*.@(mdx|stories.@(js|jsx|ts|tsx))\`,
         ],
 
         addons: ['@storybook/addon-essentials'],
diff --git a/packages/cli-packages/storybook-vite/src/commands/templates/main.ts.template b/packages/cli-packages/storybook-vite/src/commands/templates/main.ts.template
@@ -10,7 +10,7 @@ const config: StorybookConfig = {
   stories: [
     `${importStatementPath(
       cedarProjectPaths.web.src
-    )}/**/*.stories.@(js|jsx|ts|tsx|mdx)`,
+    )}/**/*.@(mdx|stories.@(js|jsx|ts|tsx))`,
   ],
 
   addons: ['@storybook/addon-essentials'],
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -64,6 +64,7 @@
     "vite-plugin-node-polyfills": "0.23.0"
   },
   "devDependencies": {
+    "@storybook/types": "7.6.20",
     "@types/node": "20.19.17",
     "tsx": "4.20.5",
     "typescript": "5.9.2",
diff --git a/tasks/smoke-tests/storybook/tests/storybook.spec.ts b/tasks/smoke-tests/storybook/tests/storybook.spec.ts
@@ -117,26 +117,24 @@ test('Mocks current user, and updates UI while dev server is running', async ({
     await page.reload()
   }
 
-  const usernameRow = await page
+  const usernameRow = page
     .frameLocator('#storybook-preview-iframe')
     .locator('*css=tr >> text=EMAIL')
-  await expect(await usernameRow.innerHTML()).toBe(
+  expect(await usernameRow.innerHTML()).toBe(
     '<td>EMAIL</td><td>ba@zinga.com</td>',
   )
 
-  const isAuthenticatedRow = await page
+  const isAuthenticatedRow = page
     .frameLocator('#storybook-preview-iframe')
     .locator('*css=tr >> text=isAuthenticated')
-  await expect(await isAuthenticatedRow.innerHTML()).toBe(
+  expect(await isAuthenticatedRow.innerHTML()).toBe(
     '<td>isAuthenticated</td><td>true</td>',
   )
 
-  const isAdminRow = await page
+  const isAdminRow = page
     .frameLocator('#storybook-preview-iframe')
     .locator('*css=tr >> text=Is Admin')
-  await expect(await isAdminRow.innerHTML()).toBe(
-    '<td>Is Admin</td><td>true</td>',
-  )
+  expect(await isAdminRow.innerHTML()).toBe('<td>Is Admin</td><td>true</td>')
 })
 
 const MOCK_CURRENT_USER_CONTENT = `\
@@ -156,16 +154,16 @@ export const Primary: Story = {
 test('Loads MDX Stories', async ({ page }: PlaywrightTestArgs) => {
   await page.goto('/')
 
-  // Click Redwood link in left nav
-  await page.locator('id=redwood--docs').click()
+  // Click CedarJS link in left nav
+  await page.locator('id=cedarjs--docs').click()
 
   await expect(page).toHaveURL(
-    `http://localhost:7910/?path=/docs/redwood--docs`,
+    `http://localhost:7910/?path=/docs/cedarjs--docs`,
   )
 
   await expect(
     page.frameLocator('#storybook-preview-iframe').locator('body'),
   ).toContainText(
-    'Redwood is an opinionated, full-stack, JavaScript/TypeScript web application framework designed to keep you moving fast as your app grows from side project to startup.',
+    'Cedar is an opinionated, full-stack, JavaScript/TypeScript web application framework designed to keep you moving fast as your app grows from side project to startup.',
   )
 })
diff --git a/tasks/test-project/codemods/CedarJS.mdx b/tasks/test-project/codemods/CedarJS.mdx
@@ -0,0 +1,16 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="CedarJS" />
+
+<div align="center">
+  <img src="https://avatars2.githubusercontent.com/u/211931789?v=4" width="200" />
+
+  <h1 align="center">CedarJS</h1>
+</div>
+
+_by Tom Preston-Werner, Peter Pistorius, Rob Cameron, David Price, Tobbe
+Lundberg and more than 400 amazing contributors._
+
+**Cedar is an opinionated, full-stack, JavaScript/TypeScript web application
+framework designed to keep you moving fast as your app grows from side project
+to startup.**
diff --git a/tasks/test-project/codemods/Redwood.stories.mdx b/tasks/test-project/codemods/Redwood.stories.mdx
diff --git a/tasks/test-project/tasks.js b/tasks/test-project/tasks.js
@@ -132,13 +132,13 @@ async function webTasks(outputPath, { linkWithLatestFwBuild, verbose }) {
       {
         title: 'Creating MDX Storybook stories',
         task: () => {
-          const redwoodMdxStoryContent = fs.readFileSync(
-            `${path.resolve(__dirname, 'codemods', 'Redwood.stories.mdx')}`,
+          const cedarMdxStoryContent = fs.readFileSync(
+            `${path.resolve(__dirname, 'codemods', 'CedarJS.mdx')}`,
           )
 
           fs.writeFileSync(
-            fullPath('web/src/Redwood.stories.mdx', { addExtension: false }),
-            redwoodMdxStoryContent,
+            fullPath('web/src/CedarJS.mdx', { addExtension: false }),
+            cedarMdxStoryContent,
           )
 
           return
diff --git a/tasks/test-project/tui-tasks.ts b/tasks/test-project/tui-tasks.ts
@@ -179,13 +179,13 @@ export async function webTasks(outputPath: string) {
       {
         title: 'Creating MDX Storybook stories',
         task: () => {
-          const redwoodMdxStoryContent = fs.readFileSync(
-            `${path.resolve(__dirname, 'codemods', 'Redwood.stories.mdx')}`,
+          const cedarMdxStoryContent = fs.readFileSync(
+            `${path.resolve(__dirname, 'codemods', 'CedarJS.mdx')}`,
           )
 
           fs.writeFileSync(
-            fullPath('web/src/Redwood.stories.mdx', { addExtension: false }),
-            redwoodMdxStoryContent,
+            fullPath('web/src/CedarJS.mdx', { addExtension: false }),
+            cedarMdxStoryContent,
           )
 
           return
diff --git a/yarn.lock b/yarn.lock
@@ -29407,6 +29407,7 @@ __metadata:
     "@storybook/addon-essentials": "npm:7.6.20"
     "@storybook/builder-vite": "npm:7.6.20"
     "@storybook/react": "npm:7.6.20"
+    "@storybook/types": "npm:7.6.20"
     "@types/node": "npm:20.19.17"
     magic-string: "npm:0.30.18"
     react-docgen: "npm:7.0.3"
