@almadar/cli 1.0.6 → 1.0.8

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

@@ -1,18 +0,0 @@
-/**
- * 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

@@ -1,75 +0,0 @@
-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

@@ -1,197 +0,0 @@
-/**
- * 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

@@ -1,96 +0,0 @@
-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

@@ -1,278 +0,0 @@
-/**
- * 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

@@ -1,8 +0,0 @@
-/**
- * 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";