@storybook/angular 7.3.2 → 7.4.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "7.3.2",
+  "version": "7.4.0-alpha.1",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -25,31 +25,32 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
-    "template/**/*",
+    "template/cli/**/*",
     "README.md",
     "*.js",
     "*.mjs",
-    "*.d.ts"
+    "*.d.ts",
+    "!src/**/*"
   ],
   "scripts": {
     "check": "../../../scripts/node_modules/.bin/tsc",
     "prep": "../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.3.2",
-    "@storybook/cli": "7.3.2",
-    "@storybook/client-logger": "7.3.2",
-    "@storybook/core-common": "7.3.2",
-    "@storybook/core-events": "7.3.2",
-    "@storybook/core-server": "7.3.2",
-    "@storybook/core-webpack": "7.3.2",
-    "@storybook/docs-tools": "7.3.2",
+    "@storybook/builder-webpack5": "7.4.0-alpha.1",
+    "@storybook/cli": "7.4.0-alpha.1",
+    "@storybook/client-logger": "7.4.0-alpha.1",
+    "@storybook/core-common": "7.4.0-alpha.1",
+    "@storybook/core-events": "7.4.0-alpha.1",
+    "@storybook/core-server": "7.4.0-alpha.1",
+    "@storybook/core-webpack": "7.4.0-alpha.1",
+    "@storybook/docs-tools": "7.4.0-alpha.1",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.3.2",
-    "@storybook/node-logger": "7.3.2",
-    "@storybook/preview-api": "7.3.2",
-    "@storybook/telemetry": "7.3.2",
-    "@storybook/types": "7.3.2",
+    "@storybook/manager-api": "7.4.0-alpha.1",
+    "@storybook/node-logger": "7.4.0-alpha.1",
+    "@storybook/preview-api": "7.4.0-alpha.1",
+    "@storybook/telemetry": "7.4.0-alpha.1",
+    "@storybook/types": "7.4.0-alpha.1",
     "@types/node": "^16.0.0",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
@@ -58,7 +59,7 @@
     "find-up": "^5.0.0",
     "read-pkg-up": "^7.0.1",
     "semver": "^7.3.7",
-    "telejson": "^7.0.3",
+    "telejson": "^7.2.0",
     "ts-dedent": "^2.0.0",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
     "util-deprecate": "^1.0.2",

package/src/server/angular-cli-webpack.d.ts

@@ -1,7 +0,0 @@
-import { JsonObject } from '@angular-devkit/core';
-import { BuilderContext } from '@angular-devkit/architect';
-
-export declare function getWebpackConfig(
-  baseConfig: any,
-  options: { builderOptions: JsonObject; builderContext: BuilderContext }
-): any;

package/src/server/angular-cli-webpack.js

@@ -1,127 +0,0 @@
-/* eslint-disable global-require */
-// Private angular devkit stuff
-const {
-  generateI18nBrowserWebpackConfigFromContext,
-} = require('@angular-devkit/build-angular/src/utils/webpack-browser-config');
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-const { filterOutStylingRules } = require('./utils/filter-out-styling-rules');
-const {
-  default: StorybookNormalizeAngularEntryPlugin,
-} = require('./plugins/storybook-normalize-angular-entry-plugin');
-
-const getAngularWebpackUtils = () => {
-  try {
-    // Angular < 16.1.0
-    const {
-      getCommonConfig,
-      getStylesConfig,
-      getDevServerConfig,
-      getTypeScriptConfig,
-    } = require('@angular-devkit/build-angular/src/webpack/configs');
-
-    return {
-      getCommonConfig,
-      getStylesConfig,
-      getDevServerConfig,
-      getTypeScriptConfig,
-    };
-  } catch (e) {
-    // Angular > 16.1.0
-    const {
-      getCommonConfig,
-      getStylesConfig,
-      getDevServerConfig,
-      getTypeScriptConfig,
-    } = require('@angular-devkit/build-angular/src/tools/webpack/configs');
-
-    return {
-      getCommonConfig,
-      getStylesConfig,
-      getDevServerConfig,
-      getTypeScriptConfig,
-    };
-  }
-};
-
-/**
- * Extract webpack config from angular-cli 13.x.x
- * ⚠️ This file is in JavaScript to not use TypeScript. Because current storybook TypeScript version is not compatible with Angular CLI.
- * FIXME: Try another way with TypeScript on future storybook version (7 maybe 🤞)
- *
- * @param {*} baseConfig Previous webpack config from storybook
- * @param {*} options { builderOptions, builderContext }
- */
-exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }) => {
-  /**
-   * Get angular-cli Webpack config
-   */
-  const { getCommonConfig, getStylesConfig, getDevServerConfig, getTypeScriptConfig } =
-    getAngularWebpackUtils();
-  const { config: cliConfig } = await generateI18nBrowserWebpackConfigFromContext(
-    {
-      // Default options
-      index: 'noop-index',
-      main: 'noop-main',
-      outputPath: 'noop-out',
-
-      // Options provided by user
-      ...builderOptions,
-
-      // Fixed options
-      optimization: false,
-      namedChunks: false,
-      progress: false,
-      buildOptimizer: false,
-      aot: false,
-    },
-    builderContext,
-    (wco) => [
-      getCommonConfig(wco),
-      getStylesConfig(wco),
-      getTypeScriptConfig ? getTypeScriptConfig(wco) : getDevServerConfig(wco),
-    ]
-  );
-
-  /**
-   * Merge baseConfig Webpack with angular-cli Webpack
-   */
-  const entry = [
-    ...baseConfig.entry,
-    ...(cliConfig.entry.styles ?? []),
-    ...(cliConfig.entry.polyfills ?? []),
-  ];
-
-  // Don't use storybooks styling rules because we have to use rules created by @angular-devkit/build-angular
-  // because @angular-devkit/build-angular created rules have include/exclude for global style files.
-  const rulesExcludingStyles = filterOutStylingRules(baseConfig);
-  const module = {
-    ...baseConfig.module,
-    rules: [...cliConfig.module.rules, ...rulesExcludingStyles],
-  };
-
-  const plugins = [
-    ...(cliConfig.plugins ?? []),
-    ...baseConfig.plugins,
-    new StorybookNormalizeAngularEntryPlugin(),
-  ];
-
-  const resolve = {
-    ...baseConfig.resolve,
-    modules: Array.from(new Set([...baseConfig.resolve.modules, ...cliConfig.resolve.modules])),
-    plugins: [
-      new TsconfigPathsPlugin({
-        configFile: builderOptions.tsConfig,
-        mainFields: ['browser', 'module', 'main'],
-      }),
-    ],
-  };
-
-  return {
-    ...baseConfig,
-    entry,
-    module,
-    plugins,
-    resolve,
-    resolveLoader: cliConfig.resolveLoader,
-  };
-};

