create-quadrokit 0.1.0 → 0.2.0

package/templates/website/src/components/AppShell.tsx

@@ -0,0 +1,44 @@
+import { ThemeToolbar } from '@quadrokit/ui'
+import { useTranslation } from 'react-i18next'
+import { Link, NavLink, Outlet } from 'react-router-dom'
+
+export function AppShell() {
+  const { t } = useTranslation()
+
+  return (
+    <div className="min-h-dvh bg-background text-foreground">
+      <header className="border-b border-border bg-card/40 backdrop-blur">
+        <div className="mx-auto flex max-w-5xl flex-col gap-3 px-4 py-4 sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex items-center gap-6">
+            <Link to="/" className="text-lg font-semibold tracking-tight">
+              {t('app.title')}
+            </Link>
+            <nav className="flex gap-3 text-sm text-muted-foreground">
+              <NavLink
+                to="/"
+                end
+                className={({ isActive }) =>
+                  isActive ? 'font-medium text-foreground' : 'hover:text-foreground'
+                }
+              >
+                {t('app.nav_home')}
+              </NavLink>
+              <NavLink
+                to="/agencies"
+                className={({ isActive }) =>
+                  isActive ? 'font-medium text-foreground' : 'hover:text-foreground'
+                }
+              >
+                {t('app.nav_agencies')}
+              </NavLink>
+            </nav>
+          </div>
+          <ThemeToolbar />
+        </div>
+      </header>
+      <main className="mx-auto max-w-5xl px-4 py-8">
+        <Outlet />
+      </main>
+    </div>
+  )
+}

package/templates/website/src/i18n.ts

@@ -0,0 +1,12 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import en from './locales/en.json'
+
+void i18n.use(initReactI18next).init({
+  resources: { en: { translation: en } },
+  lng: 'en',
+  fallbackLng: 'en',
+  interpolation: { escapeValue: false },
+})
+
+export default i18n

package/templates/website/src/lib/quadro-client.ts

@@ -0,0 +1,4 @@
+import { createClient } from '@quadrokit/sample-client'
+
+/** Same-origin `/rest` in dev (Vite proxy) and production (reverse proxy). */
+export const quadro = createClient({ baseURL: '/rest' })

package/templates/website/src/locales/en.json

@@ -0,0 +1,21 @@
+{
+  "app": {
+    "title": "QuadroKit",
+    "tagline": "Marketing-style template — same stack, lighter chrome.",
+    "nav_home": "Home",
+    "nav_agencies": "Agencies",
+    "session_cookie": "Expected 4D session cookie: {{name}}"
+  },
+  "hero": {
+    "headline": "Ship a public site on top of your 4D datastore.",
+    "sub": "QuadroKit keeps REST, auth cookies, and typed clients consistent across templates.",
+    "cta_primary": "Get started",
+    "cta_secondary": "View sample data"
+  },
+  "form": {
+    "demo_title": "react-hook-form + zod",
+    "label": "Label",
+    "placeholder": "Type something…",
+    "submit": "Submit"
+  }
+}

package/templates/website/src/main.tsx

@@ -0,0 +1,15 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { RouterProvider } from 'react-router-dom'
+import '@quadrokit/ui/styles.css'
+import './i18n'
+import { ThemeProvider } from '@quadrokit/ui'
+import { router } from './router'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ThemeProvider>
+      <RouterProvider router={router} />
+    </ThemeProvider>
+  </StrictMode>
+)

package/templates/website/src/pages/AgenciesPage.tsx

