fix(qwik-nx): storybook updates for qwikCity (#122)

Author: dmitry-stepanenko

packages/qwik-nx/src/generators/storybook-configuration/__snapshots__/generator.spec.ts.snap

@@ -26,6 +26,10 @@ Array [
     "path": "apps/test-project/.storybook/main.ts",
     "type": "CREATE",
   },
+  Object {
+    "path": "apps/test-project/.storybook/preview-head.html",
+    "type": "CREATE",
+  },
   Object {
     "path": "apps/test-project/.storybook/preview.ts",
     "type": "CREATE",
@@ -148,3 +152,67 @@ Array [
   },
 ]
 `;
+
+exports[`storybook-configuration generator should add required targets 2`] = `
+"import { mergeConfig, UserConfig } from 'vite';
+import { withNx } from 'qwik-nx/storybook';
+import viteConfig from './../vite.config';
+
+const config = {
+  stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-essentials'],
+  framework: { name: 'storybook-framework-qwik' },
+  async viteFinal(config: UserConfig) {
+    const updatedConfig = mergeConfig(config, viteConfig);
+    return withNx(updatedConfig);
+  },
+};
+
+export default config;
+"
+`;
+
+exports[`storybook-configuration generator should add required targets 3`] = `
+"import { qwikCityDecorator } from 'storybook-framework-qwik/qwik-city-decorator';
+export const decorators = [qwikCityDecorator];
+"
+`;
+
+exports[`storybook-configuration generator should conditionally add qwikCity decorator to preview.ts matches the snapshot when qwikCitySupport is "auto" and project is "test-project" 1`] = `
+"import { qwikCityDecorator } from 'storybook-framework-qwik/qwik-city-decorator';
+export const decorators = [qwikCityDecorator];
+"
+`;
+
+exports[`storybook-configuration generator should conditionally add qwikCity decorator to preview.ts matches the snapshot when qwikCitySupport is "auto" and project is "test-project-lib" 1`] = `
+"// uncomment this if current project requires qwikCity
+// import { qwikCityDecorator } from 'storybook-framework-qwik/qwik-city-decorator';
+// export const decorators = [qwikCityDecorator];
+"
+`;
+
+exports[`storybook-configuration generator should conditionally add qwikCity decorator to preview.ts matches the snapshot when qwikCitySupport is "false" and project is "test-project" 1`] = `
+"// uncomment this if current project requires qwikCity
+// import { qwikCityDecorator } from 'storybook-framework-qwik/qwik-city-decorator';
+// export const decorators = [qwikCityDecorator];
+"
+`;
+
+exports[`storybook-configuration generator should conditionally add qwikCity decorator to preview.ts matches the snapshot when qwikCitySupport is "false" and project is "test-project-lib" 1`] = `
+"// uncomment this if current project requires qwikCity
+// import { qwikCityDecorator } from 'storybook-framework-qwik/qwik-city-decorator';
+// export const decorators = [qwikCityDecorator];
+"
+`;
+
+exports[`storybook-configuration generator should conditionally add qwikCity decorator to preview.ts matches the snapshot when qwikCitySupport is "true" and project is "test-project" 1`] = `
+"import { qwikCityDecorator } from 'storybook-framework-qwik/qwik-city-decorator';
+export const decorators = [qwikCityDecorator];
+"
+`;
+
+exports[`storybook-configuration generator should conditionally add qwikCity decorator to preview.ts matches the snapshot when qwikCitySupport is "true" and project is "test-project-lib" 1`] = `
+"import { qwikCityDecorator } from 'storybook-framework-qwik/qwik-city-decorator';
+export const decorators = [qwikCityDecorator];
+"
+`;

packages/qwik-nx/src/generators/storybook-configuration/files/.storybook/main.__configExtension__.template

@@ -1,4 +1,5 @@
 import { mergeConfig, UserConfig } from 'vite';
+import { withNx } from 'qwik-nx/storybook';
 import viteConfig from './../vite.config';
 
 const config = {
@@ -9,7 +10,8 @@ const config = {
   addons: ['@storybook/addon-essentials'],
   framework: { name: 'storybook-framework-qwik', },
   async viteFinal(config: UserConfig) {
-    return mergeConfig(config, viteConfig);
+    const updatedConfig = mergeConfig(config, viteConfig);
+    return withNx(updatedConfig);
   },
 };
 

packages/qwik-nx/src/generators/storybook-configuration/files/.storybook/preview-head.html.template

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

packages/qwik-nx/src/generators/storybook-configuration/files/.storybook/preview.__configExtension__.template

@@ -0,0 +1,3 @@
+<% if(!qwikCitySupportInternal) { %>// uncomment this if current project requires qwikCity <% } %>
+<% if(!qwikCitySupportInternal) { %>// <% } %>import { qwikCityDecorator } from 'storybook-framework-qwik/qwik-city-decorator';
+<% if(!qwikCitySupportInternal) { %>// <% } %>export const decorators = [qwikCityDecorator];

packages/qwik-nx/src/generators/storybook-configuration/generator.spec.ts

@@ -5,6 +5,7 @@ import { storybookConfigurationGenerator } from './generator';
 import { StorybookConfigurationGeneratorSchema } from './schema';
 import appGenerator from '../application/generator';
 import { Linter } from '@nrwl/linter';
+import { libraryGenerator } from '../library/generator';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const devkit = require('@nrwl/devkit');
@@ -68,5 +69,54 @@ describe('storybook-configuration generator', () => {
         .sort((a, b) => a.path.localeCompare(b.path))
         .map((c) => ({ path: c.path, type: c.type }))
     ).toMatchSnapshot();
+    expect(
+      appTree.read(`apps/${projectName}/.storybook/main.ts`)?.toString()
+    ).toMatchSnapshot();
+    expect(
+      appTree.read(`apps/${projectName}/.storybook/preview.ts`)?.toString()
+    ).toMatchSnapshot();
+  });
+
+  describe('should conditionally add qwikCity decorator to preview.ts', () => {
+    const libProjectName = 'test-project-lib';
+
+    beforeEach(async () => {
+      await libraryGenerator(appTree, {
+        name: libProjectName,
+        linter: Linter.None,
+        skipFormat: true,
+        strict: true,
+        style: 'css',
+        unitTestRunner: 'none',
+      });
+    });
+
+    test.each`
+      qwikCitySupport | project
+      ${'true'}       | ${libProjectName}
+      ${'false'}      | ${libProjectName}
+      ${'auto'}       | ${libProjectName}
+      ${'true'}       | ${projectName}
+      ${'false'}      | ${projectName}
+      ${'auto'}       | ${projectName}
+    `(
+      'matches the snapshot when qwikCitySupport is "$qwikCitySupport" and project is "$project"',
+      async ({ qwikCitySupport, project }) => {
+        await storybookConfigurationGenerator(appTree, {
+          ...options,
+          qwikCitySupport,
+          name: project,
+        });
+        expect(
+          appTree
+            .read(
+              `${
+                project === libProjectName ? 'libs' : 'apps'
+              }/${project}/.storybook/preview.ts`
+            )
+            ?.toString()
+        ).toMatchSnapshot();
+      }
+    );
   });
 });

packages/qwik-nx/src/generators/storybook-configuration/generator.ts

@@ -6,6 +6,7 @@ import {
   GeneratorCallback,
   names,
   offsetFromRoot,
+  ProjectConfiguration,
   readProjectConfiguration,
   Tree,
 } from '@nrwl/devkit';
@@ -27,9 +28,11 @@ import {
   StorybookConfigurationGeneratorSchema,
 } from './schema';
 
-function addFiles(tree: Tree, options: StorybookConfigurationGeneratorSchema) {
-  const { root } = readProjectConfiguration(tree, options.name);
-
+function addFiles(
+  tree: Tree,
+  options: StorybookConfigurationGeneratorSchema,
+  { root }: ProjectConfiguration
+) {
   tree.delete(path.join(root, '.storybook/main.js'));
 
   const templateOptions = {
@@ -46,21 +49,34 @@ function addFiles(tree: Tree, options: StorybookConfigurationGeneratorSchema) {
 }
 
 function normalizeOptions(
-  options: StorybookConfigurationGeneratorSchema
+  options: StorybookConfigurationGeneratorSchema,
+  projectConfig: ProjectConfiguration
 ): NormalizedSchema {
+  let qwikCitySupportInternal: boolean;
+  if (options.qwikCitySupport === 'auto' || !options.qwikCitySupport) {
+    // "auto"
+    qwikCitySupportInternal = projectConfig.projectType === 'application';
+  } else {
+    // "true" or "false"
+    qwikCitySupportInternal = options.qwikCitySupport === 'true';
+  }
+
   return {
     ...options,
     js: !!options.js,
     linter: options.linter ?? Linter.EsLint,
     tsConfiguration: options.tsConfiguration ?? true,
+    qwikCitySupportInternal,
   };
 }
 
 export async function storybookConfigurationGenerator(
   tree: Tree,
   options: StorybookConfigurationGeneratorSchema
 ): Promise<GeneratorCallback> {
-  const normalizedOptions = normalizeOptions(options);
+  const projectConfig = readProjectConfiguration(tree, options.name);
+
+  const normalizedOptions = normalizeOptions(options, projectConfig);
   const nxVersion = getInstalledNxVersion(tree);
 
   ensurePackage('@nrwl/storybook', nxVersion);
@@ -80,7 +96,7 @@ export async function storybookConfigurationGenerator(
     storybook7betaConfiguration: true,
   });
 
-  addFiles(tree, normalizedOptions);
+  addFiles(tree, normalizedOptions, projectConfig);
   await formatFiles(tree);
 
   return addStorybookDependencies(tree);

packages/qwik-nx/src/generators/storybook-configuration/schema.d.ts

@@ -5,6 +5,7 @@ export interface StorybookConfigurationGeneratorSchema {
   linter?: Linter;
   js?: boolean;
   tsConfiguration?: boolean;
+  qwikCitySupport?: 'true' | 'false' | 'auto';
 }
 
 type NormalizedRequiredPropsNames = 'js' | 'linter' | 'tsConfiguration';
@@ -16,4 +17,6 @@ export type NormalizedSchema = Omit<
   StorybookConfigurationGeneratorSchema,
   NormalizedRequiredPropsNames
 > &
-  NormalizedRequiredProps;
+  NormalizedRequiredProps & {
+    qwikCitySupportInternal: boolean;
+  };

packages/qwik-nx/src/generators/storybook-configuration/schema.json

@@ -34,6 +34,13 @@
       "description": "Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.",
       "default": true,
       "x-priority": "important"
+    },
+    "qwikCitySupport": {
+      "type": "string",
+      "enum": ["true", "false", "auto"],
+      "x-priority": "important",
+      "description": "Whether to add support for the qwik city. By default, it will be added for applications, not libraries.",
+      "default": "auto"
     }
   },
   "required": ["name"]

packages/qwik-nx/src/utils/storybook.ts

@@ -0,0 +1,16 @@
+import type { PluginOption, UserConfig } from 'vite';
+
+/** Updates config for the storybook */
+export function withNx(config: UserConfig): UserConfig {
+  const updated = { ...config };
+  // logic below has been copied from "storybook-framework-qwik" plugin
+  // it doesn't work out of the box for Nx applications because base config is not
+  // Qwik-city plugin may be used in apps, but it has mdx stuff that conflicts with Storybook mdx
+  // we'll try to only remove the transform code (where the mdx stuff is), and keep everything else.
+  updated.plugins = updated.plugins?.map((plugin: PluginOption) =>
+    (plugin as any)?.name === 'vite-plugin-qwik-city'
+      ? ({ ...plugin, transform: () => null } as PluginOption)
+      : plugin
+  );
+  return updated;
+}

packages/qwik-nx/storybook.ts

@@ -0,0 +1 @@
+export * from './src/utils/storybook';