@analogjs/storybook-angular 2.0.0-alpha.17 → 2.0.0-alpha.19

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,61 @@ 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"]
+        }
+      }
+    }
+```
+
+## Setting up Static Assets
+
+Static assets are configured in the `.storybook/main.ts` file using the `staticDirs` array.
+
+The example below shows how to add the `public` directory from `src/public` relative to the `.storybook/main.ts` file.
+
+```ts
+import { StorybookConfig } from '@analogjs/storybook-angular';
+
+const config: StorybookConfig = {
+  // other config, addons, etc.
+  framework: {
+    name: '@analogjs/storybook-angular',
+    options: {},
+  },
+  staticDirs: ['../public'],
+};
+
+export default config;
+```
+
+See the [Storybook docs on images and assets](https://storybook.js.org/docs/configure/integration/images-and-assets) for more information.
 
 ## Running Storybook
 
@@ -95,27 +128,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 +146,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 +168,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 +192,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.17",
+  "version": "2.0.0-alpha.19",
   "description": "Storybook Integration for Angular & Vite",
   "keywords": [
     "storybook",
@@ -38,12 +38,12 @@
   },
   "main": "src/index.js",
   "dependencies": {
-    "@storybook/builder-vite": ">=8.6.0 || ^9.0.0 || next"
+    "@storybook/builder-vite": ">=8.6.0 || ^9.0.0"
   },
   "peerDependencies": {
-    "@storybook/angular": ">=8.6.0 || ^9.0.0 || next",
+    "@storybook/angular": ">=8.6.0 || ^9.0.0",
     "@analogjs/vite-plugin-angular": "*",
-    "storybook": ">=8.6.0 || ^9.0.0 || next",
+    "storybook": ">=8.6.0 || ^9.0.0",
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
   },
   "engines": {

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,67 @@ export const viteFinal = async (config, options) => {
     },
   });
 };
+
+function angularOptionsPlugin(options, { normalizePath }) {
+  return {
+    name: 'analogjs-storybook-options-plugin',
+    config() {
+      const loadPaths =
+        options?.angularBuilderOptions?.stylePreprocessorOptions?.loadPaths;
+      const sassOptions =
+        options?.angularBuilderOptions?.stylePreprocessorOptions?.sass;
+
+      if (Array.isArray(loadPaths)) {
+        return {
+          css: {
+            preprocessorOptions: {
+              scss: {
+                ...sassOptions,
+                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,56 @@
       "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"
+          }
+        },
+        "sass": {
+          "description": "Options to pass to the sass preprocessor.",
+          "type": "object",
+          "properties": {
+            "fatalDeprecations": {
+              "description": "A set of deprecations to treat as fatal. If a deprecation warning of any provided type is encountered during compilation, the compiler will error instead. If a Version is provided, then all deprecations that were active in that compiler version will be treated as fatal.",
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            "silenceDeprecations": {
+              "description": " A set of active deprecations to ignore. If a deprecation warning of any provided type is encountered during compilation, the compiler will ignore it instead.",
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            "futureDeprecations": {
+              "description": "A set of future deprecations to opt into early. Future deprecations passed here will be treated as active by the compiler, emitting warnings as necessary.",
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            }
+          },
+          "additionalProperties": false
+        }
+      },
+      "additionalProperties": false
     }
   },
   "additionalProperties": false

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

@@ -105,6 +105,56 @@
       "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"
+          }
+        },
+        "sass": {
+          "description": "Options to pass to the sass preprocessor.",
+          "type": "object",
+          "properties": {
+            "fatalDeprecations": {
+              "description": "A set of deprecations to treat as fatal. If a deprecation warning of any provided type is encountered during compilation, the compiler will error instead. If a Version is provided, then all deprecations that were active in that compiler version will be treated as fatal.",
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            "silenceDeprecations": {
+              "description": " A set of active deprecations to ignore. If a deprecation warning of any provided type is encountered during compilation, the compiler will ignore it instead.",
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            "futureDeprecations": {
+              "description": "A set of future deprecations to opt into early. Future deprecations passed here will be treated as active by the compiler, emitting warnings as necessary.",
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            }
+          },
+          "additionalProperties": false
+        }
+      },
+      "additionalProperties": false
     }
   },
   "additionalProperties": false

package/src/lib/testing.js

@@ -18,7 +18,9 @@ const renderAnnotations = {
 function setProjectAnnotations(projectAnnotations) {
     return (0, index_mjs_1.setProjectAnnotations)([
         renderAnnotations,
-        projectAnnotations,
+        ...(Array.isArray(projectAnnotations)
+            ? projectAnnotations
+            : [projectAnnotations]),
     ]);
 }
 //# sourceMappingURL=testing.js.map

package/src/lib/testing.js.map

@@ -1 +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"}
+{"version":3,"file":"testing.js","sourceRoot":"","sources":["../../../../../packages/storybook-angular/src/lib/testing.ts"],"names":[],"mappings":";;;AAWA,wCAMC;AAOD,sDAWC;;AAlCD,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,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC;YACnC,CAAC,CAAC,kBAAkB;YACpB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC;KAC1B,CAAkD,CAAC;AACtD,CAAC"}