@storybook/angular 0.0.0-pr-23609-sha-f47ef339

package/dist/client/decorators.test.js

@@ -0,0 +1,146 @@
+"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('applicationConfig', () => {
+    const provider1 = () => { };
+    const provider2 = () => { };
+    it('should apply global config', () => {
+        expect((0, decorators_1.applicationConfig)({
+            providers: [provider1],
+        })(() => ({}), defaultContext)).toEqual({
+            applicationConfig: {
+                providers: [provider1],
+            },
+        });
+    });
+    it('should apply story config', () => {
+        expect((0, decorators_1.applicationConfig)({
+            providers: [],
+        })(() => ({
+            applicationConfig: {
+                providers: [provider2],
+            },
+        }), {
+            ...defaultContext,
+        })).toEqual({
+            applicationConfig: {
+                providers: [provider2],
+            },
+        });
+    });
+    it('should merge global and story config', () => {
+        expect((0, decorators_1.applicationConfig)({
+            providers: [provider1],
+        })(() => ({
+            applicationConfig: {
+                providers: [provider2],
+            },
+        }), {
+            ...defaultContext,
+        })).toEqual({
+            applicationConfig: {
+                providers: [provider1, provider2],
+            },
+        });
+    });
+});
+describe('moduleMetadata', () => {
+    it('should add metadata to a story without it', () => {
+        const result = (0, decorators_1.moduleMetadata)({
+            imports: [MockModule],
+            providers: [MockService],
+        })(() => ({}), 
+        // deepscan-disable-next-line
+        defaultContext);
+        expect(result).toEqual({
+            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[];
+}

package/dist/client/docs/__testfixtures__/doc-button/input.js

@@ -0,0 +1,207 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputComponent = exports.ButtonAccent = exports.exportedConstant = void 0;
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+/* eslint-disable no-console */
+/* eslint-disable no-underscore-dangle */
+const core_1 = require("@angular/core");
+exports.exportedConstant = 'An exported constant';
+var ButtonAccent;
+(function (ButtonAccent) {
+    ButtonAccent["Normal"] = "Normal";
+    ButtonAccent["High"] = "High";
+})(ButtonAccent = exports.ButtonAccent || (exports.ButtonAccent = {}));
+/**
+ * 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>
+ */
+let InputComponent = class InputComponent {
+    constructor() {
+        /** Appearance style of the button. */
+        this.appearance = 'secondary';
+        /** Sets the button to a disabled state. */
+        this.isDisabled = false;
+        /** Size of the button. */
+        this.size = 'medium';
+        /**
+         * Some input you shouldn't use.
+         *
+         * @deprecated
+         */
+        this.somethingYouShouldNotUse = false;
+        /**
+         * Handler to be called when the button is clicked by a user.
+         *
+         * Will also block the emission of the event if `isDisabled` is true.
+         */
+        this.onClick = new core_1.EventEmitter();
+        this._inputValue = 'some value';
+        this.focus = false;
+        /**
+         * @ignore
+         */
+        this.ignoredProperty = 'Ignore me';
+        /** Public value. */
+        this.internalProperty = 'Public hello';
+        /** Private value. */
+        this._value = 'Private hello';
+    }
+    /**
+     * This is an internal method that we don't want to document and have added the `ignore` annotation to.
+     *
+     * @ignore
+     */
+    handleClick(event) {
+        event.stopPropagation();
+        if (!this.isDisabled) {
+            this.onClick.emit(event);
+        }
+    }
+    /** Setter for `inputValue` that is also an `@Input`. */
+    set inputValue(value) {
+        this._inputValue = value;
+    }
+    /** Getter for `inputValue`. */
+    get inputValue() {
+        return this._inputValue;
+    }
+    onClickListener(btn) {
+        console.log('button', btn);
+    }
+    /**
+     * Returns all the CSS classes for the button.
+     *
+     * @ignore
+     */
+    get classes() {
+        return [this.appearance, this.size]
+            .filter((_class) => !!_class)
+            .map((_class) => `btn-${_class}`);
+    }
+    /** Set the private value. */
+    set value(value) {
+        this._value = `${value}`;
+    }
+    /** Get the private value. */
+    get value() {
+        return this._value;
+    }
+    /**
+     * 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, y) {
+        return x + parseInt(`${y}`, 10);
+    }
+    /** A public method using an interface. */
+    publicMethod(things) {
+        console.log(things);
+    }
+    /**
+     * A protected method.
+     *
+     * @param id Some `id`.
+     */
+    protectedMethod(id) {
+        console.log(id);
+    }
+    /**
+     * A private method.
+     *
+     * @param password Some `password`.
+     */
+    privateMethod(password) {
+        console.log(password);
+    }
+    set item(item) {
+        this.processedItem = item;
+    }
+};
+__decorate([
+    (0, core_1.ViewChild)('buttonRef', { static: false }),
+    __metadata("design:type", core_1.ElementRef)
+], InputComponent.prototype, "buttonRef", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", String)
+], InputComponent.prototype, "appearance", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", String)
+], InputComponent.prototype, "accent", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", Object)
+], InputComponent.prototype, "isDisabled", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", String)
+], InputComponent.prototype, "label", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", String)
+], InputComponent.prototype, "size", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", Object)
+], InputComponent.prototype, "someDataObject", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", Object)
+], InputComponent.prototype, "somethingYouShouldNotUse", void 0);
+__decorate([
+    (0, core_1.Output)(),
+    __metadata("design:type", Object)
+], InputComponent.prototype, "onClick", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], InputComponent.prototype, "inputValue", null);
+__decorate([
+    (0, core_1.HostListener)('click', ['$event.target']),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], InputComponent.prototype, "onClickListener", null);
+__decorate([
+    (0, core_1.HostBinding)('class.focused'),
+    __metadata("design:type", Object)
+], InputComponent.prototype, "focus", void 0);
+__decorate([
+    (0, core_1.Input)('showKeyAlias'),
+    __metadata("design:type", Object)
+], InputComponent.prototype, "showKey", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", Array),
+    __metadata("design:paramtypes", [Array])
+], InputComponent.prototype, "item", null);
+InputComponent = __decorate([
+    (0, core_1.Component)({
+        selector: 'doc-button',
+        template: '<button>{{ label }}</button>',
+    })
+], InputComponent);
+exports.InputComponent = InputComponent;

