chore(vr-tests-react-components): Convert stories to CSF

apps/vr-tests-react-components/.storybook/preview.js

@@ -1,72 +1,4 @@
 // @ts-check
 
-import * as React from 'react';
-import { setAddon } from '@storybook/react';
-import { webLightTheme, teamsHighContrastTheme, webDarkTheme } from '@fluentui/react-theme';
-import { FluentProvider } from '@fluentui/react-provider';
-
-/**
- * @deprecated https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-setaddon
- *
- * TODO: rework this to be conformant with Component Story Format
- *
- * Via this addon, we INVENT a new API that automatically adds several
- * stories for you when you call addStory() that adds variants (like RTL)
- *
- * addStory() is not an official Storybook API
- *
- * Adds a story with different configuration options.
- * By default, only adds a story in LTR.
- * The config parameter can be used to add the story RTL in addition to LTR.
- * In future, this can add a story with additional configurations such as theming.
- */
-setAddon({
-  /**
-   * @type {import('../src/utilities/types').ExtendedStoryApi['addStory']}
-   * @this {import('../src/utilities/types').ExtendedStoryApi}
-   */
-  addStory(storyName, storyFn, config = {}) {
-    this.add(storyName, (/** @type {import('../src/utilities/types').StoryContext} */ context) => {
-      return (
-        <FluentProvider applyStylesToPortals={false} theme={webLightTheme}>
-          {storyFn(context)}
-        </FluentProvider>
-      );
-    });
-    if (config.includeRtl) {
-      this.add(storyName + ' - RTL', (/** @type {import('../src/utilities/types').StoryContext} */ context) => {
-        return (
-          <FluentProvider applyStylesToPortals={false} theme={webLightTheme} dir="rtl">
-            {storyFn(context)}
-          </FluentProvider>
-        );
-      });
-    }
-    if (config.includeDarkMode) {
-      this.add(storyName + ' - Dark Mode', (/** @type {import('../src/utilities/types').StoryContext} */ context) => {
-        return (
-          <FluentProvider applyStylesToPortals={false} theme={webDarkTheme}>
-            {storyFn(context)}
-          </FluentProvider>
-        );
-      });
-    }
-    if (config.includeHighContrast) {
-      this.add(
-        storyName + ' - High Contrast',
-        (/** @type {import('../src/utilities/types').StoryContext} */ context) => {
-          return (
-            <FluentProvider applyStylesToPortals={false} theme={teamsHighContrastTheme}>
-              {storyFn(context)}
-            </FluentProvider>
-          );
-        },
-      );
-    }
-
-    return this;
-  },
-});
-
 /** @type {import("@fluentui/react-storybook-addon").FluentParameters} */
 export const parameters = { layout: 'none', mode: 'vr-test' };

apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Steps, StoryWright } from 'storywright';
 import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion';
 import { CircleRegular } from '@fluentui/react-icons';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
 
 export default {
@@ -17,7 +17,7 @@ export default {
       </StoryWright>
     ),
   ],
-} as ComponentMeta<typeof Accordion>;
+} satisfies Meta<typeof Accordion>;
 
 export const Size = () => (
   <Accordion openItems={[0, 1, 2, 3]}>

apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Steps, StoryWright } from 'storywright';
 import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
 
 export default {
@@ -24,7 +24,7 @@ export default {
       </StoryWright>
     ),
   ],
-} as ComponentMeta<typeof Accordion>;
+} satisfies Meta<typeof Accordion>;
 
 export const VisibilityFocus = () => (
   <Accordion openItems={[0]}>

apps/vr-tests-react-components/src/stories/Avatar.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import * as React from 'react';
 import { Steps, StoryWright } from 'storywright';
 import { Avatar, AvatarProps } from '@fluentui/react-avatar';
@@ -203,9 +203,7 @@ export default {
   ],
 } satisfies Meta<typeof Avatar>;
 
