look for csf3 export if storiesOf import is not detected (#39)

canva-public · Aug 16, 2023 · a2ceee6 · a2ceee6
1 parent df8edbd
commit a2ceee6
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 6 deletions.
diff --git a/__tests__/fixtures/feature-storybook-ref/b.stories.tsx b/__tests__/fixtures/feature-storybook-ref/b.stories.tsx
@@ -1,6 +1,5 @@
 // Copyright 2021 Canva Inc. All Rights Reserved.
 
-import { storiesOf } from "@storybook/react";
 import * as React from "react";
 
 export default {

diff --git a/__tests__/fixtures/feature-storybook-ref/c.stories.tsx b/__tests__/fixtures/feature-storybook-ref/c.stories.tsx
@@ -1,6 +1,6 @@
 // Copyright 2021 Canva Inc. All Rights Reserved.
 
-import { storiesOf, type Meta } from "@storybook/react";
+import { type Meta } from "@storybook/react";
 import * as React from "react";
 
 export default {

diff --git a/__tests__/fixtures/feature-storybook-ref/d_e.stories.tsx b/__tests__/fixtures/feature-storybook-ref/d_e.stories.tsx
@@ -1,6 +1,6 @@
 // Copyright 2021 Canva Inc. All Rights Reserved.
 
-import { storiesOf, type Meta } from "@storybook/react";
+import { type Meta } from "@storybook/react";
 import * as React from "react";
 
 export default {

diff --git a/src/processors/feature.ts b/src/processors/feature.ts
@@ -88,6 +88,8 @@ export class FeatureFileProcessor extends TypeScriptFileProcessor {
 
     const walkTree = (node: ts.Node): void => {
       if (
+        // storiesOf syntax is used
+        importFound &&
         ts.isCallExpression(node) &&
         FeatureFileProcessor.isStoriesOf(node.expression)
       ) {
@@ -102,7 +104,8 @@ export class FeatureFileProcessor extends TypeScriptFileProcessor {
         return;
       }
 
-      if (ts.isExportAssignment(node)) {
+      // no storiesOf syntax found, csf3 is assumed
+      if (!importFound && ts.isExportAssignment(node)) {
         let { expression } = node;
         if (
           ts.isAsExpression(expression) ||
@@ -136,8 +139,7 @@ export class FeatureFileProcessor extends TypeScriptFileProcessor {
       // Look for stories import first
       if (!importFound && FeatureFileProcessor.isStoriesImport(node)) {
         importFound = true;
-      } else if (importFound && !ts.isImportDeclaration(node)) {
-        // Look for `storiesOf` calls only if there was import
+      } else if (!ts.isImportDeclaration(node)) {
         walkTree(node);
       }
     };