Update deps in repo and support React 19 (#1404)

.changeset/tasty-swans-sniff.md

@@ -0,0 +1,7 @@
+---
+'@keystatic/templates-nextjs': patch
+'@keystatic/templates-astro': patch
+'@keystatic/templates-remix': patch
+---
+
+Update template to React 19

.changeset/warm-suits-arrive.md

@@ -0,0 +1,9 @@
+---
+'@keystatic/core': patch
+'@keystar/ui': patch
+'@keystatic/astro': patch
+'@keystatic/remix': patch
+'@keystatic/next': patch
+---
+
+Allow React 19 in peerDependencies

.eslintrc.js

@@ -119,6 +119,14 @@ module.exports = {
         },
       },
     ],
+    'no-restricted-syntax': [
+      ERROR,
+      {
+        selector: "TSQualifiedName[left.name='React']",
+        message:
+          "Avoid using the global React type, import the specific type you want from 'react'",
+      },
+    ],
     'react/no-unknown-property': OFF,
     'react-compiler/react-compiler': [
       ERROR,

.nvmrc

@@ -1 +1 @@
-lts/hydrogen
+22.13.1

babel.config.json

@@ -17,10 +17,7 @@
     "@babel/preset-typescript",
     ["@babel/preset-react", { "runtime": "automatic" }]
   ],
