analogjs · brandonroberts · Apr 23, 2025 · Apr 4, 2025 · Apr 23, 2025
diff --git a/.gitignore b/.gitignore
@@ -68,4 +68,4 @@ tmpanalogapp*
 .nx/workspace-data
 vite.config.*.timestamp*
 .vite-inspect
-vitest.config.*.timestamp*
+vitest.config.*.timestamp*
diff --git a/apps/docs-app/docs/integrations/storybook/index.md b/apps/docs-app/docs/integrations/storybook/index.md
@@ -23,45 +23,45 @@ npx storybook@latest init
 
 Follow the provided prompts, and commit your changes.
 
-## Installing the Storybook and Vite packages
+## Installing the Storybook package
 
-Install the Vite Plugin for Angular and the Vite Builder for Storybook. Depending on your preferred package manager, run one of the following commands:
+Install the Storybook Plugin for Angular and Vite. Depending on your preferred package manager, run one of the following commands:
 
 <Tabs groupId="package-manager">
   <TabItem value="npm">
 
 ```shell
-npm install @analogjs/vite-plugin-angular @storybook/builder-vite --save-dev
+npm install @analogjs/storybook-angular --save-dev
 ```
 
   </TabItem>
 
   <TabItem label="yarn" value="yarn">
 
 ```shell
-yarn add @analogjs/vite-plugin-angular @storybook/builder-vite --dev
+yarn add @analogjs/storybook-angular --dev
 ```
 
   </TabItem>
 
   <TabItem value="pnpm">
 
 ```shell
-pnpm install @analogjs/vite-plugin-angular @storybook/builder-vite -w --save-dev
+pnpm install @analogjs/storybook-angular -w --save-dev
 ```
 
   </TabItem>
 
   <TabItem value="bun">
 
 ```shell
-bun install @analogjs/vite-plugin-angular @storybook/builder-vite --save-dev
+bun install @analogjs/storybook-angular --save-dev
 ```
 
   </TabItem>  
 </Tabs>
 
-## Configuring Storybook to use the Vite Builder
+## Configuring Storybook
 
 Add the `zone.js` import to the top of your `.storybook/preview.ts` file.
 
