fix(v6): stub @storybook/react types till `@redwoodjs/cli-storybook…

…` is installed (#9027)

Supersedes #9015.

In v6, we decoupled Storybook from the framework. But generators still
generate stories. If a user hasn't set up Storybook, but generates a
page, etc (which is pretty much what happens in the tutorial), they'll
see a type error in the `*.stories.{tsx,jsx}` file. See
https://community.redwoodjs.com/t/redwood-v6-0-0-upgrade-guide/5044/35.

Ideally, we just wouldn't generate stories if a user hasn't set up
Storybook. But the tutorial is written as if these story files were just
around this whole time, which is how the framework has worked and works.

I think we can eventually get to the point where Storybook is fully
decoupled, but I don't have a good idea of the amount of work that would
need to be done, and am already focused on other projects (Docker). So
this seems like the simplest fix for now without undoing the work we
did.

@Tobbe had the idea here of stubbing the types till the
`@redwoodjs/cli-storybook` is installed.

---------

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

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]
+}