@syscore/ui-library 1.4.0 → 1.5.1

package/client/components/ui/page-header.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import * as React from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { cn } from "@/lib/utils";
+
+// Root Component
+interface PageHeaderProps extends React.ComponentPropsWithoutRef<"header"> {}
+
+const PageHeader = React.forwardRef<HTMLElement, PageHeaderProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <header ref={ref} className={cn("page-header", className)} {...props}>
+        {children}
+      </header>
+    );
+  }
+);
+PageHeader.displayName = "PageHeader";
+
+// TopSection - flex container for badges/actions
+interface PageHeaderTopSectionProps
+  extends React.ComponentPropsWithoutRef<"div"> {}
+
+const PageHeaderTopSection = React.forwardRef<
+  HTMLDivElement,
+  PageHeaderTopSectionProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn("page-header-top-section", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
+PageHeaderTopSection.displayName = "PageHeaderTopSection";
+
+// LeftContent - groups left-side elements
+interface PageHeaderLeftContentProps
+  extends React.ComponentPropsWithoutRef<"div"> {}
+
+const PageHeaderLeftContent = React.forwardRef<
+  HTMLDivElement,
+  PageHeaderLeftContentProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn("page-header-left-content", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
+PageHeaderLeftContent.displayName = "PageHeaderLeftContent";
+
+// Badge - with optional animation
+interface PageHeaderBadgeProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** Whether to animate the badge appearance */
+  animated?: boolean;
+  /** Show badge conditionally */
+  show?: boolean;
+}
+
+const PageHeaderBadge = React.forwardRef<HTMLDivElement, PageHeaderBadgeProps>(
+  ({ children, animated = false, show = true, className, style, ...props }, ref) => {
+    if (animated) {
+      return (
+        <AnimatePresence>
+          {show && (
+            <motion.div
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.8 }}
+              transition={{ duration: 0.2 }}
+              className={className}
+              style={style}
+            >
+              {children}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      );
+    }
+
+    if (!show) return null;
+
+    return (
+      <div ref={ref} className={className} style={style} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+PageHeaderBadge.displayName = "PageHeaderBadge";
+
+// Title
+interface PageHeaderTitleProps
+  extends React.ComponentPropsWithoutRef<"h1"> {}
+
+const PageHeaderTitle = React.forwardRef<
+  HTMLHeadingElement,
+  PageHeaderTitleProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <h1 ref={ref} className={cn("page-header-title", className)} {...props}>
+      {children}
+    </h1>
+  );
+});
+PageHeaderTitle.displayName = "PageHeaderTitle";
+
+// Description
+interface PageHeaderDescriptionProps
+  extends React.ComponentPropsWithoutRef<"p"> {}
+
+const PageHeaderDescription = React.forwardRef<
+  HTMLParagraphElement,
+  PageHeaderDescriptionProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <p
+      ref={ref}
+      className={cn("page-header-description", className)}
+      {...props}
+    >
+      {children}
+    </p>
+  );
+});
+PageHeaderDescription.displayName = "PageHeaderDescription";
+
+// Compound exports
+export {
+  PageHeader,
+  PageHeaderTopSection,
+  PageHeaderLeftContent,
+  PageHeaderBadge,
+  PageHeaderTitle,
+  PageHeaderDescription,
+};

package/client/components/ui/standard-table.tsx

