create-cedar-app 0.7.2-next.2 → 0.7.2-next.50

package/templates/esm-ts/.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "editor.tabSize": 2,
+  "files.trimTrailingWhitespace": true,
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "[prisma]": {
+    "editor.formatOnSave": true
+  }
+}

package/templates/esm-ts/.vscode/tasks.json

@@ -0,0 +1,29 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "WaitForDevServer",
+      "group": "none",
+      "type": "shell",
+      "command": "bash",
+        "args": [
+          "-c",
+          "while ! echo -n > /dev/tcp/localhost/18911; do sleep 1; done;"
+      ],
+      "windows": {
+        "command": "powershell",
+        "args": [
+          "-NoProfile",
+          "-ExecutionPolicy", "Bypass",
+          "while (-not (Test-NetConnection -ComputerName localhost -Port 18911)) { Start-Sleep -Seconds 1 };"
+        ]
+      },
+      "presentation": {
+        "reveal": "silent",
+        "revealProblems": "onProblem",
+        "panel": "shared",
+        "close": true
+      }
+    },
+  ]
+}

package/templates/esm-ts/.yarnrc.yml

@@ -0,0 +1,15 @@
+# Yarn's manifest file. You can configure yarn here.
+# See https://yarnpkg.com/configuration/yarnrc.
+
+# For `node_modules` (see `nodeLinker` below), this is almost always the preferred option.
+compressionLevel: 0
+
+enableGlobalCache: true
+
+# Lets yarn use hardlinks inside `node_modules` to dedupe packages.
+# For a more pnpm-like experience, consider `hardlinks-global` where hardlinks point to a global store.
+nmMode: hardlinks-local
+
+# How to install Node packages.
+# Heads up: right now, Redwood expects this to be `node-modules`.
+nodeLinker: node-modules

package/templates/esm-ts/README.md

@@ -0,0 +1,17 @@
+# README
+
+Welcome to your new [CedarJS](https://cedarjs.com) project!
+
+Start by installing dependencies:
+
+```
+yarn install
+```
+
+Then start the development server:
+
+```
+yarn redwood dev
+```
+
+Your browser should automatically open to [http://localhost:8910](http://localhost:8910) where you'll see the Welcome Page, which links out to many great resources.

package/templates/esm-ts/api/db/schema.prisma

@@ -0,0 +1,24 @@
+// Don't forget to tell Prisma about your edits to this file using
+// `yarn rw prisma migrate dev` or `yarn rw prisma db push`.
+// `migrate` is like committing while `push` is for prototyping.
+// Read more about both here:
+// https://www.prisma.io/docs/orm/prisma-migrate
+
+datasource db {
+  provider = "sqlite"
+  url      = env("DATABASE_URL")
+}
+
+generator client {
+  provider      = "prisma-client-js"
+  binaryTargets = "native"
+}
+
+// Define your own datamodels here and run `yarn redwood prisma migrate dev`
+// to create migrations for them and apply to your dev DB.
+// TODO: Please remove the following example:
+model UserExample {
+  id    Int     @id @default(autoincrement())
+  email String  @unique
+  name  String?
+}

package/templates/esm-ts/api/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "api",
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@cedarjs/api": "0.0.5",
+    "@cedarjs/graphql-server": "0.0.5"
+  }
+}

package/templates/esm-ts/api/src/directives/requireAuth/requireAuth.test.ts

@@ -0,0 +1,18 @@
+import { mockRedwoodDirective, getDirectiveName } from '@cedarjs/testing/api'
+
+import requireAuth from './requireAuth.js'
+
+describe('requireAuth directive', () => {
+  it('declares the directive sdl as schema, with the correct name', () => {
+    expect(requireAuth.schema).toBeTruthy()
+    expect(getDirectiveName(requireAuth.schema)).toBe('requireAuth')
+  })
+
+  it('requireAuth has stub implementation. Should not throw when current user', () => {
+    // If you want to set values in context, pass it through e.g.
+    // mockRedwoodDirective(requireAuth, { context: { currentUser: { id: 1, name: 'Lebron McGretzky' } }})
+    const mockExecution = mockRedwoodDirective(requireAuth, { context: {} })
+
+    expect(mockExecution).not.toThrowError()
+  })
+})

package/templates/esm-ts/api/src/directives/requireAuth/requireAuth.ts

