@almadar/cli 0.3.2 → 0.3.3

package/shells/typescript-shell/packages/client/src/clients/inspection-system/molecules/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Inspection System Molecules
+ *
+ * Composite components for the inspection system design system.
+ */
+
+export { RuleCheckItem, type RuleCheckItemProps, type RuleSeverity } from "./RuleCheckItem";
+export { ProgressHeader, type ProgressHeaderProps, type ProgressStep } from "./ProgressHeader";
+export { ConditionalField, type ConditionalFieldProps, type FieldType, type FieldCondition, type FieldOption } from "./ConditionalField";
+export { EntitySearch, type EntitySearchProps, type EntitySearchItem } from "./EntitySearch";
+export { ParticipantList, type ParticipantListProps, type Participant } from "./ParticipantList";
+export { PhotoAttachment, type PhotoAttachmentProps, type Photo } from "./PhotoAttachment";
+export { RepeatableFormSection, type RepeatableFormSectionProps } from "./RepeatableFormSection";
+export { CardSelector, type CardSelectorProps, type CardSelectorOption } from "./CardSelector";
+export { ObjectionRecorder, type ObjectionRecorderProps, type Objection } from "./ObjectionRecorder";
+export { DocumentPreview, type DocumentPreviewProps, type DocumentStatus } from "./DocumentPreview";
+export { InspectionTimeline, type InspectionTimelineProps, type TimelineItem, type TimelineEventType } from "./InspectionTimeline";
+export { ComplianceSummary, type ComplianceSummaryProps, type ComplianceStats } from "./ComplianceSummary";

