@mettlecast/domain-cli 0.2.0

package/src/templates/patterns/page/detail.ts

@@ -0,0 +1,162 @@
+/**
+ * Detail page pattern template — single entity detail page with tabs for related data.
+ */
+export function detailPageTemplate(pageName: string): string {
+  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/src/templates/patterns/page/form.ts

@@ -0,0 +1,192 @@
+/**
+ * Form page pattern template — create/edit form with Zod validation.
+ */
+export function formPageTemplate(pageName: string): string {
+  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/src/templates/patterns/page/index.ts

@@ -0,0 +1,17 @@
+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 const PAGE_PATTERNS: readonly PagePattern[] = [
+  'list',
+  'detail',
+  'form',
+  'wizard',
+  'dashboard',
+  'settings',
+] as const;

package/src/templates/patterns/page/list.ts

@@ -0,0 +1,138 @@
+/**
+ * List page pattern template — data table page with pagination, sorting, filtering.
+ */
+export function listPageTemplate(pageName: string): string {
+  const componentName = `${pageName}Page`;
+  return `import { useState, useCallback } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { Plus, Search, Filter } 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 { DataTable } from '@/components/data/DataTable';
+import { FilterBar } from '@/components/data/FilterBar';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { EmptyState } from '@/components/state/EmptyState';
+import { ErrorState } from '@/components/state/ErrorState';
+import { LoadingState } from '@/components/state/LoadingState';
+import type { ColumnDef } from '@tanstack/react-table';
+
+interface ${componentName}Props {
+  workspaceId: string;
+}
+
+interface DataItem {
+  id: string;
+  name: string;
+  status: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+const FILTER_DEFS = [
+  { key: 'status', label: 'Status', type: 'select' as const, options: [
+    { value: 'active', label: 'Active' },
+    { value: 'inactive', label: 'Inactive' },
+  ]},
+  { key: 'search', label: 'Search', type: 'text' as const },
+];
+
+const COLUMNS: ColumnDef<DataItem>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    enableSorting: true,
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    enableSorting: true,
+  },
+  {
+    accessorKey: 'createdAt',
+    header: 'Created',
+    enableSorting: true,
+  },
+  {
+    accessorKey: 'updatedAt',
+    header: 'Updated',
+    enableSorting: true,
+  },
+];
+
+export function ${componentName}({ workspaceId }: ${componentName}Props) {
+  const tib = useTib();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [filters, setFilters] = useState<Record<string, string | string[]>>({});
+
+  const { data, isLoading, isError, error, refetch } = useQuery({
+    queryKey: ['data-list', workspaceId, filters],
+    queryFn: () => tib.data.list({ workspaceId, ...filters }),
+    staleTime: 10_000,
+  });
+
+  const handleFilterChange = useCallback((next: Record<string, string | string[]>) => {
+    setFilters(next);
+    const params = new URLSearchParams();
+    for (const [key, value] of Object.entries(next)) {
+      if (Array.isArray(value)) {
+        params.set(key, value.join(','));
+      } else if (value) {
+        params.set(key, value);
+      }
+    }
+    setSearchParams(params, { replace: true });
+  }, [setSearchParams]);
+
+  return (
+    <Page title="${pageName}" description="Browse and manage your data">
+      <Page.Header
+        breadcrumb={[{ label: '${pageName}' }]}
+        actions={
+          <Button variant="teal" size="sm">
+            <Plus className="h-4 w-4 mr-1" />
+            New item
+          </Button>
+        }
+      />
+      <Page.Body>
+        <FilterBar
+          filters={FILTER_DEFS}
+          value={filters}
+          onChange={handleFilterChange}
+          className="mb-4"
+        />
+        {isLoading ? (
+          <LoadingState variant="page" />
+        ) : isError ? (
+          <ErrorState
+            message={error instanceof Error ? error.message : 'Failed to load data'}
+            onRetry={() => refetch()}
+          />
+        ) : !data?.items?.length ? (
+          <EmptyState
+            icon={Search}
+            title="No items found"
+            description="Create your first item to get started."
+            cta={<Button variant="teal">Create item</Button>}
+          />
+        ) : (
+          <DataTable
+            columns={COLUMNS}
+            data={data.items}
+            onRowClick={(row) => {/* navigate to detail */}}
+          />
+        )}
+      </Page.Body>
+      <Page.Footer>
+        {/* Pagination component goes here */}
+      </Page.Footer>
+    </Page>
+  );
+}
+
+export default ${componentName};
+`;
+}