@storybook/angular 7.0.0-beta.4 → 7.0.0-beta.41

package/template/stories/core/moduleMetadata/with-noop-browser-animations.stories.ts

@@ -0,0 +1,27 @@
+import { Meta, StoryFn } from '@storybook/angular';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { OpenCloseComponent } from './angular-src/open-close-component/open-close.component';
+
+export default {
+  component: OpenCloseComponent,
+} as Meta;
+
+export const WithNoopBrowserAnimations: StoryFn = () => ({
+  template: `<app-open-close></app-open-close>`,
+  moduleMetadata: {
+    declarations: [OpenCloseComponent],
+    imports: [NoopAnimationsModule],
+  },
+});
+
+WithNoopBrowserAnimations.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const opened = canvas.getByText('The box is now Open!');
+  expect(opened).toBeDefined();
+  const submitButton = canvas.getByRole('button');
+  await userEvent.click(submitButton);
+  const closed = canvas.getByText('The box is now Closed!');
+  expect(closed).toBeDefined();
+};

package/template/stories/core/parameters/bootstrap-options.stories.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'component-with-whitespace',
+  preserveWhitespaces: true,
   template: ` <div>
     <p>Some content</p>
   </div>`,
@@ -12,11 +13,6 @@ class ComponentWithWhitespace {}
 export default {
   // title: 'Core / Parameters / With Bootstrap Options',
   component: ComponentWithWhitespace,
-  parameters: {
-    bootstrapOptions: {
-      preserveWhitespaces: true,
-    },
-  },
 } as Meta;
 
 export const WithPreserveWhitespaces: StoryFn = (_args) => ({});

package/dist/client/angular/helpers.d.ts

@@ -1,8 +0,0 @@
-import { PartialStoryFn } from '@storybook/types';
-import { AngularRenderer } from '../types';
-declare global {
-    interface Window {
-        NODE_ENV: 'string' | 'development' | undefined;
-    }
-}
-export declare const renderNgApp: (storyFn: PartialStoryFn<AngularRenderer>, forced: boolean) => void;

package/dist/client/angular/helpers.js

