@m5kdev/web-ui 0.1.3 → 0.1.4

package/dist/src/modules/table/filterTransformers.js

@@ -0,0 +1,276 @@
+import { CalendarDate, getLocalTimeZone, today } from "@internationalized/date";
+import { DateTime } from "luxon";
+/**
+ * Convert CalendarDate to UTC ISO string at midnight UTC
+ */
+export const calendarDateToUTC = (date) => {
+    return DateTime.utc(date.year, date.month, date.day).toISO() ?? "";
+};
+/**
+ * Convert CalendarDate to end of day UTC ISO string
+ */
+export const calendarDateToEndOfDayUTC = (date) => {
+    return DateTime.utc(date.year, date.month, date.day).endOf("day").toISO() ?? "";
+};
+/**
+ * Parse UTC ISO string to CalendarDate (preserves UTC date, no timezone shift)
+ */
+const parseUTCToCalendarDate = (isoString) => {
+    try {
+        const dt = DateTime.fromISO(isoString, { zone: "utc" });
+        if (!dt.isValid)
+            return null;
+        return new CalendarDate(dt.year, dt.month, dt.day);
+    }
+    catch {
+        return null;
+    }
+};
+/**
+ * Convert any date filter method from URL to a RangeValue for DateRangePicker
+ * Handles: on, before, after, between, intersect
+ * Parses UTC ISO strings as UTC to avoid timezone shifts
+ */
+export const dateFilterToRangeValue = (filters, columnId) => {
+    if (!filters)
+        return null;
+    const filter = filters.find((f) => f.columnId === columnId);
+    if (!filter || filter.type !== "date")
+        return null;
+    const todayDate = today(getLocalTimeZone());
+    const epochStart = new CalendarDate(1970, 1, 1);
+    try {
+        switch (filter.method) {
+            case "on": {
+                // Same day range
+                if (typeof filter.value !== "string" || !filter.value)
+                    return null;
+                const day = parseUTCToCalendarDate(filter.value);
+                if (!day)
+                    return null;
+                return {
+                    start: day,
+                    end: day,
+                };
+            }
+            case "before": {
+                // [epochStart, selectedDay]
+                if (typeof filter.value !== "string" || !filter.value)
+                    return null;
+                const day = parseUTCToCalendarDate(filter.value);
+                if (!day)
+                    return null;
+                return {
+                    start: epochStart,
+                    end: day,
+                };
+            }
+            case "after": {
+                // [selectedDay, today]
+                if (typeof filter.value !== "string" || !filter.value)
+                    return null;
+                const day = parseUTCToCalendarDate(filter.value);
+                if (!day)
+                    return null;
+                return {
+                    start: day,
+                    end: todayDate,
+                };
+            }
+            case "between":
+            case "intersect": {
+                // [value, valueTo]
+                if (typeof filter.value !== "string" || !filter.value || !filter.valueTo)
+                    return null;
+                const startDate = parseUTCToCalendarDate(filter.value);
+                const endDate = parseUTCToCalendarDate(filter.valueTo);
+                if (!startDate || !endDate)
+                    return null;
+                return {
+                    start: startDate,
+                    end: endDate,
+                };
+            }
+            default:
+                return null;
+        }
+    }
+    catch {
+        return null;
+    }
+};
+/**
+ * Transform filters from backend format (QueryFilter[]) to HeroUI format (HeroUIFilter[])
+ * Used when loading filters from URL/backend to populate HeroUI components
+ */
+export const transformFiltersToHeroUI = (filtersToTransform, columnsMap, filterMethods) => {
+    return filtersToTransform.map((filter) => {
+        let value = null;
+        let method = null;
+        let columnId = filter.columnId;
+        // Check if this intersect filter should map to Period pseudo-column
+        if (filter.type === "date" && filter.method === "intersect" && filter.endColumnId) {
+            const periodColumnId = `${filter.columnId}__period`;
+            const periodColumn = columnsMap.get(periodColumnId);
+            if (periodColumn) {
+                // Map to Period pseudo-column
+                columnId = periodColumnId;
+            }
+        }
+        // Find the method object from the methods configuration
+        if (filter.type) {
+            const availableMethods = filterMethods[filter.type];
+            const methodObj = availableMethods?.find((m) => m.value === filter.method);
+            if (methodObj) {
+                method = methodObj;
+            }
+            else if (filter.method === "isEmpty" || filter.method === "isNotEmpty") {
+                // Handle isEmpty/isNotEmpty even if not in the provided method list
+                method = {
+                    value: filter.method,
+                    label: filter.method === "isEmpty" ? "Is Empty" : "Is Not Empty",
+                    component: null,
+                };
+            }
+        }
+        // Transform value based on type
+        switch (filter.type) {
+            case "string":
+                value = filter.value;
+                break;
+            case "number":
+                value = filter.value;
+                break;
+            case "date":
+                // Use the shared helper for range conversion, or parse single dates as UTC
+                if (filter.method === "between" || filter.method === "intersect") {
+                    // For range methods, use the helper function
+                    const range = dateFilterToRangeValue([filter], filter.columnId);
+                    value = range;
+                }
+                else {
+                    // Single date value: parse UTC ISO string and extract UTC calendar date
+                    if (typeof filter.value === "string" && filter.value) {
+                        const day = parseUTCToCalendarDate(filter.value);
+                        value = day ? day : null;
+                    }
+                    else {
+                        value = null;
+                    }
+                }
+                break;
+            case "boolean":
+                value = filter.value;
+                break;
+            case "enum":
+                if (filter.method === "oneOf" && Array.isArray(filter.value)) {
+                    // Multi-select: array of strings to SharedSelection (Set)
+                    value = new Set(filter.value);
+                }
+                else {
+                    // Single select: string to SharedSelection with currentKey
+                    const selection = new Set([filter.value]);
+                    // Set currentKey property
+                    Object.defineProperty(selection, "currentKey", {
+                        value: filter.value,
+                        writable: true,
+                        enumerable: false,
+                        configurable: true,
+                    });
+                    value = selection;
+                }
+                break;
+            default:
+                value = filter.value;
+        }
+        const column = columnsMap.get(columnId);
+        return {
+            columnId,
+            type: filter.type,
+            value,
+            method,
+            options: column?.options ?? null,
+            endColumnId: column?.endColumnId ?? null,
+            periodStartColumnId: column?.periodStartColumnId ?? null,
+            periodEndColumnId: column?.periodEndColumnId ?? null,
+        };
+    });
+};
+/**
+ * Transform filters from HeroUI format (HeroUIFilter[]) to backend format (QueryFilter[])
+ * Used when applying filters to send to backend/URL
+ */
+export const transformFiltersFromHeroUI = (filters) => {
+    const filtersToApply = [];
+    for (const filter of filters) {
+        let value;
+        let valueTo;
+        // Handle isEmpty/isNotEmpty methods - they don't need a value
+        if (filter.method?.value === "isEmpty" || filter.method?.value === "isNotEmpty") {
+            if (filter.columnId === "")
+                continue;
+            const result = {
+                columnId: filter.columnId,
+                type: filter.type,
+                method: filter.method.value,
+                value: "",
+            };
+            filtersToApply.push(result);
+            continue;
+        }
+        // Handle Period pseudo-column: map to intersect on real columns
+        const isPeriodColumn = filter.columnId.endsWith("__period");
+        const actualColumnId = isPeriodColumn && filter.periodStartColumnId ? filter.periodStartColumnId : filter.columnId;
+        const actualEndColumnId = isPeriodColumn && filter.periodEndColumnId ? filter.periodEndColumnId : filter.endColumnId;
+        switch (filter.type) {
+            case "date":
+                if (filter.method?.value === "between" ||
+                    filter.method?.value === "intersect" ||
+                    isPeriodColumn) {
+                    const range = filter.value;
+                    if (range?.start && range?.end) {
+                        value = calendarDateToUTC(range.start);
+                        valueTo = calendarDateToUTC(range.end);
+                    }
+                }
+                else {
+                    const dateValue = filter.value;
+                    if (dateValue?.year) {
+                        value = calendarDateToUTC(dateValue);
+                    }
+                }
+                break;
+            case "enum": {
+                const selection = filter.value;
+                if (selection) {
+                    value =
+                        filter.method?.value === "oneOf"
+                            ? Array.from(selection).map(String)
+                            : String(selection.currentKey);
+                }
+                break;
+            }
+            default:
+                value = filter.value;
+        }
+        // Skip filters without valid values
+        if (!value || value === "" || filter.columnId === "")
+            continue;
+        if (filter.type === "enum" && Array.isArray(value) && value.length === 0)
+            continue;
+        // For Period columns, always use intersect method
+        const actualMethod = isPeriodColumn ? "intersect" : filter.method.value;
+        const result = {
+            columnId: actualColumnId,
+            type: filter.type,
+            method: actualMethod,
+            value: value,
+            ...(valueTo && { valueTo: valueTo }),
+            ...(actualMethod === "intersect" && actualEndColumnId
+                ? { endColumnId: actualEndColumnId }
+                : {}),
+        };
+        filtersToApply.push(result);
+    }
+    return filtersToApply;
+};

package/dist/src/types.d.ts

@@ -0,0 +1,4 @@
+import type { BackendTRPCRouter } from "@m5kdev/backend/types";
+import type { createTRPCContext } from "@trpc/tanstack-react-query";
+export type UseBackendTRPC = ReturnType<typeof createTRPCContext<BackendTRPCRouter>>["useTRPC"];
+//# sourceMappingURL=types.d.ts.map

package/dist/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAEpE,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC"}

package/dist/src/types.js

@@ -0,0 +1 @@
+export {};