From 43ddae1d7d61c4dbbb716af9f992629b2105dcd9 Mon Sep 17 00:00:00 2001
From: Christian Murphy <christian.murphy.42@gmail.com>
Date: Mon, 20 May 2019 12:45:37 -0700
Subject: [PATCH] add typings for @storybook/html (#35598)

---
 types/storybook__html/index.d.ts              | 42 ++++++++++++++++++
 .../storybook__html/storybook__html-tests.ts  | 43 +++++++++++++++++++
 types/storybook__html/tsconfig.json           | 30 +++++++++++++
 types/storybook__html/tslint.json             |  6 +++
 4 files changed, 121 insertions(+)
 create mode 100644 types/storybook__html/index.d.ts
 create mode 100644 types/storybook__html/storybook__html-tests.ts
 create mode 100644 types/storybook__html/tsconfig.json
 create mode 100644 types/storybook__html/tslint.json

diff --git a/types/storybook__html/index.d.ts b/types/storybook__html/index.d.ts
new file mode 100644
index 0000000000..6af9ba5592
--- /dev/null
+++ b/types/storybook__html/index.d.ts
@@ -0,0 +1,42 @@
+// Type definitions for @storybook/html 5.0
+// Project: https://github.com/storybooks/storybook, https://github.com/storybooks/storybook/tree/master/app/html
+// Definitions by: Christian Murphy <https://github.com/ChristianMurphy>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+/// <reference types="webpack-env" />
+
+export type RenderFunction = () => string | string[];
+
+export interface DecoratorParameters {
+    [key: string]: any;
+}
+export type StoryDecorator = (story: RenderFunction, context: { kind: string, story: string }) => string | 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[];
diff --git a/types/storybook__html/storybook__html-tests.ts b/types/storybook__html/storybook__html-tests.ts
new file mode 100644
index 0000000000..57c7625e9e
--- /dev/null
+++ b/types/storybook__html/storybook__html-tests.ts
@@ -0,0 +1,43 @@
+import { storiesOf, setAddon, addDecorator, addParameters, configure, getStorybook, RenderFunction, Story, forceReRender, DecoratorParameters, clearDecorators } from '@storybook/html';
+
+const Decorator = (story: RenderFunction) => `<div>${story()}</div>`;
+const parameters: DecoratorParameters = { parameter: 'foo' };
+
+forceReRender();
+
+storiesOf('Welcome', module)
+    // local addDecorator
+    .addDecorator(Decorator)
+    .add('to Storybook', () => "<div></div>")
+    .add('to Storybook as Array', () => ["<div></div>", "<div></div>"])
+    .add('and a story with additional parameters', () => "<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', () => "<div></div>")
+    .addWithSideEffect('more', () => "<div></div>")
+    .add('another story', () => "<div></div>")
+    .add('to Storybook as Array', () => ["<div></div>", "<div></div>"])
+    .add('and a story with additional parameters', () => "<div></div>", parameters)
+    .addWithSideEffect('even more', () => "<div></div>");
+
+// configure
+configure(() => undefined, module);
+
+// getStorybook
+getStorybook().forEach(({ kind, stories }) => stories.forEach(({ name, render }) => render()));
diff --git a/types/storybook__html/tsconfig.json b/types/storybook__html/tsconfig.json
new file mode 100644
index 0000000000..b4999de71f
--- /dev/null
+++ b/types/storybook__html/tsconfig.json
@@ -0,0 +1,30 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "dom",
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "jsx": "preserve",
+        "typeRoots": [
+            "../"
+        ],
+        "paths": {
+            "@storybook/html": [
+                "storybook__html"
+            ]
+        },
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "storybook__html-tests.ts"
+    ]
+}
diff --git a/types/storybook__html/tslint.json b/types/storybook__html/tslint.json
new file mode 100644
index 0000000000..71ee04c4e1
--- /dev/null
+++ b/types/storybook__html/tslint.json
@@ -0,0 +1,6 @@
+{
+    "extends": "dtslint/dt.json",
+    "rules": {
+        "no-unnecessary-generics": false
+    }
+}