@@ -1,150 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderNgApp = void 0;
-const global_1 = __importDefault(require("global"));
-const core_1 = require("@angular/core");
-const forms_1 = require("@angular/forms");
-const platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
-const platform_browser_1 = require("@angular/platform-browser");
-const rxjs_1 = require("rxjs");
-const app_component_1 = require("./app.component");
-const app_token_1 = require("./app.token");
-const { document } = global_1.default;
-let platform = null;
-let promises = [];
-let storyData = new rxjs_1.ReplaySubject(1);
-const moduleClass = class DynamicModule {
-};
-const componentClass = class DynamicComponent {
-};
-function storyDataFactory(data) {
-    return (ngZone) => new rxjs_1.Observable((subscriber) => {
-        const sub = data.subscribe((v) => {
-            ngZone.run(() => subscriber.next(v));
-        }, (err) => {
-            ngZone.run(() => subscriber.error(err));
-        }, () => {
-            ngZone.run(() => subscriber.complete());
-        });
-        return () => {
-            sub.unsubscribe();
-        };
-    });
-}
-const getModule = (declarations, entryComponents, bootstrap, data, moduleMetadata) => {
-    // Complete last ReplaySubject and create a new one for the current module
-    storyData.complete();
-    storyData = new rxjs_1.ReplaySubject(1);
-    storyData.next(data);
-    const moduleMeta = {
-        declarations: [...declarations, ...(moduleMetadata.declarations || [])],
-        imports: [platform_browser_1.BrowserModule, forms_1.FormsModule, ...(moduleMetadata.imports || [])],
-        providers: [
-            { provide: app_token_1.STORY, useFactory: storyDataFactory(storyData.asObservable()), deps: [core_1.NgZone] },
-            ...(moduleMetadata.providers || []),
-        ],
-        entryComponents: [...entryComponents, ...(moduleMetadata.entryComponents || [])],
-        schemas: [...(moduleMetadata.schemas || [])],
-        bootstrap: [...bootstrap],
-    };
-    return (0, core_1.NgModule)(moduleMeta)(moduleClass);
-};
-const createComponentFromTemplate = (template, styles) => {
-    return (0, core_1.Component)({
-        template,
-        styles,
-    })(componentClass);
-};
-const extractNgModuleMetadata = (importItem) => {
-    const target = importItem && importItem.ngModule ? importItem.ngModule : importItem;
-    const decoratorKey = '__annotations__';
-    const decorators = Reflect &&
-        Reflect.getOwnPropertyDescriptor &&
-        Reflect.getOwnPropertyDescriptor(target, decoratorKey)
-        ? Reflect.getOwnPropertyDescriptor(target, decoratorKey).value
-        : target[decoratorKey];
-    if (!decorators || decorators.length === 0) {
-        return null;
-    }
-    const ngModuleDecorator = decorators.find((decorator) => decorator instanceof core_1.NgModule);
-    if (!ngModuleDecorator) {
-        return null;
-    }
-    return ngModuleDecorator;
-};
-const getExistenceOfComponentInModules = (component, declarations, imports) => {
-    if (declarations && declarations.some((declaration) => declaration === component)) {
-        // Found component in declarations array
-        return true;
-    }
-    if (!imports) {
-        return false;
-    }
-    return imports.some((importItem) => {
-        const extractedNgModuleMetadata = extractNgModuleMetadata(importItem);
-        if (!extractedNgModuleMetadata) {
-            // Not an NgModule
-            return false;
-        }
-        return getExistenceOfComponentInModules(component, extractedNgModuleMetadata.declarations, extractedNgModuleMetadata.imports);
-    });
-};
-const initModule = (storyFn) => {
-    const storyObj = storyFn();
-    const { component, template, props, styles, moduleMetadata = {} } = storyObj;
-    const isCreatingComponentFromTemplate = Boolean(template);
-    const AnnotatedComponent = isCreatingComponentFromTemplate
-        ? createComponentFromTemplate(template, styles)
-        : component;
-    const componentRequiresDeclaration = isCreatingComponentFromTemplate ||
-        !getExistenceOfComponentInModules(component, moduleMetadata.declarations, moduleMetadata.imports);
-    const componentDeclarations = componentRequiresDeclaration
-        ? [app_component_1.AppComponent, AnnotatedComponent]
-        : [app_component_1.AppComponent];
-    const story = {
-        component: AnnotatedComponent,
-        props,
-    };
-    return getModule(componentDeclarations, [AnnotatedComponent], [app_component_1.AppComponent], story, moduleMetadata);
-};
-const staticRoot = document.getElementById('storybook-root');
-const insertDynamicRoot = () => {
-    const app = document.createElement('storybook-dynamic-app-root');
-    staticRoot.innerHTML = '';
-    staticRoot.appendChild(app);
-};
-const draw = (newModule) => {
-    if (!platform) {
-        insertDynamicRoot();
-        if (typeof NODE_ENV === 'string' && NODE_ENV !== 'development') {
-            try {
-                (0, core_1.enableProdMode)();
-            }
-            catch (e) {
-                //
-            }
-        }
-        platform = (0, platform_browser_dynamic_1.platformBrowserDynamic)();
-        promises.push(platform.bootstrapModule(newModule));
-    }
-    else {
-        Promise.all(promises).then((modules) => {
-            modules.forEach((mod) => mod.destroy());
-            insertDynamicRoot();
-            promises = [];
-            promises.push(platform.bootstrapModule(newModule));
-        });
-    }
-};
-const renderNgApp = (storyFn, forced) => {
-    if (!forced) {
-        draw(initModule(storyFn));
-    }
-    else {
-        storyData.next(storyFn());
-    }
-};
-exports.renderNgApp = renderNgApp;

package/dist/server/angular-read-workspace.d.ts

