Merge pull request #17399 from joscha/joscha/add-@storybook/addon-knobs

add package @storybook/addon-knobs

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 <https://github.com/joscha>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.2
+
+/// <reference types="storybook__react" />
+
+// 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<T> {
+        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<T>(name: string, options: KnobOption<T>): 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<T>(name: string, value: T): T;
+
+    function select<T>(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<WrapStoryProps>;
+    function withKnobsOptions(options: { debounce: boolean, timestamps: boolean }): (storyFn: RenderFunction, context: StoryContext) => React.ReactElement<WrapStoryProps>;
+}

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<string>('Some generic object', 'value');
+  type X = 'a' | 'b';
+  const genericSelect: X = select<X>('Some generic select', { a: 'a', b: 'b'}, 'b');
+  const genericKnob: X = knob<X>('Some generic knob', { value: 'a', type: 'text' });
+
+  const style = Object.assign({}, customStyle, {
+    fontWeight: bold ? 800 : 400,
+    color: selectedColor,
+    textDecoration
+  });
+
+  return (
+    <div style={style}>
+      I'm {name} and I was born on "{dob}"
+      <p>My favorite number is {favoriteNumber}.</p>
+      <p>My most comfortable room temperature is {comfortTemp} degrees Fahrenheit.</p>
+    </div>
+  );
+});
+
+stories.add('dynamic knobs', () => {
+  const showOptional = select('Show optional', ['yes', 'no'], 'yes');
+  return (
+    <div>
+      <div>
+        {text('compulsary', 'I must be here')}
+      </div>
+      { showOptional === 'yes' ? <div>{text('optional', 'I can disapear')}</div> : null }
+    </div>
+  );
+});

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"
+    ]
+}

types/storybook__addon-knobs/tslint.json

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