feat(vr-tests-rc): support both CSF2 and CSF3 for story variant creation

microsoft · Feb 20, 2025 · 4a90a20 · 4a90a20
1 parent 676abfe
commit 4a90a20
Showing 1 changed file with 7 additions and 3 deletions.
diff --git a/apps/vr-tests-react-components/src/utilities/getStoryVariant.tsx b/apps/vr-tests-react-components/src/utilities/getStoryVariant.tsx
@@ -9,15 +9,19 @@ export const RTL = 'RTL';
 
 type StoryVariant = typeof DARK_MODE | typeof HIGH_CONTRAST | typeof RTL;
 
+function isStoryFn(story: StoryFn | StoryObj): story is StoryFn {
+  return typeof story === 'function';
+}
+
 /** Helper function that returns RTL, Dark Mode or High Contrast variant of an existing story. */
-export function getStoryVariant(story: StoryFn, variant: StoryVariant) {
+export function getStoryVariant(story: StoryFn | StoryObj, variant: StoryVariant): StoryObj {
   const theme = getTheme(variant);
   const dir = getDir(variant);
   const decorators = story.decorators ?? [];
 
   return {
     ...story,
-    render: story,
+    render: isStoryFn(story) ? story : story.render,
     storyName: `${getStoryName(story)} - ${variant}`,
     parameters: {
       ...story.parameters,
@@ -52,6 +56,6 @@ function getDir(variant: StoryVariant) {
   return variant === RTL ? 'rtl' : 'ltr';
 }
 
-function getStoryName<TArgs = Args>({ name, storyName }: StoryFn<TArgs>) {
+function getStoryName<TArgs = Args>({ name, storyName }: StoryFn<TArgs> | StoryObj<TArgs>) {
   return storyName ?? name?.replace(/([a-z])([A-Z])/g, '$1 $2');
 }