docs(examples): add react-19 example

primer · Nov 6, 2024 · 8dd5cda · 8dd5cda
1 parent 92102e9
commit 8dd5cda
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 0 deletions.
diff --git a/examples/react-19/.eslintrc.cjs b/examples/react-19/.eslintrc.cjs
@@ -0,0 +1,15 @@
+'use strict'
+
+const path = require('node:path')
+
+module.exports = {
+  extends: ['plugin:@next/next/recommended'],
+  settings: {
+    next: {
+      rootDir: path.join(__dirname, 'src'),
+    },
+  },
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+  },
+}
diff --git a/examples/react-19/next-env.d.ts b/examples/react-19/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <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.
diff --git a/examples/react-19/package.json b/examples/react-19/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "example-react-19",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "clean": "rimraf .next",
+    "build": "next build",
+    "develop": "next",
+    "start": "next start",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@primer/react": "37.3.0",
+    "next": "15.0.2",
+    "react": "19.0.0-rc-02c0e824-20241028",
+    "react-dom": "19.0.0-rc-02c0e824-20241028",
+    "styled-components": "5.x",
+    "typescript": "^5.6.3"
+  },
+  "devDependencies": {
+    "@next/eslint-plugin-next": "15.0.2",
+    "rimraf": "^5.0.5"
+  }
+}
diff --git a/examples/react-19/src/app/layout.tsx b/examples/react-19/src/app/layout.tsx
@@ -0,0 +1,23 @@
+import {BaseStyles, ThemeProvider} from '@primer/react'
+import {StyledComponentsRegistry} from './registry'
+
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({children}: {children: React.ReactNode}) {
+  return (
+    // Note: the focus-visible polyfill adds additional attributes to `html`
+    // that cause hydration mismatch errors
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <StyledComponentsRegistry>
+          <ThemeProvider>
+            <BaseStyles>{children}</BaseStyles>
+          </ThemeProvider>
+        </StyledComponentsRegistry>
+      </body>
+    </html>
+  )
+}
diff --git a/examples/react-19/src/app/page.tsx b/examples/react-19/src/app/page.tsx
@@ -0,0 +1,5 @@
+import {Button} from '@primer/react'
+
+export default function IndexPage() {
+  return <Button>Hello world</Button>
+}
diff --git a/examples/react-19/src/app/registry.tsx b/examples/react-19/src/app/registry.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import {useServerInsertedHTML} from 'next/navigation'
+import React, {useState} from 'react'
+import {ServerStyleSheet, StyleSheetManager} from 'styled-components'
+
+/**
+ * @see https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components
+ */
+export function StyledComponentsRegistry({children}: React.PropsWithChildren) {
+  // Only create stylesheet once with lazy initial state
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement()
+    styledComponentsStyleSheet.instance.clearTag()
+    return <>{styles}</>
+  })
+
+  if (typeof window !== 'undefined') return <>{children}</>
+
+  return <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>{children}</StyleSheetManager>
+}
diff --git a/examples/react-19/tsconfig.json b/examples/react-19/tsconfig.json
@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "target": "ES2017"
+  },
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}