@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/components/ConditionBuilder.tsx

@@ -0,0 +1,322 @@
+import { cn } from "../support/utils";
+import { Plus, Trash2 } from "lucide-react";
+import { Button } from "./button";
+import { Input } from "./input";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "./select";
+
+export interface ConditionField {
+    id: string;
+    label: string;
+    type?: "text" | "select" | "number" | "date";
+    options?: { label: string; value: string }[];
+}
+
+export type LogicalOperator = "AND" | "OR";
+
+export interface ConditionRule {
+    id: string;
+    field: string;
+    operator: string;
+    value: string;
+    logicalOp?: LogicalOperator;
+}
+
+export interface ConditionBuilderProps {
+    fields: ConditionField[];
+    rules: ConditionRule[];
+    onChange: (rules: ConditionRule[]) => void;
+    onApply?: () => void;
+    onReset?: () => void;
+    className?: string;
+    title?: string;
+}
+
+const DEFAULT_OPERATORS = [
+    { label: "equals (=)", value: "=" },
+    { label: "not equals (!=)", value: "!=" },
+    { label: "contains", value: "contains" },
+    { label: "starts with", value: "starts_with" },
+    { label: "is empty", value: "is_empty" },
+    { label: "is not empty", value: "is_not_empty" },
+];
+
+export function ConditionBuilder({
+    fields,
+    rules,
+    onChange,
+    onApply,
+    onReset,
+    className,
+    title = "Condition Builder",
+}: ConditionBuilderProps) {
+    const handleAddRule = (logicalOp: LogicalOperator = "AND") => {
+        const firstField = fields[0]?.id || "";
+        const newRule: ConditionRule = {
+            id: `rule_${Date.now()}_${Math.random().toString(36).substr(2, 4)}`,
+            field: firstField,
+            operator: "=",
+            value: "",
+            logicalOp,
+        };
+        onChange([...rules, newRule]);
+    };
+
+    const handleRemoveRule = (id: string) => {
+        onChange(rules.filter((r) => r.id !== id));
+    };
+
+    const handleUpdateRule = (
+        id: string,
+        patch: Partial<Omit<ConditionRule, "id">>,
+    ) => {
+        onChange(rules.map((r) => (r.id === id ? { ...r, ...patch } : r)));
+    };
+
+    // Human-readable query string preview
+    const queryPreview = rules
+        .map((r, idx) => {
+            const fieldObj = fields.find((f) => f.id === r.field);
+            const fieldLabel = fieldObj?.label || r.field;
+            const opPrefix = idx > 0 ? ` ${r.logicalOp || "AND"} ` : "";
+            return `${opPrefix}${fieldLabel} ${r.operator} "${r.value || "..."}"`;
+        })
+        .join("");
+
+    return (
+        <div
+            className={cn(
+                "p-4 rounded-xl bg-dashboard-card border border-dashboard-border shadow-xl space-y-4 text-xs select-none",
+                className,
+            )}
+        >
+            {/* Header */}
+            <div className="flex items-center justify-between pb-2 border-b border-dashboard-border">
+                <span className="font-semibold text-dashboard-foreground">
+                    {title}
+                </span>
+                {rules.length > 0 && onReset && (
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="xs"
+                        onClick={onReset}
+                        className="text-dashboard-muted-foreground hover:text-dashboard-foreground h-7 px-2"
+                    >
+                        Reset all
+                    </Button>
+                )}
+            </div>
+
+            {/* Rules list */}
+            {rules.length === 0 ? (
+                <div className="py-6 text-center text-dashboard-muted-foreground text-xs">
+                    No active conditions. Click below to add a filter.
+                </div>
+            ) : (
+                <div className="space-y-2.5">
+                    {rules.map((rule, index) => {
+                        const currentField = fields.find(
+                            (f) => f.id === rule.field,
+                        );
+
+                        return (
+                            <div
+                                key={rule.id}
+                                className="flex items-center gap-2 flex-wrap sm:flex-nowrap p-2 rounded-lg bg-dashboard-secondary/40 border border-dashboard-border"
+                            >
+                                {/* Logical Operator pill if not first */}
+                                {index > 0 ? (
+                                    <button
+                                        type="button"
+                                        onClick={() =>
+                                            handleUpdateRule(rule.id, {
+                                                logicalOp:
+                                                    rule.logicalOp === "OR"
+                                                        ? "AND"
+                                                        : "OR",
+                                            })
+                                        }
+                                        className="h-7 px-2 rounded font-mono font-bold text-[10px] bg-dashboard-primary/10 text-dashboard-primary border border-dashboard-primary/20 hover:bg-dashboard-primary/20 transition-colors shrink-0"
+                                    >
+                                        {rule.logicalOp || "AND"}
+                                    </button>
+                                ) : (
+                                    <span className="text-[11px] font-medium text-dashboard-muted-foreground px-1 shrink-0">
+                                        Where
+                                    </span>
+                                )}
+
+                                {/* Field Select */}
+                                <div className="w-36 shrink-0">
+                                    <Select
+                                        value={rule.field}
+                                        onValueChange={(val) =>
+                                            handleUpdateRule(rule.id, {
+                                                field: val ?? "",
+                                                value: "",
+                                            })
+                                        }
+                                    >
+                                        <SelectTrigger className="h-8 text-xs bg-dashboard-background border-dashboard-border">
+                                            <SelectValue placeholder="Field" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            {fields.map((f) => (
+                                                <SelectItem
+                                                    key={f.id}
+                                                    value={f.id}
+                                                >
+                                                    {f.label}
+                                                </SelectItem>
+                                            ))}
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+
+                                {/* Operator Select */}
+                                <div className="w-32 shrink-0">
+                                    <Select
+                                        value={rule.operator}
+                                        onValueChange={(op) =>
+                                            handleUpdateRule(rule.id, {
+                                                operator: op ?? "=",
+                                            })
+                                        }
+                                    >
+                                        <SelectTrigger className="h-8 text-xs bg-dashboard-background border-dashboard-border">
+                                            <SelectValue placeholder="Op" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            {DEFAULT_OPERATORS.map((op) => (
+                                                <SelectItem
+                                                    key={op.value}
+                                                    value={op.value}
+                                                >
+                                                    {op.label}
+                                                </SelectItem>
+                                            ))}
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+
+                                {/* Value Input / Select */}
+                                <div className="flex-1 min-w-[140px]">
+                                    {currentField?.type === "select" &&
+                                    currentField.options ? (
+                                        <Select
+                                            value={rule.value}
+                                            onValueChange={(v) =>
+                                                handleUpdateRule(rule.id, {
+                                                    value: v ?? "",
+                                                })
+                                            }
+                                        >
+                                            <SelectTrigger className="h-8 text-xs bg-dashboard-background border-dashboard-border">
+                                                <SelectValue placeholder="Select value..." />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                {currentField.options.map(
+                                                    (opt) => (
+                                                        <SelectItem
+                                                            key={opt.value}
+                                                            value={opt.value}
+                                                        >
+                                                            {opt.label}
+                                                        </SelectItem>
+                                                    ),
+                                                )}
+                                            </SelectContent>
+                                        </Select>
+                                    ) : (
+                                        <Input
+                                            value={rule.value}
+                                            onChange={(e) =>
+                                                handleUpdateRule(rule.id, {
+                                                    value: e.target.value,
+                                                })
+                                            }
+                                            placeholder="Value..."
+                                            className="h-8 text-xs bg-dashboard-background border-dashboard-border"
+                                            disabled={
+                                                rule.operator === "is_empty" ||
+                                                rule.operator === "is_not_empty"
+                                            }
+                                        />
+                                    )}
+                                </div>
+
+                                {/* Delete Rule Button */}
+                                <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon-xs"
+                                    onClick={() => handleRemoveRule(rule.id)}
+                                    aria-label="Remove condition"
+                                    className="text-dashboard-muted-foreground hover:text-red-400 hover:bg-red-500/10 shrink-0 size-7"
+                                >
+                                    <Trash2 className="w-3.5 h-3.5" />
+                                </Button>
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+
+            {/* Actions Bar */}
+            <div className="flex items-center justify-between pt-2 border-t border-dashboard-border gap-2">
+                <div className="flex items-center gap-2">
+                    <Button
+                        type="button"
+                        variant="outline"
+                        size="xs"
+                        onClick={() => handleAddRule("AND")}
+                        className="h-8 gap-1 bg-dashboard-secondary border-dashboard-border text-dashboard-foreground hover:bg-dashboard-secondary/80 rounded-full"
+                    >
+                        <Plus className="w-3 h-3" />
+                        <span>and</span>
+                    </Button>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        size="xs"
+                        onClick={() => handleAddRule("OR")}
+                        className="h-8 gap-1 bg-dashboard-secondary border-dashboard-border text-dashboard-foreground hover:bg-dashboard-secondary/80 rounded-full"
+                    >
+                        <Plus className="w-3 h-3" />
+                        <span>or</span>
+                    </Button>
+                </div>
+
+                {onApply && (
+                    <Button
+                        type="button"
+                        variant="default"
+                        size="xs"
+                        onClick={onApply}
+                        className="h-8 px-4 bg-dashboard-primary hover:bg-dashboard-primary/90 text-white rounded-full font-medium"
+                    >
+                        Apply Filters
+                    </Button>
+                )}
+            </div>
+
+            {/* Query Preview */}
+            {queryPreview && (
+                <div className="p-2 rounded bg-dashboard-background/80 border border-dashboard-border text-[11px] font-mono text-dashboard-muted-foreground overflow-x-auto whitespace-nowrap">
+                    <span className="text-dashboard-primary font-bold">
+                        Query:
+                    </span>{" "}
+                    {queryPreview}
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default ConditionBuilder;

package/src/components/ConfirmDialog.tsx

@@ -0,0 +1,157 @@
+import { AlertTriangle, CheckCircle2, Info, ShieldAlert } from "lucide-react";
+import * as React from "react";
+import { Button } from "./button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog";
+
+export type ConfirmDialogVariant = "danger" | "warning" | "info" | "success";
+
+export interface ConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  children?: React.ReactNode;
+  variant?: ConfirmDialogVariant;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm: () => void;
+  onCancel?: () => void;
+  isLoading?: boolean;
+  confirmDisabled?: boolean;
+  loadingText?: string;
+  icon?: React.ReactNode;
+  hideIcon?: boolean;
+  maxWidthClassName?: string;
+}
+
+const variantConfigs: Record<
+  ConfirmDialogVariant,
+  {
+    defaultTitle: string;
+    defaultConfirmText: string;
+    icon: React.ReactNode;
+    confirmButtonClass: string;
+    confirmButtonVariant: "destructive" | "default" | "outline";
+  }
+> = {
+  danger: {
+    defaultTitle: "Confirm Deletion",
+    defaultConfirmText: "Delete",
+    icon: (
+      <ShieldAlert className="w-4 h-4 text-dashboard-destructive shrink-0" />
+    ),
+    confirmButtonClass:
+      "bg-dashboard-destructive hover:bg-dashboard-destructive/90 text-white rounded-full text-xs h-8 px-4 font-semibold cursor-pointer shadow-xs",
+    confirmButtonVariant: "destructive",
+  },
+  warning: {
+    defaultTitle: "Warning",
+    defaultConfirmText: "Proceed",
+    icon: <AlertTriangle className="w-4 h-4 text-amber-500 shrink-0" />,
+    confirmButtonClass:
+      "bg-amber-500 hover:bg-amber-600 text-white rounded-full text-xs h-8 px-4 font-semibold cursor-pointer shadow-xs",
+    confirmButtonVariant: "default",
+  },
+  info: {
+    defaultTitle: "Confirm Action",
+    defaultConfirmText: "Confirm",
+    icon: <Info className="w-4 h-4 text-dashboard-primary shrink-0" />,
+    confirmButtonClass:
+      "bg-dashboard-primary hover:bg-dashboard-primary/90 text-white rounded-full text-xs h-8 px-4 font-semibold cursor-pointer shadow-xs",
+    confirmButtonVariant: "default",
+  },
+  success: {
+    defaultTitle: "Success Confirmation",
+    defaultConfirmText: "OK",
+    icon: <CheckCircle2 className="w-4 h-4 text-emerald-500 shrink-0" />,
+    confirmButtonClass:
+      "bg-emerald-600 hover:bg-emerald-700 text-white rounded-full text-xs h-8 px-4 font-semibold cursor-pointer shadow-xs",
+    confirmButtonVariant: "default",
+  },
+};
+
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  variant = "danger",
+  confirmText,
+  cancelText = "Cancel",
+  onConfirm,
+  onCancel,
+  isLoading = false,
+  confirmDisabled = false,
+  loadingText,
+  icon,
+  hideIcon = false,
+  maxWidthClassName = "sm:max-w-md",
+}: ConfirmDialogProps) {
+  const config = variantConfigs[variant];
+
+  const displayTitle = title ?? config.defaultTitle;
+  const displayConfirmText = confirmText ?? config.defaultConfirmText;
+  const displayLoadingText =
+    loadingText ?? (variant === "danger" ? "Deleting..." : "Processing...");
+
+  const headerIcon = hideIcon ? null : (icon ?? config.icon);
+
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel();
+    } else {
+      onOpenChange(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className={`${maxWidthClassName} bg-dashboard-card border-dashboard-border shadow-xl`}
+      >
+        <DialogHeader>
+          <DialogTitle className="text-dashboard-foreground flex items-center gap-2 text-base font-bold">
+            {headerIcon}
+            <span>{displayTitle}</span>
+          </DialogTitle>
+        </DialogHeader>
+
+        {description && (
+          <div className="text-xs text-dashboard-muted-foreground leading-relaxed py-1">
+            {description}
+          </div>
+        )}
+
+        {children}
+
+        <DialogFooter className="gap-2 sm:gap-2 pt-2">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleCancel}
+            disabled={isLoading}
+            className="bg-dashboard-secondary/60 border-dashboard-border text-dashboard-foreground hover:bg-dashboard-secondary rounded-full text-xs h-8 px-4 font-medium cursor-pointer"
+          >
+            {cancelText}
+          </Button>
+          <Button
+            type="button"
+            variant={config.confirmButtonVariant}
+            onClick={onConfirm}
+            disabled={isLoading || confirmDisabled}
+            className={config.confirmButtonClass}
+          >
+            {isLoading ? displayLoadingText : displayConfirmText}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/DataCard.tsx

@@ -0,0 +1,203 @@
+import { Button } from "./button";
+import { ContextMenuAdvanced } from "./context menu core/contextMenuAdvanced";
+import type { TableActionItem } from "./TableActions";
+import { RowActionsDropdown } from "./TableActions";
+import { useContextMenuActions } from "../hooks/useContextMenuActions";
+import { cn } from "../support/utils";
+import { Edit, Trash } from "lucide-react";
+import * as React from "react";
+
+export interface DataCardProperty {
+    label: string;
+    value: React.ReactNode;
+}
+
+export interface DataCardProps<T = any> {
+    /** Item entity bound to this card */
+    item?: T;
+    /** Action items array for context menu and action dropdown */
+    actions?: TableActionItem<T>[];
+    /** Custom right-click context menu renderer override */
+    renderContextMenu?: (item: T) => React.ReactNode;
+    /** Card title */
+    title?: React.ReactNode;
+    /** Subtitle or secondary header label */
+    subtitle?: React.ReactNode;
+    /** Badge text or component rendered in the top right */
+    badge?: React.ReactNode;
+    /** Custom style classes for badge container */
+    badgeClassName?: string;
+    /** Description text */
+    description?: React.ReactNode;
+    /** Key-Value property grid list */
+    properties?: DataCardProperty[];
+    /** Custom main content rendered inside card */
+    children?: React.ReactNode;
+    /** Footer metadata (e.g., counters, status indicators) */
+    footer?: React.ReactNode;
+    /** Variant style for card container border/background emphasis */
+    badgeVariantStyle?: string;
+    /** Click handler for the card */
+    onClick?: (item?: T) => void;
+    /** Quick edit action handler */
+    onEdit?: (item?: T) => void;
+    /** Quick delete action handler */
+    onDelete?: (item?: T) => void;
+    /** Show action dropdown icon at top right */
+    showActionDropdown?: boolean;
+    /** Additional container CSS classes */
+    className?: string;
+}
+
+export function DataCard<T = any>({
+    item,
+    actions,
+    renderContextMenu: customRenderContextMenu,
+    title,
+    subtitle,
+    badge,
+    badgeClassName,
+    description,
+    properties,
+    children,
+    footer,
+    badgeVariantStyle,
+    onClick,
+    onEdit,
+    onDelete,
+    showActionDropdown,
+    className,
+}: DataCardProps<T>) {
+    const { renderContextMenu } = useContextMenuActions(actions);
+    const menuContent = item
+        ? customRenderContextMenu
+            ? customRenderContextMenu(item)
+            : renderContextMenu(item)
+        : null;
+
+    const cardContent = (
+        <div
+            onClick={() => onClick?.(item)}
+            className={cn(
+                "bg-dashboard-card border border-dashboard-border rounded-lg p-3.5 hover:border-dashboard-primary/50 hover:bg-dashboard-secondary transition-all duration-150 cursor-pointer group shadow-xs flex flex-col justify-between relative",
+                badgeVariantStyle,
+                className,
+            )}
+        >
+            <div className="space-y-3">
+                <div className="flex items-start justify-between gap-2">
+                    <div className="space-y-0.5">
+                        {title && (
+                            <h3 className="text-[14px] sm:text-[15px] font-semibold text-dashboard-foreground group-hover:text-dashboard-primary transition-colors line-clamp-1 leading-snug">
+                                {title}
+                            </h3>
+                        )}
+                        {subtitle && (
+                            <p className="text-xs text-dashboard-muted-foreground line-clamp-1">
+                                {subtitle}
+                            </p>
+                        )}
+                    </div>
+                    <div className="flex items-center gap-2 shrink-0">
+                        {badge && (
+                            React.isValidElement(badge) ? (
+                                badge
+                            ) : (
+                                <span
+                                    className={cn(
+                                        "px-2 py-0.5 rounded-[5px] text-[10.5px] font-semibold shrink-0 border border-dashboard-border bg-dashboard-secondary text-dashboard-foreground",
+                                        badgeClassName || badgeVariantStyle,
+                                    )}
+                                >
+                                    {badge}
+                                </span>
+                            )
+                        )}
+                        {showActionDropdown && item && actions && (
+                            <div onClick={(e) => e.stopPropagation()}>
+                                <RowActionsDropdown
+                                    item={item}
+                                    actions={actions}
+                                />
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                {description && (
+                    <p className="text-xs text-dashboard-muted-foreground line-clamp-2 leading-relaxed">
+                        {description}
+                    </p>
+                )}
+
+                {properties && properties.length > 0 && (
+                    <div
+                        className={cn(
+                            "grid gap-2 pt-2 border-t border-dashboard-border text-xs",
+                            properties.length === 1
+                                ? "grid-cols-1"
+                                : "grid-cols-2",
+                        )}
+                    >
+                        {properties.map((prop, idx) => (
+                            <div key={idx}>
+                                <span className="text-[10px] font-semibold text-dashboard-muted-foreground block tracking-wider uppercase">
+                                    {prop.label}
+                                </span>
+                                <span className="font-medium text-dashboard-foreground truncate block capitalize text-xs">
+                                    {prop.value ?? "-"}
+                                </span>
+                            </div>
+                        ))}
+                    </div>
+                )}
+
+                {children}
+
+                {footer && <div>{footer}</div>}
+            </div>
+
+            {(onEdit || onDelete) && (
+                <div className="flex items-center justify-end gap-2 pt-3 mt-2 border-t border-dashboard-border">
+                    {onEdit && (
+                        <Button
+                            type="button"
+                            variant="outline"
+                            size="xs"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                onEdit(item);
+                            }}
+                            className="h-6.5 text-[11px] px-2.5 rounded-full border-dashboard-border hover:bg-dashboard-secondary cursor-pointer"
+                        >
+                            <Edit size={11} className="mr-1" /> Edit
+                        </Button>
+                    )}
+                    {onDelete && (
+                        <button
+                            type="button"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                onDelete(item);
+                            }}
+                            className="p-1 hover:bg-dashboard-destructive/15 text-dashboard-destructive rounded-full transition-colors cursor-pointer"
+                            aria-label="Delete item"
+                        >
+                            <Trash size={13} />
+                        </button>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+
+    if (menuContent) {
+        return (
+            <ContextMenuAdvanced menuContent={menuContent}>
+                {cardContent}
+            </ContextMenuAdvanced>
+        );
+    }
+
+    return cardContent;
+}