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

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.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"
   }
 }

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

@@ -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/03-box-shadow/shadows.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/html-elements/16-blockquote/blockquote.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/02-layouts/Grid/Grid.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.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/03-components/Accordion/Accordion.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/AccordionItem.tsx

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

source/03-components/Breadcrumb/Breadcrumb.stories.tsx

@@ -16,9 +16,6 @@ const meta: Meta<typeof BreadcrumbComponent> = {
 type Story = StoryObj<typeof BreadcrumbComponent>;
 
 const Breadcrumb: Story = {
-  // Workaround to allow story to be imported elsewhere.
-  // See https://github.com/storybookjs/storybook/issues/22278
-  render: args => <BreadcrumbComponent {...args} />,
   args: breadcrumbArgs,
 };
 

source/03-components/Button/Button.stories.tsx

@@ -7,6 +7,8 @@ import {
 } from './Button';
 import buttonArgs from './buttonArgs';
 
+import type { JSX } from 'react';
+
 function DemoButtons({ label, ...props }: SharedButtonProps): JSX.Element {
   return (
     <>

source/03-components/Figure/Figure.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { withGlobalWrapper } from '../../../.storybook/decorators';
-import { Video } from '../Video/Video.stories';
+import Video from '../Video/Video';
+import { Video as VideoStory } from '../Video/Video.stories';
 import FigureComponent from './Figure';
 import styles from './figure.module.css';
 import figureArgs from './figureArgs';
@@ -41,7 +42,7 @@ const FigureRightAligned: Story = {
 
 const FigureWithVideo: Story = {
   args: {
-    media: Video.render && <Video.render {...Video.args} />,
+    media: <Video {...VideoStory.args} />,
     caption:
       'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper vel metus at cursus.',
     modifierClasses: styles['figure--iframe'],

source/03-components/FormItem/FormItem.tsx

@@ -6,6 +6,7 @@ import {
   ReactNode,
   SelectHTMLAttributes,
   TextareaHTMLAttributes,
+  type JSX,
 } from 'react';
 import FormItemLabel from './FormItemLabel';
 import FormItemWrapper from './FormItemWrapper';

source/03-components/FormItem/FormItemWrapper.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, type JSX } from 'react';
 import styles from './form-item.module.css';
 
 interface FormItemWrapperProps {

source/03-components/HamburgerButton/HamburgerButton.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { GessoComponent } from 'gesso';
-import { ComponentProps } from 'react';
+import { ComponentProps, type JSX } from 'react';
 import styles from './hamburger-button.module.css';
 
 interface HamburgerButtonProps

source/03-components/HeroBgImage/HeroBgImage.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { GessoComponent } from 'gesso';
-import { ReactNode } from 'react';
+import { ReactNode, type JSX } from 'react';
 import { LinkButton, LinkProps } from '../Button/Button';
 import styles from './hero-bg-image.module.css';
 

source/03-components/HeroInlineImage/HeroInlineImage.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { GessoComponent } from 'gesso';
-import { ReactNode } from 'react';
+import { ReactNode, type JSX } from 'react';
 import { LinkButton, LinkProps } from '../Button/Button';
 import styles from './hero-inline-image.module.css';
 

source/03-components/ImageTeaser/ImageTeaser.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { GessoComponent } from 'gesso';
 import Link from 'next/link';
-import { ElementType, ReactNode } from 'react';
+import { ElementType, ReactNode, type JSX } from 'react';
 import Media from '../../02-layouts/Media/Media';
 import styles from './image-teaser.module.css';
 

source/03-components/List/List.stories.tsx

@@ -2,6 +2,8 @@ import { Meta, StoryObj } from '@storybook/react';
 import { withGlobalWrapper } from '../../../.storybook/decorators';
 import listStyles from './list.module.css';
 
+import type { JSX } from 'react';
+
 function DemoList({ style }: { style: string }): JSX.Element {
   return (
     <ul className={listStyles[style]}>

source/03-components/Menu/Menu.stories.tsx

@@ -15,9 +15,6 @@ const Default: Story = {
   args: menuArgs,
 };
 const FooterMenu: Story = {
-  // Workaround to allow story to be imported elsewhere.
-  // See https://github.com/storybookjs/storybook/issues/22278
-  render: args => <Menu {...args} />,
   args: {
     ...footerMenuArgs,
     modifierClasses: footerStyles.menu,

source/03-components/Menu/Menu.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { GessoComponent } from 'gesso';
 import Link from 'next/link';
-import { ReactNode } from 'react';
+import { ReactNode, type JSX } from 'react';
 import styles from './menu.module.css';
 
 interface MenuItem {

source/03-components/Menu/MenuWrapper.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 './menu.module.css';
 
 interface MenuWrapperProps extends GessoComponent {

source/03-components/Menu/ResponsiveMenu/ResponsiveMenu.stories.tsx

@@ -10,9 +10,6 @@ const meta: Meta<typeof ResponsiveMenuComponent> = {
 
 type Story = StoryObj<typeof ResponsiveMenuComponent>;
 const ResponsiveMenu: Story = {
-  // Workaround to allow story to be imported elsewhere.
-  // See https://github.com/storybookjs/storybook/issues/22278
-  render: args => <ResponsiveMenuComponent {...args} />,
   args: responsiveMenuArgs,
 };
 

source/03-components/Menu/ResponsiveMenu/ResponsiveMenu.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { GessoComponent } from 'gesso';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, type JSX } from 'react';
 import Menu, { MenuItem } from '../Menu';
 import OverlayMenu from '../OverlayMenu/OverlayMenu';
 import styles from './responsive-menu.module.css';

source/03-components/ReadMoreLink/ReadMoreLink.tsx

@@ -3,6 +3,8 @@ import { GessoComponent } from 'gesso';
 import Link from 'next/link';
 import styles from './read-more-link.module.css';
 
+import type { JSX } from 'react';
+
 interface ReadMoreLinkProps extends GessoComponent {
   url: string;
   label?: string;

source/03-components/SiteName/SiteName.stories.tsx

@@ -12,9 +12,6 @@ const meta: Meta<typeof SiteNameComponent> = {
 
 type Story = StoryObj<typeof SiteNameComponent>;
 const SiteName: Story = {
-  // Workaround to allow story to be imported elsewhere.
-  // See https://github.com/storybookjs/storybook/issues/22278
-  render: args => <SiteNameComponent {...args} />,
   args: siteNameArgs,
 };
 

source/03-components/TagList/TagList.tsx

@@ -3,6 +3,8 @@ import { GessoComponent } from 'gesso';
 import Tag, { TagProps } from '../Tag/Tag';
 import styles from './tag-list.module.css';
 
+import type { JSX } from 'react';
+
 interface TagListProps extends GessoComponent {
   items: TagProps[];
 }

source/03-components/Video/Video.stories.tsx

@@ -12,9 +12,6 @@ const meta: Meta<typeof VideoComponent> = {
 
 type Story = StoryObj<typeof VideoComponent>;
 const Video: Story = {
-  // Workaround to allow story to be imported elsewhere.
-  // See https://github.com/storybookjs/storybook/issues/22278
-  render: args => <VideoComponent {...args} />,
   args: videoArgs,
 };
 

source/03-components/Wysiwyg/Wysiwyg.stories.tsx

@@ -17,9 +17,6 @@ const meta: Meta<typeof WysiwygComponent> = {
 
 type Story = StoryObj<typeof WysiwygComponent>;
 const WYSIWYG: Story = {
-  // Workaround to allow story to be imported elsewhere.
-  // See https://github.com/storybookjs/storybook/issues/22278
-  render: args => <WysiwygComponent {...args} />,
   args: wysiwygArgs,
 };
 

source/05-pages/Page.stories.tsx

@@ -1,6 +1,8 @@
+import { WYSIWYG as WysiwygStory } from '@/source/03-components/Wysiwyg/Wysiwyg.stories';
 import { Meta, StoryObj } from '@storybook/react';
-import { Breadcrumb } from '../03-components/Breadcrumb/Breadcrumb.stories';
-import { WYSIWYG } from '../03-components/Wysiwyg/Wysiwyg.stories';
+import Breadcrumb from '../03-components/Breadcrumb/Breadcrumb';
+import { Breadcrumb as BreadcrumbStory } from '../03-components/Breadcrumb/Breadcrumb.stories';
+import Wysiwyg from '../03-components/Wysiwyg/Wysiwyg';
 import PageTemplate, { PageProps } from '../04-templates/Page/Page';
 import PageWrapper from './page-wrappers/default';
 
@@ -20,11 +22,9 @@ const Page: StoryObj<PageStoryArgs> = {
   ),
   args: {
     page: {
-      preContent: Breadcrumb.render ? (
-        <Breadcrumb.render {...Breadcrumb.args} />
-      ) : undefined,
+      preContent: <Breadcrumb {...BreadcrumbStory.args} />,
       title: 'Page Title',
-      children: WYSIWYG.render && <WYSIWYG.render {...WYSIWYG.args} />,
+      children: <Wysiwyg {...WysiwygStory.args} />,
     },
   },
 };