package/shells/typescript-shell/packages/client/src/clients/inspection-system/organisms/FloatingActionMenu.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FloatingActionMenu } from "./FloatingActionMenu";
+import { Camera, FileText, UserPlus, AlertCircle } from "lucide-react";
+import { Box } from "../../../components/atoms/Box";
+
+const meta: Meta<typeof FloatingActionMenu> = {
+  title: "Clients/Inspection-System/Organisms/FloatingActionMenu",
+  component: FloatingActionMenu,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <Box className="relative h-[500px] bg-neutral-100 p-4">
+        <Box className="p-4 bg-white rounded-lg shadow">
+          <p className="text-neutral-600">
+            Click the floating action button in the corner to see the menu expand.
+          </p>
+        </Box>
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof FloatingActionMenu>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const BottomLeft: Story = {
+  args: {
+    position: "bottom-left",
+  },
+};
+
+export const BottomCenter: Story = {
+  args: {
+    position: "bottom-center",
+  },
+};
+
+export const CustomActions: Story = {
+  args: {
+    actions: [
+      {
+        id: "photo",
+        label: "Take Photo",
+        icon: Camera,
+        color: "text-blue-600",
+        bgColor: "bg-blue-100",
+      },
+      {
+        id: "note",
+        label: "Add Note",
+        icon: FileText,
+        color: "text-green-600",
+        bgColor: "bg-green-100",
+      },
+    ],
+  },
+};
+
+export const WithContext: Story = {
+  args: {
+    context: {
+      inspectionId: "insp-123",
+      currentStep: "rule-check",
+    },
+    onAction: (actionId) => alert(`Action: ${actionId}`),
+  },
+};

package/shells/typescript-shell/packages/client/src/clients/inspection-system/organisms/FloatingActionMenu.tsx

@@ -0,0 +1,197 @@
+/**
+ * FloatingActionMenu
+ *
+ * Floating action button with expandable menu.
+ * Provides quick access to common inspection actions.
+ *
+ * Event Contract:
+ * - Emits: UI:QUICK_ACTION { action, context }
+ */
+
+import React, { useState, useCallback, useRef, useEffect } 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 { useEventBus } from "@/hooks/useEventBus";
+import {
+  Plus,
+  X,
+  UserPlus,
+  Camera,
+  FileText,
+  AlertCircle,
+  Phone,
+  LucideIcon,
+} from "lucide-react";
+
+export interface FloatingAction {
+  id: string;
+  label: string;
+  icon: LucideIcon;
+  color?: string;
+  bgColor?: string;
+}
+
+// Type alias for backwards compatibility
+export type QuickAction = FloatingAction;
+
+export interface FloatingActionMenuProps {
+  /** Available actions */
+  actions?: FloatingAction[];
+  /** Context data for events */
+  context?: Record<string, string>;
+  /** Position - accepts unknown for generated code compatibility */
+  position?:
+    | "bottom-right"
+    | "bottom-left"
+    | "bottom-center"
+    | string
+    | unknown;
+  /** Additional CSS classes */
+  className?: string;
+  /** Action click handler */
+  onAction?: (actionId: string) => void;
+}
+
+const defaultActions: FloatingAction[] = [
+  {
+    id: "add_participant",
+    label: "Add Participant",
+    icon: UserPlus,
+    color: "text-purple-600",
+    bgColor: "bg-purple-100",
+  },
+  {
+    id: "take_photo",
+    label: "Take Photo",
+    icon: Camera,
+    color: "text-blue-600",
+    bgColor: "bg-blue-100",
+  },
+  {
+    id: "add_note",
+    label: "Add Note",
+    icon: FileText,
+    color: "text-green-600",
+    bgColor: "bg-green-100",
+  },
+  {
+    id: "record_objection",
+    label: "Record Objection",
+    icon: AlertCircle,
+    color: "text-amber-600",
+    bgColor: "bg-amber-100",
+  },
+  {
+    id: "sos",
+    label: "Emergency",
+    icon: Phone,
+    color: "text-red-600",
+    bgColor: "bg-red-100",
+  },
+];
+
+const positionClasses: Record<string, string> = {
+  "bottom-right": "right-4 bottom-4",
+  "bottom-left": "left-4 bottom-4",
+  "bottom-center": "left-1/2 -translate-x-1/2 bottom-4",
+};
+
+export const FloatingActionMenu: React.FC<FloatingActionMenuProps> = ({
+  actions = defaultActions,
+  context = {},
+  position = "bottom-right",
+  className,
+  onAction,
+}) => {
+  const eventBus = useEventBus();
+  const [isOpen, setIsOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+
+  const handleAction = useCallback(
+    (actionId: string) => {
+      onAction?.(actionId);
+      eventBus.emit("UI:QUICK_ACTION", { action: actionId, context });
+      setIsOpen(false);
+    },
+    [context, onAction, eventBus],
+  );
+
+  const handleToggle = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+
+  // Normalize position to string for index access
+  const positionKey = typeof position === "string" ? position : "bottom-right";
+
+  return (
+    <Box
+      ref={menuRef}
+      className={cn("fixed z-50", positionClasses[positionKey], className)}
+    >
+      <VStack gap="sm" align="end">
+        {isOpen && (
+          <VStack gap="sm" align="end">
+            {actions.map((action) => {
+              const Icon = action.icon;
+              return (
+                <HStack key={action.id} gap="sm" align="center">
+                  <Box padding="sm" rounded="lg" className="bg-white shadow-lg">
+                    <Typography
+                      variant="small"
+                      className="font-medium whitespace-nowrap"
+                    >
+                      {action.label}
+                    </Typography>
+                  </Box>
+
+                  <button
+                    type="button"
+                    onClick={() => handleAction(action.id)}
+                    className={cn(
+                      "p-3 rounded-full shadow-lg transition-transform hover:scale-110",
+                      action.bgColor || "bg-white",
+                      action.color || "text-neutral-700",
+                    )}
+                  >
+                    <Icon className="h-5 w-5" />
+                  </button>
+                </HStack>
+              );
+            })}
+          </VStack>
+        )}
+
+        <button
+          type="button"
+          onClick={handleToggle}
+          className={cn(
+            "p-4 rounded-full shadow-lg transition-all",
+            isOpen
+              ? "bg-neutral-800 text-white rotate-45"
+              : "bg-blue-600 text-white hover:bg-blue-700",
+          )}
+        >
+          {isOpen ? <X className="h-6 w-6" /> : <Plus className="h-6 w-6" />}
+        </button>
+      </VStack>
+    </Box>
+  );
+};
+
+FloatingActionMenu.displayName = "FloatingActionMenu";

package/shells/typescript-shell/packages/client/src/clients/inspection-system/organisms/SignatureCapture.stories.tsx

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SignatureCapture } from "./SignatureCapture";
+import { VStack } from "../../../components/atoms/Stack";
+
+const meta: Meta<typeof SignatureCapture> = {
+  title: "Clients/Inspection-System/Organisms/SignatureCapture",
+  component: SignatureCapture,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof SignatureCapture>;
+
+export const Default: Story = {
+  args: {
+    participantName: "John Smith",
+    participantId: "p-123",
+  },
+};
+
+export const Required: Story = {
+  args: {
+    participantName: "John Smith",
+    participantId: "p-123",
+    required: true,
+  },
+};
+
+export const CustomSize: Story = {
+  args: {
+    participantName: "Sarah Johnson",
+    width: 500,
+    height: 150,
+  },
+};
+
+export const CustomStyle: Story = {
+  args: {
+    participantName: "Mike Williams",
+    strokeColor: "#2563eb",
+    strokeWidth: 3,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    participantName: "Completed Signature",
+    disabled: true,
+  },
+};
+
+export const WithHandlers: Story = {
+  args: {
+    participantName: "John Smith",
+    participantId: "p-123",
+    onCapture: (data) => console.log("Signature captured:", data.substring(0, 50) + "..."),
+    onClear: () => console.log("Signature cleared"),
+  },
+};
+
+export const InspectorSignature: Story = {
+  args: {
+    title: "Inspector Signature",
+    participantName: "Inspector Ahmad Hassan",
+    participantId: "inspector-1",
+    instructions: "I confirm that this inspection was conducted according to regulations",
+    required: true,
+  },
+};
+
+export const MultipleSignatures: Story = {
+  render: () => (
+    <VStack gap="lg">
+      <SignatureCapture
+        title="Inspector Signature"
+        participantName="Inspector Ahmad"
+        participantId="inspector-1"
+        required
+      />
+      <SignatureCapture
+        title="Company Representative"
+        participantName="John Smith (Manager)"
+        participantId="participant-1"
+        required
+      />
+      <SignatureCapture
+        title="Witness (Optional)"
+        participantName="Sarah Johnson"
+        participantId="participant-2"
+      />
+    </VStack>
+  ),
+};

package/shells/typescript-shell/packages/client/src/clients/inspection-system/organisms/SignatureCapture.tsx

@@ -0,0 +1,278 @@
+/**
+ * SignatureCapture
+ *
+ * Canvas-based signature capture component.
+ * Used for collecting digital signatures from participants.
+ *
+ * Event Contract:
+ * - Emits: UI:SIGNATURE_CAPTURED { signatureData, participantId, context }
+ */
+
+import React, { useRef, useState, useCallback, useEffect } 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 { Eraser, Check, RotateCcw, Pen } from "lucide-react";
+
+export interface SignatureCaptureProps {
+  /** Participant ID */
+  participantId?: string;
+  /** Participant name for display */
+  participantName?: string;
+  /** Title */
+  title?: string;
+  /** Subtitle */
+  subtitle?: string;
+  /** Instructions text */
+  instructions?: string;
+  /** Canvas width */
+  width?: number;
+  /** Canvas height */
+  height?: number;
+  /** Stroke color */
+  strokeColor?: string;
+  /** Stroke width */
+  strokeWidth?: number;
+  /** Required signature */
+  required?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** Signature captured handler */
+  onCapture?: (signatureData: string) => void;
+  /** Clear handler */
+  onClear?: () => void;
+}
+
+export const SignatureCapture: React.FC<SignatureCaptureProps> = ({
+  participantId,
+  participantName,
+  title = "Signature",
+  instructions = "Please sign in the box below",
+  width = 400,
+  height = 200,
+  strokeColor = "#1e293b",
+  strokeWidth = 2,
+  required = false,
+  disabled = false,
+  className,
+  onCapture,
+  onClear,
+}) => {
+  const eventBus = useEventBus();
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [hasSignature, setHasSignature] = useState(false);
+  const [lastPos, setLastPos] = useState({ x: 0, y: 0 });
+
+  // Initialize canvas
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    // Set up canvas
+    ctx.strokeStyle = strokeColor;
+    ctx.lineWidth = strokeWidth;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+
+    // Fill with white background
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(0, 0, width, height);
+  }, [width, height, strokeColor, strokeWidth]);
+
+  const getPos = useCallback(
+    (
+      e:
+        | React.MouseEvent<HTMLCanvasElement>
+        | React.TouchEvent<HTMLCanvasElement>,
+    ) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return { x: 0, y: 0 };
+
+      const rect = canvas.getBoundingClientRect();
+      const scaleX = canvas.width / rect.width;
+      const scaleY = canvas.height / rect.height;
+
+      if ("touches" in e) {
+        const touch = e.touches[0];
+        return {
+          x: (touch.clientX - rect.left) * scaleX,
+          y: (touch.clientY - rect.top) * scaleY,
+        };
+      }
+
+      return {
+        x: (e.clientX - rect.left) * scaleX,
+        y: (e.clientY - rect.top) * scaleY,
+      };
+    },
+    [],
+  );
+
+  const startDrawing = useCallback(
+    (
+      e:
+        | React.MouseEvent<HTMLCanvasElement>
+        | React.TouchEvent<HTMLCanvasElement>,
+    ) => {
+      if (disabled) return;
+      e.preventDefault();
+      const pos = getPos(e);
+      setIsDrawing(true);
+      setLastPos(pos);
+    },
+    [disabled, getPos],
+  );
+
+  const draw = useCallback(
+    (
+      e:
+        | React.MouseEvent<HTMLCanvasElement>
+        | React.TouchEvent<HTMLCanvasElement>,
+    ) => {
+      if (!isDrawing || disabled) return;
+      e.preventDefault();
+
+      const canvas = canvasRef.current;
+      const ctx = canvas?.getContext("2d");
+      if (!ctx) return;
+
+      const pos = getPos(e);
+
+      ctx.beginPath();
+      ctx.moveTo(lastPos.x, lastPos.y);
+      ctx.lineTo(pos.x, pos.y);
+      ctx.stroke();
+
+      setLastPos(pos);
+      setHasSignature(true);
+    },
+    [isDrawing, disabled, getPos, lastPos],
+  );
+
+  const stopDrawing = useCallback(() => {
+    setIsDrawing(false);
+  }, []);
+
+  const handleClear = useCallback(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (!ctx) return;
+
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(0, 0, width, height);
+    setHasSignature(false);
+    onClear?.();
+  }, [width, height, onClear]);
+
+  const handleCapture = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !hasSignature) return;
+
+    const signatureData = canvas.toDataURL("image/png");
+    onCapture?.(signatureData);
+    eventBus.emit("UI:SIGNATURE_CAPTURED", {
+      signatureData,
+      participantId,
+      context: { participantName },
+    });
+  }, [hasSignature, participantId, participantName, onCapture, eventBus]);
+
+  return (
+    <Card className={cn("p-4", className)}>
+      <VStack gap="md">
+        {/* Header */}
+        <VStack gap="xs">
+          <HStack justify="between" align="center">
+            <Typography variant="h4" className="text-neutral-800">
+              {title}
+              {required && <span className="text-red-500 ml-1">*</span>}
+            </Typography>
+            {participantName && (
+              <Typography variant="small" className="text-neutral-500">
+                {participantName}
+              </Typography>
+            )}
+          </HStack>
+          <Typography variant="small" className="text-neutral-500">
+            {instructions}
+          </Typography>
+        </VStack>
+
+        {/* Canvas */}
+        <Box
+          border
+          rounded="lg"
+          className={cn(
+            "relative overflow-hidden bg-white",
+            disabled && "opacity-50 cursor-not-allowed",
+          )}
+        >
+          <canvas
+            ref={canvasRef}
+            width={width}
+            height={height}
+            className="w-full touch-none"
+            style={{ maxWidth: width }}
+            onMouseDown={startDrawing}
+            onMouseMove={draw}
+            onMouseUp={stopDrawing}
+            onMouseLeave={stopDrawing}
+            onTouchStart={startDrawing}
+            onTouchMove={draw}
+            onTouchEnd={stopDrawing}
+          />
+
+          {/* Signature line */}
+          <Box className="absolute bottom-8 left-4 right-4 border-b border-dashed border-neutral-300" />
+
+          {/* Empty state indicator */}
+          {!hasSignature && !disabled && (
+            <Box className="absolute inset-0 flex items-center justify-center pointer-events-none">
+              <HStack gap="xs" align="center" className="text-neutral-300">
+                <Pen className="h-5 w-5" />
+                <Typography variant="small">Sign here</Typography>
+              </HStack>
+            </Box>
+          )}
+        </Box>
+
+        {/* Actions */}
+        <HStack justify="between" align="center">
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={handleClear}
+            disabled={disabled || !hasSignature}
+            className="gap-1"
+          >
+            <RotateCcw className="h-4 w-4" />
+            Clear
+          </Button>
+
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={handleCapture}
+            disabled={disabled || !hasSignature}
+            className="gap-1"
+          >
+            <Check className="h-4 w-4" />
+            Confirm Signature
+          </Button>
+        </HStack>
+      </VStack>
+    </Card>
+  );
+};
+
+SignatureCapture.displayName = "SignatureCapture";

package/shells/typescript-shell/packages/client/src/clients/inspection-system/organisms/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Inspection System Organisms
+ *
+ * Complex components for the inspection system design system.
+ */
+
+export { FloatingActionMenu, type FloatingActionMenuProps, type FloatingAction } from "./FloatingActionMenu";
+export { SignatureCapture, type SignatureCaptureProps } from "./SignatureCapture";