@@ -0,0 +1,554 @@
+"use client";
+
+import * as React from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { cn } from "@/lib/utils";
+import { Button } from "./button";
+import { UtilityChevronDown } from "../icons/UtilityChevronDown";
+
+// Context Definitions
+interface StandardTableContextValue {
+  /** Set of currently expanded row values */
+  expandedValues: Set<string>;
+  /** Check if a row is expanded */
+  isExpanded: (value: string) => boolean;
+  /** Toggle a specific row's expansion */
+  toggle: (value: string) => void;
+  /** Expand all rows */
+  expandAll: () => void;
+  /** Collapse all rows */
+  collapseAll: () => void;
+  /** Check if any row is expanded */
+  hasAnyExpanded: boolean;
+  /** Allow multiple rows to be expanded at once */
+  allowMultiple: boolean;
+}
+
+const StandardTableContext =
+  React.createContext<StandardTableContextValue | null>(null);
+
+interface StandardTableRowContextValue {
+  /** Current row's value */
+  value: string;
+  /** Whether this row is expanded */
+  isExpanded: boolean;
+}
+
+const StandardTableRowContext =
+  React.createContext<StandardTableRowContextValue | null>(null);
+
+// Hooks
+function useStandardTable() {
+  const context = React.useContext(StandardTableContext);
+  if (!context) {
+    throw new Error(
+      "StandardTable components must be used within <StandardTable>",
+    );
+  }
+  return context;
+}
+
+function useStandardTableRow() {
+  const context = React.useContext(StandardTableRowContext);
+  if (!context) {
+    throw new Error(
+      "StandardTableTrigger and StandardTableContent must be used within <StandardTableRow>",
+    );
+  }
+  return context;
+}
+
+// useStandardTableState Hook (for external state management)
+interface UseStandardTableStateOptions {
+  /** Allow multiple rows to be expanded at once */
+  allowMultiple?: boolean;
+  /** Initially expanded row value(s) */
+  defaultExpanded?: string | string[];
+}
+
+interface UseStandardTableStateReturn {
+  /** Current expanded values */
+  expandedValues: Set<string>;
+  /** Set expanded values */
+  setExpandedValues: (values: Set<string>) => void;
+  /** Check if any row is expanded */
+  hasAnyExpanded: boolean;
+  /** Toggle all rows */
+  toggleAll: () => void;
+}
+
+function useStandardTableState(
+  options: UseStandardTableStateOptions = {},
+): UseStandardTableStateReturn {
+  const { allowMultiple = false, defaultExpanded } = options;
+
+  // Initialize expanded values from default
+  const getInitialExpanded = (): Set<string> => {
+    if (!defaultExpanded) return new Set();
+    if (Array.isArray(defaultExpanded)) return new Set(defaultExpanded);
+    return new Set([defaultExpanded]);
+  };
+
+  const [expandedValues, setExpandedValues] =
+    React.useState<Set<string>>(getInitialExpanded);
+  const [isAllExpanded, setIsAllExpanded] = React.useState(false);
+
+  const hasAnyExpanded = React.useMemo(
+    () => isAllExpanded || expandedValues.size > 0,
+    [isAllExpanded, expandedValues],
+  );
+
+  const toggleAll = React.useCallback(() => {
+    if (hasAnyExpanded) {
+      setIsAllExpanded(false);
+      setExpandedValues(new Set());
+    } else {
+      setIsAllExpanded(true);
+      setExpandedValues(new Set());
+    }
+  }, [hasAnyExpanded]);
+
+  return {
+    expandedValues,
+    setExpandedValues,
+    hasAnyExpanded,
+    toggleAll,
+  };
+}
+
+// StandardTable (Root Component)
+interface StandardTableProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** Allow multiple rows to be expanded at once (default: false for accordion behavior) */
+  allowMultiple?: boolean;
+  /** Initially expanded row value(s) (uncontrolled) */
+  defaultExpanded?: string | string[];
+  /** Controlled expanded values */
+  expandedValues?: Set<string>;
+  /** Controlled callback when expanded values change */
+  onExpandedChange?: (values: Set<string>) => void;
+}
+
+const StandardTable = React.forwardRef<HTMLDivElement, StandardTableProps>(
+  (
+    {
+      allowMultiple = false,
+      defaultExpanded,
+      expandedValues: controlledExpandedValues,
+      onExpandedChange,
+      children,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    // Initialize expanded values from default
+    const getInitialExpanded = (): Set<string> => {
+      if (!defaultExpanded) return new Set();
+      if (Array.isArray(defaultExpanded)) return new Set(defaultExpanded);
+      return new Set([defaultExpanded]);
+    };
+
+    const [uncontrolledExpandedValues, setUncontrolledExpandedValues] =
+      React.useState<Set<string>>(getInitialExpanded);
+    const [isAllExpanded, setIsAllExpanded] = React.useState(false);
+
+    // Determine if controlled
+    const isControlled = controlledExpandedValues !== undefined;
+    const expandedValues = isControlled
+      ? controlledExpandedValues
+      : uncontrolledExpandedValues;
+
+    // Check if any row is expanded
+    const hasAnyExpanded = React.useMemo(
+      () => isAllExpanded || expandedValues.size > 0,
+      [isAllExpanded, expandedValues],
+    );
+
+    // Check if a specific row is expanded
+    const isExpanded = React.useCallback(
+      (value: string): boolean => isAllExpanded || expandedValues.has(value),
+      [isAllExpanded, expandedValues],
+    );
+
+    // Toggle a specific row
+    const toggle = React.useCallback(
+      (value: string) => {
+        const newValues = new Set(expandedValues);
+        if (newValues.has(value)) {
+          newValues.delete(value);
+        } else {
+          if (!allowMultiple) {
+            newValues.clear(); // Accordion mode: close all others
+          }
+          newValues.add(value);
+        }
+
+        if (!isControlled) {
+          setUncontrolledExpandedValues(newValues);
+        }
+        onExpandedChange?.(newValues);
+        setIsAllExpanded(false);
+      },
+      [allowMultiple, expandedValues, isControlled, onExpandedChange],
+    );
+
+    // Expand all rows
+    const expandAll = React.useCallback(() => {
+      setIsAllExpanded(true);
+      const emptySet = new Set<string>();
+      if (!isControlled) {
+        setUncontrolledExpandedValues(emptySet);
+      }
+      onExpandedChange?.(emptySet);
+    }, [isControlled, onExpandedChange]);
+
+    // Collapse all rows
+    const collapseAll = React.useCallback(() => {
+      setIsAllExpanded(false);
+      const emptySet = new Set<string>();
+      if (!isControlled) {
+        setUncontrolledExpandedValues(emptySet);
+      }
+      onExpandedChange?.(emptySet);
+    }, [isControlled, onExpandedChange]);
+
+    const contextValue = React.useMemo(
+      () => ({
+        expandedValues,
+        isExpanded,
+        toggle,
+        expandAll,
+        collapseAll,
+        hasAnyExpanded,
+        allowMultiple,
+      }),
+      [
+        expandedValues,
+        isExpanded,
+        toggle,
+        expandAll,
+        collapseAll,
+        hasAnyExpanded,
+        allowMultiple,
+      ],
+    );
+
+    return (
+      <StandardTableContext.Provider value={contextValue}>
+        <div
+          ref={ref}
+          className={cn(
+            "border border-blue-200 rounded-xl overflow-hidden",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </StandardTableContext.Provider>
+    );
+  },
+);
+
+StandardTable.displayName = "StandardTable";
+
+// StandardTableHeader
+interface StandardTableHeaderProps {
+  /** Header title text */
+  title: string;
+  /** Whether any items are expanded */
+  hasExpanded?: boolean;
+  /** Toggle all callback */
+  onToggleAll?: () => void;
+  /** Optional className for the container */
+  className?: string;
+}
+
+const StandardTableHeader = React.forwardRef<
+  HTMLDivElement,
+  StandardTableHeaderProps
+>(({ title, hasExpanded, onToggleAll, className }, ref) => {
+  return (
+    <div ref={ref} className={cn("standard-table-header", className)}>
+      <h2 className="standard-table-header__title body-large">{title}</h2>
+
+      {onToggleAll && (
+        <motion.div
+          animate={{ rotate: hasExpanded ? 180 : 0 }}
+          transition={{ duration: 0.2 }}
+          className="mx-6"
+        >
+          <Button size="icon" onClick={onToggleAll}>
+            <UtilityChevronDown />
+          </Button>
+        </motion.div>
+      )}
+    </div>
+  );
+});
+
+StandardTableHeader.displayName = "StandardTableHeader";
+
+// StandardTableHeaderRow (inside StandardTable with context access)
+interface StandardTableHeaderRowProps {
+  /** Header title text */
+  title: string;
+  /** Optional className for the container */
+  className?: string;
+}
+
+const StandardTableHeaderRow = React.forwardRef<
+  HTMLDivElement,
+  StandardTableHeaderRowProps
+>(({ title, className }, ref) => {
+  const { hasAnyExpanded, expandAll, collapseAll } = useStandardTable();
+
+  const handleToggleAll = React.useCallback(() => {
+    if (hasAnyExpanded) {
+      collapseAll();
+    } else {
+      expandAll();
+    }
+  }, [hasAnyExpanded, collapseAll, expandAll]);
+
+  return (
+    <div ref={ref} className={cn("standard-table-header", className)}>
+      <h2 className="standard-table-header__title body-large">{title}</h2>
+      <motion.div
+        animate={{ rotate: hasAnyExpanded ? 180 : 0 }}
+        transition={{ duration: 0.2 }}
+        style={{ willChange: "transform" }}
+      >
+        <Button size="icon" onClick={handleToggleAll}>
+          <UtilityChevronDown />
+        </Button>
+      </motion.div>
+    </div>
+  );
+});
+
+StandardTableHeaderRow.displayName = "StandardTableHeaderRow";
+
+// StandardTableRow
+interface StandardTableRowProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** Unique value for this row */
+  value: string;
+}
+
+const StandardTableRow = React.forwardRef<
+  HTMLDivElement,
+  StandardTableRowProps
+>(({ value, children, className, ...props }, ref) => {
+  const { isExpanded: isExpandedFn } = useStandardTable();
+  const isExpanded = isExpandedFn(value);
+
+  const rowContextValue = React.useMemo(
+    () => ({ value, isExpanded }),
+    [value, isExpanded],
+  );
+
+  return (
+    <StandardTableRowContext.Provider value={rowContextValue}>
+      <div ref={ref} className={cn("standard-table-row", className)} {...props}>
+        {children}
+      </div>
+    </StandardTableRowContext.Provider>
+  );
+});
+
+StandardTableRow.displayName = "StandardTableRow";
+
+// StandardTableRowHeader
+type StandardTableRowHeaderProps = React.ComponentPropsWithoutRef<"div">;
+
+const StandardTableRowHeader = React.forwardRef<
+  HTMLDivElement,
+  StandardTableRowHeaderProps
+>(({ children, className, onClick, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      onClick={onClick}
+      className={cn("standard-table-row-header", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
+
+StandardTableRowHeader.displayName = "StandardTableRowHeader";
+
+// StandardTableTrigger (Chevron Button)
+type StandardTableTriggerProps = React.ComponentPropsWithoutRef<"button">;
+
+const StandardTableTrigger = React.forwardRef<
+  HTMLButtonElement,
+  StandardTableTriggerProps
+>(({ className, onClick, ...props }, ref) => {
+  const { toggle } = useStandardTable();
+  const { value, isExpanded } = useStandardTableRow();
+
+  const handleClick = React.useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation(); // Prevent row header click
+      toggle(value);
+      onClick?.(e);
+    },
+    [toggle, value, onClick],
+  );
+
+  return (
+    <motion.div
+      animate={{ rotate: isExpanded ? 180 : 0 }}
+      transition={{ duration: 0.2 }}
+      style={{ willChange: "transform" }}
+    >
+      <Button
+        ref={ref}
+        size="icon"
+        variant="clear"
+        onClick={handleClick}
+        className={cn("standard-table-trigger", className)}
+        {...props}
+      >
+        <UtilityChevronDown />
+      </Button>
+    </motion.div>
+  );
+});
+
+StandardTableTrigger.displayName = "StandardTableTrigger";
+
+// StandardTableContent (Expandable Content Area)
+type StandardTableContentProps = React.ComponentPropsWithoutRef<"div">;
+
+const StandardTableContent = React.forwardRef<
+  HTMLDivElement,
+  StandardTableContentProps
+>(({ children, className, ...props }, ref) => {
+  const { isExpanded } = useStandardTableRow();
+
+  return (
+    <AnimatePresence initial={false}>
+      {isExpanded && (
+        <motion.div
+          initial={{ height: 0, opacity: 0 }}
+          animate={{ height: "auto", opacity: 1 }}
+          exit={{ height: 0, opacity: 0 }}
+          transition={{ duration: 0.3, ease: [0.25, 0.46, 0.45, 0.94] }}
+          className={cn("standard-table-content", className)}
+          style={{ willChange: "opacity" }}
+        >
+          <div
+            ref={ref}
+            className="standard-table-content__inner"
+            {...props}
+          >
+            {children}
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+});
+
+StandardTableContent.displayName = "StandardTableContent";
+
+// StandardTableListRow (for nested items like ListRow)
+interface StandardTableListRowProps
+  extends React.ComponentPropsWithoutRef<"div"> {
+  /** Optional icon element */
+  icon?: React.ReactNode;
+  /** Optional badge element */
+  badge?: React.ReactNode;
+  /** Row title */
+  title: string;
+  /** Optional title className */
+  titleClassName?: string;
+  /** Optional right-side content */
+  rightContent?: React.ReactNode;
+  /** Visual variant */
+  variant?: "default" | "nested";
+}
+
+const StandardTableListRow = React.forwardRef<
+  HTMLDivElement,
+  StandardTableListRowProps
+>(
+  (
+    {
+      icon,
+      badge,
+      title,
+      titleClassName,
+      rightContent,
+      onClick,
+      className,
+      variant = "default",
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        onClick={onClick}
+        className={cn(
+          "standard-table-list-row",
+          variant === "default"
+            ? "standard-table-list-row--default"
+            : "standard-table-list-row--nested",
+          className,
+        )}
+        {...props}
+      >
+        {icon}
+        {badge}
+        <span
+          className={cn(
+            "standard-table-list-row__title",
+            titleClassName || "body-large",
+          )}
+        >
+          {title}
+        </span>
+        {rightContent}
+      </div>
+    );
+  },
+);
+
+StandardTableListRow.displayName = "StandardTableListRow";
+
+type StandardTableContainerProps = React.ComponentPropsWithoutRef<"section">;
+
+const StandardTableContainer = React.forwardRef<
+  HTMLElement,
+  StandardTableContainerProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <section
+      ref={ref}
+      className={cn("standard-table-container", className)}
+      {...props}
+    >
+      {children}
+    </section>
+  );
+});
+
+StandardTableContainer.displayName = "StandardTableContainer";
+
+export {
+  useStandardTableState,
+  StandardTable,
+  StandardTableHeader,
+  StandardTableHeaderRow,
+  StandardTableRow,
+  StandardTableRowHeader,
+  StandardTableTrigger,
+  StandardTableContent,
+  StandardTableListRow,
+  StandardTableContainer,
+};