@almadar/cli 1.0.5 → 1.0.7

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

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

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

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

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