Merge pull request #17 from gregoranders/development

Closes #5

.codeclimate.yml

@@ -4,7 +4,17 @@ plugins:
   tslint:
     enabled: false
   eslint:
-    enabled: false
+    enabled: true
+    channel: "eslint-6"
+    config:
+      config: .cceslintrc.js
+    extensions:
+      - .es6
+      - .js
+      - .jsx
+      - .ts
+      - .tsx
+      - .mjs
   fixme:
     enabled: true
   git-legal:
@@ -14,8 +24,7 @@ exclude_patterns:
   - "!spec/support/helpers"
   - "config/"
   - "db/"
-  - "dist/"
-  - "public/"
+  - "docs/public"
   - "features/"
   - ".circleci/"
   - ".github/"

.eslintignore

@@ -1 +1,2 @@
-/public/**
+#/public/**
+*.config.js

.github/workflows/development.yml

@@ -11,10 +11,8 @@ jobs:
 
     strategy:
       matrix:
-        os: [ubuntu-latest]
-        node-version: [14.x]
-        # os: [ubuntu-latest, macos-latest, windows-latest]
-        # node-version: [10.x, 12.x, 13.x, 14.x]
+        os: [ubuntu-latest, macos-latest, windows-latest]
+        node-version: [10.x, 12.x, 13.x, 14.x]
 
     steps:
       - uses: actions/checkout@v2

.github/workflows/master.yml

@@ -11,10 +11,8 @@ jobs:
 
     strategy:
       matrix:
-        os: [ubuntu-latest]
-        node-version: [14.x]
-        # os: [ubuntu-latest, macos-latest, windows-latest]
-        # node-version: [10.x, 12.x, 13.x, 14.x]
+        os: [ubuntu-latest, macos-latest, windows-latest]
+        node-version: [10.x, 12.x, 13.x, 14.x]
 
     steps:
       - uses: actions/checkout@v2

README.md

@@ -81,6 +81,10 @@ npm run watch-script
 npm run watch-scss
 npm run watch-livereload
 ```
+#### Code Climate Checks [docker required](docs/CODECLIMATE.md)
+```
+npm run codeclimate
+```
 
 ### Storybook
 

docs/CODECLIMATE.md

@@ -0,0 +1,64 @@
+# Code Climate on localhost
+
+## Docker image sizes
+
+```sh
+codeclimate/codeclimate              110MB
+codeclimate/codeclimate-eslint       1.25GB
+codeclimate/codeclimate-structure    5.16GB
+codeclimate/codeclimate-duplication  5.16GB
+codeclimate/codeclimate-tslint       559MB
+codeclimate/codeclimate-editorconfig 74.1MB
+codeclimate/codeclimate-fixme        58.8MB
+codeclimate/codeclimate-git-legal    373MB
+```
+
+### Initial docker images
+
+```sh
+#!/usr/bin/env sh
+
+docker pull codeclimate/codeclimate-structure
+docker pull codeclimate/codeclimate-duplication
+docker pull codeclimate/codeclimate
+
+# vim: tw=78 ft=sh ts=2 sw=2 sts=2 nu:
+```
+
+### Script for code climate
+
+```sh
+#!/usr/bin/env sh
+
+CODE_DIRECTORY=$(pwd)
+
+docker run \
+  --interactive --tty --rm \
+  --env CODECLIMATE_CODE="${CODE_DIRECTORY}" \
+  --volume "${CODE_DIRECTORY}":/code \
+  --volume /var/run/docker.sock:/var/run/docker.sock \
+  --volume /tmp/cc:/tmp/cc \
+  codeclimate/codeclimate $@
+
+docker run --interactive --tty --rm --env CODECLIMATE_CODE=\"./\" --volume \"./\":/code --volume /var/run/docker.sock:/var/run/docker.sock --volume /tmp/cc:/tmp/cc codeclimate/codeclimate analyze
+
+# vim: tw=78 ft=sh ts=2 sw=2 sts=2 nu:
+```
+
+### Install engines
+
+```sh
+ [script above] engines:install duplication structure eslint nodesecurity requiresafe
+```
+
+### Analyze code
+
+```sh
+ [script above] analyze
+```
+
+or
+
+```sh
+ npm run codeclimate
+```

docs/Intro.stories.mdx

@@ -2,7 +2,7 @@ import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Docs|Intro" />
 
-# ts-react-playground - [TypeScript](http://www.typescriptlang.org/) [React](https://reactjs.org/) Playground 0.0.4
+# ts-react-playground - [TypeScript](http://www.typescriptlang.org/) [React](https://reactjs.org/) Playground v0.0.5
 
 [![Dependency Status][daviddm-image]][daviddm-url]
 [![License][license-image]][license-url]
@@ -83,6 +83,10 @@ npm run watch-script
 npm run watch-scss
 npm run watch-livereload
 ```
+#### Code Climate Checks [docker required](docs/CODECLIMATE.md)
+```
+npm run codeclimate
+```
 
 ### Storybook
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ts-react-playground",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "TypeScript React Playground",
   "scripts": {
     "start": "webpack-dev-server --open --progress --config webpack.config.js",
@@ -39,6 +39,7 @@
     "docker:build": "cross-env NODE_ENV=production docker-compose build --force-rm --no-cache --parallel --pull",
     "docker:up": "docker-compose up -d",
     "docker:down": "docker-compose down",
+    "codeclimate": "docker run --interactive --tty --rm --env CODECLIMATE_CODE=\"$PWD\" --volume \"$PWD\":/code --volume /var/run/docker.sock:/var/run/docker.sock --volume /tmp/cc:/tmp/cc codeclimate/codeclimate analyze",
     "prestorybook": "jest --runInBand --json --outputFile=.jest-test-results.json --env=enzyme --setupFilesAfterEnv=jest-enzyme --reporters=jest-spec-reporter jest-junit --coverage --coverageDirectory ../coverage --rootDir ./src",
     "storybook": "cross-env NODE_ENV=production start-storybook",
     "prebuild-storybook": "jest --runInBand --json --outputFile=.jest-test-results.json --env=enzyme --setupFilesAfterEnv=jest-enzyme --reporters=jest-spec-reporter jest-junit --coverage --coverageDirectory ../coverage --rootDir ./src",

src/script/application.tsx

@@ -3,7 +3,7 @@ import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 import { string as IsString } from 'prop-types';
 
-import Loading from '@app/loading';
+import { default as Loading } from '@app/loading';
 
 const Layout = lazy(() => import('@components/layout'));
 

src/script/tsconfig.json

@@ -41,5 +41,5 @@
       "@app/*": ["./*"],
     },
   },
-  "files": ["index.tsx"]
+  "files": ["index.tsx", "components/pages/about/index.tsx", "components/pages/home/index.tsx", "components/pages/index/index.tsx"]
 }

src/style/styles.scss

@@ -17,6 +17,29 @@ header {
   }
 }
 
+.centered {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.bootstrap,
+.spinner {
+  > h1 {
+    &.dots {
+      color: $color-theme-d3;
+      font-size: 15em;
+      font-weight: 900;
+      text-shadow: 4px 4px 8px lighten($color-theme-dark, 50%);
+    }
+  }
+}
+
+main {
+  height: 90vh;
+}
+
 table {
   width: 100%;