starting a fresh with plotly

spikes/graphs-fe/plotly/.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    "react",
+    "es2015"
+  ],
+  "plugins": [
+    ["transform-object-rest-spread", {
+      "useBuiltIns": true
+    }],
+    "add-module-exports",
+    "transform-es2015-modules-commonjs",
+    "react-hot-loader/babel"
+  ],
+  "sourceMaps": "both"
+}

spikes/graphs-fe/plotly/.eslintignore

@@ -0,0 +1,3 @@
+/node_modules
+coverage
+.nyc_output

spikes/graphs-fe/plotly/.eslintrc

@@ -0,0 +1,29 @@
+{
+  "extends": "semistandard",
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "plugins": [
+    "babel",
+    "react"
+  ],
+  "rules": {
+    "generator-star-spacing": 0,
+    "babel/generator-star-spacing": 1,
+    "space-before-function-paren": [2, "never"],
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2,
+    "object-curly-newline": ["error", {
+      "minProperties": 1
+    }],
+    "sort-vars": ["error", {
+      "ignoreCase": true
+    }]
+  }
+}

spikes/graphs-fe/plotly/.gitignore

@@ -0,0 +1,4 @@
+/node_modules
+coverage
+.nyc_output
+npm-debug.log

spikes/graphs-fe/plotly/.storybook/config.js

@@ -0,0 +1,5 @@
+const Storybook = require('@kadira/storybook');
+
+Storybook.configure(() => {
+  require('../stories');
+}, module);

spikes/graphs-fe/plotly/lib/data.js

@@ -0,0 +1,18 @@
+const data = [
+  {
+    type: 'scatter',  // all "scatter" attributes: https://plot.ly/javascript/reference/#scatter
+    x: [1, 2, 3],     // more about "x": #scatter-x
+    y: [6, 2, 3],     // #scatter-y
+    marker: {         // marker is an object, valid marker keys: #scatter-marker
+      color: 'rgb(16, 32, 77)' // more about "marker.color": #scatter-marker-color
+    }
+  },
+  {
+    type: 'bar',      // all "bar" chart attributes: #bar
+    x: [1, 2, 3],     // more about "x": #bar-x
+    y: [6, 2, 3],     // #bar-y
+    name: 'bar chart example' // #bar-name
+  }
+];
+
+module.exports = data;

spikes/graphs-fe/plotly/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "redux-thunks-spike",
+  "private": true,
+  "license": "private",
+  "main": "src/index.js",
+  "scripts": {
+    "start": "webpack-dev-server --open --config webpack.config.js",
+    "lint": "eslint .",
+    "test": "NODE_ENV=test nyc ava test/*.js --fail-fast --verbose --tap",
+    "open": "nyc report --reporter=html & open coverage/index.html",
+    "coverage": "nyc check-coverage --statements 100 --functions 100 --lines 100 --branches 100",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "dependencies": {
+    "autoprefixer": "^6.5.1",
+    "babel-eslint": "^7.0.0",
+    "babel-loader": "^6.2.5",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.16.0",
+    "babel-plugin-transform-object-rest-spread": "^6.16.0",
+    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-preset-es2015": "^6.16.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-react-hmre": "^1.1.1",
+    "babel-runtime": "^6.11.6",
+    "css-loader": "^0.25.0",
+    "postcss-loader": "^1.0.0",
+    "postcss-modules-values": "^1.2.2",
+    "postcss-nested": "^1.0.0",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "react-hot-loader": "^3.0.0-beta.6",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.13.2",
+    "webpack-dev-server": "^1.16.2"
+  },
+  "devDependencies": {
+    "@kadira/storybook": "^2.24.1",
+    "ava": "^0.16.0",
+    "babel-register": "^6.16.3",
+    "enzyme": "^2.5.1",
+    "eslint": "^3.8.1",
+    "eslint-config-semistandard": "^7.0.0",
+    "eslint-config-standard": "^6.2.0",
+    "eslint-plugin-babel": "^3.3.0",
+    "eslint-plugin-promise": "^3.3.0",
+    "eslint-plugin-react": "^6.4.1",
+    "eslint-plugin-standard": "^2.0.1",
+    "nyc": "^8.3.1",
+    "react-addons-test-utils": "^15.3.2"
+  },
+  "ava": {
+    "require": [
+      "babel-register"
+    ],
+    "babel": "inherit"
+  }
+}

