diff --git a/CHANGELOG.md b/CHANGELOG.md index cb65d5279dcb..14dc6a61ecc7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +## 10.2.11 + +- Addon-Vitest: Fix postinstall a11y installation - [#33888](https://github.com/storybookjs/storybook/pull/33888), thanks @valentinpalkovic! +- Manifests: Use correct story name - [#33709](https://github.com/storybookjs/storybook/pull/33709), thanks @JReinhold! +- Next.js: Handle legacyBehavior prop in Link mock component - [#33862](https://github.com/storybookjs/storybook/pull/33862), thanks @yatishgoel! +- React: Fix manifest stories empty when meta has no explicit title - [#33878](https://github.com/storybookjs/storybook/pull/33878), thanks @kasperpeulen! + ## 10.2.10 - Core: Require token for websocket connections - [#33820](https://github.com/storybookjs/storybook/pull/33820), thanks @ghengeveld! diff --git a/code/core/src/common/js-package-manager/Yarn1Proxy.ts b/code/core/src/common/js-package-manager/Yarn1Proxy.ts index 0707e8a3fc1e..77eafe80b635 100644 --- a/code/core/src/common/js-package-manager/Yarn1Proxy.ts +++ b/code/core/src/common/js-package-manager/Yarn1Proxy.ts @@ -57,9 +57,19 @@ export class Yarn1Proxy extends JsPackageManager { public runPackageCommand({ args, + useRemotePkg = false, ...options - }: Omit & { args: string[] }): ResultPromise { + }: Omit & { + args: string[]; + useRemotePkg?: boolean; + }): ResultPromise { const [command, ...rest] = args; + if (useRemotePkg) { + return executeCommand({ + command: 'npx', + args, + }); + } return executeCommand({ command: `yarn`, args: ['exec', command, '--', ...rest], diff --git a/code/core/src/common/js-package-manager/Yarn2Proxy.ts b/code/core/src/common/js-package-manager/Yarn2Proxy.ts index c5f13792d17c..024435d25d58 100644 --- a/code/core/src/common/js-package-manager/Yarn2Proxy.ts +++ b/code/core/src/common/js-package-manager/Yarn2Proxy.ts @@ -100,11 +100,15 @@ export class Yarn2Proxy extends JsPackageManager { public runPackageCommand({ args, + useRemotePkg = false, ...options - }: Omit & { args: string[] }): ResultPromise { + }: Omit & { + args: string[]; + useRemotePkg?: boolean; + }): ResultPromise { return executeCommand({ command: 'yarn', - args: ['exec', ...args], + args: [useRemotePkg ? 'dlx' : 'exec', ...args], ...options, }); } diff --git a/code/frameworks/nextjs/src/export-mocks/link/index.tsx b/code/frameworks/nextjs/src/export-mocks/link/index.tsx index 2237a67f7cc6..56ef92af0438 100644 --- a/code/frameworks/nextjs/src/export-mocks/link/index.tsx +++ b/code/frameworks/nextjs/src/export-mocks/link/index.tsx @@ -32,6 +32,27 @@ const MockLink = React.forwardRef(function MockLink( linkAction(hrefString, { replace, scroll, shallow, prefetch, locale }); }; + if (legacyBehavior) { + const child = React.Children.only(children) as React.ReactElement; + const childProps: Record = { + ref, + onClick: (e: React.MouseEvent) => { + e.preventDefault(); + if (child.props && typeof child.props.onClick === 'function') { + child.props.onClick(e); + } + linkAction(hrefString, { replace, scroll, shallow, prefetch, locale }); + }, + ...rest, + }; + + if (passHref || (child.type === 'a' && !('href' in (child.props || {})))) { + childProps.href = hrefString; + } + + return React.cloneElement(child, childProps); + } + return ( {children} diff --git a/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts b/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts index 345ff4d70415..35a8881117d4 100644 --- a/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts +++ b/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts @@ -134,8 +134,9 @@ export async function vueComponentMeta(tsconfigPath = 'tsconfig.json'): Promise< s.replace('export default ', 'const _sfc_main = '); s.append('\nexport default _sfc_main;'); } - - s.append(`\n;${name}.__docgenInfo = ${JSON.stringify(meta)}`); + s.append(`\n;${name}.__docgenInfo = Object.assign({ + displayName: ${name}.name ?? ${name}.__name + }, ${JSON.stringify(meta)})`); }); return { diff --git a/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts b/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts index c8b9268d0f46..108cf3591bd4 100644 --- a/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts +++ b/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts @@ -18,7 +18,9 @@ export async function vueDocgen(): Promise { const metaData = await parse(id); const s = new MagicString(src); - s.append(`;_sfc_main.__docgenInfo = ${JSON.stringify(metaData)}`); + s.append(`;_sfc_main.__docgenInfo = Object.assign({ + displayName: _sfc_main.name ?? _sfc_main.__name + }, ${JSON.stringify(metaData)});`); return { code: s.toString(), diff --git a/code/package.json b/code/package.json index 335c9d893d74..edadead902b6 100644 --- a/code/package.json +++ b/code/package.json @@ -220,5 +220,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "10.2.11" } diff --git a/code/renderers/react/src/componentManifest/generator.test.ts b/code/renderers/react/src/componentManifest/generator.test.ts index af68047e1dcb..f170d0d01887 100644 --- a/code/renderers/react/src/componentManifest/generator.test.ts +++ b/code/renderers/react/src/componentManifest/generator.test.ts @@ -20,222 +20,228 @@ test('manifests generates correct id, name, description and examples ', async () const result = await manifests(undefined, { manifestEntries } as any); expect(result?.components).toMatchInlineSnapshot(` - { - "components": { - "example-button": { - "description": "Primary UI component for user interaction", - "error": undefined, - "id": "example-button", - "import": "import { Button } from "@design-system/components/override";", - "jsDocTags": { - "import": [ - "import { Button } from '@design-system/components/override';", - ], - }, - "name": "Button", - "path": "./src/stories/Button.stories.ts", - "reactDocgen": { - "actualName": "Button", - "definedInFile": "./src/stories/Button.tsx", - "description": "Primary UI component for user interaction - @import import { Button } from '@design-system/components/override';", - "displayName": "Button", - "exportName": "Button", - "methods": [], - "props": { - "backgroundColor": { - "description": "", - "required": false, - "tsType": { - "name": "string", + { + "components": { + "example-button": { + "description": "Primary UI component for user interaction", + "error": undefined, + "id": "example-button", + "import": "import { Button } from "@design-system/components/override";", + "jsDocTags": { + "import": [ + "import { Button } from '@design-system/components/override';", + ], + }, + "name": "Button", + "path": "./src/stories/Button.stories.ts", + "reactDocgen": { + "actualName": "Button", + "definedInFile": "./src/stories/Button.tsx", + "description": "Primary UI component for user interaction + @import import { Button } from '@design-system/components/override';", + "displayName": "Button", + "exportName": "Button", + "methods": [], + "props": { + "backgroundColor": { + "description": "", + "required": false, + "tsType": { + "name": "string", + }, }, - }, - "label": { - "description": "", - "required": true, - "tsType": { - "name": "string", + "label": { + "description": "", + "required": true, + "tsType": { + "name": "string", + }, }, - }, - "onClick": { - "description": "", - "required": false, - "tsType": { - "name": "signature", - "raw": "() => void", - "signature": { - "arguments": [], - "return": { - "name": "void", + "onClick": { + "description": "", + "required": false, + "tsType": { + "name": "signature", + "raw": "() => void", + "signature": { + "arguments": [], + "return": { + "name": "void", + }, }, + "type": "function", }, - "type": "function", - }, - }, - "primary": { - "defaultValue": { - "computed": false, - "value": "false", - }, - "description": "Description of primary", - "required": false, - "tsType": { - "name": "boolean", }, - }, - "size": { - "defaultValue": { - "computed": false, - "value": "'medium'", + "primary": { + "defaultValue": { + "computed": false, + "value": "false", + }, + "description": "Description of primary", + "required": false, + "tsType": { + "name": "boolean", + }, }, - "description": "", - "required": false, - "tsType": { - "elements": [ - { - "name": "literal", - "value": "'small'", - }, - { - "name": "literal", - "value": "'medium'", - }, - { - "name": "literal", - "value": "'large'", - }, - ], - "name": "union", - "raw": "'small' | 'medium' | 'large'", + "size": { + "defaultValue": { + "computed": false, + "value": "'medium'", + }, + "description": "", + "required": false, + "tsType": { + "elements": [ + { + "name": "literal", + "value": "'small'", + }, + { + "name": "literal", + "value": "'medium'", + }, + { + "name": "literal", + "value": "'large'", + }, + ], + "name": "union", + "raw": "'small' | 'medium' | 'large'", + }, }, }, }, - }, - "stories": [ - { - "description": undefined, - "name": "Primary", - "snippet": "const Primary = () =>