@@ -0,0 +1,25 @@
+import { gql } from 'graphql-tag'
+
+import type { ValidatorDirectiveFunc } from '@cedarjs/graphql-server'
+import { createValidatorDirective } from '@cedarjs/graphql-server'
+
+import { requireAuth as applicationRequireAuth } from 'src/lib/auth.js'
+
+export const schema = gql`
+  """
+  Use to check whether or not a user is authenticated and is associated
+  with an optional set of roles.
+  """
+  directive @requireAuth(roles: [String]) on FIELD_DEFINITION
+`
+
+type RequireAuthValidate = ValidatorDirectiveFunc<{ roles?: string[] }>
+
+const validate: RequireAuthValidate = ({ directiveArgs }) => {
+  const { roles } = directiveArgs
+  applicationRequireAuth({ roles })
+}
+
+const requireAuth = createValidatorDirective(schema, validate)
+
+export default requireAuth

package/templates/esm-ts/api/src/directives/skipAuth/skipAuth.test.ts

@@ -0,0 +1,10 @@
+import { getDirectiveName } from '@cedarjs/testing/api'
+
+import skipAuth from './skipAuth.js'
+
+describe('skipAuth directive', () => {
+  it('declares the directive sdl as schema, with the correct name', () => {
+    expect(skipAuth.schema).toBeTruthy()
+    expect(getDirectiveName(skipAuth.schema)).toBe('skipAuth')
+  })
+})

package/templates/esm-ts/api/src/directives/skipAuth/skipAuth.ts

@@ -0,0 +1,16 @@
+import { gql } from 'graphql-tag'
+
+import { createValidatorDirective } from '@cedarjs/graphql-server'
+
+export const schema = gql`
+  """
+  Use to skip authentication checks and allow public access.
+  """
+  directive @skipAuth on FIELD_DEFINITION
+`
+
+const skipAuth = createValidatorDirective(schema, () => {
+  return
+})
+
+export default skipAuth

package/templates/esm-ts/api/src/functions/graphql.ts

@@ -0,0 +1,19 @@
+import { createGraphQLHandler } from '@cedarjs/graphql-server'
+
+import directives from 'src/directives/**/*.{js,ts}'
+import sdls from 'src/graphql/**/*.sdl.{js,ts}'
+import services from 'src/services/**/*.{js,ts}'
+
+import { db } from 'src/lib/db.js'
+import { logger } from 'src/lib/logger.js'
+
+export const handler = createGraphQLHandler({
+  loggerConfig: { logger, options: {} },
+  directives,
+  sdls,
+  services,
+  onException: () => {
+    // Disconnect from your database with an unhandled exception.
+    db.$disconnect()
+  },
+})

package/templates/esm-ts/api/src/lib/auth.ts

@@ -0,0 +1,32 @@
+/**
+ * Once you are ready to add authentication to your application
+ * you'll build out requireAuth() with real functionality. For
+ * now we just return `true` so that the calls in services
+ * have something to check against, simulating a logged
+ * in user that is allowed to access that service.
+ *
+ * See https://redwoodjs.com/docs/authentication for more info.
+ */
+export const isAuthenticated = () => {
+  return true
+}
+
+export const hasRole = ({ roles }) => {
+  return roles !== undefined
+}
+
+// This is used by the redwood directive
+// in ./api/src/directives/requireAuth
+
+// Roles are passed in by the requireAuth directive if you have auth setup
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const requireAuth = ({ roles }) => {
+  return isAuthenticated()
+}
+
+export const getCurrentUser = async () => {
+  throw new Error(
+    'Auth is not set up yet. See https://redwoodjs.com/docs/authentication ' +
+      'to get started'
+  )
+}

package/templates/esm-ts/api/src/lib/db.ts

@@ -0,0 +1,26 @@
+// See https://www.prisma.io/docs/reference/tools-and-interfaces/prisma-client/constructor
+// for options.
+
+import { PrismaClient } from '@prisma/client'
+
+import { emitLogLevels, handlePrismaLogging } from '@cedarjs/api/logger'
+
+import { logger } from './logger.js'
+
+const prismaClient = new PrismaClient({
+  log: emitLogLevels(['info', 'warn', 'error']),
+})
+
+handlePrismaLogging({
+  db: prismaClient,
+  logger,
+  logLevels: ['info', 'warn', 'error'],
+})
+
+/**
+ * Global Prisma client extensions should be added here, as $extend
+ * returns a new instance.
+ * export const db = prismaClient.$extend(...)
+ * Add any .$on hooks before using $extend
+ */
+export const db = prismaClient

