Merge pull request #21481 from storybookjs/shilman/21455-fix-storysor…

…t-extraction Story Index: Fix storySort parsing for parameters variable
storybookjs · Mar 8, 2023 · ebd0128 · ebd0128
2 parents 5854ef3 + 70ba5e2
commit ebd0128
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 20 deletions.
diff --git a/code/lib/csf-tools/src/getStorySortParameter.test.ts b/code/lib/csf-tools/src/getStorySortParameter.test.ts
@@ -154,21 +154,11 @@ describe('getStorySortParameter', () => {
 
     describe('unsupported', () => {
       it('invalid parameters', () => {
-        expect(() =>
+        expect(
           getStorySortParameter(dedent`
           export const parameters = [];
         `)
-        ).toThrowErrorMatchingInlineSnapshot(`
-          "Unexpected 'parameters'. Parameter 'options.storySort' should be defined inline e.g.:
-
-          export default {
-            parameters = {
-              options: {
-                storySort: <array | object | function>
-              },
-            },
-          };"
-        `);
+        ).toBeUndefined();
       });
 
       it('parameters var', () => {
@@ -206,7 +196,7 @@ describe('getStorySortParameter', () => {
           "Unexpected 'options'. Parameter 'options.storySort' should be defined inline e.g.:
 
           export default {
-            parameters = {
+            parameters: {
               options: {
                 storySort: <array | object | function>
               },
@@ -233,7 +223,7 @@ describe('getStorySortParameter', () => {
           "Unexpected 'storySort'. Parameter 'options.storySort' should be defined inline e.g.:
 
           export default {
-            parameters = {
+            parameters: {
               options: {
                 storySort: <array | object | function>
               },
@@ -260,7 +250,7 @@ describe('getStorySortParameter', () => {
           "Unexpected 'order'. Parameter 'options.storySort' should be defined inline e.g.:
 
           export default {
-            parameters = {
+            parameters: {
               options: {
                 storySort: <array | object | function>
               },
@@ -315,6 +305,54 @@ describe('getStorySortParameter', () => {
         ).toBeUndefined();
       });
 
+      it('variable parameters without storysort', () => {
+        expect(
+          getStorySortParameter(dedent`
+          const parameters = {
+            actions: { argTypesRegex: '^on[A-Z].*' },
+            controls: {
+              matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/,
+              },
+            },
+          };
+
+          const preview = {
+            parameters,
+          };
+          export default preview;
+        `)
+        ).toBeUndefined();
+      });
+
+      it('variable parameters with storysort', () => {
+        expect(
+          getStorySortParameter(dedent`
+          const parameters = {
+            options: {
+              storySort: [
+                "Intro",
+                "*",
+                "WIP",    
+              ]
+            }
+          };
+
+          const preview = {
+            parameters,
+          };
+          export default preview;
+        `)
+        ).toMatchInlineSnapshot(`
+        Array [
+          "Intro",
+          "*",
+          "WIP",
+        ]
+      `);
+      });
+
       it('inline typescript', () => {
         expect(
           getStorySortParameter(dedent`

diff --git a/code/lib/csf-tools/src/getStorySortParameter.ts b/code/lib/csf-tools/src/getStorySortParameter.ts
@@ -48,7 +48,7 @@ const unsupported = (unexpectedVar: string, isError: boolean) => {
     Unexpected '${unexpectedVar}'. Parameter 'options.storySort' should be defined inline e.g.:
 
     export default {
-      parameters = {
+      parameters: {
         options: {
           storySort: <array | object | function>
         },
@@ -76,15 +76,18 @@ const parseParameters = (params: t.Expression): t.Expression | undefined => {
       unsupported('options', true);
     }
   } else {
-    unsupported('parameters', true);
+    console.log({ paramsObject });
   }
   return undefined;
 };
 
-const parseDefault = (defaultExpr: t.Expression): t.Expression | undefined => {
+const parseDefault = (defaultExpr: t.Expression, program: t.Program): t.Expression | undefined => {
   const defaultObj = stripTSModifiers(defaultExpr);
   if (t.isObjectExpression(defaultObj)) {
-    const params = getValue(defaultObj, 'parameters');
+    let params = getValue(defaultObj, 'parameters');
+    if (t.isIdentifier(params)) {
+      params = findVarInitialization(params.name, program);
+    }
     if (params) {
       return parseParameters(params);
     }
@@ -127,7 +130,7 @@ export const getStorySortParameter = (previewCode: string) => {
         }
         defaultObj = stripTSModifiers(defaultObj);
         if (t.isObjectExpression(defaultObj)) {
-          storySort = parseDefault(defaultObj);
+          storySort = parseDefault(defaultObj, ast.program);
         } else {
           unsupported('default', false);
         }