@mettlecast/domain-cli 0.2.0

package/dist/templates/patterns/migration/tenant-scoped-table.js

@@ -0,0 +1,81 @@
+/**
+ * Tenant-scoped-table migration pattern template.
+ * Produces: CREATE TABLE with tenancy trio (tenant_id, workspace_id, org_id),
+ * RLS policy, updated_at trigger, and standard indexes.
+ */
+export function tenantScopedTableTemplate(domain, name) {
+    const tableName = name.replace(/-/g, '_');
+    const timestamp = new Date().toISOString().replace(/[-:T.]/g, '').slice(0, 14);
+    return `-- Migration: ${timestamp}_${name}
+-- Domain: ${domain}
+-- Pattern: tenant-scoped-table
+-- Creates a tenant-scoped table with RLS, audit columns, and updated_at trigger.
+
+CREATE TABLE IF NOT EXISTS ${tableName} (
+  id          UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  tenant_id   UUID NOT NULL,
+  workspace_id UUID,
+  org_id      UUID,
+
+  -- Domain-specific columns
+  name        VARCHAR(255) NOT NULL,
+  status      VARCHAR(50) NOT NULL DEFAULT 'active',
+  metadata    JSONB DEFAULT '{}'::jsonb,
+
+  -- Audit columns
+  created_at  TIMESTAMPTZ NOT NULL DEFAULT now(),
+  updated_at  TIMESTAMPTZ NOT NULL DEFAULT now(),
+  created_by  UUID,
+  updated_by  UUID,
+  deleted_at  TIMESTAMPTZ
+);
+
+-- ── Indexes ──────────────────────────────────────────────────
+
+CREATE INDEX IF NOT EXISTS idx_${tableName}_tenant_id
+  ON ${tableName}(tenant_id);
+
+CREATE INDEX IF NOT EXISTS idx_${tableName}_workspace_id
+  ON ${tableName}(workspace_id)
+  WHERE workspace_id IS NOT NULL;
+
+CREATE INDEX IF NOT EXISTS idx_${tableName}_status
+  ON ${tableName}(tenant_id, status);
+
+CREATE INDEX IF NOT EXISTS idx_${tableName}_created_at
+  ON ${tableName}(created_at DESC);
+
+-- ── Row-Level Security ───────────────────────────────────────
+
+ALTER TABLE ${tableName} ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY ${tableName}_tenant_isolation
+  ON ${tableName}
+  FOR ALL
+  TO authenticated
+  USING (tenant_id = current_setting('app.current_tenant_id')::UUID);
+
+-- ── Updated-at trigger ───────────────────────────────────────
+
+CREATE OR REPLACE FUNCTION update_${tableName}_updated_at()
+RETURNS TRIGGER AS $$
+BEGIN
+  NEW.updated_at = now();
+  RETURN NEW;
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE TRIGGER trg_${tableName}_updated_at
+  BEFORE UPDATE ON ${tableName}
+  FOR EACH ROW
+  EXECUTE FUNCTION update_${tableName}_updated_at();
+
+-- ── Soft-delete policy ───────────────────────────────────────
+
+CREATE POLICY ${tableName}_soft_delete
+  ON ${tableName}
+  FOR SELECT
+  TO authenticated
+  USING (deleted_at IS NULL);
+`;
+}

package/dist/templates/patterns/page/dashboard.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Dashboard page pattern template — dashboard page with widget grid layout.
+ */
+export declare function dashboardPageTemplate(pageName: string): string;

package/dist/templates/patterns/page/dashboard.js