package/src/server/plugins/storybook-normalize-angular-entry-plugin.js

@@ -1,54 +0,0 @@
-const PLUGIN_NAME = 'storybook-normalize-angular-entry-plugin';
-
-/**
- * Angular's webpack plugin @angular-devkit/build-angular/src/webpack/plugins/styles-webpack-plugin.js
- * transforms the original webpackOptions.entry point array into a structure like this:
- *
- * ```js
- * {
- *  main: {
- *    import: [...]
- *  },
- *
- *  styles: {
- *    import: [...]
- *  },
- * }
- * ```
- *
- * Storybook throws an __webpack_require__.nmd is not a function error, when another runtime bundle (styles~runtime.iframe.bundle.js) is loaded.
- * To prevent this error, we have to normalize the entry point to only generate one runtime bundle (main~runtime.iframe.bundle.js).
- */
-export default class StorybookNormalizeAngularEntryPlugin {
-  constructor(options) {
-    this.options = options;
-  }
-
-  apply(compiler) {
-    compiler.hooks.environment.tap(PLUGIN_NAME, () => {
-      const webpackOptions = compiler.options;
-      const entry =
-        typeof webpackOptions.entry === 'function' ? webpackOptions.entry() : webpackOptions.entry;
-
-      webpackOptions.entry = async () => {
-        const entryResult = await entry;
-
-        if (entryResult.main && entryResult.styles) {
-          return {
-            main: {
-              import: Array.from(
-                new Set([...entryResult.main.import, ...entryResult.styles.import])
-              ),
-            },
-          };
-        }
-
-        return entry;
-      };
-    });
-
-    compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
-      this.compilation = compilation;
-    });
-  }
-}

package/src/typings.d.ts

@@ -1,21 +0,0 @@
-/* eslint-disable no-underscore-dangle, @typescript-eslint/naming-convention */
-
-// will be provided by the webpack define plugin
-declare var NODE_ENV: string | undefined;
-
-declare var __STORYBOOK_ADDONS_CHANNEL__: any;
-declare var __STORYBOOK_ADDONS_PREVIEW: any;
-declare var __STORYBOOK_COMPODOC_JSON__: any;
-declare var __STORYBOOK_CLIENT_API__: any;
-declare var __STORYBOOK_PREVIEW__: any;
-declare var __STORYBOOK_STORY_STORE__: any;
-declare var CHANNEL_OPTIONS: any;
-declare var DOCS_OPTIONS: any;
-
-declare var FEATURES: import('@storybook/types').StorybookConfig['features'];
-
-declare var IS_STORYBOOK: any;
-declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;
-declare var STORIES: any;
-declare var STORYBOOK_ENV: 'angular';
-declare var STORYBOOK_HOOKS_CONTEXT: any;

package/template/components/button.component.ts

