@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/components/table.tsx

@@ -0,0 +1,577 @@
+import { PaginatedData } from "../support/api";
+import { useLanguage } from "@gostack-framework/react";
+import { cn } from "../support/utils";
+import { AnimatePresence, motion } from "framer-motion";
+import {
+    ChevronDown,
+    ChevronLeft,
+    ChevronRight,
+    Filter,
+    Search,
+    SortDesc,
+} from "lucide-react";
+import * as React from "react";
+import { Button, buttonVariants } from "./button";
+import {
+    ContextMenu,
+    ContextMenuContent,
+    ContextMenuTrigger,
+} from "./context menu core/context-menu";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from "./dropdown-menu";
+import { AdvancedFilters } from "./filter/AdvancedFilters";
+import type { FilterMetadata, FilterValue } from "./filter/types";
+import { Input } from "./input";
+import LoadingState from "./LoadingState";
+import ThemedText from "./ThemedText";
+
+interface TableProps extends Omit<React.ComponentProps<"table">, "data"> {
+    isLoading?: boolean;
+    view?: "list" | "grid";
+    defaultView?: "list" | "grid";
+    hideViewToggle?: boolean;
+    gridView?: React.ReactNode;
+    toolbarContent?: React.ReactNode;
+    showSearch?: boolean;
+    searchValue?: string;
+    onSearchChange?: (value: string) => void;
+    searchPlaceholder?: string;
+    filters?: { label: string; value: string; count?: number }[];
+    selectedFilter?: string;
+    onFilterChange?: (filter: string) => void;
+    advancedFilterMetadata?: FilterMetadata<any>;
+    onAdvancedFilterApply?: (filters: FilterValue<any>[]) => void;
+
+    // Grid Props
+    data?: any[];
+    renderGridItem?: (item: any, index: number) => React.ReactNode;
+    gridClassName?: string;
+}
+
+function Table({
+    className,
+    view: controlledView,
+    defaultView = "list",
+    hideViewToggle,
+    gridView,
+    toolbarContent,
+    showSearch,
+    searchValue,
+    onSearchChange,
+    searchPlaceholder,
+    filters,
+    selectedFilter,
+    onFilterChange,
+    advancedFilterMetadata,
+    onAdvancedFilterApply,
+    data,
+    renderGridItem,
+    isLoading,
+    gridClassName = "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4",
+    ...props
+}: TableProps) {
+    const [internalView, setInternalView] = React.useState<"list" | "grid">(
+        defaultView,
+    );
+    const view = controlledView ?? internalView;
+    const [isAdvancedFilterOpen, setIsAdvancedFilterOpen] =
+        React.useState(false);
+    const [advancedFilters, setAdvancedFilters] = React.useState<
+        FilterValue<any>[]
+    >([]);
+
+    const isGrid = view === "grid" && (gridView || (data && renderGridItem));
+    const hasToolbar =
+        toolbarContent ||
+        isGrid ||
+        showSearch ||
+        (filters && filters.length > 0);
+
+    if (isLoading) {
+        return (
+            <div className="flex items-center justify-center h-64">
+                <LoadingState />
+            </div>
+        );
+    }
+    return (
+        <div
+            className={cn(
+                "w-full flex flex-col",
+                hasToolbar && "gap-4 min-h-[50vh]",
+            )}
+        >
+            {hasToolbar && (
+                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-2">
+                    <div className="flex-1 flex flex-col sm:flex-row items-start sm:items-center gap-4 w-full">
+                        {showSearch && (
+                            <div className="ml-1 relative w-70 shrink-0">
+                                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-dashboard-muted-foreground" />
+                                <Input
+                                    value={searchValue}
+                                    onChange={(e) =>
+                                        onSearchChange?.(e.target.value)
+                                    }
+                                    placeholder={
+                                        searchPlaceholder || "Search..."
+                                    }
+                                    className="bg-dashboard-secondary/40 border-transparent hover:bg-dashboard-secondary/60 pl-9 h-10 focus-visible:ring-1 focus-visible:ring-dashboard-primary text-dashboard-foreground w-full rounded-dashboard-radius transition-colors"
+                                />
+                            </div>
+                        )}
+                        {filters && filters.length > 0 && (
+                            <div className="shrink-0">
+                                <DropdownMenu>
+                                    <DropdownMenuTrigger
+                                        className={buttonVariants({
+                                            variant: "outline",
+                                            className:
+                                                "h-10 px-5 bg-dashboard-primary/10 hover:bg-dashboard-primary/20 border-dashboard-primary/40 rounded-dashboard-radius border flex items-center gap-2 transition-colors",
+                                        })}
+                                    >
+                                        <Filter className="w-4 h-4 text-dashboard-primary" />
+                                        <span className="text-dashboard-primary font-medium text-sm">
+                                            Filter:{" "}
+                                            <span className="font-bold text-dashboard-foreground ml-1">
+                                                {filters.find(
+                                                    (f) =>
+                                                        f.value ===
+                                                        selectedFilter,
+                                                )?.label || "All"}
+                                            </span>
+                                        </span>
+                                    </DropdownMenuTrigger>
+                                    <DropdownMenuContent
+                                        align="end"
+                                        className="w-64 p-3 bg-dashboard-card rounded-xl border border-dashboard-border shadow-2xl"
+                                    >
+                                        <div className="flex flex-col gap-3">
+                                            <div className="flex items-center justify-between px-1">
+                                                <span className="text-xs font-medium text-dashboard-muted-foreground">
+                                                    Ordering
+                                                </span>
+                                                <div className="flex items-center gap-2">
+                                                    <SortDesc className="w-3.5 h-3.5 text-dashboard-muted-foreground" />
+                                                    <button className="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-md bg-dashboard-secondary/80 border border-dashboard-border text-dashboard-foreground hover:bg-dashboard-secondary transition-colors cursor-pointer outline-none">
+                                                        Name{" "}
+                                                        <ChevronDown className="w-3 h-3 opacity-70" />
+                                                    </button>
+                                                </div>
+                                            </div>
+
+                                            <hr className="border-dashboard-border" />
+
+                                            <div className="flex flex-col px-1">
+                                                <span className="text-xs font-medium text-dashboard-muted-foreground mb-2">
+                                                    Display properties
+                                                </span>
+                                                <div className="flex flex-wrap gap-2">
+                                                    {filters.map((filter) => (
+                                                        <button
+                                                            key={filter.value}
+                                                            onClick={() =>
+                                                                onFilterChange?.(
+                                                                    filter.value,
+                                                                )
+                                                            }
+                                                            className={cn(
+                                                                "px-3 py-1 text-xs font-medium rounded-full border transition-colors cursor-pointer",
+                                                                selectedFilter ===
+                                                                    filter.value
+                                                                    ? "border-dashboard-primary/50 bg-dashboard-primary/10 text-dashboard-primary font-semibold"
+                                                                    : "border-dashboard-border bg-dashboard-card/50 text-dashboard-muted-foreground hover:bg-dashboard-secondary hover:text-dashboard-foreground",
+                                                            )}
+                                                        >
+                                                            {filter.label}{" "}
+                                                            {filter.count !==
+                                                                undefined &&
+                                                                `(${filter.count})`}
+                                                        </button>
+                                                    ))}
+                                                </div>
+                                            </div>
+                                            {advancedFilterMetadata && (
+                                                <>
+                                                    <hr className="border-dashboard-border mt-1" />
+                                                    <button
+                                                        onClick={() =>
+                                                            setIsAdvancedFilterOpen(
+                                                                true,
+                                                            )
+                                                        }
+                                                        className="w-full text-left text-xs font-medium text-dashboard-muted-foreground hover:text-dashboard-foreground hover:bg-dashboard-secondary py-1.5 px-2 rounded-md transition-colors cursor-pointer outline-none"
+                                                    >
+                                                        Advanced Filters
+                                                    </button>
+                                                </>
+                                            )}
+                                        </div>
+                                    </DropdownMenuContent>
+                                </DropdownMenu>
+                            </div>
+                        )}
+                        {toolbarContent && (
+                            <div className="flex-1">{toolbarContent}</div>
+                        )}
+                    </div>
+                </div>
+            )}
+
+            <div className="relative">
+                <AnimatePresence mode="wait">
+                    {isGrid ? (
+                        <motion.div
+                            key="grid"
+                            initial={{ opacity: 0, y: 10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: -10 }}
+                            transition={{ duration: 0.2 }}
+                            className={
+                                data && renderGridItem ? gridClassName : ""
+                            }
+                        >
+                            {data && renderGridItem
+                                ? data.map((item, index) =>
+                                      renderGridItem(item, index),
+                                  )
+                                : gridView}
+                        </motion.div>
+                    ) : (
+                        <motion.div
+                            key="list"
+                            initial={{ opacity: 0, y: 10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: -10 }}
+                            transition={{ duration: 0.2 }}
+                            data-slot="table-container"
+                            className="relative w-full overflow-x-auto rounded-lg border border-dashboard-border bg-dashboard-card dark:bg-dashboard-card/40 shadow-xs"
+                        >
+                            <table
+                                data-slot="table"
+                                className={cn(
+                                    "w-full caption-bottom text-sm",
+                                    className,
+                                )}
+                                {...props}
+                            />
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+            </div>
+
+            {advancedFilterMetadata && (
+                <AdvancedFilters
+                    isOpen={isAdvancedFilterOpen}
+                    onClose={() => setIsAdvancedFilterOpen(false)}
+                    metadata={advancedFilterMetadata}
+                    localFilters={advancedFilters}
+                    setLocalFilters={setAdvancedFilters}
+                    onApply={() => {
+                        onAdvancedFilterApply?.(advancedFilters);
+                    }}
+                    onReset={() => {
+                        setAdvancedFilters([]);
+                        onAdvancedFilterApply?.([]);
+                    }}
+                />
+            )}
+        </div>
+    );
+}
+
+export interface TableGridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    contextMenuItems?: React.ReactNode;
+}
+
+function TableGridItem({
+    className,
+    contextMenuItems,
+    children,
+    ...props
+}: TableGridItemProps) {
+    const itemContent = (
+        <div className={className} {...props}>
+            {children}
+        </div>
+    );
+
+    if (contextMenuItems) {
+        return (
+            <ContextMenu>
+                <ContextMenuTrigger asChild>{itemContent}</ContextMenuTrigger>
+                <ContextMenuContent className="w-fit min-w-32">
+                    {contextMenuItems}
+                </ContextMenuContent>
+            </ContextMenu>
+        );
+    }
+
+    return itemContent;
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+    return (
+        <thead
+            data-slot="table-header"
+            className={cn("[&_tr]:border-b", className)}
+            {...props}
+        />
+    );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+    return (
+        <tbody
+            data-slot="table-body"
+            className={cn("[&_tr:last-child]:border-0", className)}
+            {...props}
+        />
+    );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+    return (
+        <tfoot
+            data-slot="table-footer"
+            className={cn(
+                "border-t bg-dashboard-secondary/50 font-medium [&>tr]:last:border-b-0",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export interface TableRowProps extends React.ComponentProps<"tr"> {
+    contextMenuItems?: React.ReactNode;
+}
+
+function TableRow({ className, contextMenuItems, ...props }: TableRowProps) {
+    const rowContent = (
+        <tr
+            data-slot="table-row"
+            className={cn(
+                "border-b border-dashboard-border transition-colors hover:bg-dashboard-secondary has-aria-expanded:bg-dashboard-secondary/40 data-[state=selected]:bg-dashboard-secondary/50",
+                className,
+            )}
+            {...props}
+        />
+    );
+
+    if (contextMenuItems) {
+        return (
+            <ContextMenu>
+                <ContextMenuTrigger asChild>{rowContent}</ContextMenuTrigger>
+                <ContextMenuContent className="w-fit min-w-32">
+                    {contextMenuItems}
+                </ContextMenuContent>
+            </ContextMenu>
+        );
+    }
+
+    return rowContent;
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+    return (
+        <th
+            data-slot="table-head"
+            className={cn(
+                "h-8 px-3 py-1.5 text-left align-middle whitespace-nowrap bg-dashboard-secondary/40 border-b border-dashboard-border text-[10.5px] font-semibold uppercase tracking-wider text-dashboard-muted-foreground [&:has([role=checkbox])]:pr-0",
+                className,
+            )}
+            {...props}
+        >
+            {" "}
+            <ThemedText variant="label">{props.children}</ThemedText>
+        </th>
+    );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+    return (
+        <td
+            data-slot="table-cell"
+            className={cn(
+                "h-9 px-3 py-1.5 align-middle whitespace-nowrap text-xs text-dashboard-foreground border-b border-dashboard-border/60 [&:has([role=checkbox])]:pr-0",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function TableCaption({
+    className,
+    ...props
+}: React.ComponentProps<"caption">) {
+    return (
+        <caption
+            data-slot="table-caption"
+            className={cn(
+                "mt-4 text-sm text-[12px] text-dashboard-muted-foreground",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+// ============================================================================
+// Pagination
+// ============================================================================
+
+interface TablePaginationProps<T> {
+    data: PaginatedData<T> | undefined;
+    onPageChange: (page: number) => void;
+    className?: string;
+    showPageNumbers?: boolean;
+    showInfo?: boolean;
+}
+
+function TablePagination<T>({
+    data,
+    onPageChange,
+    className,
+    showPageNumbers = true,
+    showInfo = true,
+}: TablePaginationProps<T>) {
+    const { t } = useLanguage("shared");
+    const currentPage = data?.currentPage ?? 1;
+    const totalPages = data?.lastPage ?? 1;
+    const pageSize = data?.perPage ?? 10;
+    const totalItems = data?.total ?? totalPages * pageSize;
+    const items = data?.items ?? [];
+
+    const canGoPrevious = currentPage > 1;
+    const canGoNext = currentPage < totalPages;
+
+    const getPageNumbers = () => {
+        const pages: (number | string)[] = [];
+        if (totalPages <= 5) {
+            for (let i = 1; i <= totalPages; i++) pages.push(i);
+        } else if (currentPage <= 3) {
+            pages.push(1, 2, 3, 4, "...", totalPages);
+        } else if (currentPage >= totalPages - 2) {
+            pages.push(1, "...", totalPages - 3, totalPages - 2, totalPages - 1, totalPages);
+        } else {
+            pages.push(1, "...", currentPage - 1, currentPage, currentPage + 1, "...", totalPages);
+        }
+        return pages;
+    };
+
+    const startItem = items.length > 0 ? (currentPage - 1) * pageSize + 1 : 0;
+    const endItem = items.length > 0 ? startItem + items.length - 1 : 0;
+
+    return (
+        <div
+            className={cn(
+                "flex flex-col sm:flex-row items-center justify-between gap-3 px-2 py-3",
+                className
+            )}
+        >
+            {showInfo && (
+                <div className="text-xs text-dashboard-muted-foreground font-medium">
+                    {items.length > 0 ? (
+                        <>
+                            {t("common.table.showing", "Showing")}{" "}
+                            <span className="font-semibold text-dashboard-foreground">
+                                {startItem}
+                            </span>{" "}
+                            {t("common.table.to", "to")}{" "}
+                            <span className="font-semibold text-dashboard-foreground">
+                                {endItem}
+                            </span>{" "}
+                            {t("common.table.of", "of")}{" "}
+                            <span className="font-semibold text-dashboard-foreground">
+                                {totalItems}
+                            </span>{" "}
+                            {t("common.table.entries", "entries")}
+                        </>
+                    ) : (
+                        <span className="text-dashboard-muted-foreground">
+                            {t("common.table.noEntries", "No entries to show")}
+                        </span>
+                    )}
+                </div>
+            )}
+
+            <div className="flex items-center gap-1.5">
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    aria-label="Previous page"
+                    onClick={() => onPageChange(currentPage - 1)}
+                    disabled={!canGoPrevious}
+                    className="h-8 w-8 p-0 hover:bg-dashboard-secondary text-dashboard-muted-foreground hover:text-dashboard-foreground disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
+                >
+                    <ChevronLeft className="h-4 w-4 rtl:rotate-180" />
+                </Button>
+
+                {showPageNumbers && (
+                    <div className="flex items-center gap-1">
+                        {getPageNumbers().map((page, index) =>
+                            page === "..." ? (
+                                <span
+                                    key={`ellipsis-${index}`}
+                                    className="w-8 h-8 flex items-center justify-center text-xs text-dashboard-muted-foreground"
+                                >
+                                    ...
+                                </span>
+                            ) : (
+                                <Button
+                                    key={page}
+                                    variant={
+                                        currentPage === page
+                                            ? "default"
+                                            : "ghost"
+                                    }
+                                    size="sm"
+                                    aria-label={`Page ${page}`}
+                                    onClick={() => onPageChange(page as number)}
+                                    className={cn(
+                                        "h-8 w-8 p-0 rounded-dashboard-radius text-sm font-semibold transition-all cursor-pointer",
+                                        currentPage === page
+                                            ? "bg-dashboard-primary text-white"
+                                            : "hover:bg-dashboard-secondary text-dashboard-muted-foreground hover:text-dashboard-foreground bg-transparent",
+                                    )}
+                                >
+                                    {page}
+                                </Button>
+                            ),
+                        )}
+                    </div>
+                )}
+
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    aria-label="Next page"
+                    onClick={() => onPageChange(currentPage + 1)}
+                    disabled={!canGoNext}
+                    className="h-8 w-8 p-0 hover:bg-dashboard-secondary text-dashboard-muted-foreground hover:text-dashboard-foreground disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
+                >
+                    <ChevronRight className="h-4 w-4 rtl:rotate-180" />
+                </Button>
+            </div>
+        </div>
+    );
+}
+
+export {
+    Table,
+    TableBody,
+    TableCaption,
+    TableCell,
+    TableFooter,
+    TableGridItem,
+    TableHead,
+    TableHeader,
+    TablePagination,
+    TableRow,
+};
+
+export type { TablePaginationProps };

package/src/components/tabs.tsx

@@ -0,0 +1,81 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../support/utils";
+
+function Tabs({
+    className,
+    orientation = "horizontal",
+    ...props
+}: TabsPrimitive.Root.Props) {
+    return (
+        <TabsPrimitive.Root
+            data-slot="tabs"
+            data-orientation={orientation}
+            className={cn(
+                "group/tabs flex gap-2 data-horizontal:flex-col",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+const tabsListVariants = cva(
+    "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-0.5 text-dashboard-muted-foreground group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+    {
+        variants: {
+            variant: {
+                default:
+                    "bg-dashboard-card border border-dashboard-border h-8.5",
+                line: "gap-1 bg-transparent border-b border-dashboard-border h-8.5 rounded-none",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    },
+);
+
+function TabsList({
+    className,
+    variant = "default",
+    ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+    return (
+        <TabsPrimitive.List
+            data-slot="tabs-list"
+            data-variant={variant}
+            className={cn(tabsListVariants({ variant }), className)}
+            {...props}
+        />
+    );
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+    return (
+        <TabsPrimitive.Tab
+            data-slot="tabs-trigger"
+            className={cn(
+                "relative inline-flex items-center justify-center gap-1.5 rounded-md px-3 py-1 text-xs font-medium whitespace-nowrap text-dashboard-muted-foreground transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-dashboard-foreground hover:bg-dashboard-secondary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-dashboard-primary/40 disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+                "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent group-data-[variant=line]/tabs-list:data-active:border-transparent",
+                "data-active:bg-dashboard-secondary data-active:text-dashboard-primary data-active:font-semibold",
+                "after:absolute after:bg-dashboard-primary after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-2px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+    return (
+        <TabsPrimitive.Panel
+            data-slot="tabs-content"
+            className={cn("flex-1 text-xs outline-none", className)}
+            {...props}
+        />
+    );
+}
+
+export { Tabs, TabsContent, TabsList, tabsListVariants, TabsTrigger };