next.js migration

.circleci/config.yml

@@ -1,58 +1,57 @@
-version: 2.1
-jobs:
-  build-and-test:
-    circleci_ip_ranges: true
-    docker:
-      - image: cimg/node:20.11.0-browsers
-      - image: circleci/postgres:12
-        environment:
-          POSTGRES_USER: postgres
-          POSTGRES_PASSWORD:
-    resource_class: xlarge
-    steps:
-      - checkout
-      - run:
-          name: Install PostgreSQL client and setup database
-          command: |
-            sudo apt-get update
-            sudo apt-get install postgresql-client
-            createdb -h localhost d4adlocal -U postgres
-      - run:
-          name: Install required dependencies for Cypress
-          command: sudo apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
-      - restore_cache:
-          keys:
-            - node-deps-v2-{{ .Branch }}-{{ checksum "package.json" }}
-            - node-deps-v2-{{ .Branch }}
-            - node-deps-v2
-      - run:
-          name: Install Node.js dependencies
-          command: npm install
-      - save_cache:
-          key: node-deps-v2-{{ .Branch }}-{{ checksum "package.json" }}
-          paths:
-            - ~/.npm
-            - ~/.cache
-      - run:
-          name: Run Node.js tests
-          command: npm test
-      - run:
-          name: Execute feature tests script
-          command: DB_ENV=$DB_ENV scripts/feature-tests.sh > feature-test-output.txt
-          no_output_timeout: 30m
-      - store_artifacts:
-          path: feature-test-output.txt
-      - store_artifacts:
-          path: wiremock.log
-      - store_artifacts:
-          path: /home/circleci/.npm/_logs/*.log
-      - store_artifacts:
-          path: ~/project/frontend/cypress/videos
-      - persist_to_workspace:
-          root: ~/project
-          paths:
-            - .
-workflows:
-  build-test-deploy:
-    jobs:
-      - build-and-test
+# version: 2.1
+# jobs:
+#   build-and-test:
+#     circleci_ip_ranges: true
+#     docker:
+#       - image: cimg/node:20.11.0-browsers
+#       - image: circleci/postgres:12
+#         environment:
+#           POSTGRES_USER: postgres
+#           POSTGRES_PASSWORD:
+#     steps:
+#       - checkout
+#       - run:
+#           name: Install PostgreSQL client and setup database
+#           command: |
+#             sudo apt-get update
+#             sudo apt-get install postgresql-client
+#             createdb -h localhost d4adlocal -U postgres
+#       - run:
+#           name: Install required dependencies for Cypress
+#           command: sudo apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
+#       - restore_cache:
+#           keys:
+#             - node-deps-v2-{{ .Branch }}-{{ checksum "package.json" }}
+#             - node-deps-v2-{{ .Branch }}
+#             - node-deps-v2
+#       - run:
+#           name: Install Node.js dependencies
+#           command: npm install
+#       - save_cache:
+#           key: node-deps-v2-{{ .Branch }}-{{ checksum "package.json" }}
+#           paths:
+#             - ~/.npm
+#             - ~/.cache
+#       - run:
+#           name: Run Node.js tests
+#           command: npm test
+#       - run:
+#           name: Execute feature tests script
+#           command: DB_ENV=$DB_ENV scripts/feature-tests.sh > feature-test-output.txt
+#           no_output_timeout: 30m
+#       - store_artifacts:
+#           path: feature-test-output.txt
+#       - store_artifacts:
+#           path: wiremock.log
+#       - store_artifacts:
+#           path: /home/circleci/.npm/_logs/*.log
+#       - store_artifacts:
+#           path: ~/project/frontend/cypress/videos
+#       - persist_to_workspace:
+#           root: ~/project
+#           paths:
+#             - .
+# workflows:
+#   build-test-deploy:
+#     jobs:
+#       - build-and-test

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": ["next/core-web-vitals", "plugin:storybook/recommended"],
+  "rules": {
+    "react-hooks/exhaustive-deps": "off"
+  }
+}

.gitignore

@@ -1,10 +1,54 @@
 # 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/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# Storybook
+*storybook.log
+storybook-static
+build-storybook.log
+
+# Cypress
+cypress/videos/
+cypress/screenshots/
+
+# JetBrains IDEs
 .idea/
-.DS_store
 
 # Python Environments
-# Environments
 .env
 .venv
 env/
@@ -20,9 +64,7 @@ backend/data/providers_*.csv
 # Old ETPL File when running through etpl table seed guide
 backend/data/standardized_etpl_old.csv
 
-# ################################################################################ #
-# EDITORS                                                                          #
-# ################################################################################ #
+# Visual Studio Code
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
@@ -36,12 +78,9 @@ backend/data/standardized_etpl_old.csv
 # Built Visual Studio Code Extensions
 *.vsix
 
-# ################################################################################ #
-# OS                                                                               #
-# ################################################################################ #
-
-#MacOS
+# OS
 
+# MacOS
 # General
 .DS_Store
 .AppleDouble
@@ -50,7 +89,6 @@ backend/data/standardized_etpl_old.csv
 # Icon must end with two \r
 Icon
 
-
 # Thumbnails
 ._*
 
@@ -96,8 +134,7 @@ $RECYCLE.BIN/
 # Windows shortcuts
 *.lnk
 
-.vscode
+# Miscellaneous
 OverlayTool.tsx
 overlayImages
-
-/node_modules
+frontend

.nvmrc

@@ -1 +1 @@
-v20.11.0
+20.11.0

.prettierignore

@@ -0,0 +1,5 @@
+# Ignore artifacts:
+build
+coverage
+backend/data
+backend/migrations

.prettierrc

@@ -0,0 +1 @@
+{}

.storybook/DocumentationTemplate.mdx

@@ -0,0 +1,15 @@
+import {
+  Meta,
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Controls,
+  Stories,
+} from "@storybook/blocks";
+
+<Meta isTemplate />
+
+<Title />
+
+<Stories />

.storybook/Theme.ts

@@ -0,0 +1,10 @@
+import { create } from "@storybook/theming/create";
+
+export default create({
+  base: "light",
+  brandTitle: "My Career NJ",
+  brandUrl: "https://mycareer.nj.gov/",
+  brandImage:
+    "https://mycareer.nj.gov/static/media/njlogo.3a0393e6672e87a75fce884b1437162f.svg",
+  brandTarget: "_self",
+});

.storybook/main.ts

@@ -0,0 +1,18 @@
+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: {},
+  },
+  staticDirs: ["../public"],
+};
+export default config;

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/manager-api";
+import customTheme from "./Theme";
+
+addons.setConfig({
+  theme: customTheme,
+});

.storybook/preview.tsx

@@ -0,0 +1,28 @@
+import type { Preview } from "@storybook/react";
+import React from "react";
+import "./storybook.css";
+import "../src/styles/main.scss";
+import DocumentationTemplate from "./DocumentationTemplate.mdx";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      page: DocumentationTemplate,
+    },
+  },
+  decorators: [
+    (Story) => (
+      <main>
+        <Story />
+      </main>
+    ),
+  ],
+};
+
+export default preview;

.storybook/storybook.css

@@ -0,0 +1,16 @@
+#storybook-docs > div > div {
+  max-width: 1500px;
+}
+
+#storybook-docs h1,
+#storybook-docs h2,
+#storybook-docs h3,
+#storybook-docs h4,
+#storybook-docs h5,
+#storybook-docs h6,
+#storybook-docs p,
+#storybook-docs li,
+#storybook-docs ul,
+#storybook-docs ol {
+  max-width: none;
+}

.vscode/css.code-snippets

@@ -0,0 +1,21 @@
+{
+  "Scale-up": {
+    "prefix": "scale-up",
+    "body": ["@media screen and (min-width: (s.$$1)) {", "  $2", "}"],
+    "description": "Media Query going from narrow to wide."
+  },
+  "Scale-down": {
+    "prefix": "scale-down",
+    "body": ["@media screen and (max-width: (s.$$1 - 1)) {", "  $2", "}"],
+    "description": "Media Query going from wide to narrow."
+  },
+  "Scale-between": {
+    "prefix": "scale-between",
+    "body": [
+      "@media (max-width: (s.$$1 - 1)) and (min-width: (s.$$2)px){",
+      "  $3",
+      "}"
+    ],
+    "description": "Media Query going between wide to narrow."
+  }
+}