diff --git a/types/storybook__addon-knobs/index.d.ts b/types/storybook__addon-knobs/index.d.ts new file mode 100644 index 0000000000..e351d1c919 --- /dev/null +++ b/types/storybook__addon-knobs/index.d.ts @@ -0,0 +1,62 @@ +// Type definitions for @storybook/addon-knobs 3.0 +// Project: https://github.com/storybooks/storybook +// Definitions by: Joscha Feth +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.2 + +/// + +// TODO: Once TS2.3 is released, +// https://github.com/Microsoft/TypeScript/issues/14819 should be fixed. +// Then, upgrade this package's typescript version to 2.3 and +// Remove the `declare module` wrapper. +// tslint:disable-next-line no-single-declare-module +declare module '@storybook/addon-knobs' { + import * as React from 'react'; + import { RenderFunction } from '@storybook/react'; + + interface KnobOption { + value: T; + type: 'text' | 'boolean' | 'number' | 'color' | 'object' | 'select' | 'date'; + } + + interface StoryContext { + kind: string; + story: string; + } + + interface NumberOptions { + range: boolean; + min: number; + max: number; + step: number; + } + + function knob(name: string, options: KnobOption): T; + + function text(name: string, value: string | null): string; + + function boolean(name: string, value: boolean): boolean; + + function number(name: string, value: number, options?: NumberOptions): number; + + function color(name: string, value: string): string; + + function object(name: string, value: T): T; + + function select(name: string, options: { [s: string]: T }, value: string): T; + function select(name: string, options: string[], value: string): string; + + function date(name: string, value?: Date): Date; + + interface WrapStoryProps { + context?: object; + storyFn?: RenderFunction; + channel?: object; + knobStore?: object; + initialContent?: object; + } + + function withKnobs(storyFn: RenderFunction, context: StoryContext): React.ReactElement; + function withKnobsOptions(options: { debounce: boolean, timestamps: boolean }): (storyFn: RenderFunction, context: StoryContext) => React.ReactElement; +} diff --git a/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx b/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx new file mode 100644 index 0000000000..76c72f1a7d --- /dev/null +++ b/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx @@ -0,0 +1,70 @@ +import * as React from 'react'; +import { storiesOf } from '@storybook/react'; +import { + withKnobs, + withKnobsOptions, + number, + color, + object, + boolean, + text, + select, + date, + knob, +} from '@storybook/addon-knobs'; + +const stories = storiesOf('Example of Knobs', module); + +stories.addDecorator(withKnobs); +stories.addDecorator(withKnobsOptions({ debounce: true, timestamps: true })); + +stories.add('with all knobs', () => { + const name = text('Name', 'Tom Cary'); + const dob = date('DOB', new Date('January 20 1887')); + + const bold = boolean('Bold', false); + const selectedColor = color('Color', 'black'); + const favoriteNumber = number('Favorite Number', 42); + const comfortTemp = number('Comfort Temp', 72, { range: true, min: 60, max: 90, step: 1 }); + const textDecoration = select('Decoration', { + none: 'None', + underline: 'Underline', + 'line-through': 'Line-Through' + }, 'none'); + + const customStyle = object('Style', { + fontFamily: 'Arial', + padding: 20, + }); + + const genericObject: string = object('Some generic object', 'value'); + type X = 'a' | 'b'; + const genericSelect: X = select('Some generic select', { a: 'a', b: 'b'}, 'b'); + const genericKnob: X = knob('Some generic knob', { value: 'a', type: 'text' }); + + const style = Object.assign({}, customStyle, { + fontWeight: bold ? 800 : 400, + color: selectedColor, + textDecoration + }); + + return ( +
+ I'm {name} and I was born on "{dob}" +

My favorite number is {favoriteNumber}.

+

My most comfortable room temperature is {comfortTemp} degrees Fahrenheit.

+
+ ); +}); + +stories.add('dynamic knobs', () => { + const showOptional = select('Show optional', ['yes', 'no'], 'yes'); + return ( +
+
+ {text('compulsary', 'I must be here')} +
+ { showOptional === 'yes' ?
{text('optional', 'I can disapear')}
: null } +
+ ); +}); diff --git a/types/storybook__addon-knobs/tsconfig.json b/types/storybook__addon-knobs/tsconfig.json new file mode 100644 index 0000000000..952095eea1 --- /dev/null +++ b/types/storybook__addon-knobs/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "baseUrl": "../", + "jsx": "react", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "storybook__addon-knobs-tests.tsx" + ] +} diff --git a/types/storybook__addon-knobs/tslint.json b/types/storybook__addon-knobs/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/storybook__addon-knobs/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }