@almadar/cli 1.0.5 → 1.0.7

package/shells/typescript-shell/packages/client/src/clients/inspection-system/molecules/ProgressHeader.tsx

@@ -1,157 +0,0 @@
-/**
- * ProgressHeader
- *
- * Header component showing inspection progress with steps.
- * Used at the top of inspection wizard pages.
- *
- * Event Contract:
- * - Emits: none (display only)
- * - entityAware: true
- */
-
-import React from "react";
-import { cn } from "../../../lib/cn";
-import { Box } from "../../../components/atoms/Box";
-import { VStack, HStack } from "../../../components/atoms/Stack";
-import { Typography } from "../../../components/atoms/Typography";
-import { ProgressBar } from "../../../components/atoms/ProgressBar";
-import { PhaseIndicator, InspectionPhase } from "../atoms/PhaseIndicator";
-import { CheckCircle, Circle } from "lucide-react";
-
-export interface ProgressStep {
-  id: string;
-  label: string;
-  completed: boolean;
-  current?: boolean;
-}
-
-export interface ProgressHeaderProps {
-  /** Inspection title */
-  title: string;
-  /** Inspection subtitle (e.g., company name) */
-  subtitle?: string;
-  /** Current phase */
-  phase?: InspectionPhase;
-  /** Progress steps */
-  steps?: ProgressStep[];
-  /** Current step index (0-based) */
-  currentStep?: number;
-  /** Total steps */
-  totalSteps?: number;
-  /** Progress percentage (0-100) */
-  progress?: number;
-  /** Show step indicators */
-  showSteps?: boolean;
-  /** Compact mode */
-  compact?: boolean;
-  /** Additional CSS classes */
-  className?: string;
-}
-
-export const ProgressHeader: React.FC<ProgressHeaderProps> = ({
-  title,
-  subtitle,
-  phase,
-  steps,
-  currentStep = 0,
-  totalSteps,
-  progress,
-  showSteps = true,
-  className,
-}) => {
-  // Calculate progress from steps if not provided
-  const calculatedProgress =
-    progress ??
-    (steps
-      ? Math.round(
-          (steps.filter((s) => s.completed).length / steps.length) * 100,
-        )
-      : totalSteps
-        ? Math.round((currentStep / totalSteps) * 100)
-        : 0);
-
-  return (
-    <Box
-      padding="lg"
-      border
-      rounded="lg"
-      className={cn("bg-white shadow-sm", className)}
-    >
-      <VStack gap="md">
-        {/* Title row */}
-        <HStack justify="between" align="start" wrap>
-          <VStack gap="xs">
-            <Typography variant="h2" className="text-neutral-900">
-              {title}
-            </Typography>
-            {subtitle && (
-              <Typography variant="body" className="text-neutral-500">
-                {subtitle}
-              </Typography>
-            )}
-          </VStack>
-          {phase && <PhaseIndicator phase={phase} />}
-        </HStack>
-
-        {/* Progress bar */}
-        <VStack gap="xs">
-          <HStack justify="between" align="center">
-            <Typography variant="small" className="text-neutral-600">
-              Progress
-            </Typography>
-            <Typography
-              variant="small"
-              className="font-medium text-neutral-700"
-            >
-              {calculatedProgress}%
-            </Typography>
-          </HStack>
-          <ProgressBar
-            value={calculatedProgress}
-            max={100}
-            variant="primary"
-            size="md"
-          />
-        </VStack>
-
-        {/* Step indicators */}
-        {showSteps && steps && steps.length > 0 && (
-          <HStack gap="sm" wrap className="pt-2 border-t">
-            {steps.map((step, index) => (
-              <HStack
-                key={step.id}
-                gap="xs"
-                align="center"
-                className={cn(
-                  "px-2 py-1 rounded",
-                  step.current && "bg-blue-50",
-                  step.completed && !step.current && "text-green-600",
-                )}
-              >
-                {step.completed ? (
-                  <CheckCircle className="h-4 w-4 text-green-500" />
-                ) : step.current ? (
-                  <Circle className="h-4 w-4 text-blue-500 fill-blue-500" />
-                ) : (
-                  <Circle className="h-4 w-4 text-neutral-300" />
-                )}
-                <Typography
-                  variant="small"
-                  className={cn(
-                    step.current
-                      ? "font-medium text-blue-700"
-                      : "text-neutral-600",
-                  )}
-                >
-                  {step.label}
-                </Typography>
-              </HStack>
-            ))}
-          </HStack>
-        )}
-      </VStack>
-    </Box>
-  );
-};
-
-ProgressHeader.displayName = "ProgressHeader";

package/shells/typescript-shell/packages/client/src/clients/inspection-system/molecules/RepeatableFormSection.tsx

@@ -1,189 +0,0 @@
-/**
- * RepeatableFormSection
- *
- * A form section that can be repeated multiple times.
- * Used for collecting multiple entries (participants, findings, etc.)
- *
- * Event Contract:
- * - Emits: UI:SECTION_ADDED { sectionType, index }
- * - Emits: UI:SECTION_REMOVED { sectionType, index, itemId }
- */
-
-import React, { useCallback } from "react";
-import { cn } from "../../../lib/cn";
-import { Box } from "../../../components/atoms/Box";
-import { VStack, HStack } from "../../../components/atoms/Stack";
-import { Typography } from "../../../components/atoms/Typography";
-import { Button } from "../../../components/atoms/Button";
-import { Card } from "../../../components/atoms/Card";
-import { useEventBus } from "../../../hooks/useEventBus";
-import { Plus, Trash2, GripVertical } from "lucide-react";
-
-export interface RepeatableFormSectionProps {
-  /** Section type identifier */
-  sectionType: string;
-  /** Section title */
-  title: string;
-  /** Items in the section */
-  items: Array<{
-    id: string;
-    data?: Record<string, unknown>;
-    [key: string]: unknown;
-  }>;
-  /** Render function for each item */
-  renderItem: (
-    item: {
-      id: string;
-      data?: Record<string, unknown>;
-      [key: string]: unknown;
-    },
-    index: number,
-  ) => React.ReactNode;
-  /** Minimum items required */
-  minItems?: number;
-  /** Maximum items allowed */
-  maxItems?: number;
-  /** Allow reordering */
-  allowReorder?: boolean;
-  /** Add button label */
-  addLabel?: string;
-  /** Empty state message */
-  emptyMessage?: string;
-  /** Read-only mode */
-  readOnly?: boolean;
-  /** Additional CSS classes */
-  className?: string;
-  /** Add handler - can accept data from renderForm */
-  onAdd?: (data?: Record<string, unknown>) => void;
-  /** Remove handler */
-  onRemove?: (itemId: string, index: number) => void;
-  /** Reorder handler */
-  onReorder?: (fromIndex: number, toIndex: number) => void;
-  /** Render custom form for adding items */
-  renderForm?: (
-    onAdd: (data: Record<string, unknown>) => void,
-  ) => React.ReactNode;
-}
-
-export const RepeatableFormSection: React.FC<RepeatableFormSectionProps> = ({
-  sectionType,
-  title,
-  items,
-  renderItem,
-  minItems = 0,
-  maxItems = Infinity,
-  allowReorder = false,
-  addLabel = "Add Item",
-  emptyMessage = "No items added yet",
-  readOnly = false,
-  className,
-  onAdd,
-  onRemove,
-  onReorder,
-}) => {
-  const eventBus = useEventBus();
-
-  const canAdd = !readOnly && items.length < maxItems;
-  const canRemove = !readOnly && items.length > minItems;
-
-  const handleAdd = useCallback(() => {
-    onAdd?.();
-    eventBus.emit("UI:SECTION_ADDED", { sectionType, index: items.length });
-  }, [sectionType, items.length, onAdd, eventBus]);
-
-  const handleRemove = useCallback(
-    (itemId: string, index: number) => {
-      onRemove?.(itemId, index);
-      eventBus.emit("UI:SECTION_REMOVED", { sectionType, index, itemId });
-    },
-    [sectionType, onRemove, eventBus],
-  );
-
-  return (
-    <VStack gap="md" className={cn("w-full", className)}>
-      {/* Header */}
-      <HStack justify="between" align="center">
-        <HStack gap="sm" align="center">
-          <Typography variant="h4" className="text-neutral-800">
-            {title}
-          </Typography>
-          <Typography variant="small" className="text-neutral-500">
-            ({items.length}
-            {maxItems !== Infinity ? `/${maxItems}` : ""})
-          </Typography>
-        </HStack>
-
-        {canAdd && (
-          <Button
-            variant="secondary"
-            size="sm"
-            onClick={handleAdd}
-            className="gap-1"
-          >
-            <Plus className="h-4 w-4" />
-            {addLabel}
-          </Button>
-        )}
-      </HStack>
-
-      {/* Items */}
-      {items.length === 0 ? (
-        <Card className="p-6">
-          <VStack align="center" gap="sm" className="text-neutral-400">
-            <Typography variant="body">{emptyMessage}</Typography>
-            {canAdd && (
-              <Button
-                variant="primary"
-                size="sm"
-                onClick={handleAdd}
-                className="gap-1"
-              >
-                <Plus className="h-4 w-4" />
-                {addLabel}
-              </Button>
-            )}
-          </VStack>
-        </Card>
-      ) : (
-        <VStack gap="sm">
-          {items.map((item, index) => (
-            <Card key={item.id} className="p-4">
-              <HStack gap="sm" align="start">
-                {/* Drag handle */}
-                {allowReorder && !readOnly && (
-                  <Box className="pt-2 cursor-move text-neutral-400 hover:text-neutral-600">
-                    <GripVertical className="h-5 w-5" />
-                  </Box>
-                )}
-
-                {/* Item content */}
-                <Box className="flex-1">{renderItem(item, index)}</Box>
-
-                {/* Remove button */}
-                {canRemove && (
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => handleRemove(item.id, index)}
-                    className="text-red-400 hover:text-red-600 hover:bg-red-50"
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                )}
-              </HStack>
-            </Card>
-          ))}
-        </VStack>
-      )}
-
-      {/* Min items warning */}
-      {items.length < minItems && (
-        <Typography variant="small" className="text-amber-600">
-          At least {minItems} item{minItems !== 1 ? "s" : ""} required
-        </Typography>
-      )}
-    </VStack>
-  );
-};
-
-RepeatableFormSection.displayName = "RepeatableFormSection";

