@almadar/cli 0.3.2 → 1.0.3

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

@@ -0,0 +1,137 @@
+/**
+ * Inspection System Client Components
+ *
+ * Client-specific components for the government inspection system.
+ * These components implement the inspection workflow with compliance tracking.
+ *
+ * Entity Mappings:
+ * - Inspection: Core entity for inspections
+ * - Company: Businesses being inspected
+ * - Inspector: Government inspectors
+ * - Participant: Company representatives
+ * - InspectionRule: Compliance rules
+ */
+
+// Atoms
+export {
+  LawReferenceBadge,
+  type LawReferenceBadgeProps,
+} from "./atoms/LawReferenceBadge";
+
+export {
+  PhaseIndicator,
+  type PhaseIndicatorProps,
+  type InspectionPhase,
+} from "./atoms/PhaseIndicator";
+
+// Molecules
+export {
+  RuleCheckItem,
+  type RuleCheckItemProps,
+  type RuleSeverity,
+} from "./molecules/RuleCheckItem";
+
+export {
+  ProgressHeader,
+  type ProgressHeaderProps,
+  type ProgressStep,
+} from "./molecules/ProgressHeader";
+
+export {
+  ConditionalField,
+  type ConditionalFieldProps,
+  type FieldType,
+  type FieldCondition,
+  type FieldOption,
+} from "./molecules/ConditionalField";
+
+export {
+  EntitySearch,
+  type EntitySearchProps,
+  type EntitySearchItem,
+} from "./molecules/EntitySearch";
+
+export {
+  ParticipantList,
+  type ParticipantListProps,
+  type Participant,
+} from "./molecules/ParticipantList";
+
+export {
+  PhotoAttachment,
+  type PhotoAttachmentProps,
+  type Photo,
+} from "./molecules/PhotoAttachment";
+
+export {
+  RepeatableFormSection,
+  type RepeatableFormSectionProps,
+} from "./molecules/RepeatableFormSection";
+
+export {
+  CardSelector,
+  type CardSelectorProps,
+  type CardSelectorOption,
+} from "./molecules/CardSelector";
+
+export {
+  ObjectionRecorder,
+  type ObjectionRecorderProps,
+  type Objection,
+} from "./molecules/ObjectionRecorder";
+
+export {
+  DocumentPreview,
+  type DocumentPreviewProps,
+  type DocumentStatus,
+} from "./molecules/DocumentPreview";
+
+export {
+  InspectionTimeline,
+  type InspectionTimelineProps,
+  type TimelineItem,
+  type TimelineEventType,
+} from "./molecules/InspectionTimeline";
+
+export {
+  ComplianceSummary,
+  type ComplianceSummaryProps,
+  type ComplianceStats,
+} from "./molecules/ComplianceSummary";
+
+// Organisms
+export {
+  FloatingActionMenu,
+  type FloatingActionMenuProps,
+  type FloatingAction,
+} from "./organisms/FloatingActionMenu";
+
+export {
+  SignatureCapture,
+  type SignatureCaptureProps,
+} from "./organisms/SignatureCapture";
+
+// Templates
+export {
+  InspectionsTemplate,
+  type InspectionsTemplateProps,
+  type InspectionData,
+} from "./templates/InspectionsTemplate";
+
+export {
+  CompaniesTemplate,
+  type CompaniesTemplateProps,
+  type CompanyData,
+} from "./templates/CompaniesTemplate";
+
+export {
+  InspectorsTemplate,
+  type InspectorsTemplateProps,
+  type InspectorData,
+} from "./templates/InspectorsTemplate";
+
+export {
+  InspectionWizardTemplate,
+  type InspectionWizardTemplateProps,
+  type WizardStep,
+} from "./templates/InspectionWizardTemplate";

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

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CardSelector } from "./CardSelector";
+import { Building2, Utensils, Factory, ShoppingCart, Truck, Warehouse } from "lucide-react";
+import { useState } from "react";
+
+const meta: Meta<typeof CardSelector> = {
+  title: "Clients/Inspection-System/Molecules/CardSelector",
+  component: CardSelector,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof CardSelector>;
+
+const inspectionTypes = [
+  {
+    id: "restaurant",
+    title: "Restaurant",
+    description: "Food service establishments",
+    icon: Utensils,
+  },
+  {
+    id: "retail",
+    title: "Retail Store",
+    description: "Consumer goods shops",
+    icon: ShoppingCart,
+  },
+  {
+    id: "factory",
+    title: "Factory",
+    description: "Manufacturing facilities",
+    icon: Factory,
+  },
+  {
+    id: "warehouse",
+    title: "Warehouse",
+    description: "Storage and distribution",
+    icon: Warehouse,
+  },
+  {
+    id: "office",
+    title: "Office Building",
+    description: "Commercial office spaces",
+    icon: Building2,
+  },
+  {
+    id: "transport",
+    title: "Transport",
+    description: "Vehicles and logistics",
+    icon: Truck,
+  },
+];
+
+export const Default: Story = {
+  args: {
+    options: inspectionTypes,
+    selectedId: null,
+  },
+};
+
+export const WithSelection: Story = {
+  args: {
+    options: inspectionTypes,
+    selectedId: "restaurant",
+  },
+};
+
+export const TwoColumns: Story = {
+  args: {
+    options: inspectionTypes.slice(0, 4),
+    columns: 2,
+  },
+};
+
+export const FourColumns: Story = {
+  args: {
+    options: inspectionTypes,
+    columns: 4,
+  },
+};
+
+export const WithDisabled: Story = {
+  args: {
+    options: [
+      ...inspectionTypes.slice(0, 3),
+      { ...inspectionTypes[3], disabled: true },
+      { ...inspectionTypes[4], disabled: true },
+      inspectionTypes[5],
+    ],
+    selectedId: "restaurant",
+  },
+};
+
+export const NoIcons: Story = {
+  args: {
+    options: inspectionTypes.map(({ icon, ...rest }) => rest),
+  },
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<string | null>(null);
+    return (
+      <CardSelector
+        options={inspectionTypes}
+        selectedId={selected}
+        onChange={setSelected}
+      />
+    );
+  },
+};
+
+export const MultiSelect: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<string[]>([]);
+    return (
+      <CardSelector
+        options={inspectionTypes}
+        multiple
+        selectedIds={selected}
+        onMultiChange={setSelected}
+      />
+    );
+  },
+};

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

