Release: Prerelease 10.5.0-alpha.10

.github/workflows/claude-code-review.yml

@@ -0,0 +1,35 @@
+name: Claude Code Review
+
+on:
+  pull_request:
+    types: [opened, synchronize, ready_for_review, reopened]
+
+jobs:
+  claude-review:
+    # Claude Code reviews are estimated to cost $15-25. use only when necessary and only internally.
+    if: |
+      (github.event.pull_request.author_association == 'MEMBER' || github.event.pull_request.author_association == 'OWNER') &&
+      contains(github.event.pull_request.labels.*.name, 'claude-review')
+
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+      issues: read
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          fetch-depth: 1
+          persist-credentials: false
+
+      - name: Run Claude Code Review
+        id: claude-review
+        uses: anthropics/claude-code-action@a92e7c70a4da9793dc164451d829089dc057a464 # v1.0.159
+        with:
+          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
+          plugin_marketplaces: 'https://github.com/anthropics/claude-code.git'
+          plugins: 'code-review@claude-code-plugins'
+          prompt: '/code-review:code-review ${{ github.repository }}/pull/${{ github.event.pull_request.number }}'

.github/workflows/claude.yml

@@ -0,0 +1,68 @@
+name: Claude Code
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+  issues:
+    types: [opened, assigned]
+  pull_request_review:
+    types: [submitted]
+
+jobs:
+  claude:
+    # Only org OWNERs and MEMBERs may trigger Claude. author_association is set by
+    # GitHub on the comment/review/issue payload; everything else (COLLABORATOR,
+    # CONTRIBUTOR, FIRST_TIME_CONTRIBUTOR, NONE) is rejected.
+    if: |
+      (github.event_name == 'issue_comment' &&
+        contains(github.event.comment.body, '@claude') &&
+        contains(fromJSON('["OWNER", "MEMBER"]'), github.event.comment.author_association)) ||
+      (github.event_name == 'pull_request_review_comment' &&
+        contains(github.event.comment.body, '@claude') &&
+        contains(fromJSON('["OWNER", "MEMBER"]'), github.event.comment.author_association)) ||
+      (github.event_name == 'pull_request_review' &&
+        contains(github.event.review.body, '@claude') &&
+        contains(fromJSON('["OWNER", "MEMBER"]'), github.event.review.author_association)) ||
+      (github.event_name == 'issues' && (
+        (github.event.action == 'opened' &&
+          contains(fromJSON('["OWNER", "MEMBER"]'), github.event.issue.author_association) &&
+          (contains(github.event.issue.body, '`@claude`') || contains(github.event.issue.title, '`@claude`'))) ||
+        (github.event.action == 'assigned' && github.event.assignee.login == 'claude')
+      ))
+
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+      issues: read
+      id-token: write
+      actions: read # Required for Claude to read CI results on PRs
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          fetch-depth: 1
+          persist-credentials: false
+
+      - name: Run Claude Code
+        id: claude
+        uses: anthropics/claude-code-action@a92e7c70a4da9793dc164451d829089dc057a464 # v1.0.159
+        with:
+          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
+          assignee_trigger: 'claude'
+          base_branch: 'next'
+          prompt: 'Respect the PR description template and repository guidelines in AGENTS.md.'
+          # Allows Claude to read CI results on PRs
+          additional_permissions: |
+            actions: read
+
+          # Tool permissions Claude needs to follow AGENTS.md (install, compile,
+          # typecheck, lint, format, test). Bash is NOT allowed by default, so
+          # without this Claude cannot run any of the repo's build/test commands.
+          # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
+          # or https://code.claude.com/docs/en/cli-reference for available options
+          claude_args: |
+            --allowed-tools "Bash(yarn:*),Bash(cd:*),Bash(node:*),Bash(git status:*),Bash(git diff:*),Bash(git log:*),Bash(git show:*)"
+            --disallowed-tools "Bash(yarn start),Bash(yarn task dev)"

.github/workflows/trigger-circle-ci-workflow.yml

@@ -44,8 +44,13 @@ on:
       - next
       - main
 
+# For PR events, group per-PR (github.ref is refs/pull/<n>/merge) so redundant
+# re-triggers on the same PR cancel each other. For pushes to a shared branch
+# (next/main), key on the commit SHA instead: otherwise two merges landing close
+# together share the refs/heads/<branch> group and the earlier merge's trigger is
+# cancelled before it can POST to CircleCI, silently skipping its `merged` workflow.
 concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