@@ -1,13 +0,0 @@
-import { workspaces } from '@angular-devkit/core';
-/**
- * Returns the workspace definition
- *
- * - Either from NX if it is present
- * - Either from `@angular-devkit/core` -> https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/core
- */
-export declare const readAngularWorkspaceConfig: (dirToSearch: string) => Promise<workspaces.WorkspaceDefinition>;
-export declare const getDefaultProjectName: (workspace: workspaces.WorkspaceDefinition) => string;
-export declare const findAngularProjectTarget: (workspace: workspaces.WorkspaceDefinition, projectName: string, targetName: string) => {
-    project: workspaces.ProjectDefinition;
-    target: workspaces.TargetDefinition;
-};

package/dist/server/angular-read-workspace.js

@@ -1,78 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.findAngularProjectTarget = exports.getDefaultProjectName = exports.readAngularWorkspaceConfig = void 0;
-/* eslint-disable global-require */
-const node_1 = require("@angular-devkit/core/node");
-const core_1 = require("@angular-devkit/core");
-/**
- * Returns the workspace definition
- *
- * - Either from NX if it is present
- * - Either from `@angular-devkit/core` -> https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/core
- */
-const readAngularWorkspaceConfig = async (dirToSearch) => {
-    const host = core_1.workspaces.createWorkspaceHost(new node_1.NodeJsSyncHost());
-    try {
-        /**
-         * Apologies for the following line
-         * If there's a better way to do it, let's do it
-         */
-        // catch if nx.json does not exist
-        require('@nrwl/workspace').readNxJson();
-        const nxWorkspace = require('@nrwl/workspace').readWorkspaceConfig({
-            format: 'angularCli',
-            path: dirToSearch,
-        });
-        // Use the workspace version of nx when angular looks for the angular.json file
-        host.readFile = (path) => {
-            if (typeof path === 'string' && path.endsWith('angular.json')) {
-                return Promise.resolve(JSON.stringify(nxWorkspace));
-            }
-            return host.readFile(path);
-        };
-        host.isFile = (path) => {
-            if (typeof path === 'string' && path.endsWith('angular.json')) {
-                return Promise.resolve(true);
-            }
-            return host.isFile(path);
-        };
-    }
-    catch (e) {
-        // Ignore if the client does not use NX
-    }
-    return (await core_1.workspaces.readWorkspace(dirToSearch, host)).workspace;
-};
-exports.readAngularWorkspaceConfig = readAngularWorkspaceConfig;
-const getDefaultProjectName = (workspace) => {
-    const environmentProjectName = process.env.STORYBOOK_ANGULAR_PROJECT;
-    if (environmentProjectName) {
-        return environmentProjectName;
-    }
-    if (workspace.projects.has('storybook')) {
-        return 'storybook';
-    }
-    if (workspace.extensions.defaultProject) {
-        return workspace.extensions.defaultProject;
-    }
-    const firstProjectName = workspace.projects.keys().next().value;
-    if (firstProjectName) {
-        return firstProjectName;
-    }
-    throw new Error('No angular projects found');
-};
-exports.getDefaultProjectName = getDefaultProjectName;
-const findAngularProjectTarget = (workspace, projectName, targetName) => {
-    if (!workspace.projects || !Object.keys(workspace.projects).length) {
-        throw new Error('No angular projects found');
-    }
-    const project = workspace.projects.get(projectName);
-    if (!project) {
-        throw new Error(`"${projectName}" project is not found in angular.json`);
-    }
-    if (!project.targets.has(targetName)) {
-        throw new Error(`"${targetName}" target is not found in "${projectName}" project`);
-    }
-    const target = project.targets.get(targetName);
-    return { project, target };
-};
-exports.findAngularProjectTarget = findAngularProjectTarget;

package/dist/server/utils/normalize-asset-patterns.d.ts

@@ -1,7 +0,0 @@
-import { Path, BaseException } from '@angular-devkit/core';
-import { AssetPattern } from '@angular-devkit/build-angular';
-import { AssetPatternClass } from '@angular-devkit/build-angular/src/builders/browser/schema';
-export declare class MissingAssetSourceRootException extends BaseException {
-    constructor(path: string);
-}
-export declare function normalizeAssetPatterns(assetPatterns: AssetPattern[], root: Path, projectRoot: Path, maybeSourceRoot: Path | undefined): AssetPatternClass[];

package/dist/server/utils/normalize-asset-patterns.js

