initial commit

brigand · Feb 26, 2017 · 70004e1 · 70004e1
commit 70004e1
Show file tree

Hide file tree

Showing 19 changed files with 7,251 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,18 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
diff --git a/README.md b/README.md
diff --git a/package.json b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "config-wizard",
+  "version": "0.1.0",
+  "private": true,
+  "homepage": "https://brigand.github.io/config-wizard",
+  "dependencies": {
+    "react": "15.4.2",
+    "react-dom": "15.4.2"
+  },
+  "devDependencies": {
+    "gh-pages": "^0.12.0",
+    "react-scripts": "0.9.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "deploy": "gh-pages -d build",
+    "predeploy": "npm run build"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <title>React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
+
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,36 @@
+body, html, #root {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+.App {
+
+}
+
+.App__Header {
+  text-align: center;
+  font-size: 1.25em;
+  color: #666;
+  font-weight: normal;
+}
+
+.App__Header__Site {
+  font-weight: bolder;
+  color: hotpink;
+}
+
+.App__GH {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.3em 0.6em;
+  background: #eee;
+  color: #333;
+  text-decoration: none;
+}
+
+.App__GH:hover {
+  color: hotpink;
+  text-decoration: underline;
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import Home from './sites/home/Home';
+import BabelSite from './sites/babelrc/BabelSite';
+import getCurrentSite from './utils/getCurrentSite';
+import './App.css';
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      site: getCurrentSite(),
+    }
+  }
+  render() {
+    return (
+      <div className="App">
+        <h1 className="App__Header">
+          {`Config Wizard:`} <strong className="App__Header__Site">{this.getTitle()}</strong>
+        </h1>
+        <a className="App__GH" href="https://github.com/brigand/config-wizard" target="_blank">
+          View on Github
+        </a>
+        <div className="App__Content">
+          {this.renderSite()}
+        </div>
+      </div>
+    );
+  }
+
+  getTitle() {
+    const {site} = this.state;
+    if (site === null) {
+      return 'Home';
+    }
+    if (site === 'babelrc') {
+      return '.babelrc';
+    }
+    if (site === 'eslintrc') {
+      return '.eslintrc';
+    }
+  }
+
+  renderSite() {
+    const {site} = this.state;
+    if (site === null) {
+      return <Home />
+    }
+    if (site === 'babelrc') {
+      return <BabelSite />;
+    }
+    return <div>unknown site</div>;
+  }
+}
+
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+});
diff --git a/src/atoms/Button.css b/src/atoms/Button.css
@@ -0,0 +1,24 @@
+button.Button {
+  padding: 0.2em 0.4em;
+  margin: 0 0.1em;
+  border: none;
+  background: #7DF9FF;
+  color: white;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+  font-size: 1.15em;
+  transition: background 0.15s;
+}
+
+button.Button:focus, button.Button:active {
+  background: #FFA6D2;
+  outline: none;
+  box-shadow: 0 0 0.25em rgba(125,249,255, 1)
+}
+
+button.Button--active {
+  background: hotpink;
+}
+
+button.Button--active.Button:focus {
+  background: #E62284;
+}
diff --git a/src/atoms/Button.js b/src/atoms/Button.js
@@ -0,0 +1,33 @@
+import React, {PropTypes} from 'react';
+import './Button.css';
+
+export default class Button extends React.Component {
+  static propTypes = {
+    kind: PropTypes.oneOf(['primary', 'secondary']),
+    active: PropTypes.bool,
+    children: PropTypes.any.isRequired,
+    type: PropTypes.oneOf(['button', 'submit']),
+  };
+
+  static defaultProps = {
+    kind: 'primary',
+    type: 'button',
+  };
+
+  render() {
+    let className = 'Button';
+    className = `${className} Button--${this.props.kind}`;
+    if (this.props.active) {
+      className = `${className} Button--active`;
+    }
+    return (
+      <button
+        className={className}
+        type={this.props.type}
+        onClick={this.props.onClick}
+      >
+        {this.props.children}
+      </button>
+    );
+  }
+}
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import './index.css';
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+);
diff --git a/src/sites/babelrc/BabelSite.css b/src/sites/babelrc/BabelSite.css
@@ -0,0 +1,7 @@
+.BabelSite {
+  margin: 1em auto;
+  padding: 1em;
+  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1);
+  width: 45em;
+  max-width: 80%;
+}
diff --git a/src/sites/babelrc/BabelSite.js b/src/sites/babelrc/BabelSite.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import Button from '../../atoms/Button';
+import {EDGES} from './babelConstants';
+import './BabelSite.css';
+
+export default
+class BabelSite extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      edge: null,
+    };
+  }
+  render() {
+    return (
+      <div className="BabelSite">
+        <div className="BabelSite__Section">
+          {this.renderEdgeButton(EDGES.ids.safe)}
+          {this.renderEdgeButton(EDGES.ids.cutting)}
+          {this.renderEdgeButton(EDGES.ids.bleeding)}
+        </div>
+      </div>
+    );
+  }
+
+  renderEdgeButton(id) {
+    const text = EDGES.texts[id];
+    if (!text) {
+      throw new Error(`Invalid edge id ${id}`);
+    }
+    return (
+      <Button
+        active={this.state.edge === id}
+        onClick={() => {
+          this.setState({edge: id});
+        }}
+      >{text}</Button>
+    );
+  }
+}
diff --git a/src/sites/babelrc/babelConstants.js b/src/sites/babelrc/babelConstants.js
@@ -0,0 +1,19 @@
+// babelConstants
+
+const addHelpers = (obj) => {
+  const keys = Object.keys(obj.texts || obj.ids);
+  obj.enum = keys;
+  obj.ids = keys.reduce((acc, key) => {
+    acc[key] = key;
+    return acc;
+  }, {});
+  return obj;
+};
+
+export const EDGES = addHelpers({
+  texts: {
+    safe: 'Play it safe',
+    cutting: 'Cutting edge',
+    bleeding: 'Bleeding Edge',
+  },
+});
diff --git a/src/sites/home/Home.css b/src/sites/home/Home.css
@@ -0,0 +1,13 @@
+.Home {
+  margin: 1em auto;
+  width: 30em;
+  max-width: 75%;
+}
+
+.Home__List {
+
+}
+
+.Home__Item {
+
+}
diff --git a/src/sites/home/Home.js b/src/sites/home/Home.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import './Home.css';
+
+export default
+class Home extends React.Component {
+  static propTypes = {
+
+  };
+
+  render() {
+    return (
+      <div className="Home">
+        {`Welcome to the config wizard. Chose a config type:`}
+        <ul className="Home__List">
+          <li className="Home__Item">
+            <a href="?babelrc">babelrc</a>
+          </li>
+        </ul>
+      </div>
+    );
+  }
+}
diff --git a/src/utils/getCurrentSite.js b/src/utils/getCurrentSite.js
@@ -0,0 +1,15 @@
+const getCurrentSite = () => {
+  const url = location.search.slice(1);
+  if (url.indexOf('babelrc') === 0) {
+    return 'babelrc';
+  }
+
+  if (url.indexOf('eslintrc') === 0) {
+    return 'eslintrc';
+  }
+
+  return null;
+};
+
+module.exports = getCurrentSite;
+