create-davepi-ui 0.1.0

package/templates/default/src/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '@/lib/utils';
+
+export const Tabs = TabsPrimitive.Root;
+
+export const TabsList = forwardRef<
+  ElementRef<typeof TabsPrimitive.List>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(function TabsList({ className, ...props }, ref) {
+  return (
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn(
+        'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+        className
+      )}
+      {...props}
+    />
+  );
+});
+
+export const TabsTrigger = forwardRef<
+  ElementRef<typeof TabsPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(function TabsTrigger({ className, ...props }, ref) {
+  return (
+    <TabsPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+        className
+      )}
+      {...props}
+    />
+  );
+});
+
+export const TabsContent = forwardRef<
+  ElementRef<typeof TabsPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(function TabsContent({ className, ...props }, ref) {
+  return (
+    <TabsPrimitive.Content
+      ref={ref}
+      className={cn(
+        'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        className
+      )}
+      {...props}
+    />
+  );
+});

package/templates/default/src/components/ui/textarea.tsx

@@ -0,0 +1,17 @@
+import { forwardRef, type TextareaHTMLAttributes } from 'react';
+import { cn } from '@/lib/utils';
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>(
+  function Textarea({ className, ...props }, ref) {
+    return (
+      <textarea
+        ref={ref}
+        className={cn(
+          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);

package/templates/default/src/davepi-ui.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from '@davepi/ui-core';
+
+/**
+ * App-wide configuration for the davepi-ui example app shell.
+ *
+ * Per-resource overrides live in `src/resources/{path}.ts(x)` and merge
+ * deeply on top of these defaults. Inline JSX props on `<ResourceTable>`
+ * / `<ResourceForm>` win over everything.
+ */
+export default defineConfig({
+  apiBaseUrl: (import.meta.env.VITE_API_URL as string | undefined) ?? 'http://localhost:4001',
+  branding: { name: 'davepi-ui' },
+  categoryOrder: ['CRM', 'Catalogue', 'Delivery'],
+});

package/templates/default/src/index.css

@@ -0,0 +1,55 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: 'rlig' 1, 'calt' 1;
+  }
+}

package/templates/default/src/lib/utils.ts

@@ -0,0 +1,10 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Combine class names with `clsx` + `tailwind-merge` so conflicting
+ * Tailwind utilities resolve to the last-specified one.
+ */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

package/templates/default/src/main.tsx

@@ -0,0 +1,34 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { AuthProvider, ConfigProvider } from '@davepi/ui-react';
+import { App } from './App';
+import davepiConfig from './davepi-ui.config';
+import { resourceOverrides } from './resourceOverrides';
+import './index.css';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+    },
+  },
+});
+
+const root = document.getElementById('root');
+if (!root) throw new Error('Root element not found');
+
+createRoot(root).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <ConfigProvider config={davepiConfig} resourceOverrides={resourceOverrides}>
+        <AuthProvider baseUrl={davepiConfig.apiBaseUrl}>
+          <BrowserRouter>
+            <App />
+          </BrowserRouter>
+        </AuthProvider>
+      </ConfigProvider>
+    </QueryClientProvider>
+  </StrictMode>
+);

package/templates/default/src/pages/DashboardPage.tsx

