@mettlecast/domain-cli 0.2.0

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

@@ -0,0 +1,138 @@
+/**
+ * List page pattern template — data table page with pagination, sorting, filtering.
+ */
+export function listPageTemplate(pageName) {
+    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};
+`;
+}

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

@@ -0,0 +1,4 @@
+/**
+ * Settings page pattern template — settings page with tabs (profile, security, notifications).
+ */
+export declare function settingsPageTemplate(pageName: string): string;

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

@@ -0,0 +1,318 @@
+/**
+ * Settings page pattern template — settings page with tabs (profile, security, notifications).
+ */
+export function settingsPageTemplate(pageName) {
+    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/dist/templates/patterns/page/wizard.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Wizard page pattern template — multi-step form with progress bar.
+ */
+export declare function wizardPageTemplate(pageName: string): string;