@almadar/cli 1.0.6 → 1.0.7

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

@@ -1,263 +0,0 @@
-/**
- * ComplianceSummary
- *
- * Summary view of inspection compliance status.
- * Shows overall compliance stats and breakdown.
- *
- * 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 { Card } from "../../../components/atoms/Card";
-import { Badge } from "../../../components/atoms/Badge";
-import { ProgressBar } from "../../../components/atoms/ProgressBar";
-import {
-  CheckCircle,
-  XCircle,
-  AlertTriangle,
-  MinusCircle,
-  TrendingUp,
-  TrendingDown,
-} from "lucide-react";
-
-export interface ComplianceStats {
-  total: number;
-  compliant: number;
-  nonCompliant: number;
-  notChecked: number;
-  critical: number;
-  major: number;
-  minor: number;
-}
-
-export interface ComplianceSummaryProps {
-  /** Compliance statistics */
-  stats: ComplianceStats;
-  /** Show percentage */
-  showPercentage?: boolean;
-  /** Show breakdown by severity */
-  showSeverityBreakdown?: boolean;
-  /** Previous compliance rate for comparison */
-  previousRate?: number;
-  /** Title */
-  title?: string;
-  /** Compact mode */
-  compact?: boolean;
-  /** Display variant */
-  variant?: "compact" | "full" | "minimal" | string;
-  /** Additional CSS classes */
-  className?: string;
-}
-
-export const ComplianceSummary: React.FC<ComplianceSummaryProps> = ({
-  stats,
-  showPercentage = true,
-  showSeverityBreakdown = true,
-  previousRate,
-  title = "Compliance Summary",
-  compact = false,
-  className,
-}) => {
-  const checkedItems = stats.compliant + stats.nonCompliant;
-  const complianceRate =
-    checkedItems > 0 ? Math.round((stats.compliant / checkedItems) * 100) : 0;
-
-  const rateChange =
-    previousRate !== undefined ? complianceRate - previousRate : null;
-
-  const getComplianceColor = (rate: number) => {
-    if (rate >= 90) return "success";
-    if (rate >= 70) return "warning";
-    return "danger";
-  };
-
-  if (compact) {
-    return (
-      <HStack gap="md" align="center" className={className}>
-        <HStack gap="xs" align="center">
-          <CheckCircle className="h-4 w-4 text-green-500" />
-          <Typography variant="body" className="font-medium">
-            {stats.compliant}
-          </Typography>
-        </HStack>
-        <HStack gap="xs" align="center">
-          <XCircle className="h-4 w-4 text-red-500" />
-          <Typography variant="body" className="font-medium">
-            {stats.nonCompliant}
-          </Typography>
-        </HStack>
-        {stats.notChecked > 0 && (
-          <HStack gap="xs" align="center">
-            <MinusCircle className="h-4 w-4 text-neutral-400" />
-            <Typography variant="body" className="font-medium">
-              {stats.notChecked}
-            </Typography>
-          </HStack>
-        )}
-        {showPercentage && (
-          <Badge variant={getComplianceColor(complianceRate)}>
-            {complianceRate}%
-          </Badge>
-        )}
-      </HStack>
-    );
-  }
-
-  return (
-    <Card className={cn("p-4", className)}>
-      <VStack gap="md">
-        {/* Header */}
-        <HStack justify="between" align="center">
-          <Typography variant="h4" className="text-neutral-800">
-            {title}
-          </Typography>
-          {showPercentage && (
-            <HStack gap="sm" align="center">
-              <Badge
-                variant={getComplianceColor(complianceRate)}
-                className="text-lg px-3 py-1"
-              >
-                {complianceRate}%
-              </Badge>
-              {rateChange !== null && rateChange !== 0 && (
-                <HStack
-                  gap="xs"
-                  align="center"
-                  className={cn(
-                    rateChange > 0 ? "text-green-600" : "text-red-600",
-                  )}
-                >
-                  {rateChange > 0 ? (
-                    <TrendingUp className="h-4 w-4" />
-                  ) : (
-                    <TrendingDown className="h-4 w-4" />
-                  )}
-                  <Typography variant="small" className="font-medium">
-                    {rateChange > 0 ? "+" : ""}
-                    {rateChange}%
-                  </Typography>
-                </HStack>
-              )}
-            </HStack>
-          )}
-        </HStack>
-
-        {/* Progress bar */}
-        <VStack gap="xs">
-          <ProgressBar
-            value={complianceRate}
-            max={100}
-            variant={getComplianceColor(complianceRate) as any}
-            size="lg"
-          />
-          <HStack justify="between">
-            <Typography variant="small" className="text-neutral-500">
-              {checkedItems} of {stats.total} rules checked
-            </Typography>
-            <Typography variant="small" className="text-neutral-500">
-              {stats.notChecked} remaining
-            </Typography>
-          </HStack>
-        </VStack>
-
-        {/* Stats row */}
-        <HStack gap="lg" justify="center" className="py-2">
-          <VStack align="center" gap="xs">
-            <HStack gap="xs" align="center">
-              <CheckCircle className="h-5 w-5 text-green-500" />
-              <Typography variant="h3" className="text-green-600">
-                {stats.compliant}
-              </Typography>
-            </HStack>
-            <Typography variant="small" className="text-neutral-500">
-              Compliant
-            </Typography>
-          </VStack>
-
-          <Box className="w-px h-12 bg-neutral-200" />
-
-          <VStack align="center" gap="xs">
-            <HStack gap="xs" align="center">
-              <XCircle className="h-5 w-5 text-red-500" />
-              <Typography variant="h3" className="text-red-600">
-                {stats.nonCompliant}
-              </Typography>
-            </HStack>
-            <Typography variant="small" className="text-neutral-500">
-              Non-Compliant
-            </Typography>
-          </VStack>
-
-          <Box className="w-px h-12 bg-neutral-200" />
-
-          <VStack align="center" gap="xs">
-            <HStack gap="xs" align="center">
-              <MinusCircle className="h-5 w-5 text-neutral-400" />
-              <Typography variant="h3" className="text-neutral-600">
-                {stats.notChecked}
-              </Typography>
-            </HStack>
-            <Typography variant="small" className="text-neutral-500">
-              Not Checked
-            </Typography>
-          </VStack>
-        </HStack>
-
-        {/* Severity breakdown */}
-        {showSeverityBreakdown && stats.nonCompliant > 0 && (
-          <VStack gap="sm" className="pt-2 border-t">
-            <Typography
-              variant="small"
-              className="font-medium text-neutral-600"
-            >
-              Non-Compliance by Severity
-            </Typography>
-            <HStack gap="md" wrap>
-              {stats.critical > 0 && (
-                <HStack gap="xs" align="center">
-                  <AlertTriangle className="h-4 w-4 text-red-600" />
-                  <Typography
-                    variant="small"
-                    className="text-red-600 font-medium"
-                  >
-                    {stats.critical} Critical
-                  </Typography>
-                </HStack>
-              )}
-              {stats.major > 0 && (
-                <HStack gap="xs" align="center">
-                  <AlertTriangle className="h-4 w-4 text-orange-600" />
-                  <Typography
-                    variant="small"
-                    className="text-orange-600 font-medium"
-                  >
-                    {stats.major} Major
-                  </Typography>
-                </HStack>
-              )}
-              {stats.minor > 0 && (
-                <HStack gap="xs" align="center">
-                  <AlertTriangle className="h-4 w-4 text-yellow-600" />
-                  <Typography
-                    variant="small"
-                    className="text-yellow-600 font-medium"
-                  >
-                    {stats.minor} Minor
-                  </Typography>
-                </HStack>
-              )}
-            </HStack>
-          </VStack>
-        )}
-      </VStack>
-    </Card>
-  );
-};
-
-ComplianceSummary.displayName = "ComplianceSummary";

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

