@mettlecast/domain-cli 0.2.0

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

@@ -0,0 +1,318 @@
+/**
+ * Settings page pattern template — settings page with tabs (profile, security, notifications).
+ */
+export function settingsPageTemplate(pageName: string): string {
+  const componentName = `${pageName}Page`;
+  return `import { useState, useCallback } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Save, User, Shield, Bell } 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 { Switch } from '@/components/ui/switch';
+import { Card, CardContent, CardDescription, 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 { toast } from 'sonner';
+
+const profileSchema = z.object({
+  displayName: z.string().min(1, 'Display name is required'),
+  email: z.string().email('Invalid email'),
+});
+
+const securitySchema = z.object({
+  mfaEnabled: z.boolean(),
+  sessionTimeout: z.string(),
+});
+
+const notificationsSchema = z.object({
+  emailAlerts: z.boolean(),
+  pushNotifications: z.boolean(),
+  weeklyDigest: z.boolean(),
+});
+
+type ProfileValues = z.infer<typeof profileSchema>;
+type SecurityValues = z.infer<typeof securitySchema>;
+type NotificationsValues = z.infer<typeof notificationsSchema>;
+
+interface ${componentName}Props {
+  workspaceId: string;
+}
+
+export function ${componentName}({ workspaceId }: ${componentName}Props) {
+  const tib = useTib();
+  const queryClient = useQueryClient();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const activeTab = searchParams.get('tab') ?? 'profile';
+
+  const { data: settings, isLoading, isError, refetch } = useQuery({
+    queryKey: ['settings', workspaceId],
+    queryFn: () => tib.settings.getProject({ projectShortcode: workspaceId }) as Promise<{
+      displayName: string;
+      email: string;
+      mfaEnabled: boolean;
+      sessionTimeout: string;
+      emailAlerts: boolean;
+      pushNotifications: boolean;
+      weeklyDigest: boolean;
+    }>,
+    staleTime: 60_000,
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: (values: Record<string, unknown>) =>
+      tib.settings.updateProject({ projectShortcode: workspaceId, ...values }),
+    onSuccess: () => {
+      toast.success('Settings saved');
+      queryClient.invalidateQueries({ queryKey: ['settings', workspaceId] });
+    },
+    onError: (err) => {
+      toast.error('Failed to save settings', {
+        description: err instanceof Error ? err.message : 'Unknown error',
+      });
+    },
+  });
+
+  const setTab = (tab: string) => setSearchParams({ tab });
+
+  return (
+    <Page title="Settings" description="Manage your account and preferences">
+      <Page.Header
+        breadcrumb={[{ label: '${pageName}' }]}
+      />
+      <Page.Tabs items={[
+        { value: 'profile', label: 'Profile', to: 'profile' },
+        { value: 'security', label: 'Security', to: 'security' },
+        { value: 'notifications', label: 'Notifications', to: 'notifications' },
+      ]} />
+      <Page.Body>
+        {isLoading ? (
+          <LoadingState variant="page" />
+        ) : isError ? (
+          <ErrorState
+            message="Failed to load settings"
+            onRetry={() => refetch()}
+          />
+        ) : (
+          <Tabs value={activeTab} onValueChange={setTab}>
+            <TabsContent value="profile">
+              <SettingsProfileForm
+                defaultValues={settings}
+                onSave={(values) => updateMutation.mutate(values)}
+                isSaving={updateMutation.isPending}
+              />
+            </TabsContent>
+            <TabsContent value="security">
+              <SettingsSecurityForm
+                defaultValues={settings}
+                onSave={(values) => updateMutation.mutate(values)}
+                isSaving={updateMutation.isPending}
+              />
+            </TabsContent>
+            <TabsContent value="notifications">
+              <SettingsNotificationsForm
+                defaultValues={settings}
+                onSave={(values) => updateMutation.mutate(values)}
+                isSaving={updateMutation.isPending}
+              />
+            </TabsContent>
+          </Tabs>
+        )}
+      </Page.Body>
+    </Page>
+  );
+}
+
+function SettingsProfileForm({
+  defaultValues,
+  onSave,
+  isSaving,
+}: {
+  defaultValues?: ProfileValues;
+  onSave: (values: ProfileValues) => void;
+  isSaving: boolean;
+}) {
+  const { register, handleSubmit, formState: { errors } } = useForm<ProfileValues>({
+    resolver: zodResolver(profileSchema),
+    defaultValues: defaultValues ?? { displayName: '', email: '' },
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSave)} className="max-w-xl space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <User className="h-5 w-5" />
+            Profile
+          </CardTitle>
+          <CardDescription>Update your profile information.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="displayName">Display Name</Label>
+            <Input
+              id="displayName"
+              {...register('displayName')}
+              aria-invalid={!!errors.displayName}
+            />
+            {errors.displayName && (
+              <p className="text-xs text-destructive">{errors.displayName.message}</p>
+            )}
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              {...register('email')}
+              aria-invalid={!!errors.email}
+            />
+            {errors.email && (
+              <p className="text-xs text-destructive">{errors.email.message}</p>
+            )}
+          </div>
+          <Button type="submit" variant="teal" disabled={isSaving}>
+            <Save className="h-4 w-4 mr-1" />
+            {isSaving ? 'Saving...' : 'Save'}
+          </Button>
+        </CardContent>
+      </Card>
+    </form>
+  );
+}
+
+function SettingsSecurityForm({
+  defaultValues,
+  onSave,
+  isSaving,
+}: {
+  defaultValues?: SecurityValues;
+  onSave: (values: SecurityValues) => void;
+  isSaving: boolean;
+}) {
+  const { register, handleSubmit, setValue, watch } = useForm<SecurityValues>({
+    defaultValues: defaultValues ?? { mfaEnabled: false, sessionTimeout: '3600' },
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSave)} className="max-w-xl space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Shield className="h-5 w-5" />
+            Security
+          </CardTitle>
+          <CardDescription>Manage your security settings.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <Label htmlFor="mfaEnabled">Two-Factor Authentication</Label>
+              <p className="text-xs text-muted-foreground">Require MFA for login.</p>
+            </div>
+            <Switch
+              id="mfaEnabled"
+              checked={watch('mfaEnabled')}
+              onCheckedChange={(checked) => setValue('mfaEnabled', checked)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="sessionTimeout">Session Timeout (seconds)</Label>
+            <Input
+              id="sessionTimeout"
+              {...register('sessionTimeout')}
+              type="number"
+            />
+          </div>
+          <Button type="submit" variant="teal" disabled={isSaving}>
+            <Save className="h-4 w-4 mr-1" />
+            {isSaving ? 'Saving...' : 'Save'}
+          </Button>
+        </CardContent>
+      </Card>
+    </form>
+  );
+}
+
+function SettingsNotificationsForm({
+  defaultValues,
+  onSave,
+  isSaving,
+}: {
+  defaultValues?: NotificationsValues;
+  onSave: (values: NotificationsValues) => void;
+  isSaving: boolean;
+}) {
+  const { handleSubmit, setValue, watch } = useForm<NotificationsValues>({
+    defaultValues: defaultValues ?? {
+      emailAlerts: true,
+      pushNotifications: false,
+      weeklyDigest: true,
+    },
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSave)} className="max-w-xl space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Bell className="h-5 w-5" />
+            Notifications
+          </CardTitle>
+          <CardDescription>Configure how you receive notifications.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <Label htmlFor="emailAlerts">Email Alerts</Label>
+              <p className="text-xs text-muted-foreground">Receive email notifications.</p>
+            </div>
+            <Switch
+              id="emailAlerts"
+              checked={watch('emailAlerts')}
+              onCheckedChange={(checked) => setValue('emailAlerts', checked)}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <Label htmlFor="pushNotifications">Push Notifications</Label>
+              <p className="text-xs text-muted-foreground">Receive push notifications.</p>
+            </div>
+            <Switch
+              id="pushNotifications"
+              checked={watch('pushNotifications')}
+              onCheckedChange={(checked) => setValue('pushNotifications', checked)}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <Label htmlFor="weeklyDigest">Weekly Digest</Label>
+              <p className="text-xs text-muted-foreground">Receive a weekly summary email.</p>
+            </div>
+            <Switch
+              id="weeklyDigest"
+              checked={watch('weeklyDigest')}
+              onCheckedChange={(checked) => setValue('weeklyDigest', checked)}
+            />
+          </div>
+          <Button type="submit" variant="teal" disabled={isSaving}>
+            <Save className="h-4 w-4 mr-1" />
+            {isSaving ? 'Saving...' : 'Save'}
+          </Button>
+        </CardContent>
+      </Card>
+    </form>
+  );
+}
+
+export default ${componentName};
+`;
+}

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