@@ -0,0 +1,164 @@
+/**
+ * Dashboard page pattern template — dashboard page with widget grid layout.
+ */
+export function dashboardPageTemplate(pageName) {
+    const componentName = `${pageName}Page`;
+    return `import { useQuery } from '@tanstack/react-query';
+import { useTib } from '@/hooks/useTib';
+import { Page } from '@/components/layout/Page';
+import { PageHeader } from '@/components/layout/PageHeader';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { ErrorState } from '@/components/state/ErrorState';
+import { LoadingState } from '@/components/state/LoadingState';
+import { EmptyState } from '@/components/state/EmptyState';
+import { BarChart3, Activity, Users, Clock } from 'lucide-react';
+
+interface ${componentName}Props {
+  workspaceId: string;
+}
+
+interface DashboardStats {
+  totalItems: number;
+  activeItems: number;
+  recentActivity: number;
+  avgCompletion: string;
+}
+
+interface RecentItem {
+  id: string;
+  name: string;
+  status: string;
+  updatedAt: string;
+}
+
+export function ${componentName}({ workspaceId }: ${componentName}Props) {
+  const tib = useTib();
+
+  const { data: stats, isLoading: statsLoading, isError: statsError, refetch: refetchStats } = useQuery({
+    queryKey: ['dashboard-stats', workspaceId],
+    queryFn: () => tib.dashboard.get() as Promise<DashboardStats>,
+    staleTime: 30_000,
+  });
+
+  const { data: recent, isLoading: recentLoading } = useQuery({
+    queryKey: ['dashboard-recent', workspaceId],
+    queryFn: () => tib.data.list({ workspaceId, limit: 5 }) as Promise<{ items: RecentItem[] }>,
+    staleTime: 30_000,
+  });
+
+  const isLoading = statsLoading || recentLoading;
+
+  return (
+    <Page title="Dashboard" description="Overview of your workspace">
+      <Page.Header
+        breadcrumb={[{ label: '${pageName}' }]}
+      />
+      <Page.Body>
+        {statsError ? (
+          <ErrorState
+            message="Failed to load dashboard data"
+            onRetry={() => refetchStats()}
+          />
+        ) : isLoading ? (
+          <LoadingState variant="page" />
+        ) : !stats ? (
+          <EmptyState
+            icon={BarChart3}
+            title="No data yet"
+            description="Start creating items to see your dashboard."
+          />
+        ) : (
+          <div className="space-y-6">
+            {/* Stat cards grid */}
+            <div className="layout-cards">
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between pb-2">
+                  <CardTitle className="text-sm font-medium text-muted-foreground">
+                    Total Items
+                  </CardTitle>
+                  <BarChart3 className="h-4 w-4 text-muted-foreground" />
+                </CardHeader>
+                <CardContent>
+                  <p className="text-2xl font-semibold">{stats.totalItems}</p>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between pb-2">
+                  <CardTitle className="text-sm font-medium text-muted-foreground">
+                    Active
+                  </CardTitle>
+                  <Activity className="h-4 w-4 text-muted-foreground" />
+                </CardHeader>
+                <CardContent>
+                  <p className="text-2xl font-semibold">{stats.activeItems}</p>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between pb-2">
+                  <CardTitle className="text-sm font-medium text-muted-foreground">
+                    Recent Activity
+                  </CardTitle>
+                  <Users className="h-4 w-4 text-muted-foreground" />
+                </CardHeader>
+                <CardContent>
+                  <p className="text-2xl font-semibold">{stats.recentActivity}</p>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between pb-2">
+                  <CardTitle className="text-sm font-medium text-muted-foreground">
+                    Avg Completion
+                  </CardTitle>
+                  <Clock className="h-4 w-4 text-muted-foreground" />
+                </CardHeader>
+                <CardContent>
+                  <p className="text-2xl font-semibold">{stats.avgCompletion}</p>
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* Recent items */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-lg font-semibold">Recent Items</CardTitle>
+              </CardHeader>
+              <CardContent>
+                {!recent?.items?.length ? (
+                  <EmptyState
+                    icon={BarChart3}
+                    title="No recent items"
+                    description="Items you create will appear here."
+                  />
+                ) : (
+                  <div className="space-y-3">
+                    {recent.items.map((item) => (
+                      <div
+                        key={item.id}
+                        className="flex items-center justify-between rounded-lg border border-border p-3"
+                      >
+                        <div>
+                          <p className="text-sm font-medium">{item.name}</p>
+                          <p className="text-xs text-muted-foreground">
+                            Updated {new Date(item.updatedAt).toLocaleDateString()}
+                          </p>
+                        </div>
+                        <span className="text-xs text-muted-foreground">{item.status}</span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+        )}
+      </Page.Body>
+    </Page>
+  );
+}
+
+export default ${componentName};
+`;
+}

