@xenide-io/the-old-ui-theme 0.2.9 → 0.3.1

package/src/components/ui/DataTable.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { useState, useMemo, type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export interface DataTableColumn<T> {
+  key: string;
+  label: string;
+  render?: (item: T) => ReactNode;
+  sortable?: boolean;
+  className?: string;
+}
+
+export interface DataTableProps<T> {
+  columns: DataTableColumn<T>[];
+  data: T[];
+  pageSize?: number;
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  className?: string;
+}
+
+export function DataTable<T extends Record<string, any>>({
+  columns,
+  data,
+  pageSize = 10,
+  searchable = false,
+  searchPlaceholder = "Search...",
+  className,
+}: DataTableProps<T>) {
+  const [search, setSearch] = useState("");
+  const [sortKey, setSortKey] = useState<string | null>(null);
+  const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
+  const [page, setPage] = useState(0);
+
+  const filtered = useMemo(() => {
+    let items = data;
+    if (search) {
+      const q = search.toLowerCase();
+      items = items.filter((item) =>
+        Object.values(item).some((v) => String(v).toLowerCase().includes(q))
+      );
+    }
+    if (sortKey) {
+      items = [...items].sort((a, b) => {
+        const av = a[sortKey];
+        const bv = b[sortKey];
+        const cmp = av < bv ? -1 : av > bv ? 1 : 0;
+        return sortDir === "asc" ? cmp : -cmp;
+      });
+    }
+    return items;
+  }, [data, search, sortKey, sortDir]);
+
+  const totalPages = Math.ceil(filtered.length / pageSize);
+  const paged = filtered.slice(page * pageSize, (page + 1) * pageSize);
+
+  const handleSort = (key: string) => {
+    if (sortKey === key) {
+      setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+    } else {
+      setSortKey(key);
+      setSortDir("asc");
+    }
+  };
+
+  return (
+    <div className={cn("ph-data-table", className)}>
+      {searchable && (
+        <div className="ph-data-table__toolbar">
+          <input
+            type="text"
+            value={search}
+            onChange={(e) => { setSearch(e.target.value); setPage(0); }}
+            placeholder={searchPlaceholder}
+            className="ph-input ph-input-sm"
+          />
+        </div>
+      )}
+      <div className="ph-table-wrap">
+        <table className="ph-table">
+          <thead>
+            <tr>
+              {columns.map((col) => (
+                <th
+                  key={col.key}
+                  className={cn(col.sortable && "cursor-pointer select-none", col.className)}
+                  onClick={() => col.sortable && handleSort(col.key)}
+                >
+                  {col.label}
+                  {sortKey === col.key && (
+                    <span className="ml-1 inline-block">{sortDir === "asc" ? "\u2191" : "\u2193"}</span>
+                  )}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {paged.map((item, i) => (
+              <tr key={i}>
+                {columns.map((col) => (
+                  <td key={col.key} className={col.className}>
+                    {col.render ? col.render(item) : item[col.key]}
+                  </td>
+                ))}
+              </tr>
+            ))}
+            {paged.length === 0 && (
+              <tr>
+                <td colSpan={columns.length} className="text-center text-ph-mutedtext py-8">No results</td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+      {totalPages > 1 && (
+        <div className="ph-data-table__pagination">
+          <button disabled={page === 0} onClick={() => setPage((p) => p - 1)} className="ph-data-table__page-btn">
+            Previous
+          </button>
+          <span className="text-xs text-ph-mutedtext">
+            Page {page + 1} of {totalPages}
+          </span>
+          <button disabled={page >= totalPages - 1} onClick={() => setPage((p) => p + 1)} className="ph-data-table__page-btn">
+            Next
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+DataTable.displayName = "DataTable";

package/src/components/ui/DatePicker.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useState, useMemo, type InputHTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+const MONTHS = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
+const DAYS = ["Su","Mo","Tu","We","Th","Fr","Sa"];
+
+export interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type"> {
+  value?: Date;
+  onChange?: (date: Date) => void;
+}
+
+export function DatePicker({ value, onChange, className, ...props }: DatePickerProps) {
+  const [open, setOpen] = useState(false);
+  const [viewDate, setViewDate] = useState(value ?? new Date());
+  const selected = value;
+
+  const days = useMemo(() => {
+    const year = viewDate.getFullYear();
+    const month = viewDate.getMonth();
+    const first = new Date(year, month, 1).getDay();
+    const last = new Date(year, month + 1, 0).getDate();
+    const prevLast = new Date(year, month, 0).getDate();
+    const cells: { day: number; month: "prev" | "current" | "next" }[] = [];
+    for (let i = first - 1; i >= 0; i--) cells.push({ day: prevLast - i, month: "prev" });
+    for (let d = 1; d <= last; d++) cells.push({ day: d, month: "current" });
+    const remaining = 42 - cells.length;
+    for (let d = 1; d <= remaining; d++) cells.push({ day: d, month: "next" });
+    return cells;
+  }, [viewDate]);
+
+  const isSelected = (d: number, m: "prev" | "current" | "next") => {
+    if (!selected || m !== "current") return false;
+    const date = new Date(viewDate.getFullYear(), viewDate.getMonth(), d);
+    return date.toDateString() === selected.toDateString();
+  };
+
+  const selectDay = (d: number, m: string) => {
+    const month = m === "prev" ? viewDate.getMonth() - 1 : m === "next" ? viewDate.getMonth() + 1 : viewDate.getMonth();
+    const year = month < 0 ? viewDate.getFullYear() - 1 : month > 11 ? viewDate.getFullYear() + 1 : viewDate.getFullYear();
+    const adjustedMonth = ((month % 12) + 12) % 12;
+    const date = new Date(year, adjustedMonth, d);
+    onChange?.(date);
+    setOpen(false);
+  };
+
+  const nav = (delta: number) => setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() + delta, 1));
+
+  return (
+    <div className={cn("ph-datepicker relative", className)}>
+      <input
+        type="text"
+        readOnly
+        value={selected ? `${MONTHS[selected.getMonth()]} ${selected.getDate()}, ${selected.getFullYear()}` : ""}
+        onFocus={() => setOpen(true)}
+        placeholder="Pick a date"
+        className="ph-input w-full cursor-pointer"
+        {...props}
+      />
+      {open && (
+        <div className="ph-datepicker__dropdown">
+          <div className="ph-datepicker__nav">
+            <button type="button" onClick={() => nav(-1)} className="ph-datepicker__nav-btn" aria-label="Previous month">
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M7 3L4 6l3 3"/></svg>
+            </button>
+            <span className="ph-datepicker__nav-label">{MONTHS[viewDate.getMonth()]} {viewDate.getFullYear()}</span>
+            <button type="button" onClick={() => nav(1)} className="ph-datepicker__nav-btn" aria-label="Next month">
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M5 3l3 3-3 3"/></svg>
+            </button>
+          </div>
+          <div className="ph-datepicker__grid">
+            {DAYS.map((d) => <div key={d} className="ph-datepicker__day-header">{d}</div>)}
+            {days.map((d, i) => (
+              <button
+                key={i}
+                type="button"
+                disabled={d.month !== "current"}
+                onClick={() => selectDay(d.day, d.month)}
+                className={cn(
+                  "ph-datepicker__day",
+                  d.month !== "current" && "ph-datepicker__day--other",
+                  isSelected(d.day, d.month) && "ph-datepicker__day--selected"
+                )}
+              >
+                {d.day}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+DatePicker.displayName = "DatePicker";

package/src/components/ui/Dialog.tsx

@@ -0,0 +1,75 @@
+import { useState, type ReactNode } from "react";
+import { Modal, type ModalProps } from "@/components/ui/Modal";
+import { Button, type ButtonProps } from "@/components/ui/Button";
+
+export interface DialogProps extends Omit<ModalProps, "onClose"> {
+  isOpen?: boolean;
+  onClose?: () => void;
+  onConfirm?: () => void | Promise<void>;
+  confirmText?: string;
+  cancelText?: string;
+  confirmProps?: Partial<ButtonProps>;
+  cancelProps?: Partial<ButtonProps>;
+  children?: ReactNode;
+}
+
+export function Dialog({
+  isOpen: openProp,
+  onClose,
+  onConfirm,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  confirmProps,
+  cancelProps,
+  children,
+  title,
+  ...modalProps
+}: DialogProps) {
+  const [loading, setLoading] = useState(false);
+  const isOpen = openProp ?? true;
+
+  const handleConfirm = async () => {
+    if (!onConfirm) return;
+    setLoading(true);
+    try {
+      await onConfirm();
+    } finally {
+      setLoading(false);
+    }
+    onClose?.();
+  };
+
+  return (
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      title={title}
+      footer={
+        <div className="flex justify-end gap-2">
+          <Button variant="secondary" {...cancelProps} onClick={onClose}>
+            {cancelText}
+          </Button>
+          {onConfirm && (
+            <Button
+              variant="primary"
+              loading={loading}
+              {...confirmProps}
+              onClick={handleConfirm}
+            >
+              {confirmText}
+            </Button>
+          )}
+        </div>
+      }
+      {...modalProps}
+    >
+      {children}
+    </Modal>
+  );
+}
+
+Dialog.displayName = "Dialog";
+
+export function confirmDialog(props: DialogProps) {
+  return <Dialog {...props} />;
+}

package/src/components/ui/Divider.tsx

@@ -0,0 +1,39 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+  vertical?: boolean;
+  dashed?: boolean;
+  thick?: boolean;
+  label?: string;
+}
+
+export function Divider({
+  vertical = false,
+  dashed = false,
+  thick = false,
+  label,
+  className,
+  ...props
+}: DividerProps) {
+  return (
+    <div
+      role="separator"
+      aria-orientation={vertical ? "vertical" : "horizontal"}
+      className={cn(
+        "ph-divider",
+        vertical && "ph-divider--vertical",
+        thick && "ph-divider--thick",
+        dashed && "ph-divider--dashed",
+        !!label && "ph-divider--with-label",
+        !className && (vertical ? "mx-2 self-stretch" : "my-2"),
+        className
+      )}
+      {...props}
+    >
+      {label && <span className="ph-divider__label">{label}</span>}
+    </div>
+  );
+}
+
+Divider.displayName = "Divider";

package/src/components/ui/Dot.tsx

@@ -0,0 +1,32 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+export interface DotProps extends HTMLAttributes<HTMLSpanElement> {
+  color?: "green" | "yellow" | "red" | "blue" | "gray";
+  size?: "sm" | "md";
+}
+
+const colorMap = {
+  green: "bg-ph-success",
+  yellow: "bg-ph-warning",
+  red: "bg-ph-danger",
+  blue: "bg-ph-info",
+  gray: "bg-ph-mutedtext",
+};
+
+export function Dot({ color = "gray", size = "md", className, ...props }: DotProps) {
+  return (
+    <span
+      className={cn(
+        "ph-dot inline-block shrink-0 rounded-full",
+        size === "sm" ? "h-1.5 w-1.5" : "h-2.5 w-2.5",
+        colorMap[color],
+        className
+      )}
+      aria-hidden="true"
+      {...props}
+    />
+  );
+}
+
+Dot.displayName = "Dot";