Initial commit

web/jest.config.js

@@ -0,0 +1,8 @@
+// More info at https://redwoodjs.com/docs/project-configuration-dev-test-build
+
+const config = {
+  rootDir: '../',
+  preset: '@redwoodjs/testing/config/jest/web',
+}
+
+module.exports = config

web/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "web",
+  "version": "0.0.0",
+  "private": true,
+  "browserslist": {
+    "development": [
+      "last 1 version"
+    ],
+    "production": [
+      "defaults"
+    ]
+  },
+  "dependencies": {
+    "@redwoodjs/forms": "6.3.2",
+    "@redwoodjs/router": "6.3.2",
+    "@redwoodjs/web": "6.3.2",
+    "prop-types": "15.8.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@redwoodjs/vite": "6.3.2",
+    "@types/react": "18.2.14",
+    "@types/react-dom": "18.2.6"
+  }
+}

web/public/README.md

@@ -0,0 +1,35 @@
+# Static Assets
+Use this folder to add static files directly to your app. All included files and folders will be copied directly into the `/dist` folder (created when Vite builds for production). They will also be available during development when you run `yarn rw dev`.
+>Note: files will *not* hot reload while the development server is running. You'll need to manually stop/start to access file changes.
+
+### Example Use
+A file like `favicon.png` will be copied to `/dist/favicon.png`. A folder containing a file such as `static-files/my-logo.jpg` will be copied to `/dist/static-files/my-logo.jpg`. These can be referenced in your code directly without any special handling, e.g.
+```
+<link rel="icon" type="image/png" href="/favicon.png" />
+```
+and
+```
+<img src="/static-files/my-logo.jpg"> alt="Logo" />
+```
+
+
+## Best Practices
+Because assets in this folder are bypassing the javascript module system, **this folder should be used sparingly** for assets such as favicons, robots.txt, manifests, libraries incompatible with Vite, etc.
+
+In general, it's best to import files directly into a template, page, or component. This allows Vite to include that file in the bundle when small enough, or to copy it over to the `dist` folder with a hash.
+
+### Example Asset Import with Vite
+Instead of handling our logo image as a static file per the example above, we can do the following:
+```
+import React from "react"
+import logo from "./my-logo.jpg"
+
+
+function Header() {
+  return <img src={logo} alt="Logo" />
+}
+
+export default Header
+```
+
+See Vite's docs for [static asset handling](https://vitejs.dev/guide/assets.html)

web/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

web/src/App.tsx

@@ -0,0 +1,19 @@
+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 = () => (
+  <FatalErrorBoundary page={FatalErrorPage}>
+    <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
+      <RedwoodApolloProvider>
+        <Routes />
+      </RedwoodApolloProvider>
+    </RedwoodProvider>
+  </FatalErrorBoundary>
+)
+
+export default App

web/src/Routes.tsx

@@ -0,0 +1,20 @@
+// In this file, all Page components from 'src/pages` are auto-imported. Nested
+// directories are supported, and should be uppercase. Each subdirectory will be
+// prepended onto the component name.
+//
+// Examples:
+//
+// 'src/pages/HomePage/HomePage.js'         -> HomePage
+// 'src/pages/Admin/BooksPage/BooksPage.js' -> AdminBooksPage
+
+import { Router, Route } from '@redwoodjs/router'
+
+const Routes = () => {
+  return (
+    <Router>
+      <Route notfound page={NotFoundPage} />
+    </Router>
+  )
+}
+
+export default Routes

web/src/entry.client.tsx

@@ -0,0 +1,23 @@
+import { hydrateRoot, createRoot } from 'react-dom/client'
+
+import App from './App'
+/**
+ * When `#redwood-app` isn't empty then it's very likely that you're using
+ * prerendering. So React attaches event listeners to the existing markup
+ * rather than replacing it.
+ * https://reactjs.org/docs/react-dom-client.html#hydrateroot
+ */
+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(redwoodAppElement, <App />)
+} else {
+  const root = createRoot(redwoodAppElement)
+  root.render(<App />)
+}

web/src/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" type="image/png" href="/favicon.png" />
+</head>
+
+<body>
+  <!-- Please keep this div empty -->
+  <div id="redwood-app"></div>
+</body>
+
+</html>

