@almadar/cli 0.3.2 → 1.0.3

package/shells/typescript-shell/packages/client/src/components/atoms/ConditionalWrapper.tsx

@@ -0,0 +1,139 @@
+/**
+ * ConditionalWrapper Atom Component
+ *
+ * A wrapper component that conditionally renders its children based on
+ * S-expression evaluation. Used for dynamic field visibility in inspection forms.
+ */
+
+import React from 'react';
+import { Box } from './Box';
+import {
+  evaluate,
+  createMinimalContext,
+  type SExpr,
+  type EvaluationContext as SharedEvaluationContext,
+} from '@almadar/shared';
+
+/**
+ * Context for conditional evaluation
+ */
+export interface ConditionalContext {
+  formValues: Record<string, unknown>;
+  globalVariables: Record<string, unknown>;
+  localVariables?: Record<string, unknown>;
+  entity?: Record<string, unknown>;
+}
+
+export interface ConditionalWrapperProps {
+  /** The S-expression condition to evaluate */
+  condition?: SExpr;
+  /** Context for evaluating the condition */
+  context: ConditionalContext;
+  /** Children to render when condition is true (or when no condition is provided) */
+  children: React.ReactNode;
+  /** Optional fallback to render when condition is false */
+  fallback?: React.ReactNode;
+  /** Whether to animate the transition (uses CSS transitions) */
+  animate?: boolean;
+}
+
+/**
+ * Convert wrapper context to shared evaluator context.
+ *
+ * The entity object is structured as:
+ * {
+ *   formValues: { fieldId: value, ... },
+ *   globalVariables: { HG_VAR: value, ... },
+ *   localVariables: { H_VAR: value, ... },
+ *   ...additionalEntityFields
+ * }
+ *
+ * Bindings use: @entity.formValues.fieldId, @entity.globalVariables.HG_VAR
+ */
+function toSharedContext(ctx: ConditionalContext): SharedEvaluationContext {
+  return createMinimalContext(
+    {
+      formValues: ctx.formValues,
+      globalVariables: ctx.globalVariables,
+      localVariables: ctx.localVariables ?? {},
+      ...ctx.entity,
+    },
+    {},
+    'active'
+  );
+}
+
+/**
+ * ConditionalWrapper conditionally renders children based on S-expression evaluation.
+ *
+ * Supported bindings:
+ * - @entity.formValues.fieldId - Access form field values
+ * - @entity.globalVariables.HG_VAR - Access global inspection variables
+ * - @entity.localVariables.H_VAR - Access document-local variables
+ * - @state - Current state machine state
+ * - @now - Current timestamp
+ *
+ * @example
+ * // Simple condition - show field when another field equals a value
+ * <ConditionalWrapper
+ *   condition={["=", "@entity.formValues.vehicleType", "commercial"]}
+ *   context={{ formValues: { vehicleType: "commercial" }, globalVariables: {} }}
+ * >
+ *   <Input name="commercialLicenseNumber" />
+ * </ConditionalWrapper>
+ *
+ * @example
+ * // With fallback - show message when condition not met
+ * <ConditionalWrapper
+ *   condition={[">=", "@entity.formValues.loadWeight", 3500]}
+ *   context={formContext}
+ *   fallback={<Typography variant="small">Load weight must be at least 3500kg</Typography>}
+ * >
+ *   <HeavyVehicleFields />
+ * </ConditionalWrapper>
+ *
+ * @example
+ * // Using global variables for cross-form conditions
+ * <ConditionalWrapper
+ *   condition={["=", "@entity.globalVariables.HG_POTROSNIKI", "DA"]}
+ *   context={{ formValues: {}, globalVariables: { HG_POTROSNIKI: "DA" } }}
+ * >
+ *   <PriceMarkingSection />
+ * </ConditionalWrapper>
+ */
+export const ConditionalWrapper: React.FC<ConditionalWrapperProps> = ({
+  condition,
+  context,
+  children,
+  fallback = null,
+  animate = false,
+}) => {
+  // If no condition is provided, always render children
+  if (!condition) {
+    return <>{children}</>;
+  }
+
+  // Evaluate the condition
+  const sharedContext = toSharedContext(context);
+  const result = evaluate(condition, sharedContext);
+  const isVisible = Boolean(result);
+
+  // Animate transitions if requested
+  if (animate) {
+    return (
+      <Box
+        overflow="hidden"
+        className={`transition-all duration-200 ${
+          isVisible ? 'opacity-100 max-h-[1000px]' : 'opacity-0 max-h-0'
+        }`}
+      >
+        {isVisible ? children : fallback}
+      </Box>
+    );
+  }
+
+  // Simple conditional rendering
+  return isVisible ? <>{children}</> : <>{fallback}</>;
+};
+
+ConditionalWrapper.displayName = 'ConditionalWrapper';

