Initial commit

🍉

.eslintrc

@@ -0,0 +1,96 @@
+{
+  "parser": "@typescript-eslint/parser", // Specifies the ESLint parser
+  "plugins": [
+    "react",
+    "react-hooks",
+    "@typescript-eslint",
+    "inclusive-language"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "parserOptions": {
+    "requireConfigFile": false,
+    "babelOptions": {
+      "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react",
+        "@babel/preset-typescript"
+      ]
+    },
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018, // Allows for the parsing of modern ECMAScript features
+    "sourceType": "module" // Allows for the use of imports
+  },
+  "rules": {
+    "prettier/prettier": [
+      "error",
+      {
+        "semi": true,
+        "singleQuote": true,
+        "jsxSingleQuote": true,
+        "parser": "flow"
+      }
+    ],
+    "inclusive-language/use-inclusive-words": "error",
+    "semi": [2, "always"],
+    "jsx-quotes": [2, "prefer-single"],
+    "no-console": 2,
+    "no-extra-semi": 2,
+    "semi-spacing": [2, { "before": false, "after": true }],
+    "no-dupe-else-if": 0,
+    "no-setter-return": 0,
+    "prefer-promise-reject-errors": 0,
+    "react/button-has-type": 2,
+    "react/default-props-match-prop-types": 2,
+    "react/jsx-closing-bracket-location": 2,
+    "react/jsx-closing-tag-location": 2,
+    "react/jsx-curly-spacing": 2,
+    "react/jsx-curly-newline": 2,
+    "react/jsx-equals-spacing": 2,
+    "react/jsx-max-props-per-line": [2, { "maximum": 1, "when": "multiline" }],
+    "react/jsx-first-prop-new-line": 2,
+    "react/jsx-curly-brace-presence": [
+      2,
+      { "props": "never", "children": "never" }
+    ],
+    "react/jsx-pascal-case": 2,
+    "react/jsx-props-no-multi-spaces": 2,
+    "react/jsx-tag-spacing": [2, { "beforeClosing": "never" }],
+    "react/jsx-wrap-multilines": 2,
+    "react/no-array-index-key": 2,
+    "react/no-typos": 2,
+    "react/no-unsafe": 2,
+    "react/no-unused-prop-types": 2,
+    "react/no-unused-state": 2,
+    "react/self-closing-comp": 2,
+    "react/sort-comp": 2,
+    "react/style-prop-object": 2,
+    "react/void-dom-elements-no-children": 2,
+    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
+    "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
+  },
+  "overrides": [
+    {
+      "files": ["*.tsx", "*.ts"],
+      "rules": {
+        "prettier/prettier": "off"
+      }
+    }
+  ]
+}

.github/workflows/checks.yml

@@ -0,0 +1,68 @@
+# This workflow performs basic checks:
+#
+#   1. run a preparation step to install and cache node modules
+#   2. once prep succeeds, run lint and test in parallel
+#
+# The checks are skipped on the 'main' branch. The project relies on branch
+# protection to avoid pushes straight to 'main'.
+
+name: Checks
+
+on:
+  push:
+    branches-ignore:
+    - 'main'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  prep:
+    if: github.event.pull_request.draft == false
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Cache node_modules
+        uses: actions/cache@v3
+        id: cache-node-modules
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package.json') }}
+
+      - name: Install
+        run: yarn install
+
+  lint:
+    needs: prep
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Cache node_modules
+        uses: actions/cache@v3
+        id: cache-node-modules
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package.json') }}
+
+      - name: Install
+        run: yarn install
+
+      - name: Lint
+        run: yarn lint

.github/workflows/deploy-gh.yml

@@ -0,0 +1,71 @@
+name: Deploy Github Pages
+
+on:
+  push:
+    branches:
+    - 'main'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions: 
+  contents: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Cache dependencies
+        uses: actions/cache@v4
+        id: cache-yarn
+        with:
+          path: |
+            /home/runner/.cache/yarn
+            node_modules
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package.json') }}
+
+      - name: Cache dist
+        uses: actions/cache@v3
+        id: cache-dist
+        with:
+          path: public
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ github.sha }}
+
+      - name: Install
+        run: yarn install --ignore-engines
+
+      - name: Build
+        run: yarn build --prefix-paths
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Restore dist cache
+        uses: actions/cache@v3
+        id: cache-dist
+        with:
+          path: public
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ github.sha }}
+
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          branch: gh-pages
+          clean: true
+          single-commit: true
+          folder: public

.github/workflows/github-pr-update.js

@@ -0,0 +1,101 @@
+const PR_MARKER = '<!-- action-pr-marker -->';
+
+async function findComment({ github, context, core }) {
+  const comments = await github.rest.issues.listComments({
+    owner: context.repo.owner,
+    repo: context.repo.repo,
+    issue_number: context.payload.pull_request.number
+  });
+  const existingComment = comments.data.find((comment) =>
+    comment.body.includes(PR_MARKER)
+  );
+
+  return existingComment?.id;
+}
+
+async function setComment({ github, context, commentId, body }) {
+  if (commentId) {
+    await github.rest.issues.updateComment({
+      owner: context.repo.owner,
+      repo: context.repo.repo,
+      comment_id: commentId,
+      body
+    });
+  } else {
+    await github.rest.issues.createComment({
+      owner: context.repo.owner,
+      repo: context.repo.repo,
+      issue_number: context.payload.pull_request.number,
+      body
+    });
+  }
+}
+
+async function createDeployingComment({ github, context, core }) {
+  const commentId = await findComment({ github, context, core });
+
+  const comment = `
+${PR_MARKER}
+### <span aria-hidden="true">⚙️</span> Website deploying to S3!
+
+|  Name | Link |
+|:-:|------------------------|
+|<span aria-hidden="true">🔨</span> Latest commit | ${context.payload.pull_request.head.sha} |
+`;
+
+  await setComment({ github, context, commentId, body: comment });
+}
+
+async function createFailedComment({ github, context, core }) {
+  const commentId = await findComment({ github, context, core });
+
+  const comment = `
+${PR_MARKER}
+### <span aria-hidden="true">❌</span> Deployment failed!
+
+_Check the action logs for more information._
+
+|  Name | Link |
+|:-:|------------------------|
+|<span aria-hidden="true">🔨</span> Latest commit | ${context.payload.pull_request.head.sha} |
+`;
+
+  await setComment({ github, context, commentId, body: comment });
+}
+
+async function createSuccessComment({ github, context, core }) {
+  const commentId = await findComment({ github, context, core });
+
+  const websiteUrl = `http://${process.env.BUCKET_NAME}.s3-website-${process.env.AWS_REGION}.amazonaws.com/`;
+  const comment = `
+${PR_MARKER}
+### <span aria-hidden="true">✅</span> Deploy Preview ready!
+
+
+|  Name | Link |
+|:-:|------------------------|
+|<span aria-hidden="true">🔨</span> Latest commit | ${context.payload.pull_request.head.sha} |
+|<span aria-hidden="true">😎</span> Deploy Preview | ${websiteUrl} |
+`;
+
+  await setComment({ github, context, commentId, body: comment });
+}
+
+async function deleteComment({ github, context, core }) {
+  const commentId = await findComment({ github, context, core });
+
+  if (commentId) {
+    await github.rest.issues.deleteComment({
+      owner: context.repo.owner,
+      repo: context.repo.repo,
+      comment_id: commentId
+    });
+  }
+}
+
+module.exports = {
+  createDeployingComment,
+  createFailedComment,
+  createSuccessComment,
+  deleteComment
+};