@@ -1,54 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-
-@Component({
-  // Needs to be a different name to the CLI template button
-  selector: 'storybook-framework-button',
-  template: ` <button
-    type="button"
-    (click)="onClick.emit($event)"
-    [ngClass]="classes"
-    [ngStyle]="{ 'background-color': backgroundColor }"
-  >
-    {{ label }}
-  </button>`,
-  styleUrls: ['./button.css'],
-})
-export default class FrameworkButtonComponent {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  @Input()
-  primary = false;
-
-  /**
-   * What background color to use
-   */
-  @Input()
-  backgroundColor?: string;
-
-  /**
-   * How large should the button be?
-   */
-  @Input()
-  size: 'small' | 'medium' | 'large' = 'medium';
-
-  /**
-   * Button contents
-   *
-   * @required
-   */
-  @Input()
-  label = 'Button';
-
-  /**
-   * Optional click handler
-   */
-  @Output()
-  onClick = new EventEmitter<Event>();
-
-  public get classes(): string[] {
-    const mode = this.primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-
-    return ['storybook-button', `storybook-button--${this.size}`, mode];
-  }
-}

package/template/components/button.css

@@ -1,30 +0,0 @@
-.storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1;
-}
-.storybook-button--primary {
-  color: white;
-  background-color: #1ea7fd;
-}
-.storybook-button--secondary {
-  color: #333;
-  background-color: transparent;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.storybook-button--small {
-  font-size: 12px;
-  padding: 10px 16px;
-}
-.storybook-button--medium {
-  font-size: 14px;
-  padding: 11px 20px;
-}
-.storybook-button--large {
-  font-size: 16px;
-  padding: 12px 24px;
-}

package/template/components/form.component.ts

@@ -1,37 +0,0 @@
-import { Component, Output, EventEmitter } from '@angular/core';
-
-@Component({
-  selector: 'storybook-form',
-  template: `
-    <form id="interaction-test-form" (submit)="handleSubmit($event)">
-      <label>
-        Enter Value
-        <input type="text" data-testid="value" [(ngModel)]="value" required />
-      </label>
-      <button type="submit">Submit</button>
-      <p *ngIf="complete">Completed!!</p>
-    </form>
-  `,
-})
-export default class FormComponent {
-  /**
-   * Optional success handler
-   */
-  @Output()
-  onSuccess = new EventEmitter<string>();
-
-  value = '';
-
-  complete = false;
-
-  handleSubmit(event: SubmitEvent) {
-    event.preventDefault();
-    this.onSuccess.emit(this.value);
-    setTimeout(() => {
-      this.complete = true;
-    }, 500);
-    setTimeout(() => {
-      this.complete = false;
-    }, 1500);
-  }
-}

package/template/components/html.component.ts

@@ -1,22 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-
-@Component({
-  selector: 'storybook-html',
-  template: `<div [innerHTML]="safeContent"></div>`,
-})
-export default class HtmlComponent {
-  /**
-   * The HTML to render
-   *
-   * @required
-   */
-  @Input()
-  content = '';
-
-  constructor(private sanitizer: DomSanitizer) {}
-
-  get safeContent() {
-    return this.sanitizer.bypassSecurityTrustHtml(this.content);
-  }
-}

package/template/components/pre.component.ts

@@ -1,29 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'storybook-pre',
-  template: `<pre data-testid="pre" [ngStyle]="style">{{ finalText }}</pre>`,
-})
-export default class PreComponent {
-  /**
-   * Styles to apply to the component
-   */
-  @Input()
-  style?: Object;
-
-  /**
-   * An object to render
-   */
-  @Input()
-  object?: Object;
-
-  /**
-   * The code to render
-   */
-  @Input()
-  text?: string;
-
-  get finalText() {
-    return this.object ? JSON.stringify(this.object, null, 2) : this.text;
-  }
-}

package/template/stories/angular-mdx.stories.mdx

@@ -1,25 +0,0 @@
-import { global as globalThis } from '@storybook/global';
-import { moduleMetadata } from '@storybook/angular';
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-
-export const Button = globalThis.Components.Button;
-
-<Meta
-  title="angular/angular-mdx"
-  component={Button}
-  decorators={[moduleMetadata({ declarations: [Button] })]}
-/>
-
-# Angular-specific MDX Stories
-
-<Canvas>
-  <Story name="Angular Story">
-    {{
-      template: `<storybook-framework-button [label]="text" (onClick)="onClick($event)"></storybook-framework-button>`,
-      props: {
-        text: 'hello button',
-        onClick: () => {},
-      },
-    }}
-  </Story>
-</Canvas>

package/template/stories/argTypes/doc-button/doc-button.component.html

@@ -1,7 +0,0 @@
-<button [disabled]="isDisabled" [ngClass]="classes" #buttonRef>
-  <img
-    width="100"
-    src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
-  />
-  {{ label }}
-</button>

package/template/stories/argTypes/doc-button/doc-button.component.scss

@@ -1,3 +0,0 @@
-.btn-primary {
-  background-color: #ff9899;
-}