package/shells/typescript-shell/packages/client/src/components/atoms/Divider.tsx

@@ -0,0 +1,102 @@
+/**
+ * Divider Atom Component
+ *
+ * A divider component for separating content sections.
+ */
+
+import React from "react";
+import { cn } from "../../lib/cn";
+
+export type DividerOrientation = "horizontal" | "vertical";
+export type DividerVariant = "solid" | "dashed" | "dotted";
+
+export interface DividerProps {
+  /**
+   * Orientation of the divider
+   * @default 'horizontal'
+   */
+  orientation?: DividerOrientation;
+
+  /**
+   * Text label to display in the divider
+   */
+  label?: string;
+
+  /**
+   * Line style variant
+   * @default 'solid'
+   */
+  variant?: DividerVariant;
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+const variantStyles: Record<DividerVariant, string> = {
+  solid: "border-solid",
+  dashed: "border-dashed",
+  dotted: "border-dotted",
+};
+
+export const Divider: React.FC<DividerProps> = ({
+  orientation = "horizontal",
+  label,
+  variant = "solid",
+  className,
+}) => {
+  if (orientation === "vertical") {
+    return (
+      <div
+        className={cn(
+          "w-0 h-full border-l border-[var(--color-border)]",
+          variantStyles[variant],
+          className,
+        )}
+        role="separator"
+        aria-orientation="vertical"
+      />
+    );
+  }
+
+  if (label) {
+    return (
+      <div
+        className={cn("flex items-center gap-3 my-4", className)}
+        role="separator"
+        aria-label={label}
+      >
+        <div
+          className={cn(
+            "flex-1 h-0 border-t border-[var(--color-border)]",
+            variantStyles[variant],
+          )}
+        />
+        <span className="text-sm text-[var(--color-foreground)] font-bold uppercase tracking-wide">
+          {label}
+        </span>
+        <div
+          className={cn(
+            "flex-1 h-0 border-t border-[var(--color-border)]",
+            variantStyles[variant],
+          )}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "w-full h-0 border-t border-[var(--color-border)] my-4",
+        variantStyles[variant],
+        className,
+      )}
+      role="separator"
+      aria-orientation="horizontal"
+    />
+  );
+};
+
+Divider.displayName = "Divider";

package/shells/typescript-shell/packages/client/src/components/atoms/Icon.tsx

