@multiplatform.one/table 6.0.0

package/dist/cjs/components/DataTableDateFilter/index.cjs

@@ -0,0 +1,499 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var DataTableDateFilter_exports = {};
+__export(DataTableDateFilter_exports, {
+  DataTableDateFilter: () => DataTableDateFilter,
+  applyDateFilter: () => applyDateFilter,
+  useDateFilter: () => useDateFilter
+});
+module.exports = __toCommonJS(DataTableDateFilter_exports);
+var import_react = require("@phosphor-icons/react");
+var import_theme = require("@multiplatform.one/theme");
+var import_react2 = __toESM(require("react"));
+var import_forms = require("@multiplatform.one/forms");
+var import_tamagui = require("tamagui");
+var import_jsx_runtime = require("react/jsx-runtime");
+function DataTableDateFilter({
+  value,
+  onChange,
+  placeholder = "Filter by date...",
+  disabled = false,
+  showPresets = true,
+  customPresets = [],
+  dateFormat: _dateFormat = "MMM dd, yyyy",
+  minDate,
+  maxDate
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const sz = knobProps.sizeToken;
+  const triggerMinWidth = sz === "$3" ? 160 : sz === "$5" ? 240 : 200;
+  const popoverMinWidth = sz === "$3" ? 280 : sz === "$5" ? 360 : 320;
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
+  const [activePresetId, setActivePresetId] = (0, import_react2.useState)(null);
+  const defaultPresets = [{
+    id: "today",
+    label: "Today",
+    operator: "isToday",
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarIcon, {
+      size: 16
+    })
+  }, {
+    id: "yesterday",
+    label: "Yesterday",
+    operator: "isYesterday",
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarIcon, {
+      size: 16
+    })
+  }, {
+    id: "thisWeek",
+    label: "This Week",
+    operator: "isThisWeek",
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarDotsIcon, {
+      size: 16
+    })
+  }, {
+    id: "thisMonth",
+    label: "This Month",
+    operator: "isThisMonth",
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarDotsIcon, {
+      size: 16
+    })
+  }, {
+    id: "last7days",
+    label: "Last 7 Days",
+    operator: "isBetween",
+    values: [new Date(Date.now() - 7 * 24 * 60 * 60 * 1e3).toISOString(), (/* @__PURE__ */new Date()).toISOString()],
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarBlankIcon, {
+      size: 16
+    })
+  }, {
+    id: "last30days",
+    label: "Last 30 Days",
+    operator: "isBetween",
+    values: [new Date(Date.now() - 30 * 24 * 60 * 60 * 1e3).toISOString(), (/* @__PURE__ */new Date()).toISOString()],
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarBlankIcon, {
+      size: 16
+    })
+  }, {
+    id: "empty",
+    label: "Is Empty",
+    operator: "isEmpty",
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
+      size: 16
+    })
+  }, {
+    id: "notEmpty",
+    label: "Is Not Empty",
+    operator: "isNotEmpty",
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {
+      size: 16
+    })
+  }];
+  const allPresets = (0, import_react2.useMemo)(() => [...defaultPresets, ...customPresets], [customPresets]);
+  const handlePresetSelect = preset => {
+    const newValue = {
+      operator: preset.operator,
+      value: preset.value,
+      values: preset.values
+    };
+    setActivePresetId(preset.id);
+    onChange?.(newValue);
+    setIsOpen(false);
+  };
+  const handleCustomDateSelect = (dateValue, operator = "is") => {
+    const newValue = {
+      operator,
+      value: dateValue
+    };
+    onChange?.(newValue);
+  };
+  const handleDateRangeSelect = (startDate, endDate) => {
+    const newValue = {
+      operator: "isBetween",
+      values: [startDate, endDate]
+    };
+    onChange?.(newValue);
+  };
+  const handleClear = () => {
+    setActivePresetId(null);
+    onChange?.(void 0);
+    setIsOpen(false);
+  };
+  const formatDate = dateString => {
+    try {
+      return new Date(dateString).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric"
+      });
+    } catch {
+      return dateString;
+    }
+  };
+  const getDisplayValue = () => {
+    if (!value) return placeholder;
+    switch (value.operator) {
+      case "is":
+        return value.value ? `Is ${formatDate(value.value)}` : placeholder;
+      case "isNot":
+        return value.value ? `Is not ${formatDate(value.value)}` : placeholder;
+      case "isBefore":
+        return value.value ? `Before ${formatDate(value.value)}` : placeholder;
+      case "isAfter":
+        return value.value ? `After ${formatDate(value.value)}` : placeholder;
+      case "isOnOrBefore":
+        return value.value ? `On or before ${formatDate(value.value)}` : placeholder;
+      case "isOnOrAfter":
+        return value.value ? `On or after ${formatDate(value.value)}` : placeholder;
+      case "isBetween":
+        return value.values ? `${formatDate(value.values[0])} - ${formatDate(value.values[1])}` : placeholder;
+      case "isToday":
+        return "Today";
+      case "isYesterday":
+        return "Yesterday";
+      case "isTomorrow":
+        return "Tomorrow";
+      case "isThisWeek":
+        return "This week";
+      case "isLastWeek":
+        return "Last week";
+      case "isNextWeek":
+        return "Next week";
+      case "isThisMonth":
+        return "This month";
+      case "isLastMonth":
+        return "Last month";
+      case "isNextMonth":
+        return "Next month";
+      case "isThisYear":
+        return "This year";
+      case "isLastYear":
+        return "Last year";
+      case "isNextYear":
+        return "Next year";
+      case "isEmpty":
+        return "Is empty";
+      case "isNotEmpty":
+        return "Is not empty";
+      default:
+        return placeholder;
+    }
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
+      asChild: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_forms.Button, {
+        size: knobProps.sizeToken,
+        variant: "outlined",
+        disabled,
+        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarIcon, {
+          size: 16
+        }),
+        justifyContent: "flex-start",
+        minWidth: triggerMinWidth,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          flex: 1,
+          textAlign: "left",
+          color: value ? void 0 : "$color10",
+          fontSize: "$3",
+          numberOfLines: 1,
+          children: getDisplayValue()
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
+          size: 16
+        })]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
+      ...knobProps.borderRadius,
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      enterStyle: {
+        x: 0,
+        y: -10,
+        opacity: 0
+      },
+      exitStyle: {
+        x: 0,
+        y: -10,
+        opacity: 0
+      },
+      minWidth: popoverMinWidth,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        ...knobProps.panelPadding,
+        ...knobProps.gapLg,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          justifyContent: "space-between",
+          alignItems: "center",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: "$5",
+            fontWeight: "600",
+            children: "Date Filter"
+          }), value && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            size: "$2",
+            variant: "outlined",
+            onPress: handleClear,
+            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
+              size: 16
+            }),
+            children: "Clear"
+          })]
+        }), showPresets && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: "$4",
+            fontWeight: "500",
+            children: "Quick Filters"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+            maxHeight: 120,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+              gap: "$1",
+              children: allPresets.map(preset => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                size: knobProps.sizeToken,
+                variant: "outlined",
+                justifyContent: "flex-start",
+                onPress: () => handlePresetSelect(preset),
+                ...(activePresetId === preset.id ? {
+                  theme: "accent",
+                  backgroundColor: "$background"
+                } : void 0),
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                  fontSize: "$3",
+                  children: preset.label
+                })
+              }, preset.id))
+            })
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          ...knobProps.gap,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: "$4",
+            fontWeight: "500",
+            children: "Custom Date"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+            gap: "$2",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+              flex: 1,
+              size: knobProps.sizeToken,
+              variant: "outlined",
+              onPress: () => handleCustomDateSelect((/* @__PURE__ */new Date()).toISOString(), "is"),
+              children: "Today"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+              flex: 1,
+              size: knobProps.sizeToken,
+              variant: "outlined",
+              onPress: () => handleCustomDateSelect(new Date(Date.now() - 24 * 60 * 60 * 1e3).toISOString(), "is"),
+              children: "Yesterday"
+            })]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+            gap: "$2",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              fontSize: "$3",
+              fontWeight: "500",
+              children: "Date Range"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+              gap: "$2",
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                flex: 1,
+                size: knobProps.sizeToken,
+                variant: "outlined",
+                onPress: () => handleDateRangeSelect(new Date(Date.now() - 7 * 24 * 60 * 60 * 1e3).toISOString(), (/* @__PURE__ */new Date()).toISOString()),
+                children: "Last 7 days"
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                flex: 1,
+                size: knobProps.sizeToken,
+                variant: "outlined",
+                onPress: () => handleDateRangeSelect(new Date(Date.now() - 30 * 24 * 60 * 60 * 1e3).toISOString(), (/* @__PURE__ */new Date()).toISOString()),
+                children: "Last 30 days"
+              })]
+            })]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+            gap: "$2",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              fontSize: "$3",
+              fontWeight: "500",
+              children: "Custom Range"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+              gap: "$2",
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+                flex: 1,
+                "data-testid": "start-date-picker",
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.DatePicker, {
+                  placeholder: "Start date",
+                  label: "From",
+                  minDate,
+                  maxDate
+                })
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+                flex: 1,
+                "data-testid": "end-date-picker",
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.DatePicker, {
+                  placeholder: "End date",
+                  label: "To",
+                  minDate,
+                  maxDate
+                })
+              })]
+            })]
+          })]
+        })]
+      })
+    })]
+  });
+}
+function applyDateFilter(data, columnKey, filterValue) {
+  if (!filterValue) return data;
+  const {
+    operator,
+    value,
+    values
+  } = filterValue;
+  return data.filter(item => {
+    const itemValue = item[columnKey];
+    if (!itemValue) {
+      return operator === "isEmpty";
+    }
+    const itemDate = new Date(itemValue);
+    if (Number.isNaN(itemDate.getTime())) {
+      return false;
+    }
+    const now = /* @__PURE__ */new Date();
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    switch (operator) {
+      case "is":
+        return value ? itemDate.toDateString() === new Date(value).toDateString() : false;
+      case "isNot":
+        return value ? itemDate.toDateString() !== new Date(value).toDateString() : false;
+      case "isBefore":
+        return value ? itemDate < new Date(value) : false;
+      case "isAfter":
+        return value ? itemDate > new Date(value) : false;
+      case "isOnOrBefore":
+        return value ? itemDate <= new Date(value) : false;
+      case "isOnOrAfter":
+        return value ? itemDate >= new Date(value) : false;
+      case "isBetween":
+        return values ? itemDate >= new Date(values[0]) && itemDate <= new Date(values[1]) : false;
+      case "isToday":
+        return itemDate.toDateString() === today.toDateString();
+      case "isYesterday":
+        {
+          const yesterday = new Date(today);
+          yesterday.setDate(yesterday.getDate() - 1);
+          return itemDate.toDateString() === yesterday.toDateString();
+        }
+      case "isTomorrow":
+        {
+          const tomorrow = new Date(today);
+          tomorrow.setDate(tomorrow.getDate() + 1);
+          return itemDate.toDateString() === tomorrow.toDateString();
+        }
+      case "isThisWeek":
+        {
+          const weekStart = new Date(today);
+          weekStart.setDate(today.getDate() - today.getDay());
+          const weekEnd = new Date(weekStart);
+          weekEnd.setDate(weekStart.getDate() + 6);
+          return itemDate >= weekStart && itemDate <= weekEnd;
+        }
+      case "isLastWeek":
+        {
+          const lastWeekStart = new Date(today);
+          lastWeekStart.setDate(today.getDate() - today.getDay() - 7);
+          const lastWeekEnd = new Date(lastWeekStart);
+          lastWeekEnd.setDate(lastWeekStart.getDate() + 6);
+          return itemDate >= lastWeekStart && itemDate <= lastWeekEnd;
+        }
+      case "isNextWeek":
+        {
+          const nextWeekStart = new Date(today);
+          nextWeekStart.setDate(today.getDate() - today.getDay() + 7);
+          const nextWeekEnd = new Date(nextWeekStart);
+          nextWeekEnd.setDate(nextWeekStart.getDate() + 6);
+          return itemDate >= nextWeekStart && itemDate <= nextWeekEnd;
+        }
+      case "isThisMonth":
+        return itemDate.getMonth() === today.getMonth() && itemDate.getFullYear() === today.getFullYear();
+      case "isLastMonth":
+        {
+          const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1);
+          return itemDate.getMonth() === lastMonth.getMonth() && itemDate.getFullYear() === lastMonth.getFullYear();
+        }
+      case "isNextMonth":
+        {
+          const nextMonth = new Date(today.getFullYear(), today.getMonth() + 1);
+          return itemDate.getMonth() === nextMonth.getMonth() && itemDate.getFullYear() === nextMonth.getFullYear();
+        }
+      case "isThisYear":
+        return itemDate.getFullYear() === today.getFullYear();
+      case "isLastYear":
+        return itemDate.getFullYear() === today.getFullYear() - 1;
+      case "isNextYear":
+        return itemDate.getFullYear() === today.getFullYear() + 1;
+      case "isEmpty":
+        return !itemValue;
+      case "isNotEmpty":
+        return !!itemValue;
+      default:
+        return true;
+    }
+  });
+}
+function useDateFilter({
+  data,
+  columnKey,
+  initialFilter,
+  onFilterChange
+}) {
+  const [filterValue, setFilterValue] = (0, import_react2.useState)(initialFilter);
+  const filteredData = (0, import_react2.useMemo)(() => {
+    if (!filterValue) return data;
+    return applyDateFilter(data, columnKey, filterValue);
+  }, [data, columnKey, filterValue]);
+  import_react2.default.useEffect(() => {
+    onFilterChange?.(filteredData, filterValue);
+  }, [filteredData, filterValue, onFilterChange]);
+  const clearFilter = import_react2.default.useCallback(() => {
+    setFilterValue(void 0);
+  }, []);
+  return {
+    filteredData,
+    filterValue,
+    setFilterValue,
+    clearFilter,
+    isFiltered: !!filterValue
+  };
+}