@@ -0,0 +1,293 @@
+/**
+ * Wizard page pattern template — multi-step form with progress bar.
+ */
+export function wizardPageTemplate(pageName: string): string {
+  const componentName = `${pageName}Page`;
+  return `import { useState, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { ArrowLeft, ArrowRight, Check, Save } from 'lucide-react';
+import { useMutation, 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 { Progress } from '@/components/ui/progress';
+import { toast } from 'sonner';
+
+interface ${componentName}Props {
+  workspaceId: string;
+}
+
+/** Steps definition */
+const STEPS = [
+  { id: 'basics', label: 'Basics', description: 'Basic information' },
+  { id: 'details', label: 'Details', description: 'Additional details' },
+  { id: 'review', label: 'Review', description: 'Review and confirm' },
+] as const;
+
+type StepId = (typeof STEPS)[number]['id'];
+
+/** Full form schema across all steps */
+const wizardSchema = z.object({
+  name: z.string().min(1, 'Name is required'),
+  description: z.string().optional(),
+  type: z.string().min(1, 'Type is required'),
+  status: z.enum(['active', 'inactive']),
+  notes: z.string().optional(),
+});
+
+type WizardValues = z.infer<typeof wizardSchema>;
+
+export function ${componentName}({ workspaceId }: ${componentName}Props) {
+  const tib = useTib();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const [currentStep, setCurrentStep] = useState<number>(0);
+  const [completedSteps, setCompletedSteps] = useState<Set<number>>(new Set([0]));
+
+  const form = useForm<WizardValues>({
+    resolver: zodResolver(wizardSchema),
+    defaultValues: {
+      name: '',
+      description: '',
+      type: '',
+      status: 'active',
+      notes: '',
+    },
+    mode: 'onChange',
+  });
+
+  const { register, handleSubmit, formState: { errors }, setValue, watch, trigger } = form;
+
+  const mutation = useMutation({
+    mutationFn: (values: WizardValues) =>
+      tib.data.create({ workspaceId, ...values }),
+    onSuccess: () => {
+      toast.success('\${pageName} created successfully');
+      queryClient.invalidateQueries({ queryKey: ['data-list', workspaceId] });
+      navigate('..');
+    },
+    onError: (err) => {
+      toast.error('Failed to create', {
+        description: err instanceof Error ? err.message : 'Unknown error',
+      });
+    },
+  });
+
+  const progress = ((completedSteps.size) / STEPS.length) * 100;
+
+  const isFirstStep = currentStep === 0;
+  const isLastStep = currentStep === STEPS.length - 1;
+
+  const goNext = useCallback(async () => {
+    const fieldsToValidate = getFieldsForStep(currentStep);
+    const valid = await trigger(fieldsToValidate);
+    if (valid) {
+      const next = currentStep + 1;
+      setCompletedSteps(prev => new Set([...prev, next]));
+      setCurrentStep(next);
+    }
+  }, [currentStep, trigger]);
+
+  const goBack = useCallback(() => {
+    setCurrentStep(prev => Math.max(0, prev - 1));
+  }, []);
+
+  const onSubmit = (values: WizardValues) => mutation.mutate(values);
+
+  return (
+    <Page title="Create ${pageName}" description="Follow the steps to create a new entity">
+      <Page.Header
+        breadcrumb={[
+          { label: '${pageName}', to: '..' },
+          { label: 'Create' },
+        ]}
+      />
+      <Page.Body>
+        <div className="max-w-2xl mx-auto">
+          {/* Progress bar */}
+          <div className="mb-8">
+            <Progress value={progress} className="h-2" />
+            <div className="flex justify-between mt-2">
+              {STEPS.map((step, idx) => (
+                <div
+                  key={step.id}
+                  className={[
+                    'flex items-center gap-2 text-sm',
+                    idx <= currentStep ? 'text-primary' : 'text-muted-foreground',
+                  ].join(' ')}
+                >
+                  <span className={[
+                    'flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium',
+                    completedSteps.has(idx)
+                      ? 'bg-primary text-primary-foreground'
+                      : 'border border-muted-foreground text-muted-foreground',
+                  ].join(' ')}>
+                    {completedSteps.has(idx) ? <Check className="h-3 w-3" /> : idx + 1}
+                  </span>
+                  <span className="hidden sm:inline">{step.label}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            {/* Step 1: Basics */}
+            {currentStep === 0 && (
+              <div className="space-y-4">
+                <h2 className="text-lg font-semibold">Basic Information</h2>
+                <div className="space-y-2">
+                  <Label htmlFor="name">Name</Label>
+                  <Input
+                    id="name"
+                    {...register('name')}
+                    placeholder="Enter name"
+                    aria-invalid={!!errors.name}
+                  />
+                  {errors.name && (
+                    <p 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}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="type">Type</Label>
+                  <Input
+                    id="type"
+                    {...register('type')}
+                    placeholder="Enter type"
+                    aria-invalid={!!errors.type}
+                  />
+                  {errors.type && (
+                    <p className="text-xs text-destructive">{errors.type.message}</p>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Step 2: Details */}
+            {currentStep === 1 && (
+              <div className="space-y-4">
+                <h2 className="text-lg font-semibold">Additional Details</h2>
+                <div className="space-y-2">
+                  <Label htmlFor="wiz-status">Status</Label>
+                  <Select
+                    value={watch('status')}
+                    onValueChange={(value) => setValue('status', value as 'active' | 'inactive')}
+                  >
+                    <SelectTrigger id="wiz-status">
+                      <SelectValue placeholder="Select status" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="active">Active</SelectItem>
+                      <SelectItem value="inactive">Inactive</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="notes">Notes</Label>
+                  <Textarea
+                    id="notes"
+                    {...register('notes')}
+                    placeholder="Add any notes"
+                    rows={3}
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Step 3: Review */}
+            {currentStep === 2 && (
+              <div className="space-y-4">
+                <h2 className="text-lg font-semibold">Review & Confirm</h2>
+                <div className="rounded-lg border border-border p-4 space-y-3">
+                  <div className="flex justify-between">
+                    <span className="text-sm text-muted-foreground">Name</span>
+                    <span className="text-sm font-medium">{watch('name') || '—'}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm text-muted-foreground">Description</span>
+                    <span className="text-sm font-medium">{watch('description') || '—'}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm text-muted-foreground">Type</span>
+                    <span className="text-sm font-medium">{watch('type') || '—'}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm text-muted-foreground">Status</span>
+                    <span className="text-sm font-medium">{watch('status')}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm text-muted-foreground">Notes</span>
+                    <span className="text-sm font-medium">{watch('notes') || '—'}</span>
+                  </div>
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  Review the details above and click &ldquo;Create&rdquo; to finalize.
+                </p>
+              </div>
+            )}
+
+            {/* Navigation buttons */}
+            <div className="flex items-center justify-between pt-4 border-t border-border">
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={goBack}
+                disabled={isFirstStep}
+              >
+                <ArrowLeft className="h-4 w-4 mr-1" />
+                Back
+              </Button>
+              {!isLastStep ? (
+                <Button type="button" variant="teal" size="sm" onClick={goNext}>
+                  Next
+                  <ArrowRight className="h-4 w-4 ml-1" />
+                </Button>
+              ) : (
+                <Button
+                  type="submit"
+                  variant="teal"
+                  size="sm"
+                  disabled={mutation.isPending}
+                >
+                  <Save className="h-4 w-4 mr-1" />
+                  {mutation.isPending ? 'Creating...' : 'Create'}
+                </Button>
+              )}
+            </div>
+          </form>
+        </div>
+      </Page.Body>
+    </Page>
+  );
+}
+
+/** Returns the field names that belong to each step for validation. */
+function getFieldsForStep(step: number): Array<keyof WizardValues> {
+  switch (step) {
+    case 0: return ['name', 'description', 'type'];
+    case 1: return ['status', 'notes'];
+    case 2: return []; // review step — already valid
+    default: return [];
+  }
+}
+
+export default ${componentName};
+`;
+}

