pythonitalia · patrick91 · Feb 24, 2018 · Feb 24, 2018 · Feb 24, 2018 · Feb 24, 2018
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -1,6 +1,11 @@
 version: 2
+
+defaults_node: &defaults_node
+  docker:
+    - image: circleci/node:8.9
+
 jobs:
-  build:
+  backend-test:
     docker:
       # specify the version you desire here
       # use `-browsers` prefix for selenium tests, e.g. `3.6.1-browsers`
@@ -53,3 +58,30 @@ jobs:
           environment:
             CODACY_PROJECT_TOKEN: b371fba19b824c62ad6270d4e1f3b410
 
+  frontend-lint:
+    <<: *defaults_node
+    steps:
+      - checkout
+      - restore_cache:
+          key: frontend-cache-{{ .Branch }}-{{ checksum "frontend/yarn.lock" }}
+      - run:
+          name: yarn
+          command: yarn
+          working_directory: ./frontend
+      - save_cache:
+          key: frontend-cache-{{ .Branch }}-{{ checksum "frontend/yarn.lock" }}
+          paths:
+            - frontend/node_modules
+            - "~/.cache/yarn"
+      - run:
+          name: lint
+          command: yarn run tslint --project .
+          working_directory: ./frontend
+
+workflows:
+  version: 2
+
+  checks:
+    jobs:
+      - backend-test
+      - frontend-lint
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.vscode/
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
@@ -0,0 +1,3 @@
+{
+    "singleQuote": true
+}
diff --git a/frontend/.storybook/config.js b/frontend/.storybook/config.js
@@ -0,0 +1,11 @@
+import { configure } from "@storybook/react";
+
+import 'modern-normalize';
+
+function loadStories() {
+  require("../src/stories/index.tsx");
+  require("../src/stories/navbar/index.tsx");
+  require("../src/stories/logo/index.tsx");
+}
+
+configure(loadStories, module);
diff --git a/frontend/.storybook/webpack.config.js b/frontend/.storybook/webpack.config.js
@@ -0,0 +1,24 @@
+const path = require('path');
+
+const SRC_PATH = path.join(__dirname, '../src');
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: 'ts-loader',
+        include: [SRC_PATH]
+      },
+      {
+        loader: 'style-loader!css-loader',
+        test: /\.css$/
+      }
+    ]
+  },
+
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    enforceExtension: false
+  }
+};
diff --git a/frontend/package.json b/frontend/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "emotion": "^9.0.2",
+    "modern-normalize": "^0.4.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-emotion": "^9.0.2",
+    "react-scripts-ts": "2.13.0"
+  },
+  "scripts": {
+    "start": "react-scripts-ts start",
+    "build": "react-scripts-ts build",
+    "test": "react-scripts-ts test --env=jsdom",
+    "eject": "react-scripts-ts eject",
+    "storybook": "start-storybook -p 9001 -c .storybook"
+  },
+  "devDependencies": {
+    "@storybook/react": "^3.3.14",
+    "@types/jest": "^22.1.3",
+    "@types/node": "^9.4.6",
+    "@types/react": "^16.0.38",
+    "@types/react-dom": "^16.0.4",
+    "@types/storybook__addon-actions": "^3.0.2",
+    "@types/storybook__react": "^3.0.7",
+    "css-loader": "^0.28.10",
+    "storybook": "^1.0.0",
+    "style-loader": "^0.20.2",
+    "ts-loader": "^3.5.0",
+    "typescript": "^2.7.2"
+  }
+}
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -0,0 +1,36 @@
+<!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">
+
+    <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>
+</html>
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+class App extends React.Component {
+  render() {
+    return (
+      <div className="App">
+        <header className="App-header">
+          <h1 className="App-title">Welcome to React</h1>
+        </header>
+        <p className="App-intro">
+          To get started, edit <code>src/App.tsx</code> and save to reload.
+        </p>
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/frontend/src/components/logo/index.tsx b/frontend/src/components/logo/index.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+// tslint:disable max-line-length
+
+export const Logo = () => (
+  <svg viewBox="0 0 459.23 224.99">
+    <path
+      fill="#262626"
+      d="M239.37 90.43v20.07h-10.56V55.79h18.71a23.74 23.74 0 0 1 8.08 1.3 18.11 18.11 0 0 1 6.14 3.61 15.7 15.7 0 0 1 3.91 5.54 18.21 18.21 0 0 1 1.35 7.18 16.71 16.71 0 0 1-1.37 6.8 15.61 15.61 0 0 1-3.91 5.39 18.19 18.19 0 0 1-6.14 3.55 24.08 24.08 0 0 1-8.08 1.28zm0-8.57h8.15a10.29 10.29 0 0 0 3.91-.67 7.86 7.86 0 0 0 2.76-1.84 7.51 7.51 0 0 0 1.65-2.69 9.33 9.33 0 0 0 .55-3.17 11.31 11.31 0 0 0-.55-3.57 8.06 8.06 0 0 0-1.65-2.92 7.78 7.78 0 0 0-2.76-2 9.81 9.81 0 0 0-3.91-.71h-8.15zm56.35 11.58l1.2 4.36 10.82-28h11.53l-20.63 46.74a31.13 31.13 0 0 1-1.75 3.34 15.75 15.75 0 0 1-2.69 3.34 14.13 14.13 0 0 1-3.93 2.59 13.1 13.1 0 0 1-5.47 1.05c-.5 0-1 0-1.39-.06s-.84-.09-1.24-.15-.79-.14-1.18-.22-.81-.2-1.26-.32l1.28-8c.42 0 1 0 1.63.06s1.2.06 1.6.06a3.47 3.47 0 0 0 2.2-.75 8.9 8.9 0 0 0 1.63-1.65 14.26 14.26 0 0 0 1.09-1.65c.28-.5.46-.75.56-.75l2.52-4.74-17.18-38.84h11.42zm70.18-.07a20.78 20.78 0 0 1-1.79 7.44 17.32 17.32 0 0 1-4.08 5.64 17.75 17.75 0 0 1-6.09 3.59 23.16 23.16 0 0 1-7.81 1.26 19.83 19.83 0 0 1-8.6-1.78 17.56 17.56 0 0 1-6.31-5 22.72 22.72 0 0 1-3.91-7.72 34.41 34.41 0 0 1-1.31-9.93V79.5a32.87 32.87 0 0 1 1.43-10 23.21 23.21 0 0 1 4.06-7.74 18.26 18.26 0 0 1 6.37-5 19.26 19.26 0 0 1 8.4-1.79 23.39 23.39 0 0 1 8 1.28 16.38 16.38 0 0 1 9.9 9.43 25.82 25.82 0 0 1 1.8 7.7h-10.55a18 18 0 0 0-.73-4.28 8.12 8.12 0 0 0-1.68-3.03 6.94 6.94 0 0 0-2.78-1.84 11.58 11.58 0 0 0-4-.62 7.87 7.87 0 0 0-7.22 4.13 15.63 15.63 0 0 0-1.75 5 35.81 35.81 0 0 0-.56 6.71v7.44q0 8.08 2.27 11.95a7.74 7.74 0 0 0 7.2 3.87 9.33 9.33 0 0 0 6.54-2.2q2.4-2.2 2.67-7.12zm9.1-3.57a25.47 25.47 0 0 1 1.28-8.21A18.91 18.91 0 0 1 380 75a17.31 17.31 0 0 1 6-4.36 21.78 21.78 0 0 1 16.29 0 17.24 17.24 0 0 1 6 4.36 18.88 18.88 0 0 1 3.74 6.56 25.47 25.47 0 0 1 1.28 8.21v.79a25.6 25.6 0 0 1-1.28 8.25 19.11 19.11 0 0 1-3.72 6.56 16.88 16.88 0 0 1-6 4.34 20.11 20.11 0 0 1-8.12 1.56 20.33 20.33 0 0 1-8.17-1.56 17 17 0 0 1-6-4.34 18.94 18.94 0 0 1-3.74-6.56 25.6 25.6 0 0 1-1.28-8.23zm10.44.79a22.44 22.44 0 0 0 .49 4.79 12.12 12.12 0 0 0 1.54 3.91 7.53 7.53 0 0 0 6.76 3.62 7.62 7.62 0 0 0 3.94-1 7.78 7.78 0 0 0 2.69-2.65 12.45 12.45 0 0 0 1.52-3.91 22.44 22.44 0 0 0 .49-4.79v-.76a21.77 21.77 0 0 0-.49-4.7 12.65 12.65 0 0 0-1.52-3.91 8.18 8.18 0 0 0-10.69-2.67 7.83 7.83 0 0 0-2.71 2.67A12.3 12.3 0 0 0 386 85.1a21.76 21.76 0 0 0-.49 4.7zm46.96-20.74l.64 5.64a15.44 15.44 0 0 1 5.3-4.72 14.38 14.38 0 0 1 6.91-1.67 16.83 16.83 0 0 1 5.63.9 11 11 0 0 1 4.42 2.88 13.49 13.49 0 0 1 2.89 5.07 24 24 0 0 1 1 7.53v25h-10.41V85.63a12.19 12.19 0 0 0-.54-4 5.72 5.72 0 0 0-1.56-2.46 5.66 5.66 0 0 0-2.44-1.26 13.31 13.31 0 0 0-3.23-.36 9.07 9.07 0 0 0-4.55 1.07 8.48 8.48 0 0 0-3 3v28.88h-10.53V69.85zM264.21 188.37h-10.52l-15.22-35.28v35.28h-10.63v-54.71h10.63l15.1 35.13v-35.13h10.6zm11.05-20.7a25.47 25.47 0 0 1 1.28-8.21 18.91 18.91 0 0 1 3.74-6.56 17.31 17.31 0 0 1 6-4.36 21.78 21.78 0 0 1 16.29 0 17.24 17.24 0 0 1 6 4.36 18.88 18.88 0 0 1 3.74 6.56 25.47 25.47 0 0 1 1.28 8.21v.79a25.6 25.6 0 0 1-1.28 8.25 19.11 19.11 0 0 1-3.72 6.56 16.88 16.88 0 0 1-6 4.34 20.11 20.11 0 0 1-8.12 1.56 20.33 20.33 0 0 1-8.17-1.56 17 17 0 0 1-6-4.34 18.94 18.94 0 0 1-3.74-6.56 25.6 25.6 0 0 1-1.28-8.25zm10.44.79a22.44 22.44 0 0 0 .49 4.79 12.12 12.12 0 0 0 1.54 3.91 7.53 7.53 0 0 0 6.76 3.62 7.62 7.62 0 0 0 3.94-1 7.78 7.78 0 0 0 2.69-2.65 12.45 12.45 0 0 0 1.52-3.91 22.45 22.45 0 0 0 .49-4.79v-.79a21.77 21.77 0 0 0-.49-4.7 12.65 12.65 0 0 0-1.52-3.91 8.18 8.18 0 0 0-10.69-2.67 7.83 7.83 0 0 0-2.71 2.67 12.3 12.3 0 0 0-1.52 3.97 21.77 21.77 0 0 0-.49 4.7zm53.03 7.85l.53 2.93.52-2.82 8.94-28.71h10.89l-15.44 40.65h-9.81l-15.52-40.65h10.9zm47.2 12.81a22.68 22.68 0 0 1-8.53-1.54 20.16 20.16 0 0 1-6.58-4.19 18.28 18.28 0 0 1-4.23-6.24 19.9 19.9 0 0 1-1.48-7.68V168a23.72 23.72 0 0 1 1.47-8.51 19.71 19.71 0 0 1 4.09-6.63 18.46 18.46 0 0 1 6.24-4.32 19.78 19.78 0 0 1 7.85-1.54 20.09 20.09 0 0 1 7.83 1.45 16.27 16.27 0 0 1 5.82 4.08 17.63 17.63 0 0 1 3.63 6.33 25.64 25.64 0 0 1 1.24 8.17v4.43h-27.57a11.37 11.37 0 0 0 1.22 3.78 10.31 10.31 0 0 0 5.62 4.86 11.57 11.57 0 0 0 4 .68 15.76 15.76 0 0 0 3.06-.3 15.12 15.12 0 0 0 2.91-.88 13.2 13.2 0 0 0 2.59-1.45 10.15 10.15 0 0 0 2.1-2l5.22 5.64a14.88 14.88 0 0 1-2.54 2.72 17.13 17.13 0 0 1-3.68 2.37 23.77 23.77 0 0 1-4.71 1.67 23.38 23.38 0 0 1-5.57.57zm-1.24-33.7a8.18 8.18 0 0 0-3.23.62 7.62 7.62 0 0 0-2.57 1.79 10.3 10.3 0 0 0-1.89 2.77 15.13 15.13 0 0 0-1.13 3.61H393v-.83a9.91 9.91 0 0 0-.64-3.12 7.35 7.35 0 0 0-1.61-2.54 7.61 7.61 0 0 0-2.55-1.72 9.24 9.24 0 0 0-3.51-.58z"
+    />
+    <path
+      fill="none"
+      d="M87.55 45v48.81A1.43 1.43 0 0 0 89 95.24h47.22V43.48H89A1.46 1.46 0 0 0 87.55 45z"
+    />
+    <path
+      fill="#fd51d3"
+      d="M44.06 177v-28.66h-5a34.49 34.49 0 0 0-31 19.25 6.55 6.55 0 0 0 5.88 9.41zm128.23 6v-44.28h-28.72V180a8.86 8.86 0 0 1-8.85 8.85H87.54v28.71h50.11c.72 0 1.36 0 2-.06a34.65 34.65 0 0 0 32.64-34.5zM143.57 7.9v87.34h18.07a41.8 41.8 0 0 1 10.65 1.37V42c0-.72 0-1.37-.07-2a34.59 34.59 0 0 0-28.65-32.1z"
+    />
+    <path
+      fill="#3dffd2"
+      d="M80.16 217.1v-34.17a34.68 34.68 0 0 0-28.71-34.09V183a34.67 34.67 0 0 0 28.71 34.1zm81.48-114.48H89a8.82 8.82 0 0 1-8.81-8.81V45A8.86 8.86 0 0 1 89 36.1h47.19V7.39h-50.1c-.73 0-1.37 0-2 .06A34.59 34.59 0 0 0 51.51 40c-.05.66-.07 1.31-.07 2v54.69c0 .72 0 1.37.07 2a34.67 34.67 0 0 0 32.56 32.6c.65 0 1.29.06 2 .06h100.7a6.55 6.55 0 0 0 5.85-9.46 34.5 34.5 0 0 0-30.98-19.27zm-3.71 19.07a6.79 6.79 0 1 1 6.79-6.79 6.79 6.79 0 0 1-6.79 6.79z"
+    />
+    <path
+      fill="#262626"
+      d="M199.23 118.58a42 42 0 0 0-19.56-19.29V42c0-.89 0-1.71-.08-2.45a42 42 0 0 0-36-39.16 42.56 42.56 0 0 0-5.93-.39H86.09c-.91 0-1.73 0-2.45.08a42 42 0 0 0-39.5 39.45 32.9 32.9 0 0 0-.08 2.49v54.67c0 .89 0 1.71.08 2.45a42 42 0 0 0 39.45 39.49c.77.06 1.59.09 2.5.09h50.1V180a1.48 1.48 0 0 1-1.47 1.46h-47.2a42.06 42.06 0 0 0-36.07-40.14c-.81-.07-3.45-.32-3.45-.32-.89-.05-8.91-.08-8.91-.08a41.85 41.85 0 0 0-37.62 23.37 13.93 13.93 0 0 0 12.47 20.14h30.15a42.05 42.05 0 0 0 36.07 40.14 52.48 52.48 0 0 0 7.38.42h50.11c.89 0 1.7 0 2.44-.07A42 42 0 0 0 179.67 183v-44.28h7.1a13.94 13.94 0 0 0 12.46-20.14zm-6.91 9.65a6.41 6.41 0 0 1-5.55 3.1H86.09c-.73 0-1.37 0-2-.06a34.67 34.67 0 0 1-32.56-32.6c-.05-.61-.07-1.26-.07-2V42c0-.71 0-1.36.07-2A34.59 34.59 0 0 1 84.12 7.45c.6 0 1.24-.06 2-.06h50.1V36.1H89a8.86 8.86 0 0 0-8.84 8.9v48.81a8.82 8.82 0 0 0 8.84 8.81h72.67a34.5 34.5 0 0 1 31 19.25 6.42 6.42 0 0 1-.35 6.36zM87.54 217.61V188.9h47.18a8.86 8.86 0 0 0 8.85-8.85v-41.33h28.72V183a34.65 34.65 0 0 1-32.67 34.57c-.61 0-1.25.06-2 .06zM8.38 174a6.42 6.42 0 0 1-.3-6.36 34.49 34.49 0 0 1 31-19.25h5V177H13.94a6.41 6.41 0 0 1-5.56-3zm43.07-25.11a34.68 34.68 0 0 1 28.71 34.09v34.12A34.67 34.67 0 0 1 51.45 183zM172.29 42v54.61a41.8 41.8 0 0 0-10.65-1.37h-18.07V7.9A34.59 34.59 0 0 1 172.22 40c.04.66.07 1.31.07 2zm-36.1 53.21H89a1.43 1.43 0 0 1-1.42-1.43V45A1.46 1.46 0 0 1 89 43.48h47.19z"
+    />
+    <circle cx={157.93} cy={114.89} r={6.79} fill="#262626" />
+  </svg>
+);
diff --git a/frontend/src/components/navbar/index.tsx b/frontend/src/components/navbar/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export class Navbar extends React.Component<{}, {}> {
+render() {
+    return <div>I am the nav bar!</div>;
+  }
+}
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import App from './App';
+
+import 'modern-normalize';
+
+ReactDOM.render(<App />, document.getElementById('root') as HTMLElement);
diff --git a/frontend/src/stories/index.tsx b/frontend/src/stories/index.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+storiesOf('Button', module)
+  .add('with text', () => (
+    <div onClick={action('clicked')}>Hello Button</div>
+  ))
+  .add('with some emoji', () => (
+    <div onClick={action('clicked')}>😀 😎 👍 💯</div>
+  ));
diff --git a/frontend/src/stories/logo/index.tsx b/frontend/src/stories/logo/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { Logo } from '../../components/logo';
+
+storiesOf('Logo', module).add('normal', () => (
+  <div
+    style={{
+      width: 300
+    }}
+  >
+    <Logo />
+  </div>
+));
diff --git a/frontend/src/stories/navbar/index.tsx b/frontend/src/stories/navbar/index.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { Navbar } from '../../components/navbar';
+
+storiesOf('Navbar', module).add('normal', () => <Navbar />);
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts"
+  ]
+}
diff --git a/frontend/tsconfig.test.json b/frontend/tsconfig.test.json
@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs"
+  }
+}