-type Story = StoryFn<typeof Avatar>;
-
-export const Basic: Story = () => (
+export const Basic = () => (
   <div style={{ display: 'flex', gap: '24px', padding: '24px' }}>
     <Avatar />
     <Avatar name="First Last" />
@@ -224,21 +222,21 @@ export const BasicRTL = getStoryVariant(Basic, RTL);
 export const BasicDarkMode = getStoryVariant(Basic, DARK_MODE);
 export const BasicHighContrast = getStoryVariant(Basic, HIGH_CONTRAST);
 
-export const SizeName: Story = () => <AvatarList names={examples.name} />;
+export const SizeName = () => <AvatarList names={examples.name} />;
 SizeName.storyName = 'size+name';
 
-export const SizeIconBadgeSquare: Story = () => <AvatarList badge={{ status: 'out-of-office' }} shape="square" />;
+export const SizeIconBadgeSquare = () => <AvatarList badge={{ status: 'out-of-office' }} shape="square" />;
 SizeIconBadgeSquare.storyName = 'size+icon+badge+square';
 
-export const SizeImageBadge: Story = () => <AvatarList images={examples.image} badge={{ status: 'do-not-disturb' }} />;
+export const SizeImageBadge = () => <AvatarList images={examples.image} badge={{ status: 'do-not-disturb' }} />;
 SizeImageBadge.storyName = 'size+image+badge';
 
-export const SizeInactiveBadge: Story = () => (
+export const SizeInactiveBadge = () => (
   <AvatarList images={examples.image} active="inactive" badge={{ status: 'offline' }} />
 );
 SizeInactiveBadge.storyName = 'size+inactive+badge';
 
-export const BadgeMask: Story = () => (
+export const BadgeMask = () => (
   <div
     style={{
       backgroundSize: '32px 32px',
@@ -252,35 +250,29 @@ BadgeMask.storyName = 'badgeMask';
 
 export const BadgeMaskRTL = getStoryVariant(BadgeMask, RTL);
 
-export const CustomSizeImage: Story = () => <AvatarCustomSizeList images={examples.image} />;
+export const CustomSizeImage = () => <AvatarCustomSizeList images={examples.image} />;
 CustomSizeImage.storyName = 'customSize+image';
 
-export const CustomSizeNameBadge: Story = () => (
-  <AvatarCustomSizeList names={examples.name} badge={{ status: 'available' }} />
-);
+export const CustomSizeNameBadge = () => <AvatarCustomSizeList names={examples.name} badge={{ status: 'available' }} />;
 CustomSizeNameBadge.storyName = 'customSize+name+badge';
 
-export const CustomSizeIconActive: Story = () => (
-  <AvatarCustomSizeList active="active" badge={{ status: 'available' }} />
-);
+export const CustomSizeIconActive = () => <AvatarCustomSizeList active="active" badge={{ status: 'available' }} />;
 CustomSizeIconActive.storyName = 'customSize+icon+active';
 
-export const Color: Story = () => <AvatarColors />;
+export const Color = () => <AvatarColors />;
 Color.storyName = 'color';
 
 export const ColorHighContrast = getStoryVariant(Color, HIGH_CONTRAST);
 export const ColorDarkMode = getStoryVariant(Color, DARK_MODE);
 
-export const ColorActive: Story = () => <AvatarColors active="active" />;
+export const ColorActive = () => <AvatarColors active="active" />;
 ColorActive.storyName = 'color+active';
 
 export const ColorActiveHighContrast = getStoryVariant(ColorActive, HIGH_CONTRAST);
 export const ColorActiveDarkMode = getStoryVariant(ColorActive, DARK_MODE);
 
-export const ImageBadUrl: Story = () => (
-  <Avatar name="Broken Image" image={{ src: `${imageRoot}/bad_image_url.jpg` }} />
-);
+export const ImageBadUrl = () => <Avatar name="Broken Image" image={{ src: `${imageRoot}/bad_image_url.jpg` }} />;
 ImageBadUrl.storyName = 'image-bad-url';
 
-export const ImageBadUrlIcon: Story = () => <Avatar image={{ src: `${imageRoot}/bad_image_url.jpg` }} />;
+export const ImageBadUrlIcon = () => <Avatar image={{ src: `${imageRoot}/bad_image_url.jpg` }} />;
 ImageBadUrlIcon.storyName = 'image-bad-url+icon';

apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroup.stories.tsx

@@ -1,38 +1,41 @@
 import * as React from 'react';
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { Steps, StoryWright } from 'storywright';
 import { AvatarGroup, AvatarGroupItem, AvatarGroupPopover } from '@fluentui/react-avatar';
 
-import { DARK_MODE, HIGH_CONTRAST, RTL, getStoryVariant, TestWrapperDecorator } from '../../utilities';
+import { DARK_MODE, HIGH_CONTRAST, RTL, getStoryVariant } from '../../utilities';
 import { names, AvatarGroupList } from './utils';
 
 export default {
   title: 'AvatarGroup Converged',
   component: AvatarGroup,
   decorators: [
-    TestWrapperDecorator,
     story => (
-      <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
+      <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
+        <div style={{ display: 'flex' }}>
+          <div className="testWrapper" style={{ overflow: 'hidden' }}>
+            {story()}
+          </div>
+        </div>
+      </StoryWright>
     ),
   ],
 } satisfies Meta<typeof AvatarGroup>;
 
-type Story = StoryFn<typeof AvatarGroup>;
-
-export const Basic: Story = () => <AvatarGroupList />;
+export const Basic = () => <AvatarGroupList />;
 Basic.storyName = 'basic';
 
 export const BasicDarkMode = getStoryVariant(Basic, DARK_MODE);
 
 export const BasicHighContrast = getStoryVariant(Basic, HIGH_CONTRAST);
 
-export const LayoutStack: Story = () => <AvatarGroupList layout="stack" />;
+export const LayoutStack = () => <AvatarGroupList layout="stack" />;
 
 export const LayoutStackDarkMode = getStoryVariant(LayoutStack, DARK_MODE);
 
 export const LayoutStackHighContrast = getStoryVariant(LayoutStack, HIGH_CONTRAST);
 
-export const LayoutPie1: Story = () => (
+export const LayoutPie1 = () => (
   <div style={{ padding: '10px' }}>
     <AvatarGroupList layout="pie">
       <AvatarGroupItem name={names[0]} />
@@ -50,7 +53,7 @@ export const LayoutPie1HighContrast = getStoryVariant(LayoutPie1, HIGH_CONTRAST)
 
 export const LayoutPie1RTL = getStoryVariant(LayoutPie1, RTL);
 
-export const LayoutPie2: Story = () => (
+export const LayoutPie2 = () => (
   <div style={{ padding: '10px' }}>
     <AvatarGroupList layout="pie">
       <AvatarGroupItem name={names[0]} />
@@ -70,7 +73,7 @@ export const LayoutPie2HighContrast = getStoryVariant(LayoutPie2, HIGH_CONTRAST)
 
 export const LayoutPie2RTL = getStoryVariant(LayoutPie2, RTL);
 
-export const LayoutPie: Story = () => <AvatarGroupList layout="pie" />;
+export const LayoutPie = () => <AvatarGroupList layout="pie" />;
 LayoutPie.storyName = 'layoutPie';
 
 export const LayoutPieDarkMode = getStoryVariant(LayoutPie, DARK_MODE);
@@ -79,7 +82,7 @@ export const LayoutPieHighContrast = getStoryVariant(LayoutPie, HIGH_CONTRAST);
 
 export const LayoutPieRTL = getStoryVariant(LayoutPie, RTL);
 
-export const OverflowIndicator: Story = () => <AvatarGroupList overflowIndicator="icon" />;
+export const OverflowIndicator = () => <AvatarGroupList overflowIndicator="icon" />;
 OverflowIndicator.storyName = 'overflowIndicator';
 
 export const OverflowIndicatorDarkMode = getStoryVariant(OverflowIndicator, DARK_MODE);

apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroupInteractive.stories.tsx → apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroupOverflow.stories.tsx

@@ -1,31 +1,32 @@
 import * as React from 'react';
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { Steps, StoryWright } from 'storywright';
 import { AvatarGroup, AvatarGroupItem, AvatarGroupPopover, partitionAvatarGroupItems } from '@fluentui/react-avatar';
 
 import { names } from './utils';
-import { DARK_MODE, HIGH_CONTRAST, getStoryVariant, TestWrapperDecorator } from '../../utilities';
+import { DARK_MODE, HIGH_CONTRAST, getStoryVariant } from '../../utilities';
 
 export default {
   title: 'AvatarGroup Converged',
   component: AvatarGroup,
   decorators: [
-    TestWrapperDecorator,
     story => (
       <StoryWright steps={new Steps().click('#show-overflow').snapshot('popoverContentOpen').end()}>
-        {story()}
+        <div style={{ display: 'flex' }}>
+          <div className="testWrapper" style={{ width: '100%', overflow: 'hidden' }}>
+            {story()}
+          </div>
+        </div>
       </StoryWright>
     ),
   ],
 } satisfies Meta<typeof AvatarGroup>;
 
-type Story = StoryFn<typeof AvatarGroup>;
-
-export const OverflowContent: Story = () => {
+export const OverflowContent = () => {
   const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: names });
 
   return (
-    <div style={{ padding: '10px' }}>
+    <div style={{ padding: '20px' }}>
       <AvatarGroup>
         {inlineItems.map(name => (
           <AvatarGroupItem key={name} name={name} />

apps/vr-tests-react-components/src/stories/AvatarGroup/utils.tsx

@@ -48,7 +48,7 @@ export const AvatarGroupList: React.FC<
   const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: names, layout: props.layout });
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', flexWrap: 'wrap', gap: '10px', padding: '10px' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', flexWrap: 'wrap', gap: '10px', padding: '20px' }}>
       {sizes.map(size => (
         <AvatarGroup key={size} size={size as AvatarGroupProps['size']} {...props}>
           {inlineItems.map(name => (

apps/vr-tests-react-components/src/stories/Badge/BadgeAppearance.stories.tsx

@@ -3,7 +3,7 @@ import { Badge, BadgeProps } from '@fluentui/react-badge';
 import { CircleRegular } from '@fluentui/react-icons';
 import { mergeClasses } from '@griffel/react';
 import { propValues, useStyles } from './utils';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, DARK_MODE, HIGH_CONTRAST } from '../../utilities';
 
 const BadgeAppearanceTemplate: React.FC<{ appearance: Required<BadgeProps>['appearance'] }> = ({ appearance }) => {
@@ -77,7 +77,7 @@ const BadgeAppearanceTemplate: React.FC<{ appearance: Required<BadgeProps>['appe
 
 export default {
   title: 'Badge Converged',
-} as ComponentMeta<typeof Badge>;
+} satisfies Meta<typeof Badge>;
 
 export const Filled = () => <BadgeAppearanceTemplate appearance={'filled'} />;
 

apps/vr-tests-react-components/src/stories/Badge/BadgeSize.stories.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Badge, BadgeProps } from '@fluentui/react-badge';
 import { CircleRegular } from '@fluentui/react-icons';
 import { propValues, useStyles } from './utils';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, RTL } from '../../utilities';
 
 const BadgeSampleRow: React.FC<BadgeProps> = props => {
@@ -35,7 +35,7 @@ const BadgeSampleRow: React.FC<BadgeProps> = props => {
 
 export default {
   title: 'Badge Converged',
-} as ComponentMeta<typeof Badge>;
+} satisfies Meta<typeof Badge>;
 
 export const SizeTiny = () => {
   const styles = useStyles();

apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { Breadcrumb } from '@fluentui/react-breadcrumb';
 import { SampleBreadcrumbButtons, steps } from './utils';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities';
 
 export default {
   title: 'Breadcrumb Converged',
   decorators: [story => withStoryWrightSteps({ story, steps })],
-} as ComponentMeta<typeof Breadcrumb>;
+} satisfies Meta<typeof Breadcrumb>;
 
 export const Appearance = () => (
   <>

apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react';
 import { Button } from '@fluentui/react-button';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
 import { buttonId, steps, useStyles } from './utils';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 export default {
   title: 'Button Converged',
-  Component: Button,
+  component: Button,
   decorators: [story => withStoryWrightSteps({ story, steps })],
-} as ComponentMeta<typeof Button>;
+} satisfies Meta<typeof Button>;
 
 export const Default = () => <Button id={buttonId}>Hello, world</Button>;