add @storybook/polymer (#36908)

* adds in typedefs for @storybook/polymer

* adds in depenedencies for @storybook/polymer

* update version for @storybook/polymer

* update @storybook/polymer version to remove patch

* downgrade ts version and remove tslint rule

* removes rogue comma

* update ts version to 3.0 to support unknown type

* update ts version to 3.2 to support bigint

* disabling tslint rule

types/storybook__polymer/index.d.ts

@@ -0,0 +1,50 @@
+// Type definitions for @storybook/polymer 5.1
+// Project: https://github.com/storybookjs/storybook, https://github.com/storybookjs/storybook/tree/master/app/polymer
+// Definitions by: Joscha Feth <https://github.com/joscha>
+//                 Anton Izmailov <https://github.com/wapgear>
+//                 Dan Dean <https://github.com/dandean>
+//                 Ryan Coleman <https://github.com/ryuhhnn>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 3.2
+
+// tslint:disable:no-unnecessary-generics
+
+/// <reference types="webpack-env" />
+
+import { TemplateResult, SVGTemplateResult } from 'lit-element';
+
+export type Renderable = TemplateResult | SVGTemplateResult;
+export type RenderFunction = () => Renderable | Renderable[];
+
+export interface DecoratorParameters {
+    [key: string]: any;
+}
+export type StoryDecorator = (story: RenderFunction, context: { kind: string; story: string }) => Renderable | null;
+
+export interface Story {
+    readonly kind: string;
+    add(storyName: string, callback: RenderFunction, parameters?: DecoratorParameters): this;
+    addDecorator(decorator: StoryDecorator): this;
+    addParameters(parameters: DecoratorParameters): this;
+}
+
+export function addDecorator(decorator: StoryDecorator): void;
+export function addParameters(parameters: DecoratorParameters): void;
+export function clearDecorators(): void;
+export function configure(fn: () => void, module: NodeModule): void;
+export function setAddon(addon: object): void;
+export function storiesOf(name: string, module: NodeModule): Story;
+export function storiesOf<T>(name: string, module: NodeModule): Story & T;
+export function forceReRender(): void;
+
+export interface StoryObject {
+    name: string;
+    render: RenderFunction;
+}
+
+export interface StoryBucket {
+    kind: string;
+    stories: StoryObject[];
+}
+
+export function getStorybook(): StoryBucket[];

types/storybook__polymer/package.json

@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "dependencies": {
+      "lit-element": "^2.2.0"
+  }
+}

types/storybook__polymer/storybook__polymer-tests.ts

@@ -0,0 +1,112 @@
+import {
+    storiesOf,
+    setAddon,
+    addDecorator,
+    addParameters,
+    configure,
+    getStorybook,
+    RenderFunction,
+    Story,
+    forceReRender,
+    DecoratorParameters,
+    clearDecorators,
+} from '@storybook/polymer';
+import { html } from 'lit-element';
+
+// const Decorator = (story: RenderFunction) => <div>{story()}</div>;
+const Decorator = (story: RenderFunction) =>
+    html`
+        ${story()}
+    `;
+const parameters: DecoratorParameters = { parameter: 'foo' };
+
+forceReRender();
+
+storiesOf('Welcome', module)
+    // local addDecorator
+    .addDecorator(Decorator)
+    .add(
+        'to Storybook',
+        () =>
+            html`
+                <div></div>
+            `
+    )
+    .add('to Storybook as Array', () => [
+        html`
+            <div></div>
+        `,
+        html`
+            <div></div>
+        `,
+    ])
+    .add(
+        'and a story with additional parameters',
+        () => html`
+            <div></div>
+        `,
+        parameters
+    );
+
+// global addDecorator
+addDecorator(Decorator);
+addParameters(parameters);
+clearDecorators();
+
+// setAddon
+interface AnyAddon {
+    addWithSideEffect<T>(this: Story & T, storyName: string, storyFn: RenderFunction): Story & T;
+}
+const AnyAddon: AnyAddon = {
+    addWithSideEffect<T>(this: Story & T, storyName: string, storyFn: RenderFunction): Story & T {
+        console.log(this.kind === 'withAnyAddon');
+        return this.add(storyName, storyFn);
+    },
+};
+setAddon(AnyAddon);
+storiesOf<AnyAddon>('withAnyAddon', module)
+    .addWithSideEffect(
+        'custom story',
+        () => html`
+            <div></div>
+        `
+    )
+    .addWithSideEffect(
+        'more',
+        () => html`
+            <div></div>
+        `
+    )
+    .add(
+        'another story',
+        () => html`
+            <div></div>
+        `
+    )
+    .add('to Storybook as Array', () => [
+        html`
+            <div></div>
+        `,
+        html`
+            <div></div>
+        `,
+    ])
+    .add(
+        'and a story with additional parameters',
+        () => html`
+            <div></div>
+        `,
+        parameters
+    )
+    .addWithSideEffect(
+        'even more',
+        () => html`
+            <div></div>
+        `
+    );
+
+// configure
+configure(() => undefined, module);
+
+// getStorybook
+getStorybook().forEach(({ kind, stories }) => stories.forEach(({ name, render }) => render()));

types/storybook__polymer/tsconfig.json

@@ -0,0 +1,29 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "dom",
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "paths": {
+            "@storybook/polymer": [
+                "storybook__polymer"
+            ]
+        },
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "storybook__polymer-tests.ts"
+    ]
+}

types/storybook__polymer/tslint.json

@@ -0,0 +1,3 @@
+{
+    "extends": "dtslint/dt.json"
+}