Split into three

storybookjs · Dec 10, 2024 · ed1b20e · ed1b20e
1 parent 8f3c1fe
commit ed1b20e
Show file tree

Hide file tree

Showing 16 changed files with 223 additions and 56 deletions.
diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts
@@ -71,17 +71,17 @@ export default {
   '@storybook/react-dom-shim': '8.5.0-alpha.19',
   '@storybook/source-loader': '8.5.0-alpha.19',
   '@storybook/test': '8.5.0-alpha.19',
+  '@storybook/preset-angular-webpack': '8.5.0-alpha.18',
   '@storybook/preset-create-react-app': '8.5.0-alpha.19',
-  '@storybook/preset-angular-webpack': '8.5.0-alpha.19',
   '@storybook/preset-html-webpack': '8.5.0-alpha.19',
   '@storybook/preset-preact-webpack': '8.5.0-alpha.19',
   '@storybook/preset-react-webpack': '8.5.0-alpha.19',
   '@storybook/preset-server-webpack': '8.5.0-alpha.19',
   '@storybook/preset-svelte-webpack': '8.5.0-alpha.19',
   '@storybook/preset-vue3-webpack': '8.5.0-alpha.19',
+  '@storybook/angular-renderer': '8.5.0-alpha.11',
   '@storybook/html': '8.5.0-alpha.19',
   '@storybook/preact': '8.5.0-alpha.19',
-  '@storybook/angular-renderer': '8.5.0-alpha.19',
   '@storybook/react': '8.5.0-alpha.19',
   '@storybook/server': '8.5.0-alpha.19',
   '@storybook/svelte': '8.5.0-alpha.19',

diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
@@ -56,29 +56,67 @@
     "@storybook/components": "workspace:*",
     "@storybook/core-webpack": "workspace:*",
     "@storybook/global": "^5.0.0",
+    "@storybook/manager-api": "workspace:*",
     "@storybook/preset-angular-webpack": "workspace:*",
+    "@storybook/preview-api": "workspace:*",
+    "@storybook/theming": "workspace:*",
     "@types/node": "^22.0.0",
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.11",
     "@types/semver": "^7.3.4",
     "@types/webpack-env": "^1.18.0",
     "fd-package-json": "^1.2.0",
     "find-up": "^5.0.0",
     "semver": "^7.3.7",
     "telejson": "^7.2.0",
     "ts-dedent": "^2.0.0",
+    "tsconfig-paths-webpack-plugin": "^4.0.1",
     "util-deprecate": "^1.0.2",
     "webpack": "5"
   },
   "devDependencies": {
     "@analogjs/vite-plugin-angular": "^0.2.24",
-    "typescript": "^5.3.2"
+    "@angular-devkit/architect": "^0.1703.0",
+    "@angular-devkit/build-angular": "^17.3.0",
+    "@angular-devkit/core": "^17.3.0",
+    "@angular/animations": "^17.3.0",
+    "@angular/cli": "^17.3.0",
+    "@angular/common": "^17.3.0",
+    "@angular/compiler": "^17.3.0",
+    "@angular/compiler-cli": "^17.3.0",
+    "@angular/core": "^17.3.0",
+    "@angular/forms": "^17.3.0",
+    "@angular/platform-browser": "^17.3.0",
+    "@angular/platform-browser-dynamic": "^17.3.0",
+    "@types/cross-spawn": "^6.0.2",
+    "@types/tmp": "^0.2.3",
+    "cross-spawn": "^7.0.3",
+    "tmp": "^0.2.1",
+    "typescript": "^5.3.2",
+    "webpack": "5",
+    "zone.js": "^0.14.2"
   },
   "peerDependencies": {
     "@angular-devkit/architect": ">=0.1500.0 < 0.2000.0",
     "@angular-devkit/build-angular": ">=15.0.0 < 20.0.0",
     "@angular-devkit/core": ">=15.0.0 < 20.0.0",
+    "@angular/cli": ">=15.0.0 < 20.0.0",
+    "@angular/common": ">=15.0.0 < 20.0.0",
+    "@angular/compiler": ">=15.0.0 < 20.0.0",
+    "@angular/compiler-cli": ">=15.0.0 < 20.0.0",
+    "@angular/core": ">=15.0.0 < 20.0.0",
+    "@angular/forms": ">=15.0.0 < 20.0.0",
+    "@angular/platform-browser": ">=15.0.0 < 20.0.0",
+    "@angular/platform-browser-dynamic": ">=15.0.0 < 20.0.0",
     "rxjs": "^6.0.0 || ^7.4.0",
     "storybook": "workspace:^",
-    "typescript": "^4.0.0 || ^5.0.0"
+    "typescript": "^4.0.0 || ^5.0.0",
+    "zone.js": ">= 0.11.1 < 1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@angular/cli": {
+      "optional": true
+    }
   },
   "engines": {
     "node": ">=18.0.0"

diff --git a/code/frameworks/angular/src/index.ts b/code/frameworks/angular/src/index.ts
@@ -2,3 +2,15 @@
 export * from '@storybook/angular-renderer';
 export * from '@storybook/preset-angular-webpack';
 export * from './types';
+
+/*
+ * ATTENTION:
+ * - moduleMetadata
+ * - NgModuleMetadata
+ * - ICollection
+ *
+ * These typings are coped out of decorators.d.ts and types.d.ts in order to fix a bug with tsc
+ * It was imported out of dist before which was not the proper way of exporting public API
+ *
+ * This can be fixed by migrating app/angular to typescript
+ */
diff --git a/code/frameworks/angular/src/preset.ts b/code/frameworks/angular/src/preset.ts
@@ -1,6 +1,6 @@
 import { PresetProperty } from 'storybook/internal/types';
+
 import { dirname, join } from 'node:path';
-import { StorybookConfig } from './types';
 
 const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any;
@@ -9,6 +9,13 @@ export const addons: PresetProperty<'addons'> = [
   getAbsolutePath('@storybook/preset-angular-webpack'),
 ];
 
+export const typescript: PresetProperty<'typescript'> = async (config) => {
+  return {
+    ...config,
+    skipCompiler: true,
+  };
+};
+
 export const core: PresetProperty<'core'> = async (config, options) => {
   const framework = await options.presets.apply('framework');
 

diff --git a/code/frameworks/angular/src/types.ts b/code/frameworks/angular/src/types.ts
@@ -22,16 +22,16 @@ type StorybookConfigFramework = {
   framework:
     | FrameworkName
     | {
-    name: FrameworkName;
-    options: FrameworkOptions;
-  };
+        name: FrameworkName;
+        options: FrameworkOptions;
+      };
   core?: StorybookConfigBase['core'] & {
     builder?:
       | BuilderName
       | {
-      name: BuilderName;
-      options: BuilderOptions;
-    };
+          name: BuilderName;
+          options: BuilderOptions;
+        };
   };
   typescript?: Partial<TypescriptOptionsBuilder & TypescriptOptionsReact> &
     StorybookConfigBase['typescript'];

diff --git a/code/package.json b/code/package.json
@@ -202,6 +202,7 @@
     "happy-dom": "^14.12.0",
     "http-server": "^14.1.1",
     "husky": "^4.3.7",
+    "jiti": "^2.4.1",
     "lint-staged": "^13.2.2",
     "mock-require": "^3.0.3",
     "nx": "20.1.4",
@@ -227,6 +228,9 @@
     "vitest": "^2.1.3",
     "wait-on": "^7.0.1"
   },
