React 17 (#13)

.eslintrc.js

@@ -541,7 +541,7 @@ module.exports = {
     "react/jsx-sort-default-props": "off", // This is just busy work
     "react/jsx-sort-props": "off", // This is just busy work
     "react/jsx-tag-spacing": "error",
-    "react/jsx-uses-react": "error",
+    "react/jsx-uses-react": "off", // React 17 makes this unnecessary
     "react/jsx-uses-vars": "error",
     "react/jsx-wrap-multilines": "off", // This is just busy work
     "react/no-access-state-in-setstate": "error",
@@ -573,7 +573,7 @@ module.exports = {
     "react/prefer-read-only-props": "error",
     "react/prefer-stateless-function": "error",
     "react/prop-types": "off", // We use functions
-    "react/react-in-jsx-scope": "error",
+    "react/react-in-jsx-scope": "off", // React 17 makes this unnecessary
     "react/require-default-props": "off", // We use functions
     "react/require-optimization": "off", // We use functions
     "react/require-render-return": "off", // We use functions

.github/workflows/elixir.yml

@@ -1,35 +1,31 @@
 name: Elixir CI
+
 on:
   push:
     branches: [ core ]
   pull_request:
     branches: [ core ]
+
 jobs:
-  validate:
+  build:
+
     name: Build and test
     runs-on: ubuntu-latest
-    services:
-      postgres:
-        image: postgres:13.2
-        ports: ['5432:5432']
-        env:
-          POSTGRES_PASSWORD: postgres
-        options: >-
-          --health-cmd pg_isready
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
+
     steps:
     - uses: actions/checkout@v2
-    - uses: erlef/setup-beam@v1
-      with:
-        otp-version: '22.2'
-        elixir-version: '1.9.4'
+    - name: Set up Elixir
       uses: erlef/setup-elixir@885971a72ed1f9240973bd92ab57af8c1aa68f24
-    - uses: actions/cache@v2
+      with:
+        elixir-version: '1.10.3' # Define the elixir version [required]
+        otp-version: '22.3' # Define the OTP version [required]
+    - name: Restore dependencies cache
+      uses: actions/cache@v2
       with:
         path: deps
         key: ${{ runner.os }}-mix-${{ hashFiles('**/mix.lock') }}
         restore-keys: ${{ runner.os }}-mix-
-    - run: mix deps.get
-    - run: mix test
+    - name: Install dependencies
+      run: mix deps.get
+    - name: Run tests
+      run: mix test

.github/workflows/node.js.yml

@@ -1,23 +1,30 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
 name: Node.js CI
+
 on:
   push:
     branches: [ core ]
   pull_request:
     branches: [ core ]
+
 jobs:
-  validate:
+  build:
+
     runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x, 15.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
     steps:
     - uses: actions/checkout@v2
-    - uses: actions/setup-node@v1
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
       with:
-        node-version: '15.x'
-    - uses: actions/cache@v2
-      with:
-        path: node_modules
-        key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
-        restore-keys: ${{ runner.os }}-npm-
+        node-version: ${{ matrix.node-version }}
     - run: npm ci
-    - run: bin/eslint-check
-    - run: bin/typescript-check
-    - run: bin/webpack-build
+    - run: npm run build --if-present
+    - run: npm test

README.md

@@ -48,6 +48,7 @@ Step one is to create the component in `lib/client/pages/` and then export it in
   - Finish setting up the html meta
   - Get a google tag manager id
   - Hot reloading not noticing change in css
+  - Check out DLLplugin
   - Utilize recoil state persistance for hydration
   - make storybook load recoil
   - Tried to create an account, then I saw this in logs:

babel.config.js

@@ -3,7 +3,7 @@ module.exports = {
   presets: [
     ["@babel/preset-env", {useBuiltIns: "entry", corejs: 3, targets: "> 0.25%, not dead"}],
     ["@babel/preset-typescript", {isTSX: true, allExtensions: true}],
-    ["@babel/preset-react", {development: process.env.NODE_ENV !== "production"}],
+    ["@babel/preset-react", {runtime: "automatic", development: process.env.NODE_ENV !== "production"}],
     process.env.NODE_ENV === "production" ? "minify" : null,
     "@emotion/babel-preset-css-prop",
   ].filter((preset) => preset),
@@ -13,7 +13,7 @@ module.exports = {
       "^@clumsy_chinchilla/(.+)$": "./lib/client/\\1",
       "^@assets/(.+)$": "./assets/\\1",
     }}],
-    process.env.NODE_ENV === "production" ? null : "react-hot-loader/babel",
     process.env.NODE_ENV === "production" ? null : "annotate-console-log",
+    "react-refresh/babel"
   ].filter((preset) => preset),
 };

