@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/components/DatePicker.tsx

@@ -0,0 +1,397 @@
+import React, { useEffect, useMemo, useState } from "react";
+import {
+    Calendar as CalendarIcon,
+    ChevronLeft,
+    ChevronRight,
+} 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 DatePickerProps extends FieldValidationProps {
+    value?: string | null; // Expected format: YYYY-MM-DD
+    onChange: (date: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+    clearable?: boolean;
+    minDate?: string;
+    maxDate?: string;
+    "aria-label"?: string;
+}
+
+const MONTH_NAMES = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+
+const WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+
+export function DatePicker({
+    value,
+    onChange,
+    placeholder = "mm/dd/yyyy",
+    disabled = false,
+    className,
+    id,
+    clearable = true,
+    minDate,
+    maxDate,
+    "aria-label": ariaLabel,
+    error,
+    errors,
+    payloadKey,
+    errorKey,
+    containerClassName,
+    errorClassName,
+}: DatePickerProps) {
+    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);
+
+    // Initial viewing month/year based on value or today
+    const parsedDate = useMemo(() => {
+        if (!value) return null;
+        const clean = value.split("T")[0].trim();
+        const parts = clean.split(/[-/]/);
+        if (parts.length === 3) {
+            if (parts[0].length === 4) {
+                const y = Number(parts[0]);
+                const m = Number(parts[1]);
+                const d = Number(parts[2]);
+                if (y && m && d) return new Date(y, m - 1, d);
+            } else if (parts[2].length === 4) {
+                const m = Number(parts[0]);
+                const d = Number(parts[1]);
+                const y = Number(parts[2]);
+                if (y && m && d) return new Date(y, m - 1, d);
+            }
+        }
+        const parsed = new Date(value);
+        return isNaN(parsed.getTime()) ? null : parsed;
+    }, [value]);
+
+    const initialYear = parsedDate ? parsedDate.getFullYear() : new Date().getFullYear();
+    const initialMonth = parsedDate ? parsedDate.getMonth() : new Date().getMonth();
+
+    const [viewYear, setViewYear] = useState(initialYear);
+    const [viewMonth, setViewMonth] = useState(initialMonth);
+
+    // Sync view year/month when value changes or popover opens
+    useEffect(() => {
+        if (parsedDate) {
+            setViewYear(parsedDate.getFullYear());
+            setViewMonth(parsedDate.getMonth());
+        }
+    }, [value]);
+
+    const handleOpenChange = (isOpen: boolean) => {
+        if (isOpen && parsedDate) {
+            setViewYear(parsedDate.getFullYear());
+            setViewMonth(parsedDate.getMonth());
+        }
+        setOpen(isOpen);
+    };
+
+    // Calendar grid calculations
+    const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
+    const firstDayOfWeek = new Date(viewYear, viewMonth, 1).getDay(); // 0 = Sun
+    const prevMonthDays = new Date(viewYear, viewMonth, 0).getDate();
+
+    const isDayDisabled = (day: number) => {
+        if (disabled) return true;
+        const current = new Date(viewYear, viewMonth, day);
+        if (minDate) {
+            const min = new Date(minDate.split("T")[0]);
+            min.setHours(0, 0, 0, 0);
+            if (current < min) return true;
+        }
+        if (maxDate) {
+            const max = new Date(maxDate.split("T")[0]);
+            max.setHours(23, 59, 59, 999);
+            if (current > max) return true;
+        }
+        return false;
+    };
+
+    const handlePrevMonth = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (viewMonth === 0) {
+            setViewMonth(11);
+            setViewYear((y) => y - 1);
+        } else {
+            setViewMonth((m) => m - 1);
+        }
+    };
+
+    const handleNextMonth = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (viewMonth === 11) {
+            setViewMonth(0);
+            setViewYear((y) => y + 1);
+        } else {
+            setViewMonth((m) => m + 1);
+        }
+    };
+
+    const handleSelectDay = (day: number) => {
+        if (isDayDisabled(day)) return;
+        const mm = String(viewMonth + 1).padStart(2, "0");
+        const dd = String(day).padStart(2, "0");
+        const formatted = `${viewYear}-${mm}-${dd}`;
+        onChange(formatted);
+        setOpen(false);
+    };
+
+    const handleSelectToday = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        const now = new Date();
+        const yyyy = now.getFullYear();
+        const mm = String(now.getMonth() + 1).padStart(2, "0");
+        const dd = String(now.getDate()).padStart(2, "0");
+        const formatted = `${yyyy}-${mm}-${dd}`;
+        setViewYear(yyyy);
+        setViewMonth(now.getMonth());
+        onChange(formatted);
+        setOpen(false);
+    };
+
+    const handleClear = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        onChange("");
+        setOpen(false);
+    };
+
+    // Format display string as MM/DD/YYYY to match previous native date styling
+    const displayValue = useMemo(() => {
+        if (!parsedDate) return "";
+        const mm = String(parsedDate.getMonth() + 1).padStart(2, "0");
+        const dd = String(parsedDate.getDate()).padStart(2, "0");
+        const yyyy = parsedDate.getFullYear();
+        return `${mm}/${dd}/${yyyy}`;
+    }, [parsedDate]);
+
+    const isToday = (day: number) => {
+        const today = new Date();
+        return (
+            today.getDate() === day &&
+            today.getMonth() === viewMonth &&
+            today.getFullYear() === viewYear
+        );
+    };
+
+    const isSelected = (day: number) => {
+        if (!parsedDate) return false;
+        return (
+            parsedDate.getDate() === day &&
+            parsedDate.getMonth() === viewMonth &&
+            parsedDate.getFullYear() === viewYear
+        );
+    };
+
+    // Year range for dropdown
+    const years = useMemo(() => {
+        const currentY = new Date().getFullYear();
+        const list: number[] = [];
+        for (let y = currentY - 5; y <= currentY + 10; y++) {
+            list.push(y);
+        }
+        return list;
+    }, []);
+
+    return (
+        <div className={cn("w-full", containerClassName)}>
+            <Popover open={open} onOpenChange={handleOpenChange}>
+                <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>
+                <CalendarIcon className="w-3.5 h-3.5 text-dashboard-muted-foreground shrink-0" />
+            </PopoverTrigger>
+
+            <PopoverContent
+                align="start"
+                sideOffset={4}
+                className="w-72 p-3 bg-dashboard-card border border-dashboard-border rounded-xl shadow-2xl select-none"
+            >
+                {/* Header: Navigation & Selectors */}
+                <div className="flex items-center justify-between pb-2.5 border-b border-dashboard-border/80">
+                    <button
+                        type="button"
+                        onClick={handlePrevMonth}
+                        aria-label="Previous month"
+                        className="h-7 w-7 flex items-center justify-center rounded-lg hover:bg-dashboard-secondary text-dashboard-muted-foreground hover:text-dashboard-foreground transition-colors cursor-pointer"
+                    >
+                        <ChevronLeft className="w-4 h-4 rtl:rotate-180" />
+                    </button>
+
+                    <div className="flex items-center gap-1.5">
+                        <select
+                            value={viewMonth}
+                            onChange={(e) => setViewMonth(Number(e.target.value))}
+                            aria-label="Select month"
+                            className="bg-transparent text-xs font-semibold text-dashboard-foreground cursor-pointer outline-none hover:text-dashboard-primary transition-colors pr-1"
+                        >
+                            {MONTH_NAMES.map((name, idx) => (
+                                <option
+                                    key={name}
+                                    value={idx}
+                                    className="bg-dashboard-card text-dashboard-foreground"
+                                >
+                                    {name}
+                                </option>
+                            ))}
+                        </select>
+
+                        <select
+                            value={viewYear}
+                            onChange={(e) => setViewYear(Number(e.target.value))}
+                            aria-label="Select year"
+                            className="bg-transparent text-xs font-semibold text-dashboard-foreground cursor-pointer outline-none hover:text-dashboard-primary transition-colors"
+                        >
+                            {years.map((y) => (
+                                <option
+                                    key={y}
+                                    value={y}
+                                    className="bg-dashboard-card text-dashboard-foreground"
+                                >
+                                    {y}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+
+                    <button
+                        type="button"
+                        onClick={handleNextMonth}
+                        aria-label="Next month"
+                        className="h-7 w-7 flex items-center justify-center rounded-lg hover:bg-dashboard-secondary text-dashboard-muted-foreground hover:text-dashboard-foreground transition-colors cursor-pointer"
+                    >
+                        <ChevronRight className="w-4 h-4 rtl:rotate-180" />
+                    </button>
+                </div>
+
+                {/* Weekdays */}
+                <div className="grid grid-cols-7 gap-1 pt-2 pb-1 text-center">
+                    {WEEKDAYS.map((wd) => (
+                        <div
+                            key={wd}
+                            className="text-[10px] font-bold text-dashboard-muted-foreground/70 uppercase tracking-wider"
+                        >
+                            {wd}
+                        </div>
+                    ))}
+                </div>
+
+                {/* Days Grid */}
+                <div className="grid grid-cols-7 gap-1">
+                    {/* Preceding empty / last month days */}
+                    {Array.from({ length: firstDayOfWeek }).map((_, i) => {
+                        const dayNum = prevMonthDays - firstDayOfWeek + i + 1;
+                        return (
+                            <div
+                                key={`prev-${i}`}
+                                className="h-8 flex items-center justify-center text-[11px] text-dashboard-muted-foreground/30 select-none"
+                            >
+                                {dayNum}
+                            </div>
+                        );
+                    })}
+
+                    {/* Current Month Days */}
+                    {Array.from({ length: daysInMonth }).map((_, i) => {
+                        const day = i + 1;
+                        const selected = isSelected(day);
+                        const today = isToday(day);
+
+                        const disabledDay = isDayDisabled(day);
+
+                        return (
+                            <button
+                                key={`day-${day}`}
+                                type="button"
+                                disabled={disabledDay}
+                                onClick={() => handleSelectDay(day)}
+                                className={cn(
+                                    "h-8 w-8 mx-auto flex items-center justify-center rounded-lg text-xs font-medium transition-all cursor-pointer",
+                                    disabledDay && "opacity-30 cursor-not-allowed hover:bg-transparent text-dashboard-muted-foreground",
+                                    !disabledDay && selected && "bg-dashboard-primary text-white font-bold shadow-xs scale-105",
+                                    !disabledDay && !selected && today && "border border-dashboard-primary/60 text-dashboard-primary hover:bg-dashboard-secondary",
+                                    !disabledDay && !selected && !today && "text-dashboard-foreground hover:bg-dashboard-secondary hover:text-dashboard-foreground"
+                                )}
+                            >
+                                {day}
+                            </button>
+                        );
+                    })}
+                </div>
+
+                {/* Footer Toolbar: Clear & Today */}
+                <div className="flex items-center justify-between pt-2.5 mt-2 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>
+                    <button
+                        type="button"
+                        onClick={handleSelectToday}
+                        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"
+                    >
+                        Today
+                    </button>
+                </div>
+            </PopoverContent>
+        </Popover>
+        <FieldError
+            id={errorId}
+            errors={resolvedErrors}
+            className={errorClassName}
+        />
+    </div>
+);
+}
+
+export default DatePicker;

package/src/components/EmptyState.tsx

@@ -0,0 +1,105 @@
+/**
+ * EmptyState Component
+ *
+ * Placeholder for empty data states.
+ *
+ * @example
+ * ```tsx
+ * // Basic empty state
+ * <EmptyState title="No courses found" />
+ *
+ * // With action
+ * <EmptyState
+ *     title="No courses yet"
+ *     message="Create your first course to get started"
+ *     action={{ label: 'Create Course', onClick: () => navigate('/courses/create') }}
+ * />
+ * ```
+ */
+
+import { useTranslation } from "react-i18next";
+import type { BaseComponentProps, EmptyStateProps } from "../types";
+import { ThemedText } from "../index";
+
+interface Props extends EmptyStateProps, BaseComponentProps {}
+
+/**
+ * Default empty icon
+ */
+function EmptyIcon({ className = "w-12 h-12" }: { className?: string }) {
+    return (
+        <div className="flex items-center justify-center p-3 rounded-xl bg-dashboard-card/50 border border-dashboard-border shadow-xs mb-1">
+            <svg
+                className={`${className} text-dashboard-muted-foreground/60`}
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="1.5"
+                    d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+                />
+            </svg>
+        </div>
+    );
+}
+
+/**
+ * Empty state component
+ */
+export function EmptyState({
+    title,
+    message,
+    icon,
+    action,
+    className = "",
+    testId,
+}: Props) {
+    const { t } = useTranslation();
+
+    const defaultTitle = t("common.noData", "No data found");
+
+    return (
+        <div
+            className={`flex flex-col items-center justify-center p-8 text-center ${className}`}
+            data-testid={testId}
+        >
+            {icon || <EmptyIcon />}
+
+            <ThemedText as="h3" className="mt-3 text-sm font-semibold text-dashboard-foreground">
+                {title || defaultTitle}
+            </ThemedText>
+
+            {message && (
+                <ThemedText as="p" className="mt-1.5 text-xs text-dashboard-muted-foreground max-w-sm">
+                    {message}
+                </ThemedText>
+            )}
+
+            {action && (
+                <button
+                    onClick={action.onClick}
+                    disabled={action.disabled || action.loading}
+                    className="mt-4 px-3.5 py-1.5 bg-dashboard-primary text-white text-xs font-medium rounded-lg hover:bg-dashboard-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-xs cursor-pointer"
+                >
+                    {action.loading ? (
+                        <ThemedText as="span" className="flex items-center gap-2">
+                            <span className="animate-spin h-3.5 w-3.5 border-2 border-current border-t-transparent rounded-full" />
+                            {action.label}
+                        </ThemedText>
+                    ) : (
+                        <ThemedText as="span" className="inline-flex items-center gap-1.5">
+                            {action.icon && <ThemedText as="span">{action.icon}</ThemedText>}
+                            {action.label}
+                        </ThemedText>
+                    )}
+                </button>
+            )}
+        </div>
+    );
+}
+
+export default EmptyState;