From 15bfc9eedbdbe0694f30cdebc47d2cda07fd15d4 Mon Sep 17 00:00:00 2001 From: Ryan Coleman Date: Wed, 17 Jul 2019 11:44:46 -0500 Subject: [PATCH] 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 | 50 ++++++++ types/storybook__polymer/package.json | 6 + .../storybook__polymer-tests.ts | 112 ++++++++++++++++++ types/storybook__polymer/tsconfig.json | 29 +++++ types/storybook__polymer/tslint.json | 3 + 5 files changed, 200 insertions(+) create mode 100644 types/storybook__polymer/index.d.ts create mode 100644 types/storybook__polymer/package.json create mode 100644 types/storybook__polymer/storybook__polymer-tests.ts create mode 100644 types/storybook__polymer/tsconfig.json create mode 100644 types/storybook__polymer/tslint.json diff --git a/types/storybook__polymer/index.d.ts b/types/storybook__polymer/index.d.ts new file mode 100644 index 0000000000..ec53a33091 --- /dev/null +++ b/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 +// Anton Izmailov +// Dan Dean +// Ryan Coleman +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 3.2 + +// tslint:disable:no-unnecessary-generics + +/// + +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(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__polymer/package.json b/types/storybook__polymer/package.json new file mode 100644 index 0000000000..e4c8eb78d7 --- /dev/null +++ b/types/storybook__polymer/package.json @@ -0,0 +1,6 @@ +{ + "private": true, + "dependencies": { + "lit-element": "^2.2.0" + } +} diff --git a/types/storybook__polymer/storybook__polymer-tests.ts b/types/storybook__polymer/storybook__polymer-tests.ts new file mode 100644 index 0000000000..a2ee7217e6 --- /dev/null +++ b/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) =>
{story()}
; +const Decorator = (story: RenderFunction) => + html` + ${story()} + `; +const parameters: DecoratorParameters = { parameter: 'foo' }; + +forceReRender(); + +storiesOf('Welcome', module) + // local addDecorator + .addDecorator(Decorator) + .add( + 'to Storybook', + () => + html` +
+ ` + ) + .add('to Storybook as Array', () => [ + html` +
+ `, + html` +
+ `, + ]) + .add( + 'and a story with additional parameters', + () => html` +
+ `, + parameters + ); + +// global addDecorator +addDecorator(Decorator); +addParameters(parameters); +clearDecorators(); + +// setAddon +interface AnyAddon { + addWithSideEffect(this: Story & T, storyName: string, storyFn: RenderFunction): Story & T; +} +const AnyAddon: AnyAddon = { + addWithSideEffect(this: Story & T, storyName: string, storyFn: RenderFunction): Story & T { + console.log(this.kind === 'withAnyAddon'); + return this.add(storyName, storyFn); + }, +}; +setAddon(AnyAddon); +storiesOf('withAnyAddon', module) + .addWithSideEffect( + 'custom story', + () => html` +
+ ` + ) + .addWithSideEffect( + 'more', + () => html` +
+ ` + ) + .add( + 'another story', + () => html` +
+ ` + ) + .add('to Storybook as Array', () => [ + html` +
+ `, + html` +
+ `, + ]) + .add( + 'and a story with additional parameters', + () => html` +
+ `, + parameters + ) + .addWithSideEffect( + 'even more', + () => html` +
+ ` + ); + +// configure +configure(() => undefined, module); + +// getStorybook +getStorybook().forEach(({ kind, stories }) => stories.forEach(({ name, render }) => render())); diff --git a/types/storybook__polymer/tsconfig.json b/types/storybook__polymer/tsconfig.json new file mode 100644 index 0000000000..8e4adf7987 --- /dev/null +++ b/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" + ] +} \ No newline at end of file diff --git a/types/storybook__polymer/tslint.json b/types/storybook__polymer/tslint.json new file mode 100644 index 0000000000..f93cf8562a --- /dev/null +++ b/types/storybook__polymer/tslint.json @@ -0,0 +1,3 @@ +{ + "extends": "dtslint/dt.json" +}