package/shells/typescript-shell/packages/client/src/clients/inspection-system/molecules/RuleCheckItem.stories.tsx

@@ -1,118 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { RuleCheckItem } from "./RuleCheckItem";
-import { VStack } from "../../../components/atoms/Stack";
-
-const meta: Meta<typeof RuleCheckItem> = {
-  title: "Clients/Inspection-System/Molecules/RuleCheckItem",
-  component: RuleCheckItem,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    severity: {
-      control: "select",
-      options: ["critical", "major", "minor", "info"],
-    },
-    isCompliant: {
-      control: "select",
-      options: [null, true, false],
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof RuleCheckItem>;
-
-export const Default: Story = {
-  args: {
-    id: "rule-1",
-    description: "Business premises must display valid operating license in visible location",
-    gazetteNumber: "2023/45",
-    article: "12",
-    severity: "major",
-  },
-};
-
-export const Compliant: Story = {
-  args: {
-    id: "rule-2",
-    description: "Fire extinguishers must be inspected within the last 12 months",
-    gazetteNumber: "2022/18",
-    article: "8",
-    severity: "critical",
-    isCompliant: true,
-  },
-};
-
-export const NonCompliant: Story = {
-  args: {
-    id: "rule-3",
-    description: "Emergency exits must be clearly marked with illuminated signs",
-    gazetteNumber: "2021/32",
-    article: "15",
-    severity: "critical",
-    isCompliant: false,
-    notes: "Exit sign on back door is not illuminated. Bulb appears to be burned out.",
-  },
-};
-
-export const WithPhotos: Story = {
-  args: {
-    id: "rule-4",
-    description: "Food storage areas must maintain temperature below 5°C",
-    gazetteNumber: "2023/12",
-    article: "24",
-    severity: "major",
-    isCompliant: false,
-    notes: "Refrigerator showing 8°C at time of inspection",
-    photoCount: 3,
-  },
-};
-
-export const ReadOnly: Story = {
-  args: {
-    id: "rule-5",
-    description: "Staff hygiene training certificates must be current",
-    gazetteNumber: "2022/08",
-    article: "31",
-    severity: "minor",
-    isCompliant: true,
-    readOnly: true,
-  },
-};
-
-export const AllSeverities: Story = {
-  render: () => (
-    <VStack gap="md">
-      <RuleCheckItem
-        id="critical-1"
-        description="Critical safety requirement that must be addressed immediately"
-        severity="critical"
-        gazetteNumber="2023/01"
-        article="1"
-      />
-      <RuleCheckItem
-        id="major-1"
-        description="Major compliance issue requiring prompt attention"
-        severity="major"
-        gazetteNumber="2023/02"
-        article="2"
-      />
-      <RuleCheckItem
-        id="minor-1"
-        description="Minor issue that should be addressed within 30 days"
-        severity="minor"
-        gazetteNumber="2023/03"
-        article="3"
-      />
-      <RuleCheckItem
-        id="info-1"
-        description="Informational guideline for best practices"
-        severity="info"
-        gazetteNumber="2023/04"
-        article="4"
-      />
-    </VStack>
-  ),
-};

package/shells/typescript-shell/packages/client/src/clients/inspection-system/molecules/RuleCheckItem.tsx

@@ -1,237 +0,0 @@
-/**
- * RuleCheckItem
- *
- * A compliance rule item with toggle and notes.
- * Used in inspection wizard to check rule compliance.
- *
- * Event Contract:
- * - Emits: UI:RULE_CHECKED { ruleId, isCompliant, notes }
- */
-
-import React, { useState, useCallback } from "react";
-import { cn } from "../../../lib/cn";
-import { Box } from "../../../components/atoms/Box";
-import { VStack, HStack } from "../../../components/atoms/Stack";
-import { Typography } from "../../../components/atoms/Typography";
-import { Badge } from "../../../components/atoms/Badge";
-import { Card } from "../../../components/atoms/Card";
-import { Textarea } from "../../../components/atoms/Textarea";
-import { useEventBus } from "../../../hooks/useEventBus";
-import { LawReferenceBadge } from "../atoms/LawReferenceBadge";
-import { Check, X, AlertTriangle, Camera } from "lucide-react";
-
-export type RuleSeverity = "critical" | "major" | "minor" | "info";
-
-export type RuleAnswer =
-  | "compliant"
-  | "non-compliant"
-  | "not-applicable"
-  | null;
-
-export interface RuleCheckItemProps {
-  /** Rule ID */
-  id?: string;
-  /** Rule ID alias */
-  ruleId?: string;
-  /** Rule description */
-  description?: string;
-  /** Rule text alias */
-  ruleText?: string;
-  /** Official Gazette reference */
-  gazetteNumber?: string;
-  /** Article reference */
-  article?: string;
-  /** Severity level */
-  severity?: RuleSeverity;
-  /** Current compliance status */
-  isCompliant?: boolean | null;
-  /** Answer (alternative to isCompliant) */
-  answer?: RuleAnswer;
-  /** Notes for non-compliance */
-  notes?: string;
-  /** Photos attached */
-  photoCount?: number;
-  /** Show notes input */
-  showNotes?: boolean;
-  /** Read-only mode */
-  readOnly?: boolean;
-  /** Additional CSS classes */
-  className?: string;
-  /** Change handler */
-  onChange?: (data: { isCompliant: boolean | null; notes: string }) => void;
-  /** Check handler (alternative to onChange) */
-  onCheck?: (answer: RuleAnswer, notes?: string) => void;
-  /** Add photo handler */
-  onAddPhoto?: () => void;
-}
-
-const severityConfig: Record<
-  RuleSeverity,
-  { color: string; bgColor: string; label: string }
-> = {
-  critical: { color: "text-red-600", bgColor: "bg-red-100", label: "Critical" },
-  major: { color: "text-orange-600", bgColor: "bg-orange-100", label: "Major" },
-  minor: { color: "text-yellow-600", bgColor: "bg-yellow-100", label: "Minor" },
-  info: { color: "text-blue-600", bgColor: "bg-blue-100", label: "Info" },
-};
-
-export const RuleCheckItem: React.FC<RuleCheckItemProps> = ({
-  id,
-  description,
-  gazetteNumber,
-  article,
-  severity = "major",
-  isCompliant = null,
-  notes = "",
-  photoCount = 0,
-  showNotes = true,
-  readOnly = false,
-  className,
-  onChange,
-}) => {
-  const eventBus = useEventBus();
-  const [localNotes, setLocalNotes] = useState(notes);
-  const [localCompliant, setLocalCompliant] = useState(isCompliant);
-
-  const severityStyle = severityConfig[severity];
-
-  const handleComplianceChange = useCallback(
-    (value: boolean) => {
-      if (readOnly) return;
-      setLocalCompliant(value);
-      const data = { isCompliant: value, notes: localNotes };
-      onChange?.(data);
-      eventBus.emit("UI:RULE_CHECKED", { ruleId: id, ...data });
-    },
-    [id, localNotes, readOnly, onChange, eventBus],
-  );
-
-  const handleNotesChange = useCallback(
-    (value: string) => {
-      if (readOnly) return;
-      setLocalNotes(value);
-      const data = { isCompliant: localCompliant, notes: value };
-      onChange?.(data);
-    },
-    [localCompliant, readOnly, onChange],
-  );
-
-  return (
-    <Card className={cn("p-4", className)}>
-      <VStack gap="md">
-        {/* Header */}
-        <HStack justify="between" align="start" wrap>
-          <VStack gap="xs" className="flex-1">
-            <HStack gap="sm" wrap>
-              {(gazetteNumber || article) && (
-                <LawReferenceBadge
-                  gazette={gazetteNumber}
-                  article={article}
-                  size="sm"
-                />
-              )}
-              <Badge
-                variant="default"
-                className={cn(severityStyle.bgColor, severityStyle.color)}
-              >
-                {severityStyle.label}
-              </Badge>
-            </HStack>
-            <Typography variant="body" className="font-medium text-neutral-800">
-              {description}
-            </Typography>
-          </VStack>
-
-          {/* Compliance Toggle */}
-          {!readOnly && (
-            <HStack gap="xs">
-              <button
-                type="button"
-                onClick={() => handleComplianceChange(true)}
-                className={cn(
-                  "p-2 rounded-lg border transition-all",
-                  localCompliant === true
-                    ? "bg-green-100 border-green-300 text-green-600"
-                    : "bg-neutral-50 border-neutral-200 text-neutral-400 hover:bg-green-50",
-                )}
-              >
-                <Check className="h-5 w-5" />
-              </button>
-              <button
-                type="button"
-                onClick={() => handleComplianceChange(false)}
-                className={cn(
-                  "p-2 rounded-lg border transition-all",
-                  localCompliant === false
-                    ? "bg-red-100 border-red-300 text-red-600"
-                    : "bg-neutral-50 border-neutral-200 text-neutral-400 hover:bg-red-50",
-                )}
-              >
-                <X className="h-5 w-5" />
-              </button>
-            </HStack>
-          )}
-
-          {/* Read-only status */}
-          {readOnly && localCompliant !== null && (
-            <Box
-              rounded="lg"
-              padding="sm"
-              className={cn(
-                localCompliant
-                  ? "bg-green-100 text-green-600"
-                  : "bg-red-100 text-red-600",
-              )}
-            >
-              {localCompliant ? (
-                <Check className="h-5 w-5" />
-              ) : (
-                <X className="h-5 w-5" />
-              )}
-            </Box>
-          )}
-        </HStack>
-
-        {/* Notes section - shown when non-compliant or explicitly requested */}
-        {showNotes && (localCompliant === false || localNotes) && (
-          <VStack gap="xs">
-            <HStack gap="xs" align="center">
-              <AlertTriangle className="h-4 w-4 text-amber-500" />
-              <Typography
-                variant="small"
-                className="font-medium text-neutral-600"
-              >
-                Non-compliance Notes
-              </Typography>
-            </HStack>
-            {readOnly ? (
-              <Typography variant="body" className="text-neutral-700">
-                {localNotes || "No notes provided"}
-              </Typography>
-            ) : (
-              <Textarea
-                value={localNotes}
-                onChange={(e) => handleNotesChange(e.target.value)}
-                placeholder="Describe the non-compliance issue..."
-                rows={2}
-                className="w-full"
-              />
-            )}
-          </VStack>
-        )}
-
-        {/* Photo indicator */}
-        {photoCount > 0 && (
-          <HStack gap="xs" align="center" className="text-neutral-500">
-            <Camera className="h-4 w-4" />
-            <Typography variant="small">
-              {photoCount} photo{photoCount !== 1 ? "s" : ""} attached
-            </Typography>
-          </HStack>
-        )}
-      </VStack>
-    </Card>
-  );
-};
-
-RuleCheckItem.displayName = "RuleCheckItem";