Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions code/lib/cli-storybook/src/sandbox-templates.ts
Original file line number Diff line number Diff line change
Expand Up @@ -428,9 +428,6 @@ export const baseTemplates = {
features: {
experimentalTestSyntax: true,
},
typescript: {
reactDocgen: 'react-docgen-typescript',
} as any, // the generic type does not contain the reactDocgen property
},
},
skipTasks: ['e2e-tests', 'bench', 'vitest-integration'],
Expand Down
2 changes: 1 addition & 1 deletion code/presets/create-react-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@
],
"dependencies": {
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
"@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
"@types/semver": "^7.7.1",
"pnp-webpack-plugin": "^1.7.0",
"react-docgen-typescript-plugin": "^1.0.8",
"semver": "^7.7.3"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion code/presets/create-react-app/src/types.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { Options } from 'storybook/internal/types';

import type { PluginOptions as RDTSPluginOptions } from 'react-docgen-typescript-plugin';
import type { PluginOptions as RDTSPluginOptions } from '@storybook/react-docgen-typescript-plugin';

export interface PluginOptions extends Options {
/**
Expand Down
2 changes: 1 addition & 1 deletion code/presets/react-webpack/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,10 @@
],
"dependencies": {
"@storybook/core-webpack": "workspace:*",
"@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
"@types/semver": "^7.7.1",
"magic-string": "^0.30.5",
"react-docgen": "^7.1.1",
"react-docgen-typescript-plugin": "^1.0.8",
"resolve": "^1.22.8",
"semver": "^7.7.3",
"tsconfig-paths": "^4.2.0",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { describe, expect, it, vi } from 'vitest';

import type { TypescriptOptions } from '@storybook/core-webpack';
import ReactDocgenTypescriptPlugin from '@storybook/react-docgen-typescript-plugin';

Comment on lines 3 to 5

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

# First, let's look at the test file content around lines 3-5 and 91-103
cat -n code/presets/react-webpack/src/framework-preset-react-docs.test.ts | head -110 | tail -+1

Repository: storybookjs/storybook

Length of output: 186


🏁 Script executed:

# Now let's check the runtime implementation file to see how it imports
cat -n code/presets/react-webpack/src/framework-preset-react-docs.ts | head -50

Repository: storybookjs/storybook

Length of output: 1773


🏁 Script executed:

# Find and check the @storybook/react-docgen-typescript-plugin module to understand its exports
find . -type f -path "*/react-docgen-typescript-plugin/*" -name "package.json" -o -name "index.ts" -o -name "index.js" | head -20

Repository: storybookjs/storybook

Length of output: 909


🏁 Script executed:

# Search for where ReactDocgenTypeScriptPlugin (or similar) is exported
rg "export.*ReactDocgen" --type ts --type tsx --type js | head -30

Repository: storybookjs/storybook

Length of output: 92


🏁 Script executed:

# Read the test file specifically
cat -n code/presets/react-webpack/src/framework-preset-react-docs.test.ts | sed -n '1,15p'

Repository: storybookjs/storybook

Length of output: 710


🏁 Script executed:

# Read more of the test file, especially around line 102
cat -n code/presets/react-webpack/src/framework-preset-react-docs.test.ts | sed -n '90,105p'

Repository: storybookjs/storybook

Length of output: 668


🏁 Script executed:

# Find the actual react-docgen-typescript-plugin package
find . -type d -name "react-docgen-typescript-plugin" | head -5

Repository: storybookjs/storybook

Length of output: 47


🏁 Script executed:

# Look for the package in code/lib or similar locations
fd "react-docgen-typescript-plugin" --type d

Repository: storybookjs/storybook

Length of output: 47


🏁 Script executed:

# Look for react-docgen-typescript-plugin in packages or check if it's external
rg "react-docgen-typescript-plugin" --type json | head -20

Repository: storybookjs/storybook

Length of output: 303


🏁 Script executed:

# Check the package's actual index file to see what it exports
find . -path "*/node_modules/*" -prune -o -type f -name "index.ts" -print | xargs rg -l "ReactDocgen" | head -10

Repository: storybookjs/storybook

Length of output: 47


🏁 Script executed:

# Search for where ReactDocgenTypeScriptPlugin is defined (with the correct casing)
rg "ReactDocgenTypeScriptPlugin" --type ts --type js | head -20

Repository: storybookjs/storybook

Length of output: 329


🏁 Script executed:

# Also search for any variations of the export
rg "export.*class.*ReactDocgen" --type ts --type js | head -20

Repository: storybookjs/storybook

Length of output: 412


🏁 Script executed:

# Check if there's a .d.ts file that defines the exports
find . -name "*.d.ts" -type f | xargs rg "ReactDocgen" | head -20

Repository: storybookjs/storybook

Length of output: 47


🏁 Script executed:

# Let's check if there are type definitions or documentation about this package
# First, verify if the test could even work by checking what it expects
cat -n code/presets/react-webpack/src/framework-preset-react-docs.test.ts | sed -n '1,110p'

Repository: storybookjs/storybook

Length of output: 4052


🏁 Script executed:

# Look at the imports and usages more carefully, including the exact line 102
cat -n code/presets/react-webpack/src/framework-preset-react-docs.test.ts | sed -n '95,105p'

Repository: storybookjs/storybook

Length of output: 550


🏁 Script executed:

# Check if there's any other reference to ReactDocgenTypeScriptPlugin vs ReactDocgenTypescriptPlugin in the codebase
rg "ReactDocgenTypescript" --type ts --type js

Repository: storybookjs/storybook

Length of output: 861


🏁 Script executed:

# Let's verify what the external package actually exports by checking its type definitions
# The package version is specified in package.json, let's see if we can find more info
rg "@storybook/react-docgen-typescript-plugin" code/presets/react-webpack/ -A 5 -B 5 | head -50

Repository: storybookjs/storybook

Length of output: 3494


🏁 Script executed:

# Check if there's a mismatch in naming - let's look at both usages carefully
echo "=== Test import (line 4) ===" && cat -n code/presets/react-webpack/src/framework-preset-react-docs.test.ts | sed -n '4p'
echo "=== Runtime import (line 43) ===" && cat -n code/presets/react-webpack/src/framework-preset-react-docs.ts | sed -n '43p'

Repository: storybookjs/storybook

Length of output: 326


🏁 Script executed:

# Let's check what the actual test expects at line 102 with the name
cat -n code/presets/react-webpack/src/framework-preset-react-docs.test.ts | sed -n '102p'

Repository: storybookjs/storybook

Length of output: 131


🏁 Script executed:

# Let's also check the actual config output to see what gets passed to plugins
cat -n code/presets/react-webpack/src/framework-preset-react-docs.ts | sed -n '43,75p'

Repository: storybookjs/storybook

Length of output: 1162


🏁 Script executed:

# Verify if there are any other test files or imports that use this module differently
rg "react-docgen-typescript-plugin" code/presets/react-webpack/ --type ts

Repository: storybookjs/storybook

Length of output: 620


Fix import style mismatch: test uses default import while runtime uses named import.

The test imports ReactDocgenTypescriptPlugin as a default import, but the runtime code at line 43 uses the named import { ReactDocgenTypeScriptPlugin }. This inconsistency can hide real-world ESM/CJS export issues and the test should match the actual production import pattern.

Proposed change
 import type { TypescriptOptions } from '@storybook/core-webpack';
-import ReactDocgenTypescriptPlugin from '@storybook/react-docgen-typescript-plugin';
+import { ReactDocgenTypeScriptPlugin } from '@storybook/react-docgen-typescript-plugin';
@@
-        plugins: [expect.any(ReactDocgenTypescriptPlugin)],
+        plugins: [expect.any(ReactDocgenTypeScriptPlugin)],

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents
In @code/presets/react-webpack/src/framework-preset-react-docs.test.ts around
lines 3 - 5, The test imports the plugin as a default
(ReactDocgenTypescriptPlugin) but runtime uses the named export
ReactDocgenTypeScriptPlugin; update the test import to use the named import form
(import { ReactDocgenTypeScriptPlugin } ...) so the test mirrors production
import/export semantics and catches ESM/CJS mismatches for the
ReactDocgenTypeScriptPlugin symbol.

import ReactDocgenTypescriptPlugin from 'react-docgen-typescript-plugin';
import type { Configuration } from 'webpack';

import * as preset from './framework-preset-react-docs';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (
};
}

const { ReactDocgenTypeScriptPlugin } = await import('react-docgen-typescript-plugin');
const { ReactDocgenTypeScriptPlugin } = await import('@storybook/react-docgen-typescript-plugin');

return {
...config,
Expand Down
3 changes: 1 addition & 2 deletions code/presets/react-webpack/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@ import type {
TypescriptOptions as TypescriptOptionsBase,
WebpackConfiguration as WebpackConfigurationBase,
} from '@storybook/core-webpack';

import type { PluginOptions as ReactDocgenTypescriptOptions } from 'react-docgen-typescript-plugin';
import type { PluginOptions as ReactDocgenTypescriptOptions } from '@storybook/react-docgen-typescript-plugin';

export type { BuilderResult } from '@storybook/core-webpack';

Expand Down
71 changes: 52 additions & 19 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -8264,10 +8264,10 @@ __metadata:
resolution: "@storybook/preset-create-react-app@workspace:code/presets/create-react-app"
dependencies:
"@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.1"
"@storybook/react-docgen-typescript-plugin": "npm:1.0.6--canary.9.0c3f3b7.0"
"@types/node": "npm:^22.19.1"
"@types/semver": "npm:^7.7.1"
pnp-webpack-plugin: "npm:^1.7.0"
react-docgen-typescript-plugin: "npm:^1.0.8"
semver: "npm:^7.7.3"
typescript: "npm:^5.9.3"
peerDependencies:
Expand All @@ -8281,12 +8281,12 @@ __metadata:
resolution: "@storybook/preset-react-webpack@workspace:code/presets/react-webpack"
dependencies:
"@storybook/core-webpack": "workspace:*"
"@storybook/react-docgen-typescript-plugin": "npm:1.0.6--canary.9.0c3f3b7.0"
"@types/node": "npm:^22.19.1"
"@types/semver": "npm:^7.7.1"
empathic: "npm:^2.0.0"
magic-string: "npm:^0.30.5"
react-docgen: "npm:^7.1.1"
react-docgen-typescript-plugin: "npm:^1.0.8"
resolve: "npm:^1.22.8"
semver: "npm:^7.7.3"
tsconfig-paths: "npm:^4.2.0"
Expand Down Expand Up @@ -8318,6 +8318,24 @@ __metadata:
languageName: unknown
linkType: soft

"@storybook/react-docgen-typescript-plugin@npm:1.0.6--canary.9.0c3f3b7.0":
version: 1.0.6--canary.9.0c3f3b7.0
resolution: "@storybook/react-docgen-typescript-plugin@npm:1.0.6--canary.9.0c3f3b7.0"
dependencies:
debug: "npm:^4.1.1"
endent: "npm:^2.0.1"
find-cache-dir: "npm:^3.3.1"
flat-cache: "npm:^3.0.4"
micromatch: "npm:^4.0.2"
react-docgen-typescript: "npm:^2.2.2"
tslib: "npm:^2.0.0"
peerDependencies:
typescript: ">= 4.x"
webpack: ">= 4"
checksum: 10c0/505a728f36df3f519f4985bdf18f2078ea18a1a8f7f837fc831f971363fb7643a182f01a6857a9729ac5a1246d370526fca5a19017f82e7493af4ca945cb7235
languageName: node
linkType: hard

"@storybook/react-dom-shim@workspace:*, @storybook/react-dom-shim@workspace:code/lib/react-dom-shim":
version: 0.0.0-use.local
resolution: "@storybook/react-dom-shim@workspace:code/lib/react-dom-shim"
Expand Down Expand Up @@ -14637,6 +14655,13 @@ __metadata:
languageName: node
linkType: hard

"dedent@npm:^0.7.0":
version: 0.7.0
resolution: "dedent@npm:0.7.0"
checksum: 10c0/7c3aa00ddfe3e5fcd477958e156156a5137e3bb6ff1493ca05edff4decf29a90a057974cc77e75951f8eb801c1816cb45aea1f52d628cdd000b82b36ab839d1b
languageName: node
linkType: hard

"deep-diff@npm:^1.0.2":
version: 1.0.2
resolution: "deep-diff@npm:1.0.2"
Expand Down Expand Up @@ -15535,6 +15560,17 @@ __metadata:
languageName: node
linkType: hard

"endent@npm:^2.0.1":
version: 2.1.0
resolution: "endent@npm:2.1.0"
dependencies:
dedent: "npm:^0.7.0"
fast-json-parse: "npm:^1.0.3"
objectorarray: "npm:^1.0.5"
checksum: 10c0/8cd6dae45e693ae2b2cbff2384348d3a5e2a06cc0396dddca8165e46bd2fd8d5394d44d338ba653bbfce4aead90eca1ec1abe7203843c84155c645d283b6b884
languageName: node
linkType: hard

"enhanced-resolve@npm:^5.17.1, enhanced-resolve@npm:^5.17.3, enhanced-resolve@npm:^5.7.0":
version: 5.18.3
resolution: "enhanced-resolve@npm:5.18.3"
Expand Down Expand Up @@ -17095,6 +17131,13 @@ __metadata:
languageName: node
linkType: hard

"fast-json-parse@npm:^1.0.3":
version: 1.0.3
resolution: "fast-json-parse@npm:1.0.3"
checksum: 10c0/2c58c7a0f7f1725c9da1272839f9bee3ccc13b77672b18ab4ac470c707999bca39828cd7e79b87c73017f21c3ddff37992d03fa2fd2da124d9bd06c1d02c9b7e
languageName: node
linkType: hard

"fast-json-patch@npm:^3.0.0-1":
version: 3.1.1
resolution: "fast-json-patch@npm:3.1.1"
Expand Down Expand Up @@ -23470,6 +23513,13 @@ __metadata:
languageName: node
linkType: hard

"objectorarray@npm:^1.0.5":
version: 1.0.5
resolution: "objectorarray@npm:1.0.5"
checksum: 10c0/3d3db66e2052df85617ac31b98f8e51a7a883ebce24123018dacf286712aa513a0a84e82b4a6bef68889d5fc39cf08e630ee78df013023fc5161e1fdf3eaaa5a
languageName: node
linkType: hard

"obuf@npm:^1.0.0, obuf@npm:^1.1.2":
version: 1.1.2
resolution: "obuf@npm:1.1.2"
Expand Down Expand Up @@ -25761,23 +25811,6 @@ __metadata:
languageName: node
linkType: hard

"react-docgen-typescript-plugin@npm:^1.0.8":
version: 1.0.8
resolution: "react-docgen-typescript-plugin@npm:1.0.8"
dependencies:
debug: "npm:^4.1.1"
find-cache-dir: "npm:^3.3.1"
flat-cache: "npm:^3.0.4"
micromatch: "npm:^4.0.2"
react-docgen-typescript: "npm:^2.2.2"
tslib: "npm:^2.6.2"
peerDependencies:
typescript: ">= 4.x"
webpack: ">= 4"
checksum: 10c0/9abd1e7c71e2ba7fad080ef17fd262c89aa59509c69a5d34f2a8b63f7e33271e49ab82274c79393f704f387eb09247de6f32605439835237dacf4e31de6859a6
languageName: node
linkType: hard

"react-docgen-typescript@npm:^2.2.2":
version: 2.4.0
resolution: "react-docgen-typescript@npm:2.4.0"
Expand Down
Loading