Merge pull request #183 from forumone/156-next-and-react-update

[156] Update to Next.js 15 and React 19

Author: kmonahan

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package-lock.json

@@ -24,36 +24,36 @@
     ">= 1% in US"
   ],
   "dependencies": {
-    "next": "^14.2.24",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "next": "15.2.2",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-select": "^5.10.1"
   },
   "devDependencies": {
     "@csstools/postcss-global-data": "^3.0.0",
-    "@storybook/addon-a11y": "^8.6.3",
-    "@storybook/addon-actions": "^8.6.3",
-    "@storybook/addon-essentials": "^8.6.3",
-    "@storybook/addon-interactions": "^8.6.3",
-    "@storybook/addon-links": "^8.6.3",
-    "@storybook/nextjs": "^8.6.3",
-    "@storybook/react": "^8.6.3",
-    "@storybook/test": "^8.6.3",
-    "@storybook/theming": "^8.6.3",
+    "@storybook/addon-a11y": "^8.6.6",
+    "@storybook/addon-actions": "^8.6.6",
+    "@storybook/addon-essentials": "^8.6.6",
+    "@storybook/addon-interactions": "^8.6.6",
+    "@storybook/addon-links": "^8.6.6",
+    "@storybook/nextjs": "^8.6.6",
+    "@storybook/react": "^8.6.6",
+    "@storybook/test": "^8.6.6",
+    "@storybook/theming": "^8.6.6",
     "@svgr/babel-plugin-add-jsx-attribute": "^8.0.0",
     "@svgr/babel-plugin-remove-jsx-attribute": "^8.0.0",
     "@svgr/cli": "^8.1.0",
     "@types/node": "^20.17.22",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "@typescript-eslint/eslint-plugin": "^8.25.0",
     "@typescript-eslint/parser": "^8.25.0",
     "clsx": "^2.1.1",
     "css-loader": "^7.1.2",
     "csstype": "3.1.3",
     "enhanced-resolve": "^5.18.1",
     "eslint": "^8.57.1",
-    "eslint-config-next": "^14.2.24",
+    "eslint-config-next": "15.2.2",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.3",
     "html-react-parser": "^5.2.2",
@@ -69,7 +69,7 @@
     "postcss-rem": "^3.0.0",
     "prettier": "^3.5.3",
     "prettier-plugin-organize-imports": "^4.1.0",
-    "storybook": "^8.6.3",
+    "storybook": "^8.6.6",
     "style-loader": "^4.0.0",
     "stylelint": "^16.15.0",
     "stylelint-config-standard": "^36.0.1",
@@ -79,6 +79,8 @@
     "yaml": "^2.7.0"
   },
   "overrides": {
-    "csstype": "3.1.3"
+    "csstype": "3.1.3",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4"
   }
 }

package.json

@@ -3,6 +3,8 @@ import { withGlobalWrapper } from '../../../.storybook/decorators';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './color.module.css';
 
+import type { JSX } from 'react';
+
 interface ColorItem {
   name: string;
   value: string;

source/01-global/00-colors/color.stories.tsx

@@ -4,6 +4,8 @@ import { withGlobalWrapper } from '../../../.storybook/decorators';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './shadows.module.css';
 
+import type { JSX } from 'react';
+
 interface BoxShadowOptions {
   [elevation: number]: Property.BoxShadow;
 }

source/01-global/03-box-shadow/shadows.stories.tsx

@@ -1,6 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { withGlobalWrapper } from '../../../../.storybook/decorators';
 
+import type { JSX } from 'react';
+
 const meta: Meta = {
   title: 'Global/HTML Elements/Blockquote',
   decorators: [withGlobalWrapper],

source/01-global/html-elements/16-blockquote/blockquote.stories.tsx

@@ -3,6 +3,8 @@ import SampleContent from '../../06-utility/storybook/SampleContent';
 import GridLayout from './Grid';
 import gridArgs from './gridArgs';
 
+import type { JSX } from 'react';
+
 function GridDemo(): JSX.Element {
   const arr = Array.from(Array(6).keys());
   return (

source/02-layouts/Grid/Grid.stories.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { GessoComponent } from 'gesso';
-import { ReactNode } from 'react';
+import { ReactNode, type JSX } from 'react';
 import styles from './grid.module.css';
 
 interface GridProps extends GessoComponent {

source/02-layouts/Grid/Grid.tsx

@@ -2,7 +2,14 @@
 
 import clsx from 'clsx';
 import { GessoComponent } from 'gesso';
-import { JSX, KeyboardEvent, createRef, useId, useMemo, useState } from 'react';
+import React, {
+  JSX,
+  KeyboardEvent,
+  createRef,
+  useId,
+  useMemo,
+  useState,
+} from 'react';
 import getCssVar from '../../06-utility/getCssVar';
 import AccordionItem, { AccordionItemProps } from './AccordionItem';
 import styles from './accordion.module.css';
@@ -38,7 +45,8 @@ function Accordion({
     })),
   );
   const accordionItemRefs = useMemo(() => {
-    const refs: { [key: string]: React.RefObject<HTMLButtonElement> } = {};
+    const refs: { [key: string]: React.RefObject<HTMLButtonElement | null> } =
+      {};
     accordionItemsStatus.forEach(item => (refs[item.id] = createRef()));
     return refs;
   }, [accordionItemsStatus]);

source/03-components/Accordion/Accordion.tsx

@@ -20,7 +20,7 @@ interface AccordionItemProps extends GessoComponent {
   isOpen?: boolean;
   isStepList?: boolean;
   accordionSpeed?: string;
-  toggleRef?: RefObject<HTMLButtonElement>;
+  toggleRef?: RefObject<HTMLButtonElement | null>;
   handleClick?: MouseEventHandler;
 }