fix(vr-tests-react-components): migrate to new StoryWright api to def…

…ine Steps to resolve VR snapshoting issues

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

@@ -4,6 +4,7 @@ import { CircleRegular } from '@fluentui/react-icons';
 import { propValues, useStyles } from './utils';
 import type { Meta } from '@storybook/react';
 import { getStoryVariant, RTL } from '../../utilities';
+import { Steps, type StoryParameter } from 'storywright';
 
 const BadgeSampleRow: React.FC<BadgeProps> = props => {
   const styles = useStyles();
@@ -35,6 +36,7 @@ const BadgeSampleRow: React.FC<BadgeProps> = props => {
 
 export default {
   title: 'Badge Converged',
+  parameters: { storyWright: { steps: new Steps().snapshot('normal').end() } } satisfies StoryParameter,
 } satisfies Meta<typeof Badge>;
 
 export const SizeTiny = () => {

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

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

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

@@ -2,15 +2,16 @@ import * as React from 'react';
 import { CompoundButton } from '@fluentui/react-button';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
 import type { Meta } from '@storybook/react';
-import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
+import { getStoryVariant, RTL } from '../../utilities';
 import { buttonId, steps, useStyles } from './utils';
+import type { StoryParameter } from 'storywright';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 export default {
   title: 'CompoundButton Converged',
   component: CompoundButton,
-  decorators: [story => withStoryWrightSteps({ story, steps })],
+  parameters: { storyWright: { steps } } satisfies StoryParameter,
 } satisfies Meta<typeof CompoundButton>;
 
 export const Outline = () => (

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Steps } from 'storywright';
+import { Steps, type StoryParameter } from 'storywright';
 import { CompoundButton } from '@fluentui/react-button';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
 import type { Meta } from '@storybook/react';
-import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
+import { getStoryVariant, RTL } from '../../utilities';
 import { buttonId } from './utils';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
@@ -20,7 +20,7 @@ const steps = new Steps()
 export default {
   title: 'CompoundButton Converged',
   component: CompoundButton,
-  decorators: [story => withStoryWrightSteps({ story, steps })],
+  parameters: { storyWright: { steps } } satisfies StoryParameter,
 } satisfies Meta<typeof CompoundButton>;
 
 export const Default = () => (

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

@@ -2,15 +2,16 @@ import * as React from 'react';
 import { MenuButton } from '@fluentui/react-button';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
 import type { Meta } from '@storybook/react';
-import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
+import { getStoryVariant, RTL } from '../../utilities';
 import { buttonId, steps, useStyles } from './utils';
+import type { StoryParameter } from 'storywright';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 export default {
   title: 'MenuButton Converged',
   component: MenuButton,
-  decorators: [story => withStoryWrightSteps({ story, steps })],
+  parameters: { storyWright: { steps } } satisfies StoryParameter,
 } satisfies Meta<typeof MenuButton>;
 
 export const Default = () => <MenuButton id={buttonId}>Hello, world</MenuButton>;

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

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

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

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
+import { Steps, type StoryParameter } from 'storywright';
 import { Card, CardHeader, CardPreview } from '@fluentui/react-card';
 import { MoreHorizontal24Filled, MoreHorizontal20Filled } from '@fluentui/react-icons';
 import { Body1, Caption1, Text } from '@fluentui/react-text';
@@ -15,13 +15,14 @@ export default {
 
   decorators: [
     story => (
-      <StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
-        <div className="testWrapper" style={{ width: '600px' }}>
-          {story()}
-        </div>
-      </StoryWright>
+      <div className="testWrapper" style={{ width: '600px' }}>
+        {story()}
+      </div>
     ),
   ],
+  parameters: {
+    storyWright: { steps: new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end() },
+  } satisfies StoryParameter,
 } satisfies Meta<typeof Card>;
 
 export const CardTemplates = () => (

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

@@ -10,10 +10,14 @@ import type {
 } from '@fluentui/react-button';
 import { FluentProvider, FluentProviderCustomStyleHooks } from '@fluentui/react-provider';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { type StoryParameter, Steps } from 'storywright';
 
 export default {
   title: 'FluentProvider CustomStyleHooks',
   component: FluentProvider,
+  parameters: {
+    storyWright: { steps: new Steps().snapshot('normal').end() },
+  } satisfies StoryParameter,
 } satisfies Meta<typeof FluentProvider>;
 
 export const Default = () => <FluentProvider>Hello, world</FluentProvider>;

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

@@ -1,17 +1,10 @@
 import * as React from 'react';
 import type { Meta } from '@storybook/react';
 import { ProgressBar } from '@fluentui/react-progress';
-import { Steps } from 'storywright';
+import { Steps, type StoryParameter } from 'storywright';
 import { makeStyles } from '@griffel/react';
 
-import {
-  getStoryVariant,
-  withStoryWrightSteps,
-  TestWrapperDecoratorFixedWidth,
-  DARK_MODE,
-  HIGH_CONTRAST,
-  RTL,
-} from '../utilities';
+import { getStoryVariant, TestWrapperDecoratorFixedWidth, DARK_MODE, HIGH_CONTRAST, RTL } from '../utilities';
 
 const useStyles = makeStyles({
   paused: {
@@ -25,10 +18,10 @@ const useStyles = makeStyles({
 export default {
   title: 'ProgressBar converged',
 
-  decorators: [
-    TestWrapperDecoratorFixedWidth,
-    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
-  ],
+  decorators: [TestWrapperDecoratorFixedWidth],
+  parameters: {
+    storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() },
+  } satisfies StoryParameter,
 } satisfies Meta<typeof ProgressBar>;
 
 export const IndeterminateThickness = () => (

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

@@ -1,17 +1,10 @@
 import * as React from 'react';
 import type { Meta } from '@storybook/react';
 import { Skeleton, SkeletonItem } from '@fluentui/react-skeleton';
-import { Steps } from 'storywright';
+import { Steps, type StoryParameter } from 'storywright';
 import { makeStyles } from '@griffel/react';
 
-import {
-  getStoryVariant,
-  withStoryWrightSteps,
-  TestWrapperDecoratorFixedWidth,
-  HIGH_CONTRAST,
-  DARK_MODE,
-  RTL,
-} from '../utilities';
+import { getStoryVariant, TestWrapperDecoratorFixedWidth, HIGH_CONTRAST, DARK_MODE, RTL } from '../utilities';
 
 const useStyles = makeStyles({
   paused: {
@@ -25,10 +18,10 @@ const useStyles = makeStyles({
 export default {
   title: 'Skeleton converged',
 
-  decorators: [
-    TestWrapperDecoratorFixedWidth,
-    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
-  ],
+  decorators: [TestWrapperDecoratorFixedWidth],
+  parameters: {
+    storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() },
+  } satisfies StoryParameter,
 } satisfies Meta<typeof Skeleton>;
 
 export const OpaqueSkeletonWithRectangle = () => (

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

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import type { Meta } from '@storybook/react';
-import { Steps } from 'storywright';
+import { Steps, type StoryParameter } from 'storywright';
 import { Slider } from '@fluentui/react-slider';
-import { getStoryVariant, RTL, TestWrapperDecorator, withStoryWrightSteps } from '../../utilities';
+import { getStoryVariant, RTL, TestWrapperDecorator } from '../../utilities';
 import { SampleCustomizedSlider } from './utils';
 
 export default {
   title: 'Slider Converged',
-  decorators: [
-    TestWrapperDecorator,
-    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
-  ],
+  decorators: [TestWrapperDecorator],
+  parameters: {
+    storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() },
+  } satisfies StoryParameter,
 } satisfies Meta<typeof Slider>;
 
 export const Horizontal0 = () => <Slider defaultValue={0} />;

apps/vr-tests-react-components/src/stories/Slider/SliderInteractions.stories.tsx

@@ -1,33 +1,24 @@
 import * as React from 'react';
 import type { Meta } from '@storybook/react';
-import { Steps } from 'storywright';
+import { Steps, type StoryParameter } from 'storywright';
 import { Slider } from '@fluentui/react-slider';
-import {
-  DARK_MODE,
-  getStoryVariant,
-  HIGH_CONTRAST,
-  RTL,
-  TestWrapperDecorator,
-  withStoryWrightSteps,
-} from '../../utilities';
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, TestWrapperDecorator } from '../../utilities';
 
 export default {
   title: 'Slider Converged',
-  decorators: [
-    TestWrapperDecorator,
-    story =>
-      withStoryWrightSteps({
-        story,
-        steps: new Steps()
-          .snapshot('default', { cropTo: '.testWrapper' })
-          .hover('.test-class')
-          .snapshot('hover', { cropTo: '.testWrapper' })
-          .mouseDown('.test-class')
-          .snapshot('pressed', { cropTo: '.testWrapper' })
-          .mouseUp('.test-class')
-          .end(),
-      }),
-  ],
+  decorators: [TestWrapperDecorator],
+  parameters: {
+    storyWright: {
+      steps: new Steps()
+        .snapshot('default', { cropTo: '.testWrapper' })
+        .hover('.test-class')
+        .snapshot('hover', { cropTo: '.testWrapper' })
+        .mouseDown('.test-class')
+        .snapshot('pressed', { cropTo: '.testWrapper' })
+        .mouseUp('.test-class')
+        .end(),
+    },
+  } satisfies StoryParameter,
 } satisfies Meta<typeof Slider>;
 
 export const Root = () => <Slider className="test-class" defaultValue={30} />;

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

@@ -1,25 +1,18 @@
 import * as React from 'react';
 import type { Meta } from '@storybook/react';
-import { Steps } from 'storywright';
+import { Steps, type StoryParameter } from 'storywright';
 import { SpinButton } from '@fluentui/react-spinbutton';
 import { FluentProvider } from '@fluentui/react-provider';
 import { makeStyles } from '@griffel/react';
 
-import {
-  DARK_MODE,
-  getStoryVariant,
-  HIGH_CONTRAST,
-  RTL,
-  TestWrapperDecoratorFixedWidth,
-  withStoryWrightSteps,
-} from '../../utilities';
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, TestWrapperDecoratorFixedWidth } from '../../utilities';
 
 export default {
   title: 'SpinButton Converged',
-  decorators: [
-    TestWrapperDecoratorFixedWidth,
-    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
-  ],
+  decorators: [TestWrapperDecoratorFixedWidth],
+  parameters: {
+    storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() },
+  } satisfies StoryParameter,
 } satisfies Meta<typeof SpinButton>;
 
 export const SizeSmall = () => <SpinButton size="small" value={10} />;