Merge pull request #65 from frederickfogerty/Ephys-master

Add Typescript support

README.md

@@ -155,3 +155,12 @@ const label = 'Event Date';
 const defaultValue = new Date('Jan 20 2017');
 const value = date(label, defaultValue);
 ```
+
+## Typescript
+
+If you are using typescript, make sure you have the type definitions installed for the following libs:
+
+- node
+- react
+
+You can install them using `npm i -S @types/node @types/react`, assuming you are using Typescript >2.0.

example/typescript/index.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import * as moment from 'moment';
+import {
+  withKnobs,
+  number,
+  object,
+  boolean,
+  text,
+  select,
+  date
+} from '../../storybook-addon-knobs';
+
+const stories = storiesOf('Example of Knobs', module);
+
+stories.addDecorator(withKnobs);
+
+stories.add('simple example', () => (
+  <button>{text('Label', 'Hello Button')}</button>
+));
+
+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 color = select('Color', {
+    red: 'Red',
+    green: 'Green',
+    black: 'Black'
+  }, 'black');
+
+  const customStyle = object('Style', {
+    fontFamily: 'Arial',
+    padding: 20,
+  });
+
+  const style = Object.assign({}, customStyle, {
+    fontWeight: bold ? 800: 400,
+    color
+  });
+
+  return (
+    <div style={style}>
+      I'm {name} and I was born on "{moment(dob).format("DD MMM YYYY")}"
+    </div>
+  );
+})
+
+stories.add('dates Knob', () => {
+  const today = date('today');
+  const dob = date('DOB', null);
+  const myDob = date('My DOB', new Date('July 07 1993'));
+
+  return (
+    <ul style={{listStyleType:"none",listStyle:"none",paddingLeft:"15px"}}>
+      <li>
+        <p><b>Javascript Date</b> default value, passes date value</p>
+        <blockquote>
+          <code>const myDob = date('My DOB', new Date('July 07 1993'));</code>
+          <pre>// I was born in: "{moment(myDob).format("DD MMM YYYY")}"</pre>
+        </blockquote>
+      </li>
+      <li>
+        <p><b>undefined</b> default value passes today's date</p>
+        <blockquote>
+          <code>const today = date('today');</code>
+          <pre>// Today's date is: "{moment(today).format("DD MMM YYYY")}"</pre>
+        </blockquote>
+      </li>
+      <li>
+        <p><b>null</b> default value passes null value</p>
+        <blockquote>
+          <code>const dob = date('DOB', null);</code>
+          <pre>// You were born in: "{dob? moment(dob).format("DD MMM YYYY"): 'Please select date.'}"</pre>
+        </blockquote>
+      </li>
+    </ul>
+  )
+})
+
+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>
+  )
+})
+
+stories.add('without any knob', () => (
+  <button>This is a button</button>
+));

package.json

@@ -20,6 +20,9 @@
   },
   "devDependencies": {
     "@kadira/storybook": "^2.1.0",
+    "@types/mocha": "^2.2.32",
+    "@types/node": "^6.0.46",
+    "@types/react": "^0.14.42",
     "babel-cli": "^6.5.0",
     "babel-core": "^6.5.0",
     "babel-eslint": "^7.0.0",
@@ -40,10 +43,13 @@
     "jsdom": "^8.3.1",
     "mocha": "^3.1.0",
     "raw-loader": "^0.5.1",
-    "react": "^15.0.0",
+    "react": "^15.3.2",
     "react-addons-test-utils": "^15.0.0",
+    "react-dom": "^15.3.2",
     "sinon": "^1.17.3",
-    "style-loader": "^0.13.1"
+    "style-loader": "^0.13.1",
+    "typescript": "^2.0.6",
+    "typescript-definition-tester": "frederickfogerty/typescript-definition-tester#528375132cfbfd58affd401f66c02ef54813f3ce"
   },
   "peerDependencies": {
     "@kadira/storybook-addons": "^1.3.0",
@@ -61,5 +67,6 @@
   "main": "dist/index.js",
   "engines": {
     "npm": "^3.0.0"
-  }
+  },
+  "typings": "./storybook-addon-knobs.d.ts"
 }

src/tests/typescript.js

@@ -0,0 +1,16 @@
+import * as tt from 'typescript-definition-tester';
+const { describe, it } = global;
+
+
+describe('TypeScript definitions', function () {
+  this.timeout(0);
+
+  it('should compile against index.d.ts', (done) => {
+		// This will test any typescript files in /examples/typescript against the type declarations.
+    tt.compileDirectory(
+      `${__dirname}/../../example/typescript`,
+      fileName => fileName.match(/\.ts$/),
+      () => done()
+    );
+  });
+});

storybook-addon-knobs.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+interface KnobOption<T> {
+	value: T,
+	type: 'text' | 'boolean' | 'number' | 'object' | 'select' | 'date',
+}
+
+interface StoryContext {
+	kind: string,
+	story: string,
+}
+
+export function knob<T>(name: string, options: KnobOption<T>): T;
+
+export function text(name: string, value: string | null): string;
+
+export function boolean(name: string, value: boolean): boolean;
+
+export function number(name: string, value: number): number;
+
+export function object(name: string, value: Object): Object;
+
+export function select<T>(name: string, options: { [s: string]: T }, value: string): T;
+export function select(name: string, options: string[], value: string): string;
+
+export function date(name: string, value?: Date);
+
+interface IWrapStoryProps {
+  context: Object;
+  storyFn: Function;
+  channel: Object;
+  knobStore: Object;
+  initialContent: Object;
+}
+
+export function withKnobs(storyFn: Function, context: StoryContext): React.ReactElement<any>;

tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "target": "es5",
+        "noImplicitAny": false,
+        "sourceMap": false,
+		"lib": [
+			"es2015",
+			"es2016",
+			"dom"
+		],
+		"jsx": "react"
+    }
+}