@almadar/cli 0.3.1 → 0.3.3

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

@@ -0,0 +1,109 @@
+/**
+ * InputGroup Molecule Component
+ *
+ * A component for grouping input with addons (icons, buttons, text).
+ * Uses Input, Button, Icon, and Typography atoms.
+ */
+
+import React from "react";
+import type { LucideIcon } from "lucide-react";
+import { Input, InputProps } from "../atoms/Input";
+import { Icon } from "../atoms/Icon";
+import { Typography } from "../atoms/Typography";
+import { cn } from "../../lib/cn";
+
+export interface InputGroupProps extends Omit<
+  InputProps,
+  "icon" | "iconRight"
+> {
+  /**
+   * Left addon (icon, button, or text)
+   */
+  leftAddon?: React.ReactNode | LucideIcon;
+
+  /**
+   * Right addon (icon, button, or text)
+   */
+  rightAddon?: React.ReactNode | LucideIcon;
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+export const InputGroup: React.FC<InputGroupProps> = ({
+  leftAddon,
+  rightAddon,
+  className: groupClassName,
+  ...inputProps
+}) => {
+  const { className: inputClassName, ...restInputProps } =
+    inputProps as InputProps & { className?: string };
+  const renderAddon = (
+    addon: React.ReactNode | LucideIcon,
+    position: "left" | "right",
+  ) => {
+    if (!addon) return null;
+
+    // Check if it's a LucideIcon
+    if (typeof addon === "function" || (addon as any)?.render) {
+      return (
+        <div
+          className={cn(
+            "flex items-center justify-center px-3",
+            "bg-[var(--color-muted)] dark:bg-[var(--color-muted)]",
+            "border border-[var(--color-border)] dark:border-[var(--color-border)]",
+            position === "left"
+              ? "rounded-l-lg border-r-0"
+              : "rounded-r-lg border-l-0",
+          )}
+        >
+          <Icon icon={addon as LucideIcon} size="sm" />
+        </div>
+      );
+    }
+
+    // Text or other content (buttons removed)
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-center px-3",
+          "bg-[var(--color-muted)] dark:bg-[var(--color-muted)]",
+          "border border-[var(--color-border)] dark:border-[var(--color-border)]",
+          "text-[var(--color-foreground)] dark:text-[var(--color-foreground)]",
+          position === "left"
+            ? "rounded-l-lg border-r-0"
+            : "rounded-r-lg border-l-0",
+        )}
+      >
+        {typeof addon === "string" ? (
+          <Typography variant="small">{addon}</Typography>
+        ) : (
+          addon
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className={cn("flex items-stretch", groupClassName)}>
+      {leftAddon && renderAddon(leftAddon, "left")}
+
+      <div className="flex-1">
+        <Input
+          {...restInputProps}
+          className={cn(
+            leftAddon ? "rounded-l-none" : "",
+            rightAddon ? "rounded-r-none" : "",
+            inputClassName,
+          )}
+        />
+      </div>
+
+      {rightAddon && renderAddon(rightAddon, "right")}
+    </div>
+  );
+};
+
+InputGroup.displayName = "InputGroup";

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { cn } from "../../lib/cn";
+import { Spinner } from "../atoms";
+
+export interface LoadingStateProps {
+  title?: string;
+  message?: string;
+  className?: string;
+}
+
+export const LoadingState: React.FC<LoadingStateProps> = ({
+  title,
+  message = "Loading...",
+  className,
+}) => {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center py-12",
+        className,
+      )}
+    >
+      <Spinner size="lg" />
+      {title && (
+        <h3 className="mt-4 text-lg font-semibold text-[var(--color-foreground)]">
+          {title}
+        </h3>
+      )}
+      <p
+        className={cn(
+          "text-sm text-[var(--color-muted-foreground)]",
+          title ? "mt-2" : "mt-4",
+        )}
+      >
+        {message}
+      </p>
+    </div>
+  );
+};

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