@@ -89,125 +89,71 @@ const preview: Preview = {
 export default preview;
 ```
 
-Next, update the `.storybook/main.ts` file to use the `@storybook/builder-vite` and add the `viteFinal` config function to configure the Vite Plugin for Angular.
+Next, update the `.storybook/main.ts` file to use the `StorybookConfig`. Also update the `framework` to use the `@analogjs/storybook-angular` package.
 
 ```ts
-import { StorybookConfig } from '@storybook/angular';
-import { StorybookConfigVite } from '@storybook/builder-vite';
-import { UserConfig } from 'vite';
+import { StorybookConfig } from '@analogjs/storybook-angular';
 
-const config: StorybookConfig & StorybookConfigVite = {
+const config: StorybookConfig = {
   // other config, addons, etc.
-  core: {
-    builder: {
-      name: '@storybook/builder-vite',
-      options: {
-        viteConfigPath: undefined,
-      },
-    },
-  },
-  async viteFinal(config: UserConfig) {
-    // Merge custom configuration into the default config
-    const { mergeConfig } = await import('vite');
-    const { default: angular } = await import('@analogjs/vite-plugin-angular');
-
-    return mergeConfig(config, {
-      // Add dependencies to pre-optimization
-      optimizeDeps: {
-        include: [
-          '@storybook/angular',
-          '@storybook/angular/dist/client',
-          '@angular/compiler',
-          '@storybook/blocks',
-          'tslib',
-        ],
-      },
-      plugins: [angular({ jit: true, tsconfig: './.storybook/tsconfig.json' })],
-      define: {
-        STORYBOOK_ANGULAR_OPTIONS: JSON.stringify({
-          experimentalZoneless: false,
-        }),
-      },
-    });
+  framework: {
+    name: '@analogjs/storybook-angular',
+    options: {},
   },
 };
 ```
 
 Remove the existing `webpackFinal` config function if present.
 
-Next, Update the `package.json` to run the Storybook commands directly.
-
-```json
-{
-  "name": "my-app",
-  "scripts": {
-    "storybook": "storybook dev --port 4400",
-    "build-storybook": "storybook build"
-  }
-}
-```
-
-> You can also remove the Storybook targets in the angular.json
-
-If you're using [Nx](https://nx.dev), update your `project.json` storybook targets to run the Storybook commands:
+Next, update the Storybook targets in the `angular.json` or `project.json`
 
 ```json
     "storybook": {
-      "executor": "nx:run-commands",
-      "options": {
-        "cwd": "apps/my-app",
-        "command": "storybook dev --port 4400"
-      }
+      "builder": "@analogjs/storybook-angular:start-storybook",
     },
     "build-storybook": {
-      "executor": "nx:run-commands",
-      "options": {
-        "cwd": "apps/my-app",
-        "command": "storybook build --output-dir ../../dist/storybook/my-app"
-      }
+      "builder": "@analogjs/storybook-angular:build-storybook"
     }
 ```
 
-Add the `/storybook-static` folder to your `.gitignore` file.
+Remove any `webpack` specific options and remove the `browserTarget` option.
+
+Add the `/storybook-static` folder to the `.gitignore` file.
 
 ## Running Storybook
 
-Run the storybook commands directly for running the development server.
+Run the command for starting the development server.
 
 ```sh
 npm run storybook
 ```
 
 ## Building Storybook
 
-Run the storybook commands for building the storybook.
+Run the command for building the storybook.
 
 ```sh
 npm run build-storybook
 ```
 
 ## Using shared CSS paths
 
-To load shared CSS paths, configure them using `loadPaths` css option in the vite config.
+To load shared CSS paths, configure them using `loadPaths` css option in the `viteFinal` function.
 
 ```ts
 import path from 'node:path';
 
-async viteFinal(config: UserConfig) {
-  // Merge custom configuration into the default config
-  const { mergeConfig } = await import('vite');
-  const { default: angular } = await import('@analogjs/vite-plugin-angular');
-
-  return mergeConfig(config, {
+async viteFinal() {
+  return {
     css: {
       preprocessorOptions: {
         scss: {
           loadPaths: `${path.resolve(__dirname, '../src/lib/styles')}`
         }
       }
     }
-  });
-},
+  };
+}
 ```
 
 ## Using TypeScript Config Path Aliases
@@ -244,22 +190,17 @@ pnpm install -w vite-tsconfig-paths --save-dev
   </TabItem>
 </Tabs>
 
-Next, add the plugin to the `plugins` array in the `vite.config.ts` with the `root` set as the relative path to the root of the project.
+Next, add the plugin to the `plugins` array.
 
 ```ts
 import viteTsConfigPaths from 'vite-tsconfig-paths';
 
-async viteFinal(config: UserConfig) {
-  // Merge custom configuration into the default config
-  const { mergeConfig } = await import('vite');
-  const { default: angular } = await import('@analogjs/vite-plugin-angular');
-
-  return mergeConfig(config, {
+async viteFinal() {
+  return {
     plugins: [
-      angular(),
       viteTsConfigPaths()
     ],
-  });
+  };
 }
 ```
 
@@ -271,15 +212,10 @@ For Nx workspaces, import and use the `nxViteTsPaths` plugin from the `@nx/vite`
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
 
 async viteFinal(config: UserConfig) {
-  // Merge custom configuration into the default config
-  const { mergeConfig } = await import('vite');
-  const { default: angular } = await import('@analogjs/vite-plugin-angular');
-
-  return mergeConfig(config, {
+  return {
     plugins: [
-      angular(),
       nxViteTsPaths()
     ],
-  });
+  };
 }
 ```
diff --git a/package.json b/package.json
@@ -105,12 +105,15 @@
     "@nx/jest": "20.6.4",
     "@nx/js": "20.6.4",
     "@nx/plugin": "20.6.4",
+    "@nx/storybook": "20.6.4",
     "@nx/vite": "20.6.4",
     "@nx/web": "20.6.4",
     "@schematics/angular": "19.2.5",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
+    "@storybook/angular": "^8.6.12",
+    "@storybook/builder-vite": "^8.6.12",
     "@swc-node/register": "1.9.2",
     "@swc/cli": "0.3.12",
     "@swc/core": "1.5.7",
@@ -139,6 +142,8 @@
     "eslint-plugin-cypress": "3.5.0",
     "execa": "^7.1.1",
     "fast-glob": "^3.2.12",
+    "fd-package-json": "^1.2.0",
+    "find-up": "^5.0.0",
     "fs-extra": "^11.1.1",
     "h3": "^1.13.0",
     "happy-dom": "^12.10.3",
@@ -172,7 +177,9 @@
     "sharp": "^0.33.5",
     "shiki": "^1.6.1",
     "start-server-and-test": "^1.15.4",
+    "storybook": "^8.4.6",
     "tailwindcss": "^3.1.0",
+    "ts-dedent": "^2.0.0",
     "ts-jest": "29.1.0",
     "ts-morph": "^21.0.1",
     "ts-node": "10.9.1",

diff --git a/packages/astro-angular/package.json b/packages/astro-angular/package.json
@@ -54,6 +54,7 @@
       "@analogjs/platform",
       "@analogjs/content",
       "@analogjs/router",
+      "@analogjs/storybook-angular",
       "@analogjs/vite-plugin-angular",
       "@analogjs/vite-plugin-nitro",
       "@analogjs/vitest-angular"

diff --git a/packages/content/package.json b/packages/content/package.json
@@ -58,6 +58,7 @@
       "@analogjs/platform",
       "@analogjs/content",
       "@analogjs/router",
+      "@analogjs/storybook-angular",
       "@analogjs/vite-plugin-angular",
       "@analogjs/vite-plugin-nitro",
       "@analogjs/vitest-angular"

diff --git a/packages/platform/package.json b/packages/platform/package.json
@@ -72,6 +72,7 @@
       "@analogjs/platform",
       "@analogjs/content",
       "@analogjs/router",
+      "@analogjs/storybook-angular",
       "@analogjs/vite-plugin-angular",
       "@analogjs/vite-plugin-nitro",
       "@analogjs/vitest-angular"

diff --git a/packages/router/package.json b/packages/router/package.json
@@ -36,6 +36,7 @@
       "@analogjs/platform",
       "@analogjs/content",
       "@analogjs/router",
+      "@analogjs/storybook-angular",
       "@analogjs/vite-plugin-angular",
       "@analogjs/vite-plugin-nitro",
       "@analogjs/vitest-angular"

diff --git a/packages/storybook-angular/.eslintrc.json b/packages/storybook-angular/.eslintrc.json
@@ -0,0 +1,28 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": [
+    "!**/*",
+    "**/vite.config.*.timestamp*",
+    "**/vitest.config.*.timestamp*"
+  ],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts"],
+      "rules": {
+        "@angular-eslint/prefer-standalone": "off"
+      }
+    }
+  ]
+}