@@ -0,0 +1,42 @@
+import { useDescribe } from '@davepi/ui-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
+/**
+ * Default home view. Shows a high-level breakdown of registered resources.
+ * Consumers swap this out via the per-resource override layer (M3).
+ */
+export function DashboardPage() {
+  const { data, isPending, error } = useDescribe();
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">Dashboard</h1>
+        <p className="text-sm text-muted-foreground">
+          Resources discovered from <code>/_describe</code>.
+        </p>
+      </div>
+      {isPending ? <p>Loading schema…</p> : null}
+      {error ? <p className="text-destructive">{error.message}</p> : null}
+      {data ? (
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {data.registry.paths().map((p) => {
+            const display = data.registry.display(p);
+            const entry = data.registry.get(p)!;
+            return (
+              <Card key={p}>
+                <CardHeader>
+                  <CardTitle>{display.pluralLabel}</CardTitle>
+                </CardHeader>
+                <CardContent className="text-sm text-muted-foreground">
+                  <div>Path: <code>{p}</code></div>
+                  <div>Fields: {entry.fields.length}</div>
+                  <div>Display field: <code>{display.displayField}</code></div>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/templates/default/src/pages/LoginScreen.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useState, type FormEvent } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '@davepi/ui-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
+export function LoginScreen() {
+  const { login, status } = useAuth();
+  const navigate = useNavigate();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (status === 'authenticated') navigate('/', { replace: true });
+  }, [navigate, status]);
+
+  async function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setSubmitting(true);
+    setError(null);
+    try {
+      await login(email, password);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Login failed');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Sign in to davepi</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form className="flex flex-col gap-4" onSubmit={onSubmit}>
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                autoComplete="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                type="password"
+                autoComplete="current-password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </div>
+            {error ? (
+              <p role="alert" className="text-sm text-destructive">
+                {error}
+              </p>
+            ) : null}
+            <Button type="submit" disabled={submitting}>
+              {submitting ? 'Signing in…' : 'Sign in'}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/templates/default/src/pages/ResourceCreatePage.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { useCreateResource, useDescribe } from '@davepi/ui-react';
+import { ResourceForm } from '@/components/ResourceForm';
+
+/**
+ * Create page. Accepts `?prefill_{field}={value}` URL params so a parent
+ * resource can hand the child a pre-stamped FK (used by M2 RelatedList).
+ * For M1 the FK lands as a hidden+readonly field so the create still works.
+ */
+export function ResourceCreatePage() {
+  const params = useParams<{ path: string }>();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const { data: describe } = useDescribe();
+  const path = params.path ?? '';
+  const create = useCreateResource(path);
+  const [error, setError] = useState<string | null>(null);
+
+  const display = describe?.registry.display(path);
+  const initial: Record<string, unknown> = {};
+  const hidden: string[] = [];
+  for (const [k, v] of searchParams.entries()) {
+    if (!k.startsWith('prefill_')) continue;
+    const field = k.slice('prefill_'.length);
+    initial[field] = v;
+    hidden.push(field);
+  }
+
+  return (
+    <div className="mx-auto max-w-2xl space-y-4">
+      <header>
+        <Link to={`/r/${path}`} className="text-xs text-muted-foreground hover:underline">
+          ← {display?.pluralLabel ?? path}
+        </Link>
+        <h1 className="text-2xl font-semibold tracking-tight">New {display?.label ?? path}</h1>
+      </header>
+      <ResourceForm
+        resourcePath={path}
+        initial={initial}
+        hiddenFields={hidden}
+        submitLabel={`Create ${display?.label ?? path}`}
+        serverError={error}
+        onCancel={() => navigate(`/r/${path}`)}
+        onSubmit={async (values) => {
+          setError(null);
+          try {
+            const created = await create.mutateAsync(values);
+            const id = (created as { _id?: string })._id;
+            navigate(id ? `/r/${path}/${id}` : `/r/${path}`);
+          } catch (err) {
+            setError(err instanceof Error ? err.message : 'Create failed');
+          }
+        }}
+      />
+    </div>
+  );
+}

package/templates/default/src/pages/ResourceDetailPage.tsx

@@ -0,0 +1,171 @@
+import { useState } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import { Pencil, Trash2 } from 'lucide-react';
+import {
+  useDeleteResource,
+  useDescribe,
+  useResource,
+} from '@davepi/ui-react';
+import { Button } from '@/components/ui/button';
+import { labelize } from '@davepi/ui-core';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { RelatedList } from '@/components/RelatedList';
+
+const SERVER_STAMPED = new Set(['__v', 'userId', 'accountId']);
+
+/**
+ * Schema-driven detail page.
+ *
+ * Renders fields in describe order with type-aware formatting and ships
+ * Edit + Delete actions. Every child relation (declared `hasMany`/`hasOne`
+ * plus inverse edges synthesised by `SchemaRegistry`) becomes either an
+ * embedded `<RelatedList>` (single relation) or a tab (multiple
+ * relations) so users can browse and inline-create children without
+ * leaving the parent page.
+ */
+export function ResourceDetailPage() {
+  const params = useParams<{ path: string; id: string }>();
+  const navigate = useNavigate();
+  const path = params.path ?? '';
+  const id = params.id ?? '';
+  const { data: describe } = useDescribe();
+  const record = useResource<Record<string, unknown>>(path, id);
+  const remove = useDeleteResource(path);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+
+  if (!describe) return <p>Loading…</p>;
+  const entry = describe.registry.get(path);
+  if (!entry) return <p className="text-destructive">Unknown resource: {path}</p>;
+  const display = describe.registry.display(path);
+  if (record.isPending) return <p>Loading…</p>;
+  if (record.error) return <p className="text-destructive">{record.error.message}</p>;
+  if (!record.data) return <p>Not found.</p>;
+
+  const preview = describe.registry.preview(path, record.data);
+  const visibleFields = entry.fields.filter((f) => !SERVER_STAMPED.has(f.name));
+  const childRelations = describe.registry
+    .relations(path)
+    .filter((r) => r.kind === 'hasMany' || r.kind === 'hasOne');
+
+  const detailsBlock = (
+    <section className="rounded-md border border-border bg-card">
+      <dl className="divide-y divide-border">
+        {visibleFields.map((field) => (
+          <div key={field.name} className="grid grid-cols-3 gap-4 px-4 py-3">
+            <dt className="text-sm text-muted-foreground">
+              {labelize(field.name, {
+                stripIdSuffix: field.name.endsWith('Id') && field.name !== 'Id',
+              })}
+            </dt>
+            <dd className="col-span-2 text-sm">{formatField(record.data[field.name])}</dd>
+          </div>
+        ))}
+      </dl>
+    </section>
+  );
+
+  return (
+    <div className="space-y-6">
+      <header className="flex flex-wrap items-end justify-between gap-3">
+        <div>
+          <Link to={`/r/${path}`} className="text-xs text-muted-foreground hover:underline">
+            ← {display.pluralLabel}
+          </Link>
+          <h1 className="text-2xl font-semibold tracking-tight">{preview}</h1>
+          <p className="font-mono text-xs text-muted-foreground">{id}</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button asChild variant="outline">
+            <Link to={`/r/${path}/${id}/edit`}>
+              <Pencil className="mr-1 h-4 w-4" />
+              Edit
+            </Link>
+          </Button>
+          <Button variant="destructive" onClick={() => setConfirmOpen(true)}>
+            <Trash2 className="mr-1 h-4 w-4" />
+            Delete
+          </Button>
+        </div>
+      </header>
+
+      {childRelations.length === 0 ? (
+        detailsBlock
+      ) : (
+        <Tabs defaultValue="details">
+          <TabsList>
+            <TabsTrigger value="details">Details</TabsTrigger>
+            {childRelations.map((rel) => {
+              const target = describe.registry.display(rel.target);
+              const key = `${rel.target}:${rel.foreignKey}`;
+              return (
+                <TabsTrigger key={key} value={key}>
+                  {target.pluralLabel}
+                </TabsTrigger>
+              );
+            })}
+          </TabsList>
+          <TabsContent value="details" className="mt-4">
+            {detailsBlock}
+          </TabsContent>
+          {childRelations.map((rel) => {
+            const key = `${rel.target}:${rel.foreignKey}`;
+            return (
+              <TabsContent key={key} value={key} className="mt-4">
+                <RelatedList
+                  parentPath={path}
+                  parentId={id}
+                  target={rel.target}
+                  foreignKey={rel.foreignKey}
+                />
+              </TabsContent>
+            );
+          })}
+        </Tabs>
+      )}
+
+      <Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete {display.label}?</DialogTitle>
+            <DialogDescription>
+              This action cannot be undone via the UI. Soft-deleted records can be restored from
+              the API.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setConfirmOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={async () => {
+                await remove.mutateAsync(id);
+                setConfirmOpen(false);
+                navigate(`/r/${path}`);
+              }}
+            >
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+function formatField(value: unknown): string {
+  if (value == null) return '—';
+  if (Array.isArray(value)) return value.length ? value.join(', ') : '—';
+  if (typeof value === 'boolean') return value ? 'Yes' : 'No';
+  if (value instanceof Date) return value.toLocaleString();
+  if (typeof value === 'object') return JSON.stringify(value);
+  return String(value);
+}

package/templates/default/src/pages/ResourceEditPage.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import {
+  useDescribe,
+  useResource,
+  useUpdateResource,
+} from '@davepi/ui-react';
+import { ResourceForm } from '@/components/ResourceForm';
+
+export function ResourceEditPage() {
+  const params = useParams<{ path: string; id: string }>();
+  const navigate = useNavigate();
+  const path = params.path ?? '';
+  const id = params.id ?? '';
+  const { data: describe } = useDescribe();
+  const record = useResource<Record<string, unknown>>(path, id);
+  const update = useUpdateResource(path);
+  const [error, setError] = useState<string | null>(null);
+
+  const display = describe?.registry.display(path);
+
+  if (record.isPending) return <p>Loading…</p>;
+  if (record.error) return <p className="text-destructive">{record.error.message}</p>;
+  if (!record.data) return <p className="text-muted-foreground">Not found.</p>;
+
+  return (
+    <div className="mx-auto max-w-2xl space-y-4">
+      <header>
+        <Link to={`/r/${path}/${id}`} className="text-xs text-muted-foreground hover:underline">
+          ← {describe?.registry.preview(path, record.data) ?? id}
+        </Link>
+        <h1 className="text-2xl font-semibold tracking-tight">Edit {display?.label ?? path}</h1>
+      </header>
+      <ResourceForm
+        resourcePath={path}
+        initial={record.data}
+        submitLabel="Save changes"
+        serverError={error}
+        onCancel={() => navigate(`/r/${path}/${id}`)}
+        onSubmit={async (values) => {
+          setError(null);
+          try {
+            await update.mutateAsync({ id, body: values });
+            navigate(`/r/${path}/${id}`);
+          } catch (err) {
+            setError(err instanceof Error ? err.message : 'Save failed');
+          }
+        }}
+      />
+    </div>
+  );
+}

package/templates/default/src/pages/ResourceListPage.tsx

@@ -0,0 +1,8 @@
+import { useParams } from 'react-router-dom';
+import { ResourceTable } from '@/components/ResourceTable';
+
+export function ResourceListPage() {
+  const params = useParams<{ path: string }>();
+  const path = params.path ?? '';
+  return <ResourceTable resourcePath={path} />;
+}

package/templates/default/src/resourceOverrides.ts

@@ -0,0 +1,34 @@
+import type { ResourceConfig } from '@davepi/ui-core';
+
+/**
+ * Auto-discover per-resource override files at build time via Vite's
+ * `import.meta.glob`. Consumers drop files at `src/resources/{path}.ts(x)`
+ * exporting a default `ResourceConfig`.
+ *
+ * Lives at `src/resourceOverrides.ts` (not inside `src/resources/`) so
+ * the loader file itself isn't matched by its own glob — that would
+ * pull a copy of every resource module into a self-reference and bloat
+ * the bundle.
+ *
+ * Filename → path mapping: `src/resources/account.ts` → `account`.
+ * Hyphenated paths supported (`crm-deal.ts` → `crm-deal`).
+ */
+
+interface OverrideModule {
+  default?: ResourceConfig;
+}
+
+const modules = import.meta.glob<OverrideModule>('./resources/*.{ts,tsx}', {
+  eager: true,
+});
+
+export const resourceOverrides: Record<string, ResourceConfig> = Object.fromEntries(
+  Object.entries(modules)
+    .map(([path, mod]) => {
+      const filename = path.replace(/^\.\/resources\//, '').replace(/\.(ts|tsx)$/, '');
+      const cfg = mod.default;
+      if (!cfg) return null;
+      return [filename, cfg] as const;
+    })
+    .filter((x): x is readonly [string, ResourceConfig] => x !== null)
+);

package/templates/default/src/resources/account.ts

@@ -0,0 +1,25 @@
+import type { ResourceConfig } from '@davepi/ui-core';
+
+/**
+ * Account override. Backend (`/_describe`) supplies label / pluralLabel
+ * / displayField, so this file only carries the bits the backend can't
+ * know about: sidebar category, table columns, bulk actions.
+ */
+const config: ResourceConfig = {
+  category: 'CRM',
+  listColumns: [
+    { field: 'accountName', label: 'Account name' },
+    { field: 'description', label: 'Notes' },
+  ],
+  actions: {
+    bulk: [
+      {
+        id: 'bulk-delete',
+        label: 'Delete selected',
+        kind: 'bulkDelete',
+      },
+    ],
+  },
+};
+
+export default config;

package/templates/default/src/resources/category.ts

@@ -0,0 +1,7 @@
+import type { ResourceConfig } from '@davepi/ui-core';
+
+const config: ResourceConfig = {
+  category: 'Catalogue',
+};
+
+export default config;