initial commit

web/config/chakra.config.js

+// This object will be used to override Chakra-UI theme defaults.
+// See https://chakra-ui.com/docs/styled-system/theming/theme for theming options
+const theme = {}
+export default theme

web/config/storybook.preview.js

+import * as React from 'react'
+
+import { ChakraProvider, extendTheme } from '@chakra-ui/react'
+import * as theme from 'config/chakra.config'
+/** @type { import("@storybook/csf").GlobalTypes } */
+export const globalTypes = {}
+/**
+ * An example, no-op storybook decorator. Use a function like this to create decorators.
+ * @param { import("@storybook/addons").StoryFn} StoryFn
+ * @param { import("@storybook/addons").StoryContext} context
+ * @returns StoryFn, unmodified.
+ */
+const _exampleDecorator = (StoryFn, _context) => {
+  return <StoryFn />
+}
+const extendedTheme = extendTheme(theme)
+const withChakra = (StoryFn) => {
+  return (
+    <ChakraProvider theme={extendedTheme}>
+      <StoryFn />
+    </ChakraProvider>
+  )
+}
+export const decorators = [withChakra]

web/jest.config.js

+// 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

+{
+  "name": "web",
+  "version": "0.0.0",
+  "private": true,
+  "browserslist": {
+    "development": [
+      "last 1 version"
+    ],
+    "production": [
+      "defaults"
+    ]
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^2",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@redwoodjs/forms": "6.5.1",
+    "@redwoodjs/router": "6.5.1",
+    "@redwoodjs/web": "6.5.1",
+    "framer-motion": "^9",
+    "prop-types": "15.8.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@chakra-ui/storybook-addon": "^5.1.0",
+    "@redwoodjs/vite": "6.5.1",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15"
+  }
+}

web/public/README.md

+# 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

+User-agent: *
+Disallow:

web/src/App.tsx

+import { ChakraProvider, ColorModeScript, extendTheme } from '@chakra-ui/react'
+import * as theme from 'config/chakra.config'
+
+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 extendedTheme = extendTheme(theme)
+
+const App = () => (
+  <FatalErrorBoundary page={FatalErrorPage}>
+    <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
+      <ColorModeScript />
+      <ChakraProvider theme={extendedTheme}>
+        <RedwoodApolloProvider>
+          <Routes />
+        </RedwoodApolloProvider>
+      </ChakraProvider>
+    </RedwoodProvider>
+  </FatalErrorBoundary>
+)
+
+export default App

web/src/Routes.tsx

+// 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/components/ExamplePostsCell/ExamplePostsCell.mock.ts

+// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  examplePosts: [{ id: 42 }, { id: 43 }, { id: 44 }],
+})

web/src/components/ExamplePostsCell/ExamplePostsCell.stories.tsx

+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Loading, Empty, Failure, Success } from './ExamplePostsCell'
+import { standard } from './ExamplePostsCell.mock'
+
+const meta: Meta = {
+  title: 'Cells/ExamplePostsCell',
+}
+
+export default meta
+
+export const loading: StoryObj<typeof Loading> = {
+  render: () => {
+    return Loading ? <Loading /> : <></>
+  },
+}
+
+export const empty: StoryObj<typeof Empty> = {
+  render: () => {
+    return Empty ? <Empty /> : <></>
+  },
+}
+
+export const failure: StoryObj<typeof Failure> = {
+  render: (args) => {
+    return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
+  },
+}
+
+export const success: StoryObj<typeof Success> = {
+  render: (args) => {
+    return Success ? <Success {...standard()} {...args} /> : <></>
+  },
+}

web/src/components/ExamplePostsCell/ExamplePostsCell.test.tsx

+import { render } from '@redwoodjs/testing/web'
+
+import { Loading, Empty, Failure, Success } from './ExamplePostsCell'
+import { standard } from './ExamplePostsCell.mock'
+
+// Generated boilerplate tests do not account for all circumstances
+// and can fail without adjustments, e.g. Float and DateTime types.
+//           Please refer to the RedwoodJS Testing Docs:
+//        https://redwoodjs.com/docs/testing#testing-cells
+// https://redwoodjs.com/docs/testing#jest-expect-type-considerations
+
+describe('ExamplePostsCell', () => {
+  it('renders Loading successfully', () => {
+    expect(() => {
+      render(<Loading />)
+    }).not.toThrow()
+  })
+
+  it('renders Empty successfully', async () => {
+    expect(() => {
+      render(<Empty />)
+    }).not.toThrow()
+  })
+
+  it('renders Failure successfully', async () => {
+    expect(() => {
+      render(<Failure error={new Error('Oh no')} />)
+    }).not.toThrow()
+  })
+
+  // When you're ready to test the actual output of your component render
+  // you could test that, for example, certain text is present:
+  //
+  // 1. import { screen } from '@redwoodjs/testing/web'
+  // 2. Add test: expect(screen.getByText('Hello, world')).toBeInTheDocument()
+
+  it('renders Success successfully', async () => {
+    expect(() => {
+      render(<Success examplePosts={standard().examplePosts} />)
+    }).not.toThrow()
+  })
+})

web/src/components/ExamplePostsCell/ExamplePostsCell.tsx

+import type { ExamplePostsQuery } from 'types/graphql'
+
+import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+
+export const QUERY = gql`
+  query ExamplePostsQuery {
+    examplePosts {
+      id
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Empty</div>
+
+export const Failure = ({ error }: CellFailureProps) => (
+  <div style={{ color: 'red' }}>Error: {error?.message}</div>
+)
+
+export const Success = ({
+  examplePosts,
+}: CellSuccessProps<ExamplePostsQuery>) => {
+  return (
+    <ul>
+      {examplePosts.map((item) => {
+        return <li key={item.id}>{JSON.stringify(item)}</li>
+      })}
+    </ul>
+  )
+}

web/src/entry.client.tsx

+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

+<!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

+// 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

+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>
+)