CHAL-1 #done (#1)

* scaffold next app

* added PR template, preliminary model, createNamedContext and useContextSafely hooks

* updated image locations

* implemented and tested useContextSafely

* migrated footer, page container and modal

* migrated header

* added home page

.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "prettier",
+    "plugin:storybook/recommended"
+  ]
+}

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,27 @@
+## Checklist
+
+> Please ensure you have followed all of the steps below before submitting a pull request:
+
+- [ ] Include the corresponding Jira issue key and #done in the PR title, like so: "JRA-123 #done Migrate Election Reminders"
+- [ ] Verify that the code compiles
+- [ ] Verify that all tests pass
+- [ ] Verify that unit tests cover 100% of the code
+- [ ] Create Storybook stories for visual components
+- [ ] Verify that any visual components match the Figma
+- [ ] Test with a screen reader (if applicable)
+- [ ] Document your code with TSDoc comments
+- [ ] Format your code with Prettier
+
+## Overview
+
+> REQUIRED
+> Fill in the overview of this PR, what this PR is trying to achieve.
+
+## Test Plan
+
+> REQUIRED
+> What you did to verify your PR works as claimed? Make sure to list **things/steps/screenshots/screentcasts** so that others can reproduce your test easily. Share styling changes and component updates through screenshots.
+
+## Follow ups
+
+> It is okay for the PR to be not perfect, list what you/other should work on after this PR is merged.

.github/workflows/run-unit-tests.yml

@@ -0,0 +1,15 @@
+name: 'Run Unit Tests'
+on:
+  push:
+  pull_request:
+
+jobs:
+  run-unit-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: latest
+      - run: npm ci
+      - run: npm run test:ci

.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+.swc/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# ide-specific folders
+.vscode/
+.idea/
+*storybook.log

.prettierignore

@@ -0,0 +1,2 @@
+.next/
+coverage/

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "experimentalTernaries": true,
+  "singleQuote": true,
+  "arrowParens": "avoid"
+}