package/templates/esm-ts/api/src/lib/logger.ts

@@ -0,0 +1,17 @@
+import { createLogger } from '@cedarjs/api/logger'
+
+/**
+ * Creates a logger with RedwoodLoggerOptions
+ *
+ * These extend and override default LoggerOptions,
+ * can define a destination like a file or other supported pino log transport stream,
+ * and sets whether or not to show the logger configuration settings (defaults to false)
+ *
+ * @param RedwoodLoggerOptions
+ *
+ * RedwoodLoggerOptions have
+ * @param {options} LoggerOptions - defines how to log, such as redaction and format
+ * @param {string | DestinationStream} destination - defines where to log, such as a transport stream or file
+ * @param {boolean} showConfig - whether to display logger configuration on initialization
+ */
+export const logger = createLogger({})

package/templates/esm-ts/api/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "allowJs": true,
+    "esModuleInterop": true,
+    "target": "ES2023",
+    "module": "Node16",
+    "moduleResolution": "Node16",
+    "skipLibCheck": false,
+    "rootDirs": ["./src", "../.redwood/types/mirror/api/src"],
+    "paths": {
+      "src/*": ["./src/*", "../.redwood/types/mirror/api/src/*"],
+      "types/*": ["./types/*", "../types/*"],
+      "@cedarjs/testing": ["../node_modules/@cedarjs/testing/api"]
+    },
+    "typeRoots": ["../node_modules/@types", "./node_modules/@types"],
+    "types": ["jest"],
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src",
+    "../.redwood/types/includes/all-*",
+    "../.redwood/types/includes/api-*",
+    "../types"
+  ]
+}

package/templates/esm-ts/api/vitest.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config'
+
+import { cedarVitestPreset } from '@cedarjs/vite/api'
+
+export default defineConfig({
+  plugins: [cedarVitestPreset()],
+  test: {
+    globals: true,
+  },
+})

package/templates/esm-ts/gitignore.template

@@ -0,0 +1,24 @@
+.idea
+.DS_Store
+.env*
+!.env.example
+!.env.defaults
+.netlify
+.redwood/*
+!.redwood/README.md
+dev.db*
+dist
+dist-babel
+node_modules
+yarn-error.log
+web/public/mockServiceWorker.js
+web/types/graphql.d.ts
+api/types/graphql.d.ts
+api/src/lib/generateGraphiQLHeader.*
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

package/templates/esm-ts/graphql.config.cjs

@@ -0,0 +1,11 @@
+// This file is used by the VSCode GraphQL extension
+
+const { getPaths } = require('@cedarjs/project-config')
+
+/** @type {import('graphql-config').IGraphQLConfig} */
+const config = {
+  schema: getPaths().generated.schema,
+  documents: './web/src/**/!(*.d).{ts,tsx,js,jsx}',
+}
+
+module.exports = config

package/templates/esm-ts/package.json

@@ -0,0 +1,32 @@
+{
+  "private": true,
+  "type": "module",
+  "workspaces": {
+    "packages": [
+      "api",
+      "web"
+    ]
+  },
+  "devDependencies": {
+    "@cedarjs/core": "0.0.5",
+    "@cedarjs/project-config": "0.0.5",
+    "@cedarjs/testing": "0.0.5",
+    "vitest": "3.2.4"
+  },
+  "eslintConfig": {
+    "extends": "@cedarjs/eslint-config",
+    "root": true
+  },
+  "engines": {
+    "node": "=20.x"
+  },
+  "prisma": {
+    "seed": "yarn rw exec seed"
+  },
+  "packageManager": "yarn@4.9.2",
+  "resolutions": {
+    "@storybook/react-dom-shim@npm:7.6.20": "https://verdaccio.tobbe.dev/@storybook/react-dom-shim/-/react-dom-shim-8.0.8.tgz",
+    "react-is": "19.0.0-rc-f2df5694-20240916",
+    "vite": "5.4.19"
+  }
+}

package/templates/esm-ts/prettier.config.cjs

@@ -0,0 +1,18 @@
+// https://prettier.io/docs/en/options.html
+/** @type {import('prettier').RequiredOptions} */
+module.exports = {
+  trailingComma: 'es5',
+  bracketSpacing: true,
+  tabWidth: 2,
+  semi: false,
+  singleQuote: true,
+  arrowParens: 'always',
+  overrides: [
+    {
+      files: 'Routes.*',
+      options: {
+        printWidth: 999,
+      },
+    },
+  ],
+}

