@almadar/cli 0.3.2 → 1.0.3

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

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

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

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

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