spikes/graphs-fe/plotly/readme.md

@@ -0,0 +1,15 @@
+# postcss + css-modules
+
+#### src/showcase
+
+contains all the files to showcase the components
+
+#### src/components
+
+contains all the css files and react components
+
+## usage
+
+## todo
+
+ - [ ] mixins (https://github.com/postcss/postcss-mixins)

spikes/graphs-fe/plotly/src/components/base/index.css

@@ -0,0 +1,103 @@
+@value color_primary_dark, font_primary, font_secondary, font_tertiary from "./variables.css";
+
+.base {
+  :global {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    p,
+    li {
+      color: color_primary_dark;
+    }
+
+    h1,
+    h2,
+    h3 {
+      font-family: font_primary;
+    }
+
+    h4,
+    p,
+    li {
+      font-family: font_secondary;
+    }
+
+    a {
+      font-family: inherit;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+
+    h5,
+    p,
+    li {
+      & > a:hover {
+        text-decoration: underline;
+      }
+    }
+
+    h1 {
+      font-size: 14px;
+      line-height: 35px;
+    }
+
+    h2 {
+      font-size: 10px;
+      line-height: 25px;
+    }
+
+    h3 {
+      font-size: 6px;
+      line-height: 20px;
+    }
+
+    h4 {
+      font-size: 15px;
+      line-height: 20px;
+      letter-spacing: -0.025em;
+    }
+
+    h5 {
+      font-family: font_tertiary;
+      font-style: italic;
+      font-size: 15px;
+      line-height: 20px;
+    }
+
+    p {
+      font-size: 14px;
+      line-height: 18px;
+      letter-spacing: -0.025em;
+
+      a {
+        text-decoration: underline;
+      }
+
+      &.small {
+        font-size: 12px;
+        line-height: 16px;
+      }
+    }
+
+    span {
+      font-family: inherit;
+    }
+
+    button,
+    select,
+    a {
+      outline: none;
+    }
+
+    /* Removes the grey background when you tap on a link in IOS */
+    button,
+    a {
+      -webkit-tap-highlight-color: rgba(0,0,0,0);
+    }
+  }
+}

spikes/graphs-fe/plotly/src/components/base/index.js

@@ -0,0 +1,12 @@
+const React = require('react');
+const styles = require('./index.css');
+
+module.exports = ({
+  children
+}) => {
+  return (
+    <div className={styles.base}>
+      {children}
+    </div>
+  );
+};

spikes/graphs-fe/plotly/src/components/base/variables.css

@@ -0,0 +1,12 @@
+@value font_primary: "freddiesflowerstitle-webfont", "Times", serif;
+@value font_secondary: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+@value font_tertiary: Georgia, Times, "Times New Roman", serif;
+
+@value color_primary: #ccc;
+@value color_primary_dark: #222;
+@value color_primary_mid: #959595;
+@value color_primary_light: #f4f4f4;
+@value color_warning: #C93F3F;
+@value color_valid: #547954;
+@value color_cta_primary: #60b4d6;
+@value color_cta_secondary: #e5eef2;

spikes/graphs-fe/plotly/src/components/button/index.js

@@ -0,0 +1,9 @@
+const React = require('react');
+
+module.exports = (props) => {
+  return (
+    <button>
+      {props.children}
+    </button>
+  );
+};

spikes/graphs-fe/plotly/src/components/container/index.css

@@ -0,0 +1,38 @@
+@value color_background from "../base/variables.css";
+
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left:  15px;
+  padding-right: 15px;
+}
+
+.container::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+@media (min-width: 544px) {
+  .container {
+    max-width: 576px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    max-width: 940px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1140px;
+  }
+}

spikes/graphs-fe/plotly/src/components/container/index.js

@@ -0,0 +1,12 @@
+const React = require('react');
+const styles = require('./index.css');
+
+module.exports = ({
+  children
+}) => {
+  return (
+    <div className={styles.container}>
+      {children}
+    </div>
+  );
+};

spikes/graphs-fe/plotly/src/components/index.js

@@ -0,0 +1,5 @@
+module.exports = {
+  Button: require('./button'),
+  Container: require('./container'),
+  Base: require('./base')
+};

spikes/graphs-fe/plotly/src/index.js

@@ -0,0 +1 @@
+module.exports = require('./components');

spikes/graphs-fe/plotly/src/showcase/index.js

@@ -0,0 +1,17 @@
+const ReactDOM = require('react-dom');
+const React = require('react');
+
+const render = () => {
+  const Root = require('./root');
+
+  ReactDOM.render(
+    <Root />,
+    document.getElementById('root')
+  );
+};
+
+render();
+
+if (module.hot) {
+  module.hot.accept('./root', render);
+}

spikes/graphs-fe/plotly/src/showcase/root.js

@@ -0,0 +1,25 @@
+const React = require('react');
+const ReactHotLoader = require('react-hot-loader');
+
+const {
+  Button,
+  Container,
+  Base
+} = require('../');
+
+const {
+  AppContainer
+} = ReactHotLoader;
+
+module.exports = () => {
+  return (
+    <AppContainer>
+      <Base>
+        <Container>
+          <p>Hello</p>
+          <Button>Hello</Button>
+        </Container>
+      </Base>
+    </AppContainer>
+  );
+};

spikes/graphs-fe/plotly/static/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang='en-US'>
+  <head>
+    <title>React Boilerplate</title>
+    <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/latest/normalize.css" />
+  </head>
+  <body>
+    <div id='root'></div>
+    <script src='/static/bundle.js'></script>
+  </body>
+</html>

spikes/graphs-fe/plotly/stories/index.js

@@ -0,0 +1,10 @@
+const React = require('react');
+const Storybook = require('@kadira/storybook');
+
+const Home = require('../src/client/containers/home');
+
+const homeStories = Storybook.storiesOf('Home', module);
+
+homeStories.add('with nothing', () => (
+  <Home />
+));

spikes/graphs-fe/plotly/test/index.js

@@ -0,0 +1,13 @@
+const test = require('ava');
+const enzyme = require('enzyme');
+const React = require('react');
+
+const {
+  shallow
+} = enzyme;
+
+test('renders <Home> without exploding', (t) => {
+  const Home = require('../src/client/containers/home');
+  const wrapper = shallow(<Home />);
+  t.deepEqual(wrapper.length, 1);
+});

spikes/graphs-fe/plotly/webpack.config.js

@@ -0,0 +1,68 @@
+const webpack = require('webpack');
+const path = require('path');
+
+const config = {
+  debug: true,
+  devtool: 'eval',
+  context: path.join(__dirname, './src'),
+  entry: [
+    'webpack-dev-server/client?http://localhost:8080',
+    'webpack/hot/only-dev-server',
+    'react-hot-loader/patch',
+    './showcase/index.js'
+  ],
+  output: {
+    path: path.join(__dirname, './static'),
+    publicPath: '/static/',
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin()
+  ],
+  postcss: () => {
+    return [
+      require('postcss-modules-values'),
+      require('postcss-nested'),
+      require('autoprefixer')
+    ];
+  },
+  module: {
+    loaders: [{
+      test: /js?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './src')
+      ],
+      loaders: ['babel']
+    }, {
+      test: /\.json?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './src')
+      ],
+      loaders: ['json']
+    }, {
+      test: /\.css$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './src')
+      ],
+      loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
+    }]
+  }
+};
+
+const devServer = {
+  hot: true,
+  compress: true,
+  lazy: false,
+  publicPath: config.output.publicPath,
+  historyApiFallback: {
+    index: './static/index.html'
+  }
+};
+
+module.exports = Object.assign({
+  devServer
+}, config);