Enable flow types in stories

app/react/README.md

@@ -39,6 +39,10 @@ Here are some featured storybooks that you can reference to see how Storybook wo
 
 If you are using Typescript, make sure you have the type definitions installed via `yarn add @types/node @types/react @types/storybook__react --dev`.
 
+## Flow
+
+Flow types are supported out of the box with the default Babel configuration.
+
 ## Docs
 
 -   [Basics](https://storybook.js.org/basics/introduction)

app/react/package.json

@@ -74,6 +74,7 @@
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",
+    "babel-preset-flow": "^6.23.0",
     "mock-fs": "^4.3.0",
     "nodemon": "^1.11.0",
     "react": "^15.6.1",

app/react/src/server/config/babel.js

@@ -15,5 +15,6 @@ module.exports = {
     require.resolve('babel-preset-es2016'),
     require.resolve('babel-preset-stage-0'),
     require.resolve('babel-preset-react'),
+    require.resolve('babel-preset-flow'),
   ],
 };

examples/cra-kitchen-sink/src/components/FlowButton.js

@@ -0,0 +1,29 @@
+// @flow
+/* eslint-disable */
+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

@@ -26,6 +26,8 @@ import App from '../App';
 import Logger from './Logger';
 import Container from './Container';
 
+import FlowButton from '../components/FlowButton';
+
 const EVENTS = {
   TEST_EVENT_1: 'test-event-1',
   TEST_EVENT_2: 'test-event-2',
@@ -264,6 +266,13 @@ storiesOf('component.Button', module)
   .add('first', () => <button>first button</button>)
   .add('second', () => <button>first second</button>);
 
+storiesOf('component.FlowButton', module).add(
+  'withInfo',
+  withInfo('This flow button should display propTypes and comments')(() =>
+    <FlowButton label="Flow Button" />
+  )
+);
+
 // Atomic
 
 storiesOf('Cells/Molecules.Atoms/simple', module)