@@ -0,0 +1,224 @@
+/**
+ * Icon Atom Component
+ *
+ * A wrapper component for Lucide icons with consistent sizing and styling.
+ * Uses theme-aware CSS variables for stroke width and color.
+ *
+ * Supports two APIs:
+ * - `icon` prop: Pass a LucideIcon component directly
+ * - `name` prop: Pass a string icon name (resolved from iconMap)
+ */
+
+import React from 'react';
+import type { LucideIcon } from 'lucide-react';
+import * as LucideIcons from 'lucide-react';
+import { cn } from '../../lib/cn';
+
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type IconAnimation = 'spin' | 'pulse' | 'none';
+
+/**
+ * Map of icon names to Lucide icon components.
+ * Supports common icons used in patterns.
+ */
+const iconMap: Record<string, LucideIcon> = {
+  // Navigation & Actions
+  'chevron-right': LucideIcons.ChevronRight,
+  'chevron-left': LucideIcons.ChevronLeft,
+  'chevron-down': LucideIcons.ChevronDown,
+  'chevron-up': LucideIcons.ChevronUp,
+  'arrow-right': LucideIcons.ArrowRight,
+  'arrow-left': LucideIcons.ArrowLeft,
+  'arrow-up': LucideIcons.ArrowUp,
+  'arrow-down': LucideIcons.ArrowDown,
+  'x': LucideIcons.X,
+  'close': LucideIcons.X,
+  'menu': LucideIcons.Menu,
+  'more-vertical': LucideIcons.MoreVertical,
+  'more-horizontal': LucideIcons.MoreHorizontal,
+
+  // Status & Feedback
+  'check': LucideIcons.Check,
+  'check-circle': LucideIcons.CheckCircle,
+  'alert-circle': LucideIcons.AlertCircle,
+  'alert-triangle': LucideIcons.AlertTriangle,
+  'info': LucideIcons.Info,
+  'help-circle': LucideIcons.HelpCircle,
+  'loader': LucideIcons.Loader2,
+
+  // CRUD Operations
+  'plus': LucideIcons.Plus,
+  'minus': LucideIcons.Minus,
+  'edit': LucideIcons.Edit,
+  'pencil': LucideIcons.Pencil,
+  'trash': LucideIcons.Trash2,
+  'trash-2': LucideIcons.Trash2,
+  'save': LucideIcons.Save,
+  'copy': LucideIcons.Copy,
+  'clipboard': LucideIcons.Clipboard,
+
+  // Files & Documents
+  'file': LucideIcons.File,
+  'file-text': LucideIcons.FileText,
+  'folder': LucideIcons.Folder,
+  'folder-open': LucideIcons.FolderOpen,
+  'download': LucideIcons.Download,
+  'upload': LucideIcons.Upload,
+  'image': LucideIcons.Image,
+
+  // Communication
+  'mail': LucideIcons.Mail,
+  'message-circle': LucideIcons.MessageCircle,
+  'send': LucideIcons.Send,
+  'phone': LucideIcons.Phone,
+
+  // User & Profile
+  'user': LucideIcons.User,
+  'users': LucideIcons.Users,
+  'user-plus': LucideIcons.UserPlus,
+  'settings': LucideIcons.Settings,
+  'log-out': LucideIcons.LogOut,
+  'log-in': LucideIcons.LogIn,
+
+  // Search & Filter
+  'search': LucideIcons.Search,
+  'filter': LucideIcons.Filter,
+  'sort-asc': LucideIcons.ArrowUpNarrowWide,
+  'sort-desc': LucideIcons.ArrowDownNarrowWide,
+
+  // Layout & View
+  'grid': LucideIcons.Grid,
+  'list': LucideIcons.List,
+  'layout': LucideIcons.Layout,
+  'maximize': LucideIcons.Maximize,
+  'minimize': LucideIcons.Minimize,
+  'eye': LucideIcons.Eye,
+  'eye-off': LucideIcons.EyeOff,
+
+  // Media & Playback
+  'play': LucideIcons.Play,
+  'pause': LucideIcons.Pause,
+  'stop': LucideIcons.Square,
+  'volume': LucideIcons.Volume2,
+  'volume-off': LucideIcons.VolumeX,
+
+  // Time & Calendar
+  'calendar': LucideIcons.Calendar,
+  'clock': LucideIcons.Clock,
+
+  // Misc
+  'star': LucideIcons.Star,
+  'heart': LucideIcons.Heart,
+  'home': LucideIcons.Home,
+  'link': LucideIcons.Link,
+  'external-link': LucideIcons.ExternalLink,
+  'refresh': LucideIcons.RefreshCw,
+  'refresh-cw': LucideIcons.RefreshCw,
+  'zap': LucideIcons.Zap,
+  'bell': LucideIcons.Bell,
+  'bookmark': LucideIcons.Bookmark,
+  'share': LucideIcons.Share2,
+  'lock': LucideIcons.Lock,
+  'unlock': LucideIcons.Unlock,
+  'globe': LucideIcons.Globe,
+  'database': LucideIcons.Database,
+  'code': LucideIcons.Code,
+  'terminal': LucideIcons.Terminal,
+};
+
+/**
+ * Resolve an icon name to a Lucide icon component.
+ * Falls back to HelpCircle if not found.
+ */
+export function resolveIcon(name: string): LucideIcon {
+  // Try exact match first
+  if (iconMap[name]) {
+    return iconMap[name];
+  }
+
+  // Try lowercase
+  const lowerName = name.toLowerCase();
+  if (iconMap[lowerName]) {
+    return iconMap[lowerName];
+  }
+
+  // Try converting camelCase to kebab-case
+  const kebabName = name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+  if (iconMap[kebabName]) {
+    return iconMap[kebabName];
+  }
+
+  // Fallback
+  return LucideIcons.HelpCircle;
+}
+
+export interface IconProps {
+  /** Lucide icon component (preferred for type-safe usage) */
+  icon?: LucideIcon;
+  /** Icon name as string (resolved from iconMap) */
+  name?: string;
+  /** Size of the icon */
+  size?: IconSize;
+  /** Color class (Tailwind color class) or 'inherit' for theme default */
+  color?: string;
+  /** Animation type */
+  animation?: IconAnimation;
+  /** Additional CSS classes */
+  className?: string;
+  /** Icon stroke width - uses theme default if not specified */
+  strokeWidth?: number;
+  /** Inline style */
+  style?: React.CSSProperties;
+}
+
+const sizeClasses: Record<IconSize, string> = {
+  xs: 'w-3 h-3',
+  sm: 'w-4 h-4',
+  md: 'w-5 h-5',
+  lg: 'w-6 h-6',
+  xl: 'w-8 h-8',
+};
+
+const animationClasses: Record<IconAnimation, string> = {
+  none: '',
+  spin: 'animate-spin',
+  pulse: 'animate-pulse',
+};
+
+export const Icon: React.FC<IconProps> = ({
+  icon,
+  name,
+  size = 'md',
+  color,
+  animation = 'none',
+  className,
+  strokeWidth,
+  style,
+}) => {
+  // Resolve icon: use provided icon component, or resolve from name
+  const IconComponent = icon ?? (name ? resolveIcon(name) : LucideIcons.HelpCircle);
+
+  // Use theme's icon stroke width if not explicitly set
+  const effectiveStrokeWidth = strokeWidth ?? undefined;
+
+  return (
+    <IconComponent
+      className={cn(
+        sizeClasses[size],
+        animationClasses[animation],
+        // Use theme's icon color or provided color
+        color ? color : 'text-[var(--icon-color,currentColor)]',
+        className
+      )}
+      strokeWidth={effectiveStrokeWidth}
+      style={{
+        ...(effectiveStrokeWidth === undefined
+          ? { strokeWidth: 'var(--icon-stroke-width, 2)' }
+          : {}),
+        ...style,
+      }}
+    />
+  );
+};
+
+Icon.displayName = 'Icon';