package/dist/client/docs/__testfixtures__/doc-button/tsconfig.json

@@ -0,0 +1,7 @@
+{
+    "extends": "../../../tsconfig.json",
+    "compilerOptions": {
+        "rootDir": "."
+    },
+    "include": ["./*.ts"]
+}

package/dist/client/docs/angular-properties.test.d.ts

@@ -0,0 +1 @@
+import 'jest-specific-snapshot';

package/dist/client/docs/angular-properties.test.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+require("jest-specific-snapshot");
+const path_1 = __importDefault(require("path"));
+const fs_1 = __importDefault(require("fs"));
+const tmp_1 = __importDefault(require("tmp"));
+const cross_spawn_1 = require("cross-spawn");
+// @ts-expect-error (Converted from ts-ignore)
+const { SNAPSHOT_OS } = global;
+// File hierarchy: __testfixtures__ / some-test-case / input.*
+const inputRegExp = /^input\..*$/;
+const runCompodoc = (inputPath) => {
+    const testDir = path_1.default.dirname(inputPath);
+    const { name: tmpDir, removeCallback } = tmp_1.default.dirSync();
+    // FIXME: for now, this requires a tsconfig.json for each test case. Tried generating
+    // one dynamically in tmpDir, but compodoc doesn't handle absolute paths properly
+    // (and screwed around with relative paths as well, but couldn't get it working)
+    (0, cross_spawn_1.sync)('yarn', ['compodoc', '-p', `${testDir}/tsconfig.json`, '-e', 'json', '-d', tmpDir], {
+        stdio: 'inherit',
+        shell: true,
+    });
+    const output = fs_1.default.readFileSync(`${tmpDir}/documentation.json`, 'utf8');
+    try {
+        removeCallback();
+    }
+    catch (e) {
+        //
+    }
+    return output;
+};
+describe('angular component properties', () => {
+    const fixturesDir = path_1.default.join(__dirname, '__testfixtures__');
+    fs_1.default.readdirSync(fixturesDir, { withFileTypes: true }).forEach((testEntry) => {
+        if (testEntry.isDirectory()) {
+            const testDir = path_1.default.join(fixturesDir, testEntry.name);
+            const testFile = fs_1.default.readdirSync(testDir).find((fileName) => inputRegExp.test(fileName));
+            if (testFile) {
+                // TODO: Remove this as soon as the real test is fixed
+                it('true', () => {
+                    expect(true).toEqual(true);
+                });
+                // TODO: Fix this test
+                // it(`${testEntry.name}`, () => {
+                //   const inputPath = path.join(testDir, testFile);
+                //   // snapshot the output of compodoc
+                //   const compodocOutput = runCompodoc(inputPath);
+                //   const compodocJson = JSON.parse(compodocOutput);
+                //   expect(compodocJson).toMatchSpecificSnapshot(
+                //     path.join(testDir, `compodoc-${SNAPSHOT_OS}.snapshot`)
+                //   );
+                //   // snapshot the output of addon-docs angular-properties
+                //   const componentData = findComponentByName('InputComponent', compodocJson);
+                //   const argTypes = extractArgTypesFromData(componentData);
+                //   expect(argTypes).toMatchSpecificSnapshot(path.join(testDir, 'argtypes.snapshot'));
+                // });
+            }
+        }
+    });
+});

package/dist/client/docs/compodoc.d.ts

@@ -0,0 +1,12 @@
+import { ArgTypes, SBType } from '@storybook/types';
+import { Class, CompodocJson, Component, Injectable, Method, Pipe, Property, Directive } from './types';
+export declare const isMethod: (methodOrProp: Method | Property) => methodOrProp is Method;
+export declare const setCompodocJson: (compodocJson: CompodocJson) => void;
+export declare const getCompodocJson: () => CompodocJson;
+export declare const checkValidComponentOrDirective: (component: Component | Directive) => void;
+export declare const checkValidCompodocJson: (compodocJson: CompodocJson) => void;
+export declare const findComponentByName: (name: string, compodocJson: CompodocJson) => Class | Injectable | Pipe | Directive | undefined;
+export declare const extractType: (property: Property, defaultValue: any) => SBType;
+export declare const extractArgTypesFromData: (componentData: Class | Directive | Injectable | Pipe) => ArgTypes<import("@storybook/types").Args>;
+export declare const extractArgTypes: (component: Component | Directive) => ArgTypes<import("@storybook/types").Args> | null | undefined;
+export declare const extractComponentDescription: (component: Component | Directive) => string | null | undefined;