Move components to authentication component and add styleguide

lib/styleguide/StyleGuideRenderer.js

-import React from 'react'
-import 'xpub-fonts'
-import classes from './StyleGuideRenderer.local.css'
-
-const StyleGuideRenderer = ({ title, children, toc }) => {
-  return (
-    <div className={classes.root}>
-      <div className={classes.sidebar}>
-        <header className={classes.header}>
-          <h1 className={classes.title}>{title}</h1>
-        </header>
-
-        <nav className={classes.nav}>
-          {toc}
-        </nav>
-      </div>
-
-      <div className={classes.content}>
-        {children}
-      </div>
-    </div>
-  )
-}
-
-export default StyleGuideRenderer

lib/styleguide/StyleGuideRenderer.local.css

-.root {
-  display: grid;
-  grid-template-columns: 1fr 3fr;
-  grid-template-areas: "side content";
-  height: 100vh;
-  width: 100vw;
-}
-
-.sidebar {
-  grid-area: side;
-  display: flex;
-  flex-direction: column;
-  overflow-y: hidden;
-}
-
-.content {
-  grid-area: content;
-  padding: 1rem;
-  overflow-y: auto;
-}
-
-.header {
-  padding: 0.5rem;
-}
-
-.nav {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0.5rem;
-}
-
-.title {
-  font-family: "Fira Sans", serif;
-  font-size: 1rem;
-  margin-bottom: 0;
-  padding: 0 1rem;
-}

lib/styleguide/Wrapper.js

-import React from 'react'
-// import { Router, createMemoryHistory } from 'react-router'
-import { Provider } from 'react-redux'
-import { reducer as formReducer } from 'redux-form'
-import { createStore, combineReducers } from 'redux'
-
-import 'xpub-fonts'
-import classes from './Wrapper.local.css'
-
-const rootReducer = combineReducers({
-  form: formReducer
-})
-
-const store = createStore(rootReducer)
-
-const Wrapper = ({ children }) => (
-  <Provider store={store}>
-    <div className={classes.root}>
-      {children}
-    </div>
-  </Provider>
-)
-
-/*const Wrapper = ({ children }) => (
-  <Provider store={store}>
-    <Router history={createMemoryHistory()}>
-      <div className={classes.root}>
-        {children}
-      </div>
-    </Router>
-  </Provider>
-)*/
-
-export default Wrapper

lib/styleguide/Wrapper.local.css

-.root {
-  font-family: "Fira Sans", sans-serif;
-}

package.json

@@ -9,26 +9,28 @@
   "main": "src",
   "jsnext:main": "src",
   "dependencies": {
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
     "classnames": "^2.2.5",
-    "css-loader": "^0.28.5",
-    "file-loader": "^0.11.2",
-    "lodash": "^4.17.4",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-redux": "^5.0.6",
     "react-router": "^3.0.5",
     "redux": "^3.6.0",
-    "redux-form": "^7.0.3",
-    "style-loader": "^0.18.2",
     "xpub-fonts": "^0.0.2"
   },
   "devDependencies": {
-    "babel-preset-react-app": "^3.0.2",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-minify": "^0.2.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "css-loader": "^0.28.4",
     "faker": "^4.1.0",
+    "file-loader": "^0.11.2",
+    "xpub-styleguide": "^0.0.2",
     "react-styleguidist": "^6.0.8",
+    "style-loader": "^0.18.2",
     "webpack": "^3.5.5",
     "webpack-node-externals": "^1.6.0"
   },

src/index.js

 export { default as AppBar } from './molecules/AppBar'
-export { default as Login } from './molecules/Login'
-export { default as Signup } from './molecules/Signup'
 export { default as YesOrNo } from './molecules/YesOrNo'

src/molecules/Login.js

-import React from 'react'
-import classnames from 'classnames'
-import { Field } from 'redux-form'
-import classes from './Login.local.css'
-
- const Login = ({ loginError, handleSubmit }) => (
-  <div className={classes.root}>
-    <div className={classes.title}>
-      Login
-    </div>
-
-    {loginError && <div className={classes.error}>{loginError}</div>}
-
-    <form
-      onSubmit={handleSubmit}
-      className={classnames({ error: !!loginError, success: !loginError })}>
-      <div>
-        <label>
-          Username
-          <Field name="username" component="input" type="text"/>
-        </label>
-      </div>
-
-      <div>
-        <label>
-          Password
-          <Field name="password" component="input" type="password"/>
-        </label>
-      </div>
-
-      <div>
-        <button type="submit" className={classes.button}>Login</button>
-      </div>
-    </form>
-  </div>
-)
-
-export default Login

