feat(storybook): ignore paths when generating stories (nrwl#11111)

* feat(storybook): ignore paths when generating stories ISSUES CLOSED: nrwl#10211 * cleanup(storybook): add test for nested component ignore path * feat(storybook): ensure ignore paths parsed correctly Co-authored-by: Colum Ferry <[email protected]>
marekbrze · Aug 8, 2022 · 8bc9940 · 8bc9940
1 parent d1af72d
commit 8bc9940
Show file tree

Hide file tree

Showing 32 changed files with 845 additions and 29 deletions.
diff --git a/docs/generated/packages/angular.json b/docs/generated/packages/angular.json
@@ -1896,6 +1896,18 @@
             "description": "Skip formatting files.",
             "type": "boolean",
             "default": false
+          },
+          "ignorePaths": {
+            "type": "array",
+            "description": "Paths to ignore when looking for components.",
+            "items": { "type": "string", "description": "Path to ignore." },
+            "examples": [
+              "apps/my-app/src/not-stories/**",
+              "**/**/src/**/not-stories/**",
+              "libs/my-lib/**/*.something.ts",
+              "**/**/src/**/*.other.*",
+              "libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts"
+            ]
           }
         },
         "additionalProperties": false,
@@ -1964,6 +1976,18 @@
             "description": "Skip formatting files.",
             "type": "boolean",
             "default": false
+          },
+          "ignorePaths": {
+            "type": "array",
+            "description": "Paths to ignore when looking for components.",
+            "items": { "type": "string", "description": "Path to ignore." },
+            "examples": [
+              "apps/my-app/src/not-stories/**",
+              "**/**/src/**/not-stories/**",
+              "libs/my-lib/**/*.something.ts",
+              "**/**/src/**/*.other.*",
+              "libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts"
+            ]
           }
         },
         "additionalProperties": false,

diff --git a/docs/generated/packages/react-native.json b/docs/generated/packages/react-native.json
@@ -380,6 +380,18 @@
           "standaloneConfig": {
             "description": "Split the project configuration into `<projectRoot>/project.json` rather than including it inside `workspace.json`.",
             "type": "boolean"
+          },
+          "ignorePaths": {
+            "type": "array",
+            "description": "Paths to ignore when looking for components.",
+            "items": { "type": "string", "description": "Path to ignore." },
+            "examples": [
+              "apps/my-app/src/not-stories/**",
+              "**/**/src/**/not-stories/**",
+              "libs/my-lib/**/*.something.ts",
+              "**/**/src/**/*.other.*",
+              "libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts"
+            ]
           }
         },
         "required": ["name"],
@@ -443,6 +455,18 @@
             "description": "Project for which to generate stories.",
             "$default": { "$source": "projectName", "index": 0 },
             "x-prompt": "For which project do you want to generate stories?"
+          },
+          "ignorePaths": {
+            "type": "array",
+            "description": "Paths to ignore when looking for components.",
+            "items": { "type": "string", "description": "Path to ignore." },
+            "examples": [
+              "apps/my-app/src/not-stories/**",
+              "**/**/src/**/not-stories/**",
+              "libs/my-lib/**/*.something.ts",
+              "**/**/src/**/*.other.*",
+              "libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts"
+            ]
           }
         },
         "required": ["project"],

diff --git a/docs/generated/packages/react.json b/docs/generated/packages/react.json
@@ -650,6 +650,18 @@
           "standaloneConfig": {
             "description": "Split the project configuration into `<projectRoot>/project.json` rather than including it inside `workspace.json`.",
             "type": "boolean"
+          },
+          "ignorePaths": {
+            "type": "array",
+            "description": "Paths to ignore when looking for components.",
+            "items": { "type": "string", "description": "Path to ignore." },
+            "examples": [
+              "apps/my-app/src/not-stories/**",
+              "**/**/src/**/not-stories/**",
+              "libs/my-lib/**/*.something.ts",
+              "**/**/src/**/*.other.*",
+              "libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts"
+            ]
           }
         },
         "required": ["name"],
@@ -727,6 +739,18 @@
             "type": "boolean",
             "description": "Generate JavaScript files rather than TypeScript files.",
             "default": false
