Merge pull request #30926 from storybookjs/valentin/api-removals

Maintenance: Remove deprecated APIs

MIGRATION.md

@@ -1,6 +1,16 @@
 <h1>Migration</h1>
 
 - [From version 8.x to 9.0.0](#from-version-8x-to-900)
+  - [A11y addon: Removed deprecated manual parameter](#a11y-addon-removed-deprecated-manual-parameter)
+  - [Button Component API Changes](#button-component-api-changes)
+  - [Documentation Generation Changes](#documentation-generation-changes)
+  - [Global State Management](#global-state-management)
+  - [Icon System Updates](#icon-system-updates)
+  - [Sidebar Component Changes](#sidebar-component-changes)
+  - [Testing Module Changes](#testing-module-changes)
+  - [Type System Updates](#type-system-updates)
+  - [Story Store API Changes](#story-store-api-changes)
+  - [CSF File Changes](#csf-file-changes)
   - [The parameter docs.source.excludeDecorators has no effect in React](#the-parameter-docssourceexcludedecorators-has-no-effect-in-react)
   - [Addon Viewport is moved to core](#addon-viewport-is-moved-to-core)
   - [Addon Controls is moved to core](#addon-controls-is-moved-to-core)
@@ -412,6 +422,171 @@
 
 ## From version 8.x to 9.0.0
 
+### A11y addon: Removed deprecated manual parameter
+
+The deprecated `manual` parameter from the A11y addon's parameters has been removed. Instead, use the `globals.a11y.manual` setting to control manual mode. For example:
+
+```js
+// Old way (no longer works)
+export const MyStory = {
+  parameters: {
+    a11y: {
+      manual: true
+    }
+  }
+};
+
+// New way
+export const MyStory = {
+  parameters: {
+    a11y: {
+      // other a11y parameters
+    }
+  }
+  globals: {
+    a11y: {
+      manual: true
+    }
+  }
+};
+
+// To enable manual mode globally, use .storybook/preview.js:
+export const initialGlobals = {
+  a11y: {
+    manual: true
+  }
+};
+```
+
+### Button Component API Changes
+
+The Button component has been updated to use a more modern props API. The following props have been removed:
+- `isLink`
+- `primary`
+- `secondary`
+- `tertiary`
+- `gray`
+- `inForm`
+- `small`
+- `outline`
+- `containsIcon`
+
+Use the new `variant` and `size` props instead:
+
+```diff
+- <Button primary small>Click me</Button>
++ <Button variant="primary" size="small">Click me</Button>
+```
+
+### Documentation Generation Changes
+
+The `autodocs` configuration option has been removed in favor of using tags:
+
+```diff
+// .storybook/preview.js
+export default {
+- docs: { autodocs: true }
+};
+
+// In your CSF files:
++ export default {
++   tags: ['autodocs']
++ };
+```
+
+### Global State Management
+
+The `globals` field in project annotations has been renamed to `initialGlobals`:
+
+```diff
+export const preview = {
+- globals: {
++ initialGlobals: {
+    theme: 'light'
+  }
+};
+```
+
+Additionally loading the defaultValue from `globalTypes` isn't supported anymore. Use `initialGlobals` instead to define the defaultValue.
+
+```diff
+// .storybook/preview.js
+export default {
++ initialGlobals: {
++   locale: 'en'
++ },
+  globalTypes: {
+    locale: {
+      description: 'Locale for components',
+-     defaultValue: 'en',
+      toolbar: {
+        title: 'Locale',
+        icon: 'circlehollow',
+        items: ['es', 'en'],
+      },
+    },
+  },
+}
+```
+
+### Icon System Updates
+
+Several icon-related exports have been removed:
+- `IconButtonSkeleton`
+- `Icons`
+- `Symbols`
+- Legacy icon exports
+
+Use the new icon system from `@storybook/icons` instead:
+
+```diff
+- import { Icons, IconButtonSkeleton } from '@storybook/components';
++ import { ZoomIcon } from '@storybook/icons';
+```
+
+### Sidebar Component Changes
+
+1. The 'extra' prop has been removed from the Sidebar's Heading component
+2. Experimental sidebar features have been removed:
+   - `experimental_SIDEBAR_BOTTOM`
+   - `experimental_SIDEBAR_TOP`
+
+### Testing Module Changes
+
+The `TESTING_MODULE_RUN_ALL_REQUEST` event has been removed:
+
+```diff
+- import { TESTING_MODULE_RUN_ALL_REQUEST } from '@storybook/core-events';
++ import { TESTING_MODULE_RUN_REQUEST } from '@storybook/core-events';
+```
+
+### Type System Updates
+
+The following types have been removed:
+- `Addon_SidebarBottomType`
+- `Addon_SidebarTopType`
+- `DeprecatedState`
+
+Import paths have been updated:
+```diff
+- import { SupportedRenderers } from './project_types';
++ import { SupportedRenderers } from 'storybook/internal/types';
+```
+
+### Story Store API Changes
+
+Several deprecated methods have been removed from the StoryStore:
+- `getSetStoriesPayload`
+- `getStoriesJsonData`
+- `raw`
+- `fromId`
+
+### CSF File Changes
+
+Deprecated getters have been removed from the CsfFile class:
+- `_fileName`
+- `_makeTitle`
+
 ### The parameter docs.source.excludeDecorators has no effect in React
 
 In React, the parameter `docs.source.excludeDecorators` option is no longer used.

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

@@ -57,7 +57,6 @@ const Centered = styled.span(({ theme }) => ({
 }));
 
 export const A11YPanel: React.FC = () => {
-  const { manual: manualParameter } = useParameter<A11yParameters>(PARAM_KEY, {} as any);
   const {
     tab,
     results,
@@ -169,8 +168,7 @@ export const A11YPanel: React.FC = () => {
                 Run accessibility scan
               </Button>
               <p>
-                Update <code>{manualParameter ? 'parameters' : 'globals'}.a11y.manual</code> to
+                Update <code>globals.a11y.manual</code> to disable manual mode.
-                disable manual mode.
               </p>
             </>
           )}

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

@@ -166,24 +166,6 @@ describe('A11yContext', () => {
     );
   });
 
-  it('should set discrepancy to cliFailedButModeManual when in manual mode', () => {
-    mockedApi.useParameter.mockReturnValue({ manual: true });
-    mockedApi.experimental_useStatusStore.mockReturnValue('status-value:error');
-
-    const Component = () => {
-      const { discrepancy } = useA11yContext();
-      return <div data-testid="discrepancy">{discrepancy}</div>;
-    };
-
-    const { getByTestId } = render(
-      <A11yContextProvider>
-        <Component />
-      </A11yContextProvider>
-    );
-
-    expect(getByTestId('discrepancy').textContent).toBe('cliFailedButModeManual');
-  });
-
   it('should set discrepancy to cliFailedButModeManual when in manual mode (set via globals)', () => {
     mockedApi.useGlobals.mockReturnValue([{ a11y: { manual: true } }] as any);
     mockedApi.experimental_useStatusStore.mockReturnValue('status-value:error');
@@ -264,35 +246,6 @@ describe('A11yContext', () => {
     expect(queryByTestId('status')).toHaveTextContent('running');
   });
 
-  it('should handle STORY_RENDER_PHASE_CHANGED event correctly when in manual mode', () => {
-    mockedApi.useParameter.mockReturnValue({ manual: true });
-
-    const emit = vi.fn();
-    mockedApi.useChannel.mockReturnValue(emit);
-
-    const Component = () => {
-      const { status } = useA11yContext();
-      return <div data-testid="status">{status}</div>;
-    };
-
-    const { queryByTestId } = render(
-      <A11yContextProvider>
-        <Component />
-      </A11yContextProvider>
-    );
-
-    expect(queryByTestId('status')).toHaveTextContent('manual');
-
-    const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
-    const storyRenderPhaseChangedPayload = {
-      newPhase: 'loading',
-    };
-
-    act(() => useChannelArgs[STORY_RENDER_PHASE_CHANGED](storyRenderPhaseChangedPayload));
-
-    expect(queryByTestId('status')).toHaveTextContent('manual');
-  });
-
   it('should handle STORY_RENDER_PHASE_CHANGED event correctly when in manual mode (set via globals)', () => {
     mockedApi.useGlobals.mockReturnValue([{ a11y: { manual: true } }] as any);
 

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

@@ -102,19 +102,14 @@ const defaultResult = {
 type Status = 'initial' | 'manual' | 'running' | 'error' | 'component-test-error' | 'ran' | 'ready';
 
 export const A11yContextProvider: FC<PropsWithChildren> = (props) => {
-  const parameters = useParameter<A11yParameters>('a11y', {
+  const parameters = useParameter<A11yParameters>('a11y', {});
-    manual: false,
-  });
 
   const [globals] = useGlobals() ?? [];
   const api = useStorybookApi();
 
   const getInitialStatus = useCallback((manual = false) => (manual ? 'manual' : 'initial'), []);
 
-  const manual = useMemo(
+  const manual = useMemo(() => globals?.a11y?.manual ?? false, [globals?.a11y?.manual]);
-    () => globals?.a11y?.manual ?? parameters.manual ?? false,
-    [globals?.a11y?.manual, parameters.manual]
-  );
 
   const a11ySelection = useMemo(() => {
     const value = api.getQueryParam('a11ySelection');

code/addons/a11y/src/params.ts

@@ -12,8 +12,6 @@ export interface A11yParameters {
   element?: ElementContext;
   config?: Spec;
   options?: RunOptions;
-  /** @deprecated Use globals.a11y.manual instead */
-  manual?: boolean;
   disable?: boolean;
   test?: A11yTest;
 }

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

@@ -183,21 +183,6 @@ describe('afterEach', () => {
     });
   });
 
-  it('should not run accessibility checks when manual is true', async () => {
-    const context = createContext({
-      parameters: {
-        a11y: {
-          manual: true,
-        },
-      },
-    });
-
-    await experimental_afterEach(context);
-
-    expect(mockedRun).not.toHaveBeenCalled();
-    expect(context.reporting.addReport).not.toHaveBeenCalled();
-  });
-
   it('should not run accessibility checks when disable is true', async () => {
     const context = createContext({
       parameters: {

code/addons/a11y/src/preview.tsx

@@ -18,7 +18,6 @@ export const experimental_afterEach: AfterEach<any> = async ({
   const a11yGlobals = globals.a11y;
 
   const shouldRunEnvironmentIndependent =
-    a11yParameter?.manual !== true &&
     a11yParameter?.disable !== true &&
     a11yParameter?.test !== 'off' &&
     a11yGlobals?.manual !== true;

code/core/src/cli/dirs.ts

@@ -2,14 +2,13 @@ import { dirname, join } from 'node:path';
 
 import { temporaryDirectory, versions } from 'storybook/internal/common';
 import type { JsPackageManager } from 'storybook/internal/common';
-import type { SupportedFrameworks } from 'storybook/internal/types';
+import type { SupportedFrameworks, SupportedRenderers } from 'storybook/internal/types';
 
 import downloadTarballDefault from '@ndelangen/get-tarball';
 import getNpmTarballUrlDefault from 'get-npm-tarball-url';
 import invariant from 'tiny-invariant';
 
 import { externalFrameworks } from './project_types';
-import type { SupportedRenderers } from './project_types';
 
 const resolveUsingBranchInstall = async (packageManager: JsPackageManager, request: string) => {
   const tempDirectory = await temporaryDirectory();

code/core/src/cli/helpers.test.ts

@@ -4,12 +4,12 @@ import fsp from 'node:fs/promises';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import type { JsPackageManager } from 'storybook/internal/common';
+import type { SupportedRenderers } from 'storybook/internal/types';
 
 import { sep } from 'path';
 
 import { IS_WINDOWS } from '../../../vitest.helpers';
 import * as helpers from './helpers';
-import type { SupportedRenderers } from './project_types';
 import { SupportedLanguage } from './project_types';
 
 const normalizePath = (path: string) => (IS_WINDOWS ? path.replace(/\//g, sep) : path);

code/core/src/cli/helpers.ts

@@ -3,10 +3,10 @@ import { cp, readFile, writeFile } from 'node:fs/promises';
 import { join, resolve } from 'node:path';
 
 import {
-  frameworkToRenderer as CoreFrameworkToRenderer,
   type JsPackageManager,
   type PackageJson,
   type PackageJsonWithDepsAndDevDeps,
+  frameworkToRenderer,
 } from 'storybook/internal/common';
 import { versions as storybookMonorepoPackages } from 'storybook/internal/common';
 import type { SupportedFrameworks, SupportedRenderers } from 'storybook/internal/types';
@@ -142,9 +142,6 @@ type CopyTemplateFilesOptions = {
   features: string[];
 };
 
-/** @deprecated Please use `frameworkToRenderer` from `storybook/internal/common` instead */
-export const frameworkToRenderer = CoreFrameworkToRenderer;
-
 export const frameworkToDefaultBuilder: Record<
   SupportedFrameworks,
   CoreBuilder | CommunityBuilder

code/core/src/cli/project_types.ts

@@ -1,7 +1,4 @@
-import type {
+import type { SupportedFrameworks, SupportedRenderers } from 'storybook/internal/types';
-  SupportedRenderers as CoreSupportedRenderers,
-  SupportedFrameworks,
-} from 'storybook/internal/types';
 
 import { minVersion, validRange } from 'semver';
 
@@ -32,9 +29,6 @@ export const externalFrameworks: ExternalFramework[] = [
   },
 ];
 
-/** @deprecated Please use `SupportedRenderers` from `storybook/internal/types` instead */
-export type SupportedRenderers = CoreSupportedRenderers;
-
 export const SUPPORTED_RENDERERS: SupportedRenderers[] = [
   'react',
   'react-native',

code/core/src/components/components/Button/Button.deprecated.stories.tsx

@@ -1,93 +0,0 @@
-import React from 'react';
-
-import { LinkIcon } from '@storybook/icons';
-
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Form } from '../form';
-import { Button } from './Button';
-
-const meta: Meta<typeof Button> = {
-  title: 'Button (Deprecated)',
-  component: Button,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const Default = { args: { children: 'Default' } };
-
-export const FormButton: Story = {
-  render: (args) => <Form.Button {...args} />,
-  args: { children: 'Form.Button' },
-};
-
-export const Primary: Story = { args: { primary: true, children: 'Primary' } };
-export const Secondary: Story = { args: { secondary: true, children: 'Secondary' } };
-export const Tertiary: Story = { args: { tertiary: true, children: 'Tertiary' } };
-export const Gray: Story = { args: { gray: true, children: 'Gray' } };
-
-export const Outline: Story = { args: { outline: true, children: 'Outline' } };
-export const OutlinePrimary: Story = {
-  args: { outline: true, primary: true, children: 'Outline Primary' },
-};
-export const OutlineSecondary: Story = {
-  args: { outline: true, secondary: true, children: 'Outline Secondary' },
-};
-export const OutlineTertiary: Story = {
-  args: { outline: true, tertiary: true, children: 'Outline Tertiary' },
-};
-
-export const Disabled: Story = { args: { disabled: true, children: 'Disabled' } };
-export const DisabledPrimary: Story = {
-  args: { disabled: true, primary: true, children: 'Disabled Priary' },
-};
-export const DisabledSecondary: Story = {
-  args: { disabled: true, secondary: true, children: 'Disabled Secondary' },
-};
-export const DisabledTertiary: Story = {
-  args: { disabled: true, tertiary: true, children: 'Disabled Tertiary' },
-};
-export const DisabledGray: Story = {
-  args: { disabled: true, gray: true, children: 'Disabled Gray' },
-};
-
-export const Small: Story = { args: { small: true, children: 'Small' } };
-export const SmallPrimary: Story = {
-  args: { small: true, primary: true, children: 'Small Priary' },
-};
-export const SmallSecondary: Story = {
-  args: { small: true, secondary: true, children: 'Small Secondary' },
-};
-export const SmallTertiary: Story = {
-  args: { small: true, tertiary: true, children: 'Small Tertiary' },
-};
-export const SmallGray: Story = {
-  args: { small: true, gray: true, children: 'Small Gray' },
-};
-
-export const IsLink: Story = {
-  args: { isLink: true, children: 'Button as a link' },
-};
-
-export const IconPrimary: Story = {
-  args: {
-    primary: true,
-    containsIcon: true,
-    title: 'link',
-    children: <LinkIcon />,
-  },
-};
-export const IconOutline: Story = {
-  args: { outline: true, containsIcon: true, title: 'link', children: <LinkIcon /> },
-};
-export const IconOutlineSmall: Story = {
-  args: {
-    outline: true,
-    containsIcon: true,
-    small: true,
-    title: 'link',
-    children: <LinkIcon />,
-  },
-};

code/core/src/components/components/Button/Button.tsx

@@ -1,8 +1,6 @@
 import type { ButtonHTMLAttributes, SyntheticEvent } from 'react';
 import React, { forwardRef, useEffect, useState } from 'react';
 
-import { deprecate } from 'storybook/internal/client-logger';
-
 import { Slot } from '@radix-ui/react-slot';
 import { darken, lighten, rgba, transparentize } from 'polished';
 import { isPropValid, styled } from 'storybook/theming';
@@ -16,25 +14,6 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   disabled?: boolean;
   active?: boolean;
   animation?: 'none' | 'rotate360' | 'glow' | 'jiggle';
-
-  /** @deprecated Use {@link asChild} instead. This will be removed in Storybook 9.0 */
-  isLink?: boolean;
-  /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
-  primary?: boolean;
-  /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
-  secondary?: boolean;
-  /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
-  tertiary?: boolean;
-  /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
-  gray?: boolean;
-  /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
-  inForm?: boolean;
-  /** @deprecated Use {@link size} instead. This will be removed in Storybook 9.0 */
-  small?: boolean;
-  /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
-  outline?: boolean;
-  /** @deprecated Add your icon as a child directly. This will be removed in Storybook 9.0 */
-  containsIcon?: boolean;
 }
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
@@ -54,15 +33,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ) => {
     let Comp: 'button' | 'a' | typeof Slot = 'button';
 
-    if (props.isLink) {
-      Comp = 'a';
-    }
-
     if (asChild) {
       Comp = Slot;
     }
-    let localVariant = variant;
-    let localSize = size;
 
     const [isAnimating, setIsAnimating] = useState(false);
 
@@ -86,48 +59,12 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       return () => clearTimeout(timer);
     }, [isAnimating]);
 
-    // Match the old API with the new API.
-    // TODO: Remove this after 9.0.
-    if (props.primary) {
-      localVariant = 'solid';
-      localSize = 'medium';
-    }
-
-    // Match the old API with the new API.
-    // TODO: Remove this after 9.0.
-    if (props.secondary || props.tertiary || props.gray || props.outline || props.inForm) {
-      localVariant = 'outline';
-      localSize = 'medium';
-    }
-
-    if (
-      props.small ||
-      props.isLink ||
-      props.primary ||
-      props.secondary ||
-      props.tertiary ||
-      props.gray ||
-      props.outline ||
-      props.inForm ||
-      props.containsIcon
-    ) {
-      const buttonContent = React.Children.toArray(props.children).filter(
-        (e) => typeof e === 'string' && e !== ''
-      );
-
-      deprecate(
-        `Use of deprecated props in the button ${
-          buttonContent.length > 0 ? `"${buttonContent.join(' ')}"` : 'component'
-        } detected, see the migration notes at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-ui-and-props-for-button-and-iconbutton-components`
-      );
-    }
-
     return (
       <StyledButton
         as={Comp}
         ref={ref}
-        variant={localVariant}
+        variant={variant}
-        size={localSize}
+        size={size}
         padding={padding}
         disabled={disabled}
         active={active}

code/core/src/components/components/bar/button.tsx

@@ -132,23 +132,3 @@ export interface IconButtonProps {
   active?: boolean;
   disabled?: boolean;
 }
-
-const IconPlaceholder = styled.div(({ theme }) => ({
-  width: 14,
-  height: 14,
-  backgroundColor: theme.appBorderColor,
-  animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
-}));
-
-const IconButtonSkeletonWrapper = styled.div({
-  marginTop: 6,
-  padding: 7,
-  height: 28,
-});
-
-/** @deprecated This component will be removed in Storybook 9.0 */
-export const IconButtonSkeleton = () => (
-  <IconButtonSkeletonWrapper>
-    <IconPlaceholder />
-  </IconButtonSkeletonWrapper>
-);

code/core/src/components/index.ts

@@ -67,15 +67,12 @@ export { default as ListItem } from './components/tooltip/ListItem';
 // Toolbar and subcomponents
 export { Tabs, TabsState, TabBar, TabWrapper } from './components/tabs/tabs';
 export { EmptyTabContent } from './components/tabs/EmptyTabContent';
-export { IconButtonSkeleton, TabButton } from './components/bar/button';
+export { TabButton } from './components/bar/button';
 export { Separator, interleaveSeparators } from './components/bar/separator';
 export { Bar, FlexBar } from './components/bar/bar';
 export { AddonPanel } from './components/addon-panel/addon-panel';
 
 // Graphics
-export type { IconsProps } from './components/icon/icon';
-export { Icons, Symbols } from './components/icon/icon';
-export { icons } from './components/icon/icon';
 export { StorybookLogo } from './brand/StorybookLogo';
 export { StorybookIcon } from './brand/StorybookIcon';
 

code/core/src/controls/manager.tsx

@@ -9,6 +9,8 @@ import type {
 import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE } from 'storybook/internal/core-events';
 import type { Args } from 'storybook/internal/csf';
 
+import { FailedIcon, PassedIcon } from '@storybook/icons';
+
 import { dequal as deepEqual } from 'dequal';
 import {
   addons,
@@ -82,7 +84,7 @@ addons.register(ADDON_ID, (api) => {
 
       api.addNotification({
         id: 'save-story-success',
-        icon: { name: 'passed', color: color.positive },
+        icon: <PassedIcon color={color.positive} />,
         content: {
           headline: 'Story saved',
           subHeadline: (
@@ -96,7 +98,7 @@ addons.register(ADDON_ID, (api) => {
     } catch (error: any) {
       api.addNotification({
         id: 'save-story-error',
-        icon: { name: 'failed', color: color.negative },
+        icon: <FailedIcon color={color.negative} />,
         content: {
           headline: 'Failed to save story',
           subHeadline:
@@ -127,7 +129,7 @@ addons.register(ADDON_ID, (api) => {
 
     api.addNotification({
       id: 'save-story-success',
-      icon: { name: 'passed', color: color.positive },
+      icon: <PassedIcon color={color.positive} />,
       content: {
         headline: 'Story created',
         subHeadline: (

code/core/src/core-events/index.ts

@@ -89,8 +89,6 @@ enum events {
   TESTING_MODULE_CRASH_REPORT = 'testingModuleCrashReport',
   TESTING_MODULE_PROGRESS_REPORT = 'testingModuleProgressReport',
   TESTING_MODULE_RUN_REQUEST = 'testingModuleRunRequest',
-  /** @deprecated Use TESTING_MODULE_RUN_REQUEST instead */
-  TESTING_MODULE_RUN_ALL_REQUEST = 'testingModuleRunAllRequest',
   TESTING_MODULE_CANCEL_TEST_RUN_REQUEST = 'testingModuleCancelTestRunRequest',
   TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE = 'testingModuleCancelTestRunResponse',
 }
@@ -160,7 +158,6 @@ export const {
   TESTING_MODULE_CRASH_REPORT,
   TESTING_MODULE_PROGRESS_REPORT,
   TESTING_MODULE_RUN_REQUEST,
-  TESTING_MODULE_RUN_ALL_REQUEST,
   TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
   TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE,
 } = events;

code/core/src/core-server/build-index.test.ts

@@ -10,6 +10,19 @@ describe('buildIndex', () => {
     expect(index).toMatchInlineSnapshot(`
       {
         "entries": {
+          "my-component-a--docs": {
+            "id": "my-component-a--docs",
+            "importPath": "./core/src/core-server/utils/__mockdata__/docs-id-generation/A.stories.jsx",
+            "name": "Docs",
+            "storiesImports": [],
+            "tags": [
+              "dev",
+              "test",
+              "autodocs",
+            ],
+            "title": "A",
+            "type": "docs",
+          },
           "my-component-a--story-one": {
             "componentPath": undefined,
             "id": "my-component-a--story-one",

code/core/src/core-server/utils/StoryIndexGenerator.test.ts

@@ -40,7 +40,7 @@ const options: StoryIndexGeneratorOptions = {
   configDir: join(__dirname, '__mockdata__'),
   workingDir: join(__dirname, '__mockdata__'),
   indexers: [csfIndexer],
-  docs: { defaultName: 'docs', autodocs: false },
+  docs: { defaultName: 'docs' },
 };
 
 describe('StoryIndexGenerator', () => {
@@ -121,6 +121,19 @@ describe('StoryIndexGenerator', () => {
         expect(storyIndex).toMatchInlineSnapshot(`
           {
             "entries": {
+              "f--docs": {
+                "id": "f--docs",
+                "importPath": "./src/F.story.ts",
+                "name": "docs",
+                "storiesImports": [],
+                "tags": [
+                  "dev",
+                  "test",
+                  "autodocs",
+                ],
+                "title": "F",
+                "type": "docs",
+              },
               "f--story-one": {
                 "componentPath": undefined,
                 "id": "f--story-one",
@@ -154,6 +167,19 @@ describe('StoryIndexGenerator', () => {
         expect(storyIndex).toMatchInlineSnapshot(`
           {
             "entries": {
+              "stories--docs": {
+                "id": "stories--docs",
+                "importPath": "./src/stories.ts",
+                "name": "docs",
+                "storiesImports": [],
+                "tags": [
+                  "dev",
+                  "test",
+                  "autodocs",
+                ],
+                "title": "stories",
+                "type": "docs",
+              },
               "stories--story-one": {
                 "componentPath": undefined,
                 "id": "stories--story-one",
@@ -282,6 +308,19 @@ describe('StoryIndexGenerator', () => {
                 "title": "A",
                 "type": "story",
               },
+              "b--docs": {
+                "id": "b--docs",
+                "importPath": "./src/B.stories.ts",
+                "name": "docs",
+                "storiesImports": [],
+                "tags": [
+                  "dev",
+                  "test",
+                  "autodocs",
+                ],
+                "title": "B",
+                "type": "docs",
+              },
               "b--story-one": {
                 "componentPath": undefined,
                 "id": "b--story-one",
@@ -331,6 +370,19 @@ describe('StoryIndexGenerator', () => {
                 "title": "componentPath/package",
                 "type": "story",
               },
+              "d--docs": {
+                "id": "d--docs",
+                "importPath": "./src/D.stories.jsx",
+                "name": "docs",
+                "storiesImports": [],
+                "tags": [
+                  "dev",
+                  "test",
+                  "autodocs",
+                ],
+                "title": "D",
+                "type": "docs",
+              },
               "d--story-one": {
                 "componentPath": undefined,
                 "id": "d--story-one",
@@ -431,6 +483,19 @@ describe('StoryIndexGenerator', () => {
                 "title": "first-nested/deeply/Features",
                 "type": "story",
               },
+              "h--docs": {
+                "id": "h--docs",
+                "importPath": "./src/H.stories.mjs",
+                "name": "docs",
+                "storiesImports": [],
+                "tags": [
+                  "dev",
+                  "test",
+                  "autodocs",
+                ],
+                "title": "H",
+                "type": "docs",
+              },
               "h--story-one": {
                 "componentPath": undefined,
                 "id": "h--story-one",
@@ -787,37 +852,28 @@ describe('StoryIndexGenerator', () => {
         await generator.initialize();
 
         expect(Object.keys((await generator.getIndex()).entries)).toMatchInlineSnapshot(`
-          [
+  [
-            "a--docs",
+    "a--story-one",
-            "a--story-one",
+    "b--docs",
-            "b--docs",
+    "b--story-one",
-            "b--story-one",
+    "example-button--story-one",
-            "example-button--docs",
+    "d--docs",
-            "example-button--story-one",
+    "d--story-one",
-            "d--docs",
+    "h--docs",
-            "d--story-one",
+    "h--story-one",
-            "h--docs",
+    "componentpath-extension--story-one",
-            "h--story-one",
+    "componentpath-noextension--story-one",
-            "componentpath-extension--docs",
+    "componentpath-package--story-one",
-            "componentpath-extension--story-one",
+    "first-nested-deeply-f--story-one",
-            "componentpath-noextension--docs",
+    "first-nested-deeply-features--with-play",
-            "componentpath-noextension--story-one",
+    "first-nested-deeply-features--with-story-fn",
-            "componentpath-package--docs",
+    "first-nested-deeply-features--with-render",
-            "componentpath-package--story-one",
+    "first-nested-deeply-features--with-test",
-            "first-nested-deeply-f--docs",
+    "first-nested-deeply-features--with-csf-1",
-            "first-nested-deeply-f--story-one",
+    "nested-button--story-one",
-            "first-nested-deeply-features--docs",
+    "second-nested-g--story-one",
-            "first-nested-deeply-features--with-play",
+  ]
-            "first-nested-deeply-features--with-story-fn",
+`);
-            "first-nested-deeply-features--with-render",
-            "first-nested-deeply-features--with-test",
-            "first-nested-deeply-features--with-csf-1",
-            "nested-button--docs",
-            "nested-button--story-one",
-            "second-nested-g--docs",
-            "second-nested-g--story-one",
-          ]
-        `);
       });
 
       it('generates an entry for every CSF file when projectTags contains autodocs', async () => {
@@ -864,21 +920,6 @@ describe('StoryIndexGenerator', () => {
         `);
       });
 
-      it('adds the autodocs tag to the autogenerated docs entries when docsOptions.autodocs = true', async () => {
-        const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './src/**/*.stories.(ts|js|mjs|jsx)',
-          options
-        );
-
-        const generator = new StoryIndexGenerator([specifier], autodocsTrueOptions);
-        await generator.initialize();
-
-        const index = await generator.getIndex();
-        expect(index.entries['first-nested-deeply-f--docs'].tags).toEqual(
-          expect.arrayContaining(['autodocs'])
-        );
-      });
-
       it('adds the autodocs tag to the autogenerated docs entries when projectTags contains autodocs', async () => {
         const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
           './src/**/*.stories.(ts|js|mjs|jsx)',
@@ -1095,7 +1136,6 @@ describe('StoryIndexGenerator', () => {
                 "tags": [
                   "dev",
                   "test",
-                  "autodocs",
                   "component-tag",
                   "story-tag",
                   "attached-mdx",
@@ -1111,7 +1151,6 @@ describe('StoryIndexGenerator', () => {
                 "tags": [
                   "dev",
                   "test",
-                  "autodocs",
                   "component-tag",
                   "story-tag",
                 ],
@@ -1572,6 +1611,19 @@ describe('StoryIndexGenerator', () => {
                 "title": "A",
                 "type": "story",
               },
+              "b--docs": {
+                "id": "b--docs",
+                "importPath": "./src/B.stories.ts",
+                "name": "docs",
+                "storiesImports": [],
+                "tags": [
+                  "dev",
+                  "test",
+                  "autodocs",
+                ],
+                "title": "B",
+                "type": "docs",
+              },
               "b--story-one": {
                 "componentPath": undefined,
                 "id": "b--story-one",
@@ -1815,30 +1867,33 @@ describe('StoryIndexGenerator', () => {
       });
 
       expect(Object.keys((await generator.getIndex()).entries)).toMatchInlineSnapshot(`
-        [
+  [
-          "docs2-yabbadabbadooo--docs",
+    "docs2-yabbadabbadooo--docs",
-          "d--story-one",
+    "d--docs",
-          "b--story-one",
+    "d--story-one",
-          "nested-button--story-one",
+    "b--docs",
-          "a--metaof",
+    "b--story-one",
-          "a--second-docs",
+    "nested-button--story-one",
-          "a--story-one",
+    "a--metaof",
-          "second-nested-g--story-one",
+    "a--second-docs",
-          "componentreference--docs",
+    "a--story-one",
-          "notitle--docs",
+    "second-nested-g--story-one",
-          "example-button--story-one",
+    "componentreference--docs",
-          "h--story-one",
+    "notitle--docs",
-          "componentpath-extension--story-one",
+    "example-button--story-one",
-          "componentpath-noextension--story-one",
+    "h--docs",
-          "componentpath-package--story-one",
+    "h--story-one",
-          "first-nested-deeply-f--story-one",
+    "componentpath-extension--story-one",
-          "first-nested-deeply-features--with-play",
+    "componentpath-noextension--story-one",
-          "first-nested-deeply-features--with-story-fn",
+    "componentpath-package--story-one",
-          "first-nested-deeply-features--with-render",
+    "first-nested-deeply-f--story-one",
-          "first-nested-deeply-features--with-test",
+    "first-nested-deeply-features--with-play",
-          "first-nested-deeply-features--with-csf-1",
+    "first-nested-deeply-features--with-story-fn",
-        ]
+    "first-nested-deeply-features--with-render",
-      `);
+    "first-nested-deeply-features--with-test",
+    "first-nested-deeply-features--with-csf-1",
+  ]
+`);
     });
   });
 

code/core/src/core-server/utils/StoryIndexGenerator.ts

@@ -400,7 +400,7 @@ export class StoryIndexGenerator {
     //  a) autodocs is globally enabled
     //  b) we have autodocs enabled for this file
     const hasAutodocsTag = entries.some((entry) => entry.tags.includes(AUTODOCS_TAG));
-    const createDocEntry = hasAutodocsTag && !!this.options.docs.autodocs;
+    const createDocEntry = hasAutodocsTag;
 
     if (createDocEntry && this.options.build?.test?.disableAutoDocs !== true) {
       const name = this.options.docs.defaultName ?? 'Docs';
@@ -592,10 +592,7 @@ export class StoryIndexGenerator {
       }
 
       // If you link a file to a tagged CSF file, you have probably made a mistake
-      if (
+      if (worseEntry.tags?.includes(AUTODOCS_TAG) && !projectTags?.includes(AUTODOCS_TAG)) {
-        worseEntry.tags?.includes(AUTODOCS_TAG) &&
-        !(this.options.docs.autodocs === true || projectTags?.includes(AUTODOCS_TAG))
-      ) {
         throw new IndexingError(
           `You created a component docs page for '${worseEntry.title}', but also tagged the CSF file with '${AUTODOCS_TAG}'. This is probably a mistake.`,
           [betterEntry.importPath, worseEntry.importPath]
@@ -768,7 +765,6 @@ export class StoryIndexGenerator {
   getProjectTags(previewCode?: string) {
     let projectTags = [] as Tag[];
     const defaultTags = ['dev', 'test'];
-    const extraTags = this.options.docs.autodocs === true ? [AUTODOCS_TAG] : [];
     if (previewCode) {
       try {
         const projectAnnotations = loadConfig(previewCode).parse();
@@ -789,7 +785,7 @@ export class StoryIndexGenerator {
         `);
       }
     }
-    return [...defaultTags, ...projectTags, ...extraTags];
+    return [...defaultTags, ...projectTags];
   }
 
   // Get the story file names in "imported order"

code/core/src/core-server/utils/__tests__/index-extraction.test.ts

@@ -14,7 +14,7 @@ const options: StoryIndexGeneratorOptions = {
   configDir: join(__dirname, '..', '__mockdata__'),
   workingDir: join(__dirname, '..', '__mockdata__'),
   indexers: [],
-  docs: { defaultName: 'docs', autodocs: false },
+  docs: { defaultName: 'docs' },
 };
 
 describe('story extraction', () => {
@@ -392,57 +392,6 @@ describe('story extraction', () => {
   });
 });
 describe('docs entries from story extraction', () => {
-  it('adds docs entry when autodocs is globally enabled', async () => {
-    const relativePath = './src/A.stories.js';
-    const absolutePath = join(options.workingDir, relativePath);
-    const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(relativePath, options);
-
-    const generator = new StoryIndexGenerator([specifier], {
-      ...options,
-      docs: { defaultName: 'docs', autodocs: true },
-      indexers: [
-        {
-          test: /\.stories\.(m?js|ts)x?$/,
-          createIndex: async (fileName) => [
-            {
-              exportName: 'StoryOne',
-              __id: 'a--story-one',
-              name: 'Story One',
-              title: 'A',
-              tags: ['story-tag-from-indexer'],
-              importPath: fileName,
-              type: 'story',
-            },
-          ],
-        },
-      ],
-    });
-    const result = await generator.extractStories(specifier, absolutePath);
-
-    expect(result).toMatchInlineSnapshot(`
-      {
-        "dependents": [],
-        "entries": [
-          {
-            "componentPath": undefined,
-            "extra": {
-              "metaId": undefined,
-              "stats": {},
-            },
-            "id": "a--story-one",
-            "importPath": "./src/A.stories.js",
-            "name": "Story One",
-            "tags": [
-              "story-tag-from-indexer",
-            ],
-            "title": "A",
-            "type": "story",
-          },
-        ],
-        "type": "stories",
-      }
-    `);
-  });
   it(`adds docs entry when autodocs is "tag" and an entry has the "${AUTODOCS_TAG}" tag`, async () => {
     const relativePath = './src/A.stories.js';
     const absolutePath = join(options.workingDir, relativePath);
@@ -450,7 +399,7 @@ describe('docs entries from story extraction', () => {
 
     const generator = new StoryIndexGenerator([specifier], {
       ...options,
-      docs: { defaultName: 'docs', autodocs: 'tag' },
+      docs: { defaultName: 'docs' },
       indexers: [
         {
           test: /\.stories\.(m?js|ts)x?$/,
@@ -507,56 +456,4 @@ describe('docs entries from story extraction', () => {
       }
     `);
   });
-  it(`DOES NOT adds docs entry when autodocs is false and an entry has the "${AUTODOCS_TAG}" tag`, async () => {
-    const relativePath = './src/A.stories.js';
-    const absolutePath = join(options.workingDir, relativePath);
-    const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(relativePath, options);
-
-    const generator = new StoryIndexGenerator([specifier], {
-      ...options,
-      docs: { defaultName: 'docs', autodocs: false },
-      indexers: [
-        {
-          test: /\.stories\.(m?js|ts)x?$/,
-          createIndex: async (fileName) => [
-            {
-              exportName: 'StoryOne',
-              __id: 'a--story-one',
-              name: 'Story One',
-              title: 'A',
-              tags: [AUTODOCS_TAG, 'story-tag-from-indexer'],
-              importPath: fileName,
-              type: 'story',
-            },
-          ],
-        },
-      ],
-    });
-    const result = await generator.extractStories(specifier, absolutePath);
-
-    expect(result).toMatchInlineSnapshot(`
-      {
-        "dependents": [],
-        "entries": [
-          {
-            "componentPath": undefined,
-            "extra": {
-              "metaId": undefined,
-              "stats": {},
-            },
-            "id": "a--story-one",
-            "importPath": "./src/A.stories.js",
-            "name": "Story One",
-            "tags": [
-              "autodocs",
-              "story-tag-from-indexer",
-            ],
-            "title": "A",
-            "type": "story",
-          },
-        ],
-        "type": "stories",
-      }
-    `);
-  });
 });

code/core/src/core-server/utils/stories-json.test.ts

@@ -47,7 +47,7 @@ const getInitializedStoryIndexGenerator = async (
     indexers: [csfIndexer],
     configDir: workingDir,
     workingDir,
-    docs: { defaultName: 'docs', autodocs: false },
+    docs: { defaultName: 'docs' },
     ...overrides,
   };
   const generator = new StoryIndexGenerator(inputNormalizedStories, options);
@@ -155,6 +155,19 @@ describe('useStoriesJson', () => {
               "title": "A",
               "type": "story",
             },
+            "b--docs": {
+              "id": "b--docs",
+              "importPath": "./src/B.stories.ts",
+              "name": "docs",
+              "storiesImports": [],
+              "tags": [
+                "dev",
+                "test",
+                "autodocs",
+              ],
+              "title": "B",
+              "type": "docs",
+            },
             "b--story-one": {
               "id": "b--story-one",
               "importPath": "./src/B.stories.ts",
@@ -203,6 +216,19 @@ describe('useStoriesJson', () => {
               "title": "componentPath/package",
               "type": "story",
             },
+            "d--docs": {
+              "id": "d--docs",
+              "importPath": "./src/D.stories.jsx",
+              "name": "docs",
+              "storiesImports": [],
+              "tags": [
+                "dev",
+                "test",
+                "autodocs",
+              ],
+              "title": "D",
+              "type": "docs",
+            },
             "d--story-one": {
               "id": "d--story-one",
               "importPath": "./src/D.stories.jsx",
@@ -334,6 +360,19 @@ describe('useStoriesJson', () => {
               "title": "first-nested/deeply/Features",
               "type": "story",
             },
+            "h--docs": {
+              "id": "h--docs",
+              "importPath": "./src/H.stories.mjs",
+              "name": "docs",
+              "storiesImports": [],
+              "tags": [
+                "dev",
+                "test",
+                "autodocs",
+              ],
+              "title": "H",
+              "type": "docs",
+            },
             "h--story-one": {
               "id": "h--story-one",
               "importPath": "./src/H.stories.mjs",

code/core/src/csf-tools/CsfFile.ts

@@ -278,16 +278,6 @@ export class CsfFile {
 
   imports: string[];
 
-  /** @deprecated Use `_options.fileName` instead */
-  get _fileName() {
-    return this._options.fileName;
-  }
-
-  /** @deprecated Use `_options.makeTitle` instead */
-  get _makeTitle() {
-    return this._options.makeTitle;
-  }
-
   constructor(ast: t.File, options: CsfOptions, file: BabelFile) {
     this._ast = ast;
     this._file = file;

code/core/src/csf/story.ts

@@ -405,8 +405,6 @@ export interface ProjectAnnotations<TRenderer extends Renderer = Renderer, TArgs
    */
   beforeAll?: BeforeAll;
 
-  /** @deprecated Project `globals` renamed to `initiaGlobals` */
-  globals?: Globals;
   initialGlobals?: Globals;
   globalTypes?: GlobalTypes;
   applyDecorators?: DecoratorApplicator<TRenderer, Args>;

code/core/src/manager-api/lib/addons.ts

@@ -8,8 +8,6 @@ import type {
   Addon_Elements,
   Addon_Loaders,
   Addon_PageType,
-  Addon_SidebarBottomType,
-  Addon_SidebarTopType,
   Addon_TestProviderType,
   Addon_Type,
   Addon_Types,
@@ -70,8 +68,6 @@ export class AddonStore {
     T extends
       | Addon_Types
       | Addon_TypesEnum.experimental_PAGE
-      | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
-      | Addon_TypesEnum.experimental_SIDEBAR_TOP
       | Addon_TypesEnum.experimental_TEST_PROVIDER,
   >(type: T): Addon_Collection<Addon_TypesMapping[T]> | any {
     if (!this.elements[type]) {
@@ -91,8 +87,6 @@ export class AddonStore {
     id: string,
     addon:
       | Addon_BaseType
-      | Omit<Addon_SidebarTopType, 'id'>
-      | Omit<Addon_SidebarBottomType, 'id'>
       | Omit<Addon_TestProviderType, 'id'>
       | Omit<Addon_PageType, 'id'>
       | Omit<Addon_WrapperType, 'id'>

code/core/src/manager-api/modules/addons.ts

@@ -29,9 +29,7 @@ export interface SubAPI {
     T extends
       | Addon_Types
       | Addon_TypesEnum.experimental_PAGE
-      | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
+      | Addon_TypesEnum.experimental_TEST_PROVIDER,
-      | Addon_TypesEnum.experimental_TEST_PROVIDER
-      | Addon_TypesEnum.experimental_SIDEBAR_TOP = Addon_Types,
   >(
     type: T
   ) => Addon_Collection<Addon_TypesMapping[T]>;

code/core/src/manager-api/modules/experimental_testmodule.ts

@@ -1,6 +1,5 @@
 import {
   TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
-  TESTING_MODULE_RUN_ALL_REQUEST,
   TESTING_MODULE_RUN_REQUEST,
   type TestProviderId,
   type TestProviderState,
@@ -98,9 +97,6 @@ export const init: ModuleFn<SubAPI, SubState> = ({ store, fullAPI }) => {
 
         fullAPI.emit(TESTING_MODULE_RUN_REQUEST, payload);
 
-        // For backwards compatibility:
-        fullAPI.emit(TESTING_MODULE_RUN_ALL_REQUEST, { providerId: id });
-
         return () => api.cancelTestProvider(id);
       }
 

code/core/src/manager-api/root.tsx

@@ -88,7 +88,6 @@ export type State = layout.SubState &
   whatsnew.SubState &
   RouterData &
   API_OptionsData &
-  DeprecatedState &
   Other;
 
 export type API = addons.SubAPI &
@@ -107,15 +106,6 @@ export type API = addons.SubAPI &
   whatsnew.SubAPI &
   Other;
 
-interface DeprecatedState {
-  /** @deprecated Use index */
-  storiesHash: API_IndexHash;
-  /** @deprecated Use previewInitialized */
-  storiesConfigured: boolean;
-  /** @deprecated Use indexError */
-  storiesFailed?: Error;
-}
-
 interface Other {
   [key: string]: any;
 }
@@ -299,23 +289,7 @@ function ManagerConsumer<P = Combo>({
 
 export function useStorybookState(): State {
   const { state } = useContext(ManagerContext);
-  return {
+  return state;
-    ...state,
-
-    // deprecated fields for back-compat
-    get storiesHash() {
-      deprecate('state.storiesHash is deprecated, please use state.index');
-      return this.index || {};
-    },
-    get storiesConfigured() {
-      deprecate('state.storiesConfigured is deprecated, please use state.previewInitialized');
-      return this.previewInitialized;
-    },
-    get storiesFailed() {
-      deprecate('state.storiesFailed is deprecated, please use state.indexError');
-      return this.indexError;
-    },
-  };
 }
 export function useStorybookApi(): API {
   const { api } = useContext(ManagerContext);

code/core/src/manager/components/notifications/NotificationItem.stories.tsx

@@ -274,20 +274,3 @@ export const AccessibilityGoldIconLongHeadLineNoSubHeadline: Story = {
     },
   },
 };
-
-export const WithOldIconFormat: Story = {
-  args: {
-    notification: {
-      id: '13',
-      onClear,
-      content: {
-        headline: 'Storybook notifications has a accessibility icon it can be any color!',
-      },
-      icon: {
-        name: 'accessibility',
-        color: 'gold',
-      },
-      link: undefined,
-    },
-  },
-};

code/core/src/manager/components/notifications/NotificationItem.tsx

@@ -1,15 +1,14 @@
 import type { FC, SyntheticEvent } from 'react';
 import React, { useCallback, useEffect, useRef } from 'react';
 
-import type { IconsProps } from 'storybook/internal/components';
+import { IconButton } from 'storybook/internal/components';
-import { IconButton, Icons } from 'storybook/internal/components';
 import { Link } from 'storybook/internal/router';
 
 import { CloseAltIcon } from '@storybook/icons';
 
 import { transparentize } from 'polished';
 import { type State } from 'storybook/manager-api';
-import { keyframes, styled, useTheme } from 'storybook/theming';
+import { keyframes, styled } from 'storybook/theming';
 
 import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants';
 
@@ -133,31 +132,17 @@ const SubHeadline = styled.div(({ theme }) => ({
 const ItemContent: FC<Pick<State['notifications'][0], 'icon' | 'content'>> = ({
   icon,
   content: { headline, subHeadline },
-}) => {
+}) => (
-  const theme = useTheme();
+  <>
-  const defaultColor = theme.base === 'dark' ? theme.color.mediumdark : theme.color.mediumlight;
+    {!icon || <NotificationIconWrapper>{icon}</NotificationIconWrapper>}
-
+    <NotificationTextWrapper>
-  return (
+      <Headline title={headline} hasIcon={!!icon}>
-    <>
+        {headline}
-      {!icon || (
+      </Headline>
-        <NotificationIconWrapper>
+      {subHeadline && <SubHeadline>{subHeadline}</SubHeadline>}
-          {React.isValidElement(icon)
+    </NotificationTextWrapper>
-            ? icon
+  </>
-            : typeof icon === 'object' &&
+);
-              'name' in icon && (
-                <Icons icon={icon.name as IconsProps['icon']} color={icon.color || defaultColor} />
-              )}
-        </NotificationIconWrapper>
-      )}
-      <NotificationTextWrapper>
-        <Headline title={headline} hasIcon={!!icon}>
-          {headline}
-        </Headline>
-        {subHeadline && <SubHeadline>{subHeadline}</SubHeadline>}
-      </NotificationTextWrapper>
-    </>
-  );
-};
 
 const DismissButtonWrapper = styled(IconButton)(({ theme }) => ({
   width: 28,

code/core/src/manager/components/sidebar/Heading.stories.tsx

@@ -31,7 +31,7 @@ const menuItems = [
 ];
 
 export const MenuHighlighted: Story = () => (
-  <Heading menuHighlighted menu={menuItems} isLoading={false} extra={[]} />
+  <Heading menuHighlighted menu={menuItems} isLoading={false} />
 );
 
 export const standardData = { menu: menuItems };
@@ -50,7 +50,7 @@ export const Standard: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} isLoading={false} extra={[]} />
+      <Heading menu={menuItems} isLoading={false} />
     </ThemeProvider>
   );
 };
@@ -69,7 +69,7 @@ export const StandardNoLink: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} isLoading={false} extra={[]} />
+      <Heading menu={menuItems} isLoading={false} />
     </ThemeProvider>
   );
 };
@@ -88,7 +88,7 @@ export const LinkAndText: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} isLoading={false} extra={[]} />
+      <Heading menu={menuItems} isLoading={false} />
     </ThemeProvider>
   );
 };
@@ -107,7 +107,7 @@ export const OnlyText: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} isLoading={false} extra={[]} />
+      <Heading menu={menuItems} isLoading={false} />
     </ThemeProvider>
   );
 };
@@ -126,7 +126,7 @@ export const LongText: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} isLoading={false} extra={[]} />
+      <Heading menu={menuItems} isLoading={false} />
     </ThemeProvider>
   );
 };
@@ -145,7 +145,7 @@ export const CustomTitle: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} isLoading={false} extra={[]} />
+      <Heading menu={menuItems} isLoading={false} />
     </ThemeProvider>
   );
 };
@@ -164,7 +164,7 @@ export const CustomBrandImage: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} isLoading={false} extra={[]} />
+      <Heading menu={menuItems} isLoading={false} />
     </ThemeProvider>
   );
 };
@@ -183,7 +183,7 @@ export const CustomBrandImageTall: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} isLoading={false} extra={[]} />
+      <Heading menu={menuItems} isLoading={false} />
     </ThemeProvider>
   );
 };
@@ -202,7 +202,7 @@ export const CustomBrandImageUnsizedSVG: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} isLoading={false} extra={[]} />
+      <Heading menu={menuItems} isLoading={false} />
     </ThemeProvider>
   );
 };
@@ -221,7 +221,7 @@ export const NoBrand: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} isLoading={false} extra={[]} />
+      <Heading menu={menuItems} isLoading={false} />
     </ThemeProvider>
   );
 };
@@ -230,7 +230,6 @@ export const SkipToCanvasLinkFocused: StoryObj<typeof Heading> = {
   args: {
     menu: menuItems,
     skipLinkHref: '#storybook-preview-wrapper',
-    extra: [],
     isLoading: false,
   },
   globals: { sb_theme: 'light' },

code/core/src/manager/components/sidebar/Heading.tsx

@@ -2,7 +2,6 @@ import type { ComponentProps, FC } from 'react';
 import React from 'react';
 
 import { Button } from 'storybook/internal/components';
-import type { Addon_SidebarTopType } from 'storybook/internal/types';
 
 import { styled } from 'storybook/theming';
 
@@ -13,7 +12,6 @@ import { SidebarMenu } from './Menu';
 export interface HeadingProps {
   menuHighlighted?: boolean;
   menu: MenuList;
-  extra: Addon_SidebarTopType[];
   skipLinkHref?: string;
   isLoading: boolean;
   onMenuClick?: SidebarMenuProps['onClick'];
@@ -83,7 +81,6 @@ export const Heading: FC<HeadingProps & ComponentProps<typeof HeadingWrapper>> =
   menuHighlighted = false,
   menu,
   skipLinkHref,
-  extra,
   isLoading,
   onMenuClick,
   ...props
@@ -102,7 +99,6 @@ export const Heading: FC<HeadingProps & ComponentProps<typeof HeadingWrapper>> =
         <Brand />
       </BrandArea>
 
-      {isLoading ? null : extra.map(({ id, render: Render }) => <Render key={id} />)}
       <SidebarMenu menu={menu} isHighlighted={menuHighlighted} onClick={onMenuClick} />
     </HeadingWrapper>
   );

code/core/src/manager/components/sidebar/RefBlocks.tsx

@@ -80,8 +80,7 @@ export const AuthBlock: FC<{ loginUrl: string; id: string }> = ({ loginUrl, id }
               this Storybook.
             </Text>
             <div>
-              {/* TODO: Make sure this button is working without the deprecated props */}
+              <Button size="small" variant="outline" onClick={refresh}>
-              <Button small gray onClick={refresh}>
                 <SyncIcon />
                 Refresh now
               </Button>
@@ -92,7 +91,7 @@ export const AuthBlock: FC<{ loginUrl: string; id: string }> = ({ loginUrl, id }
             <Text>Sign in to browse this Storybook.</Text>
             <div>
               {/* @ts-expect-error (non strict) */}
-              <Button small gray onClick={open}>
+              <Button size="small" variant="outline" onClick={open}>
                 <LockIcon />
                 Sign in
               </Button>

code/core/src/manager/components/sidebar/Sidebar.stories.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { type Addon_SidebarTopType } from 'storybook/internal/types';
 import type { StatusesByStoryIdAndTypeId } from 'storybook/internal/types';
 
 import type { Meta, StoryObj } from '@storybook/react-vite';
@@ -68,7 +67,6 @@ const meta = {
   args: {
     previewInitialized: true,
     menu,
-    extra: [] as Addon_SidebarTopType[],
     index: index,
     indexJson: {
       entries: {

code/core/src/manager/components/sidebar/Sidebar.tsx

@@ -7,7 +7,7 @@ import {
   TooltipNote,
   WithTooltip,
 } from 'storybook/internal/components';
-import type { API_LoadedRefData, Addon_SidebarTopType, StoryIndex } from 'storybook/internal/types';
+import type { API_LoadedRefData, StoryIndex } from 'storybook/internal/types';
 import type { StatusesByStoryIdAndTypeId } from 'storybook/internal/types';
 
 import { global } from '@storybook/global';
@@ -117,7 +117,6 @@ export interface SidebarProps extends API_LoadedRefData {
   refs: State['refs'];
   allStatuses: StatusesByStoryIdAndTypeId;
   menu: any[];
-  extra: Addon_SidebarTopType[];
   storyId?: string;
   refId?: string;
   menuHighlighted?: boolean;
@@ -137,7 +136,6 @@ export const Sidebar = React.memo(function Sidebar({
   allStatuses,
   previewInitialized,
   menu,
-  extra,
   menuHighlighted = false,
   enableShortcuts = true,
   isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT',
@@ -162,7 +160,6 @@ export const Sidebar = React.memo(function Sidebar({
             className="sidebar-header"
             menuHighlighted={menuHighlighted}
             menu={menu}
-            extra={extra}
             skipLinkHref="#storybook-preview-wrapper"
             isLoading={isLoading}
             onMenuClick={onMenuClick}

code/core/src/manager/components/sidebar/__tests__/Sidebar.test.tsx

@@ -21,15 +21,7 @@ const factory = (props: Partial<SidebarProps>): RenderResult => {
 
   return render(
     <ThemeProvider theme={theme}>
-      <Sidebar
+      <Sidebar menu={[]} index={{}} previewInitialized refs={{}} allStatuses={{}} {...props} />
-        menu={[]}
-        index={{}}
-        previewInitialized
-        refs={{}}
-        allStatuses={{}}
-        extra={[]}
-        {...props}
-      />
     </ThemeProvider>
   );
 };

code/core/src/manager/container/Sidebar.tsx

@@ -46,10 +46,6 @@ const Sidebar = React.memo(function Sideber({ onMenuClick }: SidebarProps) {
     const whatsNewNotificationsEnabled =
       state.whatsNewData?.status === 'SUCCESS' && !state.disableWhatsNewNotifications;
 
-    const topItems = api.getElements(Addon_TypesEnum.experimental_SIDEBAR_TOP);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const top = useMemo(() => Object.values(topItems), [Object.keys(topItems).join('')]);
-
     return {
       title: name,
       url,
@@ -64,7 +60,6 @@ const Sidebar = React.memo(function Sideber({ onMenuClick }: SidebarProps) {
       menu,
       menuHighlighted: whatsNewNotificationsEnabled && api.isWhatsNewUnread(),
       enableShortcuts,
-      extra: top,
     };
   };
 

code/core/src/manager/globals/exports.ts

@@ -494,8 +494,6 @@ export default {
     'H6',
     'HR',
     'IconButton',
-    'IconButtonSkeleton',
-    'Icons',
     'Img',
     'LI',
     'Link',
@@ -514,7 +512,6 @@ export default {
     'Span',
     'StorybookIcon',
     'StorybookLogo',
-    'Symbols',
     'SyntaxHighlighter',
     'TT',
     'TabBar',
@@ -534,7 +531,6 @@ export default {
     'components',
     'createCopyToClipboardFunction',
     'getStoryHref',
-    'icons',
     'interleaveSeparators',
     'nameSpaceClassNames',
     'resetComponents',
@@ -596,7 +592,6 @@ export default {
     'TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE',
     'TESTING_MODULE_CRASH_REPORT',
     'TESTING_MODULE_PROGRESS_REPORT',
-    'TESTING_MODULE_RUN_ALL_REQUEST',
     'TESTING_MODULE_RUN_REQUEST',
     'TOGGLE_WHATS_NEW_NOTIFICATIONS',
     'UNHANDLED_ERRORS_WHILE_PLAYING',
@@ -660,7 +655,6 @@ export default {
     'TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE',
     'TESTING_MODULE_CRASH_REPORT',
     'TESTING_MODULE_PROGRESS_REPORT',
-    'TESTING_MODULE_RUN_ALL_REQUEST',
     'TESTING_MODULE_RUN_REQUEST',
     'TOGGLE_WHATS_NEW_NOTIFICATIONS',
     'UNHANDLED_ERRORS_WHILE_PLAYING',

code/core/src/preview-api/README-preview-web.md

@@ -30,7 +30,7 @@ A rendering story goes through these phases:
 
 - `preparing` - (maybe async) import the story file and prepare the story function.
 - `loading` - async loaders are running
-- `rendering` - the `renderToDOM` function for the framework is running
+- `rendering` - the `renderToCanvas` function for the framework is running
 - `playing` - the `play` function is running
 - `completed` - the story is done.
 

code/core/src/preview-api/modules/preview-web/Preview.tsx

@@ -56,9 +56,6 @@ const STORY_INDEX_PATH = './index.json';
 export type MaybePromise<T> = Promise<T> | T;
 
 export class Preview<TRenderer extends Renderer> {
-  /** @deprecated Will be removed in 8.0, please use channel instead */
-  serverChannel?: Channel;
-
   protected storyStoreValue?: StoryStore<TRenderer>;
 
   renderToCanvas?: RenderToCanvas<TRenderer>;

code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts

@@ -164,7 +164,10 @@ describe('PreviewWeb', () => {
 
       const preview = await createAndRenderPreview();
 
-      expect((preview.storyStore as StoryStore<Renderer>)!.userGlobals.get()).toEqual({ a: 'c' });
+      // @ts-expect-error Ignore protected property
+      expect((preview.storyStoreValue as StoryStore<Renderer>)!.userGlobals.get()).toEqual({
+        a: 'c',
+      });
     });
 
     it('emits the SET_GLOBALS event', async () => {
@@ -208,7 +211,10 @@ describe('PreviewWeb', () => {
 
       const preview = await createAndRenderPreview();
 
-      expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
+      expect(
+        // @ts-expect-error Ignore protected property
+        (preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
+      ).toEqual({
         foo: 'url',
         one: 1,
       });
@@ -234,7 +240,10 @@ describe('PreviewWeb', () => {
       });
       await preview.ready();
 
-      expect((preview.storyStore as StoryStore<Renderer>)!.userGlobals.get()).toEqual({ a: 'b' });
+      // @ts-expect-error Ignore protected property
+      expect((preview.storyStoreValue as StoryStore<Renderer>)!.userGlobals.get()).toEqual({
+        a: 'b',
+      });
     });
   });
 
@@ -896,7 +905,10 @@ describe('PreviewWeb', () => {
 
       emitter.emit(UPDATE_GLOBALS, { globals: { foo: 'bar' } });
 
-      expect((preview.storyStore as StoryStore<Renderer>)!.userGlobals.get()).toEqual({ a: 'b' });
+      // @ts-expect-error Ignore protected property
+      expect((preview.storyStoreValue as StoryStore<Renderer>)!.userGlobals.get()).toEqual({
+        a: 'b',
+      });
     });
 
     it('passes globals in context to renderToCanvas', async () => {
@@ -973,7 +985,8 @@ describe('PreviewWeb', () => {
       });
 
       expect(
-        (preview.storyStore as StoryStore<Renderer> as StoryStore<Renderer>)?.args.get(
+        // @ts-expect-error Ignore protected property
+        (preview.storyStoreValue as StoryStore<Renderer> as StoryStore<Renderer>)?.args.get(
           'component-one--a'
         )
       ).toEqual({
@@ -1257,7 +1270,8 @@ describe('PreviewWeb', () => {
           await waitForRender();
 
           mockChannel.emit.mockClear();
-          const story = await (preview.storyStore as StoryStore<Renderer>)?.loadStory({
+          // @ts-expect-error Ignore protected property
+          const story = await (preview.storyStoreValue as StoryStore<Renderer>)?.loadStory({
             storyId: 'component-one--a',
           });
           preview.renderStoryToElement(story, 'story-element' as any, callbacks, {});
@@ -1297,7 +1311,8 @@ describe('PreviewWeb', () => {
           await waitForRender();
 
           mockChannel.emit.mockClear();
-          const story = await (preview.storyStore as StoryStore<Renderer>)?.loadStory({
+          // @ts-expect-error Ignore protected property
+          const story = await (preview.storyStoreValue as StoryStore<Renderer>)?.loadStory({
             storyId: 'component-one--a',
           });
           preview.renderStoryToElement(story, 'story-element' as any, callbacks, {
@@ -2288,7 +2303,10 @@ describe('PreviewWeb', () => {
           updatedArgs: { foo: 'updated' },
         });
         await waitForRender();
-        expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
+        expect(
+          // @ts-expect-error Ignore protected property
+          (preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
+        ).toEqual({
           foo: 'updated',
           one: 1,
         });
@@ -2300,7 +2318,10 @@ describe('PreviewWeb', () => {
         });
         await waitForSetCurrentStory();
         await waitForRender();
-        expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
+        expect(
+          // @ts-expect-error Ignore protected property
+          (preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
+        ).toEqual({
           foo: 'updated',
           one: 1,
         });
@@ -2312,7 +2333,10 @@ describe('PreviewWeb', () => {
         });
         await waitForSetCurrentStory();
         await waitForRender();
-        expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
+        expect(
+          // @ts-expect-error Ignore protected property
+          (preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
+        ).toEqual({
           foo: 'updated',
           one: 1,
         });
@@ -2885,7 +2909,10 @@ describe('PreviewWeb', () => {
         mockFetchResult = { status: 200, json: mockStoryIndex, text: () => 'error text' };
         preview.onStoryIndexChanged();
         await waitForRender();
-        expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
+        expect(
+          // @ts-expect-error Ignore protected property
+          (preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
+        ).toEqual({
           foo: 'url',
           one: 1,
         });
@@ -3334,7 +3361,10 @@ describe('PreviewWeb', () => {
         });
         await waitForSetCurrentStory();
         await waitForRender();
-        expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
+        expect(
+          // @ts-expect-error Ignore protected property
+          (preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
+        ).toEqual({
           foo: 'updated',
           one: 1,
         });
@@ -3353,7 +3383,10 @@ describe('PreviewWeb', () => {
         });
         await waitForSetCurrentStory();
         await waitForRender();
-        expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
+        expect(
+          // @ts-expect-error Ignore protected property
+          (preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
+        ).toEqual({
           foo: 'updated',
           bar: 'edited',
           one: 1,
@@ -3524,7 +3557,10 @@ describe('PreviewWeb', () => {
         preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
         await waitForRender();
 
-        expect((preview.storyStore as StoryStore<Renderer>)!.userGlobals.get()).toEqual({ a: 'c' });
+        // @ts-expect-error Ignore protected property
+        expect((preview.storyStoreValue as StoryStore<Renderer>)!.userGlobals.get()).toEqual({
+          a: 'c',
+        });
       });
     });
 
@@ -3573,7 +3609,8 @@ describe('PreviewWeb', () => {
       preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
       await waitForRender();
 
-      expect((preview.storyStore as StoryStore<Renderer>)!.userGlobals.get()).toEqual({
+      // @ts-expect-error Ignore protected property
+      expect((preview.storyStoreValue as StoryStore<Renderer>)!.userGlobals.get()).toEqual({
         a: 'edited',
       });
     });
@@ -3601,7 +3638,10 @@ describe('PreviewWeb', () => {
       preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
       await waitForRender();
 
-      expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
+      expect(
+        // @ts-expect-error Ignore protected property
+        (preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
+      ).toEqual({
         foo: 'a',
         one: 1,
         global: 'added',
@@ -3729,7 +3769,8 @@ describe('PreviewWeb', () => {
       componentOneExports.b.play.mockImplementationOnce(async () => gate);
       // @ts-expect-error (not strict)
       preview.renderStoryToElement(
-        await (preview.storyStore as StoryStore<Renderer>)?.loadStory({
+        // @ts-expect-error Ignore protected property
+        await (preview.storyStoreValue as StoryStore<Renderer>)?.loadStory({
           storyId: 'component-one--b',
         }),
         {} as any,

code/core/src/preview-api/modules/store/StoryStore.test.ts

@@ -45,7 +45,7 @@ const importFn = vi.fn(async (path) => {
 
 const projectAnnotations: ProjectAnnotations<any> = composeConfigs([
   {
-    globals: { a: 'b' },
+    initialGlobals: { a: 'b' },
     globalTypes: { a: { type: 'string' } },
     argTypes: { a: { type: 'string' } },
     render: vi.fn(),
@@ -652,398 +652,4 @@ describe('StoryStore', () => {
       ]);
     });
   });
-
-  describe('raw', () => {
-    it('produces an array of stories', async () => {
-      const store = new StoryStore(storyIndex, importFn, projectAnnotations);
-      await store.cacheAllCSFFiles();
-
-      expect(store.raw()).toMatchInlineSnapshot(`
-  [
-    {
-      "applyAfterEach": [Function],
-      "applyBeforeEach": [Function],
-      "applyLoaders": [Function],
-      "argTypes": {
-        "a": {
-          "name": "a",
-          "type": {
-            "name": "string",
-          },
-        },
-        "foo": {
-          "name": "foo",
-          "type": {
-            "name": "string",
-          },
-        },
-      },
-      "component": undefined,
-      "componentId": "component-one",
-      "id": "component-one--a",
-      "initialArgs": {
-        "foo": "a",
-      },
-      "kind": "Component One",
-      "moduleExport": {
-        "args": {
-          "foo": "a",
-        },
-      },
-      "mount": [Function],
-      "name": "A",
-      "originalStoryFn": [MockFunction spy],
-      "parameters": {
-        "__isArgsStory": false,
-        "fileName": "./src/ComponentOne.stories.js",
-        "throwPlayFunctionExceptions": false,
-      },
-      "playFunction": undefined,
-      "renderToCanvas": undefined,
-      "runStep": [Function],
-      "story": "A",
-      "storyFn": [Function],
-      "storyGlobals": {},
-      "subcomponents": undefined,
-      "tags": [
-        "dev",
-        "test",
-      ],
-      "testingLibraryRender": undefined,
-      "title": "Component One",
-      "unboundStoryFn": [Function],
-      "undecoratedStoryFn": [Function],
-      "usesMount": false,
-    },
-    {
-      "applyAfterEach": [Function],
-      "applyBeforeEach": [Function],
-      "applyLoaders": [Function],
-      "argTypes": {
-        "a": {
-          "name": "a",
-          "type": {
-            "name": "string",
-          },
-        },
-        "foo": {
-          "name": "foo",
-          "type": {
-            "name": "string",
-          },
-        },
-      },
-      "component": undefined,
-      "componentId": "component-one",
-      "id": "component-one--b",
-      "initialArgs": {
-        "foo": "b",
-      },
-      "kind": "Component One",
-      "moduleExport": {
-        "args": {
-          "foo": "b",
-        },
-      },
-      "mount": [Function],
-      "name": "B",
-      "originalStoryFn": [MockFunction spy],
-      "parameters": {
-        "__isArgsStory": false,
-        "fileName": "./src/ComponentOne.stories.js",
-        "throwPlayFunctionExceptions": false,
-      },
-      "playFunction": undefined,
-      "renderToCanvas": undefined,
-      "runStep": [Function],
-      "story": "B",
-      "storyFn": [Function],
-      "storyGlobals": {},
-      "subcomponents": undefined,
-      "tags": [
-        "dev",
-        "test",
-      ],
-      "testingLibraryRender": undefined,
-      "title": "Component One",
-      "unboundStoryFn": [Function],
-      "undecoratedStoryFn": [Function],
-      "usesMount": false,
-    },
-    {
-      "applyAfterEach": [Function],
-      "applyBeforeEach": [Function],
-      "applyLoaders": [Function],
-      "argTypes": {
-        "a": {
-          "name": "a",
-          "type": {
-            "name": "string",
-          },
-        },
-        "foo": {
-          "name": "foo",
-          "type": {
-            "name": "string",
-          },
-        },
-      },
-      "component": undefined,
-      "componentId": "component-two",
-      "id": "component-two--c",
-      "initialArgs": {
-        "foo": "c",
-      },
-      "kind": "Component Two",
-      "moduleExport": {
-        "args": {
-          "foo": "c",
-        },
-      },
-      "mount": [Function],
-      "name": "C",
-      "originalStoryFn": [MockFunction spy],
-      "parameters": {
-        "__isArgsStory": false,
-        "fileName": "./src/ComponentTwo.stories.js",
-        "throwPlayFunctionExceptions": false,
-      },
-      "playFunction": undefined,
-      "renderToCanvas": undefined,
-      "runStep": [Function],
-      "story": "C",
-      "storyFn": [Function],
-      "storyGlobals": {},
-      "subcomponents": undefined,
-      "tags": [
-        "dev",
-        "test",
-      ],
-      "testingLibraryRender": undefined,
-      "title": "Component Two",
-      "unboundStoryFn": [Function],
-      "undecoratedStoryFn": [Function],
-      "usesMount": false,
-    },
-  ]
-`);
-    });
-  });
-
-  describe('getSetStoriesPayload', () => {
-    it('maps stories list to payload correctly', async () => {
-      const store = new StoryStore(storyIndex, importFn, projectAnnotations);
-      await store.cacheAllCSFFiles();
-
-      expect(store.getSetStoriesPayload()).toMatchInlineSnapshot(`
-  {
-    "globalParameters": {},
-    "globals": {
-      "a": "b",
-    },
-    "kindParameters": {
-      "Component One": {},
-      "Component Two": {},
-    },
-    "stories": {
-      "component-one--a": {
-        "argTypes": {
-          "a": {
-            "name": "a",
-            "type": {
-              "name": "string",
-            },
-          },
-          "foo": {
-            "name": "foo",
-            "type": {
-              "name": "string",
-            },
-          },
-        },
-        "args": {
-          "foo": "a",
-        },
-        "component": undefined,
-        "componentId": "component-one",
-        "globals": {
-          "a": "b",
-        },
-        "id": "component-one--a",
-        "initialArgs": {
-          "foo": "a",
-        },
-        "kind": "Component One",
-        "name": "A",
-        "parameters": {
-          "__isArgsStory": false,
-          "fileName": "./src/ComponentOne.stories.js",
-          "throwPlayFunctionExceptions": false,
-        },
-        "playFunction": undefined,
-        "renderToCanvas": undefined,
-        "story": "A",
-        "storyGlobals": {},
-        "subcomponents": undefined,
-        "tags": [
-          "dev",
-          "test",
-        ],
-        "testingLibraryRender": undefined,
-        "title": "Component One",
-        "usesMount": false,
-      },
-      "component-one--b": {
-        "argTypes": {
-          "a": {
-            "name": "a",
-            "type": {
-              "name": "string",
-            },
-          },
-          "foo": {
-            "name": "foo",
-            "type": {
-              "name": "string",
-            },
-          },
-        },
-        "args": {
-          "foo": "b",
-        },
-        "component": undefined,
-        "componentId": "component-one",
-        "globals": {
-          "a": "b",
-        },
-        "id": "component-one--b",
-        "initialArgs": {
-          "foo": "b",
-        },
-        "kind": "Component One",
-        "name": "B",
-        "parameters": {
-          "__isArgsStory": false,
-          "fileName": "./src/ComponentOne.stories.js",
-          "throwPlayFunctionExceptions": false,
-        },
-        "playFunction": undefined,
-        "renderToCanvas": undefined,
-        "story": "B",
-        "storyGlobals": {},
-        "subcomponents": undefined,
-        "tags": [
-          "dev",
-          "test",
-        ],
-        "testingLibraryRender": undefined,
-        "title": "Component One",
-        "usesMount": false,
-      },
-      "component-two--c": {
-        "argTypes": {
-          "a": {
-            "name": "a",
-            "type": {
-              "name": "string",
-            },
-          },
-          "foo": {
-            "name": "foo",
-            "type": {
-              "name": "string",
-            },
-          },
-        },
-        "args": {
-          "foo": "c",
-        },
-        "component": undefined,
-        "componentId": "component-two",
-        "globals": {
-          "a": "b",
-        },
-        "id": "component-two--c",
-        "initialArgs": {
-          "foo": "c",
-        },
-        "kind": "Component Two",
-        "name": "C",
-        "parameters": {
-          "__isArgsStory": false,
-          "fileName": "./src/ComponentTwo.stories.js",
-          "throwPlayFunctionExceptions": false,
-        },
-        "playFunction": undefined,
-        "renderToCanvas": undefined,
-        "story": "C",
-        "storyGlobals": {},
-        "subcomponents": undefined,
-        "tags": [
-          "dev",
-          "test",
-        ],
-        "testingLibraryRender": undefined,
-        "title": "Component Two",
-        "usesMount": false,
-      },
-    },
-    "v": 2,
-  }
-`);
-    });
-  });
-
-  describe('getStoriesJsonData', () => {
-    describe('in back-compat mode', () => {
-      it('maps stories list to payload correctly', async () => {
-        const store = new StoryStore(storyIndex, importFn, projectAnnotations);
-        await store.cacheAllCSFFiles();
-
-        expect(store.getStoriesJsonData()).toMatchInlineSnapshot(`
-          {
-            "stories": {
-              "component-one--a": {
-                "id": "component-one--a",
-                "importPath": "./src/ComponentOne.stories.js",
-                "kind": "Component One",
-                "name": "A",
-                "parameters": {
-                  "__isArgsStory": false,
-                  "fileName": "./src/ComponentOne.stories.js",
-                },
-                "story": "A",
-                "title": "Component One",
-              },
-              "component-one--b": {
-                "id": "component-one--b",
-                "importPath": "./src/ComponentOne.stories.js",
-                "kind": "Component One",
-                "name": "B",
-                "parameters": {
-                  "__isArgsStory": false,
-                  "fileName": "./src/ComponentOne.stories.js",
-                },
-                "story": "B",
-                "title": "Component One",
-              },
-              "component-two--c": {
-                "id": "component-two--c",
-                "importPath": "./src/ComponentTwo.stories.js",
-                "kind": "Component Two",
-                "name": "C",
-                "parameters": {
-                  "__isArgsStory": false,
-                  "fileName": "./src/ComponentTwo.stories.js",
-                },
-                "story": "C",
-                "title": "Component Two",
-              },
-            },
-            "v": 3,
-          }
-        `);
-      });
-    });
-  });
 });

code/core/src/preview-api/modules/store/StoryStore.ts

@@ -1,11 +1,9 @@
-import { deprecate } from 'storybook/internal/client-logger';
+import type { CleanupCallback } from 'storybook/internal/csf';
-import type { Canvas, CleanupCallback } from 'storybook/internal/csf';
 import {
   CalledExtractOnStoreError,
   MissingStoryFromCsfFileError,
 } from 'storybook/internal/preview-errors';
 import type {
-  BoundStory,
   CSFFile,
   ComponentTitle,
   IndexEntry,
@@ -18,7 +16,6 @@ import type {
   PreparedStory,
   ProjectAnnotations,
   Renderer,
-  StoryContext,
   StoryContextForEnhancers,
   StoryId,
   StoryIndex,
@@ -28,7 +25,6 @@ import type {
 
 import { mapValues, omitBy, pick } from 'es-toolkit';
 import memoize from 'memoizerific';
-import type { UserEventObject } from 'storybook/test';
 
 import { HooksContext } from '../addons';
 import { ArgsStore } from './ArgsStore';
@@ -334,107 +330,4 @@ export class StoryStore<TRenderer extends Renderer> {
       {} as Record<string, any>
     );
   }
-
-  // TODO: Remove in 9.0
-  getSetStoriesPayload() {
-    const stories = this.extract({ includeDocsOnly: true });
-
-    const kindParameters: Parameters = Object.values(stories).reduce(
-      (acc: Parameters, { title }: { title: ComponentTitle }) => {
-        acc[title] = {};
-        return acc;
-      },
-      {} as Parameters
-    );
-
-    return {
-      v: 2,
-      globals: this.userGlobals.get(),
-      globalParameters: {},
-      kindParameters,
-      stories,
-    };
-  }
-
-  // TODO: Remove in 9.0
-  // NOTE: this is legacy `stories.json` data for the `extract` script.
-  // It is used to allow v7 Storybooks to be composed in v6 Storybooks, which expect a
-  // `stories.json` file with legacy fields (`kind` etc).
-  getStoriesJsonData = (): StoryIndexV3 => {
-    const value = this.getSetStoriesPayload();
-    const allowedParameters = ['fileName', 'docsOnly', 'framework', '__id', '__isArgsStory'];
-
-    const stories: Record<StoryId, V3CompatIndexEntry> = mapValues(value.stories, (story) => {
-      const { importPath } = this.storyIndex.entries[story.id];
-      return {
-        ...picky(story, ['id', 'name', 'title']),
-        importPath,
-        // These 3 fields were going to be dropped in v7, but instead we will keep them for the
-        // 7.x cycle so that v7 Storybooks can be composed successfully in v6 Storybook.
-        // In v8 we will (likely) completely drop support for `extract` and `getStoriesJsonData`
-        kind: story.title,
-        story: story.name,
-        parameters: {
-          ...picky(story.parameters, allowedParameters),
-          fileName: importPath,
-        },
-      } as V3CompatIndexEntry;
-    });
-
-    return {
-      v: 3,
-      stories,
-    };
-  };
-
-  raw(): BoundStory<TRenderer>[] {
-    deprecate(
-      'StoryStore.raw() is deprecated and will be removed in 9.0, please use extract() instead'
-    );
-    return Object.values(this.extract())
-      .map(({ id }: { id: StoryId }) => this.fromId(id))
-      .filter(Boolean) as BoundStory<TRenderer>[];
-  }
-
-  fromId(storyId: StoryId): BoundStory<TRenderer> | null {
-    deprecate(
-      'StoryStore.fromId() is deprecated and will be removed in 9.0, please use loadStory() instead'
-    );
-
-    // Deprecated so won't make a proper error for this
-
-    // Deprecated so won't make a proper error for this
-    if (!this.cachedCSFFiles) {
-      // eslint-disable-next-line local-rules/no-uncategorized-errors
-      throw new Error('Cannot call fromId/raw() unless you call cacheAllCSFFiles() first.');
-    }
-
-    let importPath;
-    try {
-      ({ importPath } = this.storyIndex.storyIdToEntry(storyId));
-    } catch (err) {
-      return null;
-    }
-    const csfFile = this.cachedCSFFiles[importPath];
-    const story = this.storyFromCSFFile({ storyId, csfFile });
-    return {
-      ...story,
-      storyFn: (update) => {
-        const context = {
-          ...this.getStoryContext(story),
-          abortSignal: new AbortController().signal,
-          canvasElement: null!,
-          loaded: {},
-          step: (label, play) => story.runStep(label, play, context),
-          context: null!,
-          mount: null!,
-          canvas: {} as Canvas,
-          userEvent: {} as UserEventObject,
-          viewMode: 'story',
-        } as StoryContext<TRenderer>;
-
-        return story.unboundStoryFn({ ...context, ...update });
-      },
-    };
-  }
 }

code/core/src/preview-api/modules/store/csf/composeConfigs.test.ts

@@ -19,7 +19,6 @@ describe('composeConfigs', () => {
       argsEnhancers: [],
       argTypes: {},
       argTypesEnhancers: [],
-      globals: {},
       initialGlobals: {},
       globalTypes: {},
       loaders: [],
@@ -48,7 +47,6 @@ describe('composeConfigs', () => {
       argsEnhancers: [],
       argTypes: {},
       argTypesEnhancers: [],
-      globals: {},
       initialGlobals: {},
       globalTypes: {},
       loaders: [],
@@ -81,7 +79,6 @@ describe('composeConfigs', () => {
       argsEnhancers: [],
       argTypes: {},
       argTypesEnhancers: [],
-      globals: {},
       initialGlobals: {},
       globalTypes: {},
       loaders: [],
@@ -100,7 +97,7 @@ describe('composeConfigs', () => {
           default: {
             args: { x: '1', y: '1', obj: { a: '1', b: '1' } },
             argTypes: { x: '1', y: '1', obj: { a: '1', b: '1' } },
-            globals: { x: '1', y: '1', obj: { a: '1', b: '1' } },
+            initialGlobals: { x: '1', y: '1', obj: { a: '1', b: '1' } },
             globalTypes: { x: '1', y: '1', obj: { a: '1', b: '1' } },
           },
         },
@@ -108,7 +105,7 @@ describe('composeConfigs', () => {
           default: {
             args: { x: '2', z: '2', obj: { a: '2', c: '2' } },
             argTypes: { x: '2', z: '2', obj: { a: '2', c: '2' } },
-            globals: { x: '2', z: '2', obj: { a: '2', c: '2' } },
+            initialGlobals: { x: '2', z: '2', obj: { a: '2', c: '2' } },
             globalTypes: { x: '2', z: '2', obj: { a: '2', c: '2' } },
           },
         },
@@ -120,8 +117,7 @@ describe('composeConfigs', () => {
       argsEnhancers: [],
       argTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
       argTypesEnhancers: [],
-      globals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
+      initialGlobals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
-      initialGlobals: {},
       globalTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
       loaders: [],
       beforeAll: expect.any(Function),
@@ -140,14 +136,14 @@ describe('composeConfigs', () => {
           default: {
             args: { x: '1', y: '1', obj: { a: '1', b: '1' } },
             argTypes: { x: '1', y: '1', obj: { a: '1', b: '1' } },
-            globals: { x: '1', y: '1', obj: { a: '1', b: '1' } },
+            initialGlobals: { x: '1', y: '1', obj: { a: '1', b: '1' } },
             globalTypes: { x: '1', y: '1', obj: { a: '1', b: '1' } },
           },
         },
         {
           args: { x: '2', z: '2', obj: { a: '2', c: '2' } },
           argTypes: { x: '2', z: '2', obj: { a: '2', c: '2' } },
-          globals: { x: '2', z: '2', obj: { a: '2', c: '2' } },
+          initialGlobals: { x: '2', z: '2', obj: { a: '2', c: '2' } },
         },
         {
           default: {
@@ -162,8 +158,7 @@ describe('composeConfigs', () => {
       argsEnhancers: [],
       argTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
       argTypesEnhancers: [],
-      globals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
+      initialGlobals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
-      initialGlobals: {},
       globalTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
       loaders: [],
       beforeAll: expect.any(Function),
@@ -195,7 +190,6 @@ describe('composeConfigs', () => {
       argsEnhancers: ['1', '2', '3', '4'],
       argTypes: {},
       argTypesEnhancers: ['1', '2', '3', '4'],
-      globals: {},
       initialGlobals: {},
       globalTypes: {},
       loaders: ['1', '2', '3', '4'],
@@ -228,7 +222,6 @@ describe('composeConfigs', () => {
       argsEnhancers: ['1', '2', '3'],
       argTypes: {},
       argTypesEnhancers: ['1', '2', '3'],
-      globals: {},
       initialGlobals: {},
       globalTypes: {},
       loaders: ['1', '2', '3'],
@@ -257,7 +250,6 @@ describe('composeConfigs', () => {
       argsEnhancers: [],
       argTypes: {},
       argTypesEnhancers: [],
-      globals: {},
       initialGlobals: {},
       globalTypes: {},
       loaders: [],
@@ -287,7 +279,6 @@ describe('composeConfigs', () => {
         { a: '2', secondPass: true },
         { a: '4', secondPass: true },
       ],
-      globals: {},
       initialGlobals: {},
       globalTypes: {},
       loaders: [],
@@ -320,7 +311,6 @@ describe('composeConfigs', () => {
       argsEnhancers: [],
       argTypes: {},
       argTypesEnhancers: [],
-      globals: {},
       initialGlobals: {},
       globalTypes: {},
       loaders: [],

code/core/src/preview-api/modules/store/csf/composeConfigs.ts

@@ -59,7 +59,6 @@ export function composeConfigs<TRenderer extends Renderer>(
       ...allArgTypeEnhancers.filter((e) => !e.secondPass),
       ...allArgTypeEnhancers.filter((e) => e.secondPass),
     ],
-    globals: getObjectField(moduleExportList, 'globals'),
     initialGlobals: getObjectField(moduleExportList, 'initialGlobals'),
     globalTypes: getObjectField(moduleExportList, 'globalTypes'),
     loaders: getArrayField(moduleExportList, 'loaders'),
@@ -68,7 +67,6 @@ export function composeConfigs<TRenderer extends Renderer>(
     experimental_afterEach: getArrayField(moduleExportList, 'experimental_afterEach'),
     render: getSingletonField(moduleExportList, 'render'),
     renderToCanvas: getSingletonField(moduleExportList, 'renderToCanvas'),
-    renderToDOM: getSingletonField(moduleExportList, 'renderToDOM'), // deprecated
     applyDecorators: getSingletonField(moduleExportList, 'applyDecorators'),
     runStep: composeStepRunners<TRenderer>(stepRunners),
     tags: getArrayField(moduleExportList, 'tags'),

code/core/src/preview-api/modules/store/csf/normalizeProjectAnnotations.test.ts

@@ -1,26 +1,8 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 import { normalizeProjectAnnotations } from './normalizeProjectAnnotations';
 
 describe('normalizeProjectAnnotations', () => {
-  describe('blah', () => {
-    beforeEach(() => {
-      const warnThatThrows = vi.mocked(console.warn).getMockImplementation();
-      vi.mocked(console.warn).mockImplementation(() => {});
-      return () => {
-        vi.mocked(console.warn).mockImplementation(warnThatThrows!);
-      };
-    });
-    it('normalizes globals to initialGlobals', () => {
-      expect(
-        normalizeProjectAnnotations({
-          globals: { a: 'b' },
-        })
-      ).toMatchObject({
-        initialGlobals: { a: 'b' },
-      });
-    });
-  });
   it('passes through initialGlobals', () => {
     expect(
       normalizeProjectAnnotations({

code/core/src/preview-api/modules/store/csf/normalizeProjectAnnotations.ts

@@ -1,4 +1,3 @@
-import { deprecate } from 'storybook/internal/client-logger';
 import type {
   ArgTypes,
   NormalizedProjectAnnotations,
@@ -6,11 +5,8 @@ import type {
   Renderer,
 } from 'storybook/internal/types';
 
-import { dedent } from 'ts-dedent';
-
 import { inferArgTypes } from '../inferArgTypes';
 import { inferControls } from '../inferControls';
-import { combineParameters } from '../parameters';
 import { normalizeArrays } from './normalizeArrays';
 import { normalizeInputTypes } from './normalizeInputTypes';
 
@@ -26,18 +22,9 @@ export function normalizeProjectAnnotations<TRenderer extends Renderer>({
   loaders,
   beforeEach,
   experimental_afterEach,
-  globals,
   initialGlobals,
   ...annotations
 }: ProjectAnnotations<TRenderer>): NormalizedProjectAnnotations<TRenderer> {
-  if (globals && Object.keys(globals).length > 0) {
-    deprecate(dedent`
-      The preview.js 'globals' field is deprecated and will be removed in Storybook 9.0.
-      Please use 'initialGlobals' instead. Learn more:
-
-      https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#previewjs-globals-renamed-to-initialglobals
-    `);
-  }
   return {
     ...(argTypes && { argTypes: normalizeInputTypes(argTypes as ArgTypes) }),
     ...(globalTypes && { globalTypes: normalizeInputTypes(globalTypes) }),
@@ -65,7 +52,7 @@ export function normalizeProjectAnnotations<TRenderer extends Renderer>({
       // TODO: Make an architectural decision on the handling of core addons
       inferControls,
     ],
-    initialGlobals: combineParameters(initialGlobals, globals),
+    initialGlobals,
     ...(annotations as NormalizedProjectAnnotations<TRenderer>),
   };
 }

code/core/src/preview-api/modules/store/csf/portable-stories.ts

@@ -29,7 +29,6 @@ import { HooksContext } from '../../../addons';
 import { ReporterAPI } from '../reporter-api';
 import { composeConfigs } from './composeConfigs';
 import { getCsfFactoryAnnotations } from './csf-factory-utils';
-import { getValuesFromArgTypes } from './getValuesFromArgTypes';
 import { normalizeComponentAnnotations } from './normalizeComponentAnnotations';
 import { normalizeProjectAnnotations } from './normalizeProjectAnnotations';
 import { normalizeStory } from './normalizeStory';
@@ -134,10 +133,7 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
     normalizedProjectAnnotations
   );
 
-  const globalsFromGlobalTypes = getValuesFromArgTypes(normalizedProjectAnnotations.globalTypes);
   const globals = {
-    // TODO: remove loading from globalTypes in 9.0
-    ...globalsFromGlobalTypes,
     ...normalizedProjectAnnotations.initialGlobals,
     ...story.storyGlobals,
   };
@@ -169,7 +165,10 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
 
     if (story.renderToCanvas) {
       context.renderToCanvas = async () => {
-        // Consolidate this renderContext with Context in SB 9.0
+        // TODO: Consolidate this renderContext with Context in SB 10.0
+        // Change renderToCanvas function to only use the context object
+        // and to make the renderContext an internal implementation detail
+        // wasnt'possible so far because showError and showException are not part of the story context (yet)
         const unmount = await story.renderToCanvas?.(
           {
             componentId: story.componentId,

code/core/src/preview/README.md

@@ -30,7 +30,7 @@ A rendering story goes through these phases:
 
 - `preparing` - (maybe async) import the story file and prepare the story function.
 - `loading` - async loaders are running
-- `rendering` - the `renderToDOM` function for the framework is running
+- `rendering` - the `renderToCanvas` function for the framework is running
 - `playing` - the `play` function is running
 - `completed` - the story is done.
 

code/core/src/toolbar/components/ToolbarMenuButton.tsx

@@ -1,6 +1,8 @@
 import React, { type FC } from 'react';
 
-import { IconButton, Icons, type IconsProps } from 'storybook/internal/components';
+import { IconButton } from 'storybook/internal/components';
+
+import { Icons, type IconsProps } from '../../components/components/icon/icon';
 
 interface ToolbarMenuButtonProps {
   active: boolean;

code/core/src/toolbar/components/ToolbarMenuListItem.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import type { TooltipLinkListLink } from 'storybook/internal/components';
-import { Icons } from 'storybook/internal/components';
 
+import { Icons } from '../../components/components/icon/icon';
 import type { ToolbarItem } from '../types';
 
 export type ToolbarMenuListItemProps = {

code/core/src/toolbar/types.ts

@@ -1,6 +1,7 @@
-import type { IconsProps } from 'storybook/internal/components';
 import type { InputType } from 'storybook/internal/types';
 
+import type { IconsProps } from '../components/components/icon/icon';
+
 export type ToolbarShortcutType = 'next' | 'previous' | 'reset';
 
 export type ToolbarItemType = 'item' | 'reset';

code/core/src/types/modules/addons.ts

@@ -26,10 +26,7 @@ import type { IndexEntry } from './indexer';
 
 export type Addon_Types = Exclude<
   Addon_TypesEnum,
-  | Addon_TypesEnum.experimental_PAGE
+  Addon_TypesEnum.experimental_PAGE | Addon_TypesEnum.experimental_TEST_PROVIDER
-  | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
-  | Addon_TypesEnum.experimental_TEST_PROVIDER
-  | Addon_TypesEnum.experimental_SIDEBAR_TOP
 >;
 
 export interface Addon_ArgType<TArg = unknown> extends InputType {
@@ -291,7 +288,6 @@ export interface Addon_BaseMeta<ComponentType> {
    *
    * Used by addons for automatic prop table generation and display of other component metadata.
    *
-   * @deprecated
    * @example
    *
    * ```ts
@@ -328,8 +324,6 @@ export type Addon_Type =
   | Addon_BaseType
   | Addon_PageType
   | Addon_WrapperType
-  | Addon_SidebarBottomType
-  | Addon_SidebarTopType
   | Addon_TestProviderType<Addon_TestProviderState>;
 export interface Addon_BaseType {
   /**
@@ -350,8 +344,6 @@ export interface Addon_BaseType {
     Addon_Types,
     | Addon_TypesEnum.PREVIEW
     | Addon_TypesEnum.experimental_PAGE
-    | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
-    | Addon_TypesEnum.experimental_SIDEBAR_TOP
     | Addon_TypesEnum.experimental_TEST_PROVIDER
   >;
   /**
@@ -448,24 +440,6 @@ export interface Addon_WrapperType {
   >;
 }
 
-/** @deprecated This doesn't do anything anymore and will be removed in Storybook 9.0. */
-export interface Addon_SidebarBottomType {
-  type: Addon_TypesEnum.experimental_SIDEBAR_BOTTOM;
-  /** The unique id of the tool. */
-  id: string;
-  /** A React.FunctionComponent. */
-  render: FC;
-}
-
-/** @deprecated This will be removed in Storybook 9.0. */
-export interface Addon_SidebarTopType {
-  type: Addon_TypesEnum.experimental_SIDEBAR_TOP;
-  /** The unique id of the tool. */
-  id: string;
-  /** A React.FunctionComponent. */
-  render: FC;
-}
-
 export interface Addon_TestProviderType<
   Details extends { [key: string]: any } = NonNullable<unknown>,
 > {
@@ -508,16 +482,12 @@ type Addon_TypeBaseNames = Exclude<
   Addon_TypesEnum,
   | Addon_TypesEnum.PREVIEW
   | Addon_TypesEnum.experimental_PAGE
-  | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
-  | Addon_TypesEnum.experimental_SIDEBAR_TOP
   | Addon_TypesEnum.experimental_TEST_PROVIDER
 >;
 
 export interface Addon_TypesMapping extends Record<Addon_TypeBaseNames, Addon_BaseType> {
   [Addon_TypesEnum.PREVIEW]: Addon_WrapperType;
   [Addon_TypesEnum.experimental_PAGE]: Addon_PageType;
-  [Addon_TypesEnum.experimental_SIDEBAR_BOTTOM]: Addon_SidebarBottomType;
-  [Addon_TypesEnum.experimental_SIDEBAR_TOP]: Addon_SidebarTopType;
   [Addon_TypesEnum.experimental_TEST_PROVIDER]: Addon_TestProviderType<Addon_TestProviderState>;
 }
 
@@ -570,18 +540,6 @@ export enum Addon_TypesEnum {
    * @unstable
    */
   experimental_PAGE = 'page',
-  /**
-   * This adds items in the bottom of the sidebar.
-   *
-   * @deprecated This doesn't do anything anymore and will be removed in Storybook 9.0.
-   */
-  experimental_SIDEBAR_BOTTOM = 'sidebar-bottom',
-  /**
-   * This adds items in the top of the sidebar.
-   *
-   * @deprecated This will be removed in Storybook 9.0.
-   */
-  experimental_SIDEBAR_TOP = 'sidebar-top',
   /** This adds items to the Testing Module in the sidebar. */
   experimental_TEST_PROVIDER = 'test-provider',
 }

code/core/src/types/modules/api.ts

@@ -38,8 +38,6 @@ export interface API_ProviderData<API> {
 
 export interface API_Provider<API> {
   channel?: Channel;
-  /** @deprecated Will be removed in 8.0, please use channel instead */
-  serverChannel?: Channel;
   renderPreview?: API_IframeRenderer;
   handleAPI(api: API): void;
   getConfig(): {
@@ -88,8 +86,6 @@ export interface API_Layout {
   panelPosition: API_PanelPositions;
   showTabs: boolean;
   showToolbar: boolean;
-  /** @deprecated, will be removed in 8.0 - this API no longer works */
-  isToolshown?: boolean;
 }
 
 export interface API_UI {
@@ -120,14 +116,6 @@ interface OnClickOptions {
   onDismiss: () => void;
 }
 
-/**
- * @deprecated Use ReactNode for the icon instead.
- * @see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#icons-is-deprecated
- */
-interface DeprecatedIconType {
-  name: string;
-  color?: string;
-}
 export interface API_Notification {
   id: string;
   content: {
@@ -136,8 +124,7 @@ export interface API_Notification {
   };
   duration?: number;
   link?: string;
-  // TODO: Remove DeprecatedIconType in 9.0
+  icon?: React.ReactNode;
-  icon?: React.ReactNode | DeprecatedIconType;
   onClear?: (options: OnClearOptions) => void;
   onClick?: (options: OnClickOptions) => void;
 }

code/core/src/types/modules/core-common.ts

@@ -297,13 +297,6 @@ type CoreCommon_StorybookRefs = Record<
 export type DocsOptions = {
   /** What should we call the generated docs entries? */
   defaultName?: string;
-  /**
-   * Should we generate a docs entry per CSF file? Set to 'tag' (the default) to generate an entry
-   * for every CSF file with the 'autodocs' tag.
-   *
-   * @deprecated Use `tags: ['autodocs']` in `.storybook/preview.js` instead
-   */
-  autodocs?: boolean | 'tag';
   /** Only show doc entries in the side bar (usually set with the `--docs` CLI flag) */
   docsMode?: boolean;
 };

code/core/src/types/modules/story.ts

@@ -47,8 +47,6 @@ export interface ProjectAnnotations<TRenderer extends Renderer>
   addons?: ProjectAnnotations<TRenderer>[];
   testingLibraryRender?: (...args: never[]) => { unmount: () => void };
   renderToCanvas?: RenderToCanvas<TRenderer>;
-  /* @deprecated use renderToCanvas */
-  renderToDOM?: RenderToCanvas<TRenderer>;
 }
 
 type NamedExportsOrDefault<TExport> = TExport | { default: TExport };

code/core/template/stories/globals.stories.ts

@@ -21,7 +21,7 @@ export const Inheritance = {
   play: async ({ canvasElement }: PlayFunctionContext<any>) => {
     await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({
       foo: 'fooValue',
-      bar: 'barDefaultValue',
+      bar: 'barValue',
       baz: 'bazComponentValue',
     });
   },
@@ -63,7 +63,7 @@ export const Overrides1 = {
   play: async ({ canvasElement }: PlayFunctionContext<any>) => {
     await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({
       foo: 'fooOverridden1',
-      bar: 'barDefaultValue',
+      bar: 'barValue',
       baz: 'bazOverridden1',
     });
   },
@@ -82,7 +82,7 @@ export const Overrides2 = {
   play: async ({ canvasElement }: PlayFunctionContext<any>) => {
     await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({
       foo: 'fooOverridden2',
-      bar: 'barDefaultValue',
+      bar: 'barValue',
       baz: 'bazOverridden2',
     });
   },

code/core/template/stories/preview.ts

@@ -49,6 +49,7 @@ export const decorators = [testProjectDecorator];
 
 export const initialGlobals = {
   foo: 'fooValue',
+  bar: 'barValue',
   baz: 'bazValue',
 
   sb_theme: 'light',
@@ -61,9 +62,6 @@ export const initialGlobals = {
 };
 
 export const globalTypes = {
-  foo: { defaultValue: 'fooDefaultValue' },
-  bar: { defaultValue: 'barDefaultValue' },
-
   sb_theme: {
     name: 'Theme',
     description: 'Global theme for components',

code/lib/blocks/src/components/Preview.stories.tsx

@@ -30,70 +30,70 @@ export const Loading = () => <PreviewSkeleton />;
 
 export const CodeCollapsed = () => (
   <Preview isExpanded={false} withSource={sourceStories.JSX.args}>
-    <Button secondary>Button 1</Button>
+    <Button variant="outline">Button 1</Button>
   </Preview>
 );
 
 export const CodeExpanded = () => (
   <Preview isExpanded withSource={sourceStories.JSX.args}>
-    <Button secondary>Button 1</Button>
+    <Button variant="outline">Button 1</Button>
   </Preview>
 );
 
 export const CodeError = () => (
   <Preview isExpanded withSource={sourceStories.SourceUnavailable.args}>
-    <Button secondary>Button 1</Button>
+    <Button variant="outline">Button 1</Button>
   </Preview>
 );
 
 export const Single = () => (
   <Preview>
-    <Button secondary>Button 1</Button>
+    <Button variant="outline">Button 1</Button>
   </Preview>
 );
 
 export const Row = () => (
   <Preview>
-    <Button secondary>Button 1</Button>
+    <Button variant="outline">Button 1</Button>
-    <Button secondary>Button 2</Button>
+    <Button variant="outline">Button 2</Button>
-    <Button secondary>Button 3</Button>
+    <Button variant="outline">Button 3</Button>
-    <Button secondary>Button 4</Button>
+    <Button variant="outline">Button 4</Button>
-    <Button secondary>Button 5</Button>
+    <Button variant="outline">Button 5</Button>
-    <Button secondary>Button 6</Button>
+    <Button variant="outline">Button 6</Button>
-    <Button secondary>Button 7</Button>
+    <Button variant="outline">Button 7</Button>
   </Preview>
 );
 
 export const Column = () => (
   <Preview isColumn>
-    <Button secondary>Button 1</Button>
+    <Button variant="outline">Button 1</Button>
-    <Button secondary>Button 2</Button>
+    <Button variant="outline">Button 2</Button>
-    <Button secondary>Button 3</Button>
+    <Button variant="outline">Button 3</Button>
   </Preview>
 );
 
 export const GridWith3Columns = () => (
   <Preview columns={3}>
-    <Button secondary>Button 1</Button>
+    <Button variant="outline">Button 1</Button>
-    <Button secondary>Button 2</Button>
+    <Button variant="outline">Button 2</Button>
-    <Button secondary>Button 3</Button>
+    <Button variant="outline">Button 3</Button>
-    <Button secondary>Button 4</Button>
+    <Button variant="outline">Button 4</Button>
-    <Button secondary>Button 5</Button>
+    <Button variant="outline">Button 5</Button>
-    <Button secondary>Button 6</Button>
+    <Button variant="outline">Button 6</Button>
-    <Button secondary>Button 7 long long long long long </Button>
+    <Button variant="outline">Button 7 long long long long long </Button>
-    <Button secondary>Button 8</Button>
+    <Button variant="outline">Button 8</Button>
-    <Button secondary>Button 9</Button>
+    <Button variant="outline">Button 9</Button>
-    <Button secondary>Button 10</Button>
+    <Button variant="outline">Button 10</Button>
-    <Button secondary>Button 11</Button>
+    <Button variant="outline">Button 11</Button>
-    <Button secondary>Button 12</Button>
+    <Button variant="outline">Button 12</Button>
-    <Button secondary>Button 13</Button>
+    <Button variant="outline">Button 13</Button>
-    <Button secondary>Button 14</Button>
+    <Button variant="outline">Button 14</Button>
-    <Button secondary>Button 15</Button>
+    <Button variant="outline">Button 15</Button>
-    <Button secondary>Button 16</Button>
+    <Button variant="outline">Button 16</Button>
-    <Button secondary>Button 17</Button>
+    <Button variant="outline">Button 17</Button>
-    <Button secondary>Button 18</Button>
+    <Button variant="outline">Button 18</Button>
-    <Button secondary>Button 19</Button>
+    <Button variant="outline">Button 19</Button>
-    <Button secondary>Button 20</Button>
+    <Button variant="outline">Button 20</Button>
   </Preview>
 );
 
@@ -241,10 +241,7 @@ export const WithCenteredMulti = (
   </Preview>
 );
 
-export const WithAdditionalActions = (
+export const WithAdditionalActions = () => (
-  args: any,
-  { loaded: { docsContext } }: { loaded: { docsContext: DocsContextProps } }
-) => (
   <Preview
     additionalActions={[
       {
@@ -256,6 +253,6 @@ export const WithAdditionalActions = (
       },
     ]}
   >
-    <Button secondary>Button 1</Button>
+    <Button variant="outline">Button 1</Button>
   </Preview>
 );

code/lib/cli-storybook/src/automigrate/fixes/autodocs-tags.test.ts

@@ -1,76 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import type { StorybookConfig } from 'storybook/internal/types';
-
-import { autodocsTags } from './autodocs-tags';
-
-const check = async ({
-  main: mainConfig,
-  storybookVersion = '7.0.0',
-  previewConfigPath,
-}: {
-  main: Partial<StorybookConfig> & Record<string, unknown>;
-  storybookVersion?: string;
-  previewConfigPath?: string;
-}) => {
-  return autodocsTags.check({
-    packageManager: {} as any,
-    configDir: '',
-    mainConfig: mainConfig as any,
-    storybookVersion,
-    previewConfigPath,
-  });
-};
-
-it('with no docs setting', async () => {
-  await expect(
-    check({
-      main: {},
-    })
-  ).resolves.toBeFalsy();
-});
-
-describe('docs.autodocs = true', () => {
-  it('errors with no preview.js', async () => {
-    await expect(
-      check({
-        main: {
-          docs: { autodocs: true },
-        },
-      })
-    ).rejects.toThrowError();
-  });
-
-  it('continues with preview.js', async () => {
-    await expect(
-      check({
-        main: {
-          docs: { autodocs: true },
-        },
-        previewConfigPath: '.storybook/preview.js',
-      })
-    ).resolves.toBeTruthy();
-  });
-});
-
-describe('docs.autodocs != true', () => {
-  it('docs.autodocs = false', async () => {
-    await expect(
-      check({
-        main: {
-          docs: { autodocs: false },
-        },
-      })
-    ).resolves.toBeTruthy();
-  });
-
-  it('docs.autodocs = "tag"', async () => {
-    await expect(
-      check({
-        main: {
-          docs: { autodocs: 'tag' },
-        },
-      })
-    ).resolves.toBeTruthy();
-  });
-});

code/lib/cli-storybook/src/automigrate/fixes/autodocs-tags.ts

@@ -1,95 +0,0 @@
-import { readConfig, writeConfig } from 'storybook/internal/csf-tools';
-import type { DocsOptions } from 'storybook/internal/types';
-
-import picocolors from 'picocolors';
-import { dedent } from 'ts-dedent';
-
-import { updateMainConfig } from '../helpers/mainConfigFile';
-import type { Fix } from '../types';
-
-const logger = console;
-
-const MIGRATION =
-  'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-docsautodocs-is-deprecated';
-
-interface Options {
-  autodocs: DocsOptions['autodocs'];
-  mainConfigPath?: string;
-  previewConfigPath?: string;
-}
-
-export const autodocsTags: Fix<Options> = {
-  id: 'autodocs-tags',
-  versionRange: ['*.*.*', '>=8.0.*'],
-  async check({ mainConfig, mainConfigPath, previewConfigPath }) {
-    const autodocs = mainConfig?.docs?.autodocs;
-
-    if (autodocs === undefined) {
-      return null;
-    }
-
-    if (autodocs === true && !previewConfigPath) {
-      throw Error(dedent`
-        ❌ Failed to remove the deprecated ${picocolors.cyan(
-          'docs.autodocs'
-        )} setting from ${picocolors.cyan(mainConfigPath)}.
-        
-        There is no preview config file in which to add the ${picocolors.cyan('autodocs')} tag.
-
-        Please perform the migration by hand: ${picocolors.yellow(MIGRATION)}
-      `);
-      return null;
-    }
-
-    return { autodocs, mainConfigPath, previewConfigPath };
-  },
-
-  prompt({ autodocs, mainConfigPath, previewConfigPath }) {
-    let falseMessage = '',
-      trueMessage = '';
-
-    if (autodocs === false) {
-      falseMessage = dedent`
-
-
-        There is no ${picocolors.cyan('docs.autodocs = false')} equivalent.
-        You'll need to check your stories to ensure none are tagged with ${picocolors.cyan(
-          'autodocs'
-        )}.
-      `;
-    } else if (autodocs === true) {
-      trueMessage = ` and update ${picocolors.cyan(previewConfigPath)}`;
-    }
-
-    return dedent`
-      The ${picocolors.cyan('docs.autodocs')} setting in ${picocolors.cyan(
-        mainConfigPath
-      )} is deprecated.${falseMessage}
-        
-      Learn more: ${picocolors.yellow(MIGRATION)}
-      
-      Remove ${picocolors.cyan('docs.autodocs')}${trueMessage}?
-    `;
-  },
-
-  async run({ dryRun, mainConfigPath, result }) {
-    if (!dryRun) {
-      if (result.autodocs === true) {
-        logger.info(`✅ Adding "autodocs" tag to ${result.previewConfigPath}`);
-        const previewConfig = await readConfig(result.previewConfigPath!);
-        const tags = previewConfig.getFieldNode(['tags']);
-        if (tags) {
-          previewConfig.appendValueToArray(['tags'], 'autodocs');
-        } else {
-          previewConfig.setFieldValue(['tags'], ['autodocs']);
-        }
-        await writeConfig(previewConfig);
-      }
-
-      await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, async (main) => {
-        logger.info(`✅ Removing "docs.autodocs" from ${mainConfigPath}`);
-        main.removeField(['docs', 'autodocs']);
-      });
-    }
-  },
-};

code/lib/cli-storybook/src/automigrate/fixes/autodocs-true.test.ts

@@ -1,48 +0,0 @@
-import { afterEach, describe, expect, it, vi } from 'vitest';
-
-import type { PackageJson, StorybookConfigRaw } from 'storybook/internal/types';
-
-import { makePackageManager } from '../helpers/testing-helpers';
-import { autodocsTrue } from './autodocs-true';
-
-const checkAutodocs = async ({
-  packageJson = {},
-  main: mainConfig,
-}: {
-  packageJson?: PackageJson;
-  main: Partial<StorybookConfigRaw> & Record<string, unknown>;
-}) => {
-  return autodocsTrue.check({
-    packageManager: makePackageManager(packageJson),
-    mainConfig: mainConfig as StorybookConfigRaw,
-    storybookVersion: '7.0.0',
-  });
-};
-
-describe('autodocs-true fix', () => {
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it('should skip when docs.autodocs is already defined', async () => {
-    await expect(checkAutodocs({ main: { docs: { autodocs: 'tag' } } })).resolves.toBeFalsy();
-  });
-
-  it('should throw when docs.docsPage contains invalid value', async () => {
-    const main = { docs: { docsPage: 123 } } as any;
-    await expect(checkAutodocs({ main })).rejects.toThrow();
-  });
-
-  it('should prompt when using docs.docsPage legacy property', async () => {
-    const main = { docs: { docsPage: true } } as any;
-    await expect(checkAutodocs({ main })).resolves.toEqual({
-      value: 'tag',
-    });
-  });
-
-  it('should prompt when not using docs.autodocs', async () => {
-    await expect(checkAutodocs({ main: {} })).resolves.toEqual({
-      value: true,
-    });
-  });
-});

code/lib/cli-storybook/src/automigrate/fixes/autodocs-true.ts

@@ -1,92 +0,0 @@
-import picocolors from 'picocolors';
-import { dedent } from 'ts-dedent';
-
-import { updateMainConfig } from '../helpers/mainConfigFile';
-import type { Fix } from '../types';
-
-const logger = console;
-
-interface AutodocsTrueFrameworkRunOptions {
-  value?: boolean | 'tag';
-}
-
-/** Set the `docs.autodocs` option to true if it isn't already set */
-export const autodocsTrue: Fix<AutodocsTrueFrameworkRunOptions> = {
-  id: 'autodocsTrue',
-
-  versionRange: ['<7', '>=7'],
-
-  async check({ mainConfig }) {
-    const { docs } = mainConfig;
-
-    const docsPageToAutodocsMapping = {
-      true: 'tag' as const,
-      automatic: true,
-      false: false,
-    };
-
-    // @ts-expect-error docsPage does not exist anymore but we need to account for legacy code
-    if (docs?.docsPage) {
-      // @ts-expect-error same as above
-      const oldValue = docs?.docsPage.toString();
-      if (!(oldValue in docsPageToAutodocsMapping)) {
-        throw new Error(`Unexpected value for docs.docsPage: ${oldValue}`);
-      }
-
-      return {
-        value: docsPageToAutodocsMapping[oldValue as keyof typeof docsPageToAutodocsMapping],
-      };
-    }
-
-    return docs?.autodocs === undefined ? { value: true } : null;
-  },
-
-  prompt({ value }) {
-    const autodocsFormatted = picocolors.cyan(
-      `docs: { autodocs: ${JSON.stringify(value ?? true)} }`
-    );
-    const tagWarning = dedent`
-      NOTE: if you're upgrading from an older 7.0-beta using the 'docsPage' tag,
-      please update your story files to use the 'autodocs' tag instead.
-    `;
-
-    if (value) {
-      return dedent`
-      We've changed the configuration of autodocs (previous docsPage), so now the value:
-        - docs.autodocs: true -- means automatically create docs for every CSF file
-        - docs.autodocs: 'tag' -- means only create autodocs for CSF files with the 'autodocs' tag
-        - docs.autodocs: false -- means never create autodocs
-
-      Based on your prior configuration,  we can set the \`docs.autodocs\` to keep your old behaviour:
-
-      ${autodocsFormatted}
-      ${value === 'tag' ? tagWarning : ''}
-      More info: ${picocolors.yellow(
-        'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
-      )}
-    `;
-    }
-
-    return dedent`
-      We've detected that your main.js configuration file has not configured autodocs. In 6.x we
-      we defaulted to having a autodocs for every story, in 7.x you need to opt in per-component.
-      However, we can set the \`docs.autodocs\` to true to approximate the old behaviour:
-
-      ${autodocsFormatted}
-
-      More info: ${picocolors.yellow(
-        'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
-      )}
-    `;
-  },
-
-  async run({ result: { value }, dryRun, mainConfigPath }) {
-    logger.info(`✅ Setting 'docs.autodocs' to true in main.js`);
-    if (!dryRun) {
-      await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, async (main) => {
-        main.removeField(['docs', 'docsPage']);
-        main.setFieldValue(['docs', 'autodocs'], value ?? true);
-      });
-    }
-  },
-};

code/lib/cli-storybook/src/automigrate/fixes/index.ts

@@ -6,8 +6,6 @@ import { addonPostCSS } from './addon-postcss';
 import { addonsAPI } from './addons-api';
 import { angularBuilders } from './angular-builders';
 import { angularBuildersMultiproject } from './angular-builders-multiproject';
-import { autodocsTags } from './autodocs-tags';
-import { autodocsTrue } from './autodocs-true';
 import { builderVite } from './builder-vite';
 import { consolidatedImports } from './consolidated-imports';
 import { cra5 } from './cra5';
@@ -54,7 +52,6 @@ export const allFixes: Fix[] = [
   removedGlobalClientAPIs,
   mdxgfm,
   mdxToCSF,
-  autodocsTrue,
   angularBuildersMultiproject,
   angularBuilders,
   wrapRequire,
@@ -66,7 +63,6 @@ export const allFixes: Fix[] = [
   mdx1to3,
   upgradeStorybookRelatedDependencies,
   vta,
-  autodocsTags,
   initialGlobals,
   addonA11yAddonTest,
   consolidatedImports,

code/lib/cli-storybook/src/automigrate/fixes/vite-config-file.ts

@@ -1,7 +1,6 @@
 import { join } from 'node:path';
 
-import { frameworkToRenderer } from 'storybook/internal/cli';
+import { frameworkPackages, frameworkToRenderer } from 'storybook/internal/common';
-import { frameworkPackages } from 'storybook/internal/common';
 
 import findUp from 'find-up';
 import { dedent } from 'ts-dedent';

code/lib/cli-storybook/src/automigrate/helpers/mainConfigFile.ts

@@ -1,6 +1,5 @@
 import { normalize } from 'node:path';
 
-import { frameworkToRenderer } from 'storybook/internal/cli';
 import {
   builderPackages,
   extractProperFrameworkName,
@@ -10,7 +9,7 @@ import {
   rendererPackages,
 } from 'storybook/internal/common';
 import type { JsPackageManager } from 'storybook/internal/common';
-import { getCoercedStorybookVersion } from 'storybook/internal/common';
+import { frameworkToRenderer, getCoercedStorybookVersion } from 'storybook/internal/common';
 import type { ConfigFile } from 'storybook/internal/csf-tools';
 import { readConfig, writeConfig as writeConfigFile } from 'storybook/internal/csf-tools';
 import type { StorybookConfigRaw } from 'storybook/internal/types';

code/lib/create-storybook/src/generators/baseGenerator.ts

@@ -183,9 +183,6 @@ const getFrameworkDetails = (
 
 const stripVersions = (addons: string[]) => addons.map((addon) => getPackageDetails(addon)[0]);
 
-const hasInteractiveStories = (rendererId: SupportedRenderers) =>
-  ['react', 'angular', 'preact', 'svelte', 'vue3', 'html', 'solid', 'qwik'].includes(rendererId);
-
 const hasFrameworkTemplates = (framework?: SupportedFrameworks) => {
   if (!framework) {
     return false;

code/package.json

@@ -103,7 +103,7 @@
     "@playwright/test": "1.48.1",
     "@storybook/addon-a11y": "workspace:*",
     "@storybook/addon-backgrounds": "workspace:*",
-    "@storybook/addon-designs": "9.0.0--canary.1499c1a.0",
+    "@storybook/addon-designs": "9.0.0-next.1",
     "@storybook/addon-docs": "workspace:*",
     "@storybook/addon-essentials": "workspace:*",
     "@storybook/addon-highlight": "workspace:*",

code/renderers/react/src/__test__/portable-stories-factory.test.tsx

@@ -99,8 +99,8 @@ describe('projectAnnotations', () => {
     setProjectAnnotations([
       {
         parameters: { injected: true },
-        globalTypes: {
+        initialGlobals: {
-          locale: { defaultValue: 'en' },
+          locale: 'en',
         },
       },
     ]);

code/renderers/react/src/__test__/portable-stories-legacy.test.tsx

@@ -13,7 +13,7 @@ import { composeStories, composeStory, setProjectAnnotations } from '..';
 import type { Button } from './Button';
 import * as stories from './Button.stories';
 
-// TODO: Potentially remove this in Storybook 9.0 once we fully move users to the new portable stories API
+// TODO: Potentially remove this in Storybook 9.0 once we fully move users to the new portable stories API (with CSF4)
 describe('Legacy Portable Stories API', () => {
   // example with composeStories, returns an object with all stories composed with args/decorators
   const { CSF3Primary, LoaderStory } = composeStories(stories);
@@ -70,9 +70,7 @@ describe('Legacy Portable Stories API', () => {
       setProjectAnnotations([
         {
           parameters: { injected: true },
-          globalTypes: {
+          initialGlobals: { locale: 'en' },
-            locale: { defaultValue: 'en' },
-          },
         },
       ]);
       const WithEnglishText = composeStory(stories.CSF2StoryWithLocale, stories.default);

code/renderers/react/src/__test__/portable-stories.test.tsx

@@ -90,9 +90,7 @@ describe('projectAnnotations', () => {
     setProjectAnnotations([
       {
         parameters: { injected: true },
-        globalTypes: {
+        initialGlobals: { locale: 'en' },
-          locale: { defaultValue: 'en' },
-        },
       },
     ]);
     const WithEnglishText = composeStory(ButtonStories.CSF2StoryWithLocale, ButtonStories.default);

code/renderers/vue3/src/__tests__/composeStories/portable-stories.test.ts

@@ -66,9 +66,7 @@ describe('projectAnnotations', () => {
     setProjectAnnotations([
       {
         parameters: { injected: true },
-        globalTypes: {
+        initialGlobals: { locale: 'en' },
-          locale: { defaultValue: 'en' },
-        },
       },
     ]);
     const WithEnglishText = composeStory(stories.CSF2StoryWithLocale, stories.default);

code/yarn.lock

@@ -6344,9 +6344,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-designs@npm:9.0.0--canary.1499c1a.0":
+"@storybook/addon-designs@npm:9.0.0-next.1":
-  version: 9.0.0--canary.1499c1a.0
+  version: 9.0.0-next.1
-  resolution: "@storybook/addon-designs@npm:9.0.0--canary.1499c1a.0"
+  resolution: "@storybook/addon-designs@npm:9.0.0-next.1"
   dependencies:
     "@figspec/react": "npm:^1.0.0"
   peerDependencies:
@@ -6360,7 +6360,7 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: 10c0/5fd56ad8832778590f1bcdd144c17c234482a137475747e8791e4be9a4ba7132a6089287a614586b86d06b6082de932ee19a8709f39888077cbac98bc60b3705
+  checksum: 10c0/6989444d6caeb7abbb1a763e0a29d0749c529216d03d690618575378845e4259ddcf1935f7990fb05667a373940086dbacdcc6c97ff3f11eaa76f132bb11a1d5
   languageName: node
   linkType: hard
 
@@ -7421,7 +7421,7 @@ __metadata:
     "@playwright/test": "npm:1.48.1"
     "@storybook/addon-a11y": "workspace:*"
     "@storybook/addon-backgrounds": "workspace:*"
-    "@storybook/addon-designs": "npm:9.0.0--canary.1499c1a.0"
+    "@storybook/addon-designs": "npm:9.0.0-next.1"
     "@storybook/addon-docs": "workspace:*"
     "@storybook/addon-essentials": "workspace:*"
     "@storybook/addon-highlight": "workspace:*"

test-storybooks/portable-stories-kitchen-sink/react/.storybook/preview.tsx

@@ -12,10 +12,12 @@ const preview: Preview = {
       </div>
     ),
   ],
+  initialGlobals: {
+    locale: 'en',
+  },
   globalTypes: {
     locale: {
       description: 'Locale for components',
-      defaultValue: 'en',
       toolbar: {
         title: 'Locale',
         icon: 'circlehollow',

test-storybooks/portable-stories-kitchen-sink/react/stories/Button.stories.playwright.ts

@@ -5,4 +5,4 @@ export default composeStories(stories);
 
 export const SingleComposedStory = composeStory(stories.CSF3Primary, stories.default);
 
-export const WithSpanishGlobal = composeStory(stories.CSF2StoryWithLocale, stories.default, {globals: { locale: 'es' }});
+export const WithSpanishGlobal = composeStory(stories.CSF2StoryWithLocale, stories.default, { initialGlobals: { locale: 'es' } });

test-storybooks/portable-stories-kitchen-sink/react/stories/Button.test.tsx

@@ -55,7 +55,7 @@ describe('projectAnnotations', () => {
 
   it('renders with custom projectAnnotations via composeStory params', () => {
     const WithPortugueseText = composeStory(stories.CSF2StoryWithLocale, stories.default, {
-      globalTypes: { locale: { defaultValue: 'pt' } },
+      initialGlobals: { locale: 'pt' },
     });
     const { getByText } = render(<WithPortugueseText />);
     const buttonElement = getByText('Olá!');

test-storybooks/portable-stories-kitchen-sink/vue3/stories/Button.stories.portable.ts

@@ -5,4 +5,4 @@ export default composeStories(stories);
 
 export const SingleComposedStory = composeStory(stories.CSF3Primary, stories.default);
 
-export const WithSpanishGlobal = composeStory(stories.CSF2StoryWithLocale, stories.default, {globals: { locale: 'es' }});
+export const WithSpanishGlobal = composeStory(stories.CSF2StoryWithLocale, stories.default, {initialGlobals: { locale: 'es' }});