create-quadrokit 0.1.0 → 0.2.1

package/templates/admin-shell/src/components/AppShell.tsx

@@ -0,0 +1,68 @@
+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">
+      <div className="flex min-h-dvh">
+        <aside className="hidden w-56 shrink-0 border-r border-border bg-card/40 p-4 md:block">
+          <Link to="/" className="block text-lg font-semibold tracking-tight">
+            {t('app.title')}
+          </Link>
+          <nav className="mt-6 flex flex-col gap-2 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>
+        </aside>
+        <div className="flex min-w-0 flex-1 flex-col">
+          <header className="border-b border-border bg-card/40 px-4 py-3 backdrop-blur md:hidden">
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <Link to="/" className="font-semibold">
+                {t('app.title')}
+              </Link>
+              <nav className="flex gap-3 text-sm text-muted-foreground">
+                <NavLink
+                  to="/"
+                  end
+                  className={({ isActive }) => (isActive ? 'text-foreground' : '')}
+                >
+                  {t('app.nav_home')}
+                </NavLink>
+                <NavLink
+                  to="/agencies"
+                  className={({ isActive }) => (isActive ? 'text-foreground' : '')}
+                >
+                  {t('app.nav_agencies')}
+                </NavLink>
+              </nav>
+            </div>
+          </header>
+          <div className="border-b border-border px-4 py-3">
+            <ThemeToolbar />
+          </div>
+          <main className="mx-auto w-full max-w-5xl flex-1 px-4 py-8">
+            <Outlet />
+          </main>
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/admin-shell/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/admin-shell/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/admin-shell/src/locales/en.json

@@ -0,0 +1,15 @@
+{
+  "app": {
+    "title": "QuadroKit",
+    "tagline": "Admin shell with sidebar — same stack, denser layout.",
+    "nav_home": "Home",
+    "nav_agencies": "Agencies",
+    "session_cookie": "Expected 4D session cookie: {{name}}"
+  },
+  "form": {
+    "demo_title": "react-hook-form + zod",
+    "label": "Label",
+    "placeholder": "Type something…",
+    "submit": "Submit"
+  }
+}

package/templates/admin-shell/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/admin-shell/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/admin-shell/src/pages/HomePage.tsx

@@ -0,0 +1,67 @@
+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-8">
+      <div>
+        <h1 className="text-3xl font-semibold tracking-tight">{t('app.title')}</h1>
+        <p className="mt-2 max-w-2xl text-muted-foreground">{t('app.tagline')}</p>
+        <p className="mt-2 text-sm text-muted-foreground">
+          {t('app.session_cookie', { name: quadro.sessionCookieName })}
+        </p>
+      </div>
+
+      <Card>
+        <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/admin-shell/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/admin-shell/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/admin-shell/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/admin-shell/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/admin-shell/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/admin-shell/tsconfig.json

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

package/templates/admin-shell/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/admin-shell/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,
+        },
+      },
+    },
+  }
+})

package/templates/dashboard/.cursor/rules/commitlint-conventional.mdc

@@ -0,0 +1,47 @@
+---
+description: Commit messages must follow Conventional Commits (commitlint @commitlint/config-conventional)
+alwaysApply: true
+---
+
+# Git commits (Conventional Commits / commitlint)
+
+When proposing or writing **commit messages** (including one-line suggestions, full messages, or PR squash titles), use **Conventional Commits** compatible with **@commitlint/config-conventional**.
+
+## Header format
+
+```
+<type>(<optional-scope>): <short description>
+```
+
+- **type** (pick one): `feat`, `fix`, `docs`, `style`, `refactor`, `perf`, `test`, `build`, `ci`, `chore`, `revert`
+- **scope** (optional): lowercase, short package or area (e.g. `client`, `templates`, `ui`, `create-quadrokit`)
+- **description**: imperative mood, **lowercase**, **no trailing period**, **≤ ~72 characters** for the subject line
+
+## Breaking changes
+
+- Add `!` after type or scope: `feat(api)!: remove legacy login endpoint`
+- Or explain in the body with a line starting with `BREAKING CHANGE:`
+
+## Body and footer (when needed)
+
+- Separate body from subject with a blank line.
+- Wrap body at ~100 chars.
+- Footer: `Refs: #123` / `Fixes: #123` if applicable.
+
+## Examples
+
+```
+feat(client): add entity set release helper
+
+fix(templates): correct vite proxy target env var
+
+chore: bump biome to 2.4.10
+
+docs(readme): document ci:quick script
+```
+
+## Do not
+
+- Vague subjects: `update`, `fix stuff`, `wip`
+- End the subject line with a period
+- Use title case for the description (use sentence case / lowercase)

package/templates/dashboard/.env.example

@@ -0,0 +1,2 @@
+# Origin of your 4D web server (REST). The Vite dev server proxies /rest here.
+VITE_4D_ORIGIN=http://127.0.0.1:7080

package/templates/dashboard/biome.json

@@ -0,0 +1,12 @@
+{
+  "root": false,
+  "extends": "//",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": false
+  },
+  "files": {
+    "includes": ["**", "!**/node_modules", "!**/dist", "!**/.quadrokit"]
+  }
+}

package/templates/dashboard/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>QuadroKit Dashboard</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/dashboard/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@quadrokit/template-dashboard",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "quadrokit:generate": "node scripts/quadrokit-generate.mjs",
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc -b --noEmit",
+    "format": "biome format --write .",
+    "lint": "biome lint .",
+    "lint:fix": "biome lint --write .",
+    "check": "biome check .",
+    "check:fix": "biome check --write .",
+    "biome:check": "biome check .",
+    "ci:quick": "bun run format && bun run lint:fix && bun run check:fix && bun run build"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@quadrokit/client": "workspace:*",
+    "@quadrokit/sample-client": "workspace:*",
+    "@quadrokit/ui": "workspace:*",
+    "i18next": "^26.0.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-hook-form": "^7.72.0",
+    "react-i18next": "^17.0.2",
+    "react-router-dom": "^7.13.2",
+    "zod": "^4.3.6",
+    "zustand": "^5.0.12"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.4.10",
+    "@types/node": "^25.5.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "autoprefixer": "^10.4.27",
+    "postcss": "^8.5.8",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.3"
+  }
+}

package/templates/dashboard/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/templates/dashboard/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/dashboard/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/dashboard/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/dashboard/src/locales/en.json

@@ -0,0 +1,15 @@
+{
+  "app": {
+    "title": "QuadroKit",
+    "tagline": "Dashboard template — Vite, React, 4D REST, themes, i18n.",
+    "nav_home": "Home",
+    "nav_agencies": "Agencies",
+    "session_cookie": "Expected 4D session cookie: {{name}}"
+  },
+  "form": {
+    "demo_title": "react-hook-form + zod",
+    "label": "Label",
+    "placeholder": "Type something…",
+    "submit": "Submit"
+  }
+}

package/templates/dashboard/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/dashboard/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>
+  )
+}