@analogjs/storybook-angular 2.0.0-alpha.16 → 2.0.0-alpha.18

package/README.md

@@ -2,6 +2,9 @@
 
 Integration package for Storybook using Angular & Vite.
 
+> This is a community integration not maintained by the Storybook team. If you have issues,
+> file an issue in our [GitHub repo](https://github.com/analogjs/analog/issues).
+
 ## Setup
 
 If you don't have Storybook setup already, run the following command to initialize Storybook for your project:
@@ -22,33 +25,7 @@ npm install @analogjs/storybook-angular --save-dev
 
 ## Configuring Storybook
 
-Add the `zone.js` import to the top of the `.storybook/preview.ts` file.
-
-```ts
-import 'zone.js';
-import { applicationConfig, type Preview } from '@analogjs/storybook-angular';
-import { provideNoopAnimations } from '@angular/platform-browser/animations';
-
-const preview: Preview = {
-  decorators: [
-    applicationConfig({
-      providers: [provideNoopAnimations()],
-    }),
-  ],
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;
-```
-
-Next, update the `.storybook/main.ts` file to use the `StorybookConfig`. Also update the `framework` to use the `@analogjs/storybook-angular` package.
+Update the `.storybook/main.ts` file to use the `StorybookConfig` type. Also update the `framework` to use the `@analogjs/storybook-angular` package.
 
 ```ts
 import { StorybookConfig } from '@analogjs/storybook-angular';
@@ -60,11 +37,13 @@ const config: StorybookConfig = {
     options: {},
   },
 };
+
+export default config;
 ```
 
 Remove the existing `webpackFinal` config function if present.
 
-Next, update the Storybook builders in the `angular.json` or `project.json`.
+Next, update the Storybook targets in the `angular.json` or `project.json`
 
 ```json
     "storybook": {
@@ -77,7 +56,38 @@ Next, update the Storybook builders in the `angular.json` or `project.json`.
 
 Remove any `webpack` specific options and remove the `browserTarget` option.
 
-Add the `/storybook-static` folder to your `.gitignore` file.
+Add the `/storybook-static` folder to the `.gitignore` file.
+
+## Setting up CSS
+
+To register global styles, add them to the `@analogjs/storybook-angular` builder options in the `angular.json` or `project.json`.
+
+```json
+    "storybook": {
+      "builder": "@analogjs/storybook-angular:start-storybook",
+      "options": {
+        // ... other options
+        "styles": [
+          "src/styles.css"
+        ],
+        "stylePreprocessorOptions": {
+          "loadPaths": ["libs/my-lib/styles"]
+        }
+      }
+    },
+    "build-storybook": {
+      "builder": "@analogjs/storybook-angular:build-storybook",
+      "options": {
+        // ... other options
+        "styles": [
+          "src/styles.css"
+        ],
+        "stylePreprocessorOptions": {
+          "loadPaths": ["libs/my-lib/styles"]
+        }
+      }
+    }
+```
 
 ## Running Storybook
 
@@ -95,27 +105,6 @@ Run the command for building the storybook.
 npm run build-storybook
 ```
 
-## Using shared CSS paths
-
-To load shared CSS paths, configure them using `loadPaths` css option in the `viteFinal` function.
-
-```ts
-import path from 'node:path';
-import { UserConfig, mergeConfig } from 'vite';
-
-export async function viteFinal(config: UserConfig) {
-  return mergeConfig(config, {
-    css: {
-      preprocessorOptions: {
-        scss: {
-          loadPaths: `${path.resolve(__dirname, '../src/lib/styles')}`,
-        },
-      },
-    },
-  });
-}
-```
-
 ## Using TypeScript Config Path Aliases
 
 If you are using `paths` in your `tsconfig.json`, support for those aliases can be added to the `vite.config.ts`.
@@ -134,11 +123,18 @@ Next, add the plugin to the `plugins` array in the `.storybook/main.ts`.
 import viteTsConfigPaths from 'vite-tsconfig-paths';
 import { UserConfig, mergeConfig } from 'vite';
 
-export async function viteFinal(config: UserConfig) {
-  return mergeConfig(config, {
-    plugins: [viteTsConfigPaths()],
-  });
-}
+import type { StorybookConfig } from '@analogjs/storybook-angular';
+
+const config: StorybookConfig = {
+  // ... other config, addons, etc.
+  async viteFinal(config: UserConfig) {
+    return mergeConfig(config, {
+      plugins: [viteTsConfigPaths()],
+    });
+  },
+};
+
+export default config;
 ```
 
 ### With Nx
@@ -149,11 +145,18 @@ For Nx workspaces, import and use the `nxViteTsPaths` plugin from the `@nx/vite`
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
 import { UserConfig, mergeConfig } from 'vite';
 
-export async function viteFinal(config: UserConfig) {
-  return mergeConfig(config, {
-    plugins: [nxViteTsPaths()],
-  });
-}
+import type { StorybookConfig } from '@analogjs/storybook-angular';
+
+const config: StorybookConfig = {
+  // ... other config, addons, etc.
+  async viteFinal(config: UserConfig) {
+    return mergeConfig(config, {
+      plugins: [nxViteTsPaths()],
+    });
+  },
+};
+
+export default config;
 ```
 
 ## Using File Replacements
@@ -166,18 +169,25 @@ Import the plugin and set it up:
 import { replaceFiles } from '@nx/vite/plugins/rollup-replace-files.plugin';
 import { UserConfig, mergeConfig } from 'vite';
 
-export async function viteFinal(config: UserConfig) {
-  return mergeConfig(config, {
-    plugins: [
-      replaceFiles([
-        {
-          replace: './src/one.ts',
-          with: './src/two.ts',
-        },
-      ]),
-    ],
-  });
-}
+import type { StorybookConfig } from '@analogjs/storybook-angular';
+
+const config: StorybookConfig = {
+  // ... other config, addons, etc.
+  async viteFinal(config: UserConfig) {
+    return mergeConfig(config, {
+      plugins: [
+        replaceFiles([
+          {
+            replace: './src/one.ts',
+            with: './src/two.ts',
+          },
+        ]),
+      ],
+    });
+  },
+};
+
+export default config;
 ```
 
 Adding the replacement files to `files` array in the `tsconfig.app.json` may also be necessary.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@analogjs/storybook-angular",
-  "version": "2.0.0-alpha.16",
+  "version": "2.0.0-alpha.18",
   "description": "Storybook Integration for Angular & Vite",
   "keywords": [
     "storybook",
@@ -29,7 +29,12 @@
     },
     "./preset": "./preset.mjs",
     "./package.json": "./package.json",
-    "./*": "./src/*"
+    "./*": "./src/*",
+    "./testing": {
+      "types": "./src/lib/testing.d.ts",
+      "import": "./src/lib/testing.js",
+      "require": "./src/lib/testing.js"
+    }
   },
   "main": "src/index.js",
   "dependencies": {

package/preset.mjs

@@ -1,4 +1,4 @@
-import { dirname, join } from 'node:path';
+import { dirname, join, resolve } from 'node:path';
 import { createRequire } from 'node:module';
 import { core as PresetCore } from '@storybook/angular/dist/preset.js';
 const require = createRequire(import.meta.url);
@@ -21,7 +21,7 @@ export const viteFinal = async (config, options) => {
     .filter((plugin) => !plugin.name.includes('analogjs'));
 
   // Merge custom configuration into the default config
-  const { mergeConfig } = await import('vite');
+  const { mergeConfig, normalizePath } = await import('vite');
   const { default: angular } = await import('@analogjs/vite-plugin-angular');
   // @ts-ignore
   const framework = await options.presets.apply('framework');
@@ -35,7 +35,9 @@ export const viteFinal = async (config, options) => {
         '@angular/platform-browser',
         '@angular/platform-browser/animations',
         'tslib',
-        'zone.js',
+        ...(options?.angularBuilderOptions?.experimentalZoneless
+          ? []
+          : ['zone.js']),
       ],
     },
     plugins: [
@@ -54,6 +56,7 @@ export const viteFinal = async (config, options) => {
             ? framework.options?.inlineStylesExtension
             : 'css',
       }),
+      angularOptionsPlugin(options, { normalizePath }),
     ],
     define: {
       STORYBOOK_ANGULAR_OPTIONS: JSON.stringify({
@@ -63,5 +66,64 @@ export const viteFinal = async (config, options) => {
     },
   });
 };
+
+function angularOptionsPlugin(options, { normalizePath }) {
+  return {
+    name: 'analogjs-storybook-options-plugin',
+    config() {
+      const loadPaths =
+        options?.angularBuilderOptions?.stylePreprocessorOptions?.loadPaths;
+
+      if (Array.isArray(loadPaths)) {
+        return {
+          css: {
+            preprocessorOptions: {
+              scss: {
+                loadPaths: loadPaths.map(
+                  (loadPath) =>
+                    `${resolve(options.angularBuilderContext.workspaceRoot, loadPath)}`,
+                ),
+              },
+            },
+          },
+        };
+      }
+
+      return;
+    },
+    transform(code, id) {
+      if (
+        normalizePath(id).endsWith(
+          normalizePath(`${options.configDir}/preview.ts`),
+        )
+      ) {
+        const imports = [];
+        const styles = options?.angularBuilderOptions?.styles;
+
+        if (Array.isArray(styles)) {
+          styles.forEach((style) => {
+            imports.push(style);
+          });
+        }
+
+        const zoneless = options?.angularBuilderOptions?.experimentalZoneless;
+
+        if (!zoneless) {
+          imports.push('zone.js');
+        }
+
+        return {
+          code: `
+            ${imports.map((extraImport) => `import '${extraImport}';`).join('\n')}
+            ${code}
+          `,
+        };
+      }
+
+      return;
+    },
+  };
+}
+
 export { addons, previewAnnotations } from '@storybook/angular/dist/preset.js';
 //# sourceMappingURL=preset.js.map

package/src/lib/build-storybook/schema.json

@@ -69,6 +69,28 @@
       "type": "boolean",
       "description": "Experimental: Use zoneless change detection.",
       "default": false
+    },
+    "styles": {
+      "type": "array",
+      "description": "Global styles to be included in the build.",
+      "default": [],
+      "items": {
+        "type": "string"
+      }
+    },
+    "stylePreprocessorOptions": {
+      "description": "Options to pass to style preprocessors.",
+      "type": "object",
+      "properties": {
+        "loadPaths": {
+          "description": "Paths to include.",
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        }
+      },
+      "additionalProperties": false
     }
   },
   "additionalProperties": false

package/src/lib/start-storybook/schema.json

@@ -105,6 +105,28 @@
       "type": "boolean",
       "description": "Experimental: Use zoneless change detection.",
       "default": false
+    },
+    "styles": {
+      "type": "array",
+      "description": "Global styles to be included in the build.",
+      "default": [],
+      "items": {
+        "type": "string"
+      }
+    },
+    "stylePreprocessorOptions": {
+      "description": "Options to pass to style preprocessors.",
+      "type": "object",
+      "properties": {
+        "loadPaths": {
+          "description": "Paths to include.",
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        }
+      },
+      "additionalProperties": false
     }
   },
   "additionalProperties": false

package/src/lib/testing.d.ts

@@ -0,0 +1,5 @@
+import type { AngularRenderer } from '@storybook/angular';
+import { NamedOrDefaultProjectAnnotations, NormalizedProjectAnnotations, RenderContext } from 'storybook/internal/types';
+export declare const render: any;
+export declare function renderToCanvas(context: RenderContext<AngularRenderer>, element: HTMLElement): Promise<void>;
+export declare function setProjectAnnotations(projectAnnotations: NamedOrDefaultProjectAnnotations<any> | NamedOrDefaultProjectAnnotations<any>[]): NormalizedProjectAnnotations<AngularRenderer>;

package/src/lib/testing.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.render = void 0;
+exports.renderToCanvas = renderToCanvas;
+exports.setProjectAnnotations = setProjectAnnotations;
+const tslib_1 = require("tslib");
+const index_mjs_1 = require("@storybook/angular/dist/client/index.mjs");
+const configAnnotations = tslib_1.__importStar(require("@storybook/angular/dist/client/config.mjs"));
+exports.render = configAnnotations.render;
+async function renderToCanvas(context, element) {
+    element.id = context.id;
+    await configAnnotations.renderToCanvas(context, element);
+}
+const renderAnnotations = {
+    render: exports.render,
+    renderToCanvas,
+};
+function setProjectAnnotations(projectAnnotations) {
+    return (0, index_mjs_1.setProjectAnnotations)([
+        renderAnnotations,
+        projectAnnotations,
+    ]);
+}
+//# sourceMappingURL=testing.js.map

package/src/lib/testing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"testing.js","sourceRoot":"","sources":["../../../../../packages/storybook-angular/src/lib/testing.ts"],"names":[],"mappings":";;;AAWA,wCAMC;AAOD,sDASC;;AAhCD,wEAAkH;AAMlH,qGAA+E;AAElE,QAAA,MAAM,GAAG,iBAAiB,CAAC,MAAM,CAAC;AAExC,KAAK,UAAU,cAAc,CAClC,OAAuC,EACvC,OAAoB;IAEpB,OAAO,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC;IACxB,MAAM,iBAAiB,CAAC,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;AAC3D,CAAC;AAED,MAAM,iBAAiB,GAAG;IACxB,MAAM,EAAN,cAAM;IACN,cAAc;CACf,CAAC;AAEF,SAAgB,qBAAqB,CACnC,kBAE2C;IAE3C,OAAO,IAAA,iCAA6B,EAAC;QACnC,iBAAiB;QACjB,kBAAkB;KACnB,CAAkD,CAAC;AACtD,CAAC"}