Merge pull request #399 from jerrypopsoff/update-dependencies

Update all dependencies to latest version available
jerrypopsoff · Oct 8, 2024 · 144696c · 144696c
2 parents 055af72 + 58fc009
commit 144696c
Show file tree

Hide file tree

Showing 17 changed files with 1,751 additions and 541 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -4,10 +4,10 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: '16.x'
+          node-version-file: '.nvmrc'
       - run: yarn install
       - run: yarn build
       - run: yarn lint

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-16.13.2
+20.13.1
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -3,8 +3,8 @@ import { defineConfig } from 'cypress';
 export default defineConfig({
   blockHosts: ['*google-analytics.com', '*googletagmanager.com'],
   e2e: {
-    setupNodeEvents(on, config) {
-      // implement node event listeners here
+    setupNodeEvents(_on, _config) {
+      // Implement node event listeners here.
     },
   },
   projectId: 'ttcbvc',

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,27 @@
+import { includeIgnoreFile } from '@eslint/compat';
+import { FlatCompat } from '@eslint/eslintrc';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const gitignorePath = path.resolve(__dirname, '.gitignore');
+
+const compat = new FlatCompat({
+  ignorePatterns: ['.gitignore'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['prettier'],
+  root: true,
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'error',
+    'prettier/prettier': 'error',
+    'sort-keys': 'error',
+  },
+});
+
+const configuration = [
+  includeIgnoreFile(gitignorePath),
+  ...compat.extends('react-app'),
+];
+
+export default configuration;
diff --git a/package.json b/package.json
@@ -6,38 +6,46 @@
     "build": "react-scripts build",
     "e2e": "yarn cypress run --config baseUrl=http://localhost:3000,video=false",
     "e2e:open": "yarn cypress open --config baseUrl=http://localhost:3000,video=false",
-    "lint": "npx eslint --ignore-path .gitignore .",
+    "lint": "npx eslint .",
     "start": "react-scripts start",
     "test": "react-scripts test"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-helmet-async": "^1.3.0",
-    "react-is": "^18.2.0",
-    "react-router-dom": "^6.8.1",
-    "styled-components": "^5.3.6"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-helmet-async": "^2.0.5",
+    "react-is": "^18.3.1",
+    "react-router-dom": "^6.26.2",
+    "styled-components": "^6.1.13"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@tsconfig/recommended": "^1.0.2",
-    "@types/google.analytics": "^0.0.42",
-    "@types/jest": "^29.4.0",
-    "@types/node": "^18.14.2",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.53.0",
-    "@typescript-eslint/parser": "^5.53.0",
-    "cypress": "^12.7.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "@babel/core": "^7.25.7",
+    "@babel/plugin-syntax-flow": "^7.25.7",
+    "@babel/plugin-transform-react-jsx": "^7.25.7",
+    "@eslint/compat": "^1.2.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@tsconfig/recommended": "^1.0.7",
+    "@types/google.analytics": "^0.0.46",
+    "@types/jest": "^29.5.13",
+    "@types/node": "^22.7.5",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.0",
+    "@types/styled-components": "^5.1.34",
+    "@typescript-eslint/eslint-plugin": "^8.8.1",
+    "@typescript-eslint/parser": "^8.8.1",
+    "cypress": "^13.15.0",
+    "eslint": "^8.57.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-prettier": "^5.2.1",
+    "jest": "^29.7.0",
     "netlify-plugin-cypress": "^2.2.1",
-    "prettier": "^2.8.4",
+    "prettier": "^3.3.3",
     "react-scripts": "5.0.1",
-    "ts-jest": "^29.0.5",
-    "typescript": "^4.9.5"
+    "ts-jest": "^29.2.5",
+    "typescript": "^5.6.2"
   },
   "browserslist": {
     "production": [

diff --git a/src/components/App.test.tsx b/src/components/App.test.tsx
@@ -1,5 +1,4 @@
 import App from './App';
-import React from 'react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 

diff --git a/src/components/FormDialog.tsx b/src/components/FormDialog.tsx
@@ -12,8 +12,8 @@ const HORIZONTAL_MARGIN_PX = 12; // Horizontal margin of entire dialog
 const MINIMUM_DIALOG_HEIGHT = 150;
 
 interface StyledDialogProps {
-  dialogHeight: number;
-  dialogWidth: number;
+  $dialogHeight: number;
+  $dialogWidth: number;
 }
 
 const StyledDialog = styled.dialog<StyledDialogProps>`
@@ -23,11 +23,11 @@ const StyledDialog = styled.dialog<StyledDialogProps>`
   border-radius: 5px;
   display: flex;
   flex-direction: column;
-  height: ${({ dialogHeight }) => dialogHeight}px;
+  height: ${({ $dialogHeight }) => $dialogHeight}px;
   padding: 0;
   position: fixed;
   top: ${VERTICAL_MARGIN_PX}px;
-  width: ${({ dialogWidth }) => dialogWidth}px;
+  width: ${({ $dialogWidth }) => $dialogWidth}px;
   z-index: ${DIALOG_Z_INDEX};
 `;
 
@@ -99,8 +99,8 @@ const FormDialog: React.FC<Props> = ({ onCloseFormDialog, src, title }) => {
   return (
     <>
       <StyledDialog
-        dialogHeight={dialogHeight}
-        dialogWidth={dialogWidth}
+        $dialogHeight={dialogHeight}
+        $dialogWidth={dialogWidth}
         open={true}
       >
         <StyledDialogHeader>
@@ -110,8 +110,6 @@ const FormDialog: React.FC<Props> = ({ onCloseFormDialog, src, title }) => {
         </StyledDialogHeader>
         <StyledIframe
           height={formHeight}
-          marginHeight={0}
-          marginWidth={0}
           src={src}
           title={title}
           width={dialogWidth}

diff --git a/src/components/Home.tsx b/src/components/Home.tsx
@@ -9,9 +9,7 @@ import HabaneroRanch2400 from '../images/glamorous-habanero-ranch-2400.jpeg';
 import HabaneroRanchWebp600 from '../images/glamorous-habanero-ranch-600.webp';
 import HabaneroRanchWebp1200 from '../images/glamorous-habanero-ranch-1200.webp';
 import HabaneroRanchWebp2400 from '../images/glamorous-habanero-ranch-2400.webp';
-import { DEFAULT_TILE_LIST_IMAGE_WIDTH_PX } from '../constants/css/tile-list';
 import PressArticles from './PressArticles';
-import { TILE_LIST_DIVIDER_STYLE } from '../constants/css/tile-list';
 import { BUTTON_STYLE } from '../constants/css/button';
 import { Link } from 'react-router-dom';
 
@@ -38,10 +36,6 @@ const StyledLink = styled(Link)`
   ${BUTTON_STYLE}
 `;
 
-const StyledDivider = styled.div`
-  ${TILE_LIST_DIVIDER_STYLE}
-`;
-
 const Home: React.FC = () => {
   return (
     <>
@@ -91,11 +85,6 @@ const Home: React.FC = () => {
             See announcements
           </StyledLink>
         </StyledSection>
-        <StyledDivider
-          aria-hidden={true}
-          $imageWidthPx={DEFAULT_TILE_LIST_IMAGE_WIDTH_PX}
-          $margin="24px 0"
-        />
         <Typography type="h1">Press</Typography>
         <PressArticles />
       </StyledHome>

diff --git a/src/components/MobileNavigationBar.tsx b/src/components/MobileNavigationBar.tsx
@@ -21,14 +21,14 @@ import { isDarkMode } from '../utilities/dark-mode';
 const MENU_ITEM_HEIGHT_PX = 60;
 
 interface Slideable {
-  isOpen: boolean;
-  slideDistancePx: number;
+  $isOpen: boolean;
+  $slideDistancePx: number;
 }
 
 const SLIDE_STYLE = css<Slideable>`
   transition: transform 0.3s ease-in-out;
-  transform: ${({ isOpen, slideDistancePx }) =>
-    `translateY(${isOpen ? `${slideDistancePx}px` : '0'})`};
+  transform: ${({ $isOpen, $slideDistancePx }) =>
+    `translateY(${$isOpen ? `${$slideDistancePx}px` : '0'})`};
 `;
 
 const StyledNavigationBar = styled.nav`
@@ -116,7 +116,7 @@ const StyledMenuItems = styled.ul<Slideable>`
     left: 0;
     position: absolute;
     right: 0;
-    top: -${({ slideDistancePx }) => slideDistancePx}px;
+    top: -${({ $slideDistancePx }) => $slideDistancePx}px;
     z-index: ${NAVIGATION_MENU_Z_INDEX};
   }
 `;
@@ -148,8 +148,8 @@ const MobileNavigationBar: React.FC<Props> = ({ navigationMenuItems }) => {
   return (
     <StyledNavigationBar>
       <StyledNavigationBarContent
-        isOpen={isOpen}
-        slideDistancePx={navigationMenuItemsHeightPx}
+        $isOpen={isOpen}
+        $slideDistancePx={navigationMenuItemsHeightPx}
       >
         <StyledNavigationBarContentInner>
           <StyledHamburgerButton
@@ -170,8 +170,8 @@ const MobileNavigationBar: React.FC<Props> = ({ navigationMenuItems }) => {
       </StyledNavigationBarContent>
       <StyledMenuItems
         aria-hidden={isOpen ? undefined : 'true'}
-        isOpen={isOpen}
-        slideDistancePx={navigationMenuItemsHeightPx}
+        $isOpen={isOpen}
+        $slideDistancePx={navigationMenuItemsHeightPx}
       >
         <li>
           <StyledCloseButton

diff --git a/src/components/PressArticles.tsx b/src/components/PressArticles.tsx
@@ -17,23 +17,29 @@ const StyledTileList = styled.ul`
   ${TILE_LIST_STYLE}
 `;
 
-const StyledTileListItem = styled.li`
+const StyledTileListItem = styled.li<{ $imageWidthPx: number }>`
   ${TILE_LIST_ITEM_STYLE}
 `;
 
-const StyledArticleListItem = styled.a`
+const StyledArticleListItem = styled.a<{ $imageWidthPx: number }>`
   ${TILE_LIST_ITEM_LINK_STYLE}
 `;
 
-const StyledTileImageContainer = styled.div`
+const StyledTileImageContainer = styled.div<{
+  $aspectRatio: number;
+  $imageWidthPx: number;
+}>`
   ${TILE_IMAGE_CONTAINER_STYLE}
 `;
 
-const StyledTileImage = styled(OptimizedImage)`
+const StyledTileImage = styled(OptimizedImage)<{
+  $aspectRatio: number;
+  $imageWidthPx: number;
+}>`
   ${TILE_IMAGE_STYLE}
 `;
 
-const StyledTileInformation = styled.div`
+const StyledTileInformation = styled.div<{ $imageWidthPx: number }>`
   ${TILE_INFORMATION_STYLE}
 `;
 

diff --git a/src/components/PricingListItem.tsx b/src/components/PricingListItem.tsx
@@ -15,19 +15,25 @@ import {
   PRODUCT_IMAGE_WIDTH_PX,
 } from '../constants/product';
 
-const StyledTileListItem = styled.li`
+const StyledTileListItem = styled.li<{ $imageWidthPx: number }>`
   ${TILE_LIST_ITEM_STYLE}
 `;
 
-const StyledTileImageContainer = styled.div`
+const StyledTileImageContainer = styled.div<{
+  $aspectRatio: number;
+  $imageWidthPx: number;
+}>`
   ${TILE_IMAGE_CONTAINER_STYLE}
 `;
 
-const StyledTileImage = styled(OptimizedImage)`
+const StyledTileImage = styled(OptimizedImage)<{
+  $aspectRatio: number;
+  $imageWidthPx: number;
+}>`
   ${TILE_IMAGE_STYLE}
 `;
 
-const StyledTileInformation = styled.div`
+const StyledTileInformation = styled.div<{ $imageWidthPx: number }>`
   ${TILE_INFORMATION_STYLE}
 `;
 

diff --git a/src/components/ProductListing.tsx b/src/components/ProductListing.tsx
@@ -14,19 +14,25 @@ import {
   PRODUCT_IMAGE_WIDTH_PX,
 } from '../constants/product';
 
-const StyledTileListItem = styled.li`
+const StyledTileListItem = styled.li<{ $imageWidthPx: number }>`
   ${TILE_LIST_ITEM_STYLE}
 `;
 
-const StyledTileImageContainer = styled.div`
+const StyledTileImageContainer = styled.div<{
+  $aspectRatio: number;
+  $imageWidthPx: number;
+}>`
   ${TILE_IMAGE_CONTAINER_STYLE}
 `;
 
-const StyledTileImage = styled(OptimizedImage)`
+const StyledTileImage = styled(OptimizedImage)<{
+  $aspectRatio: number;
+  $imageWidthPx: number;
+}>`
   ${TILE_IMAGE_STYLE}
 `;
 
-const StyledTileInformation = styled.div`
+const StyledTileInformation = styled.div<{ $imageWidthPx: number }>`
   ${TILE_INFORMATION_STYLE}
 `;