Update to redwood v8 rc (#51)

* update to v8 inc. storybook

* update middleware import

* update module resolution

* resetup ssr

* update prettier tailwind plugin

* lint

* misc type check fixes

* update app.tsx

* update react version

* change react deps

api/package.json

@@ -4,9 +4,9 @@
   "private": true,
   "dependencies": {
     "@graphql-yoga/plugin-response-cache": "3.3.0",
-    "@redwoodjs/api": "8.0.0-canary.529",
-    "@redwoodjs/api-server": "8.0.0-canary.529",
-    "@redwoodjs/graphql-server": "8.0.0-canary.529",
+    "@redwoodjs/api": "8.0.0-rc.1130",
+    "@redwoodjs/api-server": "8.0.0-rc.1130",
+    "@redwoodjs/graphql-server": "8.0.0-rc.1130",
     "graphql-request": "6.1.0"
   }
 }

api/src/services/newsletters/newsletters.scenarios.ts

@@ -1,4 +1,5 @@
 import type { Prisma, Newsletter } from '@prisma/client'
+
 import type { ScenarioData } from '@redwoodjs/testing/api'
 
 export const standard = defineScenario<Prisma.NewsletterCreateArgs>({

api/tsconfig.json

@@ -4,8 +4,8 @@
     "allowJs": true,
     "esModuleInterop": true,
     "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
     "skipLibCheck": false,
     "baseUrl": "./",
     "rootDirs": [

package.json

@@ -7,10 +7,10 @@
     ]
   },
   "devDependencies": {
-    "@redwoodjs/cli-data-migrate": "8.0.0-canary.529",
-    "@redwoodjs/cli-storybook": "8.0.0-canary.529",
-    "@redwoodjs/core": "8.0.0-canary.529",
-    "prettier-plugin-tailwindcss": "0.4.1"
+    "@redwoodjs/cli-data-migrate": "8.0.0-rc.1130",
+    "@redwoodjs/cli-storybook-vite": "8.0.0-rc.1130",
+    "@redwoodjs/core": "8.0.0-rc.1130",
+    "prettier-plugin-tailwindcss": "0.5.12"
   },
   "eslintConfig": {
     "extends": "@redwoodjs/eslint-config",
@@ -22,7 +22,7 @@
   "prisma": {
     "seed": "yarn rw exec seed"
   },
-  "packageManager": "yarn@4.1.1",
+  "packageManager": "yarn@4.3.1",
   "dependencies": {
     "glob": "^10.3.10",
     "node-html-parser": "^6.1.12",
@@ -32,6 +32,8 @@
     "build:icons": "tsx ./scripts/build-icons.mts"
   },
   "resolutions": {
-    "@apollo/client-react-streaming/superjson": "^1.12.2"
+    "@apollo/client-react-streaming/superjson": "^1.12.2",
+    "react": "19.0.0-beta-04b058868c-20240508",
+    "react-dom": "19.0.0-beta-04b058868c-20240508"
   }
 }

prettier.config.js → prettier.config.mjs

@@ -1,6 +1,4 @@
-// https://prettier.io/docs/en/options.html
-/** @type {import('prettier').RequiredOptions} */
-module.exports = {
+export default {
   trailingComma: 'es5',
   bracketSpacing: true,
   tabWidth: 2,
@@ -16,5 +14,5 @@ module.exports = {
     },
   ],
   tailwindConfig: './web/config/tailwind.config.js',
-  plugins: [require('prettier-plugin-tailwindcss')],
+  plugins: ['prettier-plugin-tailwindcss'],
 }

web/.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from 'storybook-framework-redwoodjs-vite'
+
+import { getPaths, importStatementPath } from '@redwoodjs/project-config'
+
+const redwoodProjectPaths = getPaths()
+
+const config: StorybookConfig = {
+  framework: 'storybook-framework-redwoodjs-vite',
+
+  stories: [
+    `${importStatementPath(
+      redwoodProjectPaths.web.src
+    )}/**/*.stories.@(js|jsx|ts|tsx|mdx)`,
+  ],
+
+  addons: ['@storybook/addon-essentials'],
+}
+
+export default config

web/.storybook/preview-body.html

@@ -0,0 +1 @@
+<div id="redwood-app"></div>

web/package.json

@@ -10,16 +10,16 @@
   "dependencies": {
     "@apollo/client-react-streaming": "0.10.0",
     "@mdx-js/rollup": "3.0.1",
-    "@redwoodjs/forms": "8.0.0-canary.529",
-    "@redwoodjs/router": "8.0.0-canary.529",
-    "@redwoodjs/vite": "8.0.0-canary.529",
-    "@redwoodjs/web": "8.0.0-canary.529",
+    "@redwoodjs/forms": "8.0.0-rc.1130",
+    "@redwoodjs/router": "8.0.0-rc.1130",
+    "@redwoodjs/vite": "8.0.0-rc.1130",
+    "@redwoodjs/web": "8.0.0-rc.1130",
     "date-fns": "^3.3.1",
     "feed": "4.2.2",
     "framer-motion": "^11.0.3",
     "prop-types": "15.8.1",
-    "react": "19.0.0-canary-cb151849e1-20240424",
-    "react-dom": "19.0.0-canary-cb151849e1-20240424",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-tweet": "3.2.1",
     "rehype-external-links": "3.0.0",
     "rehype-highlight": "7.0.0",

web/src/App.tsx

@@ -1,17 +1,20 @@
+import type { ReactNode } from 'react'
+
 import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from 'src/pages/FatalErrorPage'
-import Routes from 'src/Routes'
 
 import './index.css'
 
-const App = () => (
+interface AppProps {
+  children?: ReactNode
+}
+
+const App = ({ children }: AppProps) => (
   <FatalErrorBoundary page={FatalErrorPage}>
     <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
-      <RedwoodApolloProvider>
-        <Routes />
-      </RedwoodApolloProvider>
+      <RedwoodApolloProvider>{children}</RedwoodApolloProvider>
     </RedwoodProvider>
   </FatalErrorBoundary>
 )

web/src/Document.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import { Css, Meta } from '@redwoodjs/web'
-import type { TagDescriptor } from '@redwoodjs/web'
+import { Css, Meta } from '@redwoodjs/web/htmlTags'
+import type { TagDescriptor } from '@redwoodjs/web/htmlTags'
 
 interface DocumentProps {
   children: React.ReactNode

web/src/components/Accordion/Accordion.test.tsx

@@ -8,7 +8,11 @@ import Accordion from './Accordion'
 describe('Accordion', () => {
   it('renders successfully', () => {
     expect(() => {
-      render(<Accordion />)
+      render(
+        <Accordion heading="heading" subheading="subheading">
+          <p>content</p>
+        </Accordion>
+      )
     }).not.toThrow()
   })
 })

web/src/components/Home/HomeHero/HomeHero.tsx

@@ -18,7 +18,7 @@ const HomeHero = () => {
         className="button mb-4 inline-block text-sm md:mb-8 md:text-base"
         rel="noreferrer"
       >
-        Walk Through Bighorn's Features
+        Walk Through Bighorn's Features
       </a>
 
       <p className="text-sm text-white md:text-base">
@@ -27,7 +27,7 @@ const HomeHero = () => {
           href={Constants.DOCS}
           className="font-bold underline hover:no-underline"
         >
-          Build on Redwood's Established Base
+          Build on Redwood&apos;s Established Base
         </a>
       </p>
     </div>

web/src/components/Home/RoadmapSummary/RoadmapSummary.tsx

@@ -7,8 +7,8 @@ const RoadmapSummary = () => {
         <div className="sticky top-5 pr-5">
           <h2 className="section-heading mb-6">Roadmap</h2>
           <h3 className="section-subheading">
-            This is a glimpse into what we’re working on and what we’ve
-            planned.
+            This is a glimpse into what we&apos;re working on and what
+            we&apos;ve planned.
           </h3>
         </div>
       </div>

web/src/components/NavDropdown/NavDropdown.tsx

@@ -12,7 +12,8 @@ const NavDropdown = () => {
             <div>
               <strong>Discord</strong>
               <p>
-                Our "watercooler" for relationship building and community help
+                Our &quot;watercooler&quot; for relationship building and
+                community help
               </p>
             </div>
           </a>
@@ -23,8 +24,8 @@ const NavDropdown = () => {
             <div>
               <strong>Discourse</strong>
               <p>
-                Long-form discussions, show &
-                tell, and troubleshooting with the Core Team
+                Long-form discussions, show & tell, and troubleshooting with the
+                Core Team
               </p>
             </div>
           </a>
@@ -35,7 +36,8 @@ const NavDropdown = () => {
             <div>
               <strong>Twitter / X</strong>
               <p>
-                Follow @redwoodjs for updates about releases, initiatives, and events
+                Follow @redwoodjs for updates about releases, initiatives, and
+                events
               </p>
             </div>
           </a>

web/src/components/Newsletter/Newsletter.tsx

@@ -1,6 +1,6 @@
 import { EmailField, Form } from '@redwoodjs/forms'
 import { useMutation } from '@redwoodjs/web'
-import { toast } from '@redwoodjs/web/dist/toast'
+import { toast } from '@redwoodjs/web/toast'
 
 const CREATE_NEWSLETTER_MUTATION = gql`
   mutation CreateNewsletterMutation($email: String!) {

web/src/components/ReactConf/Newsletter/Newsletter.tsx

@@ -1,6 +1,6 @@
 import { EmailField, Form } from '@redwoodjs/forms'
 import { useMutation } from '@redwoodjs/web'
-import { toast } from '@redwoodjs/web/dist/toast'
+import { toast } from '@redwoodjs/web/toast'
 
 const CREATE_NEWSLETTER_MUTATION = gql`
   mutation CreateNewsletterMutation($email: String!) {

web/src/entry.client.tsx

@@ -12,6 +12,13 @@ import Routes from './Routes'
  */
 const redwoodAppElement = document.getElementById('redwood-app')
 
+if (!redwoodAppElement) {
+  throw new Error(
+    "Could not find an element with ID 'redwood-app'. Please ensure it " +
+      "exists in your 'web/src/index.html' file."
+  )
+}
+
 if (redwoodAppElement.children?.length > 0) {
   hydrateRoot(
     document,

web/src/entry.server.tsx

@@ -20,9 +20,9 @@ export const ServerEntry: React.FC<Props> = ({ css, meta }) => {
 }
 
 export async function registerMiddleware() {
-  const { middleware: sitemapMw } = await import('./middleware/sitemap')
-  const { middleware: rssMw } = await import('./middleware/rss')
-  const { middleware: redirectMw } = await import('./middleware/redirects')
+  const { middleware: sitemapMw } = await import('./middleware/sitemap.js')
+  const { middleware: rssMw } = await import('./middleware/rss.js')
+  const { middleware: redirectMw } = await import('./middleware/redirects.js')
 
   return [sitemapMw, rssMw, redirectMw]
 }

web/src/middleware/redirects.ts

@@ -1,7 +1,7 @@
 import type {
   MiddlewareRequest,
   MiddlewareResponse,
-} from '@redwoodjs/vite/dist/middleware'
+} from '@redwoodjs/web/middleware'
 
 const REDIRECTS = [
   {

web/src/middleware/rss.ts

@@ -3,7 +3,7 @@ import { Feed } from 'feed'
 import type {
   MiddlewareRequest,
   MiddlewareResponse,
-} from '@redwoodjs/vite/dist/middleware'
+} from '@redwoodjs/web/middleware'
 
 import { getPosts } from 'src/content/posts'
 

web/src/middleware/sitemap.ts

@@ -5,7 +5,7 @@ import { SitemapStream, streamToPromise } from 'sitemap'
 import type {
   MiddlewareRequest,
   MiddlewareResponse,
-} from '@redwoodjs/vite/dist/middleware'
+} from '@redwoodjs/web/middleware'
 
 import { getPosts } from 'src/content/posts'
 

web/src/pages/BlogIndividualPage/BlogIndividualPage.test.tsx

@@ -8,7 +8,7 @@ import BlogIndividualPage from './BlogIndividualPage'
 describe('BlogIndividualPage', () => {
   it('renders successfully', () => {
     expect(() => {
-      render(<BlogIndividualPage />)
+      render(<BlogIndividualPage slug="slug" />)
     }).not.toThrow()
   })
 })

web/src/pages/HomePage/HomePage.tsx

@@ -1,6 +1,6 @@
 import { useLocation } from '@redwoodjs/router'
 import { Metadata } from '@redwoodjs/web'
-import { Toaster } from '@redwoodjs/web/dist/toast'
+import { Toaster } from '@redwoodjs/web/toast'
 
 import Footer from 'src/components/Footer/Footer'
 import EventSummary from 'src/components/Home/EventSummary/EventSummary'

web/src/pages/ServerComponentsPage/ServerComponentsPage.tsx

@@ -3,7 +3,6 @@ import { useState } from 'react'
 import { Metadata } from '@redwoodjs/web'
 
 import Icon from 'src/components/Icon/Icon'
-import Newsletter from 'src/components/Newsletter/Newsletter'
 import { Constants } from 'src/helpers/Constants'
 
 const ServerComponentsPage = () => {