@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/components/TimePicker.tsx

@@ -0,0 +1,283 @@
+import React, { useMemo, useState } from "react";
+import { Clock } from "lucide-react";
+import { cn } from "../support/utils";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "./popover";
+import {
+    FieldError,
+    FieldValidationProps,
+    resolveFieldErrors,
+    ERROR_OUTLINE_CLASSES,
+} from "./form-error";
+
+export interface TimePickerProps extends FieldValidationProps {
+    value?: string | null; // Expected format: "HH:mm" (24-hour, e.g. "09:00" or "17:30")
+    onChange: (time: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+    clearable?: boolean;
+    use12Hours?: boolean;
+    "aria-label"?: string;
+}
+
+const HOURS_12 = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+const MINUTES_STEP_5 = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
+
+export function TimePicker({
+    value,
+    onChange,
+    placeholder = "--:-- --",
+    disabled = false,
+    className,
+    id,
+    clearable = true,
+    use12Hours = true,
+    "aria-label": ariaLabel,
+    error,
+    errors,
+    payloadKey,
+    errorKey,
+    containerClassName,
+    errorClassName,
+}: TimePickerProps) {
+    const resolvedErrors = useMemo(() => {
+        const key = payloadKey || errorKey || id;
+        return resolveFieldErrors(error, errors, key);
+    }, [error, errors, payloadKey, errorKey, id]);
+
+    const hasError = resolvedErrors.length > 0;
+    const errorId = id ? `${id}-error` : undefined;
+
+    const [open, setOpen] = useState(false);
+
+    // Deconstruct 24h value "HH:mm" into hours, minutes, period
+    const { hour12, minutes, period, raw24Hour } = useMemo(() => {
+        if (!value) {
+            return { hour12: 9, minutes: 0, period: "AM" as const, raw24Hour: 9 };
+        }
+        const [hStr, mStr] = value.split(":");
+        const h = Number(hStr) || 0;
+        const m = Number(mStr) || 0;
+        const p = h >= 12 ? ("PM" as const) : ("AM" as const);
+        const h12 = h % 12 === 0 ? 12 : h % 12;
+        return { hour12: h12, minutes: m, period: p, raw24Hour: h };
+    }, [value]);
+
+    const formatTo24H = (h12: number, m: number, p: "AM" | "PM") => {
+        let h24 = h12;
+        if (p === "PM" && h12 < 12) h24 = h12 + 12;
+        if (p === "AM" && h12 === 12) h24 = 0;
+        const hh = String(h24).padStart(2, "0");
+        const mm = String(m).padStart(2, "0");
+        return `${hh}:${mm}`;
+    };
+
+    const handleSelectHour = (h: number) => {
+        const nextTime = formatTo24H(h, minutes, period);
+        onChange(nextTime);
+    };
+
+    const handleSelectMinute = (m: number) => {
+        const nextTime = formatTo24H(hour12, m, period);
+        onChange(nextTime);
+    };
+
+    const handleSelectPeriod = (p: "AM" | "PM") => {
+        const nextTime = formatTo24H(hour12, minutes, p);
+        onChange(nextTime);
+    };
+
+    const handleSelectNow = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        const now = new Date();
+        const hh = String(now.getHours()).padStart(2, "0");
+        const mm = String(Math.floor(now.getMinutes() / 5) * 5).padStart(2, "0");
+        onChange(`${hh}:${mm}`);
+        setOpen(false);
+    };
+
+    const handleClear = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        onChange("");
+        setOpen(false);
+    };
+
+    // Human readable display
+    const displayValue = useMemo(() => {
+        if (!value) return "";
+        if (!use12Hours) return value;
+        const [hStr, mStr] = value.split(":");
+        const h = Number(hStr) || 0;
+        const m = String(Number(mStr) || 0).padStart(2, "0");
+        const p = h >= 12 ? "PM" : "AM";
+        const h12 = h % 12 === 0 ? 12 : h % 12;
+        const hFormatted = String(h12).padStart(2, "0");
+        return `${hFormatted}:${m} ${p}`;
+    }, [value, use12Hours]);
+
+    return (
+        <div className={cn("w-full", containerClassName)}>
+            <Popover open={open} onOpenChange={setOpen}>
+                <PopoverTrigger
+                    id={id}
+                    disabled={disabled}
+                    aria-label={ariaLabel || placeholder}
+                    aria-invalid={hasError ? true : undefined}
+                    aria-describedby={hasError && errorId ? errorId : undefined}
+                    className={cn(
+                        "h-9 w-full min-w-0 rounded-lg border border-dashboard-border bg-dashboard-background px-3 flex items-center justify-between text-xs text-dashboard-foreground font-normal transition-colors outline-none cursor-pointer",
+                        "hover:bg-dashboard-secondary/40 focus:border-dashboard-primary focus:ring-1 focus:ring-dashboard-primary/20",
+                        disabled && "opacity-50 cursor-not-allowed pointer-events-none",
+                        !displayValue && "text-dashboard-muted-foreground",
+                        className,
+                        hasError && ERROR_OUTLINE_CLASSES,
+                    )}
+                >
+                    <span className="truncate">
+                        {displayValue || placeholder}
+                    </span>
+                    <Clock className="w-3.5 h-3.5 text-dashboard-muted-foreground shrink-0" />
+                </PopoverTrigger>
+
+            <PopoverContent
+                align="start"
+                sideOffset={4}
+                className="w-60 p-3 bg-dashboard-card border border-dashboard-border rounded-xl shadow-2xl select-none"
+            >
+                {/* Header Time Display */}
+                <div className="flex items-center justify-between pb-2 border-b border-dashboard-border/80">
+                    <span className="text-[10px] font-bold text-dashboard-muted-foreground uppercase tracking-wider">
+                        Select Time
+                    </span>
+                    <span className="text-xs font-bold text-dashboard-primary bg-dashboard-primary/10 px-2 py-0.5 rounded-md border border-dashboard-primary/20">
+                        {displayValue || "09:00 AM"}
+                    </span>
+                </div>
+
+                {/* 3 Column Selector: Hours | Minutes | AM/PM */}
+                <div className="grid grid-cols-3 gap-2 py-2.5">
+                    {/* Hours Column */}
+                    <div className="flex flex-col space-y-1">
+                        <span className="text-[10px] font-bold text-center text-dashboard-muted-foreground uppercase">
+                            Hour
+                        </span>
+                        <div className="h-36 overflow-y-auto space-y-0.5 custom-scrollbar pr-0.5">
+                            {HOURS_12.map((h) => {
+                                const selected = value ? hour12 === h : h === 9;
+                                return (
+                                    <button
+                                        key={h}
+                                        type="button"
+                                        onClick={() => handleSelectHour(h)}
+                                        className={cn(
+                                            "w-full h-7 text-xs font-medium rounded-md transition-colors cursor-pointer flex items-center justify-center",
+                                            selected
+                                                ? "bg-dashboard-primary text-white font-bold shadow-xs"
+                                                : "text-dashboard-foreground hover:bg-dashboard-secondary"
+                                        )}
+                                    >
+                                        {String(h).padStart(2, "0")}
+                                    </button>
+                                );
+                            })}
+                        </div>
+                    </div>
+
+                    {/* Minutes Column */}
+                    <div className="flex flex-col space-y-1">
+                        <span className="text-[10px] font-bold text-center text-dashboard-muted-foreground uppercase">
+                            Min
+                        </span>
+                        <div className="h-36 overflow-y-auto space-y-0.5 custom-scrollbar pr-0.5">
+                            {MINUTES_STEP_5.map((m) => {
+                                const selected = value ? minutes === m : m === 0;
+                                return (
+                                    <button
+                                        key={m}
+                                        type="button"
+                                        onClick={() => handleSelectMinute(m)}
+                                        className={cn(
+                                            "w-full h-7 text-xs font-medium rounded-md transition-colors cursor-pointer flex items-center justify-center",
+                                            selected
+                                                ? "bg-dashboard-primary text-white font-bold shadow-xs"
+                                                : "text-dashboard-foreground hover:bg-dashboard-secondary"
+                                        )}
+                                    >
+                                        {String(m).padStart(2, "0")}
+                                    </button>
+                                );
+                            })}
+                        </div>
+                    </div>
+
+                    {/* Period Column */}
+                    <div className="flex flex-col space-y-1">
+                        <span className="text-[10px] font-bold text-center text-dashboard-muted-foreground uppercase">
+                            Period
+                        </span>
+                        <div className="flex flex-col gap-1.5 pt-1">
+                            {(["AM", "PM"] as const).map((p) => {
+                                const selected = value ? period === p : p === "AM";
+                                return (
+                                    <button
+                                        key={p}
+                                        type="button"
+                                        onClick={() => handleSelectPeriod(p)}
+                                        className={cn(
+                                            "w-full h-8 text-xs font-bold rounded-lg transition-colors cursor-pointer flex items-center justify-center border",
+                                            selected
+                                                ? "bg-dashboard-primary text-white border-dashboard-primary shadow-xs"
+                                                : "bg-dashboard-secondary/40 text-dashboard-foreground/80 border-dashboard-border/80 hover:bg-dashboard-secondary hover:text-dashboard-foreground"
+                                        )}
+                                    >
+                                        {p}
+                                    </button>
+                                );
+                            })}
+                        </div>
+                    </div>
+                </div>
+
+                {/* Footer Toolbar: Clear, Now & Done */}
+                <div className="flex items-center justify-between pt-2.5 border-t border-dashboard-border/80">
+                    <button
+                        type="button"
+                        onClick={handleClear}
+                        className="text-[11px] font-medium text-dashboard-muted-foreground hover:text-dashboard-foreground transition-colors cursor-pointer px-1.5 py-0.5 rounded hover:bg-dashboard-secondary/60"
+                    >
+                        Clear
+                    </button>
+                    <div className="flex items-center gap-2">
+                        <button
+                            type="button"
+                            onClick={handleSelectNow}
+                            className="text-[11px] font-semibold text-dashboard-primary hover:underline transition-colors cursor-pointer px-1.5 py-0.5 rounded hover:bg-dashboard-primary/10"
+                        >
+                            Now
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => setOpen(false)}
+                            className="text-[11px] font-semibold bg-dashboard-primary text-white transition-colors cursor-pointer px-2.5 py-0.5 rounded-md hover:bg-dashboard-primary/90"
+                        >
+                            Done
+                        </button>
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
+        <FieldError
+            id={errorId}
+            errors={resolvedErrors}
+            className={errorClassName}
+        />
+    </div>
+);
+}
+
+export default TimePicker;

