@almadar/cli 1.0.5 → 1.0.7

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

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

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

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

@@ -1,192 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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";