add some legitimately working components

.gitignore

@@ -4,3 +4,4 @@ node_modules
 npm-debug.log
 
 /dist
+/docs

.npmignore

+.DS_Store
+.eslintcache
+node_modules
+npm-debug.log
+
+/docs

package.json

@@ -7,21 +7,22 @@
   "license": "MIT",
   "scripts": {
     "build": "webpack",
-    "build-docs": "NODE_ENV=doc webpack",
+    "build-docs": "install-self-peers && webpack --config ./webpack.docs.config.js",
     "lint": "eslint .",
     "prestart": "install-self-peers",
+    "poststop": "yarn install",
     "start": "BABEL_ENV=webpack webpack-dev-server --config ./webpack.dev.config.js --watch"
   },
   "dependencies": {
     "classnames": "^2.2.5",
     "prop-types": "^15.5.8",
-    "react-router-dom": "^4.1.1",
     "reactstrap": "^4.5.0"
   },
   "devDependencies": {
     "@team-griffin/install-self-peers": "^1.0.0",
     "babel-cli": "^6.24.1",
     "babel-loader": "^7.0.0",
+    "babel-preset-babili": "^0.0.12",
     "babel-preset-env": "^1.4.0",
     "babel-preset-react": "^6.24.1",
     "eslint": "^3.19.0",
@@ -29,6 +30,8 @@
     "eslint-config-edx": "^2.0.1",
     "eslint-plugin-jsx-a11y": "^4.0.0",
     "eslint-plugin-react": "^6.10.3",
+    "react-router-dom": "^4.1.1",
+    "static-site-generator-webpack-plugin": "^3.4.1",
     "webpack": "^2.4.1",
     "webpack-dev-server": "^2.4.4"
   },

src/SelectInput.js

+import React, { Component } from 'react';
+import { Input, Label } from 'reactstrap';
+import PropTypes from 'prop-types';
+
+import { newId } from './utils';
+
+class SelectInput extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleChange = this.handleChange.bind(this);
+    this.state = {
+      uuid: newId('textInput'),
+      value: this.props.value
+    };
+  }
+
+  getDescriptionElements() {
+    let descriptionElements = {};
+    if (this.props.description) {
+      const descriptionId = `description-${this.state.uuid}"`;
+
+      descriptionElements = {
+        descriptionId,
+        description: (
+          <span className="input-description" id={descriptionId}>
+            {this.props.description}
+          </span>
+        )
+      }
+    }
+    return descriptionElements;
+  }
+
+  handleChange(event) {
+    this.setState({value: event.target.value});
+    this.props.onChange(event.target.value);
+  }
+
+  getOptions() {
+    return this.props.options.map(option => {
+      return (
+        <option>{option}</option>
+      );
+    });
+  }
+
+  render() {
+    const { descriptionId, description } = this.getDescriptionElements(),
+          options = this.getOptions();
+
+    return (
+      <div className={this.props.className}>
+        <Label for={this.state.uuid}>{this.props.label}</Label>
+        <Input
+          id={this.state.uuid}
+          type="select"
+          name={this.props.name}
+          value={this.props.value}
+          aria-describedby={descriptionId}
+          onChange={this.handleChange}
+        >
+          {options}
+        </Input>
+        {description}
+      </div>
+    );
+  }
+}
+
+SelectInput.propTypes = {
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  description: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
+  ]),
+  options: PropTypes.array.isRequired,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func
+};
+
+SelectInput.defaultProps = {
+  onChange: () => {}
+};
+
+export default SelectInput;

src/TabInterface.js

+import React, { Component } from 'react';
+import { TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { newId } from './utils';
+
+class TabInterface extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      activeTab: 0,
+      uuid: newId('tabInterface')
+    };
+  }
+
+  toggle(tab) {
+    if (this.state.activeTab !== tab) {
+      this.setState({
+        activeTab: tab
+      });
+    }
+  }
+
+  genLabelId(index) {
+    return `tab-label-${this.state.uuid}-${index}`;
+  }
+
+  genPanelId(index) {
+    return `tab-panel-${this.state.uuid}-${index}`;
+  }
+
+  buildLabels() {
+    return this.props.tabLabels.map((label, i) => {
+      const selected = this.state.activeTab === i;
+
+      return (
+        <NavItem
+          aria-selected={selected}
+          aria-controls={this.genPanelId(i)}
+          id={this.genLabelId(i)}
+          key={i}
+          role="tab"
+          tabIndex={selected ? 0 : -1}
+        >
+          <NavLink
+            className={classnames({ active: selected })}
+            onClick={() => { this.toggle(i); }}
+          >
+            {label}
+          </NavLink>
+        </NavItem>
+      );
+    });
+  }
+
+  buildPanels() {
+    return this.props.panels.map((panel, i) => {
+      const selected = this.state.activeTab === i;
+
+      return (
+        <TabPane
+          aria-hidden={!selected}
+          aria-labelledby={this.genLabelId(i)}
+          id={this.genPanelId(i)}
+          key={i}
+          role="tabpanel"
+          tabId={i}
+        >
+          {panel}
+        </TabPane>
+      );
+    });
+  }
+
+  render() {
+    const labels = this.buildLabels(),
+          panels = this.buildPanels();
+
+    return (
+      <div className={this.props.className}>
+        <Nav tabs role="tablist">
+          {labels}
+        </Nav>
+        <TabContent activeTab={this.state.activeTab}>
+          {panels}
+        </TabContent>
+      </div>
+    );
+  }
+}
+
+// TODO: custom validator that ensures tabLabels and panels are the same length
+TabInterface.propTypes = {
+  tabLabels: PropTypes.array.isRequired,
+  panels: PropTypes.array.isRequired
+};
+
+export default TabInterface;

