From 7f2dc781a6caf2f1faa270953d0f25513d194f82 Mon Sep 17 00:00:00 2001
From: Dmytro Kirpa <kirpadv@gmail.com>
Date: Wed, 3 Jul 2024 20:31:38 +0200
Subject: [PATCH 1/2] chore(vr-tests-v9): Convert Calendar VR tests to CSF

---
 .../src/stories/CalendarCompat.stories.tsx    | 65 +++++++++++--------
 1 file changed, 39 insertions(+), 26 deletions(-)

diff --git a/apps/vr-tests-react-components/src/stories/CalendarCompat.stories.tsx b/apps/vr-tests-react-components/src/stories/CalendarCompat.stories.tsx
index bdc461c3f61990..237087bccea065 100644
--- a/apps/vr-tests-react-components/src/stories/CalendarCompat.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/CalendarCompat.stories.tsx
@@ -1,38 +1,51 @@
 import * as React from 'react';
-import { storiesOf } from '@storybook/react';
-import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator';
+import type { Meta, StoryFn } from '@storybook/react';
 import { Steps, StoryWright } from 'storywright';
 import { Calendar as CalendarBase } from '@fluentui/react-calendar-compat';
 import { ArrowLeftRegular, ArrowRightRegular, DismissCircleRegular } from '@fluentui/react-icons';
 import type { CalendarProps } from '@fluentui/react-calendar-compat';
 
+import { getStoryVariant, RTL, TestWrapperDecorator } from '../utilities';
+
 const Calendar = (props: CalendarProps) => {
   const today = new Date('3/15/2023');
 
   return <CalendarBase today={today} {...props} />;
 };
 
-storiesOf('Calendar Compat', module)
-  .addDecorator(TestWrapperDecorator)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
-  ))
-  .addStory('Default', () => <Calendar />, { includeRtl: true })
-  .addStory('Custom icons', () => (
-    <Calendar
-      calendarDayProps={{
-        navigationIcons: {
-          upNavigation: <ArrowLeftRegular />,
-          downNavigation: <ArrowRightRegular />,
-          dismiss: <DismissCircleRegular />,
-        },
-      }}
-      calendarMonthProps={{
-        navigationIcons: {
-          upNavigation: <ArrowLeftRegular />,
-          downNavigation: <ArrowRightRegular />,
-          dismiss: <DismissCircleRegular />,
-        },
-      }}
-    />
-  ));
+export default {
+  title: 'Calendar Compat',
+  component: CalendarBase,
+  decorators: [
+    TestWrapperDecorator,
+    story => (
+      <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
+    ),
+  ],
+} as Meta<typeof CalendarBase>;
+
+type Story = StoryFn<typeof CalendarBase>;
+
+export const Default: Story = () => <Calendar />;
+
+export const CustomIcons: Story = () => (
+  <Calendar
+    calendarDayProps={{
+      navigationIcons: {
+        upNavigation: <ArrowLeftRegular />,
+        downNavigation: <ArrowRightRegular />,
+        dismiss: <DismissCircleRegular />,
+      },
+    }}
+    calendarMonthProps={{
+      navigationIcons: {
+        upNavigation: <ArrowLeftRegular />,
+        downNavigation: <ArrowRightRegular />,
+        dismiss: <DismissCircleRegular />,
+      },
+    }}
+  />
+);
+CustomIcons.storyName = 'Custom icons';
+
+export const CustomIconsRTL = getStoryVariant(CustomIcons, RTL);

From 5427031164dc60ec4f16fe1a56165e817a1c83ba Mon Sep 17 00:00:00 2001
From: Dmytro Kirpa <kirpadv@gmail.com>
Date: Thu, 4 Jul 2024 11:03:39 +0200
Subject: [PATCH 2/2] use satifisfies instead of as for typecasting

---
 .../src/stories/CalendarCompat.stories.tsx                     | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/vr-tests-react-components/src/stories/CalendarCompat.stories.tsx b/apps/vr-tests-react-components/src/stories/CalendarCompat.stories.tsx
index 237087bccea065..3c0fd36d2a7581 100644
--- a/apps/vr-tests-react-components/src/stories/CalendarCompat.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/CalendarCompat.stories.tsx
@@ -4,7 +4,6 @@ import { Steps, StoryWright } from 'storywright';
 import { Calendar as CalendarBase } from '@fluentui/react-calendar-compat';
 import { ArrowLeftRegular, ArrowRightRegular, DismissCircleRegular } from '@fluentui/react-icons';
 import type { CalendarProps } from '@fluentui/react-calendar-compat';
-
 import { getStoryVariant, RTL, TestWrapperDecorator } from '../utilities';
 
 const Calendar = (props: CalendarProps) => {
@@ -22,7 +21,7 @@ export default {
       <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
     ),
   ],
-} as Meta<typeof CalendarBase>;
+} satisfies Meta<typeof CalendarBase>;
 
 type Story = StoryFn<typeof CalendarBase>;