fix(v6): stub @storybook/react types till @redwoodjs/cli-storybook is installed

packages/cli-packages/storybook/src/commands/storybookHandler.ts

@@ -1,3 +1,4 @@
+import fs from 'node:fs'
 import path from 'node:path'
 
 import execa, { ExecaError } from 'execa'
@@ -19,6 +20,14 @@ export async function handler({
   port,
   smokeTest,
 }: StorybookYargsOptions) {
+  // We add a stub file to type generation because users don't have Storybook
+  // installed when they first start a project. We need to remove the file once
+  // they install Storybook so that the real types come through.
+  fs.rmSync(
+    path.join(getPaths().generated.types.includes, 'web-storybook.d.ts'),
+    { force: true }
+  )
+
   // Check for conflicting options
   if (build && smokeTest) {
     throw new Error('Can not provide both "--build" and "--smoke-test"')

packages/internal/src/generate/typeDefinitions.ts

@@ -54,6 +54,7 @@ export const generateTypeDefs = async () => {
       ...generateTypeDefGlobalContext(),
       ...generateTypeDefScenarios(),
       ...generateTypeDefTestMocks(),
+      ...generateStubStorybookTypes(),
       ...gqlApiTypeDefFiles,
       ...gqlWebTypeDefFiles,
     ],
@@ -199,3 +200,37 @@ export const generateTypeDefGlobImports = () => {
 export const generateTypeDefGlobalContext = () => {
   return writeTypeDefIncludeFile('api-globalContext.d.ts.template')
 }
+
+function generateStubStorybookTypes() {
+  const stubStorybookTypesFileContent = `\
+declare module '@storybook/react' {
+  export type Meta<T = any> = any
+  export type StoryObj<T = any> = any
+}
+`
+
+  const redwoodProjectPaths = getPaths()
+
+  const packageJson = JSON.parse(
+    fs.readFileSync(
+      path.join(redwoodProjectPaths.base, 'package.json'),
+      'utf-8'
+    )
+  )
+
+  const hasCliStorybook = Object.keys(packageJson['devDependencies']).includes(
+    '@redwoodjs/cli-storybook'
+  )
+
+  if (hasCliStorybook) {
+    return []
+  }
+
+  const stubStorybookTypesFilePath = path.join(
+    redwoodProjectPaths.generated.types.includes,
+    'web-storybook.d.ts'
+  )
+  fs.writeFileSync(stubStorybookTypesFilePath, stubStorybookTypesFileContent)
+
+  return [stubStorybookTypesFilePath]
+}