new directory structure

.storybook/config.js

-import { configure } from '@kadira/storybook';
+import { configure } from '@storybook/react';
+
+const req = require.context('../src', true, /\.stories\.jsx$/)
 
 function loadStories() {
-  require('../stories');
+  req.keys().forEach((filename) => req(filename))
 }
 
 configure(loadStories, module);

.storybook/head.html

-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

package.json

@@ -27,9 +27,9 @@
     "reactstrap": "^4.6.2"
   },
   "devDependencies": {
-    "@kadira/storybook": "^2.35.3",
     "@kadira/storybook-deployer": "^1.2.0",
     "@kadira/storyshots": "^2.1.0",
+    "@storybook/react": "3.1.3",
     "babel-cli": "^6.24.1",
     "babel-loader": "^7.0.0",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",

src/CheckBox/CheckBox.stories.jsx

+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable no-console */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import CheckBox from './index';
+
+storiesOf('CheckBox', module)
+  .add('basic usage', () => (
+    <CheckBox
+      name="checkbox"
+      describedBy="checkbox"
+      label="check me out!"
+      checked="false"
+    />
+  ))
+  .add('disabled', () => (
+    <CheckBox
+      name="checkbox"
+      describedBy="checkbox"
+      label="you cannot check me out"
+      checked="false"
+      disabled
+    />
+  ))
+  .add('default checked', () => (
+    <CheckBox
+      name="checkbox"
+      describedBy="checkbox"
+      label="(un)check me out"
+      checked="true"
+    />
+  ))
+  .add('call a function', () => (
+    <CheckBox
+      name="checkbox"
+      describedBy="checkbox"
+      label="check out the console"
+      checked="false"
+      onChange={() => console.log('the checkbox changed state')}
+    />
+  ));

src/CheckBox.jsx → src/CheckBox/index.jsx

 import React from 'react';
 
-import { inputProps } from './utils/asInput';
-import newId from './utils/newId';
-
+import { inputProps } from '../utils/asInput';
+import newId from '../utils/newId';
 
 class CheckBox extends React.Component {
   constructor(props) {

src/InputSelect/InputSelect.stories.jsx

+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import InputSelect from './index';
+
+storiesOf('InputSelect', module)
+  .add('basic usage', () => (
+    <InputSelect
+      name="fruits"
+      label="Fruits"
+      value="strawberry"
+      options={[
+        'apple',
+        'orange',
+        'strawberry',
+        'banana',
+      ]}
+    />
+  ))
+  .add('separate labels and values', () => (
+    <InputSelect
+      name="new-england-states"
+      label="New England States"
+      value="RI"
+      options={[
+        { label: 'Connecticut', value: 'CN' },
+        { label: 'Maine', value: 'ME' },
+        { label: 'Massachusetts', value: 'MA' },
+        { label: 'New Hampshire', value: 'NH' },
+        { label: 'Rhode Island', value: 'RI' },
+        { label: 'Vermont', value: 'VT' },
+      ]}
+    />
+  ))
+  .add('separate option groups', () => (
+    <InputSelect
+      name="northeast-states"
+      label="Northeast States"
+      value="MD"
+      options={[
+        {
+          label: 'New England States',
+          options: [
+            { label: 'Connecticut', value: 'CN' },
+            { label: 'Maine', value: 'ME' },
+            { label: 'Massachusetts', value: 'MA' },
+            { label: 'New Hampshire', value: 'NH' },
+            { label: 'Rhode Island', value: 'RI' },
+            { label: 'Vermont', value: 'VT' },
+          ],
+        },
+        {
+          label: 'Mid Atlantic States',
+          options: [
+            { label: 'Delaware', value: 'DE' },
+            { label: 'Maryland', value: 'MD' },
+            { label: 'New Jersey', value: 'NJ' },
+            { label: 'New York', value: 'NY' },
+            { label: 'Pennsylvania', value: 'PA' },
+            { label: 'Virginia', value: 'VA' },
+            { label: 'Washington, DC', value: 'DC' },
+            { label: 'West Virginia', value: 'WV' },
+          ],
+        },
+      ]}
+    />
+  ))
+  .add('with validation', () => (
+    <InputSelect
+      name="color"
+      label="Favorite Color"
+      options={[
+        '',
+        'red',
+        'orange',
+        'yellow',
+        'green',
+        'blue',
+        'purple',
+      ]}
+      validator={(value) => {
+        let feedback = { isValid: true };
+        if (!value) {
+          feedback = {
+            isValid: false,
+            validationMessage: 'Please make a selection.',
+          };
+        }
+        return feedback;
+      }}
+    />
+  ));

src/SelectInput.jsx → src/InputSelect/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Input } from 'reactstrap';
 import PropTypes from 'prop-types';
 
-import asInput, { inputProps } from './utils/asInput';
+import asInput, { inputProps } from '../utils/asInput';
 
 class Select extends React.Component {
   static getOption(option, i) {
@@ -63,11 +63,11 @@ Select.propTypes = {
   ]).isRequired,
 };
 
-const SelectInput = asInput(Select);
+const InputSelect = asInput(Select);
 
-SelectInput.propTypes = {
-  ...SelectInput.propTypes,
+InputSelect.propTypes = {
+  ...InputSelect.propTypes,
   ...Select.propTypes,
 };
 
-export default SelectInput;
+export default InputSelect;

src/InputText/InputText.stories.jsx

+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import InputText from './index';
+
+storiesOf('InputText', module)
+  .add('minimal usage', () => (
+    <InputText
+      name="name"
+      label="First Name"
+      value="Foo Bar"
+    />
+  ))
+  .add('validation', () => (
+    <InputText
+      name="username"
+      label="Username"
+      description="The unique name that identifies you throughout the site."
+      validator={(value) => {
+        let feedback = { isValid: true };
+        if (value.length < 3) {
+          feedback = {
+            isValid: false,
+            validationMessage: 'Username must be at least 3 characters in length.',
+          };
+        }
+        return feedback;
+      }}
+    />
+  ));

src/TextInput.jsx → src/InputText/index.jsx

 import React from 'react';
 import { Input } from 'reactstrap';
 
-import asInput, { inputProps } from './utils/asInput';
+import asInput, { inputProps } from '../utils/asInput';
 
-function TextField(props) {
+function Text(props) {
   return (
     <Input
       id={props.id}
@@ -22,8 +22,8 @@ function TextField(props) {
   );
 }
 
-TextField.propTypes = inputProps;
+Text.propTypes = inputProps;
 
-const TextInput = asInput(TextField);
+const InputText = asInput(Text);
 
-export default TextInput;
+export default InputText;

src/TabInterface.jsx → src/Tabs/index.jsx

@@ -3,9 +3,9 @@ import { TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 
-import { newId } from './utils/newId';
+import { newId } from '../utils/newId';
 
-class TabInterface extends React.Component {
+class Tabs extends React.Component {
   constructor(props) {
     super(props);
 
@@ -95,7 +95,7 @@ class TabInterface extends React.Component {
 }
 
 // TODO: custom validator that ensures tabLabels and panels are the same length
-TabInterface.propTypes = {
+Tabs.propTypes = {
   tabLabels: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.String),
     PropTypes.arrayOf(PropTypes.Element),
@@ -103,4 +103,4 @@ TabInterface.propTypes = {
   panels: PropTypes.arrayOf(PropTypes.Element).isRequired,
 };
 
-export default TabInterface;
+export default Tabs;

src/index.js

-import SelectInput from './SelectInput';
-import TabInterface from './TabInterface';
-import TextInput from './TextInput';
+import CheckBox from './CheckBox';
+import InputSelect from './InputSelect';
+import InputText from './InputText';
+import Tabs from './Tabs';
 
 export {
-  SelectInput,
-  TabInterface,
-  TextInput,
+  CheckBox,
+  InputSelect,
+  InputText,
+  Tabs,
 };

stories/index.jsx

 /* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable no-console */
 import React from 'react';
-import { storiesOf, linkTo } from '@kadira/storybook';
+import { storiesOf, linkTo } from '@storybook/react';
 
-import TextInput from '../src/TextInput';
-import SelectInput from '../src/SelectInput';
-import CheckBox from '../src/CheckBox';
 import Welcome from './Welcome';
 
 storiesOf('Welcome', module)
   .add('to Storybook', () => (
     <Welcome showApp={linkTo('Button')} />
   ));
-
-storiesOf('TextInput', module)
-  .add('minimal usage', () => (
-    <TextInput
-      name="name"
-      label="First Name"
-      value="Foo Bar"
-    />
-  ))
-  .add('validation', () => (
-    <TextInput
-      name="username"
-      label="Username"
-      description="The unique name that identifies you throughout the site."
-      validator={(value) => {
-        let feedback = { isValid: true };
-        if (value.length < 3) {
-          feedback = {
-            isValid: false,
-            validationMessage: 'Username must be at least 3 characters in length.',
-          };
-        }
-        return feedback;
-      }}
-    />
-  ));
-
-storiesOf('SelectInput', module)
-  .add('basic usage', () => (
-    <SelectInput
-      name="fruits"
-      label="Fruits"
-      value="strawberry"
-      options={[
-        'apple',
-        'orange',
-        'strawberry',
-        'banana',
-      ]}
-    />
-  ))
-  .add('separate labels and values', () => (
-    <SelectInput
-      name="new-england-states"
-      label="New England States"
-      value="RI"
-      options={[
-        { label: 'Connecticut', value: 'CN' },
-        { label: 'Maine', value: 'ME' },
-        { label: 'Massachusetts', value: 'MA' },
-        { label: 'New Hampshire', value: 'NH' },
-        { label: 'Rhode Island', value: 'RI' },
-        { label: 'Vermont', value: 'VT' },
-      ]}
-    />
-  ))
-  .add('separate option groups', () => (
-    <SelectInput
-      name="northeast-states"
-      label="Northeast States"
-      value="MD"
-      options={[
-        {
-          label: 'New England States',
-          options: [
-            { label: 'Connecticut', value: 'CN' },
-            { label: 'Maine', value: 'ME' },
-            { label: 'Massachusetts', value: 'MA' },
-            { label: 'New Hampshire', value: 'NH' },
-            { label: 'Rhode Island', value: 'RI' },
-            { label: 'Vermont', value: 'VT' },
-          ],
-        },
-        {
-          label: 'Mid Atlantic States',
-          options: [
-            { label: 'Delaware', value: 'DE' },
-            { label: 'Maryland', value: 'MD' },
-            { label: 'New Jersey', value: 'NJ' },
-            { label: 'New York', value: 'NY' },
-            { label: 'Pennsylvania', value: 'PA' },
-            { label: 'Virginia', value: 'VA' },
-            { label: 'Washington, DC', value: 'DC' },
-            { label: 'West Virginia', value: 'WV' },
-          ],
-        },
-      ]}
-    />
-  ))
-  .add('with validation', () => (
-    <SelectInput
-      name="color"
-      label="Favorite Color"
-      options={[
-        '',
-        'red',
-        'orange',
-        'yellow',
-        'green',
-        'blue',
-        'purple',
-      ]}
-      validator={(value) => {
-        let feedback = { isValid: true };
-        if (!value) {
-          feedback = {
-            isValid: false,
-            validationMessage: 'Please make a selection.',
-          };
-        }
-        return feedback;
-      }}
-    />
-  ));
-
-storiesOf('CheckBox', module)
-  .add('basic usage', () => (
-    <CheckBox
-      name="checkbox"
-      describedBy="checkbox"
-      label="check me out!"
-      checked="false"
-    />
-  ))
-  .add('disabled', () => (
-    <CheckBox
-      name="checkbox"
-      describedBy="checkbox"
-      label="you cannot check me out"
-      checked="false"
-      disabled
-    />
-  ))
-  .add('default checked', () => (
-    <CheckBox
-      name="checkbox"
-      describedBy="checkbox"
-      label="(un)check me out"
-      checked="true"
-    />
-  ))
-  .add('call a function', () => (
-    <CheckBox
-      name="checkbox"
-      describedBy="checkbox"
-      label="check out the console"
-      checked="false"
-      onChange={() => console.log('the checkbox changed state')}
-    />
-  ));