package/src/components/Tooltip.tsx

@@ -0,0 +1,128 @@
+/**
+ * Tooltip Component
+ *
+ * A reusable tooltip component with smooth animations and multiple placement options.
+ * Wraps children and shows tooltip on hover.
+ */
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+
+type TooltipPlacement = "top" | "bottom" | "left" | "right";
+
+interface TooltipProps {
+    children: ReactNode;
+    content: ReactNode;
+    placement?: TooltipPlacement;
+    delay?: number;
+    disabled?: boolean;
+    parentClassName?: string;
+    childClassName?: string;
+}
+
+const placementStyles: Record<
+    TooltipPlacement,
+    {
+        position: string;
+        initial: string;
+        animate: string;
+    }
+> = {
+    top: {
+        position: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+        initial: "opacity-0 translate-y-1",
+        animate: "opacity-100 translate-y-0",
+    },
+    bottom: {
+        position: "top-full left-1/2 -translate-x-1/2 mt-2",
+        initial: "opacity-0 -translate-y-1",
+        animate: "opacity-100 translate-y-0",
+    },
+    left: {
+        position: "right-full top-1/2 -translate-y-1/2 mr-2",
+        initial: "opacity-0 translate-x-1",
+        animate: "opacity-100 translate-x-0",
+    },
+    right: {
+        position: "left-full top-1/2 -translate-y-1/2 ml-2",
+        initial: "opacity-0 -translate-x-1",
+        animate: "opacity-100 translate-x-0",
+    },
+};
+
+export function Tooltip({
+    children,
+    content,
+    placement = "top",
+    delay = 200,
+    disabled = false,
+    parentClassName = "",
+    childClassName = "",
+}: TooltipProps) {
+    const [isVisible, setIsVisible] = useState(false);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const styles = placementStyles[placement];
+
+    const showTooltip = () => {
+        if (disabled) return;
+        timeoutRef.current = setTimeout(() => {
+            setIsVisible(true);
+            requestAnimationFrame(() => {
+                setIsAnimating(true);
+            });
+        }, delay);
+    };
+
+    const hideTooltip = () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        setIsAnimating(false);
+        setTimeout(() => {
+            setIsVisible(false);
+        }, 150);
+    };
+
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+
+    return (
+        <div
+            ref={containerRef}
+            className={`relative inline-flex ${parentClassName}`}
+            onMouseEnter={showTooltip}
+            onMouseLeave={hideTooltip}
+            onFocus={showTooltip}
+            onBlur={hideTooltip}
+        >
+            {children}
+
+            {isVisible && (
+                <div
+                    role="tooltip"
+                    className={`
+                        absolute z-9999 ${styles.position}
+                        ${childClassName}
+                        px-2.5 py-1 text-[11px] font-medium text-dashboard-foreground
+                        bg-dashboard-card border border-dashboard-border rounded-md shadow-xl
+                        pointer-events-none whitespace-nowrap
+                        transition-all duration-150 ease-out
+                        ${isAnimating ? styles.animate : styles.initial}
+                    `}
+                >
+                    {content}
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default Tooltip;