Migrate to next js (#325)

.env.example

@@ -1,12 +1,17 @@
-# CONTENTFUL keys are required to run the blog in the app. Please reach out in the #product channel in slack for keys
+VWC_ACTIVE_ENV=local
 CONTENTFUL_SPACE_ID=
 CONTENTFUL_ACCESS_TOKEN=
-# Only add this when developing the blog
-# Optional flag to enable different environments available in Contentful develop | master
+# Optional flag to enable different environments available in Contentful local | master
 # Defaults to master environment
-CONTENTFUL_ENVIRONMENT=
-# VWC_ACTIVE_ENV one of local or production 
-# will enable disabled portions of the app contentful api keys are required
-#VWC_ACTIVE_ENV=local ##disables blog, podcast, ... 
-#VWC_ACTIVE_ENV=production ##enables blog, podcast, ... 
-VWC_ACTIVE_ENV=local
+CONTENTFUL_ENVIRONMENT=master
+
+# api keys
+MAILCHIMP_SUBSCRIBE_URL=
+MAILCHIMP_API_KEY=
+MAILCHIMP_LIST_ID=
+APPLY_WEBHOOK_ID=
+CONTACT_WEBHOOK_ID=
+MENTOR_WEBHOOK_ID=
+ZIPCODE_GETTER_USERID=
+JOBSEARCH_API_ID=
+JOBSEARCH_API_KEY=

.eslintignore

@@ -1 +1,4 @@
 /src/assets
+**/node_modules/*
+**/out/*
+**/.next/*

.eslintrc.js

@@ -0,0 +1,82 @@
+module.exports = {
+  parser: '@babel/eslint-parser',
+  extends: [
+    'eslint:recommended',
+    'plugin:prettier/recommended',
+    'next/core-web-vitals',
+    'plugin:storybook/recommended',
+  ],
+  parserOptions: {
+    requireConfigFile: false,
+    ecmaFeatures: {
+      jsx: true,
+    },
+    babelOptions: {
+      presets: ['@babel/preset-react'],
+    },
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  plugins: ['prettier', 'react-hooks'],
+  env: {
+    browser: true,
+    es6: true,
+    jest: true,
+    node: true,
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  rules: {
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'no-useless-catch': 'off',
+    'no-undef': 'off',
+    'no-debugger': 'off',
+    eqeqeq: ['error', 'always'],
+    'getter-return': [
+      'error',
+      {
+        allowImplicit: true,
+      },
+    ],
+    'no-template-curly-in-string': 'error',
+    semi: 'off',
+    'array-bracket-spacing': ['error', 'never'],
+    'block-spacing': ['error', 'always'],
+    'brace-style': [
+      'error',
+      '1tbs',
+      {
+        allowSingleLine: true,
+      },
+    ],
+    camelcase: 'warn',
+    'comma-dangle': 'off',
+    'comma-spacing': [
+      'error',
+      {
+        before: false,
+        after: true,
+      },
+    ],
+    'comma-style': ['error', 'last'],
+    'computed-property-spacing': ['error', 'never'],
+    'func-call-spacing': ['error', 'never'],
+    'keyword-spacing': [
+      'error',
+      {
+        before: true,
+        after: true,
+      },
+    ],
+    'no-duplicate-imports': 'error',
+    'id-length': 'off',
+    'id-blacklist': 0,
+    'max-depth': ['warn', 4],
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+  },
+}

.github/workflows/nodejs.yml

@@ -5,25 +5,28 @@ name: Node.js CI
 
 on:
   pull_request:
-    branches: [master]
+    branches: [ master ]
 
 jobs:
   build:
+
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [14.x, 16.x]
 
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
-        with:
-          node-version: ${{ matrix.node-version }}
-      - run: yarn
-      - run: yarn lint
-      - run: yarn test
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
 
-        env:
-          CI: true
+    - run: npm install
+    - run: npm run lint
+    - run: npm run test
+      env: # Or as an environment variable
+        MAILCHIMP_SUBSCRIBE_URL: ${{ secrets.MAILCHIMP_SUBSCRIBE_URL }}
+        MAILCHIMP_LIST_ID: ${{ secrets.MAILCHIMP_LIST_ID }}
+        CI: true

.gitignore

@@ -62,7 +62,7 @@ typings/
 .cache/
 
 # Build directory
-public/
+# public/
 .DS_Store
 
 # Editors
@@ -73,5 +73,12 @@ public/
 coverage
 
 #env
-.env
-.env.local
+.env,
+ # next
+.next
+out
+# Files generated by next-on-netlify command
+/out_publish/
+/out_functions/
+
+build/*

.prettierrc

@@ -2,7 +2,6 @@
   "printWidth": 100,
   "singleQuote": true,
   "trailingComma": "es5",
-  "jsxBracketSameLine": false,
   "semi": false,
   "arrowParens": "avoid"
 }

.storybook/main.js

@@ -0,0 +1,16 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "storybook-dark-mode/register", 
+    "@storybook/addon-a11y"
+  ],
+  "framework": "@storybook/react",
+  "core": {
+    "builder": "webpack5"
+  }
+}

gatsby-ssr.js → .storybook/preview-body.html

@@ -1,16 +1,5 @@
-const React = require('react')
-const Layout = require('./src/components/Layout').default
-
-exports.onRenderBody = ({ setPostBodyComponents, setPreBodyComponents }) => {
-  setPreBodyComponents(<MagicScriptTag key="magic-script-tag" />)
-}
-
-exports.wrapPageElement = ({ element, props }) => {
-  return <Layout {...props}>{element}</Layout>
-}
-
-const MagicScriptTag = () => {
-  let codeToRunOnClient = `
+<!--  .storybook/preview-body.html -->
+<script>
   (function(){
     function getInitialColorMode() {
       const persistedColorPreference = window.localStorage.getItem('color-mode')
@@ -33,7 +22,5 @@
     const colorMode = getInitialColorMode();
     const root = document.documentElement;
     root.setAttribute("color-mode", colorMode === "light" ? "light" : "dark")
-  })()`
-  // eslint-disable-next-line react/no-danger
-  return <script dangerouslySetInnerHTML={{ __html: codeToRunOnClient }} />
-}
+  })()
+</script>

.storybook/preview.js

@@ -0,0 +1,56 @@
+// import all css files from the assets folder
+import './../src/assets/lib/bootstrap/dist/css/bootstrap.min.css'
+import './../src/assets/css/main.css'
+import './../src/assets/css/custom.css'
+import './../src/assets/css/apply-form.css'
+import './../src/assets/css/board.css'
+import './../src/assets/css/card.css'
+import './../src/assets/css/code-of-conduct.css'
+import './../src/assets/css/job-form.css'
+import './../src/assets/css/loader.css'
+import './../src/assets/css/nav.css'
+import './../src/assets/css/pagination.css'
+import './../src/assets/css/toggle.css'
+import './../src/assets/css/video.css'
+
+
+import React, { createContext, useState, useEffect } from 'react'
+import { useDarkMode } from 'storybook-dark-mode'
+import * as NextImage from "next/image";
+
+// Override the default next image
+const OriginalNextImage = NextImage.default;
+
+Object.defineProperty(NextImage, "default", {
+  configurable: true,
+  value: (props) => <OriginalNextImage {...props} unoptimized />,
+});
+
+// Custom ThemeProvider for Storybook dark mode toggle
+const ThemeContext = createContext({})
+
+function ThemeProvider({ children, mode, }) {
+  const [colorMode] = useState(mode)
+
+  useEffect(() => {
+    const root = window.document.documentElement
+    root.setAttribute('color-mode', mode === 'light' ? 'light' : 'dark')
+  }, [mode])
+
+  return (
+    <ThemeContext.Provider value={{ colorMode }}>{children}</ThemeContext.Provider>
+  )
+}
+
+export const decorators = [
+  (Story) => {
+    const mode = useDarkMode() ? 'dark' : 'light'
+    return (
+      <ThemeProvider mode={mode} style={{ margin: '3rem', paddin: '3rem' }}>
+        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', width: '100vw' }}>
+          <Story />
+        </div>
+      </ThemeProvider>
+    )
+  }
+]