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 = any + export type StoryObj = 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] +}