fix stories

MIGRATION.md

@@ -622,7 +622,7 @@ import LinkTo from '@storybook/addon-links/react';
 
 #### Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types
 
-The `Story` type is now removed in favor of `StoryFn` and `StoryObj`. More info [here](##story-type-deprecated).
+The `Story` type is now removed in favor of `StoryFn` and `StoryObj`. More info [here](#story-type-deprecated).
 
 Additionally, for React, the `ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are now removed in favor of `StoryFn`, `StoryObj` and `Meta`. More info [here](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated).
 

code/addons/interactions/src/components/Interaction.stories.tsx

@@ -1,4 +1,4 @@
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react';
 import { expect } from '@storybook/jest';
 import { CallStates } from '@storybook/instrumenter';
 import { userEvent, within } from '@storybook/testing-library';
@@ -7,7 +7,7 @@ import { getCalls } from '../mocks';
 import { Interaction } from './Interaction';
 import SubnavStories from './Subnav.stories';
 
-type Story = ComponentStoryObj<typeof Interaction>;
+type Story = StoryObj<typeof Interaction>;
 
 export default {
   title: 'Addons/Interactions/Interaction',
@@ -17,7 +17,7 @@ export default {
     controls: SubnavStories.args.controls,
     controlStates: SubnavStories.args.controlStates,
   },
-} as ComponentMeta<typeof Interaction>;
+} as Meta<typeof Interaction>;
 
 export const Active: Story = {
   args: {

code/ui/manager/src/components/preview/Preview.stories.tsx

@@ -7,7 +7,7 @@ import { Location, BaseLocationProvider } from '@storybook/router';
 
 import { ThemeProvider, ensure as ensureTheme, themes } from '@storybook/theming';
 
-import type { DecoratorFn } from '@storybook/react';
+import type { Decorator } from '@storybook/react';
 import { Preview } from './Preview';
 
 import { PrettyFakeProvider } from '../../FakeProvider';
@@ -80,7 +80,7 @@ export default {
           </Location>
         </BaseLocationProvider>
       );
-    }) as DecoratorFn,
+    }) as Decorator,
   ],
 };
 

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

@@ -1,15 +1,15 @@
 /* eslint-disable storybook/use-storybook-testing-library */
 // @TODO: use addon-interactions and remove the rule disable above
 import React from 'react';
-import type { ComponentMeta, ComponentStoryObj, ComponentStoryFn } from '@storybook/react';
+import type { Meta, StoryObj, StoryFn } from '@storybook/react';
 import { ThemeProvider, useTheme } from '@storybook/theming';
 import type { Theme } from '@storybook/theming';
 import { action } from '@storybook/addon-actions';
 import { screen } from '@testing-library/dom';
 
 import { Heading } from './Heading';
 
-type Story = ComponentStoryFn<typeof Heading>;
+type Story = StoryFn<typeof Heading>;
 
 export default {
   component: Heading,
@@ -19,7 +19,7 @@ export default {
   decorators: [
     (storyFn) => <div style={{ padding: '0 20px', maxWidth: '230px' }}>{storyFn()}</div>,
   ],
-} as ComponentMeta<typeof Heading>;
+} as Meta<typeof Heading>;
 
 const menuItems = [
   { title: 'Menu Item 1', onClick: action('onActivateMenuItem'), id: '1' },
@@ -223,7 +223,7 @@ export const NoBrand: Story = () => {
   );
 };
 
-export const SkipToCanvasLinkFocused: ComponentStoryObj<typeof Heading> = {
+export const SkipToCanvasLinkFocused: StoryObj<typeof Heading> = {
   args: {
     menu: menuItems,
     skipLinkHref: '#storybook-preview-wrapper',

code/ui/manager/src/settings/SettingsFooter.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { DecoratorFn } from '@storybook/react';
+import type { Decorator } from '@storybook/react';
 import SettingsFooter from './SettingsFooter';
 
 export default {
@@ -11,7 +11,7 @@ export default {
       <div style={{ width: '600px', margin: '2rem auto' }}>
         <StoryFn {...c} />
       </div>
-    )) as DecoratorFn,
+    )) as Decorator,
   ],
 };
 

code/ui/manager/src/settings/shortcuts.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { actions as makeActions } from '@storybook/addon-actions';
 
-import type { DecoratorFn } from '@storybook/react';
+import type { Decorator } from '@storybook/react';
 import { ShortcutsScreen } from './shortcuts';
 import { defaultShortcuts } from './defaultShortcuts';
 
@@ -26,7 +26,7 @@ export default {
       >
         <StoryFn {...c} />
       </div>
-    )) as DecoratorFn,
+    )) as Decorator,
   ],
 };
 

test-storybooks/external-docs/components/AccountForm.stories.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable storybook/use-storybook-testing-library */
 // @TODO: use addon-interactions and remove the rule disable above
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react';
 import { screen } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 import { AccountForm } from './AccountForm';
@@ -12,9 +12,9 @@ export default {
   parameters: {
     layout: 'centered',
   },
-} as ComponentMeta<typeof AccountForm>;
+} as Meta<typeof AccountForm>;
 
-type Story = ComponentStoryObj<typeof AccountForm>;
+type Story = StoryObj<typeof AccountForm>;
 
 export const Standard: Story = {
   args: { passwordVerification: false },
@@ -54,7 +54,7 @@ export const StandardFailHover: Story = {
   },
 };
 
-export const Verification: ComponentStoryObj<typeof AccountForm> = {
+export const Verification: StoryObj<typeof AccountForm> = {
   args: { passwordVerification: true },
 };