@storybook/angular 7.0.0-alpha.8 → 7.0.0-beta.0

package/dist/client/decorateStory.test.js

@@ -0,0 +1,335 @@
+"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;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@angular/core");
+const decorators_1 = require("./decorators");
+const decorateStory_1 = __importDefault(require("./decorateStory"));
+describe('decorateStory', () => {
+    describe('angular behavior', () => {
+        it('should use componentWrapperDecorator with args', () => {
+            const decorators = [
+                (0, decorators_1.componentWrapperDecorator)(ParentComponent, ({ args }) => args),
+                (0, decorators_1.componentWrapperDecorator)((story) => `<grandparent [grandparentInput]="grandparentInput">${story}</grandparent>`, ({ args }) => args),
+                (0, decorators_1.componentWrapperDecorator)((story) => `<great-grandparent>${story}</great-grandparent>`),
+            ];
+            const decorated = (0, decorateStory_1.default)(() => ({ 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 = [
+                (0, decorators_1.componentWrapperDecorator)(ParentComponent, {
+                    parentInput: 'Parent input',
+                    parentOutput: () => { },
+                }),
+                (0, decorators_1.componentWrapperDecorator)((story) => `<grandparent [grandparentInput]="grandparentInput">${story}</grandparent>`, {
+                    grandparentInput: 'Grandparent input',
+                    sameInput: 'Should be override by story props',
+                }),
+                (0, decorators_1.componentWrapperDecorator)((story) => `<great-grandparent>${story}</great-grandparent>`),
+            ];
+            const decorated = (0, decorateStory_1.default)(() => ({ 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 = [
+                (0, decorators_1.componentWrapperDecorator)(ParentComponent),
+                (0, decorators_1.componentWrapperDecorator)((story) => `<grandparent>${story}</grandparent>`),
+                (0, decorators_1.componentWrapperDecorator)((story) => `<great-grandparent>${story}</great-grandparent>`),
+            ];
+            const decorated = (0, decorateStory_1.default)(() => ({ 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 = (0, decorateStory_1.default)(() => ({ 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 = (0, decorateStory_1.default)(() => ({ 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 = (0, decorateStory_1.default)(() => ({}), decorators);
+            expect(decorated(makeContext({ component: FooComponent }))).toEqual({
+                template: '<great-grandparent><grandparent><parent><foo></foo></parent></grandparent></great-grandparent>',
+                userDefinedTemplate: false,
+            });
+        });
+        it('should include legacy 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 = (0, decorateStory_1.default)(() => ({ component: FooComponent }), decorators);
+            expect(decorated(makeContext({}))).toEqual({
+                template: '<great-grandparent><grandparent><parent><foo></foo></parent></grandparent></great-grandparent>',
+                component: FooComponent,
+                userDefinedTemplate: false,
+            });
+        });
+        it('should keep template with an empty value', () => {
+            const decorators = [
+                (0, decorators_1.componentWrapperDecorator)(ParentComponent),
+            ];
+            const decorated = (0, decorateStory_1.default)(() => ({ 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 = (0, decorateStory_1.default)((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 = (0, decorateStory_1.default)(() => ({ 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 = (0, decorateStory_1.default)((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 = (0, decorateStory_1.default)((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([
+    (0, core_1.Component)({
+        selector: 'foo',
+        template: `foo`,
+    })
+], FooComponent);
+let ParentComponent = class ParentComponent {
+};
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", String)
+], ParentComponent.prototype, "parentInput", void 0);
+__decorate([
+    (0, core_1.Output)(),
+    __metadata("design:type", Object)
+], ParentComponent.prototype, "parentOutput", void 0);
+ParentComponent = __decorate([
+    (0, core_1.Component)({
+        selector: 'parent',
+        template: `<ng-content></ng-content>`,
+    })
+], ParentComponent);

package/dist/client/decorators.d.ts

@@ -0,0 +1,5 @@
+import { Type } from '@angular/core';
+import { DecoratorFunction, StoryContext } from '@storybook/types';
+import { ICollection, NgModuleMetadata, AngularRenderer } from './types';
+export declare const moduleMetadata: <TArgs = any>(metadata: Partial<NgModuleMetadata>) => 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.test.d.ts

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

package/dist/client/decorators.test.js

@@ -0,0 +1,106 @@
+"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 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: {},
+    hooks: {},
+    loaded: {},
+    originalStoryFn: jest.fn(),
+    viewMode: 'story',
+    abortSignal: undefined,
+    canvasElement: undefined,
+};
+class MockModule {
+}
+class MockModuleTwo {
+}
+class MockService {
+}
+let MockComponent = class MockComponent {
+};
+MockComponent = __decorate([
+    (0, core_1.Component)({})
+], MockComponent);
+describe('moduleMetadata', () => {
+    it('should add metadata to a story without it', () => {
+        const result = (0, decorators_1.moduleMetadata)({
+            imports: [MockModule],
+            providers: [MockService],
+        })(() => ({
+            component: MockComponent,
+        }), 
+        // deepscan-disable-next-line
+        defaultContext);
+        expect(result).toEqual({
+            component: MockComponent,
+            moduleMetadata: {
+                declarations: [],
+                entryComponents: [],
+                imports: [MockModule],
+                schemas: [],
+                providers: [MockService],
+            },
+        });
+    });
+    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);
+        expect(result).toEqual({
+            component: MockComponent,
+            moduleMetadata: {
+                declarations: [],
+                entryComponents: [],
+                imports: [MockModule, MockModuleTwo],
+                schemas: [],
+                providers: [MockService],
+            },
+        });
+    });
+    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);
+        expect(result).toEqual({
+            component: MockComponent,
+            moduleMetadata: {
+                declarations: [],
+                entryComponents: [],
+                imports: [],
+                schemas: [],
+                providers: [MockService],
+            },
+        });
+    });
+});

package/dist/client/docs/__testfixtures__/doc-button/input.d.ts

@@ -0,0 +1,111 @@
+import { EventEmitter, ElementRef } from '@angular/core';
+export declare const exportedConstant = "An exported constant";
+export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge';
+export declare enum ButtonAccent {
+    'Normal' = "Normal",
+    'High' = "High"
+}
+export interface ISomeInterface {
+    one: string;
+    two: boolean;
+    three: any[];
+}
+/**
+ * This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular.
+ *
+ * It supports [markdown](https://en.wikipedia.org/wiki/Markdown), so you can embed formatted text,
+ * like **bold**, _italic_, and `inline code`.
+ *
+ * > How you like dem apples?! It's never been easier to document all your components.
+ *
+ * @string Hello world
+ * @link [Example](http://example.com)
+ * @code `ThingThing`
+ * @html <span class="badge">aaa</span>
+ */
+export declare class InputComponent<T> {
+    buttonRef: ElementRef;
+    /** Appearance style of the button. */
+    appearance: 'primary' | 'secondary';
+    /** Specify the accent-type of the button */
+    accent: ButtonAccent;
+    /** Sets the button to a disabled state. */
+    isDisabled: boolean;
+    /**
+     * The inner text of the button.
+     *
+     * @required
+     */
+    label: string;
+    /** Size of the button. */
+    size?: ButtonSize;
+    /** Specifies some arbitrary object */
+    someDataObject: ISomeInterface;
+    /**
+     * Some input you shouldn't use.
+     *
+     * @deprecated
+     */
+    somethingYouShouldNotUse: boolean;
+    /**
+     * Handler to be called when the button is clicked by a user.
+     *
+     * Will also block the emission of the event if `isDisabled` is true.
+     */
+    onClick: EventEmitter<Event>;
+    /**
+     * This is an internal method that we don't want to document and have added the `ignore` annotation to.
+     *
+     * @ignore
+     */
+    handleClick(event: Event): void;
+    private _inputValue;
+    /** Setter for `inputValue` that is also an `@Input`. */
+    set inputValue(value: string);
+    /** Getter for `inputValue`. */
+    get inputValue(): string;
+    onClickListener(btn: any): void;
+    focus: boolean;
+    /**
+     * Returns all the CSS classes for the button.
+     *
+     * @ignore
+     */
+    get classes(): string[];
+    /**
+     * @ignore
+     */
+    ignoredProperty: string;
+    /** Public value. */
+    internalProperty: string;
+    /** Private value. */
+    private _value;
+    /** Set the private value. */
+    set value(value: string | number);
+    /** Get the private value. */
+    get value(): string | number;
+    /**
+     * An internal calculation method which adds `x` and `y` together.
+     *
+     * @param x Some number you'd like to use.
+     * @param y Some other number or string you'd like to use, will have `parseInt()` applied before calculation.
+     */
+    calc(x: number, y: string | number): number;
+    /** A public method using an interface. */
+    publicMethod(things: ISomeInterface): void;
+    /**
+     * A protected method.
+     *
+     * @param id Some `id`.
+     */
+    protected protectedMethod(id?: number): void;
+    /**
+     * A private method.
+     *
+     * @param password Some `password`.
+     */
+    private privateMethod;
+    showKey: keyof T;
+    set item(item: T[]);
+    processedItem: T[];
+}