@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/components/layout/FeatureLayout.tsx

@@ -0,0 +1,739 @@
+import { cn } from "../../support/utils";
+import {
+    ChevronDown,
+    KanbanSquare,
+    LayoutGrid,
+    List,
+    Network,
+    Search,
+    X,
+} from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import * as React from "react";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "../dropdown-menu";
+import { FeatureLayoutExportButton } from "./FeatureLayoutExportButton";
+import {
+    FeatureLayoutTabs,
+    type FeatureLayoutTabsProps,
+    type TabItem,
+    useWarnOnRefresh,
+} from "./FeatureLayoutTabs";
+import { InfiniteSelect } from "../InfiniteSelect";
+import {
+    FeatureLayoutKanban,
+    type FeatureLayoutKanbanProps,
+    type KanbanColumnDef,
+    type KanbanItemMoveEvent,
+} from "./kanban";
+
+export type {
+    FeatureLayoutTabsProps,
+    TabItem,
+    FeatureLayoutKanbanProps,
+    KanbanColumnDef,
+    KanbanItemMoveEvent,
+};
+
+export interface FeatureLayoutProps
+    extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * When true (or when hasOpenTabs is true), alerts the user when attempting to refresh
+     * or leave the page that open tabs and unsaved data will be lost.
+     */
+    warnOnRefresh?: boolean;
+    hasOpenTabs?: boolean;
+    warnOnRefreshMessage?: string;
+}
+
+export function FeatureLayout({
+    className,
+    children,
+    warnOnRefresh = false,
+    hasOpenTabs = false,
+    warnOnRefreshMessage,
+    ...props
+}: FeatureLayoutProps) {
+    useWarnOnRefresh(warnOnRefresh || hasOpenTabs, warnOnRefreshMessage);
+
+    return (
+        <div
+            className={cn(
+                "flex flex-col h-full w-full overflow-hidden bg-dashboard-background animate-in fade-in slide-in-from-bottom-4 duration-700",
+                className,
+            )}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+}
+
+// ── Header & Toolbar ─────────────────────────────────────────────────────────
+
+export interface FeatureLayoutHeaderProps
+    extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    subheading?: React.ReactNode;
+    icon?: React.ReactNode | React.ComponentType<{ className?: string }>;
+    actions?: React.ReactNode;
+    badge?: React.ReactNode;
+}
+
+FeatureLayout.Header = function FeatureLayoutHeader({
+    className,
+    title,
+    description,
+    subheading,
+    icon: IconComponent,
+    actions,
+    badge,
+    children,
+    ...props
+}: FeatureLayoutHeaderProps) {
+    const desc = description || subheading;
+    const hasScopeTitle = Boolean(title || desc);
+
+    return (
+        <div
+            className={cn(
+                "z-10 flex shrink-0 flex-col border-b border-dashboard-border/100 bg-dashboard-card w-full",
+                className,
+            )}
+            {...props}
+        >
+            {hasScopeTitle && (
+                <div className="px-4 md:px-6 pt-4 pb-3 flex flex-col gap-1.5 border-b border-dashboard-border/60">
+                    <div className="flex items-center justify-between gap-3 min-w-0">
+                        <div className="flex items-center gap-2.5 min-w-0">
+                            {IconComponent && (
+                                <div className="w-7 h-7 rounded-lg bg-dashboard-primary/15 text-dashboard-primary flex items-center justify-center shrink-0 border border-dashboard-primary/25 shadow-2xs">
+                                    {React.isValidElement(IconComponent) ? (
+                                        IconComponent
+                                    ) : (
+                                        React.createElement(IconComponent as any, { className: "w-4 h-4" })
+                                    )}
+                                </div>
+                            )}
+                            {title && (
+                                <h1 className="text-xl md:text-[23px] font-bold text-dashboard-foreground tracking-[-0.6px] truncate leading-tight">
+                                    {title}
+                                </h1>
+                            )}
+                            {badge}
+                        </div>
+                        {actions && (
+                            <div className="flex items-center gap-2 shrink-0">
+                                {actions}
+                            </div>
+                        )}
+                    </div>
+                    {desc && (
+                        <p className="text-xs text-dashboard-muted-foreground mt-0.5 leading-relaxed max-w-3xl">
+                            {desc}
+                        </p>
+                    )}
+                </div>
+            )}
+
+            {children && (
+                <div className="flex flex-row items-center justify-between gap-3 px-4 md:px-6 w-full min-h-[44px]">
+                    {children}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export interface FeatureLayoutScopeHeaderProps
+    extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    subheading?: React.ReactNode;
+    icon?: React.ReactNode | React.ComponentType<{ className?: string }>;
+    actions?: React.ReactNode;
+    badge?: React.ReactNode;
+}
+
+FeatureLayout.ScopeHeader = function FeatureLayoutScopeHeader({
+    title,
+    description,
+    subheading,
+    icon: IconComponent,
+    actions,
+    badge,
+    className,
+    ...props
+}: FeatureLayoutScopeHeaderProps) {
+    const desc = description || subheading;
+    return (
+        <div
+            className={cn(
+                "px-4 md:px-6 pt-5 pb-3 flex flex-col gap-1.5 border-b border-dashboard-border/60 bg-dashboard-card shrink-0",
+                className,
+            )}
+            {...props}
+        >
+            <div className="flex items-center justify-between gap-3 min-w-0">
+                <div className="flex items-center gap-2.5 min-w-0">
+                    {IconComponent && (
+                        <div className="w-7 h-7 rounded-lg bg-dashboard-primary/15 text-dashboard-primary flex items-center justify-center shrink-0 border border-dashboard-primary/25 shadow-2xs">
+                            {React.isValidElement(IconComponent) ? (
+                                        IconComponent
+                                    ) : (
+                                        React.createElement(IconComponent as any, { className: "w-4 h-4" })
+                                    )}
+                        </div>
+                    )}
+                    {title && (
+                        <h1 className="text-xl md:text-[23px] font-bold text-dashboard-foreground tracking-[-0.6px] truncate leading-tight">
+                            {title}
+                        </h1>
+                    )}
+                    {badge}
+                </div>
+                {actions && (
+                    <div className="flex items-center gap-2 shrink-0">
+                        {actions}
+                    </div>
+                )}
+            </div>
+            {desc && (
+                <p className="text-xs text-dashboard-muted-foreground mt-0.5 leading-relaxed max-w-3xl">
+                    {desc}
+                </p>
+            )}
+        </div>
+    );
+};
+
+FeatureLayout.Title = FeatureLayout.ScopeHeader;
+
+FeatureLayout.Tabs = FeatureLayoutTabs;
+
+type FeatureLayoutToolbarProps = React.HTMLAttributes<HTMLDivElement>;
+
+FeatureLayout.Toolbar = function FeatureLayoutToolbar({
+    className,
+    children,
+    ...props
+}: FeatureLayoutToolbarProps) {
+    return (
+        <div
+            className={cn(
+                "flex items-center justify-end gap-2.5 shrink-0",
+                className,
+            )}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+};
+
+interface ViewToggleProps<T extends string = any> {
+    id?: string;
+    view: T;
+    onChange: (view: T) => void;
+    options?: T[];
+}
+
+FeatureLayout.ViewToggle = function FeatureLayoutViewToggle<
+    T extends string = any,
+>({
+    id,
+    view,
+    onChange,
+    options = ["list", "board"] as any,
+}: ViewToggleProps<T>) {
+    const getViewLabel = (val: string) => {
+        if (val === "tree") return "Tree";
+        if (val === "flow") return "Diagram Flow";
+        if (val === "kanban" || val === "kanaban" || val === "board") return "Kanban";
+        return val;
+    };
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger
+                render={
+                    <button
+                        id={id}
+                        aria-label="Toggle view"
+                        className="flex items-center gap-1.5 h-8 px-2.5 rounded-md text-dashboard-muted-foreground hover:text-dashboard-foreground hover:bg-dashboard-secondary border border-dashboard-border transition-colors outline-none cursor-pointer text-xs font-medium bg-dashboard-card dark:bg-dashboard-card/40"
+                    >
+                        {(view === "list" || view === "tree") && (
+                            <List className="w-3.5 h-3.5" />
+                        )}
+                        {view === "grid" && (
+                            <LayoutGrid className="w-3.5 h-3.5" />
+                        )}
+                        {(view === "board" || view === "kanban" || view === "kanaban") && (
+                            <KanbanSquare className="w-3.5 h-3.5" />
+                        )}
+                        {view === "flow" && <Network className="w-3.5 h-3.5" />}
+                        <span className="capitalize">{getViewLabel(view)}</span>
+                        <ChevronDown className="w-3 h-3 opacity-50 ml-0.5" />
+                    </button>
+                }
+            />
+            <DropdownMenuContent
+                align="end"
+                className="w-36 bg-dashboard-card border border-dashboard-border rounded-lg p-1 shadow-lg"
+            >
+                {options.map((opt) => (
+                    <DropdownMenuItem
+                        key={opt}
+                        onClick={() => onChange(opt)}
+                        className={cn(
+                            "flex items-center gap-2 px-2 py-1.5 text-xs rounded-md cursor-pointer outline-none",
+                            view === opt
+                                ? "bg-dashboard-secondary text-dashboard-foreground font-medium"
+                                : "text-dashboard-muted-foreground hover:bg-dashboard-secondary hover:text-dashboard-foreground",
+                        )}
+                    >
+                        {(opt === "list" || opt === "tree") && (
+                            <List className="w-3.5 h-3.5" />
+                        )}
+                        {opt === "grid" && (
+                            <LayoutGrid className="w-3.5 h-3.5" />
+                        )}
+                        {(opt === "board" || opt === "kanban" || opt === "kanaban") && (
+                            <KanbanSquare className="w-3.5 h-3.5" />
+                        )}
+                        {opt === "flow" && <Network className="w-3.5 h-3.5" />}
+                        <span className="capitalize">{getViewLabel(opt)}</span>
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+};
+
+export interface FeatureLayoutDropdownOption<T = any> {
+    value: string;
+    label: string;
+    icon?: any;
+    data?: T;
+}
+
+export interface FeatureLayoutDropdownProps<T = any> {
+    id?: string;
+    icon?: any;
+    label?: string;
+    value?: string;
+    onChange?: (value: string, item?: T) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    loadingPlaceholder?: string;
+    noItemsPlaceholder?: string;
+    disabled?: boolean;
+    className?: string;
+    contentClassName?: string;
+    align?: "start" | "end" | "center";
+
+    // Static options mode
+    options?: Array<FeatureLayoutDropdownOption<T> | string>;
+
+    // Infinite mode props
+    items?: T[];
+    isLoading?: boolean;
+    isFetchingNextPage?: boolean;
+    hasNextPage?: boolean;
+    fetchNextPage?: () => void;
+    search?: string;
+    onSearchChange?: (search: string) => void;
+    getItemKey?: (item: T) => string;
+    getItemLabel?: (item: T) => string;
+    getItemIcon?: (item: T) => React.ReactNode;
+    selectedLabel?: string;
+    renderCustomItem?: (item: T, closeDropdown: () => void) => React.ReactNode;
+    extraAction?: {
+        id: string;
+        label: string;
+        icon?: React.ReactNode;
+        onClick?: () => void;
+    };
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+}
+
+FeatureLayout.Dropdown = function FeatureLayoutDropdown<T = any>({
+    id,
+    icon,
+    label,
+    value,
+    onChange,
+    placeholder = "Select...",
+    searchPlaceholder = "Search...",
+    loadingPlaceholder,
+    noItemsPlaceholder,
+    disabled = false,
+    className,
+    contentClassName,
+    align = "end",
+    options,
+    items,
+    isLoading = false,
+    isFetchingNextPage = false,
+    hasNextPage = false,
+    fetchNextPage,
+    search,
+    onSearchChange,
+    getItemKey,
+    getItemLabel,
+    getItemIcon,
+    selectedLabel,
+    renderCustomItem,
+    extraAction,
+    header,
+    footer,
+}: FeatureLayoutDropdownProps<T>) {
+    const normalizedItems = React.useMemo(() => {
+        if (items) return items;
+        if (!options) return [];
+        return options.map((opt) =>
+            typeof opt === "string" ? { value: opt, label: opt } : opt,
+        );
+    }, [items, options]);
+
+    return (
+        <InfiniteSelect<any>
+            id={id}
+            variant="toolbar"
+            icon={icon}
+            label={label}
+            value={value}
+            onValueChange={onChange}
+            placeholder={placeholder}
+            searchPlaceholder={searchPlaceholder}
+            loadingPlaceholder={loadingPlaceholder}
+            noItemsPlaceholder={noItemsPlaceholder}
+            disabled={disabled}
+            className={className}
+            contentClassName={contentClassName}
+            align={align}
+            items={normalizedItems}
+            isLoading={isLoading}
+            isFetchingNextPage={isFetchingNextPage}
+            hasNextPage={hasNextPage}
+            fetchNextPage={fetchNextPage}
+            search={search}
+            onSearchChange={onSearchChange}
+            getItemKey={getItemKey}
+            getItemLabel={getItemLabel}
+            getItemIcon={getItemIcon}
+            selectedLabel={selectedLabel}
+            renderCustomItem={renderCustomItem}
+            extraAction={extraAction}
+            header={header}
+            footer={footer}
+        />
+    );
+};
+
+FeatureLayout.Select = FeatureLayout.Dropdown;
+FeatureLayout.InfiniteSelect = FeatureLayout.Dropdown;
+
+FeatureLayout.Search = function FeatureLayoutSearch({
+    id,
+    value,
+    onChange,
+    placeholder = "Search...",
+    className,
+}: {
+    id?: string;
+    value: string;
+    onChange: (v: string) => void;
+    placeholder?: string;
+    className?: string;
+}) {
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [isFocused, setIsFocused] = React.useState(false);
+    const inputRef = React.useRef<HTMLInputElement>(null);
+
+    const hasValue = Boolean(value && value.trim().length > 0);
+    const isExpanded = isHovered || isFocused || hasValue;
+
+    const handleClear = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        onChange("");
+        inputRef.current?.focus();
+    };
+
+    return (
+        <div
+            id={id}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+            onClick={() => inputRef.current?.focus()}
+            className={cn(
+                "relative flex items-center h-8 transition-all duration-300 ease-in-out rounded-md border",
+                isExpanded
+                    ? "w-48 sm:w-56 md:w-64 cursor-text"
+                    : "w-8 cursor-pointer",
+                isFocused
+                    ? "border-dashboard-primary/70 bg-dashboard-secondary ring-1 ring-dashboard-primary/30"
+                    : isExpanded
+                        ? "border-dashboard-border bg-dashboard-secondary shadow-sm"
+                        : "border-transparent bg-transparent hover:bg-dashboard-secondary",
+                className,
+            )}
+        >
+            <Search
+                className={cn(
+                    "w-3.5 h-3.5 absolute transition-all duration-300 pointer-events-none z-10",
+                    isExpanded
+                        ? "left-2.5 text-dashboard-primary"
+                        : "left-1/2 -translate-x-1/2 text-dashboard-muted-foreground",
+                )}
+            />
+
+            <input
+                ref={inputRef}
+                type="text"
+                aria-label={placeholder || "Search"}
+                placeholder={isExpanded ? placeholder : ""}
+                value={value}
+                onFocus={() => setIsFocused(true)}
+                onBlur={() => setIsFocused(false)}
+                onChange={(e) => onChange(e.target.value)}
+                tabIndex={0}
+                className={cn(
+                    "w-full h-full bg-transparent text-xs text-dashboard-foreground placeholder:text-dashboard-muted-foreground outline-none transition-all duration-300 relative z-10",
+                    isExpanded
+                        ? "pl-8 pr-7 opacity-100"
+                        : "pl-8 pr-0 opacity-0 pointer-events-none",
+                )}
+            />
+
+            {isExpanded && hasValue && (
+                <button
+                    type="button"
+                    onClick={handleClear}
+                    aria-label="Clear search"
+                    className="absolute right-2 z-20 p-0.5 rounded-full text-dashboard-muted-foreground hover:text-dashboard-foreground hover:bg-dashboard-card transition-colors cursor-pointer"
+                >
+                    <X className="w-3 h-3" />
+                </button>
+            )}
+        </div>
+    );
+};
+
+FeatureLayout.IconButton = function FeatureLayoutIconButton({
+    id,
+    icon: Icon,
+    onClick,
+    active,
+    ariaLabel,
+}: {
+    id?: string;
+    icon: any;
+    onClick: () => void;
+    active?: boolean;
+    ariaLabel?: string;
+}) {
+    return (
+        <button
+            id={id}
+            aria-label={ariaLabel || "Action"}
+            onClick={onClick}
+            className={cn(
+                "w-8 h-8 rounded-md flex items-center justify-center transition-colors outline-none cursor-pointer border",
+                active
+                    ? "bg-dashboard-secondary text-dashboard-foreground border-dashboard-border"
+                    : "bg-dashboard-card dark:bg-dashboard-card/40 text-dashboard-muted-foreground hover:bg-dashboard-secondary hover:text-dashboard-foreground border-dashboard-border",
+            )}
+        >
+            <Icon className="w-3.5 h-3.5" />
+        </button>
+    );
+};
+
+FeatureLayout.CreateButton = function FeatureLayoutCreateButton({
+    id,
+    icon: Icon,
+    onClick,
+    ariaLabel,
+    children,
+    className,
+}: {
+    id?: string;
+    icon: any;
+    onClick: () => void;
+    ariaLabel?: string;
+    children?: React.ReactNode;
+    className?: string;
+}) {
+    return (
+        <button
+            id={id}
+            aria-label={ariaLabel || "Action"}
+            onClick={onClick}
+            className={cn(
+                "bg-dashboard-primary hover:bg-dashboard-primary/90 text-white px-2.5 py-1 rounded-md flex items-center justify-center gap-1.5 transition-colors outline-none cursor-pointer border border-transparent text-xs font-medium shrink-0",
+                className,
+            )}
+        >
+            <Icon className="w-3.5 h-3.5 shrink-0" />
+            {children}
+        </button>
+    );
+};
+
+FeatureLayout.ExportButton = FeatureLayoutExportButton;
+
+// ── Body & Layout ────────────────────────────────────────────────────────────
+
+FeatureLayout.Body = function FeatureLayoutBody({
+    className,
+    children,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div
+            className={cn(
+                "flex-1 flex flex-row min-h-0 overflow-hidden relative",
+                className,
+            )}
+            {...props}
+        >
+            <AnimatePresence>{children}</AnimatePresence>
+        </div>
+    );
+};
+
+interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+    position?: "left" | "right";
+    width?: number;
+}
+
+FeatureLayout.Sidebar = function FeatureLayoutSidebar({
+    className,
+    position = "left",
+    width = 320,
+    children,
+    ...props
+}: SidebarProps) {
+    return (
+        <motion.div
+            initial={{ width: 0, opacity: 0 }}
+            animate={{ width, opacity: 1 }}
+            exit={{ width: 0, opacity: 0 }}
+            transition={{ duration: 0.25, ease: "easeInOut" }}
+            className={cn(
+                "h-full shrink-0 overflow-hidden flex flex-col z-10",
+                position === "left"
+                    ? "ltr:border-r rtl:border-l border-dashboard-border bg-dashboard-sidebar"
+                    : "ltr:border-l rtl:border-r border-dashboard-border bg-dashboard-card",
+                className,
+            )}
+            {...(props as any)}
+        >
+            <div
+                className="h-full flex flex-col overflow-y-auto"
+                style={{ width: `${width}px` }}
+            >
+                {children}
+            </div>
+        </motion.div>
+    );
+};
+
+FeatureLayout.Content = function FeatureLayoutContent({
+    className,
+    children,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div
+            className={cn(
+                "flex-1 min-w-0 h-full overflow-y-auto bg-dashboard-background px-4",
+                className,
+            )}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+};
+
+FeatureLayout.DetailContent = function FeatureLayoutDetailContent({
+    className,
+    children,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div
+            className={cn(
+                "flex flex-col lg:flex-row gap-6 mx-auto py-6 min-h-full w-full",
+                className,
+            )}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+};
+
+FeatureLayout.DetailMain = function FeatureLayoutDetailMain({
+    className,
+    children,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div
+            className={cn("flex-1 min-w-0 flex flex-col gap-6", className)}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+};
+
+FeatureLayout.DetailSidebar = function FeatureLayoutDetailSidebar({
+    className,
+    children,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div
+            className={cn(
+                "w-full lg:w-[320px] shrink-0 flex flex-col gap-6",
+                className,
+            )}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+};
+
+FeatureLayout.Footer = function FeatureLayoutFooter({
+    className,
+    children,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div
+            className={cn(
+                "sticky bottom-0 w-full mt-auto py-4 px-6 border-t border-dashboard-border bg-dashboard-card flex items-center justify-end gap-3 shrink-0 z-10",
+                className,
+            )}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+};
+
+FeatureLayout.Kanban = FeatureLayoutKanban;
+
+export { FeatureLayoutKanban, useWarnOnRefresh };
+