Draft: Issue 524/upgrade gatsby

.eslintignore

@@ -0,0 +1,2 @@
+.gitignore 
+/\"**/*.{js,jsx}\"

.pre-commit-config.yaml

@@ -0,0 +1,11 @@
+repos:
+-   repo: local
+    hooks:
+    -   id: eslint
+        name: eslint
+        entry: ./node_modules/.bin/eslint
+        language: script
+        types: [javascript]
+        args: ["--fix"]
+        pass_filenames: true
+        always_run: false

docs/adr/0007-add-pre-commit-hooks-and-directions

@@ -0,0 +1,63 @@
+# NUMBER. ADD LINTING PRECOMMIT
+
+- Status: proposed : 2023-05-23 accepted: 2023-05-31
+- Deciders: Orbaco
+- Date: 2023-05-31
+
+Technical Story: [link to discussion issue](https://github.com/NASA-IMPACT/admg-casei/issues/522) <!-- optional -->
+
+## Context and Problem Statement
+
+[Describe the context and problem statement, e.g., in free form using two to three sentences. You may want to articulate the problem in form of a question.]
+
+## Decision Drivers <!-- optional -->
+
+- Discussion from post-mortem in reference ticket.
+
+## Considered Options
+
+- Local development environment for CASEI can more closely resemble Github Actions runners by using dev containers.
+- Configuring a threshold for Jest unit tests
+- pre-commit hooks for linting procedures in CI
+- Pin versions in package.json
+
+## Decision Outcome
+
+Chosen option: to add pre-commit hooks because it will not slow commit and development process during feature development and is ultimately optional.
+
+### Positive Consequences <!-- optional -->
+
+- Use a python environment and pre-commit hooks to run `eslint` and other commands before they fail in CI.
+- No debugging of linting issues in CI
+- Automate `eslint` so developers do not need to remember to run it manually.
+
+### Negative Consequences <!-- optional -->
+
+### Pre-requisites
+- Python virtualenv (venv, pyenv virtualenv, etc)
+- Install pre-commit package
+
+### Setup 
+```
+    # activate your pyenv environment
+    example... `pyenv activate casei-nodeenv`
+
+    # install all requirements
+    pip install -r requirements.txt
+
+    # OR install pre-commit 
+    pip install pre-commit
+
+    # install the local repository pre commits
+    pre-commit install
+
+    # test a change a git commit
+    git add -A && git commit -m "testing pre commits"
+
+    # optional: run on all files
+    pre-commit run --all-files
+```
+
+## Links <!-- optional -->
+
+- [Pre-commit library](https://pre-commit.com/index.html#plugins)

gatsby-config.js

@@ -39,10 +39,11 @@ module.exports = {
         path: `${__dirname}/src/content/`,
       },
     },
-
     `gatsby-transformer-json`,
-    `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
+    {
+      resolve: `gatsby-transformer-sharp`,
+    },
     `gatsby-plugin-image`,
     {
       resolve: `gatsby-plugin-manifest`,
@@ -65,11 +66,6 @@ module.exports = {
       },
     },
     `gatsby-plugin-styled-components`,
-    {
-      resolve: `gatsby-plugin-create-client-paths`,
-      options: { prefixes: [`/edit/*`] },
-    },
-
     {
       resolve: `gatsby-plugin-csp`,
       options: {

gatsby-node.js

@@ -212,6 +212,31 @@ const fetchData = async endpoint => {
 
 exports.createPages = async ({ graphql, actions }) => {
   const { createPage } = actions
+
+  actions.createSlice({
+    id: `accordion`,
+    component: require.resolve(`./src/components/accordion.js`),
+  })
+  // actions.createSlice({
+  //   id: `button`,
+  //   component: require.resolve(`./src/components/button.js`),
+  // })
+  actions.createSlice({
+    id: `footer`,
+    component: require.resolve(`./src/components/footer.js`),
+  })
+  actions.createSlice({
+    id: `hero`,
+    component: require.resolve(`./src/components/hero.js`),
+  })
+  // actions.createSlice({
+  //   id: `card`,
+  //   component: require.resolve(`./src/components/card.js`),
+  // })
+  actions.createSlice({
+    id: `focus-section`,
+    component: `./src/components/focus-section.js`,
+  })
   // **Note:** The graphql function call returns a Promise
   // see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise for more info
   const result = await graphql(`

jest.config.js

@@ -18,6 +18,13 @@ module.exports = {
   globals: {
     __PATH_PREFIX__: ``,
   },
-  testURL: `http://localhost`,
-  setupFiles: [`<rootDir>/test/jest.setup.js`, `<rootDir>/test/loadershim.js`],
+  testEnvironmentOptions: {
+    testURL: `http://localhost`,
+  },
+  setupFiles: [
+    `<rootDir>/test/jest.setup.js`,
+    `<rootDir>/test/loadershim.js`,
+    `<rootDir>/test/__mocks__/react.js`,
+    `raf/polyfill`,
+  ],
 }