src/TextInput.js

+import React, { Component } from 'react';
+import { Input, Label } from 'reactstrap';
+import PropTypes from 'prop-types';
+
+import { newId } from './utils';
+
+class TextInput extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleChange = this.handleChange.bind(this);
+    this.state = {
+      uuid: newId('textInput'),
+      value: this.props.value
+    };
+  }
+
+  getDescriptionElements() {
+    let descriptionElements = {};
+    if (this.props.description) {
+      const descriptionId = `description-${this.state.uuid}"`;
+
+      descriptionElements = {
+        descriptionId,
+        description: (
+          <span className="input-description" id={descriptionId}>
+            {this.props.description}
+          </span>
+        )
+      }
+    }
+    return descriptionElements;
+  }
+
+  handleChange(event) {
+    this.setState({value: event.target.value});
+    this.props.onChange(event.target.value);
+  }
+
+  render() {
+    const { descriptionId, description } = this.getDescriptionElements();
+
+    return (
+      <div className={this.props.className}>
+        <Label for={this.state.uuid}>{this.props.label}</Label>
+        <Input
+          id={this.state.uuid}
+          type="text"
+          name={this.props.name}
+          value={this.state.value}
+          placeholder={this.props.placeholder}
+          aria-describedby={descriptionId}
+          onChange={this.handleChange}
+        />
+        {description}
+      </div>
+    );
+  }
+}
+
+TextInput.propTypes = {
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  description: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
+  ]),
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func
+};
+
+TextInput.defaultProps = {
+  onChange: () => {}
+};
+
+export default TextInput;

src/index.js

-import Button from './Button';
+import SelectInput from './SelectInput';
+import TabInterface from './TabInterface';
+import TextInput from './TextInput';
 
 export {
-  Button
+  SelectInput,
+  TabInterface,
+  TextInput
 };

src/utils.js

+let lastId = 0;
+
+export const newId = (prefix='id') => {
+  lastId++;
+  return `${prefix}${lastId}`;
+};

webpack.config.js

@@ -31,6 +31,14 @@ module.exports = {
       amd: 'react-addons-transition-group',
       root: ['React', 'addons', 'TransitionGroup'],
     },
+  },
+  {
+    'react-addons-css-transition-group': {
+      commonjs: 'react-addons-css-transition-group',
+      commonjs2: 'react-addons-css-transition-group',
+      amd: 'react-addons-css-transition-group',
+      root: ['React', 'addons', 'CSSTransitionGroup'],
+    },
   }],
   module: {
     rules: [
@@ -40,7 +48,7 @@ module.exports = {
         use: {
           loader: 'babel-loader',
           options: {
-            presets: ['env'],
+            presets: ['env', 'babili'],
           },
         },
       },

webpack.dev.config.js

@@ -3,60 +3,32 @@ const path = require('path');
 module.exports = {
   devtool: 'source-map',
   devServer: {
-    contentBase: path.resolve('./doc'),
+    contentBase: path.resolve('./docs'),
     historyApiFallback: true,
     stats: {
       chunks: false
     }
   },
   entry: {
-    main: './doc/App.js'
+    main: './docs/App.js'
   },
   node: {
     fs: 'empty'
   },
   output: {
     filename: 'bundle.js',
-    path: path.resolve('./doc'),
+    path: path.resolve('./docs'),
     libraryTarget: 'umd'
   },
-  // plugins: [
-  //   new CleanWebpackPlugin(['build']),
-  //   new CopyWebpackPlugin([{ from: './docs/static', to: 'assets' }]),
-  //   new webpack.DefinePlugin({
-  //     'process.env.NODE_ENV': JSON.stringify(env)
-  //   }),
-  //   new webpack.optimize.OccurenceOrderPlugin(),
-  //   new StaticSiteGeneratorPlugin('main', paths, {}),
-  //   new webpack.NoErrorsPlugin(),
-  //   new ExtractTextPlugin("/assets/style.css")
-  // ],
   module: {
     loaders: [
-      // {
-      //   test: /\.json$/,
-      //   loaders: [
-      //     'json-loader?cacheDirectory'
-      //   ]
-      // },
       {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
         loaders: [
-          'babel-loader?cacheDirectory'
-        ]
+          'babel-loader?cacheDirectory',
+        ],
       },
-      // {
-      //   test: /\.css$/,
-      //   loader: ExtractTextPlugin.extract("style-loader", "css-loader")
-      // },
-    ]
+    ],
   },
-  // resolve: {
-  //   extensions: ['', '.js', '.json'],
-  //   alias: {
-  //     'bootstrap-css': path.join(__dirname,'node_modules/bootstrap/dist/css/bootstrap.css'),
-  //     reactstrap: path.resolve('./src')
-  //   }
-  // }
 };

webpack.docs.config.js

+const path = require('path');
+const StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin');
+
+module.exports = {
+  entry: {
+    main: path.resolve('./docs/App.js'),
+  },
+  output: {
+    path: path.resolve('./docs'),
+    filename: 'bundle.js',
+    libraryTarget: 'umd',
+  },
+  plugins: [
+    new StaticSiteGeneratorPlugin('main', [
+      '/',
+      '/header/',
+      '/inputs/',
+    ], {}),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['env'],
+          },
+        },
+      },
+    ],
+  },
+};
\ No newline at end of file