Merge branch 'next' into fix-docs-anchor-scroll

.circleci/config.yml

@@ -16,7 +16,7 @@ parameters:
     default: "next"
 
 executors:
-  sb_node_18_classic:
+  sb_node_22_classic:
     parameters:
       class:
         description: The Resource class
@@ -25,7 +25,7 @@ executors:
         default: "small"
     working_directory: /tmp/storybook
     docker:
-      - image: cimg/node:18.19.1
+      - image: cimg/node:22.6.0
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
@@ -38,7 +38,20 @@ executors:
         default: "small"
     working_directory: /tmp/storybook
     docker:
-      - image: cimg/node:18.19.1-browsers
+      - image: cimg/node:18.20.3-browsers
+        environment:
+          NODE_OPTIONS: --max_old_space_size=6144
+    resource_class: <<parameters.class>>
+  sb_node_22_browsers:
+    parameters:
+      class:
+        description: The Resource class
+        type: enum
+        enum: ["small", "medium", "medium+", "large", "xlarge"]
+        default: "small"
+    working_directory: /tmp/storybook
+    docker:
+      - image: cimg/node:22.6.0-browsers
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
@@ -51,20 +64,7 @@ executors:
         default: "small"
     working_directory: /tmp/storybook
     docker:
-      - image: mcr.microsoft.com/playwright:v1.36.0-focal
-        environment:
-          NODE_OPTIONS: --max_old_space_size=6144
-    resource_class: <<parameters.class>>
-  sb_playwright_component_testing:
-    parameters:
-      class:
-        description: The Resource class
-        type: enum
-        enum: ["small", "medium", "medium+", "large", "xlarge"]
-        default: "small"
-    working_directory: /tmp/storybook
-    docker:
-      - image: mcr.microsoft.com/playwright:v1.42.1-jammy
+      - image: mcr.microsoft.com/playwright:v1.46.0-jammy
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
@@ -108,7 +108,7 @@ jobs:
   pretty-docs:
     executor:
       class: medium
-      name: sb_node_18_classic
+      name: sb_node_22_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -134,7 +134,7 @@ jobs:
   build:
     executor:
       class: xlarge
-      name: sb_node_18_classic
+      name: sb_node_22_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -179,7 +179,7 @@ jobs:
   lint:
     executor:
       class: large
-      name: sb_node_18_classic
+      name: sb_node_22_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -195,7 +195,7 @@ jobs:
   check:
     executor:
       class: xlarge
-      name: sb_node_18_classic
+      name: sb_node_22_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -213,7 +213,7 @@ jobs:
       - report-workflow-on-failure
       - cancel-workflow-on-failure
   script-checks:
-    executor: sb_node_18_browsers
+    executor: sb_node_22_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -241,7 +241,7 @@ jobs:
   unit-tests:
     executor:
       class: xlarge
-      name: sb_node_18_browsers
+      name: sb_node_22_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -263,7 +263,7 @@ jobs:
   coverage:
     executor:
       class: small
-      name: sb_node_18_browsers
+      name: sb_node_22_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -274,7 +274,7 @@ jobs:
   chromatic-internal-storybook:
     executor:
       class: medium+
-      name: sb_node_18_browsers
+      name: sb_node_22_browsers
     environment:
       NODE_OPTIONS: --max_old_space_size=6144
     steps:
@@ -296,7 +296,7 @@ jobs:
         type: integer
     executor:
       class: medium
-      name: sb_node_18_browsers
+      name: sb_node_22_browsers
     parallelism: << parameters.parallelism >>
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -343,7 +343,7 @@ jobs:
         type: integer
     executor:
       class: large
-      name: sb_node_18_browsers
+      name: sb_node_22_browsers
     parallelism: << parameters.parallelism >>
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -424,7 +424,7 @@ jobs:
         type: integer
     executor:
       class: medium
-      name: sb_node_18_browsers
+      name: sb_node_22_browsers
     parallelism: << parameters.parallelism >>
     steps:
       - checkout
@@ -507,7 +507,7 @@ jobs:
   test-empty-init:
     executor:
       class: medium
-      name: sb_node_18_browsers
+      name: sb_node_22_browsers
     parameters:
       packageManager:
         type: string
@@ -595,13 +595,30 @@ jobs:
                   IN_STORYBOOK_SANDBOX: true
                   STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >>
                   STORYBOOK_DISABLE_TELEMETRY: true
+      - when:
+          condition:
+            equal: ["react-vite-ts", << parameters.template >>]
+          steps:
+            - run:
+                name: Storybook init from empty directory (--skip-install)
+                command: |
+                  cd code
+                  yarn local-registry --open &
+                  cd ../../
+                  mkdir empty-<< parameters.template >>-no-install
+                  cd empty-<< parameters.template >>-no-install
+                  npx storybook init --yes --skip-install
+                environment:
+                  IN_STORYBOOK_SANDBOX: true
+                  STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >>
+                  STORYBOOK_DISABLE_TELEMETRY: true
       - report-workflow-on-failure
   test-portable-stories:
     parameters:
       directory:
         type: string
     executor:
-      name: sb_playwright_component_testing
+      name: sb_playwright
       class: medium
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -784,22 +801,22 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 37
+          parallelism: 38
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 37
+          parallelism: 38
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 34
+          parallelism: 35
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 32
+          parallelism: 33
           requires:
             - build-sandboxes
       - e2e-dev:
@@ -807,7 +824,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 32
+          parallelism: 33
           requires:
             - build-sandboxes
       - test-portable-stories:

.git-blame-ignore-revs

@@ -2,4 +2,6 @@
 c0896915fb7fb9a8dd416b9aebca17abd909d1c1
 a41c227037e7e7249b8b376f838f4f8bcc3e3e59
 13c46e6c0b7f3dd8cf4ba42d1cfd6714f4777d54
-0a4522a3f84773f39daec4820c49b8a92e9f9d11
+0a4522a3f84773f39daec4820c49b8a92e9f9d11
+e12039c0593ba021ce27cb7245b6067677f27625
+513bb66bb9729ece57581b6eb50e5b338c47c0b9

.nvmrc

