feat(qwik-nx): storybook generator (#110)

* feat(qwik-nx): storybook generator

* refactor: cleanup storybook config

* test(qwik-nx): tests for storybook

Author: dmitry-stepanenko

e2e/qwik-nx-e2e/tests/storybook.spec.ts

@@ -0,0 +1,113 @@
+import {
+  checkFilesExist,
+  ensureNxProject,
+  runNxCommandAsync,
+  uniq,
+} from '@nrwl/nx-plugin/testing';
+
+import {
+  runCommandUntil,
+  promisifiedTreeKill,
+  killPort,
+  killPorts,
+} from '@qwikifiers/e2e/utils';
+
+const STORYBOOK_PORT = 4400;
+
+describe('qwikNxVite plugin e2e', () => {
+  beforeAll(async () => {
+    await killPorts(STORYBOOK_PORT);
+    ensureNxProject('qwik-nx', 'dist/packages/qwik-nx');
+  }, 10000);
+
+  afterAll(async () => {
+    // `nx reset` kills the daemon, and performs
+    // some work which can help clean up e2e leftovers
+    await runNxCommandAsync('reset');
+  });
+
+  describe('should be able to import components from libraries', () => {
+    const appProject = uniq('qwik-nx');
+    const libProject = uniq('qwik-nx');
+    const secondLibProject = uniq('qwik-nx');
+    beforeAll(async () => {
+      await runNxCommandAsync(
+        `generate qwik-nx:app ${appProject} --e2eTestRunner=none --no-interactive`
+      );
+      await runNxCommandAsync(
+        `generate qwik-nx:library ${libProject} --no-interactive`
+      );
+      await runNxCommandAsync(
+        `generate qwik-nx:storybook-configuration ${appProject} --no-interactive`
+      );
+      await runNxCommandAsync(
+        `generate qwik-nx:storybook-configuration ${libProject} --no-interactive`
+      );
+    }, 200000);
+
+    describe('Applying storybook for existing application', () => {
+      checkStorybookIsBuiltAndServed(appProject, 'apps', false);
+    });
+    describe('Applying storybook for existing library', () => {
+      checkStorybookIsBuiltAndServed(libProject, 'libs', false);
+    });
+
+    describe('Generating a new library with storybook configuration', () => {
+      beforeAll(async () => {
+        await runNxCommandAsync(
+          `generate qwik-nx:library ${secondLibProject} --storybookConfiguration=true --no-interactive`
+        );
+      }, 200000);
+      checkStorybookIsBuiltAndServed(secondLibProject, 'libs', true);
+    });
+  });
+});
+
+function checkStorybookIsBuiltAndServed(
+  projectName: string,
+  type: 'apps' | 'libs',
+  hasTsStories: boolean
+) {
+  it(`should be able to build storybook for the "${projectName}"`, async () => {
+    const result = await runNxCommandAsync(`build-storybook ${projectName}`);
+    expect(result.stdout).toContain(
+      `Successfully ran target build-storybook for project ${projectName}`
+    );
+    expect(() =>
+      checkFilesExist(`dist/storybook/${projectName}/index.html`)
+    ).not.toThrow();
+  }, 200000);
+
+  it(`should serve storybook for the "${projectName}"`, async () => {
+    let resultOutput: string | undefined;
+    const p = await runCommandUntil(
+      `run ${projectName}:storybook`,
+      (output) => {
+        if (
+          output.includes('Local:') &&
+          output.includes(`:${STORYBOOK_PORT}`)
+        ) {
+          resultOutput = output;
+          return true;
+        }
+        return false;
+      }
+    );
+
+    // it is expected that projects won't have stories by default and storybook should recognize it.
+    expect(resultOutput).toContain(
+      `No story files found for the specified pattern: ${type}/${projectName}/**/*.stories.mdx`
+    );
+    if (!hasTsStories) {
+      expect(resultOutput).toContain(
+        `No story files found for the specified pattern: ${type}/${projectName}/**/*.stories.@(js|jsx|ts|tsx)`
+      );
+    }
+    try {
+      await promisifiedTreeKill(p.pid!, 'SIGKILL');
+      await killPort(STORYBOOK_PORT);
+    } catch {
+      // ignore
+    }
+  }, 200000);
+}

package.json

@@ -26,6 +26,7 @@
     "@nrwl/js": "15.8.2",
     "@nrwl/linter": "15.8.2",
     "@nrwl/nx-plugin": "15.8.2",
+    "@nrwl/storybook": "15.8.2",
     "@nrwl/vite": "15.8.2",
     "@nrwl/workspace": "15.8.2",
     "@nxkit/playwright": "^2.1.2",

packages/qwik-nx/generators.json

@@ -64,6 +64,11 @@
       "factory": "./src/generators/remote/generator",
       "schema": "./src/generators/remote/schema.json",
       "description": "Generate a remote Qwik application for the micro frontend setup"
+    },
+    "storybook-configuration": {
+      "factory": "./src/generators/storybook-configuration/generator",
+      "schema": "./src/generators/storybook-configuration/schema.json",
+      "description": "Adds Storybook configuration to a project."
     }
   }
 }