@@ -1,64 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.normalizeAssetPatterns = exports.MissingAssetSourceRootException = void 0;
-/**
- * Clone of `normalizeAssetPatterns` function from angular-cli v11.2.*
- * > https://github.com/angular/angular-cli/blob/de63f41d669e42ada84f94ca1795d2791b9b45cc/packages/angular_devkit/build_angular/src/utils/normalize-asset-patterns.ts
- *
- * It is not possible to use the original because arguments have changed between version 6.1.* and 11.*.* of angular-cli
- */
-const fs_1 = require("fs");
-const core_1 = require("@angular-devkit/core");
-class MissingAssetSourceRootException extends core_1.BaseException {
-    constructor(path) {
-        super(`The ${path} asset path must start with the project source root.`);
-    }
-}
-exports.MissingAssetSourceRootException = MissingAssetSourceRootException;
-function normalizeAssetPatterns(assetPatterns, root, projectRoot, maybeSourceRoot) {
-    // When sourceRoot is not available, we default to ${projectRoot}/src.
-    const sourceRoot = maybeSourceRoot || (0, core_1.join)(projectRoot, 'src');
-    const resolvedSourceRoot = (0, core_1.resolve)(root, sourceRoot);
-    if (assetPatterns.length === 0) {
-        return [];
-    }
-    return assetPatterns.map((assetPattern) => {
-        // Normalize string asset patterns to objects.
-        if (typeof assetPattern === 'string') {
-            const assetPath = (0, core_1.normalize)(assetPattern);
-            const resolvedAssetPath = (0, core_1.resolve)(root, assetPath);
-            // Check if the string asset is within sourceRoot.
-            if (!resolvedAssetPath.startsWith(resolvedSourceRoot)) {
-                throw new MissingAssetSourceRootException(assetPattern);
-            }
-            let glob;
-            let input;
-            let isDirectory = false;
-            try {
-                isDirectory = (0, fs_1.statSync)((0, core_1.getSystemPath)(resolvedAssetPath)).isDirectory();
-            }
-            catch {
-                isDirectory = true;
-            }
-            if (isDirectory) {
-                // Folders get a recursive star glob.
-                glob = '**/*';
-                // Input directory is their original path.
-                input = assetPath;
-            }
-            else {
-                // Files are their own glob.
-                glob = (0, core_1.basename)(assetPath);
-                // Input directory is their original dirname.
-                input = (0, core_1.dirname)(assetPath);
-            }
-            // Output directory for both is the relative path from source root to input.
-            const output = (0, core_1.relative)(resolvedSourceRoot, (0, core_1.resolve)(root, input));
-            // Return the asset pattern in object format.
-            return { glob, input, output };
-        }
-        // It's already an AssetPatternObject, no need to convert.
-        return assetPattern;
-    });
-}
-exports.normalizeAssetPatterns = normalizeAssetPatterns;

package/dist/server/utils/normalize-optimization.d.ts

@@ -1,3 +0,0 @@
-import { OptimizationUnion } from '@angular-devkit/build-angular';
-import { NormalizedOptimizationOptions } from '@angular-devkit/build-angular/src/utils/normalize-optimization';
-export declare const normalizeOptimization: (options: OptimizationUnion) => NormalizedOptimizationOptions;

package/dist/server/utils/normalize-optimization.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.normalizeOptimization = void 0;
-const module_is_available_1 = require("./module-is-available");
-const importAngularCliNormalizeOptimization = () => {
-    // First we look for webpack config according to directory structure of Angular
-    // present since the version 7.2.0
-    if ((0, module_is_available_1.moduleIsAvailable)('@angular-devkit/build-angular/src/utils/normalize-optimization')) {
-        // eslint-disable-next-line global-require
-        return require('@angular-devkit/build-angular/src/utils/normalize-optimization');
-    }
-    return undefined;
-};
-const normalizeOptimization = (options) => {
-    if (importAngularCliNormalizeOptimization()) {
-        return importAngularCliNormalizeOptimization().normalizeOptimization(options);
-    }
-    // Best effort to stay compatible with 6.1.*
-    return options;
-};
-exports.normalizeOptimization = normalizeOptimization;