@@ -0,0 +1,266 @@
+/**
+ * Menu Molecule Component
+ *
+ * A dropdown menu component with items, icons, dividers, and sub-menus.
+ * Uses theme-aware CSS variables for styling.
+ */
+
+import React, { useState, useRef, useEffect } from "react";
+import type { LucideIcon } from "lucide-react";
+import { ChevronRight } from "lucide-react";
+import { Icon } from "../atoms/Icon";
+import { Divider } from "../atoms/Divider";
+import { Typography } from "../atoms/Typography";
+import { Badge } from "../atoms/Badge";
+import { cn } from "../../lib/cn";
+
+export interface MenuItem {
+  /** Item ID (auto-generated from label if not provided) */
+  id?: string;
+  /** Item label */
+  label: string;
+  /** Item icon (LucideIcon or string name) */
+  icon?: LucideIcon | string;
+  /** Item badge */
+  badge?: string | number;
+  /** Disable item */
+  disabled?: boolean;
+  /** Item click handler */
+  onClick?: () => void;
+  /** Event name for pattern compatibility */
+  event?: string;
+  /** Variant for styling (pattern compatibility) */
+  variant?: "default" | "danger";
+  /** Sub-menu items */
+  subMenu?: MenuItem[];
+}
+
+export type MenuPosition =
+  | "top-left"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-right"
+  | "top-start"
+  | "top-end"
+  | "bottom-start"
+  | "bottom-end"; // Aliases for pattern compatibility
+
+export interface MenuProps {
+  /** Menu trigger element */
+  trigger: React.ReactNode;
+  /** Menu items */
+  items: MenuItem[];
+  /** Menu position */
+  position?: MenuPosition;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export const Menu: React.FC<MenuProps> = ({
+  trigger,
+  items,
+  position = "bottom-left",
+  className,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeSubMenu, setActiveSubMenu] = useState<string | null>(null);
+  const [triggerRect, setTriggerRect] = useState<DOMRect | null>(null);
+  const triggerRef = useRef<HTMLElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const updatePosition = () => {
+    if (triggerRef.current) {
+      setTriggerRect(triggerRef.current.getBoundingClientRect());
+    }
+  };
+
+  const handleToggle = () => {
+    if (!isOpen) {
+      updatePosition();
+    }
+    setIsOpen(!isOpen);
+    setActiveSubMenu(null);
+  };
+
+  const handleItemClick = (item: MenuItem) => {
+    if (item.disabled) return;
+
+    if (item.subMenu && item.subMenu.length > 0) {
+      setActiveSubMenu(item.id ?? null);
+    } else {
+      item.onClick?.();
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      updatePosition();
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        isOpen &&
+        menuRef.current &&
+        !menuRef.current.contains(e.target as Node) &&
+        triggerRef.current &&
+        !triggerRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false);
+        setActiveSubMenu(null);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+
+  const positionClasses: Record<string, string> = {
+    "top-left": "bottom-full left-0 mb-2",
+    "top-right": "bottom-full right-0 mb-2",
+    "bottom-left": "top-full left-0 mt-2",
+    "bottom-right": "top-full right-0 mt-2",
+    // Aliases for pattern compatibility
+    "top-start": "bottom-full left-0 mb-2",
+    "top-end": "bottom-full right-0 mb-2",
+    "bottom-start": "top-full left-0 mt-2",
+    "bottom-end": "top-full right-0 mt-2",
+  };
+
+  // Wrap non-element trigger in a span
+  const triggerChild = React.isValidElement(trigger) ? (
+    trigger
+  ) : (
+    <span>{trigger}</span>
+  );
+
+  const triggerElement = React.cloneElement(
+    triggerChild as React.ReactElement<any>,
+    {
+      ref: triggerRef,
+      onClick: handleToggle,
+    },
+  );
+
+  // Theme-aware menu container styles
+  const menuContainerStyles = cn(
+    "bg-[var(--color-card)]",
+    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "shadow-[var(--shadow-main)]",
+    "rounded-[var(--radius-sm)]",
+    "min-w-[200px] py-1",
+  );
+
+  const renderMenuItem = (
+    item: MenuItem,
+    hasSubMenu: boolean,
+    index: number,
+  ) => {
+    // Auto-generate id from label if not provided
+    const itemId =
+      item.id ??
+      `item-${item.label.toLowerCase().replace(/\s+/g, "-")}-${index}`;
+    const isDanger = item.variant === "danger";
+
+    return (
+      <button
+        key={itemId}
+        type="button"
+        onClick={() => handleItemClick({ ...item, id: itemId })}
+        disabled={item.disabled}
+        onMouseEnter={() => hasSubMenu && setActiveSubMenu(itemId)}
+        className={cn(
+          "w-full flex items-center justify-between gap-3 px-4 py-2 text-left",
+          "text-sm transition-colors",
+          "hover:bg-[var(--color-muted)]",
+          "focus:outline-none focus:bg-[var(--color-muted)]",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          item.disabled && "cursor-not-allowed",
+          isDanger &&
+            "text-[var(--color-error)] hover:bg-[var(--color-error)]/10",
+        )}
+      >
+        <div className="flex items-center gap-3 flex-1 min-w-0">
+          {item.icon &&
+            (typeof item.icon === "string" ? (
+              <Icon name={item.icon} size="sm" className="flex-shrink-0" />
+            ) : (
+              <Icon icon={item.icon} size="sm" className="flex-shrink-0" />
+            ))}
+          <Typography
+            variant="small"
+            className={cn("flex-1", isDanger && "text-red-600")}
+          >
+            {item.label}
+          </Typography>
+          {item.badge !== undefined && (
+            <Badge variant="default" size="sm">
+              {item.badge}
+            </Badge>
+          )}
+          {hasSubMenu && (
+            <Icon icon={ChevronRight} size="sm" className="flex-shrink-0" />
+          )}
+        </div>
+      </button>
+    );
+  };
+
+  const renderMenuItems = (menuItems: MenuItem[]) => {
+    return menuItems.map((item, index) => {
+      const hasSubMenu = item.subMenu && item.subMenu.length > 0;
+      const isDivider = item.id === "divider" || item.label === "divider";
+      const itemId =
+        item.id ??
+        `item-${item.label.toLowerCase().replace(/\s+/g, "-")}-${index}`;
+
+      if (isDivider) {
+        return <Divider key={`divider-${index}`} className="my-1" />;
+      }
+
+      return (
+        <div key={itemId}>
+          {renderMenuItem(item, !!hasSubMenu, index)}
+          {hasSubMenu && activeSubMenu === itemId && item.subMenu && (
+            <div
+              className={cn(
+                "absolute left-full top-0 ml-2 z-50",
+                menuContainerStyles,
+              )}
+            >
+              {renderMenuItems(item.subMenu)}
+            </div>
+          )}
+        </div>
+      );
+    });
+  };
+
+  return (
+    <div className="relative">
+      {triggerElement}
+      {isOpen && triggerRect && (
+        <div
+          ref={menuRef}
+          className={cn(
+            "absolute z-50",
+            menuContainerStyles,
+            positionClasses[position],
+            className,
+          )}
+          style={{
+            left: position.includes("left") ? 0 : "auto",
+            right: position.includes("right") ? 0 : "auto",
+          }}
+          role="menu"
+        >
+          {renderMenuItems(items)}
+        </div>
+      )}
+    </div>
+  );
+};
+
+Menu.displayName = "Menu";

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

@@ -0,0 +1,171 @@
+/**
+ * Modal Molecule Component
+ *
+ * A modal dialog component with overlay, header, content, and footer.
+ * Uses theme-aware CSS variables for styling.
+ */
+
+import React, { useEffect, useRef } from "react";
+import { X } from "lucide-react";
+import { Icon } from "../atoms/Icon";
+import { Box } from "../atoms/Box";
+import { Typography } from "../atoms/Typography";
+import { Overlay } from "../atoms/Overlay";
+import { cn } from "../../lib/cn";
+
+export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+
+export interface ModalProps {
+  /** Whether the modal is open (defaults to true when rendered by slot wrapper) */
+  isOpen?: boolean;
+  /** Callback when modal should close (injected by slot wrapper) */
+  onClose?: () => void;
+  title?: string;
+  /** Modal content (can be empty if using slot content) */
+  children?: React.ReactNode;
+  footer?: React.ReactNode;
+  size?: ModalSize;
+  showCloseButton?: boolean;
+  closeOnOverlayClick?: boolean;
+  closeOnEscape?: boolean;
+  className?: string;
+}
+
+const sizeClasses: Record<ModalSize, string> = {
+  sm: "max-w-md",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl",
+  full: "max-w-full mx-4",
+};
+
+export const Modal: React.FC<ModalProps> = ({
+  isOpen = true,
+  onClose = () => {},
+  title,
+  children = null,
+  footer,
+  size = "md",
+  showCloseButton = true,
+  closeOnOverlayClick = true,
+  closeOnEscape = true,
+  className,
+}) => {
+  const modalRef = useRef<HTMLDivElement>(null);
+  const previousActiveElement = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      previousActiveElement.current = document.activeElement as HTMLElement;
+      const focusableElements = modalRef.current?.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+      );
+      const firstElement = focusableElements?.[0] as HTMLElement;
+      firstElement?.focus();
+    } else {
+      previousActiveElement.current?.focus();
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen || !closeOnEscape) return;
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, closeOnEscape, onClose]);
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (closeOnOverlayClick && e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  return (
+    <>
+      <Overlay
+        isVisible={isOpen}
+        onClick={handleOverlayClick}
+        className="z-40"
+      />
+
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none">
+        <Box
+          ref={modalRef}
+          bg="surface"
+          border
+          shadow="lg"
+          rounded="md"
+          className={cn(
+            "pointer-events-auto w-full flex flex-col max-h-[90vh]",
+            sizeClasses[size],
+            className,
+          )}
+          role="dialog"
+          aria-modal="true"
+          {...(title && { "aria-labelledby": "modal-title" })}
+        >
+          {/* Header */}
+          {(title || showCloseButton) && (
+            <div
+              className={cn(
+                "px-6 py-4 flex items-center justify-between",
+                "border-b-[length:var(--border-width)] border-[var(--color-border)]",
+              )}
+            >
+              {title && (
+                <Typography variant="h4" as="h2" id="modal-title">
+                  {title}
+                </Typography>
+              )}
+              {showCloseButton && (
+                <button
+                  type="button"
+                  onClick={onClose}
+                  className={cn(
+                    "p-1 transition-colors rounded-[var(--radius-sm)]",
+                    "hover:bg-[var(--color-muted)]",
+                  )}
+                  aria-label="Close modal"
+                >
+                  <Icon icon={X} size="md" />
+                </button>
+              )}
+            </div>
+          )}
+
+          {/* Content */}
+          <div className="flex-1 overflow-y-auto p-6">{children}</div>
+
+          {/* Footer */}
+          {footer && (
+            <div
+              className={cn(
+                "px-6 py-4 bg-[var(--color-muted)]",
+                "border-t-[length:var(--border-width)] border-[var(--color-border)]",
+              )}
+            >
+              {footer}
+            </div>
+          )}
+        </Box>
+      </div>
+    </>
+  );
+};
+
+Modal.displayName = "Modal";