+  "devDependencies": {
+    "rimraf": "^6.0.1"
+  },
   "dependenciesMeta": {
     "ejs": {
       "built": false
@@ -296,8 +300,5 @@
         "Dependency Upgrades"
       ]
     ]
-  },
-  "devDependencies": {
-    "rimraf": "^6.0.1"
   }
 }
diff --git a/code/presets/angular-webpack/README.md b/code/presets/angular-webpack/README.md
@@ -1,6 +1,6 @@
-# Storybook Webpack preset for Angular
+# Storybook Webpack preset for HTML
 
-This package is a [preset](https://storybook.js.org/docs/addons/writing-presets?renderer=react) that configures Storybook's webpack settings for handling React.
+This package is a [preset](https://storybook.js.org/docs/addons/writing-presets?renderer=html) that configures Storybook's webpack settings for handling HTML.
 It's an internal package that's not intended to be used directly by users.
 
-- More info on [Storybook for React](https://storybook.js.org/docs/get-started/install?renderer=react)
+- More info on [Storybook for HTML](https://storybook.js.org/docs/get-started/install?renderer=html)
diff --git a/code/presets/angular-webpack/package.json b/code/presets/angular-webpack/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@storybook/preset-angular-webpack",
-  "version": "8.5.0-alpha.11",
-  "description": "Storybook for Angular: Develop Angular Component in isolation with Hot Reloading",
+  "version": "8.5.0-alpha.18",
+  "description": "Storybook for Angular: View Angular components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
   ],
@@ -12,7 +12,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "code/presets/angular-webpack"
+    "directory": "code/presets/html-webpack"
   },
   "funding": {
     "type": "opencollective",
@@ -64,18 +64,29 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/angular-renderer": "workspace:*",
+    "@storybook/components": "workspace:*",
     "@storybook/core-webpack": "workspace:*",
+    "@storybook/global": "^5.0.0",
+    "@storybook/manager-api": "workspace:*",
+    "@storybook/preset-angular-webpack": "workspace:*",
+    "@storybook/preview-api": "workspace:*",
+    "@storybook/theming": "workspace:*",
     "@types/node": "^22.0.0",
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.11",
     "@types/semver": "^7.3.4",
+    "@types/webpack-env": "^1.18.0",
+    "fd-package-json": "^1.2.0",
     "find-up": "^5.0.0",
-    "resolve": "^1.22.8",
     "semver": "^7.3.7",
-    "tsconfig-paths": "^4.2.0",
+    "telejson": "^7.2.0",
+    "ts-dedent": "^2.0.0",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
+    "util-deprecate": "^1.0.2",
     "webpack": "5"
   },
   "devDependencies": {
+    "@analogjs/vite-plugin-angular": "^0.2.24",
     "@angular-devkit/architect": "^0.1703.0",
     "@angular-devkit/build-angular": "^17.3.0",
     "@angular-devkit/core": "^17.3.0",
@@ -88,7 +99,13 @@
     "@angular/forms": "^17.3.0",
     "@angular/platform-browser": "^17.3.0",
     "@angular/platform-browser-dynamic": "^17.3.0",
-    "typescript": "^5.3.2"
+    "@types/cross-spawn": "^6.0.2",
+    "@types/tmp": "^0.2.3",
+    "cross-spawn": "^7.0.3",
+    "tmp": "^0.2.1",
+    "typescript": "^5.3.2",
+    "webpack": "5",
+    "zone.js": "^0.14.2"
   },
   "peerDependencies": {
     "@angular-devkit/architect": ">=0.1500.0 < 0.2000.0",
@@ -107,11 +124,6 @@
     "typescript": "^4.0.0 || ^5.0.0",
     "zone.js": ">= 0.11.1 < 1.0.0"
   },
-  "peerDependenciesMeta": {
-    "typescript": {
-      "optional": true
-    }
-  },
   "engines": {
     "node": ">=18.0.0"
   },
@@ -122,8 +134,8 @@
     "entries": [
       "./src/index.ts",
       "./src/server/framework-preset-angular-cli.ts",
-      "./src/server/framework-preset-angular-ivy.ts",
-      "./src/server/framework-preset-angular-docs.ts"
+      "./src/server/framework-preset-angular-docs.ts",
+      "./src/server/framework-preset-angular-ivy.ts"
     ],
     "platform": "node"
   },

diff --git a/code/presets/angular-webpack/src/server/framework-preset-angular-cli.ts b/code/presets/angular-webpack/src/server/framework-preset-angular-cli.ts
@@ -1,18 +1,16 @@
 import { logger } from 'storybook/internal/node-logger';
 import { AngularLegacyBuildOptionsError } from 'storybook/internal/server-errors';
 
-import type { BuilderContext } from '@angular-devkit/architect';
-import { targetFromTargetString } from '@angular-devkit/architect';
-import type { JsonObject } from '@angular-devkit/core';
-import { logging } from '@angular-devkit/core';
+import { BuilderContext, targetFromTargetString } from '@angular-devkit/architect';
+import { JsonObject, logging } from '@angular-devkit/core';
 import { sync as findUpSync } from 'find-up';
-import type { Configuration } from 'webpack';
+import webpack from 'webpack';
 
 import { getWebpackConfig as getCustomWebpackConfig } from './angular-cli-webpack';
-import type { PresetOptions } from './preset-options';
+import { PresetOptions } from './preset-options';
 import { moduleIsAvailable } from './utils/module-is-available';
 
-export const webpackFinal = async (baseConfig: Configuration, options: PresetOptions) => {
+export async function webpackFinal(baseConfig: webpack.Configuration, options: PresetOptions) {
   if (!moduleIsAvailable('@angular-devkit/build-angular')) {
     logger.info('=> Using base config because "@angular-devkit/build-angular" is not installed');
     return baseConfig;
@@ -30,7 +28,7 @@ export const webpackFinal = async (baseConfig: Configuration, options: PresetOpt
     },
     builderContext,
   });
-};
+}
 
 /** Get Builder Context If storybook is not start by angular builder create dumb BuilderContext */
 function getBuilderContext(options: PresetOptions): BuilderContext {

diff --git a/code/presets/angular-webpack/src/server/framework-preset-angular-ivy.ts b/code/presets/angular-webpack/src/server/framework-preset-angular-ivy.ts
@@ -1,12 +1,12 @@
 import { readFileSync } from 'node:fs';
 import { join } from 'node:path';
 
-import type { Preset } from 'storybook/internal/types';
+import { Preset } from 'storybook/internal/types';
 
-import type { Configuration } from 'webpack';
+import { Configuration } from 'webpack';
 
-import type { AngularOptions } from '../types';
-import type { PresetOptions } from './preset-options';
+import { AngularOptions } from '../types';
+import { PresetOptions } from './preset-options';
 
 /**
  * Source :

diff --git a/code/presets/angular-webpack/src/server/preset-options.ts b/code/presets/angular-webpack/src/server/preset-options.ts
@@ -1,8 +1,8 @@
-import type { Options as CoreOptions } from 'storybook/internal/types';
+import { Options as CoreOptions } from 'storybook/internal/types';
 
-import type { BuilderContext } from '@angular-devkit/architect';
-import type { StylePreprocessorOptions } from '@angular-devkit/build-angular';
-import type { StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
+import { BuilderContext } from '@angular-devkit/architect';
+import { StylePreprocessorOptions } from '@angular-devkit/build-angular';
+import { StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
 
 export type PresetOptions = CoreOptions & {
   /* Allow to get the options of a targeted "browser builder"  */

diff --git a/code/presets/angular-webpack/src/types.ts b/code/presets/angular-webpack/src/types.ts
@@ -1,3 +1,5 @@
+export type { BuilderResult, TypescriptOptions } from '@storybook/core-webpack';
+
 export interface AngularOptions {
   enableIvy?: boolean;
   enableNgcc?: boolean;

diff --git a/code/presets/angular-webpack/tsconfig.build.json b/code/presets/angular-webpack/tsconfig.build.json
@@ -0,0 +1,27 @@
+{
+  "extends": "../../tsconfig.json",
+  "compileOnSave": false,
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "CommonJS",
+    "noEmit": false,
+    "lib": ["es2020", "dom", "dom.iterable"],
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "declaration": true,
+    "outDir": "dist",
+    "types": ["node"],
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "pretty": true,
+    "noErrorTruncation": true,
+    "listEmittedFiles": false,
+    "noUnusedLocals": false,
+    "baseUrl": ".",
+    "paths": {
+      "storybook/internal/*": ["../../lib/cli/core/*"]
+    }
+  },
+  "include": ["src/**/*", "src/**/*.json"]
+}
diff --git a/code/presets/angular-webpack/tsconfig.json b/code/presets/angular-webpack/tsconfig.json
@@ -1,5 +1,8 @@
 {
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {},
-  "include": ["src/**/*"]
+  "extends": "./tsconfig.build.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "strict": false
+  },
+  "include": ["src/**/*", "src/**/*.json"]
 }
diff --git a/code/presets/angular-webpack/tsconfig.spec.json b/code/presets/angular-webpack/tsconfig.spec.json
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": ["webpack-env", "node"],
+    "typeRoots": ["../../node_modules/@types", "node_modules/@types"],
+    "allowJs": true
+  },
+  "include": ["**/*.test.ts", "**/*.d.ts"]
+}