web/src/pages/FatalErrorPage/FatalErrorPage.tsx

@@ -0,0 +1,57 @@
+// This page will be rendered when an error makes it all the way to the top of the
+// application without being handled by a Javascript catch statement or React error
+// boundary.
+//
+// You can modify this page as you wish, but it is important to keep things simple to
+// avoid the possibility that it will cause its own error. If it does, Redwood will
+// still render a generic error page, but your users will prefer something a bit more
+// thoughtful :)
+
+// This import will be automatically removed when building for production
+import { DevFatalErrorPage } from '@redwoodjs/web/dist/components/DevFatalErrorPage'
+
+export default DevFatalErrorPage ||
+  (() => (
+    <main>
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+              html, body {
+                margin: 0;
+              }
+              html * {
+                box-sizing: border-box;
+              }
+              main {
+                display: flex;
+                align-items: center;
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+                text-align: center;
+                background-color: #E2E8F0;
+                height: 100vh;
+              }
+              section {
+                background-color: white;
+                border-radius: 0.25rem;
+                width: 32rem;
+                padding: 1rem;
+                margin: 0 auto;
+                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+              }
+              h1 {
+                font-size: 2rem;
+                margin: 0;
+                font-weight: 500;
+                line-height: 1;
+                color: #2D3748;
+              }
+            `,
+        }}
+      />
+      <section>
+        <h1>
+          <span>Something went wrong</span>
+        </h1>
+      </section>
+    </main>
+  ))

web/src/pages/NotFoundPage/NotFoundPage.tsx

@@ -0,0 +1,44 @@
+export default () => (
+  <main>
+    <style
+      dangerouslySetInnerHTML={{
+        __html: `
+              html, body {
+                margin: 0;
+              }
+              html * {
+                box-sizing: border-box;
+              }
+              main {
+                display: flex;
+                align-items: center;
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+                text-align: center;
+                background-color: #E2E8F0;
+                height: 100vh;
+              }
+              section {
+                background-color: white;
+                border-radius: 0.25rem;
+                width: 32rem;
+                padding: 1rem;
+                margin: 0 auto;
+                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+              }
+              h1 {
+                font-size: 2rem;
+                margin: 0;
+                font-weight: 500;
+                line-height: 1;
+                color: #2D3748;
+              }
+            `,
+      }}
+    />
+    <section>
+      <h1>
+        <span>404 Page Not Found</span>
+      </h1>
+    </section>
+  </main>
+)

web/tsconfig.json

@@ -0,0 +1,39 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "allowJs": true,
+    "esModuleInterop": true,
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "baseUrl": "./",
+    "skipLibCheck": false,
+    "rootDirs": [
+      "./src",
+      "../.redwood/types/mirror/web/src",
+      "../api/src",
+      "../.redwood/types/mirror/api/src"
+    ],
+    "paths": {
+      "src/*": [
+        "./src/*",
+        "../.redwood/types/mirror/web/src/*",
+        "../api/src/*",
+        "../.redwood/types/mirror/api/src/*"
+      ],
+      "$api/*": [ "../api/*" ],
+      "types/*": ["./types/*", "../types/*"],
+      "@redwoodjs/testing": ["../node_modules/@redwoodjs/testing/web"]
+    },
+    "typeRoots": ["../node_modules/@types", "./node_modules/@types"],
+    "types": ["jest", "@testing-library/jest-dom"],
+    "jsx": "preserve"
+  },
+  "include": [
+    "src",
+    "../.redwood/types/includes/all-*",
+    "../.redwood/types/includes/web-*",
+    "../types",
+    "./types"
+  ]
+}

web/vite.config.ts

@@ -0,0 +1,16 @@
+import dns from 'dns'
+
+import type { UserConfig } from 'vite'
+import { defineConfig } from 'vite'
+
+// See: https://vitejs.dev/config/server-options.html#server-host
+// So that Vite will load on local instead of 127.0.0.1
+dns.setDefaultResultOrder('verbatim')
+
+import redwood from '@redwoodjs/vite'
+
+const viteConfig: UserConfig = {
+  plugins: [redwood()],
+}
+
+export default defineConfig(viteConfig)