bin/webpack-build

@@ -1,3 +1,3 @@
 #!/usr/bin/env bash
 
-npx webpack-cli --config webpack/development.js
+npx webpack build --config webpack/development.js

bin/webpack-start

@@ -1,3 +1,3 @@
 #!/usr/bin/env bash
 
-npx webpack serve --config webpack/development.js
+HOT="enabled" npx webpack serve --config webpack/development.js

config/test.exs

@@ -12,13 +12,6 @@ config :clumsy_chinchilla, Database.Repository,
   hostname: "localhost",
   pool: Ecto.Adapters.SQL.Sandbox
 
-# Configure the database for GitHub Actions
-if System.get_env("GITHUB_ACTIONS") do
-  config :clumsy_chinchilla, Database.Repository,
-    username: "postgres",
-    password: "postgres"
-end
-
 # We don't run a server during test. If one is required,
 # you can enable the server option below.
 config :clumsy_chinchilla, Web.Endpoint,

lib/client/elements/Application/ErrorBoundary/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import type {ErrorInfo} from "react";
 import {Component} from "react";
 import Exception from "../../Exception";

lib/client/elements/Application/Router/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {Route, Switch} from "react-router";
 import {AccountConfirmation} from "@clumsy_chinchilla/pages";
 import {CodeOfConduct} from "@clumsy_chinchilla/pages";

lib/client/elements/Application/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import ErrorBoundary from "./ErrorBoundary";
 import MaybeAuthenticated from "./MaybeAuthenticated";
 import WithCookies from "./WithCookies";

lib/client/elements/CheckboxField/index.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import React from "react";
 import type {ReactNode} from "react";
 import type {LabelHTMLAttributes} from "react";
 import type {InputHTMLAttributes} from "react";

