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

Author: emmatown

.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, {