@timeax/form-palette 0.0.1

package/src/presets/ui/time-dropdowns.tsx

@@ -0,0 +1,350 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import {
+    Select,
+    SelectTrigger,
+    SelectValue,
+    SelectContent,
+    SelectItem,
+} from "@/presets/ui/select";
+
+export interface TimeDropdownsProps {
+    /**
+     * Current date-time value.
+     * Only the time portion will be modified; date part is preserved.
+     */
+    value: Date | undefined;
+
+    /**
+     * Called whenever any of the time parts change.
+     */
+    onChange(next: Date | undefined): void;
+
+    /**
+     * Whether to show seconds dropdown.
+     * Default: false.
+     */
+    showSeconds?: boolean;
+
+    /**
+     * Step between minutes in the dropdown.
+     * Default: 5.
+     */
+    minuteStep?: number;
+
+    /**
+     * Step between seconds in the dropdown.
+     * Default: 5.
+     */
+    secondStep?: number;
+
+    /**
+     * If true, show 12-hour clock with AM/PM toggle.
+     * If false, show 24-hour clock (00–23).
+     * Default: false (24-hour).
+     */
+    use12Hour?: boolean;
+
+    /**
+     * Optional label to show above or beside the dropdowns.
+     */
+    label?: React.ReactNode;
+
+    /**
+     * Custom className for the outer wrapper.
+     */
+    className?: string;
+
+    /**
+     * Custom className for each SelectTrigger (hours/minutes/seconds).
+     */
+    triggerClassName?: string;
+
+    /**
+     * Compact / normal layout toggle.
+     * Just a quick spacing switch for now.
+     */
+    density?: "compact" | "normal";
+}
+
+function pad2(n: number): string {
+    return n.toString().padStart(2, "0");
+}
+
+function buildMinuteOptions(step: number): string[] {
+    const items: string[] = [];
+    for (let m = 0; m < 60; m += step) {
+        items.push(pad2(m));
+    }
+    return items;
+}
+
+function buildSecondOptions(step: number): string[] {
+    const items: string[] = [];
+    for (let s = 0; s < 60; s += step) {
+        items.push(pad2(s));
+    }
+    return items;
+}
+
+function buildHourOptions24(): string[] {
+    const items: string[] = [];
+    for (let h = 0; h < 24; h++) {
+        items.push(pad2(h));
+    }
+    return items;
+}
+
+function buildHourOptions12(): string[] {
+    const items: string[] = [];
+    for (let h = 1; h <= 12; h++) {
+        items.push(h.toString());
+    }
+    return items;
+}
+
+/**
+ * Safely create a new Date instance with updated time parts,
+ * preserving the original date portion when possible.
+ */
+function withTime(
+    base: Date | undefined,
+    opts: { hours?: number; minutes?: number; seconds?: number },
+): Date {
+    const src = base ? new Date(base.getTime()) : new Date();
+    const h = opts.hours ?? src.getHours();
+    const m = opts.minutes ?? src.getMinutes();
+    const s = opts.seconds ?? src.getSeconds();
+    src.setHours(h, m, s, 0);
+    return src;
+}
+
+/**
+ * Drop-in time dropdown cluster for use in the date popover.
+ *
+ * Renders hour / minute (and optionally second) Selects plus
+ * an AM/PM toggle when `use12Hour` is true.
+ */
+export const TimeDropdowns: React.FC<TimeDropdownsProps> = (props) => {
+    const {
+        value,
+        onChange,
+        showSeconds = false,
+        minuteStep = 5,
+        secondStep = 5,
+        use12Hour = false,
+        label,
+        className,
+        triggerClassName,
+        density = "normal",
+    } = props;
+
+    const minuteOptions = React.useMemo(
+        () => buildMinuteOptions(minuteStep),
+        [minuteStep],
+    );
+    const secondOptions = React.useMemo(
+        () => buildSecondOptions(secondStep),
+        [secondStep],
+    );
+
+    const hourOptions = React.useMemo(
+        () => (use12Hour ? buildHourOptions12() : buildHourOptions24()),
+        [use12Hour],
+    );
+
+    // Derive current parts from value.
+    let hours24 = value ? value.getHours() : 0;
+    let minutes = value ? value.getMinutes() : 0;
+    let seconds = value ? value.getSeconds() : 0;
+
+    let hourDisplay: string;
+    let period: "am" | "pm" | null = null;
+
+    if (use12Hour) {
+        period = hours24 >= 12 ? "pm" : "am";
+        let h12 = hours24 % 12;
+        if (h12 === 0) h12 = 12;
+        hourDisplay = h12.toString();
+    } else {
+        hourDisplay = pad2(hours24);
+    }
+
+    const minuteDisplay = pad2(minutes);
+    const secondDisplay = pad2(seconds);
+
+    const baseTriggerClasses = cn(
+        "h-8 w-[4.2rem] px-2 py-0 text-xs",
+        "whitespace-nowrap",
+        "border-input bg-background",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+    );
+
+    const triggerClasses = cn(
+        baseTriggerClasses,
+        triggerClassName,
+        density === "compact" && "h-7 text-[0.7rem] px-1.5",
+    );
+
+    const gapClass = density === "compact" ? "gap-1" : "gap-2";
+
+    const handleHourChange = (hStr: string) => {
+        let nextHours24: number;
+
+        if (use12Hour) {
+            const h12 = parseInt(hStr, 10) || 0;
+            if (!period) {
+                // fallback: assume AM
+                nextHours24 = h12 % 12;
+            } else {
+                if (period === "am") {
+                    nextHours24 = h12 % 12; // 12am → 0
+                } else {
+                    nextHours24 = h12 % 12 + 12; // 12pm → 12, 1pm → 13
+                }
+            }
+        } else {
+            nextHours24 = parseInt(hStr, 10) || 0;
+        }
+
+        const nextDate = withTime(value, { hours: nextHours24 });
+        onChange(nextDate);
+    };
+
+    const handleMinuteChange = (mStr: string) => {
+        const m = parseInt(mStr, 10) || 0;
+        const nextDate = withTime(value, { minutes: m });
+        onChange(nextDate);
+    };
+
+    const handleSecondChange = (sStr: string) => {
+        const s = parseInt(sStr, 10) || 0;
+        const nextDate = withTime(value, { seconds: s });
+        onChange(nextDate);
+    };
+
+    const handlePeriodChange = (p: string) => {
+        if (!use12Hour) return;
+        const nextPeriod = p === "pm" ? "pm" : "am";
+
+        // Convert from current hours24 + new period.
+        let h12 = hours24 % 12;
+        if (h12 === 0) h12 = 12;
+
+        let nextHours24: number;
+        if (nextPeriod === "am") {
+            nextHours24 = h12 % 12; // 12am → 0
+        } else {
+            nextHours24 = h12 % 12 + 12; // 12pm → 12, etc.
+        }
+
+        const nextDate = withTime(value, { hours: nextHours24 });
+        onChange(nextDate);
+    };
+
+    return (
+        <div
+            className={cn(
+                "flex w-full flex-col gap-2",
+                density === "compact" && "gap-1",
+                className,
+            )}
+            data-slot="time-dropdowns"
+        >
+            {label && (
+                <div className="text-xs font-medium text-muted-foreground">
+                    {label}
+                </div>
+            )}
+
+            <div
+                className={cn(
+                    "flex w-full items-center",
+                    gapClass,
+                )}
+                data-slot="time-dropdowns-row"
+            >
+                {/* Hour */}
+                <Select value={hourDisplay} onValueChange={handleHourChange}>
+                    <SelectTrigger
+                        className={triggerClasses}
+                        data-slot="time-hour"
+                    >
+                        <SelectValue placeholder="HH" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {hourOptions.map((h) => (
+                            <SelectItem key={h} value={h}>
+                                {use12Hour ? h.padStart(2, " ") : pad2(Number(h))}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+
+                {/* Minute */}
+                <Select
+                    value={minuteDisplay}
+                    onValueChange={handleMinuteChange}
+                >
+                    <SelectTrigger
+                        className={triggerClasses}
+                        data-slot="time-minute"
+                    >
+                        <SelectValue placeholder="MM" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {minuteOptions.map((m) => (
+                            <SelectItem key={m} value={m}>
+                                {m}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+
+                {/* Second (optional) */}
+                {showSeconds && (
+                    <Select
+                        value={secondDisplay}
+                        onValueChange={handleSecondChange}
+                    >
+                        <SelectTrigger
+                            className={triggerClasses}
+                            data-slot="time-second"
+                        >
+                            <SelectValue placeholder="SS" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {secondOptions.map((s) => (
+                                <SelectItem key={s} value={s}>
+                                    {s}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                )}
+
+                {/* AM/PM (optional) */}
+                {use12Hour && (
+                    <Select
+                        value={period ?? "am"}
+                        onValueChange={handlePeriodChange}
+                    >
+                        <SelectTrigger
+                            className={cn(
+                                triggerClasses,
+                                "w-[3.8rem]",
+                            )}
+                            data-slot="time-period"
+                        >
+                            <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="am">AM</SelectItem>
+                            <SelectItem value="pm">PM</SelectItem>
+                        </SelectContent>
+                    </Select>
+                )}
+            </div>
+        </div>
+    );
+};

package/src/schema/adapter.ts

@@ -0,0 +1,217 @@
+// src/schema/adapter.ts
+
+/**
+ * HTTP methods supported by the core adapter layer.
+ *
+ * This matches the legacy Method union from the old types.ts.
+ */
+export type Method = 'post' | 'get' | 'delete' | 'put' | 'patch';
+
+/**
+ * Lifecycle callbacks used by adapters to report events back to the core.
+ *
+ * @template Ok  Type of the "successful" response payload (e.g. AxiosResponse).
+ * @template Err Type of the "error" payload (e.g. AxiosError, unknown).
+ */
+export interface AdapterCallbacks<Ok = unknown, Err = unknown> {
+    /**
+     * Called when the underlying request completes successfully.
+     * The adapter decides what "success" means (HTTP 2xx, no exception, etc.).
+     */
+    onSuccess?(response: Ok): void;
+
+    /**
+     * Called when the underlying request fails.
+     * Adapters should pass the most informative error shape they have.
+     */
+    onError?(error: Err): void;
+
+    /**
+     * Called at the end of the adapter lifecycle, whether success or error.
+     * Useful for clearing loading states, unlocking buttons, etc.
+     */
+    onFinish?(): void;
+}
+
+/**
+ * Result interface returned by an adapter.
+ *
+ * Generic evolution of the legacy AdapterResult:
+ *
+ *   type AdapterResult = {
+ *     submit(options?: unknown): void;
+ *     send<T = unknown>(): Promise<AxiosResponse<T>>;
+ *     run(options?: unknown): void;
+ *   };
+ *
+ * Differences:
+ * - The success payload is generic (Ok) instead of hard-coded to AxiosResponse.
+ * - send() always returns Promise<Ok>.
+ * - run() may return either void or Promise<Ok>, depending on adapter.
+ *
+ * @template Ok Type of the "successful" response payload.
+ */
+export interface AdapterResult<Ok = unknown> {
+    /**
+     * Fire-and-forget trigger.
+     *
+     * Intended for flows where the caller does not care about the response
+     * object itself (e.g. SPA navigation).
+     *
+     * @param options Optional adapter-specific options.
+     */
+    submit(options?: unknown): void;
+
+    /**
+     * Promise-based trigger.
+     *
+     * Intended for flows where the caller wants to await the response object.
+     * Adapters should reject the promise when an error occurs.
+     *
+     * @param options Optional adapter-specific options.
+     */
+    send(options?: unknown): Promise<Ok>;
+
+    /**
+     * Convenience trigger.
+     *
+     * Adapters are free to implement this as:
+     * - submit(options) (returning void), or
+     * - send(options) (returning Promise<Ok>).
+     *
+     * Callers that need strict typing can prefer send();
+     * callers that just need "do the thing" can use run().
+     *
+     * @param options Optional adapter-specific options.
+     */
+    run(options?: unknown): void | Promise<Ok>;
+}
+
+/**
+ * Configuration passed from the core runtime to a concrete adapter factory.
+ *
+ * @template Body Type of the outbound payload (form values + extra data).
+ * @template Ok   Type of the "successful" response payload.
+ * @template Err  Type of the "error" payload.
+ */
+export interface AdapterConfig<Body = unknown, Ok = unknown, Err = unknown> {
+    /**
+     * HTTP method / intent used by the adapter.
+     */
+    method: Method;
+
+    /**
+     * Fully-resolved URL or route string.
+     *
+     * The core is responsible for resolving named routes, base URLs, etc.,
+     * before handing control to the adapter.
+     */
+    url: string;
+
+    /**
+     * Request body payload built by the core.
+     *
+     * Typically something like:
+     *
+     *   { ...formValues, ...extra }
+     */
+    data: Body;
+
+    /**
+     * Lifecycle callbacks provided by the core.
+     *
+     * The adapter should invoke these at the appropriate times; it must not
+     * swallow errors without calling onError (when provided).
+     */
+    callbacks?: AdapterCallbacks<Ok, Err>;
+}
+
+/**
+ * Factory function type for creating an adapter instance.
+ *
+ * Concrete implementations (Axios, Inertia, fetch, custom) can conform
+ * to this signature. The core runtime only knows about this type and does
+ * not depend on any adapter-specific details.
+ *
+ * @template Body Type of the outbound payload (form values + extra data).
+ * @template Ok   Type of the "successful" response payload.
+ * @template Err  Type of the "error" payload.
+ */
+export type AdapterFactory<
+    Body = unknown,
+    Ok = unknown,
+    Err = unknown,
+> = (config: AdapterConfig<Body, Ok, Err>) => AdapterResult<Ok>;
+
+/**
+ * Registry of adapter flavours.
+ *
+ * The library hard-codes a single built-in adapter flavour:
+ *
+ *   - 'local' → host-handled, no transport semantics.
+ *               .send() resolves to `{ data: Body }`.
+ *
+ * Hosts can extend this interface via module augmentation to add
+ * their own adapter flavours (e.g. 'axios', 'inertia', ...).
+ */
+export interface Adapters {
+    local: {
+        /**
+         * Type of the value produced by adapter.send() for this adapter flavour.
+         */
+        ok: { data: unknown };
+
+        /**
+         * Type of the error value passed into callbacks.onError for this adapter.
+         */
+        err: unknown;
+    };
+}
+
+/**
+ * Union of all adapter keys known to the core.
+ *
+ * Hosts can extend this union by augmenting the Adapters interface.
+ */
+export type AdapterKey = keyof Adapters;
+
+/**
+ * Helper: given an adapter key K, get its "ok" payload type.
+ */
+export type AdapterOk<K extends AdapterKey> = Adapters[K]['ok'];
+
+/**
+ * Helper: given an adapter key K, get its "error" payload type.
+ */
+export type AdapterError<K extends AdapterKey> = Adapters[K]['err'];
+
+/**
+ * Helper: what CoreProps.onSubmitted receives for adapter K.
+ *
+ * For now, this is the same as AdapterOk<K>. If a host wants a different
+ * shape, they can wrap/transform in their own components.
+ */
+export type AdapterSubmit<K extends AdapterKey> = AdapterOk<K>;
+
+/**
+ * AdapterConfig specialised for a named adapter key K, using the
+ * registry's ok/err types for that key.
+ *
+ * @template K    Adapter key.
+ * @template Body Outbound payload type.
+ */
+export type NamedAdapterConfig<
+    K extends AdapterKey,
+    Body = unknown,
+> = AdapterConfig<Body, AdapterOk<K>, AdapterError<K>>;
+
+/**
+ * AdapterFactory specialised for a named adapter key K.
+ *
+ * @template K    Adapter key.
+ * @template Body Outbound payload type.
+ */
+export type NamedAdapterFactory<
+    K extends AdapterKey,
+    Body = unknown,
+> = (config: NamedAdapterConfig<K, Body>) => AdapterResult<AdapterOk<K>>;