@storybook/angular 9.1.0-alpha.0 → 9.1.0-alpha.10

package/dist/client/decorateStory.test.mjs

@@ -1,301 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-import { Component, Input, Output } from '@angular/core';
-import { describe, expect, it } from 'vitest';
-import { componentWrapperDecorator } from './decorators';
-import decorateStory from './decorateStory';
-// TODO: Fix. Test is infinitely running.
-describe.skip('decorateStory', () => {
-    describe('angular behavior', () => {
-        it('should use componentWrapperDecorator with args', () => {
-            const decorators = [
-                componentWrapperDecorator(ParentComponent, ({ args }) => args),
-                componentWrapperDecorator((story) => `<grandparent [grandparentInput]="grandparentInput">${story}</grandparent>`, ({ args }) => args),
-                componentWrapperDecorator((story) => `<great-grandparent>${story}</great-grandparent>`),
-            ];
-            const decorated = decorateStory(() => ({ template: '</child>' }), decorators);
-            expect(decorated(makeContext({
-                component: FooComponent,
-                args: {
-                    parentInput: 'Parent input',
-                    grandparentInput: 'grandparent input',
-                    parentOutput: () => { },
-                },
-            }))).toEqual({
-                props: {
-                    parentInput: 'Parent input',
-                    grandparentInput: 'grandparent input',
-                    parentOutput: expect.any(Function),
-                },
-                template: '<great-grandparent><grandparent [grandparentInput]="grandparentInput"><parent [parentInput]="parentInput" (parentOutput)="parentOutput($event)"></child></parent></grandparent></great-grandparent>',
-                userDefinedTemplate: true,
-            });
-        });
-        it('should use componentWrapperDecorator with input / output', () => {
-            const decorators = [
-                componentWrapperDecorator(ParentComponent, {
-                    parentInput: 'Parent input',
-                    parentOutput: () => { },
-                }),
-                componentWrapperDecorator((story) => `<grandparent [grandparentInput]="grandparentInput">${story}</grandparent>`, {
-                    grandparentInput: 'Grandparent input',
-                    sameInput: 'Should be override by story props',
-                }),
-                componentWrapperDecorator((story) => `<great-grandparent>${story}</great-grandparent>`),
-            ];
-            const decorated = decorateStory(() => ({ template: '</child>', props: { sameInput: 'Story input' } }), decorators);
-            expect(decorated(makeContext({
-                component: FooComponent,
-            }))).toEqual({
-                props: {
-                    parentInput: 'Parent input',
-                    parentOutput: expect.any(Function),
-                    grandparentInput: 'Grandparent input',
-                    sameInput: 'Story input',
-                },
-                template: '<great-grandparent><grandparent [grandparentInput]="grandparentInput"><parent [parentInput]="parentInput" (parentOutput)="parentOutput($event)"></child></parent></grandparent></great-grandparent>',
-                userDefinedTemplate: true,
-            });
-        });
-        it('should use componentWrapperDecorator', () => {
-            const decorators = [
-                componentWrapperDecorator(ParentComponent),
-                componentWrapperDecorator((story) => `<grandparent>${story}</grandparent>`),
-                componentWrapperDecorator((story) => `<great-grandparent>${story}</great-grandparent>`),
-            ];
-            const decorated = decorateStory(() => ({ template: '</child>' }), decorators);
-            expect(decorated(makeContext({ component: FooComponent }))).toEqual({
-                template: '<great-grandparent><grandparent><parent></child></parent></grandparent></great-grandparent>',
-                userDefinedTemplate: true,
-            });
-        });
-        it('should use template in preference to component parameters', () => {
-            const decorators = [
-                (s) => {
-                    const story = s();
-                    return {
-                        ...story,
-                        template: `<parent>${story.template}</parent>`,
-                    };
-                },
-                (s) => {
-                    const story = s();
-                    return {
-                        ...story,
-                        template: `<grandparent>${story.template}</grandparent>`,
-                    };
-                },
-                (s) => {
-                    const story = s();
-                    return {
-                        ...story,
-                        template: `<great-grandparent>${story.template}</great-grandparent>`,
-                    };
-                },
-            ];
-            const decorated = decorateStory(() => ({ template: '</child>' }), decorators);
-            expect(decorated(makeContext({ component: FooComponent }))).toEqual({
-                template: '<great-grandparent><grandparent><parent></child></parent></grandparent></great-grandparent>',
-                userDefinedTemplate: true,
-            });
-        });
-        it('should include story templates in decorators', () => {
-            const decorators = [
-                (s) => {
-                    const story = s();
-                    return {
-                        ...story,
-                        template: `<parent>${story.template}</parent>`,
-                    };
-                },
-                (s) => {
-                    const story = s();
-                    return {
-                        ...story,
-                        template: `<grandparent>${story.template}</grandparent>`,
-                    };
-                },
-                (s) => {
-                    const story = s();
-                    return {
-                        ...story,
-                        template: `<great-grandparent>${story.template}</great-grandparent>`,
-                    };
-                },
-            ];
-            const decorated = decorateStory(() => ({ template: '</child>' }), decorators);
-            expect(decorated(makeContext({}))).toEqual({
-                template: '<great-grandparent><grandparent><parent></child></parent></grandparent></great-grandparent>',
-                userDefinedTemplate: true,
-            });
-        });
-        it('should include story components in decorators', () => {
-            const decorators = [
-                (s) => {
-                    const story = s();
-                    return {
-                        ...story,
-                        template: `<parent>${story.template}</parent>`,
-                    };
-                },
-                (s) => {
-                    const story = s();
-                    return {
-                        ...story,
-                        template: `<grandparent>${story.template}</grandparent>`,
-                    };
-                },
-                (s) => {
-                    const story = s();
-                    return {
-                        ...story,
-                        template: `<great-grandparent>${story.template}</great-grandparent>`,
-                    };
-                },
-            ];
-            const decorated = decorateStory(() => ({}), decorators);
-            expect(decorated(makeContext({ component: FooComponent }))).toEqual({
-                template: '<great-grandparent><grandparent><parent><foo></foo></parent></grandparent></great-grandparent>',
-                userDefinedTemplate: false,
-            });
-        });
-        it('should keep template with an empty value', () => {
-            const decorators = [
-                componentWrapperDecorator(ParentComponent),
-            ];
-            const decorated = decorateStory(() => ({ template: '' }), decorators);
-            expect(decorated(makeContext({ component: FooComponent }))).toEqual({
-                template: '<parent></parent>',
-            });
-        });
-        it('should only keeps args with a control or an action in argTypes', () => {
-            const decorated = decorateStory((context) => ({
-                template: `Args available in the story : ${Object.keys(context.args).join()}`,
-            }), []);
-            expect(decorated(makeContext({
-                component: FooComponent,
-                argTypes: {
-                    withControl: { control: { type: 'object' }, name: 'withControl' },
-                    withAction: { action: 'onClick', name: 'withAction' },
-                    toRemove: { name: 'toRemove' },
-                },
-                args: {
-                    withControl: 'withControl',
-                    withAction: () => ({}),
-                    toRemove: 'toRemove',
-                },
-            }))).toEqual({
-                template: 'Args available in the story : withControl,withAction',
-                userDefinedTemplate: true,
-            });
-        });
-    });
-    describe('default behavior', () => {
-        it('calls decorators in out to in order', () => {
-            const decorators = [
-                (s) => {
-                    const story = s();
-                    return { ...story, props: { a: [...story.props.a, 1] } };
-                },
-                (s) => {
-                    const story = s();
-                    return { ...story, props: { a: [...story.props.a, 2] } };
-                },
-                (s) => {
-                    const story = s();
-                    return { ...story, props: { a: [...story.props.a, 3] } };
-                },
-            ];
-            const decorated = decorateStory(() => ({ props: { a: [0] } }), decorators);
-            expect(decorated(makeContext({}))).toEqual({ props: { a: [0, 1, 2, 3] } });
-        });
-        it('passes context through to sub decorators', () => {
-            const decorators = [
-                (s, c) => {
-                    const story = s({ ...c, k: 1 });
-                    return { ...story, props: { a: [...story.props.a, c.k] } };
-                },
-                (s, c) => {
-                    const story = s({ ...c, k: 2 });
-                    return { ...story, props: { a: [...story.props.a, c.k] } };
-                },
-                (s, c) => {
-                    const story = s({ ...c, k: 3 });
-                    return { ...story, props: { a: [...story.props.a, c.k] } };
-                },
-            ];
-            const decorated = decorateStory((c) => ({ props: { a: [c.k] } }), decorators);
-            expect(decorated(makeContext({ k: 0 }))).toEqual({ props: { a: [1, 2, 3, 0] } });
-        });
-        it('DOES NOT merge parameter or pass through parameters key in context', () => {
-            const decorators = [
-                (s, c) => {
-                    const story = s({ ...c, k: 1, parameters: { p: 1 } });
-                    return {
-                        ...story,
-                        props: { a: [...story.props.a, c.k], p: [...story.props.p, c.parameters.p] },
-                    };
-                },
-                (s, c) => {
-                    const story = s({ ...c, k: 2, parameters: { p: 2 } });
-                    return {
-                        ...story,
-                        props: { a: [...story.props.a, c.k], p: [...story.props.p, c.parameters.p] },
-                    };
-                },
-                (s, c) => {
-                    const story = s({ ...c, k: 3, parameters: { p: 3 } });
-                    return {
-                        ...story,
-                        props: { a: [...story.props.a, c.k], p: [...story.props.p, c.parameters.p] },
-                    };
-                },
-            ];
-            const decorated = decorateStory((c) => ({ props: { a: [c.k], p: [c.parameters.p] } }), decorators);
-            expect(decorated(makeContext({ k: 0, parameters: { p: 0 } }))).toEqual({
-                props: { a: [1, 2, 3, 0], p: [0, 0, 0, 0] },
-            });
-        });
-    });
-});
-function makeContext(input) {
-    return {
-        id: 'id',
-        kind: 'kind',
-        name: 'name',
-        viewMode: 'story',
-        parameters: {},
-        ...input,
-    };
-}
-let FooComponent = class FooComponent {
-};
-FooComponent = __decorate([
-    Component({
-        selector: 'foo',
-        template: `foo`,
-    })
-], FooComponent);
-let ParentComponent = class ParentComponent {
-};
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ParentComponent.prototype, "parentInput", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], ParentComponent.prototype, "parentOutput", void 0);
-ParentComponent = __decorate([
-    Component({
-        selector: 'parent',
-        template: `<ng-content></ng-content>`,
-    })
-], ParentComponent);

