@almadar/cli 0.3.2 → 0.3.3

package/shells/typescript-shell/packages/client/src/components/molecules/Toast.tsx

@@ -0,0 +1,154 @@
+/**
+ * Toast Molecule Component
+ *
+ * A toast notification component with auto-dismiss and action buttons.
+ * Uses theme-aware CSS variables for styling.
+ */
+
+import React, { useEffect } from "react";
+import { X, CheckCircle, AlertCircle, AlertTriangle, Info } from "lucide-react";
+import { Icon } from "../atoms/Icon";
+import { Typography } from "../atoms/Typography";
+import { Button } from "../atoms/Button";
+import { Badge } from "../atoms/Badge";
+import { cn } from "../../lib/cn";
+
+export type ToastVariant = "success" | "error" | "info" | "warning";
+
+export interface ToastProps {
+  /** Toast variant */
+  variant?: ToastVariant;
+  /** Toast message */
+  message: string;
+  /** Toast title (optional) */
+  title?: string;
+  /** Auto-dismiss duration in milliseconds (0 = no auto-dismiss) */
+  duration?: number;
+  /** Show dismiss button */
+  dismissible?: boolean;
+  /** Callback when toast is dismissed */
+  onDismiss?: () => void;
+  /** Action button label */
+  actionLabel?: string;
+  /** Action button click handler */
+  onAction?: () => void;
+  /** Badge count (optional) */
+  badge?: string | number;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+// Theme-aware variant styles
+const variantClasses: Record<ToastVariant, string> = {
+  success:
+    "bg-[var(--color-card)] border-[length:var(--border-width)] border-[var(--color-success)]",
+  error:
+    "bg-[var(--color-card)] border-[length:var(--border-width)] border-[var(--color-error)]",
+  info: "bg-[var(--color-card)] border-[length:var(--border-width)] border-[var(--color-info)]",
+  warning:
+    "bg-[var(--color-card)] border-[length:var(--border-width)] border-[var(--color-warning)]",
+};
+
+const iconMap: Record<ToastVariant, typeof Info> = {
+  success: CheckCircle,
+  error: AlertCircle,
+  info: Info,
+  warning: AlertTriangle,
+};
+
+const iconColors: Record<ToastVariant, string> = {
+  success: "text-[var(--color-success)]",
+  error: "text-[var(--color-error)]",
+  info: "text-[var(--color-info)]",
+  warning: "text-[var(--color-warning)]",
+};
+
+export const Toast: React.FC<ToastProps> = ({
+  variant = "info",
+  message,
+  title,
+  duration = 5000,
+  dismissible = true,
+  onDismiss,
+  actionLabel,
+  onAction,
+  badge,
+  className,
+}) => {
+  useEffect(() => {
+    if (duration <= 0 || !onDismiss) {
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      onDismiss();
+    }, duration);
+
+    return () => clearTimeout(timer);
+  }, [duration, onDismiss]);
+
+  return (
+    <div
+      className={cn(
+        "border-l-4 p-4 shadow-[var(--shadow-main)] min-w-[300px] max-w-md",
+        "rounded-[var(--radius-sm)]",
+        variantClasses[variant],
+        className,
+      )}
+      role="alert"
+    >
+      <div className="flex items-start gap-3">
+        <div className="flex-shrink-0 mt-0.5">
+          <Icon
+            icon={iconMap[variant]}
+            size="md"
+            className={iconColors[variant]}
+          />
+        </div>
+
+        <div className="flex-1 min-w-0">
+          {title && (
+            <Typography variant="h6" className="mb-1">
+              {title}
+            </Typography>
+          )}
+          <Typography variant="small" className="text-sm">
+            {message}
+          </Typography>
+
+          {actionLabel && onAction && (
+            <div className="mt-3">
+              <Button variant="ghost" size="sm" onClick={onAction}>
+                {actionLabel}
+              </Button>
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-start gap-2 flex-shrink-0">
+          {badge !== undefined && (
+            <Badge variant="default" size="sm">
+              {badge}
+            </Badge>
+          )}
+          {dismissible && (
+            <button
+              type="button"
+              onClick={onDismiss}
+              className={cn(
+                "flex-shrink-0 p-1 transition-colors rounded-[var(--radius-sm)]",
+                "hover:bg-[var(--color-muted)]",
+                "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-offset-2",
+              )}
+              aria-label="Dismiss toast"
+            >
+              <Icon icon={X} size="sm" />
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Toast.displayName = "Toast";

package/shells/typescript-shell/packages/client/src/components/molecules/Tooltip.tsx

@@ -0,0 +1,172 @@
+/**
+ * Tooltip Molecule Component
+ * 
+ * A tooltip component with position variants and delay options.
+ * Uses theme-aware CSS variables for styling.
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Typography } from '../atoms/Typography';
+import { cn } from '../../lib/cn';
+
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+
+export interface TooltipProps {
+  /** Tooltip content */
+  content: React.ReactNode;
+  /** Tooltip trigger element (ReactElement or ReactNode that will be wrapped in span) */
+  children: React.ReactNode;
+  /** Tooltip position */
+  position?: TooltipPosition;
+  /** Show delay in milliseconds */
+  delay?: number;
+  /** Hide delay in milliseconds */
+  hideDelay?: number;
+  /** Show arrow */
+  showArrow?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const positionClasses: Record<TooltipPosition, string> = {
+  top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+  bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+  left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+  right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+};
+
+// Arrow colors use CSS variables
+const arrowClasses: Record<TooltipPosition, string> = {
+  top: 'top-full left-1/2 -translate-x-1/2 border-t-[var(--color-primary)] border-l-transparent border-r-transparent border-b-transparent',
+  bottom: 'bottom-full left-1/2 -translate-x-1/2 border-b-[var(--color-primary)] border-l-transparent border-r-transparent border-t-transparent',
+  left: 'left-full top-1/2 -translate-y-1/2 border-l-[var(--color-primary)] border-t-transparent border-b-transparent border-r-transparent',
+  right: 'right-full top-1/2 -translate-y-1/2 border-r-[var(--color-primary)] border-t-transparent border-b-transparent border-l-transparent',
+};
+
+export const Tooltip: React.FC<TooltipProps> = ({
+  content,
+  children,
+  position = 'top',
+  delay = 200,
+  hideDelay = 0,
+  showArrow = true,
+  className,
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [triggerRect, setTriggerRect] = useState<DOMRect | null>(null);
+  const triggerRef = useRef<HTMLElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const showTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const updatePosition = () => {
+    if (triggerRef.current) {
+      setTriggerRect(triggerRef.current.getBoundingClientRect());
+    }
+  };
+
+  const handleMouseEnter = () => {
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current);
+    }
+    updatePosition();
+    showTimeoutRef.current = setTimeout(() => {
+      setIsVisible(true);
+    }, delay);
+  };
+
+  const handleMouseLeave = () => {
+    if (showTimeoutRef.current) {
+      clearTimeout(showTimeoutRef.current);
+    }
+    hideTimeoutRef.current = setTimeout(() => {
+      setIsVisible(false);
+    }, hideDelay);
+  };
+
+  useEffect(() => {
+    if (isVisible) {
+      updatePosition();
+    }
+  }, [isVisible]);
+
+  useEffect(() => {
+    return () => {
+      if (showTimeoutRef.current) clearTimeout(showTimeoutRef.current);
+      if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
+    };
+  }, []);
+
+  // Wrap non-element children in a span
+  const triggerElement = React.isValidElement(children) ? children : <span>{children}</span>;
+
+  const trigger = React.cloneElement(triggerElement as React.ReactElement<any>, {
+    ref: triggerRef,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onFocus: handleMouseEnter,
+    onBlur: handleMouseLeave,
+  });
+
+  const tooltipContent = isVisible && triggerRect ? (
+    <div
+      ref={tooltipRef}
+      className={cn(
+        'fixed z-50 px-3 py-2 max-w-xs',
+        'bg-[var(--color-primary)] text-[var(--color-primary-foreground)]',
+        'shadow-[var(--shadow-sm)] rounded-[var(--radius-sm)]',
+        'text-sm pointer-events-none',
+        'break-words whitespace-normal',
+        'h-auto min-h-fit',
+        positionClasses[position],
+        className
+      )}
+      style={{
+        left: position === 'left' || position === 'right'
+          ? triggerRect.left + (position === 'left' ? 0 : triggerRect.width)
+          : triggerRect.left + triggerRect.width / 2,
+        top: position === 'top' || position === 'bottom'
+          ? triggerRect.top + (position === 'top' ? 0 : triggerRect.height)
+          : triggerRect.top + triggerRect.height / 2,
+        transform: position === 'top' || position === 'bottom'
+          ? 'translateX(-50%)'
+          : position === 'left' || position === 'right'
+            ? 'translateY(-50%)'
+            : 'none',
+      }}
+      role="tooltip"
+    >
+      <div className="w-full break-words whitespace-normal h-auto">
+        {typeof content === 'string' ? (
+          <Typography variant="small" className="text-[var(--color-primary-foreground)] break-words whitespace-normal">
+            {content}
+          </Typography>
+        ) : (
+          <div className="break-words whitespace-normal">
+            {content}
+          </div>
+        )}
+      </div>
+      {showArrow && (
+        <div
+          className={cn(
+            'absolute w-0 h-0 border-4',
+            arrowClasses[position]
+          )}
+        />
+      )}
+    </div>
+  ) : null;
+
+  return (
+    <>
+      {trigger}
+      {typeof window !== 'undefined' && tooltipContent
+        ? createPortal(tooltipContent, document.body)
+        : tooltipContent}
+    </>
+  );
+};
+
+Tooltip.displayName = 'Tooltip';

package/shells/typescript-shell/packages/client/src/components/molecules/ViolationAlert.tsx

@@ -0,0 +1,253 @@
+/**
+ * ViolationAlert
+ *
+ * Displays inspection violations with law references and action types.
+ * Used in inspection forms to show detected compliance violations.
+ *
+ * Action Types:
+ * - measure: Corrective measure required (warning)
+ * - admin: Administrative action (error)
+ * - penalty: Penalty proceedings (error, severe)
+ */
+
+import React from "react";
+import { cn } from "../../lib/cn";
+import { Box } from "../atoms/Box";
+import { VStack, HStack } from "../atoms/Stack";
+import { Typography } from "../atoms/Typography";
+import { Button } from "../atoms/Button";
+import { Icon } from "../atoms/Icon";
+
+export interface ViolationRecord {
+  /** Unique violation identifier */
+  id: string;
+  /** Law reference (e.g., "ZVPOT-1") */
+  law: string;
+  /** Article reference (e.g., "14/1") */
+  article: string;
+  /** Violation message */
+  message: string;
+  /** Action type determines severity */
+  actionType: "measure" | "admin" | "penalty";
+  /** Administrative action reference (e.g., "ZVPOT-1 234/1-4") */
+  adminAction?: string;
+  /** Penalty action reference (e.g., "ZVPOT-1 240/1-9") */
+  penaltyAction?: string;
+  /** Field that triggered this violation */
+  fieldId?: string;
+  /** Tab/form where violation occurred */
+  tabId?: string;
+}
+
+export interface ViolationAlertProps {
+  /** Violation data */
+  violation: ViolationRecord;
+  /** Visual severity (derived from actionType if not specified) */
+  severity?: "warning" | "error";
+  /** Dismissible alert */
+  dismissible?: boolean;
+  /** Dismiss handler */
+  onDismiss?: () => void;
+  /** Navigate to the field that caused violation */
+  onNavigateToField?: (fieldId: string) => void;
+  /** Compact display mode */
+  compact?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const actionTypeLabels: Record<string, string> = {
+  measure: "Corrective Measure",
+  admin: "Administrative Action",
+  penalty: "Penalty Proceedings",
+};
+
+const actionTypeIcons: Record<string, string> = {
+  measure: "alert-triangle",
+  admin: "alert-circle",
+  penalty: "shield-alert",
+};
+
+export const ViolationAlert: React.FC<ViolationAlertProps> = ({
+  violation,
+  severity,
+  dismissible = false,
+  onDismiss,
+  onNavigateToField,
+  compact = false,
+  className,
+}) => {
+  // Derive severity from actionType if not explicitly set
+  const effectiveSeverity =
+    severity ?? (violation.actionType === "measure" ? "warning" : "error");
+
+  const bgColor =
+    effectiveSeverity === "warning"
+      ? "bg-[var(--color-warning)]/10 border-[var(--color-warning)]/30"
+      : "bg-[var(--color-error)]/10 border-[var(--color-error)]/30";
+
+  const textColor =
+    effectiveSeverity === "warning"
+      ? "text-[var(--color-warning)]"
+      : "text-[var(--color-error)]";
+
+  const iconColor =
+    effectiveSeverity === "warning"
+      ? "text-[var(--color-warning)]"
+      : "text-[var(--color-error)]";
+
+  if (compact) {
+    return (
+      <Box
+        className={cn(
+          "px-3 py-2 rounded-[var(--radius-md)] border",
+          bgColor,
+          className,
+        )}
+      >
+        <HStack gap="sm" align="center" justify="between">
+          <HStack gap="sm" align="center">
+            <Icon
+              name={actionTypeIcons[violation.actionType]}
+              size="sm"
+              className={iconColor}
+            />
+            <Typography
+              variant="caption"
+              className={textColor}
+              weight="semibold"
+            >
+              {violation.law} Art. {violation.article}
+            </Typography>
+            <Typography variant="caption" className={textColor}>
+              {violation.message}
+            </Typography>
+          </HStack>
+          {dismissible && onDismiss && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onDismiss}
+              className="p-1"
+            >
+              <Icon name="x" size="sm" className={iconColor} />
+            </Button>
+          )}
+        </HStack>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      className={cn(
+        "p-4 rounded-[var(--radius-lg)] border",
+        bgColor,
+        className,
+      )}
+    >
+      <VStack gap="sm">
+        {/* Header */}
+        <HStack justify="between" align="start">
+          <HStack gap="sm" align="center">
+            <Icon
+              name={actionTypeIcons[violation.actionType]}
+              size="md"
+              className={iconColor}
+            />
+            <VStack gap="xs">
+              <Typography variant="label" weight="bold" className={textColor}>
+                {violation.law} Art. {violation.article}
+              </Typography>
+              <Typography
+                variant="caption"
+                className={cn(textColor, "opacity-75")}
+              >
+                {actionTypeLabels[violation.actionType]}
+              </Typography>
+            </VStack>
+          </HStack>
+          {dismissible && onDismiss && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onDismiss}
+              className="p-1"
+            >
+              <Icon name="x" size="sm" className={iconColor} />
+            </Button>
+          )}
+        </HStack>
+
+        {/* Message */}
+        <Typography variant="body2" className={textColor}>
+          {violation.message}
+        </Typography>
+
+        {/* Action references */}
+        {(violation.adminAction || violation.penaltyAction) && (
+          <Box
+            className={cn(
+              "pt-2 border-t",
+              effectiveSeverity === "warning"
+                ? "border-[var(--color-warning)]/30"
+                : "border-[var(--color-error)]/30",
+            )}
+          >
+            <VStack gap="xs">
+              {violation.adminAction && (
+                <HStack gap="xs" align="center">
+                  <Typography
+                    variant="caption"
+                    className={cn(textColor, "opacity-75")}
+                  >
+                    Admin:
+                  </Typography>
+                  <Typography
+                    variant="caption"
+                    weight="semibold"
+                    className={textColor}
+                  >
+                    {violation.adminAction}
+                  </Typography>
+                </HStack>
+              )}
+              {violation.penaltyAction && (
+                <HStack gap="xs" align="center">
+                  <Typography
+                    variant="caption"
+                    className={cn(textColor, "opacity-75")}
+                  >
+                    Penalty:
+                  </Typography>
+                  <Typography
+                    variant="caption"
+                    weight="semibold"
+                    className={textColor}
+                  >
+                    {violation.penaltyAction}
+                  </Typography>
+                </HStack>
+              )}
+            </VStack>
+          </Box>
+        )}
+
+        {/* Navigate to field button */}
+        {violation.fieldId && onNavigateToField && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => onNavigateToField(violation.fieldId!)}
+            className={cn(textColor, "self-start")}
+          >
+            <Icon name="arrow-right" size="sm" className="mr-1" />
+            Go to field
+          </Button>
+        )}
+      </VStack>
+    </Box>
+  );
+};
+
+ViolationAlert.displayName = "ViolationAlert";