Split out initial code

FeedTheOrange · May 18, 2018 · e22c040 · e22c040
1 parent c534761
commit e22c040
Show file tree

Hide file tree

Showing 21 changed files with 216 additions and 187 deletions.
diff --git a/.storybook/config.js b/.storybook/config.js
diff --git a/config/setupTests.js b/config/setupTests.js
@@ -0,0 +1,5 @@
+// setup file
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
diff --git a/.storybook/addons.js → config/storybook/addons.js b/.storybook/addons.js → config/storybook/addons.js
diff --git a/config/storybook/config.js b/config/storybook/config.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import { configure, addDecorator, setAddon } from '@storybook/react';
+
+import { setOptions } from '@storybook/addon-options';
+import { withKnobs } from '@storybook/addon-knobs/react';
+import JSXAddon from 'storybook-addon-jsx';
+import styles from "@sambego/storybook-styles";
+
+import Provider from './Provider';
+import { MemoryRouter } from 'react-router';
+
+import configureStore from '../src/bootstrap/configureStore';
+
+addDecorator(story => <Provider story={story()} />);
+addDecorator(story => <MemoryRouter>{story()}</MemoryRouter>)
+addDecorator(styles({
+  boxSizing: 'border-box',
+  fontFamily: "'Helvetica Neue','Helvetica','Arial',sans-serif",
+  fontSize: '16px',
+  margin: 0,
+}))
+setAddon(JSXAddon)
+
+const req = require.context('../src/components/', true, /story\.(jsx|js)$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);
diff --git a/package.json b/package.json
@@ -61,7 +61,7 @@
     "build": "node scripts/build.js",
     "test": "node scripts/test.js --env=jsdom",
     "lint": "eslint . --fix",
-    "storybook": "start-storybook -p 9009 -s public",
+    "storybook": "start-storybook -p 9009 -s public -c config/storybook",
     "build-storybook": "build-storybook -s public"
   },
   "devDependencies": {
@@ -89,7 +89,8 @@
       "src/**/*.{js,jsx,mjs}"
     ],
     "setupFiles": [
-      "<rootDir>/config/polyfills.js"
+      "<rootDir>/config/polyfills.js",
+      "<rootDir>/config/setupTests.js"
     ],
     "testMatch": [
       "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",

diff --git a/public/index.html b/public/index.html
@@ -1,40 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <title>Loading...</title>
+</head>
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+</body>
 </html>
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/containers/layout/App.jsx b/src/containers/layout/App.jsx
@@ -0,0 +1,14 @@
+import React, { Fragment } from 'react';
+import Router from '../../init/router';
+
+const App = () => (
+  <Fragment>
+    <header></header>
+    <main id="main">
+      <Router />
+    </main>
+    <footer id="footer"></footer>
+  </Fragment>
+);
+
+export default App;
diff --git a/src/index.css b/src/index.css
diff --git a/src/index.js b/src/index.js
@@ -1,8 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import initApp from './init';
 import registerServiceWorker from './registerServiceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+initApp();
 registerServiceWorker();
diff --git a/src/init/dev.js b/src/init/dev.js
@@ -0,0 +1,4 @@
+// logging
+import { createLogger } from 'redux-logger';
+
+exports.initDev = (middleware) => middleware.push(createLogger());
diff --git a/src/init/index.jsx b/src/init/index.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { render } from 'react-snapshot';
+
+// redux / state
+import { Provider } from 'react-redux';
+import thunk from 'redux-thunk';
+
+// routing
+import createHistory from 'history/createBrowserHistory';
+import { BrowserRouter } from 'react-router-dom';
+import { routerMiddleware } from 'react-router-redux';
+
+// app
+import initStore from './store';
+import App from '../containers/layout/App';
+import styleInit from './styledComponents';
+
+// api (todo make it an import)
+const Api = {};
+
+// middleware
+const history = createHistory();
+const middleware = [routerMiddleware(history), thunk.withExtraArgument(Api)];
+if (process.env.NODE_ENV !== 'production') {
+  const initDev = require('./dev.js');
+  initDev(middleware);
+}
+
+const store = initStore(middleware);
+
+styleInit();
+
+// todo consider using ConnectedRouter
+export default function init() {
+  render(
+   <Provider store={store}>
+     <BrowserRouter>
+       <App />
+     </BrowserRouter>
+   </Provider>,
+   document.getElementById('root'),
+  );
+}
diff --git a/src/init/router.jsx b/src/init/router.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+
+const PlaceholderPage = (<div>Placeholder</div>);
+
+const Router = () => (
+  <Switch>
+    <Route path="/" component={PlaceholderPage} />
+  </Switch>
+);
+
+export default Router;
diff --git a/src/init/store.js b/src/init/store.js
@@ -0,0 +1,13 @@
+import { createStore, combineReducers, applyMiddleware } from 'redux';
+import { routerReducer } from 'react-router-redux';
+
+const combinedReducers = combineReducers({
+  router: routerReducer,
+});
+
+const initState = {};
+
+const configureStore = (middleware = []) =>
+  createStore(combinedReducers, initState, applyMiddleware(...middleware));
+
+export default configureStore;
diff --git a/src/init/styledcomponents.js b/src/init/styledcomponents.js
@@ -0,0 +1,67 @@
+// these sizes are arbitrary and you can set them to whatever you wish
+import { css, injectGlobal } from 'styled-components';
+
+// global styles
+export default () => injectGlobal(`
+  body {
+    box-sizing: border-box;
+    font-family: 'Helvetica Neue','Helvetica','Arial',sans-serif;
+    font-size: 16px;
+    margin: 0;
+    padding: 0
+  }
+`);
+
+// Helpers for accessability purposes
+export const a11y = {
+  srOnly: () => css`
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    clip-path: inset(50%);
+    border: 0;
+   `,
+  srOnlyFocus: () => css`
+    &:active, &:focus {
+      position: static;
+      width: auto;
+      height: auto;
+      overflow: visible;
+      clip: auto;
+      white-space: normal;
+      clip-path: none;
+    }
+   `,
+  focus: () => css`
+    &:active, &:focus {
+      outline: 1px dashed #333;
+      outline-offset: 2px;
+      text-decoration: underline;
+    }
+   `,
+};
+
+// media queries
+const sizes = {
+  mobile: 1000,
+};
+
+// iterate through the sizes and create a media template
+export const media = Object.keys(sizes).reduce((accumulator, label) => {
+  // use em in breakpoints to work properly cross-browser and support users
+  // changing their browsers font-size: https://zellwk.com/blog/media-query-units/
+  const emSize = sizes[label] / 16;
+  return {
+    ...accumulator,
+    [label]: (...args) => css`
+      @media (max-width: ${emSize}em) {
+        ${css(...args)}
+      }
+    `,
+  };
+}, {});
+
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/stories/index.js b/src/stories/index.js
diff --git a/src/storyshots.test.js b/src/storyshots.test.js
@@ -0,0 +1,10 @@
+import initStoryshots from '@storybook/addon-storyshots';
+import { render } from 'enzyme';
+
+const defaultRenderTest = ({ story, context }) => {
+  expect(render(story.render(context))).toMatchSnapshot();
+};
+
+initStoryshots({
+  test: defaultRenderTest,
+});