.storybook/main.ts

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  staticDirs: ['..\\public'],
+  core: {
+    disableTelemetry: true,
+  },
+  babel: {
+    presets: ['next/babel'],
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

CONTRIBUTING.md

@@ -4,51 +4,52 @@
 
 New contributors should be familiar with the following languages/frameworks:
 
- - [HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML)
- - [CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS)
- - [JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript)
- - [React](https://react.dev/)
+- [HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML)
+- [CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS)
+- [JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript)
+- [React](https://react.dev/)
 
 Additionally, we will be using the following languages/frameworks/libraries, which contributors will be expected to become familiar with:
 
- - [Next.js](https://nextjs.org/)
- - [TypeScript](https://www.typescriptlang.org/)
- - [Firebase](https://firebase.google.com/)
- - [Sass](https://sass-lang.com/)
+- [Next.js](https://nextjs.org/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Firebase](https://firebase.google.com/)
+- [Sass](https://sass-lang.com/)
 
 Finally, please take some time to familiarize yourself with the different user stories depicted in the Figma.
 
 ## Tools
 
 To contribute, you will need the following tools installed on your machine:
 
- - A code editor. [Visual Studio Code](https://code.visualstudio.com/) is a great option as it provides many helpful features for TypeScript development.
- - [Node.js](https://nodejs.org/en) - At the time of writing, Next.js requires version 18.17 or later.
- - [The Firebase CLI](https://firebase.google.com/docs/cli) - necessary for running emulators for local Firebase development.
+- A code editor. [Visual Studio Code](https://code.visualstudio.com/) is a great option as it provides many helpful features for TypeScript development.
+- [Node.js](https://nodejs.org/en) - At the time of writing, Next.js requires version 18.17 or later.
+- [The Firebase CLI](https://firebase.google.com/docs/cli) - necessary for running emulators for local Firebase development.
 
 ## Jira
 
 You will receive an invitation to join our Jira team once you have joined the organization as engineer. You will be assigned issues via Jira. Our Slack workspace will be configured so that you can set up personalized notifications from Jira when issues are assigned to you, etc. The Kanban board for this project in Jira will also provide a high-level roadmap for this development cycle.
 
 ## Workflow
 
- 1. Please fork this repo, and clone your fork. 
- 2. Run `npm install` locally within the project directory. To run the project, first run `npm run emulate` to start the Firebase emulators. Then, in a separate terminal, run `npm run dev` to start the Next.js development server.
- 3. You will be assigned a task to complete via Jira.
- 4. Once the task is complete and you have written unit tests which provide 100% code coverage, push the code to your fork.
- 5. Navigate to this repository and make a PR. For more information, please see [Making a PR](#making-a-pr).
- 6. Github actions will run unit tests to determine if the PR can be merged. Additionally, another team member will be required to provide a review.
- 7. If all unit tests pass and the reviewer requests no changes, the PR will be merged into development and you can begin work on any other issues assigned to you. If changes are requested or the test suite does not pass, please make the necessary changes and return to step 4.
+1.  Please fork this repo, and clone your fork.
+2.  Run `npm install` locally within the project directory. Then, run `npm run dev` to start the Next.js development server.
+3.  You will be assigned a task to complete via Jira.
+4.  Once the task is complete and you have written unit tests which provide 100% code coverage, push the code to your fork.
+5.  Navigate to this repository and make a PR. For more information, please see [Making a PR](#making-a-pr).
+6.  Github actions will run unit tests to determine if the PR can be merged. Additionally, another team member will be required to provide a review.
+7.  If all unit tests pass and the reviewer requests no changes, the PR will be merged into development and you can begin work on any other issues assigned to you. If changes are requested or the test suite does not pass, please make the necessary changes and return to step 4.
 
 ## Making a PR
 
 Navigate to this repository and click on "Pull requests." Click the "Create pull request" button. Select "compare across forks." For the head repository, select your fork. In the title of the PR, make sure to include the Jira issue key and the state to transition the issue into (for instance "JRA-123 #done"). This will close the issue in Jira automatically once the PR is merged. Make sure to fill in the description field in the PR and request a review from a team member.
 
 ## Further Reading
-We will be using Dependency Injection and an Inversion of Control container to provide services to presentation-layer components. Presentation-layer components should not handle business logic. They should simply call methods of service classes which will handle this logic. This will help create a loosely-coupled application which is easy to understand, maintain, modify and test. Therefore, an understanding of Dependency Injection and Inversion of Control as well as SOLID design principles will be valuable for contributing engineers. 
+
+We will be using Dependency Injection and an Inversion of Control container to provide services to presentation-layer components. Presentation-layer components should not handle business logic. They should simply call methods of service classes which will handle this logic. This will help create a loosely-coupled application which is easy to understand, maintain, modify and test. Therefore, an understanding of Dependency Injection and Inversion of Control as well as SOLID design principles will be valuable for contributing engineers.
 
 For more information on these concepts, please see:
 
- - [Dependency Injection and Inversion of Control](https://hackernoon.com/beginners-guide-to-inversion-of-control)
- - [SOLID Design Principles](https://hackernoon.com/solid-principles-made-easy-67b1246bcdf)
- - [Clean Code](https://www.oreilly.com/library/view/clean-code-a/9780136083238/)
+- [Dependency Injection and Inversion of Control](https://hackernoon.com/beginners-guide-to-inversion-of-control)
+- [SOLID Design Principles](https://hackernoon.com/solid-principles-made-easy-67b1246bcdf)
+- [Clean Code](https://www.oreilly.com/library/view/clean-code-a/9780136083238/)

README.md

@@ -1,4 +1,5 @@
 # 8by8 Challenge
+
 Welcome to the repository for the 8by8 Challenge! The 8by8 Challenge is a web application intended to foster civic engagement by allowing users to perform various actions such as registering to vote or signing up for election reminders in exchange for badges. Users can also share their challenge with friends via social media. When an invited user registers to vote, or takes another similar action, the inviter also receives a badge. When a user receives 8 badges within 8 days, they have completed their challenge and will earn a reward.
 
 Currently, we are working on migrating the existing application to Next.js and TypeScript, as well as fixing bugs, improving accessibility, etc. For the existing application's source code, please visit [https://github.com/8by8-org/web-app](https://github.com/8by8-org/web-app).
@@ -9,7 +10,7 @@ New engineers should review [CONTRIBUTING.md](https://github.com/8by8-org/8by8-c
 
 ## Resources
 
- - [Figma prototype (see "Mocks, December version" under pages)](https://www.figma.com/file/0Q2tpQqi9sYcIA3ZyiX3PF/8BY8_POD_Jul30)
- - [Existing application source code](https://github.com/8by8-org/web-app)
- - [Deployed application](http://challenge.8by8.us/)
- - [Contributing](https://github.com/8by8-org/8by8-challenge/blob/development/CONTRIBUTING.md) 
+- [Figma prototype (see "Mocks, December version" under pages)](https://www.figma.com/file/0Q2tpQqi9sYcIA3ZyiX3PF/8BY8_POD_Jul30)
+- [Existing application source code](https://github.com/8by8-org/web-app)
+- [Deployed application](http://challenge.8by8.us/)
+- [Contributing](https://github.com/8by8-org/8by8-challenge/blob/development/CONTRIBUTING.md)

jest.config.mjs

@@ -0,0 +1,41 @@
+import nextJest from 'next/jest.js';
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+});
+
+// Add any custom config to be passed to Jest
+/** @type {import('jest').Config} */
+const config = {
+  testEnvironment: 'jest-environment-jsdom',
+  collectCoverage: true,
+  //add directories here to include them in coverage reports and threshold
+  collectCoverageFrom: ['./src/**'],
+  //directories that should not be counted against the test coverage thresholds
+  modulePathIgnorePatterns: [
+    '__snapshots__',
+    './src/model/enums',
+    './src/stories',
+    'fonts',
+  ],
+  //TODO : remove 'user-context.tsx' once it is implemented
+  coveragePathIgnorePatterns: [
+    'index.ts',
+    'index.tsx',
+    'layout.tsx',
+    'user-context.tsx',
+  ],
+  coverageThreshold: {
+    //require 100% code coverage for the tests to pass
+    global: {
+      branches: 100,
+      functions: 100,
+      lines: 100,
+      statements: 100,
+    },
+  },
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config);

next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;