+          },
+          "ignorePaths": {
+            "type": "array",
+            "description": "Paths to ignore when looking for components.",
+            "items": { "type": "string", "description": "Path to ignore." },
+            "examples": [
+              "apps/my-app/src/not-stories/**",
+              "**/**/src/**/not-stories/**",
+              "libs/my-lib/**/*.something.ts",
+              "**/**/src/**/*.other.*",
+              "libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts"
+            ]
           }
         },
         "required": ["project"],

diff --git a/packages/angular/ng-package.json b/packages/angular/ng-package.json
@@ -13,6 +13,7 @@
     "chokidar",
     "ignore",
     "jasmine-marbles",
+    "minimatch",
     "rxjs-for-await",
     "webpack-merge",
     "ts-node",

diff --git a/packages/angular/package.json b/packages/angular/package.json
@@ -53,6 +53,7 @@
     "ignore": "^5.0.4",
     "jasmine-marbles": "~0.8.4",
     "magic-string": "~0.26.2",
+    "minimatch": "3.0.5",
     "semver": "7.3.4",
     "ts-node": "10.9.1",
     "tsconfig-paths": "^3.9.0",

diff --git a/packages/angular/src/generators/stories/__snapshots__/stories-lib.spec.ts.snap b/packages/angular/src/generators/stories/__snapshots__/stories-lib.spec.ts.snap
@@ -76,6 +76,34 @@ const Template: Story<TestButtonComponent> = (args: TestButtonComponent) => ({
 });
 
 
+export const Primary = Template.bind({});
+Primary.args = {
+    buttonType:  'button',
+    style:  'default',
+    age:  0,
+    isOn:  false,
+}"
+`;
+
+exports[`angularStories generator: libraries Stories for non-empty Angular library should ignore paths 1`] = `
+"import { moduleMetadata, Story, Meta } from '@storybook/angular';
+import { TestButtonComponent } from './test-button.component';
+
+export default {
+  title: 'TestButtonComponent',
+  component: TestButtonComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [],
+    })
+  ],
+} as Meta<TestButtonComponent>;
+
+const Template: Story<TestButtonComponent> = (args: TestButtonComponent) => ({
+  props: args,
+});
+
+
 export const Primary = Template.bind({});
 Primary.args = {
     buttonType:  'button',

diff --git a/packages/angular/src/generators/stories/schema.d.ts b/packages/angular/src/generators/stories/schema.d.ts
@@ -3,4 +3,5 @@ export interface StoriesGeneratorOptions {
   cypressProject?: string;
   generateCypressSpecs?: boolean;
   skipFormat?: boolean;
+  ignorePaths?: string[];
 }
diff --git a/packages/angular/src/generators/stories/schema.json b/packages/angular/src/generators/stories/schema.json
@@ -30,6 +30,21 @@
       "description": "Skip formatting files.",
       "type": "boolean",
       "default": false
+    },
+    "ignorePaths": {
+      "type": "array",
+      "description": "Paths to ignore when looking for components.",
+      "items": {
+        "type": "string",
+        "description": "Path to ignore."
+      },
+      "examples": [
+        "apps/my-app/src/not-stories/**",
+        "**/**/src/**/not-stories/**",
+        "libs/my-lib/**/*.something.ts",
+        "**/**/src/**/*.other.*",
+        "libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts"
+      ]
     }
   },
   "additionalProperties": false,

diff --git a/packages/angular/src/generators/stories/stories-app.spec.ts b/packages/angular/src/generators/stories/stories-app.spec.ts
@@ -3,7 +3,9 @@ import type { Tree } from '@nrwl/devkit';
 import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
 import { applicationGenerator } from '../application/application';
 import { scamGenerator } from '../scam/scam';
+import { componentGenerator } from '../component/component';
 import { angularStoriesGenerator } from './stories';
+
 // need to mock cypress otherwise it'll use the nx installed version from package.json
 //  which is v9 while we are testing for the new v10 version
 jest.mock('@nrwl/cypress/src/utils/cypress-version');