package/src/templates/patterns/subscriber/audit-relay.ts

@@ -0,0 +1,54 @@
+/**
+ * Audit-relay subscriber pattern template.
+ * Produces: subscriber that relays domain events to an audit event-store or external sink.
+ */
+
+function camelCase(s: string): string {
+  return s.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+
+export function auditRelayTemplate(domain: string, id: string, event: string): string {
+  const varName = camelCase(id);
+
+  return `import { defineSubscriber } from '@mettlecast/domain-runtime';
+
+/**
+ * ${id} — Relays ${event} to the audit event-store for compliance.
+ *
+ * Captures every instance of ${event} and stores an immutable
+ * audit record including caller identity, timestamp, and event payload.
+ */
+export const ${varName} = defineSubscriber({
+  id: '${domain}.${id}',
+  event: '${event}',
+  semverRange: '^1',
+  handler: async (event, ctx) => {
+    const auditRecord = {
+      pk: 'AUDIT#' + event.data.tenantId,
+      sk: 'EVENT#' + event.id,
+      eventType: event.type,
+      eventVersion: event.version,
+      payload: event.data,
+      timestamp: event.timestamp,
+      source: event.source,
+      correlationId: event.correlationId,
+      ttl: Math.floor(Date.now() / 1000) + 90 * 86400, // 90-day retention
+    };
+
+    // ── Write to audit store ─────────────────────────────────
+    await ctx.db.put(auditRecord);
+
+    // ── Optionally forward to external sink ──────────────────
+    if (ctx.integrations?.auditSink) {
+      await ctx.fetch(ctx.integrations.auditSink, {
+        method: 'POST',
+        body: JSON.stringify(auditRecord),
+        headers: { 'content-type': 'application/json' },
+      });
+    }
+
+    ctx.metrics?.putMetric('${id}.audit.relayed', 1, 'Count');
+  },
+});
+`;
+}