From 44b4a9023ac3a14b5f56b071052bdf49c410bb8b Mon Sep 17 00:00:00 2001
From: Dominic Saadi <dominiceliassaadi@gmail.com>
Date: Mon, 28 Aug 2023 12:01:15 -0500
Subject: [PATCH] fix(v6): stub `@storybook/react` types till
 `@redwoodjs/cli-storybook` is installed (#9027)

Supersedes https://github.com/redwoodjs/redwood/pull/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 <tobbe@tlundberg.com>
Co-authored-by: Daniel Choudhury <dannychoudhury@gmail.com>
---
 .../src/commands/storybookHandler.ts          |  9 +++++
 .../internal/src/generate/typeDefinitions.ts  | 35 +++++++++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/packages/cli-packages/storybook/src/commands/storybookHandler.ts b/packages/cli-packages/storybook/src/commands/storybookHandler.ts
index e761dcc30347..9287aaf0fdff 100644
--- a/packages/cli-packages/storybook/src/commands/storybookHandler.ts
+++ b/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"')
diff --git a/packages/internal/src/generate/typeDefinitions.ts b/packages/internal/src/generate/typeDefinitions.ts
index c916c4ff221c..5f9be6a548ed 100644
--- a/packages/internal/src/generate/typeDefinitions.ts
+++ b/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]
+}