default-exports: Support CSF4 style meta

storybookjs · Jan 10, 2025 · 1af857a · 1af857a
1 parent d8acf1f
commit 1af857a
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/lib/rules/default-exports.ts b/lib/rules/default-exports.ts
@@ -62,6 +62,7 @@ export = createStorybookRule({
     //----------------------------------------------------------------------
 
     let hasDefaultExport = false
+    let isCsf4Style = false
     let hasStoriesOfImport = false
 
     return {
@@ -70,14 +71,35 @@ export = createStorybookRule({
           hasStoriesOfImport = true
         }
       },
+      VariableDeclaration(node) {
+        // we check for variables declared at the root in a CSF4 style
+        // e.g. const meta = config.meta({})
+        if (node.parent.type === 'Program') {
+          node.declarations.forEach((declaration) => {
+            const init = declaration.init
+
+            if (init && init.type === 'CallExpression') {
+              const callee = init.callee
+
+              if (
+                callee.type === 'MemberExpression' &&
+                callee.property.type === 'Identifier' &&
+                callee.property.name === 'meta'
+              ) {
+                isCsf4Style = true
+              }
+            }
+          })
+        }
+      },
       ExportDefaultSpecifier: function () {
         hasDefaultExport = true
       },
       ExportDefaultDeclaration: function () {
         hasDefaultExport = true
       },
       'Program:exit': function (program: TSESTree.Program) {
-        if (!hasDefaultExport && !hasStoriesOfImport) {
+        if (!isCsf4Style && !hasDefaultExport && !hasStoriesOfImport) {
           const componentName = getComponentName(program, context.getFilename())
           const firstNonImportStatement = program.body.find((n) => !isImportDeclaration(n))
           const node = firstNonImportStatement || program.body[0] || program

diff --git a/tests/lib/rules/default-exports.test.ts b/tests/lib/rules/default-exports.test.ts
@@ -26,8 +26,12 @@ ruleTester.run('default-exports', rule, {
       export default meta
     `,
     `
-      const meta: ComponentMeta<typeof Button> = { title: 'Button', component: Button }
-      export default meta
+    const meta: ComponentMeta<typeof Button> = { title: 'Button', component: Button }
+    export default meta
+    `,
+    `
+      import { config } from '#.storybook/preview'
+      const meta = config.meta({})
     `,
     `
       import { storiesOf } from '@storybook/react'