@@ -0,0 +1,174 @@
+/**
+ * CardSelector
+ *
+ * Card-based selection component for choosing options.
+ * Used for selecting inspection type, field type, etc.
+ *
+ * Event Contract:
+ * - Emits: UI:CARD_SELECTED { optionId, option }
+ */
+
+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 { Card } from "../../../components/atoms/Card";
+import { useEventBus } from "../../../hooks/useEventBus";
+import { Check, LucideIcon } from "lucide-react";
+
+export interface CardSelectorOption {
+  id: string;
+  title: string;
+  description?: string;
+  icon?: LucideIcon;
+  disabled?: boolean;
+  metadata?: Record<string, string>;
+}
+
+export interface CardSelectorProps {
+  /** Available options */
+  options: CardSelectorOption[];
+  /** Currently selected option ID */
+  selectedId?: string | null;
+  /** Allow multiple selection */
+  multiple?: boolean;
+  /** Selected IDs for multiple selection */
+  selectedIds?: string[];
+  /** Number of columns */
+  columns?: 1 | 2 | 3 | 4;
+  /** Show check icon on selected */
+  showCheck?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** Selection change handler */
+  onChange?: (selectedId: string) => void;
+  /** Multiple selection change handler */
+  onMultiChange?: (selectedIds: string[]) => void;
+}
+
+const columnClasses = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+};
+
+export const CardSelector: React.FC<CardSelectorProps> = ({
+  options,
+  selectedId,
+  multiple = false,
+  selectedIds = [],
+  columns = 3,
+  showCheck = true,
+  disabled = false,
+  className,
+  onChange,
+  onMultiChange,
+}) => {
+  const eventBus = useEventBus();
+
+  const isSelected = useCallback(
+    (optionId: string) => {
+      if (multiple) {
+        return selectedIds.includes(optionId);
+      }
+      return selectedId === optionId;
+    },
+    [multiple, selectedId, selectedIds]
+  );
+
+  const handleSelect = useCallback(
+    (option: CardSelectorOption) => {
+      if (disabled || option.disabled) return;
+
+      if (multiple) {
+        const newSelection = isSelected(option.id)
+          ? selectedIds.filter((id) => id !== option.id)
+          : [...selectedIds, option.id];
+        onMultiChange?.(newSelection);
+      } else {
+        onChange?.(option.id);
+      }
+
+      eventBus.emit("UI:CARD_SELECTED", { optionId: option.id, option });
+    },
+    [disabled, multiple, selectedIds, isSelected, onChange, onMultiChange, eventBus]
+  );
+
+  return (
+    <Box className={cn("grid gap-4", columnClasses[columns], className)}>
+      {options.map((option) => {
+        const selected = isSelected(option.id);
+        const Icon = option.icon;
+
+        return (
+          <Card
+            key={option.id}
+            className={cn(
+              "p-4 cursor-pointer transition-all",
+              selected
+                ? "ring-2 ring-blue-500 bg-blue-50 border-blue-200"
+                : "hover:border-neutral-300 hover:shadow-sm",
+              (disabled || option.disabled) && "opacity-50 cursor-not-allowed"
+            )}
+            onClick={() => handleSelect(option)}
+          >
+            <HStack justify="between" align="start">
+              <HStack gap="sm" align="start">
+                {Icon && (
+                  <Box
+                    rounded="lg"
+                    padding="sm"
+                    className={cn(
+                      selected
+                        ? "bg-blue-100 text-blue-600"
+                        : "bg-neutral-100 text-neutral-500"
+                    )}
+                  >
+                    <Icon className="h-5 w-5" />
+                  </Box>
+                )}
+                <VStack gap="xs">
+                  <Typography
+                    variant="body"
+                    className={cn(
+                      "font-medium",
+                      selected ? "text-blue-900" : "text-neutral-800"
+                    )}
+                  >
+                    {option.title}
+                  </Typography>
+                  {option.description && (
+                    <Typography
+                      variant="small"
+                      className={cn(
+                        selected ? "text-blue-700" : "text-neutral-500"
+                      )}
+                    >
+                      {option.description}
+                    </Typography>
+                  )}
+                </VStack>
+              </HStack>
+
+              {showCheck && selected && (
+                <Box
+                  rounded="full"
+                  padding="xs"
+                  className="bg-blue-500 text-white"
+                >
+                  <Check className="h-4 w-4" />
+                </Box>
+              )}
+            </HStack>
+          </Card>
+        );
+      })}
+    </Box>
+  );
+};
+
+CardSelector.displayName = "CardSelector";

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

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ComplianceSummary } from "./ComplianceSummary";
+
+const meta: Meta<typeof ComplianceSummary> = {
+  title: "Clients/Inspection-System/Molecules/ComplianceSummary",
+  component: ComplianceSummary,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ComplianceSummary>;
+
+export const Default: Story = {
+  args: {
+    stats: {
+      total: 25,
+      compliant: 18,
+      nonCompliant: 5,
+      notChecked: 2,
+      critical: 1,
+      major: 3,
+      minor: 1,
+    },
+  },
+};
+
+export const HighCompliance: Story = {
+  args: {
+    stats: {
+      total: 30,
+      compliant: 28,
+      nonCompliant: 2,
+      notChecked: 0,
+      critical: 0,
+      major: 1,
+      minor: 1,
+    },
+  },
+};
+
+export const LowCompliance: Story = {
+  args: {
+    stats: {
+      total: 20,
+      compliant: 8,
+      nonCompliant: 10,
+      notChecked: 2,
+      critical: 3,
+      major: 5,
+      minor: 2,
+    },
+  },
+};
+
+export const InProgress: Story = {
+  args: {
+    stats: {
+      total: 25,
+      compliant: 10,
+      nonCompliant: 3,
+      notChecked: 12,
+      critical: 1,
+      major: 1,
+      minor: 1,
+    },
+  },
+};
+
+export const WithComparison: Story = {
+  args: {
+    stats: {
+      total: 25,
+      compliant: 20,
+      nonCompliant: 5,
+      notChecked: 0,
+      critical: 0,
+      major: 3,
+      minor: 2,
+    },
+    previousRate: 72,
+  },
+};
+
+export const Compact: Story = {
+  args: {
+    stats: {
+      total: 25,
+      compliant: 18,
+      nonCompliant: 5,
+      notChecked: 2,
+      critical: 1,
+      major: 3,
+      minor: 1,
+    },
+    compact: true,
+  },
+};
+
+export const NoSeverityBreakdown: Story = {
+  args: {
+    stats: {
+      total: 25,
+      compliant: 18,
+      nonCompliant: 5,
+      notChecked: 2,
+      critical: 1,
+      major: 3,
+      minor: 1,
+    },
+    showSeverityBreakdown: false,
+  },
+};