@almadar/cli 1.0.6 → 1.0.8

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

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

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

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