@@ -0,0 +1,69 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@quadrokit/ui'
+import { useEffect, useState } from 'react'
+import { quadro } from '@/lib/quadro-client'
+
+export function AgenciesPage() {
+  const [names, setNames] = useState<string[]>([])
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      try {
+        const list = quadro.Agency.all({
+          page: 1,
+          pageSize: 20,
+          select: ['name'],
+        })
+        const acc: string[] = []
+        for await (const a of list) {
+          acc.push(a.name ?? '')
+        }
+        if (!cancelled) {
+          setNames(acc)
+        }
+      } catch (e) {
+        if (!cancelled) {
+          setError(e instanceof Error ? e.message : String(e))
+        }
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold">Agencies</h1>
+        <p className="text-sm text-muted-foreground">
+          Sample list from 4D REST (requires running server + auth cookie).
+        </p>
+      </div>
+      {error && (
+        <Card className="border-destructive/50">
+          <CardHeader>
+            <CardTitle className="text-destructive">Request failed</CardTitle>
+            <CardDescription>{error}</CardDescription>
+          </CardHeader>
+        </Card>
+      )}
+      <Card>
+        <CardHeader>
+          <CardTitle>Names</CardTitle>
+          <CardDescription>
+            {names.length ? `${names.length} loaded` : 'No data yet'}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ul className="list-inside list-disc space-y-1 text-sm">
+            {names.map((n) => (
+              <li key={n}>{n || '(empty)'}</li>
+            ))}
+          </ul>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/templates/website/src/pages/HomePage.tsx

@@ -0,0 +1,83 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+} from '@quadrokit/ui'
+import { useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { z } from 'zod'
+import { quadro } from '@/lib/quadro-client'
+import { useSidebarHint } from '@/stores/useSidebarHint'
+
+const schema = z.object({
+  label: z.string().min(1, 'Required'),
+})
+
+type FormValues = z.infer<typeof schema>
+
+export function HomePage() {
+  const { t } = useTranslation()
+  const note = useSidebarHint((s) => s.note)
+  const setNote = useSidebarHint((s) => s.setNote)
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: { label: '' },
+  })
+
+  return (
+    <div className="space-y-12">
+      <section className="rounded-2xl border border-border bg-gradient-to-br from-primary/15 via-background to-background p-10 shadow-sm">
+        <p className="text-sm font-medium uppercase tracking-widest text-primary">
+          {t('app.title')}
+        </p>
+        <h1 className="mt-3 max-w-xl text-4xl font-semibold tracking-tight">
+          {t('hero.headline')}
+        </h1>
+        <p className="mt-4 max-w-2xl text-lg text-muted-foreground">{t('hero.sub')}</p>
+        <div className="mt-8 flex flex-wrap gap-3">
+          <Button asChild>
+            <a href="#contact">{t('hero.cta_primary')}</a>
+          </Button>
+          <Button variant="outline" asChild>
+            <a href="/agencies">{t('hero.cta_secondary')}</a>
+          </Button>
+        </div>
+      </section>
+
+      <div>
+        <p className="text-sm text-muted-foreground">
+          {t('app.session_cookie', { name: quadro.sessionCookieName })}
+        </p>
+      </div>
+
+      <Card id="contact">
+        <CardHeader>
+          <CardTitle>{t('form.demo_title')}</CardTitle>
+          <CardDescription>Zustand note: {note || '—'}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form
+            className="flex max-w-md flex-col gap-4"
+            onSubmit={form.handleSubmit((v) => setNote(v.label))}
+          >
+            <div className="space-y-2">
+              <Label htmlFor="label">{t('form.label')}</Label>
+              <Input id="label" placeholder={t('form.placeholder')} {...form.register('label')} />
+              {form.formState.errors.label?.message && (
+                <p className="text-sm text-destructive">{form.formState.errors.label.message}</p>
+              )}
+            </div>
+            <Button type="submit">{t('form.submit')}</Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/templates/website/src/router.tsx

@@ -0,0 +1,15 @@
+import { createBrowserRouter } from 'react-router-dom'
+import { AppShell } from './components/AppShell'
+import { AgenciesPage } from './pages/AgenciesPage'
+import { HomePage } from './pages/HomePage'
+
+export const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <AppShell />,
+    children: [
+      { index: true, element: <HomePage /> },
+      { path: 'agencies', element: <AgenciesPage /> },
+    ],
+  },
+])

package/templates/website/src/stores/useSidebarHint.ts

@@ -0,0 +1,12 @@
+import { create } from 'zustand'
+
+/** Minimal Zustand example — optional UI preference. */
+interface SidebarHintState {
+  note: string
+  setNote: (s: string) => void
+}
+
+export const useSidebarHint = create<SidebarHintState>((set) => ({
+  note: '',
+  setNote: (note) => set({ note }),
+}))

package/templates/website/src/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_4D_ORIGIN?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

package/templates/website/tailwind.config.ts

@@ -0,0 +1,7 @@
+import preset from '@quadrokit/ui/tailwind-preset'
+import type { Config } from 'tailwindcss'
+
+export default {
+  presets: [preset],
+  content: ['./index.html', './src/**/*.{ts,tsx}', '../../ui/src/**/*.{ts,tsx}'],
+} satisfies Config

package/templates/website/tsconfig.app.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "verbatimModuleSyntax": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

package/templates/website/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}

package/templates/website/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "noEmit": true,
+    "moduleDetection": "force",
+    "types": ["node"]
+  },
+  "include": ["vite.config.ts", "tailwind.config.ts"]
+}

package/templates/website/vite.config.ts

@@ -0,0 +1,25 @@
+import path from 'node:path'
+import react from '@vitejs/plugin-react'
+import { defineConfig, loadEnv } from 'vite'
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '')
+  const target4d = env.VITE_4D_ORIGIN ?? 'http://127.0.0.1:7080'
+
+  return {
+    plugins: [react()],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src'),
+      },
+    },
+    server: {
+      proxy: {
+        '/rest': {
+          target: target4d,
+          changeOrigin: true,
+        },
+      },
+    },
+  }
+})