package/dist/templates/patterns/page/detail.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Detail page pattern template — single entity detail page with tabs for related data.
+ */
+export declare function detailPageTemplate(pageName: string): string;

package/dist/templates/patterns/page/detail.js

@@ -0,0 +1,162 @@
+/**
+ * Detail page pattern template — single entity detail page with tabs for related data.
+ */
+export function detailPageTemplate(pageName) {
+    const componentName = `${pageName}Page`;
+    return `import { useSearchParams } from 'react-router-dom';
+import { ArrowLeft, Pencil, Trash2 } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
+import { useTib } from '@/hooks/useTib';
+import { Page } from '@/components/layout/Page';
+import { PageHeader } from '@/components/layout/PageHeader';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { ErrorState } from '@/components/state/ErrorState';
+import { LoadingState } from '@/components/state/LoadingState';
+import { EmptyState } from '@/components/state/EmptyState';
+import { useNavigate } from 'react-router-dom';
+
+interface ${componentName}Props {
+  workspaceId: string;
+  entityId: string;
+}
+
+interface EntityDetail {
+  id: string;
+  name: string;
+  status: string;
+  description?: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export function ${componentName}({ workspaceId, entityId }: ${componentName}Props) {
+  const tib = useTib();
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const activeTab = searchParams.get('tab') ?? 'overview';
+
+  const { data, isLoading, isError, error, refetch } = useQuery({
+    queryKey: ['entity-detail', workspaceId, entityId],
+    queryFn: () => tib.data.get({ workspaceId, id: entityId }) as Promise<EntityDetail>,
+    staleTime: 10_000,
+    enabled: !!entityId,
+  });
+
+  const setTab = (tab: string) => setSearchParams({ tab });
+
+  return (
+    <Page title={data?.name ?? 'Detail'} description={data?.description ?? 'View entity details'}>
+      <Page.Header
+        breadcrumb={[
+          { label: '${pageName}', to: '..' },
+          { label: data?.name ?? entityId },
+        ]}
+        status={data && (
+          <Badge variant={data.status === 'active' ? 'success' : 'neutral'}>
+            {data.status}
+          </Badge>
+        )}
+        actions={
+          <>
+            <Button variant="outline" size="sm" onClick={() => navigate(-1)}>
+              <ArrowLeft className="h-4 w-4 mr-1" />
+              Back
+            </Button>
+            <Button variant="outline" size="sm">
+              <Pencil className="h-4 w-4 mr-1" />
+              Edit
+            </Button>
+            <Button variant="destructive" size="sm">
+              <Trash2 className="h-4 w-4 mr-1" />
+              Delete
+            </Button>
+          </>
+        }
+      />
+      <Page.Tabs items={[
+        { value: 'overview', label: 'Overview', to: 'overview' },
+        { value: 'related', label: 'Related', to: 'related' },
+        { value: 'activity', label: 'Activity', to: 'activity' },
+      ]} />
+      <Page.Body>
+        {isLoading ? (
+          <LoadingState variant="page" />
+        ) : isError ? (
+          <ErrorState
+            message={error instanceof Error ? error.message : 'Failed to load entity'}
+            onRetry={() => refetch()}
+          />
+        ) : !data ? (
+          <EmptyState
+            icon={Pencil}
+            title="Entity not found"
+            description="The requested entity could not be found."
+          />
+        ) : (
+          <Tabs value={activeTab} onValueChange={setTab}>
+            <TabsContent value="overview">
+              <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="text-lg font-semibold">Details</CardTitle>
+                  </CardHeader>
+                  <CardContent className="space-y-3">
+                    <div>
+                      <p className="text-sm text-muted-foreground">Name</p>
+                      <p className="text-sm font-medium">{data.name}</p>
+                    </div>
+                    <div>
+                      <p className="text-sm text-muted-foreground">Status</p>
+                      <Badge variant={data.status === 'active' ? 'success' : 'neutral'}>
+                        {data.status}
+                      </Badge>
+                    </div>
+                    <div>
+                      <p className="text-sm text-muted-foreground">Created</p>
+                      <p className="text-sm">{new Date(data.createdAt).toLocaleDateString()}</p>
+                    </div>
+                    <div>
+                      <p className="text-sm text-muted-foreground">Updated</p>
+                      <p className="text-sm">{new Date(data.updatedAt).toLocaleDateString()}</p>
+                    </div>
+                  </CardContent>
+                </Card>
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="text-lg font-semibold">Description</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <p className="text-sm text-muted-foreground">
+                      {data.description ?? 'No description provided.'}
+                    </p>
+                  </CardContent>
+                </Card>
+              </div>
+            </TabsContent>
+            <TabsContent value="related">
+              <EmptyState
+                icon={Pencil}
+                title="No related data"
+                description="Related items will appear here."
+              />
+            </TabsContent>
+            <TabsContent value="activity">
+              <EmptyState
+                icon={Pencil}
+                title="No recent activity"
+                description="Activity for this entity will appear here."
+              />
+            </TabsContent>
+          </Tabs>
+        )}
+      </Page.Body>
+    </Page>
+  );
+}
+
+export default ${componentName};
+`;
+}