package/templates/esm-ts/redwood.toml

@@ -0,0 +1,21 @@
+# This file contains the configuration settings for your Redwood app.
+# This file is also what makes your Redwood app a Redwood app.
+# If you remove it and try to run `yarn rw dev`, you'll get an error.
+#
+# For the full list of options, see the "App Configuration: redwood.toml" doc:
+# https://redwoodjs.com/docs/app-configuration-redwood-toml
+
+[web]
+  title = "Cedar App"
+  port = 8910
+  apiUrl = "/.redwood/functions"
+  includeEnvironmentVariables = [
+    # Add any ENV vars that should be available to the web side to this array
+    # See https://redwoodjs.com/docs/environment-variables#web
+  ]
+[api]
+  port = 8911
+[browser]
+  open = true
+[notifications]
+  versionUpdates = ["latest"]

package/templates/esm-ts/scripts/seed.ts

@@ -0,0 +1,27 @@
+// import { db } from 'api/src/lib/db.js'
+
+// Manually apply seeds via the `yarn rw prisma db seed` command.
+//
+// Seeds automatically run the first time you run the `yarn rw prisma migrate dev`
+// command and every time you run the `yarn rw prisma migrate reset` command.
+//
+// See https://redwoodjs.com/docs/database-seeds for more info
+
+export default async () => {
+  try {
+    // Create your database records here! For example, seed some users:
+    //
+    // const users = [
+    //   { name: 'Alice', email: 'alice@cedarjs.com' },
+    //   { name: 'Bob', email: 'bob@cedarjs.com' },
+    // ]
+    //
+    // await db.user.createMany({ data: users })
+
+    console.info(
+      '\n  No seed data, skipping. See scripts/seed.ts to start seeding your database!\n'
+    )
+  } catch (error) {
+    console.error(error)
+  }
+}

package/templates/esm-ts/scripts/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "allowJs": true,
+    "esModuleInterop": true,
+    "target": "ES2023",
+    "module": "Node16",
+    "moduleResolution": "Node16",
+    "paths": {
+      "$api/*": ["../api/*"],
+      "api/*": ["../api/*"],
+      "$api/src/*": ["../api/src/*", "../.redwood/types/mirror/api/src/*"],
+      "api/src/*": ["../api/src/*", "../.redwood/types/mirror/api/src/*"],
+      "$web/*": ["../web/*"],
+      "web/*": ["../web/*"],
+      "$web/src/*": ["../web/src/*", "../.redwood/types/mirror/web/src/*"],
+      "web/src/*": ["../web/src/*", "../.redwood/types/mirror/web/src/*"],
+      "types/*": ["../types/*", "../web/types/*", "../api/types/*"]
+    },
+    "typeRoots": ["../node_modules/@types"],
+    "jsx": "preserve"
+  },
+  "include": [
+    ".",
+    "../.redwood/types/includes/all-*",
+    "../.redwood/types/includes/web-*",
+    "../types"
+  ]
+}

package/templates/esm-ts/vitest.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    projects: ['<rootDir>/{*,!(node_modules)/**/}/vite?(st).config.{js,ts}'],
+  },
+})

package/templates/esm-ts/web/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "web",
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "browserslist": {
+    "development": [
+      "last 1 version"
+    ],
+    "production": [
+      "defaults"
+    ]
+  },
+  "dependencies": {
+    "@cedarjs/forms": "0.0.5",
+    "@cedarjs/router": "0.0.5",
+    "@cedarjs/web": "0.0.5",
+    "react": "19.0.0-rc-f2df5694-20240916",
+    "react-dom": "19.0.0-rc-f2df5694-20240916"
+  },
+  "devDependencies": {
+    "@cedarjs/vite": "0.0.5",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19"
+  }
+}

package/templates/esm-ts/web/public/README.md

@@ -0,0 +1,43 @@
+# 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)

package/templates/esm-ts/web/public/robots.txt

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

package/templates/esm-ts/web/src/App.tsx

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

package/templates/esm-ts/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 '@cedarjs/router'
+
+const Routes = () => {
+  return (
+    <Router>
+      <Route notfound page={NotFoundPage} />
+    </Router>
+  )
+}
+
+export default Routes