Add TypedButton example showcasing Flowtype & React Docgen docs

addons/info/README.md

@@ -165,7 +165,7 @@ type PropsType = {
 };
 
 /** Button component description */
-const Button = ({ disabled, label, style, onClick }: PropType) => (
+const Button = ({ disabled, label, style, onClick }: PropsType) => (
   <button disabled={disabled} onClick={onClick}>
     {label}
   </button>

examples/cra-kitchen-sink/.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": ["env", "stage-0", "react"],
+  "plugins": [
+    ["transform-runtime", {
+      "polyfill": false,
+      "regenerator": true
+    }],
+	"react-docgen"
+  ]
+}

examples/cra-kitchen-sink/src/TypedButton.js

@@ -0,0 +1,28 @@
+// @flow
+import React from 'react';
+
+type PropsType = {
+    /** Boolean indicating wether the button should render as disabled */
+    disabled?: boolean,
+	/** button label. */
+	label: string,
+	/** onClick handler */
+	onClick?: Function,
+	/** component styles */
+	style?: {}
+};
+
+/** Button component description */
+const TypedButton = ({ disabled, label, style, onClick }: PropsType) => (
+  <button disabled={disabled} style={style} onClick={onClick}>
+    {label}
+  </button>
+);
+
+TypedButton.defaultProps = {
+    disabled: false,
+	onClick: () => {},
+	style: {},
+};
+
+export default TypedButton;

examples/cra-kitchen-sink/src/stories/index.js

@@ -25,6 +25,7 @@ import { Button, Welcome } from '@storybook/react/demo';
 import App from '../App';
 import Logger from './Logger';
 import Container from './Container';
+import TypedButton from '../TypedButton';
 
 const EVENTS = {
   TEST_EVENT_1: 'test-event-1',
@@ -145,6 +146,15 @@ storiesOf('Button', module)
     )
   );
 
+storiesOf('TypedButton', module)
+	.addWithInfo('TypedButton',
+        'Some Description',
+        () => <TypedButton
+			onClick={action('clicked')}
+			label="Typed Button"
+		/>,
+	)
+
 storiesOf('App', module).add('full app', () => <App />);
 
 storiesOf('Centered Button', module)