@@ -1 +1 @@
-18.19.1
+22.6.0

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 8.2.9
+
+- CLI: Fix `init --skip-install` - [#28853](https://github.com/storybookjs/storybook/pull/28853), thanks @ndelangen!
+- Telemetry: Disable save-from-controls logs for example stories - [#28870](https://github.com/storybookjs/storybook/pull/28870), thanks @shilman!
+
 ## 8.2.8
 
 - CLI: Parse more Yarn Berry errors - [#28816](https://github.com/storybookjs/storybook/pull/28816), thanks @yannbf!

CHANGELOG.prerelease.md

@@ -1,3 +1,17 @@
+## 8.3.0-alpha.5
+
+- Builder-Vite: Add null character prefix to virtual file IDs - [#28863](https://github.com/storybookjs/storybook/pull/28863), thanks @valentinpalkovic!
+- CLI: Fix `init --skip-install` - [#28853](https://github.com/storybookjs/storybook/pull/28853), thanks @ndelangen!
+- CLI: Parse more Yarn Berry errors - [#28816](https://github.com/storybookjs/storybook/pull/28816), thanks @yannbf!
+- Core: Make sure CJS build always has lowest prio - [#28829](https://github.com/storybookjs/storybook/pull/28829), thanks @kasperpeulen!
+- Maintenance: Add `node:`-prefix to node core-modules - [#28860](https://github.com/storybookjs/storybook/pull/28860), thanks @ndelangen!
+- Next.js: Add @storybook/nextjs-vite package - [#28800](https://github.com/storybookjs/storybook/pull/28800), thanks @valentinpalkovic!
+- React: Bundle in `lodash` - [#28609](https://github.com/storybookjs/storybook/pull/28609), thanks @ndelangen!
+- Telemetry: Add globals stats - [#28822](https://github.com/storybookjs/storybook/pull/28822), thanks @shilman!
+- Telemetry: Add portable stories - [#26764](https://github.com/storybookjs/storybook/pull/26764), thanks @shilman!
+- Telemetry: Disable save-from-controls logs for example stories - [#28870](https://github.com/storybookjs/storybook/pull/28870), thanks @shilman!
+- Test: Upgrade Vitest to v2 - [#28788](https://github.com/storybookjs/storybook/pull/28788), thanks @yannbf!
+
 ## 8.3.0-alpha.4
 
 - CSF: Allow overridding globals at the story level - [#26654](https://github.com/storybookjs/storybook/pull/26654), thanks @tmeasday!

MIGRATION.md

@@ -2506,7 +2506,7 @@ const meta: Meta = {
         // Extract all providers (and nested ones) from a ModuleWithProviders
         importProvidersFrom(SomeOtherModule.forRoot()),
       ],
-    }
+    }),
   ],
 };
 

code/.eslintrc.js

@@ -19,6 +19,10 @@ module.exports = {
   },
   plugins: ['local-rules'],
   rules: {
+    'import/no-extraneous-dependencies': [
+      'error',
+      { devDependencies: true, peerDependencies: true },
+    ],
     'import/no-unresolved': 'off', // covered by typescript
     'eslint-comments/disable-enable-pair': ['error', { allowWholeFile: true }],
     'eslint-comments/no-unused-disable': 'error',
@@ -55,7 +59,13 @@ module.exports = {
       },
     },
     {
-      files: ['**/template/**/*', '**/vitest.config.ts', '**/addons/docs/**/*'],
+      files: [
+        '*.test.*',
+        '*.spec.*',
+        '**/template/**/*',
+        '**/vitest.config.ts',
+        '**/addons/docs/**/*',
+      ],
       rules: {
         'import/no-extraneous-dependencies': 'off',
       },

code/.storybook/main.ts

@@ -1,10 +1,12 @@
-import path from 'path';
+import { join } from 'node:path';
+
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { mergeConfig } from 'vite';
+
 import type { StorybookConfig } from '../frameworks/react-vite';
 
-const componentsPath = path.join(__dirname, '../core/src/components');
-const managerApiPath = path.join(__dirname, '../core/src/manager-api');
+const componentsPath = join(__dirname, '../core/src/components');
+const managerApiPath = join(__dirname, '../core/src/manager-api');
 
 const config: StorybookConfig = {
   stories: [

code/.storybook/manager.tsx

@@ -1,4 +1,5 @@
 import { addons } from 'storybook/internal/manager-api';
+
 import startCase from 'lodash/startCase.js';
 
 addons.setConfig({

code/.storybook/preview-head.html

@@ -1,3 +0,0 @@
-<script>
-  // eslint-d bal = window;
-</script>

code/.storybook/preview.tsx

@@ -1,24 +1,26 @@
-import { global } from '@storybook/global';
 import React, { Fragment, useEffect } from 'react';
-import { isChromatic } from './isChromatic';
+
+import type { Channel } from 'storybook/internal/channels';
+import { DocsContext as DocsContextProps, useArgs } from 'storybook/internal/preview-api';
+import type { PreviewWeb } from 'storybook/internal/preview-api';
 import {
   Global,
   ThemeProvider,
-  themes,
-  createReset,
   convert,
+  createReset,
   styled,
+  themes,
   useTheme,
 } from 'storybook/internal/theming';
-import { useArgs, DocsContext as DocsContextProps } from 'storybook/internal/preview-api';
-import type { PreviewWeb } from 'storybook/internal/preview-api';
-import type { ReactRenderer, Decorator } from '@storybook/react';
-import type { Channel } from 'storybook/internal/channels';
 
 import { DocsContext } from '@storybook/blocks';
+import { global } from '@storybook/global';
+import type { Decorator, ReactRenderer } from '@storybook/react';
+
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 import { DocsPageWrapper } from '../lib/blocks/src/components';
+import { isChromatic } from './isChromatic';
 
 const { document } = global;
 

code/addons/a11y/README.md

@@ -168,7 +168,7 @@ You can override these options [at story level too](https://storybook.js.org/doc
 
 ```js
 import React from 'react';
-import { storiesOf, addDecorator, addParameters } from '@storybook/react';
+import { addDecorator, addParameters, storiesOf } from '@storybook/react';
 
 export default {
   title: 'button',

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.3.0-alpha.4",
+  "version": "8.3.0-alpha.5",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
@@ -28,9 +28,9 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "node": "./dist/index.js",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "require": "./dist/index.js",
+      "node": "./dist/index.js"
     },
     "./preview": {
       "types": "./dist/preview.d.ts",

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

@@ -1,6 +1,8 @@
 import type { Mock } from 'vitest';
-import { describe, beforeEach, it, expect, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { addons } from 'storybook/internal/preview-api';
+
 import { EVENTS } from './constants';
 
 vi.mock('storybook/internal/preview-api');

code/addons/a11y/src/a11yRunner.ts

@@ -1,5 +1,7 @@
-import { global } from '@storybook/global';
 import { addons } from 'storybook/internal/preview-api';
+
+import { global } from '@storybook/global';
+
 import { EVENTS } from './constants';
 import type { A11yParameters } from './params';
 

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

@@ -1,14 +1,14 @@
 // @vitest-environment happy-dom
+import { act, cleanup, fireEvent, render, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { describe, beforeEach, afterEach, it, expect, vi } from 'vitest';
 import React from 'react';
-import { render, waitFor, fireEvent, act, cleanup } from '@testing-library/react';
 
-import { ThemeProvider, themes, convert } from 'storybook/internal/theming';
 import * as api from 'storybook/internal/manager-api';
+import { ThemeProvider, convert, themes } from 'storybook/internal/theming';
 
-import { A11YPanel } from './A11YPanel';
 import { EVENTS } from '../constants';
+import { A11YPanel } from './A11YPanel';
 
 vi.mock('storybook/internal/manager-api');
 

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

@@ -1,25 +1,23 @@
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { styled } from 'storybook/internal/theming';
-
 import { ActionBar, ScrollArea } from 'storybook/internal/components';
-import { SyncIcon, CheckIcon } from '@storybook/icons';
-
-import type { AxeResults } from 'axe-core';
 import {
   useChannel,
   useParameter,
   useStorybookApi,
   useStorybookState,
 } from 'storybook/internal/manager-api';
+import { styled } from 'storybook/internal/theming';
 
-import { Report } from './Report';
+import { CheckIcon, SyncIcon } from '@storybook/icons';
 
-import { Tabs } from './Tabs';
+import type { AxeResults } from 'axe-core';
 
-import { useA11yContext } from './A11yContext';
 import { EVENTS } from '../constants';
 import type { A11yParameters } from '../params';
+import { useA11yContext } from './A11yContext';
+import { Report } from './Report';
+import { Tabs } from './Tabs';
 
 export enum RuleType {
   VIOLATION,

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

@@ -1,15 +1,18 @@
 // @vitest-environment happy-dom
+import { act, cleanup, render } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { describe, beforeEach, afterEach, it, expect, vi } from 'vitest';
 import * as React from 'react';
-import type { AxeResults } from 'axe-core';
-import { render, act, cleanup } from '@testing-library/react';
-import * as api from 'storybook/internal/manager-api';
+
 import { STORY_CHANGED } from 'storybook/internal/core-events';
+import * as api from 'storybook/internal/manager-api';
+
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
-import { A11yContextProvider, useA11yContext } from './A11yContext';
+import type { AxeResults } from 'axe-core';
+
 import { EVENTS } from '../constants';
+import { A11yContextProvider, useA11yContext } from './A11yContext';
 
 vi.mock('storybook/internal/manager-api');
 const mockedApi = vi.mocked(api);

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

@@ -1,9 +1,13 @@
 import * as React from 'react';
-import { themes, convert } from 'storybook/internal/theming';
-import type { Result } from 'axe-core';
-import { useChannel, useAddonState, useStorybookApi } from 'storybook/internal/manager-api';
+
 import { STORY_CHANGED, STORY_RENDERED } from 'storybook/internal/core-events';
+import { useAddonState, useChannel, useStorybookApi } from 'storybook/internal/manager-api';
+import { convert, themes } from 'storybook/internal/theming';
+
 import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import type { Result } from 'axe-core';
+
 import { ADDON_ID, EVENTS } from '../constants';
 
 export interface Results {

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

@@ -4,10 +4,10 @@ import React from 'react';
 import { styled } from 'storybook/internal/theming';
 
 import type { NodeResult } from 'axe-core';
-import { Rules } from './Rules';
 
 import type { RuleType } from '../A11YPanel';
 import HighlightToggle from './HighlightToggle';
+import { Rules } from './Rules';
 
 const Item = styled.li({
   fontWeight: 600,

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

@@ -1,11 +1,13 @@
 // @vitest-environment happy-dom
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
-import { describe, it, expect, afterEach, vi } from 'vitest';
 import React from 'react';
-import { render, fireEvent, cleanup } from '@testing-library/react';
+
 import type { NodeResult } from 'axe-core';
-import HighlightToggle from './HighlightToggle';
+
 import { A11yContext } from '../A11yContext';
+import HighlightToggle from './HighlightToggle';
 
 const nodeResult = (target: string): NodeResult => ({
   html: '',

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

@@ -1,7 +1,9 @@
 import React from 'react';
+
 import { styled } from 'storybook/internal/theming';
 
 import type { NodeResult } from 'axe-core';
+
 import { useA11yContext } from '../A11yContext';
 
 interface ToggleProps {

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

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { styled } from 'storybook/internal/theming';
+
 import type { Result } from 'axe-core';
 
 const Wrapper = styled.div({

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

@@ -2,15 +2,15 @@ import React, { Fragment, useState } from 'react';
 
 import { styled } from 'storybook/internal/theming';
 
-import type { Result } from 'axe-core';
-import { Info } from './Info';
+import { ChevronSmallDownIcon } from '@storybook/icons';
 
-import { Elements } from './Elements';
-import { Tags } from './Tags';
+import type { Result } from 'axe-core';
 
 import type { RuleType } from '../A11YPanel';
+import { Elements } from './Elements';
 import HighlightToggle from './HighlightToggle';
-import { ChevronSmallDownIcon } from '@storybook/icons';
+import { Info } from './Info';
+import { Tags } from './Tags';
 
 const Wrapper = styled.div(({ theme }) => ({
   display: 'flex',

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

@@ -1,7 +1,9 @@
 import type { FC } from 'react';
 import React from 'react';
-import { styled } from 'storybook/internal/theming';
+
 import { Badge } from 'storybook/internal/components';
+import { styled } from 'storybook/internal/theming';
+
 import type { CheckResult } from 'axe-core';
 import { useResizeDetector } from 'react-resize-detector';
 

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

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { styled } from 'storybook/internal/theming';
+
 import type { TagValue } from 'axe-core';
 
 const Wrapper = styled.div({

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

@@ -1,11 +1,12 @@
 import type { FC } from 'react';
 import React, { Fragment } from 'react';
+
 import { EmptyTabContent } from 'storybook/internal/components';
+
 import type { Result } from 'axe-core';
 
-import { Item } from './Item';
-
 import type { RuleType } from '../A11YPanel';
+import { Item } from './Item';
 
 export interface ReportProps {
   items: Result[];

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

@@ -1,12 +1,13 @@
 import * as React from 'react';
 
 import { styled } from 'storybook/internal/theming';
+
 import type { NodeResult, Result } from 'axe-core';
 import { useResizeDetector } from 'react-resize-detector';
-import HighlightToggle from './Report/HighlightToggle';
 
 import type { RuleType } from './A11YPanel';
 import { useA11yContext } from './A11yContext';
+import HighlightToggle from './Report/HighlightToggle';
 
 // TODO: reuse the Tabs component from @storybook/theming instead of re-building identical functionality
 

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

@@ -1,11 +1,13 @@
 // @vitest-environment happy-dom
-
 /// <reference types="@testing-library/jest-dom" />;
-import { describe, it, expect } from 'vitest';
-import React from 'react';
-import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { ThemeProvider, themes, convert } from 'storybook/internal/theming';
+import { describe, expect, it } from 'vitest';
+
+import React from 'react';
+
+import { ThemeProvider, convert, themes } from 'storybook/internal/theming';
+
 import { VisionSimulator, baseList } from './VisionSimulator';
 
 const getOptionByNameAndPercentage = (option: string, percentage?: number) =>

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

@@ -1,9 +1,11 @@
 import type { ReactNode } from 'react';
 import React, { useState } from 'react';
+
+import { IconButton, TooltipLinkList, WithTooltip } from 'storybook/internal/components';
 import { Global, styled } from 'storybook/internal/theming';
-import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/components';
 
 import { AccessibilityIcon } from '@storybook/icons';
+
 import { Filters } from './ColorFilters';
 
 const iframeId = 'storybook-preview-iframe';

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

@@ -1,8 +1,9 @@
 // @vitest-environment happy-dom
+import { describe, expect, it, vi } from 'vitest';
 
-import { describe, it, expect, vi } from 'vitest';
 import * as api from 'storybook/internal/manager-api';
 import type { Addon_BaseType } from 'storybook/internal/types';
+
 import { PANEL_ID } from './constants';
 import './manager';
 

code/addons/a11y/src/manager.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
-import { addons, types, useAddonState } from 'storybook/internal/manager-api';
+
 import { Badge, Spaced } from 'storybook/internal/components';
-import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
-import { VisionSimulator } from './components/VisionSimulator';
+import { addons, types, useAddonState } from 'storybook/internal/manager-api';
+
 import { A11YPanel } from './components/A11YPanel';
 import type { Results } from './components/A11yContext';
 import { A11yContextProvider } from './components/A11yContext';
+import { VisionSimulator } from './components/VisionSimulator';
+import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 
 const Title = () => {
   const [addonState] = useAddonState<Results>(ADDON_ID);

code/addons/a11y/src/params.ts

@@ -1,4 +1,4 @@
-import type { ElementContext, Spec, RunOptions } from 'axe-core';
+import type { ElementContext, RunOptions, Spec } from 'axe-core';
 
 export interface Setup {
   element?: ElementContext;

code/addons/a11y/vitest.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
+
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "8.3.0-alpha.4",
+  "version": "8.3.0-alpha.5",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",
@@ -24,9 +24,9 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "node": "./dist/index.js",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "require": "./dist/index.js",
+      "node": "./dist/index.js"
     },
     "./decorator": {
       "types": "./dist/decorator.d.ts",

code/addons/actions/src/addArgs.ts

@@ -1,4 +1,5 @@
 import type { ArgsEnhancer } from 'storybook/internal/types';
+
 import { addActionsFromArgTypes, inferActionsFromArgTypesRegex } from './addArgsHelpers';
 
 export const argsEnhancers: ArgsEnhancer[] = [

code/addons/actions/src/addArgsHelpers.test.ts

@@ -1,6 +1,8 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
+
 import type { StoryContext } from 'storybook/internal/types';
-import { inferActionsFromArgTypesRegex, addActionsFromArgTypes } from './addArgsHelpers';
+
+import { addActionsFromArgTypes, inferActionsFromArgTypesRegex } from './addArgsHelpers';
 
 describe('actions parameter enhancers', () => {
   describe('actions.argTypesRegex parameter', () => {

code/addons/actions/src/addArgsHelpers.ts

@@ -1,4 +1,5 @@
-import type { Args, Renderer, ArgsEnhancer } from 'storybook/internal/types';
+import type { Args, ArgsEnhancer, Renderer } from 'storybook/internal/types';
+
 import { action } from './runtime/action';
 
 // interface ActionsParameter {

code/addons/actions/src/components/ActionLogger/index.tsx

@@ -1,13 +1,14 @@
 import type { ElementRef, ReactNode } from 'react';
-import React, { forwardRef, Fragment, useEffect, useRef } from 'react';
+import React, { Fragment, forwardRef, useEffect, useRef } from 'react';
+
+import { ActionBar, ScrollArea } from 'storybook/internal/components';
 import type { Theme } from 'storybook/internal/theming';
 import { styled, withTheme } from 'storybook/internal/theming';
 
 import { Inspector } from 'react-inspector';
-import { ActionBar, ScrollArea } from 'storybook/internal/components';
 
-import { Action, Counter, InspectorContainer } from './style';
 import type { ActionDisplay } from '../../models';
+import { Action, Counter, InspectorContainer } from './style';
 
 const UnstyledWrapped = forwardRef<HTMLDivElement, { children: ReactNode; className?: string }>(
   ({ children, className }, ref) => (

code/addons/actions/src/components/ActionLogger/style.tsx

@@ -1,4 +1,5 @@
 import { styled } from 'storybook/internal/theming';
+
 import { opacify } from 'polished';
 
 export const Action = styled.div({

code/addons/actions/src/containers/ActionLogger/index.tsx

@@ -1,12 +1,13 @@
 import React, { Component } from 'react';
+
+import { STORY_CHANGED } from 'storybook/internal/core-events';
+import type { API } from 'storybook/internal/manager-api';
+
 import { dequal as deepEqual } from 'dequal';
 
-import type { API } from 'storybook/internal/manager-api';
-import { STORY_CHANGED } from 'storybook/internal/core-events';
-
 import { ActionLogger as ActionLoggerComponent } from '../../components/ActionLogger';
-import type { ActionDisplay } from '../../models';
 import { CLEAR_ID, EVENT_ID } from '../../constants';
+import type { ActionDisplay } from '../../models';
 
 interface ActionLoggerProps {
   active: boolean;

code/addons/actions/src/decorator.ts

@@ -1,9 +1,10 @@
-import { global } from '@storybook/global';
-import { useEffect, makeDecorator } from 'storybook/internal/preview-api';
+import { makeDecorator, useEffect } from 'storybook/internal/preview-api';
 import type { PartialStoryFn, Renderer } from 'storybook/internal/types';
-import { actions } from './runtime/actions';
+
+import { global } from '@storybook/global';
 
 import { PARAM_KEY } from './constants';
+import { actions } from './runtime/actions';
 
 const { document, Element } = global;
 

code/addons/actions/src/loaders.ts

@@ -1,7 +1,9 @@
 /* eslint-disable no-underscore-dangle */
 import type { LoaderFunction } from 'storybook/internal/types';
+
 import { global } from '@storybook/global';
 import type { onMockCall as onMockCallType } from '@storybook/test';
+
 import { action } from './runtime';
 
 let subscribed = false;

code/addons/actions/src/manager.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
-import { addons, types, useAddonState, useChannel } from 'storybook/internal/manager-api';
-import { STORY_CHANGED } from 'storybook/internal/core-events';
+
 import { Badge, Spaced } from 'storybook/internal/components';
-import ActionLogger from './containers/ActionLogger';
+import { STORY_CHANGED } from 'storybook/internal/core-events';
+import { addons, types, useAddonState, useChannel } from 'storybook/internal/manager-api';
+
 import { ADDON_ID, CLEAR_ID, EVENT_ID, PANEL_ID, PARAM_KEY } from './constants';
+import ActionLogger from './containers/ActionLogger';
 
 function Title() {
   const [{ count }, setCount] = useAddonState(ADDON_ID, { count: 0 });

code/addons/actions/src/runtime/__tests__/action.test.js

@@ -1,5 +1,7 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
+
 import { addons } from 'storybook/internal/preview-api';
+
 import { action, configureActions } from '../..';
 
 vi.mock('storybook/internal/preview-api');

code/addons/actions/src/runtime/__tests__/actions.test.js

@@ -1,5 +1,7 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
+
 import { addons } from 'storybook/internal/preview-api';
+
 import { actions } from '../..';
 
 vi.mock('storybook/internal/preview-api');

code/addons/actions/src/runtime/__tests__/configureActions.test.js

@@ -1,6 +1,7 @@
-import { describe, it, expect } from 'vitest';
-import { config } from '../configureActions';
+import { describe, expect, it } from 'vitest';
+
 import { configureActions } from '../..';
+import { config } from '../configureActions';
 
 describe('Configure Actions', () => {
   it('can configure actions', () => {

code/addons/actions/src/runtime/action.ts

@@ -1,9 +1,12 @@
-import { v4 as uuidv4 } from 'uuid';
 import type { PreviewWeb } from 'storybook/internal/preview-api';
 import { addons } from 'storybook/internal/preview-api';
-import type { Renderer } from 'storybook/internal/types';
-import { global } from '@storybook/global';
 import { ImplicitActionsDuringRendering } from 'storybook/internal/preview-errors';
+import type { Renderer } from 'storybook/internal/types';
+
+import { global } from '@storybook/global';
+
+import { v4 as uuidv4 } from 'uuid';
+
 import { EVENT_ID } from '../constants';
 import type { ActionDisplay, ActionOptions, HandlerFunction } from '../models';
 import { config } from './configureActions';

code/addons/actions/src/runtime/actions.ts

@@ -1,5 +1,5 @@
+import type { ActionOptions, ActionsFunction, ActionsMap } from '../models';
 import { action } from './action';
-import type { ActionsFunction, ActionOptions, ActionsMap } from '../models';
 import { config } from './configureActions';
 
 export const actions: ActionsFunction = (...args: any[]) => {

code/addons/actions/template/stories/parameters.stories.ts

@@ -1,4 +1,5 @@
 import { global as globalThis } from '@storybook/global';
+
 import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {

code/addons/actions/vitest.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
+
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(

code/addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.3.0-alpha.4",
+  "version": "8.3.0-alpha.5",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
@@ -28,9 +28,9 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "node": "./dist/index.js",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "require": "./dist/index.js",
+      "node": "./dist/index.js"
     },
     "./preview": {
       "types": "./dist/preview.d.ts",

code/addons/backgrounds/src/components/Tool.tsx

@@ -1,9 +1,10 @@
-import React, { useState, memo, Fragment, useCallback } from 'react';
+import React, { Fragment, memo, useCallback, useState } from 'react';
 
+import { IconButton, TooltipLinkList, WithTooltip } from 'storybook/internal/components';
 import { useGlobals, useParameter } from 'storybook/internal/manager-api';
-import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/components';
 
 import { CircleIcon, GridIcon, PhotoIcon, RefreshIcon } from '@storybook/icons';
+
 import { PARAM_KEY as KEY } from '../constants';
 import type { Background, BackgroundMap, Config, GlobalStateUpdate } from '../types';
 

code/addons/backgrounds/src/decorator.ts

@@ -1,13 +1,13 @@
 import { useEffect } from 'storybook/internal/preview-api';
 import type {
   Renderer,
-  PartialStoryFn as StoryFunction,
   StoryContext,
+  PartialStoryFn as StoryFunction,
 } from 'storybook/internal/types';
 
 import { PARAM_KEY as KEY } from './constants';
-import { clearStyles, addBackgroundStyle, isReduceMotionEnabled, addGridStyle } from './utils';
 import type { Config, GridConfig } from './types';
+import { addBackgroundStyle, addGridStyle, clearStyles, isReduceMotionEnabled } from './utils';
 
 const defaultGrid: GridConfig = {
   cellSize: 100,

code/addons/backgrounds/src/legacy/BackgroundSelectorLegacy.tsx

@@ -1,15 +1,17 @@
 import type { FC, ReactElement } from 'react';
-import React, { useState, useCallback, useMemo, memo } from 'react';
-import memoize from 'memoizerific';
+import React, { memo, useCallback, useMemo, useState } from 'react';
 
-import { useParameter, useGlobals } from 'storybook/internal/manager-api';
 import { logger } from 'storybook/internal/client-logger';
-import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/components';
+import { IconButton, TooltipLinkList, WithTooltip } from 'storybook/internal/components';
+import { useGlobals, useParameter } from 'storybook/internal/manager-api';
 
 import { PhotoIcon } from '@storybook/icons';
+
+import memoize from 'memoizerific';
+
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
-import { ColorIcon } from './ColorIcon';
 import type { Background } from '../types';
+import { ColorIcon } from './ColorIcon';
 import { getBackgroundColorByName } from './getBackgroundColorByName';
 
 export interface DeprecatedGlobalState {

code/addons/backgrounds/src/legacy/GridSelectorLegacy.tsx

@@ -1,10 +1,11 @@
 import type { FC } from 'react';
 import React, { memo } from 'react';
 
-import { useGlobals, useParameter } from 'storybook/internal/manager-api';
 import { IconButton } from 'storybook/internal/components';
+import { useGlobals, useParameter } from 'storybook/internal/manager-api';
 
 import { GridIcon } from '@storybook/icons';
+
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 
 export const GridToolLegacy: FC = memo(function GridSelector() {

code/addons/backgrounds/src/legacy/getBackgroundColorByName.ts

@@ -1,5 +1,7 @@
-import { dedent } from 'ts-dedent';
 import { logger } from 'storybook/internal/client-logger';
+
+import { dedent } from 'ts-dedent';
+
 import type { Background } from '../types';
 
 export const getBackgroundColorByName = (

code/addons/backgrounds/src/legacy/withBackgroundLegacy.ts

@@ -1,12 +1,12 @@
-import { useMemo, useEffect } from 'storybook/internal/preview-api';
+import { useEffect, useMemo } from 'storybook/internal/preview-api';
 import type {
   Renderer,
-  PartialStoryFn as StoryFunction,
   StoryContext,
+  PartialStoryFn as StoryFunction,
 } from 'storybook/internal/types';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
-import { clearStyles, addBackgroundStyle, isReduceMotionEnabled } from '../utils';
+import { addBackgroundStyle, clearStyles, isReduceMotionEnabled } from '../utils';
 import { getBackgroundColorByName } from './getBackgroundColorByName';
 
 export const withBackground = (

code/addons/backgrounds/src/legacy/withGridLegacy.ts

@@ -1,12 +1,12 @@
-import { useMemo, useEffect } from 'storybook/internal/preview-api';
+import { useEffect, useMemo } from 'storybook/internal/preview-api';
 import type {
   Renderer,
-  PartialStoryFn as StoryFunction,
   StoryContext,
+  PartialStoryFn as StoryFunction,
 } from 'storybook/internal/types';
 
-import { clearStyles, addGridStyle } from '../utils';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
+import { addGridStyle, clearStyles } from '../utils';
 
 export const withGrid = (StoryFn: StoryFunction<Renderer>, context: StoryContext<Renderer>) => {
   const { globals, parameters } = context;

code/addons/backgrounds/src/manager.tsx

@@ -1,10 +1,11 @@
 import React, { Fragment } from 'react';
+
 import { addons, types } from 'storybook/internal/manager-api';
 
+import { BackgroundTool } from './components/Tool';
 import { ADDON_ID } from './constants';
 import { BackgroundToolLegacy } from './legacy/BackgroundSelectorLegacy';
 import { GridToolLegacy } from './legacy/GridSelectorLegacy';
-import { BackgroundTool } from './components/Tool';
 
 addons.register(ADDON_ID, () => {
   addons.add(ADDON_ID, {

code/addons/backgrounds/src/preview.ts

@@ -1,8 +1,9 @@
 import type { Addon_DecoratorFunction } from 'storybook/internal/types';
-import { withBackground } from './legacy/withBackgroundLegacy';
-import { withGrid } from './legacy/withGridLegacy';
+
 import { PARAM_KEY as KEY } from './constants';
 import { withBackgroundAndGrid } from './decorator';
+import { withBackground } from './legacy/withBackgroundLegacy';
+import { withGrid } from './legacy/withGridLegacy';
 import type { Config, GlobalState } from './types';
 
 export const decorators: Addon_DecoratorFunction[] = FEATURES?.backgroundsStoryGlobals

code/addons/backgrounds/vitest.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
+
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.3.0-alpha.4",
+  "version": "8.3.0-alpha.5",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",
@@ -28,9 +28,9 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "node": "./dist/index.js",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "require": "./dist/index.js",
+      "node": "./dist/index.js"
     },
     "./manager": "./dist/manager.js",
     "./register": "./dist/manager.js",

code/addons/controls/src/ControlsPanel.tsx

@@ -1,19 +1,22 @@
-import { dequal as deepEqual } from 'dequal';
 import React, { useEffect, useMemo, useState } from 'react';
-import { global } from '@storybook/global';
+
 import {
+  useArgTypes,
   useArgs,
   useGlobals,
-  useArgTypes,
   useParameter,
   useStorybookState,
 } from 'storybook/internal/manager-api';
-import { PureArgsTable as ArgsTable, type PresetColor, type SortType } from '@storybook/blocks';
 import { styled } from 'storybook/internal/theming';
 import type { ArgTypes } from 'storybook/internal/types';
 
-import { PARAM_KEY } from './constants';
+import { PureArgsTable as ArgsTable, type PresetColor, type SortType } from '@storybook/blocks';
+import { global } from '@storybook/global';
+
+import { dequal as deepEqual } from 'dequal';
+
 import { SaveStory } from './SaveStory';
+import { PARAM_KEY } from './constants';
 
 // Remove undefined values (top-level only)
 const clean = (obj: { [key: string]: any }) =>

code/addons/controls/src/SaveStory.stories.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
+
 import type { Meta, StoryObj } from '@storybook/react';
+import { expect, fireEvent, fn, userEvent, within } from '@storybook/test';
+
+import { action } from '@storybook/addon-actions';
 
 import { SaveStory } from './SaveStory';
-import { expect, fireEvent, fn, userEvent, within } from '@storybook/test';
 
 const meta = {
   component: SaveStory,

code/addons/controls/src/SaveStory.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {
   Bar as BaseBar,
   Button,
@@ -7,9 +9,9 @@ import {
   TooltipNote,
   WithTooltip,
 } from 'storybook/internal/components';
-import { AddIcon, CheckIcon, UndoIcon } from '@storybook/icons';
 import { keyframes, styled } from 'storybook/internal/theming';
-import React from 'react';
+
+import { AddIcon, CheckIcon, UndoIcon } from '@storybook/icons';
 
 const slideIn = keyframes({
   from: { transform: 'translateY(40px)' },

code/addons/controls/src/manager.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { dequal as deepEqual } from 'dequal';
+
 import { AddonPanel, Badge, Spaced } from 'storybook/internal/components';
 import type {
   ResponseData,
@@ -14,9 +14,13 @@ import {
   useArgTypes,
 } from 'storybook/internal/manager-api';
 import { color } from 'storybook/internal/theming';
+
+import type { Args } from '@storybook/csf';
+
+import { dequal as deepEqual } from 'dequal';
+
 import { ControlsPanel } from './ControlsPanel';
 import { ADDON_ID, PARAM_KEY } from './constants';
-import type { Args } from '@storybook/csf';
 
 function Title() {
   const rows = useArgTypes();

code/addons/controls/src/preset/checkDocsLoaded.ts

@@ -1,5 +1,6 @@
+import { isAbsolute, join } from 'node:path';
+
 import { checkAddonOrder, serverRequire } from 'storybook/internal/common';
-import path from 'path';
 
 export const checkDocsLoaded = (configDir: string) => {
   checkAddonOrder({
@@ -11,9 +12,9 @@ export const checkDocsLoaded = (configDir: string) => {
       name: '@storybook/addon-controls',
       inEssentials: true,
     },
-    configFile: path.isAbsolute(configDir)
-      ? path.join(configDir, 'main')
-      : path.join(process.cwd(), configDir, 'main'),
+    configFile: isAbsolute(configDir)
+      ? join(configDir, 'main')
+      : join(process.cwd(), configDir, 'main'),
     getConfig: (configFile) => serverRequire(configFile),
   });
 };

code/addons/controls/template/stories/basics.stories.ts

@@ -1,6 +1,7 @@
-import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, StoryContext } from 'storybook/internal/types';
 
+import { global as globalThis } from '@storybook/global';
+
 export default {
   component: globalThis.Components.Pre,
   decorators: [

code/addons/controls/template/stories/conditional.stories.ts

@@ -1,6 +1,7 @@
-import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, StoryContext } from 'storybook/internal/types';
 
+import { global as globalThis } from '@storybook/global';
+
 export default {
   component: globalThis.Components.Pre,
   decorators: [

code/addons/controls/template/stories/disable.stories.ts

@@ -1,6 +1,7 @@
-import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, StoryContext } from 'storybook/internal/types';
 
+import { global as globalThis } from '@storybook/global';
+
 export default {
   component: globalThis.Components.Pre,
   decorators: [

code/addons/controls/template/stories/filters.stories.ts

@@ -1,6 +1,7 @@
-import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, StoryContext } from 'storybook/internal/types';
 
+import { global as globalThis } from '@storybook/global';
+
 export default {
   component: globalThis.Components.Pre,
   decorators: [

code/addons/controls/template/stories/issues.stories.ts

@@ -1,6 +1,7 @@
-import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, StoryContext } from 'storybook/internal/types';
 
+import { global as globalThis } from '@storybook/global';
+
 export default {
   component: globalThis.Components.Pre,
   decorators: [

code/addons/controls/template/stories/matchers.stories.ts

@@ -1,6 +1,7 @@
-import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, StoryContext } from 'storybook/internal/types';
 
+import { global as globalThis } from '@storybook/global';
+
 export default {
   component: globalThis.Components.Pre,
   decorators: [

code/addons/controls/template/stories/sorting.stories.ts

@@ -1,6 +1,7 @@
-import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, StoryContext } from 'storybook/internal/types';
 
+import { global as globalThis } from '@storybook/global';
+
 export default {
   component: globalThis.Components.Pre,
   decorators: [

code/addons/controls/vitest.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
+
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(

code/addons/docs/docs/docspage.md

@@ -70,6 +70,7 @@ You can replace DocsPage at any level by overriding the `docs.page` parameter:
 
 ```js
 import { addParameters } from '@storybook/react';
+
 addParameters({ docs: { page: null } });
 ```
 
@@ -77,6 +78,7 @@ addParameters({ docs: { page: null } });
 
 ```js
 import { Button } from './Button';
+
 export default {
   title: 'Demo/Button',
   component: Button,
@@ -101,7 +103,7 @@ Here's an example of rebuilding `DocsPage` out of doc blocks:
 
 ```js
 import React from 'react';
-import { Title, Subtitle, Description, Primary, ArgsTable, Stories } from '@storybook/addon-docs';
+import { ArgsTable, Description, Primary, Stories, Subtitle, Title } from '@storybook/addon-docs';
 import { DocgenButton } from '../../components/DocgenButton';
 
 export default {
@@ -141,8 +143,8 @@ That being said, there is a system in place to remove the necessity of this trad
 ```js
 import React from 'react';
 import { render } from 'react-dom';
-import toReact from '@egoist/vue-to-react';
 import { addParameters } from '@storybook/vue';
+import toReact from '@egoist/vue-to-react';
 
 addParameters({
   docs: {

code/addons/docs/docs/multiframework.md

@@ -113,7 +113,7 @@ This dynamic rendering is framework-specific, meaning it needs a custom implemen
 Let's take a look at the React framework implementation of `dynamic` snippets as a reference for implementing this feature in other frameworks:
 
 ```tsx
-import { addons, StoryContext } from '@storybook/preview-api';
+import { StoryContext, addons } from '@storybook/preview-api';
 import { SNIPPET_RENDERED } from '../../shared';
 
 export const jsxDecorator = (storyFn: any, context: StoryContext) => {
@@ -150,6 +150,7 @@ Now we need a way to configure how it's displayed in the UI:
 
 ```tsx
 import { jsxDecorator } from './jsxDecorator';
+
 export const decorators = [jsxDecorator];
 ```
 

code/addons/docs/docs/props-tables.md

@@ -104,6 +104,7 @@ Consider the following input:
 // Button.js
 import React from 'react';
 import PropTypes from 'prop-types';
+
 export const Button = ({ label }) => <button>{label}</button>;
 Button.propTypes = {
   /** demo description */

code/addons/docs/docs/recipes.md

@@ -106,6 +106,7 @@ And I can also embed arbitrary markdown & JSX in this file.
 import React from 'react';
 import { Button } from './Button';
 import mdx from './Button.mdx';
+
 export default {
   title: 'Demo/Button',
   parameters: {

code/addons/docs/docs/theming.md

@@ -14,9 +14,9 @@ Storybook theming is the **recommended way** to theme your docs. Docs uses the s
 Supposing you have a Storybook theme defined for the main UI in `.storybook/manager.js`:
 
 ```js
-import { addons } from '@storybook/manager-api';
 // or a custom theme
 import { themes } from '@storybook/theming';
+import { addons } from '@storybook/manager-api';
 
 addons.setConfig({
   theme: themes.dark,

code/addons/docs/ember/README.md

@@ -52,6 +52,7 @@ Next, add the following to your `.storybook/preview.js` to load the generated js
 ```js
 import { setJSONDoc } from '@storybook/addon-docs/ember';
 import docJson from '../dist/storybook-docgen/index.json';
+
 setJSONDoc(docJson);
 ```
 

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.3.0-alpha.4",
+  "version": "8.3.0-alpha.5",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -27,9 +27,9 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "node": "./dist/index.js",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "require": "./dist/index.js",
+      "node": "./dist/index.js"
     },
     "./preview": {
       "types": "./dist/preview.d.ts",

code/addons/docs/src/DocsRenderer.tsx

@@ -1,13 +1,16 @@
 import type { PropsWithChildren } from 'react';
 import React, { Component } from 'react';
-import { renderElement, unmountElement } from '@storybook/react-dom-shim';
+
 import type {
-  Renderer,
-  Parameters,
   DocsContextProps,
   DocsRenderFunction,
+  Parameters,
+  Renderer,
 } from 'storybook/internal/types';
-import { Docs, CodeOrSourceMdx, AnchorMdx, HeadersMdx } from '@storybook/blocks';
+
+import { AnchorMdx, CodeOrSourceMdx, Docs, HeadersMdx } from '@storybook/blocks';
+
+import { renderElement, unmountElement } from '@storybook/react-dom-shim';
 
 // TS doesn't like that we export a component with types that it doesn't know about (TS4203)
 export const defaultComponents: Record<string, any> = {

code/addons/docs/src/compiler/index.test.ts

@@ -1,6 +1,8 @@
-import { expect, describe, it } from 'vitest';
+import { describe, expect, it } from 'vitest';
+
 import { dedent } from 'ts-dedent';
-import { compileSync, compile } from './index';
+
+import { compile, compileSync } from './index';
 
 expect.addSnapshotSerializer({
   serialize: (val: any) => (typeof val === 'string' ? val : val.toString()),

code/addons/docs/src/mdx-loader.ts

@@ -1,5 +1,6 @@
 import type { transformAsync } from '@babel/core';
 import type { compile as mdxCompile } from '@mdx-js/mdx';
+
 import { compile } from './compiler';
 
 export type MdxCompileOptions = Parameters<typeof mdxCompile>[1];

code/addons/docs/src/plugins/mdx-plugin.ts

@@ -1,9 +1,12 @@
+import { dirname, join } from 'node:path';
+
 import type { Options } from 'storybook/internal/types';
-import type { Plugin } from 'vite';
-import rehypeSlug from 'rehype-slug';
-import rehypeExternalLinks from 'rehype-external-links';
+
 import { createFilter } from '@rollup/pluginutils';
-import { dirname, join } from 'path';
+import rehypeExternalLinks from 'rehype-external-links';
+import rehypeSlug from 'rehype-slug';
+import type { Plugin } from 'vite';
+
 import type { CompileOptions } from '../compiler';
 import { compile } from '../compiler';
 

code/addons/docs/src/preset.ts

@@ -1,10 +1,13 @@
-import { dirname, join, isAbsolute } from 'path';
-import rehypeSlug from 'rehype-slug';
-import rehypeExternalLinks from 'rehype-external-links';
+import { dirname, isAbsolute, join } from 'node:path';
 
-import type { DocsOptions, Options, PresetProperty } from 'storybook/internal/types';
-import type { CsfPluginOptions } from '@storybook/csf-plugin';
 import { logger } from 'storybook/internal/node-logger';
+import type { DocsOptions, Options, PresetProperty } from 'storybook/internal/types';
+
+import type { CsfPluginOptions } from '@storybook/csf-plugin';
+
+import rehypeExternalLinks from 'rehype-external-links';
+import rehypeSlug from 'rehype-slug';
+
 import type { CompileOptions } from './compiler';
 
 /**

code/addons/docs/src/preview.ts

@@ -1,4 +1,5 @@
 import type { PreparedStory } from 'storybook/internal/types';
+
 import { global } from '@storybook/global';
 
 const excludeTags = Object.entries(global.TAGS_OPTIONS ?? {}).reduce(

code/addons/docs/template/stories/docs2/resolved-react.stories.ts

@@ -1,8 +1,9 @@
-import { within, expect } from '@storybook/test';
 import * as ReactExport from 'react';
 import * as ReactDom from 'react-dom';
 import * as ReactDomServer from 'react-dom/server';
 
+import { expect, within } from '@storybook/test';
+
 /**
  * This component is used to display the resolved version of React and its related packages.
  * As long as `@storybook/addon-docs` is installed, `react` and `react-dom` should be available to import from and should resolve to the same version.

code/addons/docs/template/stories/docspage/source.stories.ts

@@ -1,5 +1,7 @@
-import { global as globalThis } from '@storybook/global';
 import type { StoryContext } from 'storybook/internal/types';
+
+import { global as globalThis } from '@storybook/global';
+
 import { dedent } from 'ts-dedent';
 
 export default {

code/addons/docs/template/stories/toc/basic.stories.ts

@@ -1,4 +1,5 @@
 import { global as globalThis } from '@storybook/global';
+import { fn } from '@storybook/test';
 
 export default {
   component: globalThis.Components.Button,

code/addons/docs/vitest.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
+
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(

code/addons/essentials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "8.3.0-alpha.4",
+  "version": "8.3.0-alpha.5",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",
@@ -24,9 +24,9 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "node": "./dist/index.js",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "require": "./dist/index.js",
+      "node": "./dist/index.js"
     },
     "./actions/preview": {
       "types": "./dist/actions/preview.d.ts",

code/addons/essentials/src/docs/preset.ts

@@ -1,4 +1,4 @@
-import { dirname, join } from 'path';
+import { dirname, join } from 'node:path';
 
 export * from '@storybook/addon-docs/dist/preset';
 

code/addons/essentials/src/index.ts

@@ -1,6 +1,7 @@
-import path from 'path';
-import { logger } from 'storybook/internal/node-logger';
+import { isAbsolute, join } from 'node:path';
+
 import { serverRequire } from 'storybook/internal/common';
+import { logger } from 'storybook/internal/node-logger';
 
 interface PresetOptions {
   /**
@@ -56,10 +57,8 @@ interface PresetOptions {
 }
 
 const requireMain = (configDir: string) => {
-  const absoluteConfigDir = path.isAbsolute(configDir)
-    ? configDir
-    : path.join(process.cwd(), configDir);
-  const mainFile = path.join(absoluteConfigDir, 'main');
+  const absoluteConfigDir = isAbsolute(configDir) ? configDir : join(process.cwd(), configDir);
+  const mainFile = join(absoluteConfigDir, 'main');
 
   return serverRequire(mainFile) ?? {};
 };

code/addons/essentials/vitest.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
+
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(

code/addons/gfm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "8.3.0-alpha.4",
+  "version": "8.3.0-alpha.5",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

code/addons/gfm/src/index.ts

@@ -1,7 +1,7 @@
-import { dedent } from 'ts-dedent';
 import { deprecate } from 'storybook/internal/node-logger';
 
 import remarkGfm from 'remark-gfm';
+import { dedent } from 'ts-dedent';
 
 export const mdxLoaderOptions = async (config: any) => {
   config.mdxCompileOptions.remarkPlugins = config.mdxCompileOptions.remarkPlugins || [];

code/addons/gfm/vitest.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
+
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(