From 5dbf9b99e65bc7bc95048d01b133aa662d90dee2 Mon Sep 17 00:00:00 2001
From: Daniel Duan <dduan@squarespace.com>
Date: Tue, 1 Aug 2017 13:52:12 -0400
Subject: [PATCH] docgen info works without ts

---
 .../src/components/DocgenButton.js            | 27 +++++++++++++++++++
 .../src/{ => components}/TypedButton.js       | 27 +++++++++----------
 .../cra-kitchen-sink/src/stories/index.js     | 18 ++++++-------
 3 files changed, 49 insertions(+), 23 deletions(-)
 create mode 100644 examples/cra-kitchen-sink/src/components/DocgenButton.js
 rename examples/cra-kitchen-sink/src/{ => components}/TypedButton.js (50%)

diff --git a/examples/cra-kitchen-sink/src/components/DocgenButton.js b/examples/cra-kitchen-sink/src/components/DocgenButton.js
new file mode 100644
index 000000000000..f0e8c7f2973d
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/components/DocgenButton.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/** Button component description */
+const DocgenButton = ({ disabled, label, style, onClick }) =>
+  <button disabled={disabled} style={style} onClick={onClick}>
+    {label}
+  </button>;
+
+DocgenButton.defaultProps = {
+  disabled: false,
+  onClick: () => {},
+  style: {},
+};
+
+DocgenButton.propTypes = {
+  /** Boolean indicating whether the button should render as disabled */
+  disabled: PropTypes.bool,
+  /** button label. */
+  label: PropTypes.string.isRequired,
+  /** onClick handler */
+  onClick: PropTypes.func,
+  /** component styles */
+  style: PropTypes.shape,
+};
+
+export default DocgenButton;
diff --git a/examples/cra-kitchen-sink/src/TypedButton.js b/examples/cra-kitchen-sink/src/components/TypedButton.js
similarity index 50%
rename from examples/cra-kitchen-sink/src/TypedButton.js
rename to examples/cra-kitchen-sink/src/components/TypedButton.js
index 82066b631e1a..6d4e89a1b727 100644
--- a/examples/cra-kitchen-sink/src/TypedButton.js
+++ b/examples/cra-kitchen-sink/src/components/TypedButton.js
@@ -2,27 +2,26 @@
 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?: {}
+  /** Boolean indicating whether 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) => (
+const TypedButton = ({ disabled, label, style, onClick }: PropsType) =>
   <button disabled={disabled} style={style} onClick={onClick}>
     {label}
-  </button>
-);
+  </button>;
 
 TypedButton.defaultProps = {
-    disabled: false,
-	onClick: () => {},
-	style: {},
+  disabled: false,
+  onClick: () => {},
+  style: {},
 };
 
 export default TypedButton;
diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js
index 8aeed3b36fdf..2cd3fadb234e 100644
--- a/examples/cra-kitchen-sink/src/stories/index.js
+++ b/examples/cra-kitchen-sink/src/stories/index.js
@@ -25,7 +25,8 @@ import { Button, Welcome } from '@storybook/react/demo';
 import App from '../App';
 import Logger from './Logger';
 import Container from './Container';
-import TypedButton from '../TypedButton';
+import TypedButton from '../components/TypedButton';
+import DocgenButton from '../components/DocgenButton';
 
 const EVENTS = {
   TEST_EVENT_1: 'test-event-1',
@@ -146,14 +147,13 @@ storiesOf('Button', module)
     )
   );
 
-storiesOf('TypedButton', module)
-	.addWithInfo('TypedButton',
-        'Some Description',
-        () => <TypedButton
-			onClick={action('clicked')}
-			label="Typed Button"
-		/>,
-	)
+storiesOf('AddonInfo.TypedButton', module).addWithInfo('TypedButton', 'Some Description', () =>
+  <TypedButton onClick={action('clicked')} label="Typed Button" />
+);
+
+storiesOf('AddonInfo.DocgenButton', module).addWithInfo('DocgenButton', 'Some Description', () =>
+  <DocgenButton onClick={action('clicked')} label="Docgen Button" />
+);
 
 storiesOf('App', module).add('full app', () => <App />);