Merge pull request #187 from storybookjs/feat/support-csf4-style-in-default-exports-rule

default-exports: Support CSF factory style meta

Author: yannbf

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

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'