+  group: ${{ github.workflow }}-${{ github.event_name == 'push' && github.sha || github.event.pull_request.number }}
   cancel-in-progress: true
 
 jobs:

.vscode/settings.json

@@ -60,8 +60,6 @@
   "typescript.preferences.quoteStyle": "single",
   "typescript.preferGoToSourceDefinition": true,
   "typescript.tsdk": "./node_modules/typescript/lib",
-  "vitest.workspaceConfig": "./code/vitest.workspace.ts",
-  "vitest.rootConfig": "./code/vitest.workspace.ts",
   "oxc.fmt.configPath": ".oxfmtrc.json",
   "oxc.enable.oxlint": false
 }

CHANGELOG.prerelease.md

@@ -1,3 +1,19 @@
+## 10.5.0-alpha.10
+
+- A11y: Handle lang attribute throughout preview - [#35321](https://github.com/storybookjs/storybook/pull/35321), thanks @Sidnioulz!
+- A11y: Surface required args and keyboard-reachable Setup controls in ArgsTable - [#35306](https://github.com/storybookjs/storybook/pull/35306), thanks @Sidnioulz!
+- Addon-Vitest: Subscribe for run completion before triggering it - [#35291](https://github.com/storybookjs/storybook/pull/35291), thanks @tsushanth!
+- Core: Compose core annotations before preview beforeAll - [#35323](https://github.com/storybookjs/storybook/pull/35323), thanks @JReinhold!
+- Docgen: Run experimentalDocgenServer extraction in a worker thread - [#35324](https://github.com/storybookjs/storybook/pull/35324), thanks @JReinhold!
+- DocgenServer: Fix OOM by recycling the shared TS program - [#35305](https://github.com/storybookjs/storybook/pull/35305), thanks @ndelangen!
+- Next: Call link onClick before preventing default - [#35311](https://github.com/storybookjs/storybook/pull/35311), thanks @yatishgoel!
+- Review: Dynamic thumbnail scaling based on content dimensions - [#35282](https://github.com/storybookjs/storybook/pull/35282), thanks @ghengeveld!
+- Review: Improve review thumbnail scaling and loading UX - [#35335](https://github.com/storybookjs/storybook/pull/35335), thanks @ghengeveld!
+- Review: Notify on review arrival instead of auto-navigating - [#35276](https://github.com/storybookjs/storybook/pull/35276), thanks @ghengeveld!
+- Review: Simplify layout handling - [#35322](https://github.com/storybookjs/storybook/pull/35322), thanks @ghengeveld!
+- UI: Hide onboarding menu with feature flag - [#35299](https://github.com/storybookjs/storybook/pull/35299), thanks @Sidnioulz!
+- Vue: Fix Unicode Default Values In Docs - [#34909](https://github.com/storybookjs/storybook/pull/34909), thanks @Arunsiva003!
+
 ## 10.5.0-alpha.9
 
 - Addon Vitest: Avoid erroring out on benign Win process exits - [#35287](https://github.com/storybookjs/storybook/pull/35287), thanks @Sidnioulz!

code/.storybook/preview.tsx

@@ -356,7 +356,11 @@ const decorators = [
 ] satisfies Decorator[];
 
 const parameters = {
+  // Redundant but useful for testing lang parameter propagation in stories.
+  htmlLang: 'en-CA',
   docs: {
+    // Redundant but useful for testing lang parameter propagation in docs.
+    lang: 'en-US',
     theme: themes.light,
     codePanel: true,
     source: {

code/addons/docs/src/blocks/blocks/ArgTypes.tsx

@@ -107,18 +107,20 @@ function renderArgTypesTables({
   include,
   exclude,
   sort,
+  docsLang,
 }: {
   mainName?: string;
   mainRows: StrictArgTypes;
   subcomponentRows: Record<string, StrictArgTypes>;
   include?: PropDescriptor;
   exclude?: PropDescriptor;
   sort?: SortType;
+  docsLang?: string;
 }) {
   const filteredMainRows = filterArgTypes(mainRows, include, exclude);
 
   if (Object.keys(subcomponentRows).length === 0) {
-    return <PureArgsTable rows={filteredMainRows as any} sort={sort} />;
+    return <PureArgsTable rows={filteredMainRows as any} sort={sort} docsLang={docsLang} />;
   }
 
   const tabs = {
@@ -134,7 +136,7 @@ function renderArgTypesTables({
     ),
   };
 
-  return <TabbedArgsTable tabs={tabs as any} sort={sort} />;
+  return <TabbedArgsTable tabs={tabs as any} sort={sort} docsLang={docsLang} />;
 }
 
 const LegacyArgTypes: FC<ArgTypesProps> = (props) => {
@@ -148,6 +150,7 @@ const LegacyArgTypes: FC<ArgTypesProps> = (props) => {
     mainName: getComponentName(component),
     mainRows: argTypes,
     subcomponentRows: extractSubcomponentArgTypes(subcomponents, parameters),
+    docsLang: parameters?.docs?.lang,
     ...filterProps,
   });
 };
@@ -175,6 +178,7 @@ const DocgenServiceArgTypes: FC<ArgTypesProps> = (props) => {
     mainName: getComponentName(component) ?? serviceRows.serviceComponentName,
     mainRows: serviceRows.mainRows,
     subcomponentRows: serviceRows.subcomponentRows,
+    docsLang: parameters?.docs?.lang,
     ...filterProps,
   });
 };

code/addons/docs/src/blocks/blocks/Controls.tsx

@@ -6,8 +6,8 @@ import { useId } from '@react-aria/utils';
 import type { Args, Globals, Renderer, StrictArgTypes } from 'storybook/internal/csf';
 import type { DocsContextProps, ModuleExports, PreparedStory } from 'storybook/internal/types';
 
-import { filterArgTypes } from 'storybook/preview-api';
 import type { PropDescriptor } from 'storybook/preview-api';
+import { filterArgTypes } from 'storybook/preview-api';
 
 import type { SortType } from '../components';
 import { ArgsTable as PureArgsTable, TabbedArgsTable } from '../components';
@@ -50,6 +50,7 @@ type ControlsTablesProps = ControlsInteractiveState & {
   exclude?: PropDescriptor;
   sort?: SortType;
   storyId: string;
+  docsLang?: string;
 };
 
 function getControlsFilterProps(story: PreparedStory, props: ControlsProps): ControlsParameters {
@@ -89,6 +90,7 @@ const ControlsTables: FC<ControlsTablesProps> = ({
   globals,
   updateArgs,
   resetArgs,
+  docsLang,
 }) => {
   const filteredMainRows = filterArgTypes(mainRows, include, exclude);
 
@@ -107,6 +109,7 @@ const ControlsTables: FC<ControlsTablesProps> = ({
         globals={globals}
         updateArgs={updateArgs}
         resetArgs={resetArgs}
+        docsLang={docsLang}
       />
     );
   }
@@ -134,6 +137,7 @@ const ControlsTables: FC<ControlsTablesProps> = ({
       resetArgs={resetArgs}
       storyId={storyId}
       controlsId={controlsId}
+      docsLang={docsLang}
     />
   );
 };
@@ -155,6 +159,7 @@ const LegacyControls: FC<ControlsStoryProps> = ({ story, context, ...props }) =>
       {...filterProps}
       storyId={story.id}
       {...interactiveState}
+      docsLang={parameters?.docs?.lang}
     />
   );
 };
@@ -187,6 +192,7 @@ const DocgenServiceControls: FC<ControlsStoryProps> = ({ story, context, ...prop
       {...filterProps}
       storyId={story.id}
       {...interactiveState}
+      docsLang={parameters?.docs?.lang}
     />
   );
 };

code/addons/docs/src/blocks/blocks/Description.tsx

@@ -5,10 +5,10 @@ import { InvalidBlockOfPropError } from 'storybook/internal/preview-errors';
 
 import { DocsContext } from './DocsContext';
 import { Markdown } from './Markdown';
-import type { Of } from './useOf';
-import { useOf } from './useOf';
 import { useServiceDocgen } from './use-service-docgen.ts';
 import { useServiceStoryDoc } from './use-service-story-docs.ts';
+import type { Of } from './useOf';
+import { useOf } from './useOf';
 import { withMdxComponentOverride } from './with-mdx-component-override';
 
 export enum DescriptionType {
@@ -78,45 +78,58 @@ type ResolvedOf = ReturnType<typeof useOf>;
 const DescriptionBody: FC<{
   resolvedOf: ResolvedOf;
   serviceComponentDescription?: string;
+  lang?: string;
   storyDocsDescription?: string | null;
-}> = ({ resolvedOf, serviceComponentDescription, storyDocsDescription }) => {
+}> = ({ resolvedOf, serviceComponentDescription, lang, storyDocsDescription }) => {
   const markdown = getDescriptionFromResolvedOf(
     resolvedOf,
     serviceComponentDescription,
     storyDocsDescription
   );
 
-  return markdown ? <Markdown>{markdown}</Markdown> : null;
+  return markdown ? <Markdown lang={lang}>{markdown}</Markdown> : null;
 };
 
-const DescriptionStoryWithServices: FC<{ resolvedOf: Extract<ResolvedOf, { type: 'story' }> }> = ({
-  resolvedOf,
-}) => {
+const DescriptionStoryWithServices: FC<{
+  resolvedOf: Extract<ResolvedOf, { type: 'story' }>;
+}> = ({ resolvedOf }) => {
   const storyDocsDescription = useServiceStoryDoc(resolvedOf.story.id).data?.description;
-  return <DescriptionBody resolvedOf={resolvedOf} storyDocsDescription={storyDocsDescription} />;
+  const lang = resolvedOf.story.parameters.docs?.lang || 'en';
+  return (
+    <DescriptionBody
+      resolvedOf={resolvedOf}
+      storyDocsDescription={storyDocsDescription}
+      lang={lang}
+    />
+  );
 };
 
 const DescriptionComponentWithServices: FC<{
   resolvedOf: Extract<ResolvedOf, { type: 'meta' | 'component' }>;
   componentId: string;
 }> = ({ resolvedOf, componentId }) => {
   const serviceComponentDescription = useServiceDocgen(componentId).data?.description || undefined;
+  const lang =
+    resolvedOf.type === 'meta'
+      ? resolvedOf.preparedMeta.parameters.docs?.lang || 'en'
+      : resolvedOf.projectAnnotations.parameters?.docs?.lang || 'en';
   return (
     <DescriptionBody
       resolvedOf={resolvedOf}
       serviceComponentDescription={serviceComponentDescription}
+      lang={lang}
     />
   );
 };
 
 const DescriptionImpl: FC<DescriptionProps> = (props) => {
   const { of } = props;
+  const context = useContext(DocsContext);
 
   if ('of' in props && of === undefined) {
     throw new InvalidBlockOfPropError();
   }
   const resolvedOf = useOf(of || 'meta');
-  const context = useContext(DocsContext);
 
   // The docgen service contributes a fallback description, but its two sources need different hooks
   // (story-docs by story id, docgen by component id), so each lives in its own child component to
@@ -137,7 +150,14 @@ const DescriptionImpl: FC<DescriptionProps> = (props) => {
     }
   }
 
-  return <DescriptionBody resolvedOf={resolvedOf} />;
+  const parameters =
+    resolvedOf.type === 'story'
+      ? resolvedOf.story.parameters
+      : resolvedOf.type === 'meta'
+        ? resolvedOf.preparedMeta.parameters
+        : resolvedOf.projectAnnotations.parameters;
+  const lang = parameters?.docs?.lang || 'en';
+  return <DescriptionBody resolvedOf={resolvedOf} lang={lang} />;
 };
 
 export const Description = withMdxComponentOverride('Description', DescriptionImpl);

code/addons/docs/src/blocks/blocks/DocsContainer.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useMemo } from 'react';
 import type { Renderer } from 'storybook/internal/types';
 
 import type { ThemeVars } from 'storybook/theming';
-import { ThemeProvider, ensure as ensureTheme } from 'storybook/theming';
+import { ensure as ensureTheme, ThemeProvider } from 'storybook/theming';
 
 import { DocsPageWrapper } from '../components';
 import { TableOfContents } from '../components/TableOfContents';
@@ -28,13 +28,18 @@ export const DocsContainer: FC<PropsWithChildren<DocsContainerProps>> = ({
 }) => {
   const slugger = useMemo(() => createDocsSlugger(), []);
   let toc;
+  // Language of docs prose (descriptions, ArgTypes description cells, free MDX prose).
+  let lang;
 
   try {
     const meta = context.resolveOf('meta', ['meta']);
-    toc = meta.preparedMeta.parameters?.docs?.toc;
+    const metaParameters = meta.preparedMeta.parameters;
+    toc = metaParameters?.docs?.toc;
+    lang = metaParameters?.docs?.lang || 'en';
   } catch (err) {
     // No meta, falling back to project annotations
     toc = context?.projectAnnotations?.parameters?.docs?.toc;
+    lang = context?.projectAnnotations?.parameters?.docs?.lang || 'en';
   }
 
   useEffect(() => {
@@ -61,6 +66,7 @@ export const DocsContainer: FC<PropsWithChildren<DocsContainerProps>> = ({
         <SourceContainer channel={context.channel}>
           <ThemeProvider theme={ensureTheme(theme as ThemeVars)}>
             <DocsPageWrapper
+              lang={lang}
               toc={
                 toc ? (
                   <TableOfContents