src/molecules/Login.local.css

-.error {
-  color: red;
-}

src/molecules/Login.md

-A login form.
-
-```js
-const { reduxForm } = require('redux-form');
-
-const LoginForm = reduxForm({ form: 'login' })(Login);
-
-<LoginForm 
-  onSubmit={values => console.log(values)}/>
-```
-
-An error is displayed at the top of the form.
-
-```js
-const { reduxForm } = require('redux-form');
-
-const LoginForm = reduxForm({ form: 'login-error' })(Login);
-
-<LoginForm 
-      loginError="There was an error"
-      onSubmit={values => console.log(values)}/>
-```
-

src/molecules/Signup.js

-import React from 'react'
-import classnames from 'classnames'
-import { Field } from 'redux-form'
-import classes from './Signup.local.css'
-
-const Signup = ({ signupError, handleSubmit }) => (
-  <div className={classes.root}>
-    <div className={classes.title}>
-      Sign up
-    </div>
-
-    {signupError && <div className={classes.error}>{signupError}</div>}
-
-    <form
-      onSubmit={handleSubmit}
-      className={classnames({ error: !!signupError, success: !signupError })}>
-      <div>
-        <label>
-          Username
-          <Field name="username" component="input" type="text"/>
-        </label>
-      </div>
-
-      <div>
-        <label>
-          Email
-          <Field name="email" component="input" type="email"/>
-        </label>
-      </div>
-
-      <div>
-        <label>
-          Password
-          <Field name="password" component="input" type="password"/>
-        </label>
-      </div>
-
-      <div>
-        <button type="submit" className={classes.button}>Sign up</button>
-      </div>
-    </form>
-  </div>
-)
-
-export default Signup

src/molecules/Signup.local.css

-.error {
-  color: red;
-}

src/molecules/Signup.md

-A signup form.
-
-```js
-const { reduxForm } = require('redux-form');
-
-const SignupForm = reduxForm({ form: 'signup' })(Signup);
-
-<SignupForm 
-      onSubmit={values => console.log(values)}/>
-```
-
-An error is displayed at the top of the form.
-
-```js
-
-const { reduxForm } = require('redux-form');
-
-const SignupForm = reduxForm({ form: 'signup-error' })(Signup);
-
-<SignupForm 
-      signupError="There was an error"
-      onSubmit={values => console.log(values)}/>
-```
-

styleguide.config.js

-const path = require('path')
+const styleguideComponents = require('xpub-styleguide')
 
 module.exports = {
   title: 'xpub-ui style guide',
-  styleguideComponents: {
-    StyleGuideRenderer: path.join(__dirname, 'lib/styleguide/StyleGuideRenderer'),
-    Wrapper: path.join(__dirname, 'lib/styleguide/Wrapper'),
-  },
+  styleguideComponents,
   context: {
     faker: 'faker',
   },

webpack.config.js

@@ -16,6 +16,9 @@ module.exports = {
   externals: [nodeExternals({
     whitelist: [/\.(?!js$).{1,5}$/i]
   })],
+  resolve: {
+    symlinks: false
+  },
   module: {
     rules: [
       {
@@ -25,12 +28,14 @@ module.exports = {
             test: /\.js$/,
             include: [
               path.join(__dirname, 'src'),
-              path.join(__dirname, 'lib'),
+              /xpub-[^/]+\/src/,
             ],
             loader: 'babel-loader',
             options: {
               presets: [
-                'react-app',
+                ['env', { modules: false }],
+                'react',
+                'stage-2'
               ],
               cacheDirectory: true,
             },
@@ -41,7 +46,7 @@ module.exports = {
             test: /\.local\.css$/,
             include: [
               path.join(__dirname, 'src'),
-              path.join(__dirname, 'lib'),
+              /xpub-[^/]+\/src/,
             ],
             use: [
               'style-loader',