-  "plugins": [
-    "@babel/plugin-transform-runtime",
-    ["@babel/plugin-transform-private-property-in-object", { "loose": true }]
-  ],
+  "plugins": ["@babel/plugin-transform-runtime"],
   "overrides": [
     {
       "test": ["packages/keystatic/src/**/*", "design-system/pkg/src/**/*"],

design-system/docs/.nvmrc

@@ -0,0 +1 @@
+22.13.1

design-system/docs/app/(site)/[[...slug]]/page.tsx

@@ -18,11 +18,10 @@ export async function generateStaticParams() {
 
 export const dynamicParams = false;
 
-export async function generateMetadata({
-  params,
-}: {
-  params: { slug?: string[] };
+export async function generateMetadata(props: {
+  params: Promise<{ slug?: string[] }>;
 }): Promise<Metadata> {
+  const params = await props.params;
   const slug = (params.slug ?? ['index']).join('/');
   let entry = await reader.collections.otherDocs.read(slug);
   if (!entry && slug !== 'index') {
@@ -32,8 +31,10 @@ export async function generateMetadata({
   return { title: entry.title };
 }
 
-export default async function Page(props: { params: { slug?: string[] } }) {
-  const slug = (props.params.slug ?? ['index']).join('/');
+export default async function Page(props: {
+  params: Promise<{ slug?: string[] }>;
+}) {
+  const slug = ((await props.params).slug ?? ['index']).join('/');
   let entry = await reader.collections.otherDocs.read(slug, {
     resolveLinkedFiles: true,
   });

design-system/docs/app/(site)/colours/colours-inner.tsx

@@ -7,6 +7,8 @@ import { Heading, Text } from '@keystar/ui/typography';
 
 import { DocsContent } from '../../../components/content';
 
+import type { JSX } from 'react';
+
 export function Colours(): JSX.Element {
   const colors = [
     {

design-system/docs/app/(site)/layout.tsx

@@ -5,6 +5,7 @@ import { Inter } from 'next/font/google';
 import { Layout } from '../../components/layout';
 import { getNavigation } from '../../utils/packages';
 import { basePageTitle } from './utils';
+import { ReactNode } from 'react';
 
 const inter = Inter({
   subsets: ['latin'],
@@ -23,7 +24,7 @@ export const metadata: Metadata = {
 export default async function RootLayout({
   children,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
 }) {
   return (
     <NextRootProvider fontClassName={inter.variable}>

design-system/docs/app/(site)/package/[...slug]/page.tsx

@@ -17,11 +17,10 @@ export async function generateStaticParams() {
 
 export const dynamicParams = false;
 
-export async function generateMetadata({
-  params,
-}: {
-  params: { slug: string[] };
+export async function generateMetadata(props: {
+  params: Promise<{ slug: string[] }>;
 }): Promise<Metadata> {
+  const params = await props.params;
   const slugWithDocsBitAdded = [
     params.slug[0],
     'docs',
@@ -36,11 +35,13 @@ export async function generateMetadata({
   return { title: entry.title };
 }
 
-export default async function Page(props: { params: { slug: string[] } }) {
+export default async function Page(props: {
+  params: Promise<{ slug: string[] }>;
+}) {
   const slugWithDocsBitAdded = [
-    props.params.slug[0],
+    (await props.params).slug[0],
     'docs',
-    ...props.params.slug.slice(1),
+    ...(await props.params).slug.slice(1),
   ];
   const slug = slugWithDocsBitAdded.join('/');
   let entry = await reader.collections.packageDocs.read(slug, {

design-system/docs/components/content/index.tsx

@@ -6,6 +6,7 @@ import {
   ReactNode,
   Fragment,
   useCallback,
+  type JSX,
 } from 'react';
 
 import { Icon } from '@keystar/ui/icon';

design-system/docs/components/doc-page.tsx

@@ -5,6 +5,8 @@ import { generateToc } from '../utils/generate-toc';
 import { DocsContent } from './content';
 import { DocContent } from './mdx-components/mdx-content';
 
+import type { JSX } from 'react';
+
 export type DocPageProps = {
   content: Tag;
   description: string | null;

design-system/docs/components/layout.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { ReactNode } from 'react';
+import { ReactNode, type JSX } from 'react';
 
 import { Flex } from '@keystar/ui/layout';
 

design-system/docs/components/mdx-components/code-block.tsx

@@ -4,6 +4,8 @@ import { css, tokenSchema } from '@keystar/ui/style';
 
 import { Highlight } from './highlight';
 
+import type { JSX } from 'react';
+
 type CodeBlockProps = {
   language?: string;
   content: string;

design-system/docs/components/mdx-components/highlight.tsx

@@ -5,6 +5,8 @@ import { Box } from '@keystar/ui/layout';
 
 import { usePrismTheme } from './prism-theme';
 
+import type { JSX } from 'react';
+
 interface HighlightProps {
   code: string;
   language: string;

design-system/docs/components/mdx-components/mdx-content.tsx

@@ -3,7 +3,7 @@ import type {
   RenderableTreeNodes,
   Scalar,
 } from '@markdoc/markdoc';
-import React, { ElementType, ReactNode } from 'react';
+import React, { ElementType, ReactNode, type JSX } from 'react';
 import { isTag } from '../../utils/utils';
 import { mdxComponents } from './mdx-components';
 

design-system/docs/components/mdx-components/mdx-table.tsx

@@ -3,6 +3,8 @@ import { Box, BoxProps } from '@keystar/ui/layout';
 import { css } from '@keystar/ui/style';
 import { Text } from '@keystar/ui/typography';
 
+import type { JSX } from 'react';
+
 export function MdxTable({ children, ...rest }: BoxProps): JSX.Element {
   return (
     <Box overflow="auto">

design-system/docs/components/mdx-components/react-live/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 import copy from 'clipboard-copy';
 import { createUrl } from 'playroom/utils';
-import { ReactNode, useEffect, useId, useState } from 'react';
+import { ReactNode, useEffect, useId, useState, type JSX } from 'react';
 
 import { ActionButton } from '@keystar/ui/button';
 import { chevronDownIcon } from '@keystar/ui/icon/icons/chevronDownIcon';

design-system/docs/package.json

@@ -28,11 +28,11 @@
     "clipboard-copy": "^4.0.1",
     "emery": "^1.4.1",
     "esbuild": "^0.14.53",
-    "next": "^14.1.3",
+    "next": "^15.1.6",
     "parse-numeric-range": "^1.3.0",
     "prism-react-renderer": "^1.3.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tsx": "^4.8.2",
     "vercel": "^33.6.3"
   },
@@ -51,8 +51,8 @@
     "@storybook/nextjs": "^7.4.6",
     "@storybook/preview-api": "^7.4.6",
     "@storybook/react": "^7.4.6",
-    "@types/node": "16.11.13",
-    "@types/react": "^18.2.8",
+    "@types/node": "22.13.1",
+    "@types/react": "^19.0.8",
     "babel-loader": "^8.2.5",
     "playroom": "^0.28.0",
     "storybook": "^7.0.22",

design-system/docs/playroom/components.ts

@@ -1,3 +1,5 @@
+import type { JSX } from 'react';
+
 export * from '../components/scope';
 
 export function Render({

design-system/docs/playroom/frame.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, type JSX } from 'react';
 
 import {
   ClientSideOnlyDocumentElement,

design-system/pkg/package.json

@@ -1476,7 +1476,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.3",
-    "@emotion/css": "^11.9.0",
+    "@emotion/css": "^11.13.5",
     "@floating-ui/react": "^0.24.0",
     "@internationalized/date": "^3.5.5",
     "@internationalized/string": "^3.2.3",
@@ -1560,7 +1560,7 @@
     "@react-types/switch": "^3.5.5",
     "@react-types/table": "^3.10.1",
     "@react-types/tabs": "^3.3.9",
-    "@types/react": "^18.2.8",
+    "@types/react": "^19.0.8",
     "emery": "^1.4.1",
     "facepaint": "^1.2.1"
   },
@@ -1574,21 +1574,21 @@
     "@svgr/plugin-jsx": "^6.5.1",
     "@svgr/plugin-prettier": "^6.5.1",
     "@svgr/plugin-svgo": "^6.5.1",
-    "@testing-library/dom": "^8.20.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/facepaint": "^1.2.2",
-    "@types/react-dom": "^18.0.11",
+    "@types/react-dom": "^19.0.3",
     "lucide-static": "^0.314.0",
-    "next": "^14.1.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "next": "^15.1.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tsx": "^4.8.2"
   },
   "peerDependencies": {
     "next": ">=14",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "next": {

design-system/pkg/src/action-group/ActionGroup.tsx

@@ -14,7 +14,6 @@ import { ListState, useListState } from '@react-stately/list';
 import { AriaLabelingProps, DOMProps, Node } from '@react-types/shared';
 import {
   ForwardedRef,
-  Key,
   ReactElement,
   ReactNode,
   forwardRef,
@@ -371,7 +370,7 @@ function ActionGroup<T extends object>(
 
 /** Group related action buttons together. */
 const _ActionGroup: <T>(
-  props: ActionGroupProps<T> & { ref?: RefObject<HTMLDivElement> }
+  props: ActionGroupProps<T> & { ref?: RefObject<HTMLDivElement | null> }
 ) => ReactElement = forwardRef(ActionGroup) as any;
 export { _ActionGroup as ActionGroup };
 
@@ -382,7 +381,7 @@ interface ActionGroupItemProps<T> extends DOMProps, BaseStyleProps {
   hideButtonText?: boolean;
   orientation?: 'horizontal' | 'vertical';
   prominence?: 'low' | 'default';
-  onAction?: (key: Key) => void;
+  onAction?: (key: string | number) => void;
 }
 
 function ActionGroupItem<T>({
@@ -490,7 +489,7 @@ interface ActionGroupMenuProps<T> extends AriaLabelingProps {
   isDisabled?: boolean;
   isOnlyItem?: boolean;
   items: Node<T>[];
-  onAction?: (key: Key) => void;
+  onAction?: (key: string | number) => void;
   orientation?: 'horizontal' | 'vertical';
   prominence?: 'low' | 'default';
   state: ListState<T>;

design-system/pkg/src/breadcrumbs/BreadcrumbItem.tsx

@@ -2,7 +2,7 @@ import { useBreadcrumbItem } from '@react-aria/breadcrumbs';
 import { useLocale } from '@react-aria/i18n';
 import { useHover } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
-import React, { Fragment, useMemo, useRef } from 'react';
+import React, { Fragment, useMemo, useRef, ElementType } from 'react';
 
 import { Icon } from '@keystar/ui/icon';
 import { chevronRightIcon } from '@keystar/ui/icon/icons/chevronRightIcon';
@@ -35,7 +35,7 @@ export function BreadcrumbItem(props: BreadcrumbItemProps) {
 
   let { direction } = useLocale();
   let ref = useRef(null);
-  let ElementType: React.ElementType = props.href ? 'a' : 'span';
+  let ElementType: ElementType = props.href ? 'a' : 'span';
   let { itemProps } = useBreadcrumbItem(
     { ...props, elementType: ElementType },
     ref

design-system/pkg/src/breadcrumbs/Breadcrumbs.tsx

@@ -28,6 +28,7 @@ import { classNames, css, tokenSchema, useStyleProps } from '@keystar/ui/style';
 
 import { BreadcrumbItem, breadcrumbsClassList } from './BreadcrumbItem';
 import { BreadcrumbsProps } from './types';
+import { ItemProps } from '@react-types/shared';
 
 const MIN_VISIBLE_ITEMS = 1;
 const MAX_VISIBLE_ITEMS = 4;
@@ -47,7 +48,7 @@ function Breadcrumbs<T>(
   } = props;
 
   // Not using React.Children.toArray because it mutates the key prop.
-  let childArray: ReactElement[] = [];
+  let childArray: ReactElement<ItemProps<T>>[] = [];
   Children.forEach(children, child => {
     if (isValidElement(child)) {
       childArray.push(child);

design-system/pkg/src/button/ButtonGroup.tsx

@@ -121,7 +121,7 @@ export const ButtonGroup: ForwardRefExoticComponent<
   // 2. External changes: buttongroup won't change size due to any parents
   //    changing size, so listen to its container for size changes to figure out
   //    if we should remeasure
-  let parent = useRef<HTMLElement>();
+  let parent = useRef<HTMLElement>(null);
   useLayoutEffect(() => {
     if (domRef.current) {
       parent.current = domRef.current.parentElement as HTMLElement;

design-system/pkg/src/calendar/CalendarBase.tsx

@@ -30,7 +30,7 @@ interface CalendarBaseProps<T extends CalendarState | RangeCalendarState>
   calendarProps: HTMLAttributes<HTMLElement>;
   nextButtonProps: AriaButtonProps;
   prevButtonProps: AriaButtonProps;
-  calendarRef: RefObject<HTMLDivElement>;
+  calendarRef: RefObject<HTMLDivElement | null>;
 }
 
 export function CalendarBase<T extends CalendarState | RangeCalendarState>(

design-system/pkg/src/checkbox/Checkbox.tsx

@@ -3,6 +3,7 @@ import { useToggleState } from '@react-stately/toggle';
 import {
   HTMLAttributes,
   InputHTMLAttributes,
+  RefObject,
   useContext,
   useMemo,
   useRef,
@@ -70,7 +71,7 @@ function CheckboxAlone(props: CheckboxProps) {
 
 function CheckboxInner(
   props: CheckboxProps & {
-    inputRef: React.RefObject<HTMLInputElement>;
+    inputRef: RefObject<HTMLInputElement | null>;
     inputProps: InputHTMLAttributes<HTMLInputElement>;
   }
 ) {