@almadar/cli 1.0.5 → 1.0.7

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

@@ -1,264 +0,0 @@
-/**
- * FloatingActionButton Molecule Component
- *
- * A floating action button that can expand into multiple actions vertically.
- * Uses Button atom.
- */
-
-import React, { useState, useRef, useEffect } from "react";
-import type { LucideIcon } from "lucide-react";
-import * as LucideIcons from "lucide-react";
-import { Plus, X } from "lucide-react";
-import { Button } from "../atoms/Button";
-import { cn } from "../../lib/cn";
-
-export interface FloatingAction {
-  /**
-   * Action ID
-   */
-  id: string;
-
-  /**
-   * Action label
-   */
-  label: string;
-
-  /**
-   * Action icon
-   */
-  icon: LucideIcon;
-
-  /**
-   * Action click handler
-   */
-  onClick: () => void;
-
-  /**
-   * Action variant
-   */
-  variant?: "primary" | "secondary" | "success" | "danger" | "warning";
-}
-
-export interface FloatingActionButtonProps {
-  /**
-   * Single action (if only one action, button will directly trigger onClick)
-   */
-  action?: {
-    icon: LucideIcon;
-    onClick: () => void;
-    label?: string;
-    variant?: "primary" | "secondary" | "success" | "danger" | "warning";
-  };
-
-  /**
-   * Multiple actions (if provided, button will expand to show all actions)
-   */
-  actions?: FloatingAction[];
-
-  /**
-   * Icon name (simplified API for pattern compatibility)
-   */
-  icon?: string;
-
-  /**
-   * Click handler (simplified API for pattern compatibility)
-   */
-  onClick?: () => void;
-
-  /**
-   * Variant (simplified API for pattern compatibility)
-   */
-  variant?: "primary" | "secondary" | "success" | "danger" | "warning";
-
-  /**
-   * Button position
-   * @default 'bottom-right'
-   */
-  position?:
-    | "bottom-right"
-    | "bottom-left"
-    | "bottom-center"
-    | "top-right"
-    | "top-left"
-    | "top-center"
-    | string; // Allow string for generated code compatibility
-
-  /**
-   * Additional CSS classes
-   */
-  className?: string;
-}
-
-// Resolve icon name to LucideIcon component
-function resolveIcon(name: string): LucideIcon {
-  // Convert kebab-case or snake_case to PascalCase
-  const pascalName = name
-    .split(/[-_]/)
-    .map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
-    .join("");
-
-  // Try direct lookup - use unknown intermediate for safe casting
-  const icons = LucideIcons as unknown as Record<
-    string,
-    LucideIcon | undefined
-  >;
-  const icon = icons[pascalName];
-  if (icon) {
-    return icon;
-  }
-
-  // Fallback to Plus icon
-  return Plus;
-}
-
-export const FloatingActionButton: React.FC<FloatingActionButtonProps> = ({
-  action,
-  actions,
-  icon,
-  onClick,
-  variant,
-  position = "bottom-right",
-  className,
-}) => {
-  // If simplified props are provided, construct action from them
-  const resolvedAction =
-    action ??
-    (icon
-      ? {
-          icon: resolveIcon(icon),
-          onClick: onClick ?? (() => {}),
-          variant: variant,
-        }
-      : undefined);
-  const [isExpanded, setIsExpanded] = useState(false);
-  const fabRef = useRef<HTMLDivElement>(null);
-
-  // Close on outside click
-  useEffect(() => {
-    if (!isExpanded || !actions || actions.length <= 1) return;
-
-    const handleClickOutside = (event: MouseEvent) => {
-      if (fabRef.current && !fabRef.current.contains(event.target as Node)) {
-        setIsExpanded(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [isExpanded, actions]);
-
-  const positionClasses: Record<string, string> = {
-    "bottom-right": "bottom-6 right-6",
-    "bottom-left": "bottom-6 left-6",
-    "bottom-center": "bottom-6 left-1/2 -translate-x-1/2",
-    "top-right": "top-6 right-6",
-    "top-left": "top-6 left-6",
-    "top-center": "top-6 left-1/2 -translate-x-1/2",
-  };
-
-  // Single action - direct onClick
-  if (resolvedAction && (!actions || actions.length === 0)) {
-    return (
-      <div className={cn("fixed z-50", positionClasses[position], className)}>
-        <Button
-          variant={resolvedAction.variant || "primary"}
-          size="lg"
-          icon={resolvedAction.icon}
-          onClick={resolvedAction.onClick}
-          className="rounded-[var(--radius-full)] shadow-[var(--shadow-lg)]"
-          aria-label={resolvedAction.label || "Action"}
-        >
-          {resolvedAction.label && (
-            <span className="sr-only">{resolvedAction.label}</span>
-          )}
-        </Button>
-      </div>
-    );
-  }
-
-  // Multiple actions - expandable
-  if (actions && actions.length > 0) {
-    const handleMainClick = () => {
-      if (actions.length === 1) {
-        actions[0].onClick();
-      } else {
-        setIsExpanded(!isExpanded);
-      }
-    };
-
-    return (
-      <div
-        ref={fabRef}
-        className={cn(
-          "fixed z-50 flex flex-col items-end gap-3",
-          positionClasses[position],
-          position.includes("left") && "items-start",
-          className,
-        )}
-      >
-        {/* Expanded Action Buttons */}
-        {isExpanded && actions.length > 1 && (
-          <div
-            className={cn(
-              "flex flex-col gap-3",
-              position.includes("left") ? "items-start" : "items-end",
-            )}
-          >
-            {actions.map((actionItem, index) => (
-              <div
-                key={actionItem.id}
-                className="flex items-center gap-2 transition-all duration-200"
-                style={{
-                  opacity: isExpanded ? 1 : 0,
-                  transform: isExpanded ? "translateY(0)" : "translateY(10px)",
-                  transitionDelay: `${index * 50}ms`,
-                }}
-              >
-                {position.includes("right") && (
-                  <span className="text-sm text-[var(--color-foreground)] dark:text-[var(--color-foreground)] bg-[var(--color-card)] dark:bg-[var(--color-card)] px-2 py-1 rounded shadow-[var(--shadow-sm)] whitespace-nowrap">
-                    {actionItem.label}
-                  </span>
-                )}
-                <Button
-                  variant={actionItem.variant || "primary"}
-                  size="lg"
-                  icon={actionItem.icon}
-                  onClick={() => {
-                    setIsExpanded(false);
-                    actionItem.onClick();
-                  }}
-                  className="rounded-[var(--radius-full)] shadow-[var(--shadow-lg)]"
-                  aria-label={actionItem.label}
-                >
-                  <span className="sr-only">{actionItem.label}</span>
-                </Button>
-                {position.includes("left") && (
-                  <span className="text-sm text-[var(--color-foreground)] dark:text-[var(--color-foreground)] bg-[var(--color-card)] dark:bg-[var(--color-card)] px-2 py-1 rounded shadow-[var(--shadow-sm)] whitespace-nowrap">
-                    {actionItem.label}
-                  </span>
-                )}
-              </div>
-            ))}
-          </div>
-        )}
-
-        {/* Main FAB Button */}
-        <Button
-          variant={isExpanded ? "secondary" : "primary"}
-          size="lg"
-          icon={isExpanded ? X : Plus}
-          onClick={handleMainClick}
-          className="rounded-[var(--radius-full)] shadow-[var(--shadow-lg)] transition-all duration-300"
-          aria-label={isExpanded ? "Close actions" : "Open actions"}
-          aria-expanded={isExpanded}
-        >
-          <span className="sr-only">{isExpanded ? "Close" : "Open"}</span>
-        </Button>
-      </div>
-    );
-  }
-
-  return null;
-};
-
-FloatingActionButton.displayName = "FloatingActionButton";

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

@@ -1,48 +0,0 @@
-/**
- * FormField Molecule Component
- * 
- * A form field wrapper with label, hint, and error message support.
- * **Atomic Design**: Composed using Label and Typography atoms.
- */
-
-import React from 'react';
-import { cn } from '../../lib/cn';
-import { Label } from '../atoms/Label';
-import { Typography } from '../atoms/Typography';
-
-export interface FormFieldProps {
-  label: string;
-  required?: boolean;
-  error?: string;
-  hint?: string;
-  className?: string;
-  children: React.ReactNode;
-}
-
-export const FormField: React.FC<FormFieldProps> = ({
-  label,
-  required,
-  error,
-  hint,
-  className,
-  children,
-}) => {
-  return (
-    <div className={cn('space-y-1.5', className)}>
-      <Label required={required}>{label}</Label>
-      {children}
-      {error && (
-        <Typography variant="caption" color="error">
-          {error}
-        </Typography>
-      )}
-      {hint && !error && (
-        <Typography variant="caption" color="muted">
-          {hint}
-        </Typography>
-      )}
-    </div>
-  );
-};
-
-FormField.displayName = 'FormField';

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

@@ -1,139 +0,0 @@
-/**
- * FormSectionHeader
- *
- * Header component for collapsible form sections.
- * Provides consistent styling and interaction for section headers.
- */
-
-import React from "react";
-import { cn } from "../../lib/cn";
-import { Box } from "../atoms/Box";
-import { HStack } from "../atoms/Stack";
-import { Typography } from "../atoms/Typography";
-import { Badge } from "../atoms/Badge";
-import { Icon } from "../atoms/Icon";
-
-export interface FormSectionHeaderProps {
-  /** Section title */
-  title: string;
-  /** Section subtitle */
-  subtitle?: string;
-  /** Whether section is collapsed */
-  isCollapsed?: boolean;
-  /** Toggle collapse handler (makes header clickable) */
-  onToggle?: () => void;
-  /** Badge text (e.g., "3 fields", "Required", "Complete") */
-  badge?: string;
-  /** Badge variant */
-  badgeVariant?: "default" | "primary" | "success" | "warning" | "danger";
-  /** Icon name to show before title */
-  icon?: string;
-  /** Whether section has validation errors */
-  hasErrors?: boolean;
-  /** Whether section is complete */
-  isComplete?: boolean;
-  /** Additional CSS classes */
-  className?: string;
-}
-
-export const FormSectionHeader: React.FC<FormSectionHeaderProps> = ({
-  title,
-  subtitle,
-  isCollapsed = false,
-  onToggle,
-  badge,
-  badgeVariant = "default",
-  icon,
-  hasErrors = false,
-  isComplete = false,
-  className,
-}) => {
-  const isClickable = !!onToggle;
-
-  // Determine effective badge variant based on state
-  const effectiveBadgeVariant = hasErrors
-    ? "danger"
-    : isComplete
-      ? "success"
-      : badgeVariant;
-
-  // Determine status icon
-  const statusIcon = hasErrors
-    ? "alert-circle"
-    : isComplete
-      ? "check-circle"
-      : null;
-
-  return (
-    <Box
-      className={cn(
-        "px-4 py-3 bg-[var(--color-muted)] rounded-t-lg",
-        isClickable &&
-          "cursor-pointer hover:bg-[var(--color-surface-hover)] transition-colors",
-        className,
-      )}
-      onClick={isClickable ? onToggle : undefined}
-    >
-      <HStack justify="between" align="center">
-        <HStack gap="sm" align="center">
-          {/* Custom icon */}
-          {icon && (
-            <Icon
-              name={icon}
-              size="md"
-              className="text-[var(--color-muted-foreground)]"
-            />
-          )}
-
-          {/* Status icon */}
-          {statusIcon && (
-            <Icon
-              name={statusIcon}
-              size="md"
-              className={
-                hasErrors
-                  ? "text-[var(--color-error)]"
-                  : "text-[var(--color-success)]"
-              }
-            />
-          )}
-
-          {/* Title and subtitle */}
-          <Box>
-            <Typography variant="label" weight="semibold">
-              {title}
-            </Typography>
-            {subtitle && (
-              <Typography variant="caption" color="muted">
-                {subtitle}
-              </Typography>
-            )}
-          </Box>
-        </HStack>
-
-        <HStack gap="sm" align="center">
-          {/* Badge */}
-          {badge && (
-            <Badge variant={effectiveBadgeVariant} size="sm">
-              {badge}
-            </Badge>
-          )}
-
-          {/* Collapse indicator */}
-          {isClickable && (
-            <Icon
-              name="chevron-down"
-              size="md"
-              className={cn(
-                "text-[var(--color-muted-foreground)] transition-transform",
-                isCollapsed && "-rotate-90",
-              )}
-            />
-          )}
-        </HStack>
-      </HStack>
-    </Box>
-  );
-};
-
-FormSectionHeader.displayName = "FormSectionHeader";

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

@@ -1,194 +0,0 @@
-/**
- * Grid Component
- * 
- * A CSS Grid wrapper with responsive column support.
- * Useful for creating multi-column layouts.
- */
-import React from 'react';
-import { cn } from '../../lib/cn';
-
-export type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none';
-export type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-export type GridAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-export type GridJustify = 'start' | 'center' | 'end' | 'stretch';
-
-export interface ResponsiveGridCols {
-  /** Base/mobile columns */
-  base?: GridCols;
-  /** Small screens (640px+) */
-  sm?: GridCols;
-  /** Medium screens (768px+) */
-  md?: GridCols;
-  /** Large screens (1024px+) */
-  lg?: GridCols;
-  /** Extra large screens (1280px+) */
-  xl?: GridCols;
-}
-
-export interface GridProps {
-  /** Number of columns (can be responsive object) */
-  cols?: GridCols | ResponsiveGridCols;
-  /** Number of rows */
-  rows?: number;
-  /** Gap between items */
-  gap?: GridGap;
-  /** Row gap (overrides gap for rows) */
-  rowGap?: GridGap;
-  /** Column gap (overrides gap for columns) */
-  colGap?: GridGap;
-  /** Align items on block axis */
-  alignItems?: GridAlign;
-  /** Justify items on inline axis */
-  justifyItems?: GridJustify;
-  /** Auto-flow direction */
-  flow?: 'row' | 'col' | 'row-dense' | 'col-dense';
-  /** Custom class name */
-  className?: string;
-  /** Inline styles */
-  style?: React.CSSProperties;
-  /** Children elements */
-  children: React.ReactNode;
-  /** HTML element to render as */
-  as?: React.ElementType;
-}
-
-const colStyles: Record<GridCols, string> = {
-  none: 'grid-cols-none',
-  1: 'grid-cols-1',
-  2: 'grid-cols-2',
-  3: 'grid-cols-3',
-  4: 'grid-cols-4',
-  5: 'grid-cols-5',
-  6: 'grid-cols-6',
-  7: 'grid-cols-7',
-  8: 'grid-cols-8',
-  9: 'grid-cols-9',
-  10: 'grid-cols-10',
-  11: 'grid-cols-11',
-  12: 'grid-cols-12',
-};
-
-const gapStyles: Record<GridGap, string> = {
-  none: 'gap-0',
-  xs: 'gap-1',
-  sm: 'gap-2',
-  md: 'gap-4',
-  lg: 'gap-6',
-  xl: 'gap-8',
-  '2xl': 'gap-12',
-};
-
-const rowGapStyles: Record<GridGap, string> = {
-  none: 'gap-y-0',
-  xs: 'gap-y-1',
-  sm: 'gap-y-2',
-  md: 'gap-y-4',
-  lg: 'gap-y-6',
-  xl: 'gap-y-8',
-  '2xl': 'gap-y-12',
-};
-
-const colGapStyles: Record<GridGap, string> = {
-  none: 'gap-x-0',
-  xs: 'gap-x-1',
-  sm: 'gap-x-2',
-  md: 'gap-x-4',
-  lg: 'gap-x-6',
-  xl: 'gap-x-8',
-  '2xl': 'gap-x-12',
-};
-
-const alignStyles: Record<GridAlign, string> = {
-  start: 'items-start',
-  center: 'items-center',
-  end: 'items-end',
-  stretch: 'items-stretch',
-  baseline: 'items-baseline',
-};
-
-const justifyStyles: Record<GridJustify, string> = {
-  start: 'justify-items-start',
-  center: 'justify-items-center',
-  end: 'justify-items-end',
-  stretch: 'justify-items-stretch',
-};
-
-const flowStyles = {
-  row: 'grid-flow-row',
-  col: 'grid-flow-col',
-  'row-dense': 'grid-flow-row-dense',
-  'col-dense': 'grid-flow-col-dense',
-};
-
-function getColsClass(cols: GridCols | ResponsiveGridCols): string {
-  if (typeof cols === 'number' || cols === 'none') {
-    return colStyles[cols];
-  }
-
-  const classes: string[] = [];
-  
-  if (cols.base !== undefined) {
-    classes.push(colStyles[cols.base]);
-  }
-  if (cols.sm !== undefined) {
-    classes.push(`sm:${colStyles[cols.sm]}`);
-  }
-  if (cols.md !== undefined) {
-    classes.push(`md:${colStyles[cols.md]}`);
-  }
-  if (cols.lg !== undefined) {
-    classes.push(`lg:${colStyles[cols.lg]}`);
-  }
-  if (cols.xl !== undefined) {
-    classes.push(`xl:${colStyles[cols.xl]}`);
-  }
-
-  return classes.join(' ');
-}
-
-/**
- * Grid - CSS Grid layout wrapper
- */
-export const Grid: React.FC<GridProps> = ({
-  cols = 1,
-  rows,
-  gap = 'md',
-  rowGap,
-  colGap,
-  alignItems,
-  justifyItems,
-  flow,
-  className,
-  style,
-  children,
-  as: Component = 'div',
-}) => {
-  const mergedStyle = rows
-    ? { gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`, ...style }
-    : style;
-
-  return (
-    <Component
-      className={cn(
-        'grid',
-        getColsClass(cols),
-        // Gap (rowGap/colGap override gap)
-        rowGap ? rowGapStyles[rowGap] : colGap ? undefined : gapStyles[gap],
-        colGap ? colGapStyles[colGap] : rowGap ? undefined : undefined,
-        rowGap && colGap ? `${rowGapStyles[rowGap]} ${colGapStyles[colGap]}` : undefined,
-        // Alignment
-        alignItems && alignStyles[alignItems],
-        justifyItems && justifyStyles[justifyItems],
-        // Flow
-        flow && flowStyles[flow],
-        className
-      )}
-      style={mergedStyle}
-    >
-      {children}
-    </Component>
-  );
-};
-
-export default Grid;
-