Release: Prerelease 10.4.0-alpha.7

.vscode/settings.json

@@ -8,6 +8,9 @@
     "source.fixAll.oxc": "explicit"
   },
   "editor.formatOnSave": true,
+  "[mdx]": {
+    "editor.formatOnSave": false
+  },
   "editor.tabSize": 2,
   "eslint.options": {
     "cache": true,
@@ -47,7 +50,7 @@
   "typescript.preferences.preferTypeOnlyAutoImports": true,
   "typescript.preferences.quoteStyle": "single",
   "typescript.preferGoToSourceDefinition": true,
-  "typescript.tsdk": "./typescript/lib",
+  "typescript.tsdk": "./node_modules/typescript/lib",
   "vitest.workspaceConfig": "./code/vitest.workspace.ts",
   "vitest.rootConfig": "./code/vitest.workspace.ts",
   "oxc.fmt.configPath": ".oxfmtrc.json",

AGENTS.md

@@ -243,6 +243,8 @@ Use Storybook loggers instead of raw `console.*` in normal code paths:
 - Server-side: `storybook/internal/node-logger`
 - Client-side: `storybook/internal/client-logger`
 
+For TypeScript source in the repo, prefer explicit file extensions for relative code imports and exports such as `./foo.ts` or `./bar.tsx` when the target is another TS/JS module in this repository. Keep framework-specific component imports like `.vue` and `.svelte` in the form already expected by their package tooling.
+
 The pre-commit hook automatically detects AI agents (via `std-env`) and switches from check-only to write mode, so formatting is auto-fixed when agents commit.
 
 Avoid `console.log`, `console.warn`, and `console.error` unless the file is isolated enough that importing the logger is not reasonable.

CHANGELOG.prerelease.md

@@ -1,3 +1,11 @@
+## 10.4.0-alpha.7
+
+- CLI: Explicitly tell whether smoke tests passed or failed - [#34419](https://github.com/storybookjs/storybook/pull/34419), thanks @Sidnioulz!
+- Core: Add `ChangeDetectionService` and wire up builder-vite - [#34369](https://github.com/storybookjs/storybook/pull/34369), thanks @ghengeveld!
+- Maintenance: Extract parseFilterParam shared helper from tags and statuses modules - [#34436](https://github.com/storybookjs/storybook/pull/34436), thanks @mixelburg!
+- Sidebar: Add status-based filtering with refactored status architecture - [#34339](https://github.com/storybookjs/storybook/pull/34339), thanks @valentinpalkovic!
+- UI: Fix global shortcuts not showing region focus indicator - [#34201](https://github.com/storybookjs/storybook/pull/34201), thanks @Sidnioulz!
+
 ## 10.4.0-alpha.6
 
 - Builder-Vite: Add onModuleGraphChange method - [#34323](https://github.com/storybookjs/storybook/pull/34323), thanks @ghengeveld!

code/.eslintrc.js

@@ -229,5 +229,31 @@ module.exports = {
         'storybook/no-renderer-packages': 'off',
       },
     },
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      excludedFiles: [
+        '**/*.d.ts',
+        '**/docs/**/*',
+        '**/template/**/*',
+        '**/templates/**/*',
+        '**/__testfixtures__/**/*',
+        '**/__mocks-ng-workspace__/**/*',
+      ],
+      rules: {
+        'import-x/extensions': [
+          'error',
+          'always',
+          {
+            ignorePackages: true,
+            checkTypeImports: true,
+            fix: true,
+            pathGroupOverrides: [
+              { pattern: 'storybook/**', action: 'ignore' },
+              { pattern: '@storybook/**', action: 'ignore' },
+            ],
+          },
+        ],
+      },
+    },
   ],
 };

code/.storybook/bench/bench.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { Meta } from '@storybook/react-vite';
 
-import { safeMetafileArg } from '../../../scripts/bench/safe-args';
+import { safeMetafileArg } from '../../../scripts/bench/safe-args.ts';
 
 // @ts-expect-error - TS doesn't know about import.meta.glob from Vite
 const allMetafiles = import.meta.glob('../../bench/esbuild-metafiles/**/*.json', {

code/.storybook/preview.tsx

@@ -29,10 +29,10 @@ import {
   useTheme,
 } from 'storybook/theming';
 
-import { DocsPageWrapper } from '../addons/docs/src/blocks/components';
-import * as templatePreview from '../core/template/stories/preview';
-import '../renderers/react/template/components/index';
-import { isChromatic } from './isChromatic';
+import { DocsPageWrapper } from '../addons/docs/src/blocks/components/index.ts';
+import * as templatePreview from '../core/template/stories/preview.ts';
+import '../renderers/react/template/components/index.js';
+import { isChromatic } from './isChromatic.ts';
 
 sb.mock(import('@storybook/global'), { spy: true });
 

code/.storybook/storybook.setup.ts

@@ -4,7 +4,7 @@ import { setProjectAnnotations } from '@storybook/react';
 
 import { userEvent as storybookEvent, expect as storybookExpect } from 'storybook/test';
 
-import preview from './preview';
+import preview from './preview.tsx';
 
 vi.spyOn(console, 'warn').mockImplementation((...args) => console.log(...args));
 

code/addons/a11y/build-config.ts

@@ -1,4 +1,4 @@
-import type { BuildEntries } from '../../../scripts/build/utils/entry-utils';
+import type { BuildEntries } from '../../../scripts/build/utils/entry-utils.ts';
 
 const config: BuildEntries = {
   entries: {

code/addons/a11y/src/a11yRunner.test.ts

@@ -3,7 +3,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { addons } from 'storybook/preview-api';
 
-import { EVENTS } from './constants';
+import { EVENTS } from './constants.ts';
 
 vi.mock('storybook/preview-api');
 const mockedAddons = vi.mocked(addons);
@@ -19,7 +19,7 @@ describe('a11yRunner', () => {
   });
 
   it('should listen to events', async () => {
-    await import('./a11yRunner');
+    await import('./a11yRunner.ts');
 
     expect(mockedAddons.getChannel).toHaveBeenCalled();
     expect(mockChannel.on).toHaveBeenCalledWith(EVENTS.MANUAL, expect.any(Function));

code/addons/a11y/src/a11yRunner.ts

@@ -5,9 +5,9 @@ import { global } from '@storybook/global';
 import type { AxeResults, ContextProp, ContextSpec } from 'axe-core';
 import { addons, waitForAnimations } from 'storybook/preview-api';
 
-import { withLinkPaths } from './a11yRunnerUtils';
-import { EVENTS } from './constants';
-import type { A11yParameters } from './params';
+import { withLinkPaths } from './a11yRunnerUtils.ts';
+import { EVENTS } from './constants.ts';
+import type { A11yParameters } from './params.ts';
 
 const { document } = global;
 

code/addons/a11y/src/a11yRunnerUtils.test.ts

@@ -3,7 +3,7 @@ import { describe, expect, it } from 'vitest';
 
 import type { AxeResults } from 'axe-core';
 
-import { withLinkPaths } from './a11yRunnerUtils';
+import { withLinkPaths } from './a11yRunnerUtils.ts';
 
 describe('a11yRunnerUtils', () => {
   describe('withLinkPaths', () => {

code/addons/a11y/src/a11yRunnerUtils.ts

@@ -2,8 +2,8 @@ import { global } from '@storybook/global';
 
 import type { AxeResults, Result } from 'axe-core';
 
-import { PANEL_ID } from './constants';
-import type { EnhancedResults } from './types';
+import { PANEL_ID } from './constants.ts';
+import type { EnhancedResults } from './types.ts';
 
 const { document } = global;
 

code/addons/a11y/src/axeRuleMappingHelper.ts

@@ -1,5 +1,5 @@
-import { combinedRulesMap } from './AccessibilityRuleMaps';
-import type { EnhancedResult } from './types';
+import { combinedRulesMap } from './AccessibilityRuleMaps.ts';
+import type { EnhancedResult } from './types.ts';
 
 export const getTitleForAxeResult = (axeResult: EnhancedResult): string =>
   combinedRulesMap[axeResult.id]?.title || axeResult.id;

code/addons/a11y/src/components/A11YPanel.stories.tsx

@@ -4,12 +4,12 @@ import { ManagerContext } from 'storybook/manager-api';
 import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 import { styled } from 'storybook/theming';
 
-import preview from '../../../../.storybook/preview';
-import { results } from '../results.mock';
-import { type EnhancedResults, RuleType } from '../types';
-import { A11YPanel } from './A11YPanel';
-import { A11yContext } from './A11yContext';
-import type { A11yContextStore } from './A11yContext';
+import preview from '../../../../.storybook/preview.tsx';
+import { results } from '../results.mock.ts';
+import { type EnhancedResults, RuleType } from '../types.ts';
+import { A11YPanel } from './A11YPanel.tsx';
+import { A11yContext } from './A11yContext.tsx';
+import type { A11yContextStore } from './A11yContext.tsx';
 
 const emptyResults: EnhancedResults = {
   passes: [],

code/addons/a11y/src/components/A11YPanel.test.tsx

@@ -8,9 +8,9 @@ import React from 'react';
 import * as managerApi from 'storybook/manager-api';
 import { ThemeProvider, convert, themes } from 'storybook/theming';
 
-import { type EnhancedResults } from '../types';
-import { A11YPanel } from './A11YPanel';
-import { type A11yContextStore, useA11yContext } from './A11yContext';
+import { type EnhancedResults } from '../types.ts';
+import { A11YPanel } from './A11YPanel.tsx';
+import { type A11yContextStore, useA11yContext } from './A11yContext.tsx';
 
 vi.mock('storybook/manager-api');
 const mockedManagerApi = vi.mocked(managerApi);

code/addons/a11y/src/components/A11YPanel.tsx

@@ -6,11 +6,11 @@ import { SyncIcon } from '@storybook/icons';
 
 import { styled } from 'storybook/theming';
 
-import { RuleType } from '../types';
-import { useA11yContext } from './A11yContext';
-import { Report } from './Report/Report';
-import { Tabs } from './Tabs';
-import { TestDiscrepancyMessage } from './TestDiscrepancyMessage';
+import { RuleType } from '../types.ts';
+import { useA11yContext } from './A11yContext.tsx';
+import { Report } from './Report/Report.tsx';
+import { Tabs } from './Tabs.tsx';
+import { TestDiscrepancyMessage } from './TestDiscrepancyMessage.tsx';
 
 const RotatingIcon = styled(SyncIcon)(({ theme }) => ({
   animation: `${theme.animation.rotate360} 1s linear infinite;`,

code/addons/a11y/src/components/A11yContext.test.tsx

@@ -13,9 +13,9 @@ import {
 import type { AxeResults } from 'axe-core';
 import * as api from 'storybook/manager-api';
 
-import { EVENTS, UI_STATE_ID } from '../constants';
-import { RuleType } from '../types';
-import { A11yContextProvider, useA11yContext } from './A11yContext';
+import { EVENTS, UI_STATE_ID } from '../constants.ts';
+import { RuleType } from '../types.ts';
+import { A11yContextProvider, useA11yContext } from './A11yContext.tsx';
 
 vi.mock('storybook/manager-api');
 const mockedApi = vi.mocked(api);

code/addons/a11y/src/components/A11yContext.tsx

@@ -32,12 +32,17 @@ import {
 import type { Report } from 'storybook/preview-api';
 import { convert, themes } from 'storybook/theming';
 
-import { getFriendlySummaryForAxeResult, getTitleForAxeResult } from '../axeRuleMappingHelper';
-import { ADDON_ID, EVENTS, STATUS_TYPE_ID_A11Y, STATUS_TYPE_ID_COMPONENT_TEST } from '../constants';
-import type { A11yParameters } from '../params';
-import type { A11yReport, EnhancedResult, EnhancedResults, Status } from '../types';
-import { RuleType } from '../types';
-import type { TestDiscrepancy } from './TestDiscrepancyMessage';
+import { getFriendlySummaryForAxeResult, getTitleForAxeResult } from '../axeRuleMappingHelper.ts';
+import {
+  ADDON_ID,
+  EVENTS,
+  STATUS_TYPE_ID_A11Y,
+  STATUS_TYPE_ID_COMPONENT_TEST,
+} from '../constants.ts';
+import type { A11yParameters } from '../params.ts';
+import type { A11yReport, EnhancedResult, EnhancedResults, Status } from '../types.ts';
+import { RuleType } from '../types.ts';
+import type { TestDiscrepancy } from './TestDiscrepancyMessage.tsx';
 
 // These elements should not be highlighted because they usually cover the whole page.
 // They may still appear in the results and be selectable though.

code/addons/a11y/src/components/Report/Details.tsx

@@ -7,9 +7,9 @@ import { CheckIcon, CopyIcon, LocationIcon } from '@storybook/icons';
 import * as Tabs from '@radix-ui/react-tabs';
 import { styled } from 'storybook/theming';
 
-import { getFriendlySummaryForAxeResult } from '../../axeRuleMappingHelper';
-import type { EnhancedNodeResult, EnhancedResult, RuleType } from '../../types';
-import { useA11yContext } from '../A11yContext';
+import { getFriendlySummaryForAxeResult } from '../../axeRuleMappingHelper.ts';
+import type { EnhancedNodeResult, EnhancedResult, RuleType } from '../../types.ts';
+import { useA11yContext } from '../A11yContext.tsx';
 
 const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(
   ({ theme }) => ({

code/addons/a11y/src/components/Report/Report.stories.tsx

@@ -4,10 +4,10 @@ import { ManagerContext } from 'storybook/manager-api';
 import { fn } from 'storybook/test';
 import { styled } from 'storybook/theming';
 
-import preview from '../../../../../.storybook/preview';
-import { results } from '../../results.mock';
-import { RuleType } from '../../types';
-import { Report } from './Report';
+import preview from '../../../../../.storybook/preview.tsx';
+import { results } from '../../results.mock.ts';
+import { RuleType } from '../../types.ts';
+import { Report } from './Report.tsx';
 
 const StyledWrapper = styled.div(({ theme }) => ({
   backgroundColor: theme.background.content,

code/addons/a11y/src/components/Report/Report.tsx

@@ -8,9 +8,9 @@ import { ChevronSmallDownIcon } from '@storybook/icons';
 import type { ImpactValue } from 'axe-core';
 import { styled } from 'storybook/theming';
 
-import { getTitleForAxeResult } from '../../axeRuleMappingHelper';
-import { type EnhancedResult, RuleType } from '../../types';
-import { Details } from './Details';
+import { getTitleForAxeResult } from '../../axeRuleMappingHelper.ts';
+import { type EnhancedResult, RuleType } from '../../types.ts';
+import { Details } from './Details.tsx';
 
 const impactStatus: Record<NonNullable<ImpactValue>, ComponentProps<typeof Badge>['status']> = {
   minor: 'neutral',

code/addons/a11y/src/components/Tabs.tsx

@@ -7,8 +7,8 @@ import { CollapseIcon, ExpandAltIcon, EyeCloseIcon, EyeIcon, SyncIcon } from '@s
 import type { Result } from 'axe-core';
 import { styled, useTheme } from 'storybook/theming';
 
-import type { RuleType } from '../types';
-import { useA11yContext } from './A11yContext';
+import type { RuleType } from '../types.ts';
+import { useA11yContext } from './A11yContext.tsx';
 
 const Container = styled.div({
   width: '100%',

code/addons/a11y/src/components/TestDiscrepancyMessage.stories.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import { ManagerContext } from 'storybook/manager-api';
 import { fn } from 'storybook/test';
 
-import preview from '../../../../.storybook/preview';
-import { TestDiscrepancyMessage } from './TestDiscrepancyMessage';
+import preview from '../../../../.storybook/preview.tsx';
+import { TestDiscrepancyMessage } from './TestDiscrepancyMessage.tsx';
 
 const managerContext: any = {
   state: {},

code/addons/a11y/src/components/TestDiscrepancyMessage.tsx

@@ -5,7 +5,7 @@ import { Link } from 'storybook/internal/components';
 import { useStorybookApi } from 'storybook/manager-api';
 import { styled } from 'storybook/theming';
 
-import { DOCUMENTATION_DISCREPANCY_LINK } from '../constants';
+import { DOCUMENTATION_DISCREPANCY_LINK } from '../constants.ts';
 
 const Wrapper = styled.div(({ theme: { color, typography, background } }) => ({
   textAlign: 'start',

code/addons/a11y/src/components/VisionSimulator.stories.tsx

@@ -3,8 +3,8 @@ import type { PlayFunction, PlayFunctionContext } from 'storybook/internal/types
 import { ManagerContext } from 'storybook/manager-api';
 import { expect, fn, screen } from 'storybook/test';
 
-import preview from '../../../../.storybook/preview';
-import { VisionSimulator } from './VisionSimulator';
+import preview from '../../../../.storybook/preview.tsx';
+import { VisionSimulator } from './VisionSimulator.tsx';
 
 const managerContext: any = {
   state: {},

code/addons/a11y/src/components/VisionSimulator.tsx

@@ -7,8 +7,8 @@ import { AccessibilityIcon } from '@storybook/icons';
 import { useGlobals } from 'storybook/manager-api';
 import { styled } from 'storybook/theming';
 
-import { VISION_GLOBAL_KEY } from '../constants';
-import { filterDefs, filters } from '../visionSimulatorFilters';
+import { VISION_GLOBAL_KEY } from '../constants.ts';
+import { filterDefs, filters } from '../visionSimulatorFilters.ts';
 
 const Hidden = styled.div({
   '&, & svg': {

code/addons/a11y/src/index.ts

@@ -1,10 +1,10 @@
 import { definePreviewAddon } from 'storybook/internal/csf';
 
-import * as addonAnnotations from './preview';
-import type { A11yTypes } from './types';
+import * as addonAnnotations from './preview.tsx';
+import type { A11yTypes } from './types.ts';
 
-export { PARAM_KEY } from './constants';
-export * from './params';
-export type { A11yGlobals, A11yTypes, A11yReport } from './types';
+export { PARAM_KEY } from './constants.ts';
+export * from './params.ts';
+export type { A11yGlobals, A11yTypes, A11yReport } from './types.ts';
 
 export default () => definePreviewAddon<A11yTypes>(addonAnnotations);

code/addons/a11y/src/manager.test.tsx

@@ -5,8 +5,8 @@ import type { Addon_BaseType } from 'storybook/internal/types';
 
 import * as api from 'storybook/manager-api';
 
-import { PANEL_ID } from './constants';
-import './manager';
+import { PANEL_ID } from './constants.ts';
+import './manager.tsx';
 
 vi.mock('storybook/manager-api');
 const mockedApi = vi.mocked<api.API>(api as any);

code/addons/a11y/src/manager.tsx

@@ -4,12 +4,12 @@ import { Badge } from 'storybook/internal/components';
 
 import { addons, types, useAddonState, useStorybookApi } from 'storybook/manager-api';
 
-import { A11YPanel } from './components/A11YPanel';
-import { A11yContextProvider } from './components/A11yContext';
-import { VisionSimulator } from './components/VisionSimulator';
-import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
-import type { EnhancedResults, Status } from './types';
-import { RuleType } from './types';
+import { A11YPanel } from './components/A11YPanel.tsx';
+import { A11yContextProvider } from './components/A11yContext.tsx';
+import { VisionSimulator } from './components/VisionSimulator.tsx';
+import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants.ts';
+import type { EnhancedResults, Status } from './types.ts';
+import { RuleType } from './types.ts';
 
 const Title = () => {
   const api = useStorybookApi();