create-manifest 1.3.4 → 2.0.1

package/starter/src/web/components/ui/button.tsx

@@ -0,0 +1,62 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/starter/src/web/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

package/starter/src/web/globals.css

@@ -0,0 +1,98 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/starter/src/web/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/starter/src/web/root.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useState, type ReactNode } from 'react'
+import '@/globals.css'
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light')
+
+  useEffect(() => {
+    if (window.openai?.theme) {
+      setTheme(window.openai.theme)
+    }
+  }, [])
+
+  return (
+    <div className={theme === 'dark' ? 'dark' : ''}>
+      {children}
+    </div>
+  )
+}
+
+// Type declarations for OpenAI host
+declare global {
+  interface Window {
+    openai?: {
+      theme?: 'light' | 'dark'
+      content?: {
+        structuredContent?: unknown
+      }
+      sendFollowUpMessage?: (message: string) => void
+      callTool?: (name: string, args: Record<string, unknown>) => Promise<unknown>
+      openExternal?: (url: string) => void
+      requestDisplayMode?: (mode: 'inline' | 'fullscreen' | 'pip') => void
+      requestClose?: () => void
+      setWidgetState?: (state: Record<string, unknown>) => void
+    }
+  }
+}

package/starter/src/web/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.web.json"
+}

package/starter/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "include": ["src/**/*"],
+  "exclude": ["vite.config.ts", "src/web"],
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "module": "nodenext",
+    "target": "esnext",
+    "types": [],
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "strict": true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/web/*"]
+    }
+  }
+}

package/starter/tsconfig.web.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/web/*"]
+    }
+  },
+  "include": ["src/web"]
+}

package/starter/vite.config.ts

@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import { chatGPTWidgetPlugin } from 'vite-plugin-chatgpt-widgets'
+import { resolve } from 'path'
+
+const port = Number(process.env.PORT) || 3000
+
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss(),
+    chatGPTWidgetPlugin({
+      widgetsDir: 'src/web',
+      baseUrl: `http://localhost:${port}`
+    })
+  ],
+  resolve: {
+    alias: {
+      '@': resolve(import.meta.dirname, 'src/web')
+    }
+  },
+  build: {
+    manifest: true,
+    outDir: 'dist/web',
+    rollupOptions: {
+      // Don't look for default index.html - the plugin adds widget entries
+      input: {}
+    }
+  },
+  server: {
+    cors: {
+      origin: true
+    },
+    allowedHosts: ['.ngrok-free.dev', '.ngrok.io']
+  }
+})

package/assets/monorepo/README.md

@@ -1,52 +0,0 @@
-<br>
-<p align="center">
-  <a href="https://manifest.build/#gh-light-mode-only">
-    <img alt="manifest" src="https://manifest.build/assets/images/logo-transparent.svg" height="55px" alt="Manifest logo" title="Manifest - A backend so simple that it fits in a YAML file" />
-  </a>
-  <a href="https://manifest.build/#gh-dark-mode-only">
-    <img alt="manifest" src="https://manifest.build/assets/images/logo-light.svg" height="55px" alt="Manifest logo" title="Manifest - A backend so simple that it fits in a YAML file" />
-  </a>
-</p>
-
-<p align='center'>
-<strong>1-file backend to ship fast</strong> <br> <span>Manifest is an open source, portable backend with data, storage, logic, auth and admin UI to ship Prototypes and MVPs.
-</span>
-
-## Description
-
-Welcome to your [Manifest](https://github.com/mnfst/manifest) project ! Feel free to replace this README by your own.
-
-This application is a **monorepo** composed by a [Manifest backend](https://github.com/mnfst/manifest) in the "/api" folder and a frontend of your choice that you can add in the "/web" folder.
-
-## Installation
-
-```bash
-$ npm install
-```
-
-## Running the app
-
-To run the app in the development mode:
-
-```bash
-npm run start
-```
-
-- Open [http://localhost:1111](http://localhost:1111) to open your admin UI it in your browser
-- Open [http://localhost:1111/api](http://localhost:111/api) to view your REST API documentation
-
-The page will reload when you make changes.
-
-## Seed dummy data
-
-Seeds some dummy data for your entities:
-
-```bash
-npm run seed
-```
-
-## Community & Resources
-
-- [Docs](https://manifest.build/docs) - Get started with Manifest
-- [Discord](https://discord.gg/FepAked3W7) - Come chat with the community
-- [Github](https://github.com/mnfst/manifest/issues) - Report bugs and share ideas to improve the product.

package/assets/monorepo/api-package.json

@@ -1,9 +0,0 @@
-{
-  "name": "@PROJECT_NAME/api",
-  "version": "0.1.0",
-  "description": "A backend made with Manifest: https://manifest.build",
-  "private": true,
-  "license": "UNLICENSED",
-  "scripts": {},
-  "dependencies": {}
-}

package/assets/monorepo/api-readme.md

@@ -1,50 +0,0 @@
-<br>
-<p align="center">
-  <a href="https://manifest.build/#gh-light-mode-only">
-    <img alt="manifest" src="https://manifest.build/assets/images/logo-transparent.svg" height="55px" alt="Manifest logo" title="Manifest - A backend so simple that it fits in a YAML file" />
-  </a>
-  <a href="https://manifest.build/#gh-dark-mode-only">
-    <img alt="manifest" src="https://manifest.build/assets/images/logo-light.svg" height="55px" alt="Manifest logo" title="Manifest - A backend so simple that it fits in a YAML file" />
-  </a>
-</p>
-
-<p align='center'>
-<strong>1-file backend to ship fast</strong> <br> <span>Manifest is an open source, portable backend with data, storage, logic, auth and admin UI to ship Prototypes and MVPs.
-</span>
-
-## Description
-
-Welcome to your [Manifest](https://github.com/mnfst/manifest) backend ! Feel free to replace this README by your own.
-
-## Installation
-
-```bash
-$ npm install
-```
-
-## Running the app
-
-To run the app in the development mode:
-
-```bash
-npm run start
-```
-
-- Open [http://localhost:1111](http://localhost:1111) to open your admin UI it in your browser
-- Open [http://localhost:1111/api](http://localhost:111/api) to view your REST API documentation
-
-The page will reload when you make changes.
-
-## Seed dummy data
-
-Seeds some dummy data for your entities:
-
-```bash
-npm run seed
-```
-
-## Community & Resources
-
-- [Docs](https://manifest.build/docs) - Get started with Manifest
-- [Discord](https://discord.gg/FepAked3W7) - Come chat with the community
-- [Github](https://github.com/mnfst/manifest/issues) - Report bugs and share ideas to improve the product.

package/assets/monorepo/manifest.yml

@@ -1,34 +0,0 @@
-# This is a sample file for a manifest.yml manifest backend.
-# Read more about the manifest format here: https:/manifest.build/docs
-
-name: My pet app 🐾
-entities:
-  Owner:
-    properties:
-      - name
-      - { name: birthdate, type: date }
-    policies:
-      read:
-        - access: public
-
-  Cat:
-    properties:
-      - name
-      - { name: age, type: number }
-      - { name: birthdate, type: date }
-    belongsTo:
-      - Owner
-    policies:
-      read:
-        - access: public
-
-  Homepage:
-    nameSingular: Home content
-    single: true
-    properties:
-      - title
-      - { name: description, type: richText }
-      - { name: cover, type: image }
-    policies:
-      read:
-        - access: public

package/assets/monorepo/root-package.json

@@ -1,15 +0,0 @@
-{
-  "name": "PROJECT_NAME",
-  "private": true,
-  "workspaces": ["api", "web"],
-  "description": "A full-stack app made with Manifest: https://manifest.build",
-  "scripts": {
-    "start": "concurrently \"npm run start:api\" \"npm run start:web\"",
-    "start:api": "npm run start --workspace=api",
-    "start:web": "npm run start --workspace=web",
-    "seed": "npm run seed --workspace=api"
-  },
-  "devDependencies": {
-    "concurrently": "^8.0.0"
-  }
-}

package/assets/monorepo/web-package.json

@@ -1,10 +0,0 @@
-{
-  "name": "@PROJECT_NAME/web",
-  "version": "0.1.0",
-  "private": true,
-  "license": "UNLICENSED",
-  "scripts": {
-    "start": "echo 'Add your frontend framework here'",
-    "build": "echo 'Add your build command here'"
-  }
-}

package/assets/monorepo/web-readme.md

@@ -1,9 +0,0 @@
-# Frontend Application
-
-This folder is ready for your frontend framework of choice:
-
-- Next.js: `npx create-next-app@latest . --typescript --tailwind`
-- Vite React: `npm create vite@latest . -- --template react-ts`
-- SvelteKit: `npm create svelte@latest .`
-
-After setting up your frontend, update the dev script in package.json.

package/assets/standalone/README.md

@@ -1,50 +0,0 @@
-<br>
-<p align="center">
-  <a href="https://manifest.build/#gh-light-mode-only">
-    <img alt="manifest" src="https://manifest.build/assets/images/logo-transparent.svg" height="55px" alt="Manifest logo" title="Manifest - A backend so simple that it fits in a YAML file" />
-  </a>
-  <a href="https://manifest.build/#gh-dark-mode-only">
-    <img alt="manifest" src="https://manifest.build/assets/images/logo-light.svg" height="55px" alt="Manifest logo" title="Manifest - A backend so simple that it fits in a YAML file" />
-  </a>
-</p>
-
-<p align='center'>
-<strong>1-file backend to ship fast</strong> <br> <span>Manifest is an open source, portable backend with data, storage, logic, auth and admin UI to ship Prototypes and MVPs.
-</span>
-
-## Description
-
-Welcome to your [Manifest](https://github.com/mnfst/manifest) project ! Feel free to replace this README by your own.
-
-## Installation
-
-```bash
-$ npm install
-```
-
-## Running the app
-
-To run the app in the development mode:
-
-```bash
-npm run start
-```
-
-- Open [http://localhost:1111](http://localhost:1111) to open your admin UI it in your browser
-- Open [http://localhost:1111/api](http://localhost:111/api) to view your REST API documentation
-
-The page will reload when you make changes.
-
-## Seed dummy data
-
-Seeds some dummy data for your entities:
-
-```bash
-npm run seed
-```
-
-## Community & Resources
-
-- [Docs](https://manifest.build/docs) - Get started with Manifest
-- [Discord](https://discord.gg/FepAked3W7) - Come chat with the community
-- [Github](https://github.com/mnfst/manifest/issues) - Report bugs and share ideas to improve the product.

package/assets/standalone/api-package.json

@@ -1,9 +0,0 @@
-{
-  "name": "PROJECT_NAME",
-  "version": "0.1.0",
-  "description": "A backend made with Manifest: https://manifest.build",
-  "private": true,
-  "license": "UNLICENSED",
-  "scripts": {},
-  "dependencies": {}
-}

package/assets/standalone/manifest.yml

@@ -1,34 +0,0 @@
-# This is a sample file for a manifest.yml manifest backend.
-# Read more about the manifest format here: https:/manifest.build/docs
-
-name: My pet app 🐾
-entities:
-  Owner:
-    properties:
-      - name
-      - { name: birthdate, type: date }
-    policies:
-      read:
-        - access: public
-
-  Cat:
-    properties:
-      - name
-      - { name: age, type: number }
-      - { name: birthdate, type: date }
-    belongsTo:
-      - Owner
-    policies:
-      read:
-        - access: public
-
-  Homepage:
-    nameSingular: Home content
-    single: true
-    properties:
-      - title
-      - { name: description, type: richText }
-      - { name: cover, type: image }
-    policies:
-      read:
-        - access: public

package/bin/dev.cmd

@@ -1,3 +0,0 @@
-@echo off
-
-node --loader ts-node/esm --no-warnings=ExperimentalWarning "%~dp0\dev" %*

package/bin/dev.js

@@ -1,5 +0,0 @@
-#!/usr/bin/env -S node --loader ts-node/esm --no-warnings=ExperimentalWarning
-
-import {execute} from '@oclif/core'
-
-await execute({development: true, dir: import.meta.url})

package/bin/run.cmd

@@ -1,3 +0,0 @@
-@echo off
-
-node "%~dp0\run" %*

package/bin/run.js

@@ -1,5 +0,0 @@
-#!/usr/bin/env node
-
-import {execute} from '@oclif/core'
-
-await execute({dir: import.meta.url})