lib/client/elements/Exception/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import Link from "../Link";
 
 interface PropertiesType {

lib/client/elements/Field/index.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import React from "react";
 import type {ReactNode} from "react";
 import type {LabelHTMLAttributes} from "react";
 import type {InputHTMLAttributes} from "react";

lib/client/elements/FieldFeedback/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import type {ReactNode} from "react";
 
 interface PropertiesType {

lib/client/elements/FieldHelp/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import type {ReactNode} from "react";
 
 interface PropertiesType {

lib/client/elements/Icon/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {compact} from "@unction/complete";
 
 interface PropertiesType {

lib/client/elements/Link/index.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import React from "react";
 import type {ReactNode} from "react";
 // import ComponentLink from "react-router-component-link";
 import {Link as ReactRouterLink} from "react-router-dom";

lib/client/elements/Link/story.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable func-style */
-import React from "react";
 import {BrowserRouter} from "react-router-dom";
 import {text} from "@storybook/addon-knobs";
 import Link from ".";

lib/client/elements/Loading/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import Icon from "../Icon";
 
 interface PropertiesType {

lib/client/elements/Navbar/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import Link from "../Link";
 
 const styling = {};

lib/client/elements/Page/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {Helmet} from "react-helmet-async";
 import type {ReactNode} from "react";
 

lib/client/elements/RadioField/index.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import React from "react";
 import type {ReactNode} from "react";
 import type {LabelHTMLAttributes} from "react";
 import type {InputHTMLAttributes} from "react";

lib/client/elements/SelectField/index.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import React from "react";
 import type {ReactNode} from "react";
 import type {LabelHTMLAttributes} from "react";
 import type {SelectHTMLAttributes} from "react";

lib/client/elements/TextField/index.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import React from "react";
 import type {ReactNode} from "react";
 import type {LabelHTMLAttributes} from "react";
 import type {TextareaHTMLAttributes} from "react";

lib/client/index.tsx

@@ -1,9 +1,6 @@
-/* eslint-disable import/no-internal-modules */
 import "core-js/stable";
 import "regenerator-runtime/runtime";
-import React from "react";
 import {render} from "react-dom";
-import {hot} from "react-hot-loader/root";
 import {BrowserRouter} from "react-router-dom";
 import {HelmetProvider} from "react-helmet-async";
 import {ApolloProvider} from "@apollo/client";
@@ -12,17 +9,15 @@ import {RecoilRoot} from "recoil";
 import {Application} from "@clumsy_chinchilla/elements";
 import sdk from "./sdk";
 
-const HotReloadedRoot = hot(() => <BrowserRouter>
-  <HelmetProvider>
-    <RecoilRoot>
-      <ApolloProvider client={sdk}>
-        <Application />
-      </ApolloProvider>
-    </RecoilRoot>
-  </HelmetProvider>
-</BrowserRouter>);
-
 render(
-  <HotReloadedRoot />,
+  <BrowserRouter>
+    <HelmetProvider>
+      <RecoilRoot>
+        <ApolloProvider client={sdk}>
+          <Application />
+        </ApolloProvider>
+      </RecoilRoot>
+    </HelmetProvider>
+  </BrowserRouter>,
   document.querySelector("#application")
 );

lib/client/pages/AccountConfirmation/AccountConfirmationForm/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {useState} from "react";
 import {useEffect} from "react";
 import {useSetRecoilState} from "recoil";

lib/client/pages/AccountConfirmation/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {useLocation} from "react-router-dom";
 
 import {Page} from "@clumsy_chinchilla/elements";

lib/client/pages/CodeOfConduct/index.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import {Page} from "@clumsy_chinchilla/elements";
 
 export default function CodeOfConduct (): JSX.Element {

lib/client/pages/DataPolicy/index.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import {Page} from "@clumsy_chinchilla/elements";
 
 export default function DataPolicy (): JSX.Element {

lib/client/pages/LandingPage/CallToAction/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {useRecoilValue} from "recoil";
 import {currentSessionId as currentSessionIdAtom} from "@clumsy_chinchilla/atoms";
 import {loadingCurrentSessionId as loadingCurrentSessionIdAtom} from "@clumsy_chinchilla/atoms";

lib/client/pages/LandingPage/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {Page} from "@clumsy_chinchilla/elements";
 import CallToAction from "./CallToAction";
 

lib/client/pages/Login/LoginForm/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {useState} from "react";
 import {useEffect} from "react";
 import {useSetRecoilState} from "recoil";

lib/client/pages/Login/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {useRecoilState} from "recoil";
 import {useRecoilValue} from "recoil";
 import {useHistory} from "react-router-dom";

lib/client/pages/Logout/LogoutForm/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {useEffect} from "react";
 import {useSetRecoilState} from "recoil";
 import {useMutation} from "@apollo/client";

lib/client/pages/Logout/index.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import {Page} from "@clumsy_chinchilla/elements";
 import LogoutForm from "./LogoutForm";
 

lib/client/pages/OurTechnology/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {Page} from "@clumsy_chinchilla/elements";
 
 export default function OurTechnology (): JSX.Element {

lib/client/pages/PageNotFound/index.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import {Page} from "@clumsy_chinchilla/elements";
 
 export default function PageNotFound (): JSX.Element {

lib/client/pages/PrivacyPolicy/index.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import {Page} from "@clumsy_chinchilla/elements";
 
 export default function PrivacyPolicy (): JSX.Element {

lib/client/pages/SignUp/SignUpForm/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {useState} from "react";
 import {useEffect} from "react";
 import {useSetRecoilState} from "recoil";

lib/client/pages/SignUp/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {useRecoilState} from "recoil";
 import {useRecoilValue} from "recoil";
 import {useHistory} from "react-router-dom";

lib/client/pages/TermsOfService/index.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import {Page} from "@clumsy_chinchilla/elements";
 
 export default function TermsOfService (): JSX.Element {

lib/client/pages/ThisIsUs/index.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import {Page} from "@clumsy_chinchilla/elements";
 
 export default function ThisIsUs (): JSX.Element {

lib/client/pages/YourSettings/SettingsForm/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {useState} from "react";
 import {useEffect} from "react";
 import {useRecoilState} from "recoil";

lib/client/pages/YourSettings/index.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import {Page} from "@clumsy_chinchilla/elements";
 import SettingsForm from "./SettingsForm";