package/shells/typescript-shell/packages/client/src/components/atoms/Input.tsx

@@ -0,0 +1,192 @@
+import React from "react";
+import { cn } from "../../lib/cn";
+import { X, ChevronDown, type LucideIcon } from "lucide-react";
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+export interface InputProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "type" | "onChange"
+> {
+  /** Input type - supports 'select' and 'textarea' in addition to standard types */
+  type?:
+    | "text"
+    | "email"
+    | "password"
+    | "number"
+    | "tel"
+    | "url"
+    | "search"
+    | "date"
+    | "datetime-local"
+    | "time"
+    | "checkbox"
+    | "select"
+    | "textarea";
+  error?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  /** Lucide icon component for left side (convenience prop) */
+  icon?: LucideIcon;
+  /** Show clear button when input has value */
+  clearable?: boolean;
+  /** Callback when clear button is clicked */
+  onClear?: () => void;
+  /** Options for select type */
+  options?: SelectOption[];
+  /** Rows for textarea type */
+  rows?: number;
+  /** onChange handler - accepts events from input, select, or textarea */
+  onChange?: React.ChangeEventHandler<
+    HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+  >;
+}
+
+export const Input = React.forwardRef<
+  HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
+  InputProps
+>(
+  (
+    {
+      className,
+      type = "text",
+      error,
+      leftIcon,
+      rightIcon,
+      icon: IconComponent,
+      clearable,
+      onClear,
+      value,
+      options,
+      rows = 3,
+      onChange,
+      ...props
+    },
+    ref,
+  ) => {
+    // Resolve left icon: prefer leftIcon ReactNode, fallback to icon Lucide component
+    const resolvedLeftIcon =
+      leftIcon || (IconComponent && <IconComponent className="h-4 w-4" />);
+    const showClearButton = clearable && value && String(value).length > 0;
+
+    const baseClassName = cn(
+      "block w-full rounded-[var(--radius-sm)] transition-all duration-[var(--transition-fast)]",
+      "border-[length:var(--border-width-thin)] border-[var(--color-border)]",
+      "px-3 py-2 text-sm",
+      "bg-[var(--color-card)] hover:bg-[var(--color-muted)] focus:bg-[var(--color-card)]",
+      "text-[var(--color-foreground)] placeholder:text-[var(--color-muted-foreground)]",
+      "focus:outline-none focus:ring-1 focus:ring-[var(--color-ring)] focus:border-[var(--color-ring)]",
+      "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-[var(--color-muted)]",
+      error
+        ? "border-[var(--color-error)] focus:border-[var(--color-error)] focus:ring-[var(--color-error)]"
+        : "",
+      resolvedLeftIcon && "pl-10",
+      (rightIcon || showClearButton) && "pr-10",
+      className,
+    );
+
+    // Handle select type
+    if (type === "select") {
+      return (
+        <div className="relative">
+          {resolvedLeftIcon && (
+            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-[var(--color-muted-foreground)]">
+              {resolvedLeftIcon}
+            </div>
+          )}
+          <select
+            ref={ref as React.Ref<HTMLSelectElement>}
+            value={value as string}
+            onChange={onChange as React.ChangeEventHandler<HTMLSelectElement>}
+            className={cn(baseClassName, "appearance-none pr-10", className)}
+            {...(props as React.SelectHTMLAttributes<HTMLSelectElement>)}
+          >
+            <option value="">Select...</option>
+            {options?.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-[var(--color-muted-foreground)]">
+            <ChevronDown className="h-4 w-4" />
+          </div>
+        </div>
+      );
+    }
+
+    // Handle textarea type
+    if (type === "textarea") {
+      return (
+        <div className="relative">
+          <textarea
+            ref={ref as React.Ref<HTMLTextAreaElement>}
+            value={value as string}
+            onChange={onChange as React.ChangeEventHandler<HTMLTextAreaElement>}
+            rows={rows}
+            className={baseClassName}
+            {...(props as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}
+          />
+        </div>
+      );
+    }
+
+    // Handle checkbox type
+    if (type === "checkbox") {
+      return (
+        <input
+          ref={ref as React.Ref<HTMLInputElement>}
+          type="checkbox"
+          checked={props.checked}
+          onChange={onChange}
+          className={cn(
+            "h-4 w-4 rounded-[var(--radius-sm)]",
+            "border-[var(--color-border)]",
+            "text-[var(--color-primary)] focus:ring-[var(--color-ring)]",
+            "disabled:opacity-50 disabled:cursor-not-allowed",
+            className,
+          )}
+          {...props}
+        />
+      );
+    }
+
+    // Standard input types
+    return (
+      <div className="relative">
+        {resolvedLeftIcon && (
+          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-[var(--color-muted-foreground)]">
+            {resolvedLeftIcon}
+          </div>
+        )}
+        <input
+          ref={ref as React.Ref<HTMLInputElement>}
+          type={type}
+          value={value}
+          onChange={onChange}
+          className={baseClassName}
+          {...props}
+        />
+        {showClearButton && (
+          <button
+            type="button"
+            onClick={onClear}
+            className="absolute inset-y-0 right-0 pr-3 flex items-center text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+        {rightIcon && !showClearButton && (
+          <div className="absolute inset-y-0 right-0 pr-3 flex items-center text-[var(--color-muted-foreground)]">
+            {rightIcon}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+Input.displayName = "Input";

package/shells/typescript-shell/packages/client/src/components/atoms/Label.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { cn } from "../../lib/cn";
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  required?: boolean;
+}
+
+export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, required, children, ...props }, ref) => {
+    return (
+      <label
+        ref={ref}
+        className={cn(
+          "block text-sm font-bold text-[var(--color-foreground)]",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {required && <span className="text-[var(--color-error)] ml-1">*</span>}
+      </label>
+    );
+  },
+);
+
+Label.displayName = "Label";