@@ -1,254 +0,0 @@
-/**
- * ConditionalField
- *
- * A form field that shows/hides based on conditions.
- * Wraps standard form inputs with conditional visibility.
- *
- * Event Contract:
- * - Emits: UI:FIELD_CHANGE { fieldName, value, condition }
- */
-
-import React, { useState, useCallback, useMemo } from "react";
-import { cn } from "../../../lib/cn";
-import { Box } from "../../../components/atoms/Box";
-import { VStack } from "../../../components/atoms/Stack";
-import { Typography } from "../../../components/atoms/Typography";
-import { Input } from "../../../components/atoms/Input";
-import { Select } from "../../../components/atoms/Select";
-import { Textarea } from "../../../components/atoms/Textarea";
-import { Checkbox } from "../../../components/atoms/Checkbox";
-import { useEventBus } from "../../../hooks/useEventBus";
-import { ChevronDown, ChevronUp } from "lucide-react";
-
-export type FieldType =
-  | "text"
-  | "number"
-  | "select"
-  | "textarea"
-  | "checkbox"
-  | "date";
-
-export interface FieldOption {
-  value: string;
-  label: string;
-}
-
-export interface FieldCondition {
-  /** Field name to watch */
-  field: string;
-  /** Operator for comparison */
-  operator:
-    | "equals"
-    | "notEquals"
-    | "contains"
-    | "greaterThan"
-    | "lessThan"
-    | "truthy"
-    | "falsy";
-  /** Value to compare against */
-  value?: string | number | boolean;
-}
-
-export interface ConditionalFieldProps {
-  /** Field name */
-  name: string;
-  /** Field label */
-  label: string;
-  /** Field type */
-  type?: FieldType;
-  /** Current value */
-  value?: string | number | boolean;
-  /** Placeholder text */
-  placeholder?: string;
-  /** Options for select fields */
-  options?: FieldOption[];
-  /** Required field */
-  required?: boolean;
-  /** Condition for showing this field */
-  condition?: FieldCondition;
-  /** Current form values (for condition evaluation) */
-  formValues?: Record<string, unknown>;
-  /** Help text */
-  helpText?: string;
-  /** Error message */
-  error?: string;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Additional CSS classes */
-  className?: string;
-  /** Change handler */
-  onChange?: (value: string | number | boolean) => void;
-}
-
-// Evaluate condition against form values
-const evaluateCondition = (
-  condition: FieldCondition | undefined,
-  formValues: Record<string, unknown>,
-): boolean => {
-  if (!condition) return true;
-
-  const fieldValue = formValues[condition.field];
-
-  switch (condition.operator) {
-    case "equals":
-      return fieldValue === condition.value;
-    case "notEquals":
-      return fieldValue !== condition.value;
-    case "contains":
-      return String(fieldValue).includes(String(condition.value));
-    case "greaterThan":
-      return Number(fieldValue) > Number(condition.value);
-    case "lessThan":
-      return Number(fieldValue) < Number(condition.value);
-    case "truthy":
-      return Boolean(fieldValue);
-    case "falsy":
-      return !fieldValue;
-    default:
-      return true;
-  }
-};
-
-export const ConditionalField: React.FC<ConditionalFieldProps> = ({
-  name,
-  label,
-  type = "text",
-  value,
-  placeholder,
-  options = [],
-  required = false,
-  condition,
-  formValues = {},
-  helpText,
-  error,
-  disabled = false,
-  className,
-  onChange,
-}) => {
-  const eventBus = useEventBus();
-
-  // Evaluate if field should be shown
-  const isVisible = useMemo(
-    () => evaluateCondition(condition, formValues),
-    [condition, formValues],
-  );
-
-  const handleChange = useCallback(
-    (newValue: string | number | boolean) => {
-      onChange?.(newValue);
-      eventBus.emit("UI:FIELD_CHANGE", {
-        fieldName: name,
-        value: newValue,
-        condition: condition ? { met: isVisible } : undefined,
-      });
-    },
-    [name, condition, isVisible, onChange, eventBus],
-  );
-
-  if (!isVisible) {
-    return null;
-  }
-
-  const renderField = () => {
-    switch (type) {
-      case "select":
-        return (
-          <Select
-            value={String(value || "")}
-            onChange={(e) => handleChange(e.target.value)}
-            disabled={disabled}
-            className="w-full"
-            placeholder="Select..."
-            options={options.map((opt) => ({
-              value: String(opt.value),
-              label: opt.label,
-            }))}
-          />
-        );
-
-      case "textarea":
-        return (
-          <Textarea
-            value={String(value || "")}
-            onChange={(e) => handleChange(e.target.value)}
-            placeholder={placeholder}
-            disabled={disabled}
-            rows={3}
-            className="w-full"
-          />
-        );
-
-      case "checkbox":
-        return (
-          <Checkbox
-            checked={Boolean(value)}
-            onChange={(e) => handleChange(e.target.checked)}
-            disabled={disabled}
-            label={label}
-          />
-        );
-
-      case "number":
-        return (
-          <Input
-            type="number"
-            value={String(value || "")}
-            onChange={(e) => handleChange(Number(e.target.value))}
-            placeholder={placeholder}
-            disabled={disabled}
-            className="w-full"
-          />
-        );
-
-      case "date":
-        return (
-          <Input
-            type="date"
-            value={String(value || "")}
-            onChange={(e) => handleChange(e.target.value)}
-            disabled={disabled}
-            className="w-full"
-          />
-        );
-
-      default:
-        return (
-          <Input
-            type="text"
-            value={String(value || "")}
-            onChange={(e) => handleChange(e.target.value)}
-            placeholder={placeholder}
-            disabled={disabled}
-            className="w-full"
-          />
-        );
-    }
-  };
-
-  return (
-    <VStack gap="xs" className={cn("w-full", className)}>
-      {type !== "checkbox" && (
-        <Typography variant="label" className="text-neutral-700">
-          {label}
-          {required && <span className="text-red-500 ml-1">*</span>}
-        </Typography>
-      )}
-
-      {renderField()}
-
-      {helpText && !error && (
-        <Typography variant="small" className="text-neutral-500">
-          {helpText}
-        </Typography>
-      )}
-
-      {error && (
-        <Typography variant="small" className="text-red-500">
-          {error}
-        </Typography>
-      )}
-    </VStack>
-  );
-};
-
-ConditionalField.displayName = "ConditionalField";