@almadar/cli 0.3.1 → 0.3.3

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

@@ -0,0 +1,254 @@
+/**
+ * Pagination Molecule Component
+ *
+ * A pagination component with page numbers, previous/next buttons, and ellipsis.
+ * Uses Button, Icon, Typography, and Input atoms.
+ */
+
+import React, { useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "../atoms/Button";
+import { Typography } from "../atoms/Typography";
+import { Input } from "../atoms/Input";
+import { cn } from "../../lib/cn";
+
+export interface PaginationProps {
+  /**
+   * Current page (1-indexed)
+   */
+  currentPage: number;
+
+  /**
+   * Total number of pages
+   */
+  totalPages: number;
+
+  /**
+   * Callback when page changes (optional - can be a no-op if not interactive)
+   */
+  onPageChange?: (page: number) => void;
+
+  /**
+   * Show page size selector
+   * @default false
+   */
+  showPageSize?: boolean;
+
+  /**
+   * Page size options
+   */
+  pageSizeOptions?: number[];
+
+  /**
+   * Current page size
+   */
+  pageSize?: number;
+
+  /**
+   * Callback when page size changes
+   */
+  onPageSizeChange?: (size: number) => void;
+
+  /**
+   * Show jump to page input
+   * @default false
+   */
+  showJumpToPage?: boolean;
+
+  /**
+   * Show total count
+   * @default false
+   */
+  showTotal?: boolean;
+
+  /**
+   * Total items count
+   */
+  totalItems?: number;
+
+  /**
+   * Maximum number of page buttons to show
+   * @default 7
+   */
+  maxVisiblePages?: number;
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+export const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange = () => {},
+  showPageSize = false,
+  pageSizeOptions = [10, 20, 50, 100],
+  pageSize,
+  onPageSizeChange,
+  showJumpToPage = false,
+  showTotal = false,
+  totalItems,
+  maxVisiblePages = 7,
+  className,
+}) => {
+  const [jumpToPage, setJumpToPage] = useState("");
+
+  const handleJumpToPage = () => {
+    const page = parseInt(jumpToPage, 10);
+    if (page >= 1 && page <= totalPages) {
+      onPageChange(page);
+      setJumpToPage("");
+    }
+  };
+
+  const getPageNumbers = () => {
+    const pages: (number | "ellipsis")[] = [];
+    const halfVisible = Math.floor(maxVisiblePages / 2);
+
+    if (totalPages <= maxVisiblePages) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      if (currentPage <= halfVisible + 1) {
+        for (let i = 1; i <= maxVisiblePages - 2; i++) {
+          pages.push(i);
+        }
+        pages.push("ellipsis");
+        pages.push(totalPages);
+      } else if (currentPage >= totalPages - halfVisible) {
+        pages.push(1);
+        pages.push("ellipsis");
+        for (let i = totalPages - maxVisiblePages + 3; i <= totalPages; i++) {
+          pages.push(i);
+        }
+      } else {
+        pages.push(1);
+        pages.push("ellipsis");
+        for (
+          let i = currentPage - halfVisible + 2;
+          i <= currentPage + halfVisible - 2;
+          i++
+        ) {
+          pages.push(i);
+        }
+        pages.push("ellipsis");
+        pages.push(totalPages);
+      }
+    }
+
+    return pages;
+  };
+
+  const pageNumbers = getPageNumbers();
+
+  return (
+    <div className={cn("flex items-center justify-between gap-4", className)}>
+      <div className="flex items-center gap-2">
+        {showTotal && totalItems !== undefined && (
+          <Typography variant="small" color="secondary">
+            Total: {totalItems}
+          </Typography>
+        )}
+
+        {showPageSize && pageSize && onPageSizeChange && (
+          <div className="flex items-center gap-2">
+            <Typography variant="small" color="secondary">
+              Show:
+            </Typography>
+            <select
+              value={pageSize}
+              onChange={(e) => onPageSizeChange(Number(e.target.value))}
+              className="px-2 py-1 text-sm border-[length:var(--border-width)] border-[var(--color-border)] bg-[var(--color-card)] text-[var(--color-foreground)] font-medium focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)]"
+            >
+              {pageSizeOptions.map((size) => (
+                <option key={size} value={size}>
+                  {size}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+      </div>
+
+      <div className="flex items-center gap-1">
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={currentPage === 1}
+          icon={ChevronLeft}
+        >
+          Previous
+        </Button>
+
+        <div className="flex items-center gap-1">
+          {pageNumbers.map((page, index) => {
+            if (page === "ellipsis") {
+              return (
+                <Typography
+                  key={`ellipsis-${index}`}
+                  variant="small"
+                  color="muted"
+                  className="px-2"
+                >
+                  ...
+                </Typography>
+              );
+            }
+
+            const isActive = page === currentPage;
+
+            return (
+              <Button
+                key={page}
+                variant={isActive ? "primary" : "ghost"}
+                size="sm"
+                onClick={() => onPageChange(page)}
+                className="min-w-[2.5rem]"
+              >
+                {page}
+              </Button>
+            );
+          })}
+        </div>
+
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={currentPage === totalPages}
+          iconRight={ChevronRight}
+        >
+          Next
+        </Button>
+      </div>
+
+      {showJumpToPage && (
+        <div className="flex items-center gap-2">
+          <Typography variant="small" color="secondary">
+            Go to:
+          </Typography>
+          <Input
+            type="number"
+            value={jumpToPage}
+            onChange={(e) => setJumpToPage(e.target.value)}
+            placeholder="Page"
+            className="w-20"
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                handleJumpToPage();
+              }
+            }}
+          />
+          <Button variant="ghost" size="sm" onClick={handleJumpToPage}>
+            Go
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+Pagination.displayName = "Pagination";

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

@@ -0,0 +1,201 @@
+/**
+ * Popover Molecule Component
+ *
+ * A popover component with position variants and click/hover triggers.
+ * Uses Button, Typography, and Icon atoms.
+ */
+
+import React, { useState, useRef, useEffect } from "react";
+import { Typography } from "../atoms/Typography";
+import { cn } from "../../lib/cn";
+
+export type PopoverPosition = "top" | "bottom" | "left" | "right";
+export type PopoverTrigger = "click" | "hover";
+
+export interface PopoverProps {
+  /**
+   * Popover content
+   */
+  content: React.ReactNode;
+
+  /**
+   * Popover trigger element (ReactElement or ReactNode that will be wrapped in span)
+   */
+  children: React.ReactNode;
+
+  /**
+   * Popover position
+   * @default 'bottom'
+   */
+  position?: PopoverPosition;
+
+  /**
+   * Trigger type
+   * @default 'click'
+   */
+  trigger?: PopoverTrigger;
+
+  /**
+   * Show arrow
+   * @default true
+   */
+  showArrow?: boolean;
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+const positionClasses: Record<PopoverPosition, string> = {
+  top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+  left: "right-full top-1/2 -translate-y-1/2 mr-2",
+  right: "left-full top-1/2 -translate-y-1/2 ml-2",
+};
+
+const arrowClasses: Record<PopoverPosition, string> = {
+  top: "top-full left-1/2 -translate-x-1/2 border-t-white border-l-transparent border-r-transparent border-b-transparent",
+  bottom:
+    "bottom-full left-1/2 -translate-x-1/2 border-b-white border-l-transparent border-r-transparent border-t-transparent",
+  left: "left-full top-1/2 -translate-y-1/2 border-l-white border-t-transparent border-b-transparent border-r-transparent",
+  right:
+    "right-full top-1/2 -translate-y-1/2 border-r-white border-t-transparent border-b-transparent border-l-transparent",
+};
+
+export const Popover: React.FC<PopoverProps> = ({
+  content,
+  children,
+  position = "bottom",
+  trigger = "click",
+  showArrow = true,
+  className,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [triggerRect, setTriggerRect] = useState<DOMRect | null>(null);
+  const triggerRef = useRef<HTMLElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  const updatePosition = () => {
+    if (triggerRef.current) {
+      setTriggerRect(triggerRef.current.getBoundingClientRect());
+    }
+  };
+
+  const handleOpen = () => {
+    updatePosition();
+    setIsOpen(true);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  const handleToggle = () => {
+    if (isOpen) {
+      handleClose();
+    } else {
+      handleOpen();
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      updatePosition();
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (trigger !== "click") {
+      return;
+    }
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        isOpen &&
+        popoverRef.current &&
+        !popoverRef.current.contains(e.target as Node) &&
+        triggerRef.current &&
+        !triggerRef.current.contains(e.target as Node)
+      ) {
+        handleClose();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen, trigger]);
+
+  const triggerProps =
+    trigger === "click"
+      ? {
+          onClick: handleToggle,
+        }
+      : {
+          onMouseEnter: handleOpen,
+          onMouseLeave: handleClose,
+        };
+
+  // Wrap non-element children in a span
+  const childElement = React.isValidElement(children) ? (
+    children
+  ) : (
+    <span>{children}</span>
+  );
+
+  const triggerElement = React.cloneElement(
+    childElement as React.ReactElement<any>,
+    {
+      ref: triggerRef,
+      ...triggerProps,
+    },
+  );
+
+  return (
+    <>
+      {triggerElement}
+      {isOpen && triggerRect && (
+        <div
+          ref={popoverRef}
+          className={cn(
+            "fixed z-50 p-4",
+            "bg-[var(--color-card)] border-2 border-[var(--color-border)] shadow-[var(--shadow-lg)]",
+            positionClasses[position],
+            className,
+          )}
+          style={{
+            left:
+              position === "left" || position === "right"
+                ? triggerRect.left +
+                  (position === "left" ? 0 : triggerRect.width)
+                : triggerRect.left + triggerRect.width / 2,
+            top:
+              position === "top" || position === "bottom"
+                ? triggerRect.top +
+                  (position === "top" ? 0 : triggerRect.height)
+                : triggerRect.top + triggerRect.height / 2,
+          }}
+          role="dialog"
+          onMouseEnter={trigger === "hover" ? handleOpen : undefined}
+          onMouseLeave={trigger === "hover" ? handleClose : undefined}
+        >
+          {typeof content === "string" ? (
+            <Typography variant="body">{content}</Typography>
+          ) : (
+            content
+          )}
+          {showArrow && (
+            <div
+              className={cn(
+                "absolute w-0 h-0 border-4",
+                arrowClasses[position],
+              )}
+            />
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+Popover.displayName = "Popover";