diff --git a/code/lib/csf-tools/src/getStorySortParameter.test.ts b/code/lib/csf-tools/src/getStorySortParameter.test.ts index fe4c96b3b7b..d62c21cc985 100644 --- 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: - }, - }, - };" - `); + ).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: }, @@ -233,7 +223,7 @@ describe('getStorySortParameter', () => { "Unexpected 'storySort'. Parameter 'options.storySort' should be defined inline e.g.: export default { - parameters = { + parameters: { options: { storySort: }, @@ -260,7 +250,7 @@ describe('getStorySortParameter', () => { "Unexpected 'order'. Parameter 'options.storySort' should be defined inline e.g.: export default { - parameters = { + parameters: { options: { storySort: }, @@ -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 index d31d9061ebb..4b7b3197fc9 100644 --- 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: }, @@ -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); }