package/dist/client/decorators.d.ts

@@ -1,13 +0,0 @@
-import { DecoratorFunction, StoryContext } from 'storybook/internal/types';
-import { Type } from '@angular/core';
-import { ApplicationConfig } from '@angular/platform-browser';
-import { AngularRenderer, ICollection, NgModuleMetadata } from './types';
-export declare const moduleMetadata: <TArgs = any>(metadata: Partial<NgModuleMetadata>) => DecoratorFunction<AngularRenderer, TArgs>;
-/**
- * Decorator to set the config options which are available during the application bootstrap
- * operation
- */
-export declare function applicationConfig<TArgs = any>(
-/** Set of config options available during the application bootstrap operation. */
-config: ApplicationConfig): DecoratorFunction<AngularRenderer, TArgs>;
-export declare const componentWrapperDecorator: <TArgs = any>(element: Type<unknown> | ((story: string) => string), props?: ICollection | ((storyContext: StoryContext<AngularRenderer, TArgs>) => ICollection)) => DecoratorFunction<AngularRenderer, TArgs>;

package/dist/client/decorators.js

@@ -1,69 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentWrapperDecorator = exports.moduleMetadata = void 0;
-exports.applicationConfig = applicationConfig;
-const ComputesTemplateFromComponent_1 = require("./angular-beta/ComputesTemplateFromComponent");
-const NgComponentAnalyzer_1 = require("./angular-beta/utils/NgComponentAnalyzer");
-// We use `any` here as the default type rather than `Args` because we need something that is
-// castable to any component-specific args type when the user is being careful.
-const moduleMetadata = (metadata) => (storyFn) => {
-    const story = storyFn();
-    const storyMetadata = story.moduleMetadata || {};
-    metadata = metadata || {};
-    return {
-        ...story,
-        moduleMetadata: {
-            declarations: [...(metadata.declarations || []), ...(storyMetadata.declarations || [])],
-            entryComponents: [
-                ...(metadata.entryComponents || []),
-                ...(storyMetadata.entryComponents || []),
-            ],
-            imports: [...(metadata.imports || []), ...(storyMetadata.imports || [])],
-            schemas: [...(metadata.schemas || []), ...(storyMetadata.schemas || [])],
-            providers: [...(metadata.providers || []), ...(storyMetadata.providers || [])],
-        },
-    };
-};
-exports.moduleMetadata = moduleMetadata;
-/**
- * Decorator to set the config options which are available during the application bootstrap
- * operation
- */
-function applicationConfig(
-/** Set of config options available during the application bootstrap operation. */
-config) {
-    return (storyFn) => {
-        const story = storyFn();
-        const storyConfig = story.applicationConfig;
-        return {
-            ...story,
-            applicationConfig: storyConfig || config
-                ? {
-                    ...config,
-                    ...storyConfig,
-                    providers: [...(config?.providers || []), ...(storyConfig?.providers || [])],
-                }
-                : undefined,
-        };
-    };
-}
-const componentWrapperDecorator = (element, props) => (storyFn, storyContext) => {
-    const story = storyFn();
-    const currentProps = typeof props === 'function' ? props(storyContext) : props;
-    const template = (0, NgComponentAnalyzer_1.isComponent)(element)
-        ? (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(element, currentProps ?? {}, story.template)
-        : element(story.template);
-    return {
-        ...story,
-        template,
-        ...(currentProps || story.props
-            ? {
-                props: {
-                    ...currentProps,
-                    ...story.props,
-                },
-            }
-            : {}),
-    };
-};
-exports.componentWrapperDecorator = componentWrapperDecorator;

package/dist/client/decorators.mjs

@@ -1,63 +0,0 @@
-import { computesTemplateFromComponent } from './angular-beta/ComputesTemplateFromComponent';
-import { isComponent } from './angular-beta/utils/NgComponentAnalyzer';
-// We use `any` here as the default type rather than `Args` because we need something that is
-// castable to any component-specific args type when the user is being careful.
-export const moduleMetadata = (metadata) => (storyFn) => {
-    const story = storyFn();
-    const storyMetadata = story.moduleMetadata || {};
-    metadata = metadata || {};
-    return {
-        ...story,
-        moduleMetadata: {
-            declarations: [...(metadata.declarations || []), ...(storyMetadata.declarations || [])],
-            entryComponents: [
-                ...(metadata.entryComponents || []),
-                ...(storyMetadata.entryComponents || []),
-            ],
-            imports: [...(metadata.imports || []), ...(storyMetadata.imports || [])],
-            schemas: [...(metadata.schemas || []), ...(storyMetadata.schemas || [])],
-            providers: [...(metadata.providers || []), ...(storyMetadata.providers || [])],
-        },
-    };
-};
-/**
- * Decorator to set the config options which are available during the application bootstrap
- * operation
- */
-export function applicationConfig(
-/** Set of config options available during the application bootstrap operation. */
-config) {
-    return (storyFn) => {
-        const story = storyFn();
-        const storyConfig = story.applicationConfig;
-        return {
-            ...story,
-            applicationConfig: storyConfig || config
-                ? {
-                    ...config,
-                    ...storyConfig,
-                    providers: [...(config?.providers || []), ...(storyConfig?.providers || [])],
-                }
-                : undefined,
-        };
-    };
-}
-export const componentWrapperDecorator = (element, props) => (storyFn, storyContext) => {
-    const story = storyFn();
-    const currentProps = typeof props === 'function' ? props(storyContext) : props;
-    const template = isComponent(element)
-        ? computesTemplateFromComponent(element, currentProps ?? {}, story.template)
-        : element(story.template);
-    return {
-        ...story,
-        template,
-        ...(currentProps || story.props
-            ? {
-                props: {
-                    ...currentProps,
-                    ...story.props,
-                },
-            }
-            : {}),
-    };
-};

package/dist/client/decorators.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/client/decorators.test.js

@@ -1,159 +0,0 @@
-"use strict";
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const vitest_1 = require("vitest");
-const core_1 = require("@angular/core");
-const decorators_1 = require("./decorators");
-const defaultContext = {
-    componentId: 'unspecified',
-    kind: 'unspecified',
-    title: 'unspecified',
-    id: 'unspecified',
-    name: 'unspecified',
-    story: 'unspecified',
-    tags: [],
-    parameters: {},
-    initialArgs: {},
-    args: {},
-    argTypes: {},
-    globals: {},
-    globalTypes: {},
-    storyGlobals: {},
-    reporting: {
-        reports: [],
-        addReport: vitest_1.vi.fn(),
-    },
-    hooks: {},
-    loaded: {},
-    originalStoryFn: vitest_1.vi.fn(),
-    viewMode: 'story',
-    abortSignal: undefined,
-    canvasElement: undefined,
-    step: undefined,
-    context: undefined,
-    canvas: undefined,
-    userEvent: undefined,
-    mount: undefined,
-};
-defaultContext.context = defaultContext;
-class MockModule {
-}
-class MockModuleTwo {
-}
-class MockService {
-}
-let MockComponent = class MockComponent {
-};
-MockComponent = __decorate([
-    (0, core_1.Component)({})
-], MockComponent);
-(0, vitest_1.describe)('applicationConfig', () => {
-    const provider1 = () => { };
-    const provider2 = () => { };
-    (0, vitest_1.it)('should apply global config', () => {
-        (0, vitest_1.expect)((0, decorators_1.applicationConfig)({
-            providers: [provider1],
-        })(() => ({}), defaultContext)).toEqual({
-            applicationConfig: {
-                providers: [provider1],
-            },
-        });
-    });
-    (0, vitest_1.it)('should apply story config', () => {
-        (0, vitest_1.expect)((0, decorators_1.applicationConfig)({
-            providers: [],
-        })(() => ({
-            applicationConfig: {
-                providers: [provider2],
-            },
-        }), {
-            ...defaultContext,
-        })).toEqual({
-            applicationConfig: {
-                providers: [provider2],
-            },
-        });
-    });
-    (0, vitest_1.it)('should merge global and story config', () => {
-        (0, vitest_1.expect)((0, decorators_1.applicationConfig)({
-            providers: [provider1],
-        })(() => ({
-            applicationConfig: {
-                providers: [provider2],
-            },
-        }), {
-            ...defaultContext,
-        })).toEqual({
-            applicationConfig: {
-                providers: [provider1, provider2],
-            },
-        });
-    });
-});
-(0, vitest_1.describe)('moduleMetadata', () => {
-    (0, vitest_1.it)('should add metadata to a story without it', () => {
-        const result = (0, decorators_1.moduleMetadata)({
-            imports: [MockModule],
-            providers: [MockService],
-        })(() => ({}), 
-        // deepscan-disable-next-line
-        defaultContext);
-        (0, vitest_1.expect)(result).toEqual({
-            moduleMetadata: {
-                declarations: [],
-                entryComponents: [],
-                imports: [MockModule],
-                schemas: [],
-                providers: [MockService],
-            },
-        });
-    });
-    (0, vitest_1.it)('should combine with individual metadata on a story', () => {
-        const result = (0, decorators_1.moduleMetadata)({
-            imports: [MockModule],
-        })(() => ({
-            component: MockComponent,
-            moduleMetadata: {
-                imports: [MockModuleTwo],
-                providers: [MockService],
-            },
-        }), 
-        // deepscan-disable-next-line
-        defaultContext);
-        (0, vitest_1.expect)(result).toEqual({
-            component: MockComponent,
-            moduleMetadata: {
-                declarations: [],
-                entryComponents: [],
-                imports: [MockModule, MockModuleTwo],
-                schemas: [],
-                providers: [MockService],
-            },
-        });
-    });
-    (0, vitest_1.it)('should return the original metadata if passed null', () => {
-        const result = (0, decorators_1.moduleMetadata)(null)(() => ({
-            component: MockComponent,
-            moduleMetadata: {
-                providers: [MockService],
-            },
-        }), 
-        // deepscan-disable-next-line
-        defaultContext);
-        (0, vitest_1.expect)(result).toEqual({
-            component: MockComponent,
-            moduleMetadata: {
-                declarations: [],
-                entryComponents: [],
-                imports: [],
-                schemas: [],
-                providers: [MockService],
-            },
-        });
-    });
-});