package/dist/templates/patterns/page/form.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Form page pattern template — create/edit form with Zod validation.
+ */
+export declare function formPageTemplate(pageName: string): string;

package/dist/templates/patterns/page/form.js

@@ -0,0 +1,192 @@
+/**
+ * Form page pattern template — create/edit form with Zod validation.
+ */
+export function formPageTemplate(pageName) {
+    const componentName = `${pageName}Page`;
+    return `import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useNavigate } from 'react-router-dom';
+import { ArrowLeft, Save } from 'lucide-react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useTib } from '@/hooks/useTib';
+import { Page } from '@/components/layout/Page';
+import { PageHeader } from '@/components/layout/PageHeader';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { ErrorState } from '@/components/state/ErrorState';
+import { LoadingState } from '@/components/state/LoadingState';
+import { toast } from 'sonner';
+
+const formSchema = z.object({
+  name: z.string().min(1, 'Name is required').max(100, 'Name must be 100 characters or less'),
+  description: z.string().max(500).optional(),
+  status: z.enum(['active', 'inactive']),
+  type: z.string().min(1, 'Type is required'),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+interface ${componentName}Props {
+  workspaceId: string;
+  entityId?: string; // undefined = create mode, defined = edit mode
+}
+
+export function ${componentName}({ workspaceId, entityId }: ${componentName}Props) {
+  const tib = useTib();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const isEdit = !!entityId;
+
+  const { data: existing, isLoading: isLoadingExisting } = useQuery({
+    queryKey: ['entity-detail', workspaceId, entityId],
+    queryFn: () => tib.data.get({ workspaceId, id: entityId! }) as Promise<FormValues>,
+    enabled: isEdit,
+    staleTime: 30_000,
+  });
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    setValue,
+    watch,
+  } = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: '',
+      description: '',
+      status: 'active',
+      type: '',
+    },
+    values: existing,
+  });
+
+  const mutation = useMutation({
+    mutationFn: (values: FormValues) =>
+      isEdit
+        ? tib.data.update({ workspaceId, id: entityId!, ...values })
+        : tib.data.create({ workspaceId, ...values }),
+    onSuccess: () => {
+      toast.success(isEdit ? '\${pageName} updated' : '\${pageName} created');
+      queryClient.invalidateQueries({ queryKey: ['data-list', workspaceId] });
+      navigate('..');
+    },
+    onError: (err) => {
+      toast.error('Failed to save', {
+        description: err instanceof Error ? err.message : 'Unknown error',
+      });
+    },
+  });
+
+  const onSubmit = (values: FormValues) => mutation.mutate(values);
+
+  if (isEdit && isLoadingExisting) {
+    return <LoadingState variant="page" />;
+  }
+
+  return (
+    <Page title={isEdit ? 'Edit ${pageName}' : 'Create ${pageName}'} description={isEdit ? 'Update existing entity' : 'Add a new entity'}>
+      <Page.Header
+        breadcrumb={[
+          { label: '${pageName}', to: '..' },
+          { label: isEdit ? 'Edit' : 'Create' },
+        ]}
+        actions={
+          <Button variant="outline" size="sm" onClick={() => navigate(-1)}>
+            <ArrowLeft className="h-4 w-4 mr-1" />
+            Back
+          </Button>
+        }
+      />
+      <Page.Body>
+        <form onSubmit={handleSubmit(onSubmit)} className="max-w-2xl space-y-6">
+          <div className="space-y-2">
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              {...register('name')}
+              placeholder="Enter name"
+              aria-invalid={!!errors.name}
+              aria-describedby={errors.name ? 'name-error' : undefined}
+            />
+            {errors.name && (
+              <p id="name-error" className="text-xs text-destructive">{errors.name.message}</p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="description">Description</Label>
+            <Textarea
+              id="description"
+              {...register('description')}
+              placeholder="Optional description"
+              rows={3}
+            />
+            {errors.description && (
+              <p className="text-xs text-destructive">{errors.description.message}</p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="type">Type</Label>
+            <Input
+              id="type"
+              {...register('type')}
+              placeholder="Enter type"
+              aria-invalid={!!errors.type}
+              aria-describedby={errors.type ? 'type-error' : undefined}
+            />
+            {errors.type && (
+              <p id="type-error" className="text-xs text-destructive">{errors.type.message}</p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="status">Status</Label>
+            <Select
+              value={watch('status')}
+              onValueChange={(value) => setValue('status', value as 'active' | 'inactive')}
+            >
+              <SelectTrigger id="status">
+                <SelectValue placeholder="Select status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="active">Active</SelectItem>
+                <SelectItem value="inactive">Inactive</SelectItem>
+              </SelectContent>
+            </Select>
+            {errors.status && (
+              <p className="text-xs text-destructive">{errors.status.message}</p>
+            )}
+          </div>
+
+          <div className="flex items-center gap-3 pt-4">
+            <Button
+              type="submit"
+              variant="teal"
+              disabled={isSubmitting || mutation.isPending}
+            >
+              <Save className="h-4 w-4 mr-1" />
+              {mutation.isPending ? 'Saving...' : isEdit ? 'Update' : 'Create'}
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => navigate(-1)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </Page.Body>
+    </Page>
+  );
+}
+
+export default ${componentName};
+`;
+}