packages/qwik-nx/src/generators/component/files/storybook/__fileName__.doc.mdx.template

@@ -0,0 +1,26 @@
+import { Canvas, Story } from '@storybook/addon-docs';
+import { <%- className %> } from './<%- fileName %>';
+
+# <%- className %> Component
+
+## Purpose
+
+{/* Why the component is needed */}
+
+## Example
+
+{/* Common copy/paste example that people can throw into their templates and ts */}
+
+~~~tsx
+<<%- className %> param="value" />
+~~~
+
+## Use case examples
+
+{/* Examples based on use cases */}
+
+### Primary
+
+<Canvas>
+  <Story id="<%- className.toLowerCase() %>--primary" />
+</Canvas>

packages/qwik-nx/src/generators/component/files/storybook/__fileName__.stories.tsx.template

@@ -0,0 +1,21 @@
+import type { Meta } from 'storybook-framework-qwik';
+import { <%- className %> } from './<%- fileName %>';
+import doc from './<%- fileName %>.doc.mdx';
+
+export default {
+  title: '<%- className %>',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      page: doc,
+    },
+  },
+  argTypes: {
+    // put component params here
+  },
+  render(args) {
+    return <<%- className %> {...args}/>;
+  },
+} as Meta;
+
+export const Primary = {};

packages/qwik-nx/src/generators/component/generator.ts

@@ -9,6 +9,7 @@ import {
   Tree,
 } from '@nrwl/devkit';
 import { addStyledModuleDependencies } from '../../utils/add-styled-dependencies';
+import { ensureMdxTypeInTsConfig } from '../../utils/ensure-file-utils';
 import { ComponentGeneratorSchema } from './schema';
 
 interface NormalizedSchema extends ComponentGeneratorSchema {
@@ -95,6 +96,15 @@ function createComponentFiles(tree: Tree, options: NormalizedSchema) {
       templateOptions
     );
   }
+  if (options.generateStories) {
+    generateFiles(
+      tree,
+      joinPathFragments(__dirname, 'files/storybook'),
+      componentDir,
+      templateOptions
+    );
+    ensureMdxTypeInTsConfig(tree, options.project);
+  }
 }
 
 export async function componentGenerator(

packages/qwik-nx/src/generators/component/schema.d.ts

@@ -5,4 +5,5 @@ export interface ComponentGeneratorSchema {
   style?: 'none' | 'css' | 'scss' | 'styl' | 'less';
   skipTests?: boolean;
   flat?: boolean;
+  generateStories?: boolean;
 }

packages/qwik-nx/src/generators/component/schema.json

@@ -68,6 +68,10 @@
       "type": "boolean",
       "description": "Create component at the source root rather than its own directory.",
       "default": false
+    },
+    "generateStories": {
+      "description": "Create Storybook stories for the component",
+      "type": "boolean"
     }
   },
   "required": ["name", "project"]

packages/qwik-nx/src/generators/e2e-project/generator.spec.ts

@@ -20,9 +20,9 @@ describe('e2e project', () => {
     .spyOn(getInstalledNxVersionModule, 'getInstalledNxVersion')
     .mockReturnValue('15.6.0');
 
-  beforeEach(() => {
+  beforeEach(async () => {
     appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
-    appGenerator(appTree, {
+    await appGenerator(appTree, {
       name: 'myapp',
       e2eTestRunner: 'none',
     });

packages/qwik-nx/src/generators/integrations/cloudflare-pages-integration/generator.spec.ts

@@ -18,10 +18,10 @@ describe('cloudflare-pages-integration generator', () => {
     project: projectName,
   };
 
-  beforeEach(() => {
+  beforeEach(async () => {
     appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
 
-    applicationGenerator(appTree, {
+    await applicationGenerator(appTree, {
       name: projectName,
       e2eTestRunner: 'none',
       linter: Linter.None,