@@ -42,6 +44,62 @@ describe('angularStories generator: applications', () => {
     ).toBeTruthy();
   });
 
+  it('should ignore paths', async () => {
+    await scamGenerator(tree, { name: 'my-scam', project: appName });
+
+    angularStoriesGenerator(tree, {
+      name: appName,
+      ignorePaths: [`apps/${appName}/src/app/my-scam/**`],
+    });
+
+    expect(
+      tree.exists(
+        `apps/${appName}/src/app/my-scam/my-scam.component.stories.ts`
+      )
+    ).toBeFalsy();
+  });
+
+  it('should ignore paths when full path to component is provided', async () => {
+    await scamGenerator(tree, { name: 'my-scam', project: appName });
+
+    angularStoriesGenerator(tree, {
+      name: appName,
+      ignorePaths: [`apps/${appName}/src/app/my-scam/my-scam.component.ts`],
+    });
+
+    expect(
+      tree.exists(
+        `apps/${appName}/src/app/my-scam/my-scam.component.stories.ts`
+      )
+    ).toBeFalsy();
+  });
+
+  it('should ignore a path that has a nested component, but still generate nested component stories', async () => {
+    await componentGenerator(tree, { name: 'component-a', project: appName });
+    await componentGenerator(tree, {
+      name: 'component-a/component-b',
+      project: appName,
+    });
+
+    angularStoriesGenerator(tree, {
+      name: appName,
+      ignorePaths: [
+        `apps/${appName}/src/app/component-a/component-a.component.ts`,
+      ],
+    });
+
+    expect(
+      tree.exists(
+        `apps/${appName}/src/app/component-a/component-b/component-b.component.stories.ts`
+      )
+    ).toBeTruthy();
+    expect(
+      tree.exists(
+        `apps/${appName}/src/app/component-a/component-a.component.stories.ts`
+      )
+    ).toBeFalsy();
+  });
+
   it('should generate stories file for inline scam component', async () => {
     await scamGenerator(tree, {
       name: 'my-scam',

diff --git a/packages/angular/src/generators/stories/stories-lib.spec.ts b/packages/angular/src/generators/stories/stories-lib.spec.ts
@@ -333,5 +333,60 @@ describe('angularStories generator: libraries', () => {
         )
       ).toMatchSnapshot();
     });
+
+    it('should ignore paths', async () => {
+      // add secondary entrypoint
+      writeJson(tree, `libs/${libName}/package.json`, { name: libName });
+      await librarySecondaryEntryPointGenerator(tree, {
+        library: libName,
+        name: 'secondary-entry-point',
+      });
+      // add a standalone component to the secondary entrypoint
+      await componentGenerator(tree, {
+        name: 'secondary-button',
+        project: libName,
+        path: `libs/${libName}/secondary-entry-point/src/lib`,
+      });
+
+      angularStoriesGenerator(tree, {
+        name: libName,
+        ignorePaths: [
+          `libs/${libName}/src/lib/barrel/**`,
+          `libs/${libName}/secondary-entry-point/**`,
+        ],
+      });
+
+      expect(
+        tree.exists(
+          `libs/${libName}/src/lib/barrel/barrel-button/barrel-button.component.stories.ts`
+        )
+      ).toBeFalsy();
+      expect(
+        tree.exists(
+          `libs/${libName}/src/lib/nested/nested-button/nested-button.component.stories.ts`
+        )
+      ).toBeTruthy();
+      expect(
+        tree.exists(
+          `libs/${libName}/src/lib/test-button/test-button.component.stories.ts`
+        )
+      ).toBeTruthy();
+      expect(
+        tree.exists(
+          `libs/${libName}/src/lib/test-other/test-other.component.stories.ts`
+        )
+      ).toBeTruthy();
+      expect(
+        tree.read(
+          `libs/${libName}/src/lib/test-button/test-button.component.stories.ts`,
+          'utf-8'
+        )
+      ).toMatchSnapshot();
+      expect(
+        tree.exists(
+          `libs/${libName}/secondary-entry-point/src/lib/secondary-button/secondary-button.component.stories.ts`
+        )
+      ).toBeFalsy();
+    });
   });
 });