package/dist/templates/patterns/page/index.d.ts

@@ -0,0 +1,8 @@
+export { listPageTemplate } from './list.js';
+export { detailPageTemplate } from './detail.js';
+export { formPageTemplate } from './form.js';
+export { wizardPageTemplate } from './wizard.js';
+export { dashboardPageTemplate } from './dashboard.js';
+export { settingsPageTemplate } from './settings.js';
+export type PagePattern = 'list' | 'detail' | 'form' | 'wizard' | 'dashboard' | 'settings';
+export declare const PAGE_PATTERNS: readonly PagePattern[];

package/dist/templates/patterns/page/index.js

@@ -0,0 +1,14 @@
+export { listPageTemplate } from './list.js';
+export { detailPageTemplate } from './detail.js';
+export { formPageTemplate } from './form.js';
+export { wizardPageTemplate } from './wizard.js';
+export { dashboardPageTemplate } from './dashboard.js';
+export { settingsPageTemplate } from './settings.js';
+export const PAGE_PATTERNS = [
+    'list',
+    'detail',
+    'form',
+    'wizard',
+    'dashboard',
+    'settings',
+];

package/dist/templates/patterns/page/list.d.ts

@@ -0,0 +1,4 @@
+/**
+ * List page pattern template — data table page with pagination, sorting, filtering.
+ */
+export declare function listPageTemplate(pageName: string): string;