@cryptlex/web-components 5.1.1 → 5.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/data-table/data-table-filter.tsx +220 -0
- package/lib/components/data-table/data-table.tsx +593 -0
- package/lib/components/data-table/table-commons.tsx +233 -0
- package/lib/components/inputs/checkbox.tsx +72 -0
- package/lib/components/inputs/date-picker.tsx +130 -0
- package/lib/components/inputs/datefield.tsx +109 -0
- package/lib/components/inputs/field.tsx +106 -0
- package/lib/components/inputs/id-search.tsx +83 -0
- package/lib/components/inputs/input-otp.tsx +63 -0
- package/lib/components/inputs/multi-select.tsx +62 -0
- package/lib/components/inputs/numberfield.tsx +110 -0
- package/lib/components/inputs/searchfield.tsx +87 -0
- package/lib/components/inputs/select-options.tsx +303 -0
- package/lib/components/inputs/select.tsx +140 -0
- package/lib/components/inputs/textfield.tsx +96 -0
- package/lib/components/key-value-card/key-value-card.tsx +115 -0
- package/lib/components/ui/alert.tsx +32 -0
- package/lib/components/ui/avatar.tsx +22 -0
- package/lib/components/ui/badge.tsx +19 -0
- package/lib/components/ui/breadcrumbs.tsx +104 -0
- package/lib/components/ui/button.tsx +66 -0
- package/lib/components/ui/calendar.tsx +220 -0
- package/lib/components/ui/card.tsx +58 -0
- package/lib/components/ui/dialog.tsx +172 -0
- package/lib/components/ui/disclosure.tsx +113 -0
- package/lib/components/ui/list-box.tsx +86 -0
- package/lib/components/ui/loader.tsx +10 -0
- package/lib/components/ui/menu.tsx +168 -0
- package/lib/components/ui/popover.tsx +37 -0
- package/lib/components/ui/sidebar.tsx +552 -0
- package/lib/components/ui/skeleton.tsx +7 -0
- package/lib/components/ui/sonner.tsx +26 -0
- package/lib/components/ui/table.tsx +79 -0
- package/lib/components/ui/tabs.tsx +82 -0
- package/lib/components/ui/timeline.tsx +52 -0
- package/lib/components/ui/tooltip.tsx +30 -0
- package/lib/tokens.scss +89 -0
- package/lib/utils/form-context.tsx +7 -0
- package/lib/utils/form-hook.tsx +33 -0
- package/lib/utils/primitives.ts +68 -0
- package/lib/utils/resource-names.tsx +245 -0
- package/lib/utils/use-mobile.tsx +21 -0
- package/package.json +28 -38
- package/dist/components/data-table/data-table-filter.es.js +0 -132
- package/dist/components/data-table/data-table-filter.es.js.map +0 -1
- package/dist/components/data-table/data-table.es.js +0 -412
- package/dist/components/data-table/data-table.es.js.map +0 -1
- package/dist/components/data-table/table-commons.es.js +0 -136
- package/dist/components/data-table/table-commons.es.js.map +0 -1
- package/dist/components/inputs/checkbox.es.js +0 -61
- package/dist/components/inputs/checkbox.es.js.map +0 -1
- package/dist/components/inputs/date-picker.es.js +0 -124
- package/dist/components/inputs/date-picker.es.js.map +0 -1
- package/dist/components/inputs/datefield.es.js +0 -90
- package/dist/components/inputs/datefield.es.js.map +0 -1
- package/dist/components/inputs/field.es.js +0 -91
- package/dist/components/inputs/field.es.js.map +0 -1
- package/dist/components/inputs/id-search.es.js +0 -61
- package/dist/components/inputs/id-search.es.js.map +0 -1
- package/dist/components/inputs/input-otp.es.js +0 -60
- package/dist/components/inputs/input-otp.es.js.map +0 -1
- package/dist/components/inputs/multi-select.es.js +0 -47
- package/dist/components/inputs/multi-select.es.js.map +0 -1
- package/dist/components/inputs/numberfield.es.js +0 -101
- package/dist/components/inputs/numberfield.es.js.map +0 -1
- package/dist/components/inputs/searchfield.es.js +0 -80
- package/dist/components/inputs/searchfield.es.js.map +0 -1
- package/dist/components/inputs/select-options.es.js +0 -286
- package/dist/components/inputs/select-options.es.js.map +0 -1
- package/dist/components/inputs/select.es.js +0 -113
- package/dist/components/inputs/select.es.js.map +0 -1
- package/dist/components/inputs/textfield.es.js +0 -86
- package/dist/components/inputs/textfield.es.js.map +0 -1
- package/dist/components/key-value-card/key-value-card.es.js +0 -53
- package/dist/components/key-value-card/key-value-card.es.js.map +0 -1
- package/dist/components/ui/alert.es.js +0 -29
- package/dist/components/ui/alert.es.js.map +0 -1
- package/dist/components/ui/avatar.es.js +0 -19
- package/dist/components/ui/avatar.es.js.map +0 -1
- package/dist/components/ui/badge.es.js +0 -19
- package/dist/components/ui/badge.es.js.map +0 -1
- package/dist/components/ui/breadcrumbs.es.js +0 -104
- package/dist/components/ui/breadcrumbs.es.js.map +0 -1
- package/dist/components/ui/button.es.js +0 -58
- package/dist/components/ui/button.es.js.map +0 -1
- package/dist/components/ui/calendar.es.js +0 -163
- package/dist/components/ui/calendar.es.js.map +0 -1
- package/dist/components/ui/card.es.js +0 -53
- package/dist/components/ui/card.es.js.map +0 -1
- package/dist/components/ui/dialog.es.js +0 -156
- package/dist/components/ui/dialog.es.js.map +0 -1
- package/dist/components/ui/disclosure.es.js +0 -90
- package/dist/components/ui/disclosure.es.js.map +0 -1
- package/dist/components/ui/list-box.es.js +0 -76
- package/dist/components/ui/list-box.es.js.map +0 -1
- package/dist/components/ui/loader.es.js +0 -10
- package/dist/components/ui/loader.es.js.map +0 -1
- package/dist/components/ui/menu.es.js +0 -129
- package/dist/components/ui/menu.es.js.map +0 -1
- package/dist/components/ui/popover.es.js +0 -32
- package/dist/components/ui/popover.es.js.map +0 -1
- package/dist/components/ui/sidebar.es.js +0 -456
- package/dist/components/ui/sidebar.es.js.map +0 -1
- package/dist/components/ui/skeleton.es.js +0 -9
- package/dist/components/ui/skeleton.es.js.map +0 -1
- package/dist/components/ui/sonner.es.js +0 -24
- package/dist/components/ui/sonner.es.js.map +0 -1
- package/dist/components/ui/table.es.js +0 -88
- package/dist/components/ui/table.es.js.map +0 -1
- package/dist/components/ui/tabs.es.js +0 -83
- package/dist/components/ui/tabs.es.js.map +0 -1
- package/dist/components/ui/timeline.es.js +0 -46
- package/dist/components/ui/timeline.es.js.map +0 -1
- package/dist/components/ui/tooltip.es.js +0 -28
- package/dist/components/ui/tooltip.es.js.map +0 -1
- package/dist/index.es.d.ts +0 -861
- package/dist/index.es.js +0 -218
- package/dist/index.es.js.map +0 -1
- package/dist/utils/form-context.es.js +0 -8
- package/dist/utils/form-context.es.js.map +0 -1
- package/dist/utils/form-hook.es.js +0 -30
- package/dist/utils/form-hook.es.js.map +0 -1
- package/dist/utils/primitives.es.js +0 -31
- package/dist/utils/primitives.es.js.map +0 -1
- package/dist/utils/resource-names.es.js +0 -182
- package/dist/utils/resource-names.es.js.map +0 -1
- package/dist/utils/use-mobile.es.js +0 -17
- package/dist/utils/use-mobile.es.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cryptlex/web-components",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.2.0",
|
|
4
4
|
"description": "React component library for Cryptlex web applications",
|
|
5
5
|
"author": "Cryptlex",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"private": false,
|
|
8
|
-
"main": "./dist/index.es.js",
|
|
9
|
-
"module": "./dist/index.es.js",
|
|
10
|
-
"types": "./dist/index.es.d.ts",
|
|
11
8
|
"exports": {
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
|
|
9
|
+
"./components/*": {
|
|
10
|
+
"import": "./lib/components/*"
|
|
11
|
+
},
|
|
12
|
+
"./utils/*": {
|
|
13
|
+
"import": "./lib/utils/*"
|
|
15
14
|
},
|
|
16
15
|
"./index.css": "./lib/index.css",
|
|
17
16
|
"./tokens.css": "./lib/tokens.css",
|
|
@@ -20,13 +19,7 @@
|
|
|
20
19
|
"./utilities.css": "./lib/utilities.css"
|
|
21
20
|
},
|
|
22
21
|
"files": [
|
|
23
|
-
"
|
|
24
|
-
"lib/index.css",
|
|
25
|
-
"lib/theme.css",
|
|
26
|
-
"lib/base.css",
|
|
27
|
-
"lib/utilities.css",
|
|
28
|
-
"lib/tokens.css",
|
|
29
|
-
"lib/index.css"
|
|
22
|
+
"lib"
|
|
30
23
|
],
|
|
31
24
|
"repository": {
|
|
32
25
|
"type": "git",
|
|
@@ -39,10 +32,7 @@
|
|
|
39
32
|
"design-system",
|
|
40
33
|
"cryptlex"
|
|
41
34
|
],
|
|
42
|
-
"sideEffects":
|
|
43
|
-
"**/*.css",
|
|
44
|
-
"**/*.tsx"
|
|
45
|
-
],
|
|
35
|
+
"sideEffects": false,
|
|
46
36
|
"publishConfig": {
|
|
47
37
|
"access": "public"
|
|
48
38
|
},
|
|
@@ -51,6 +41,7 @@
|
|
|
51
41
|
"@dnd-kit/core": "6.3.1",
|
|
52
42
|
"@dnd-kit/sortable": "10.0.0",
|
|
53
43
|
"@dnd-kit/utilities": "3.2.2",
|
|
44
|
+
"@internationalized/date": "^3.8.2",
|
|
54
45
|
"@tanstack/react-form": "1.6.3",
|
|
55
46
|
"@tanstack/react-query": "5.62.3",
|
|
56
47
|
"@tanstack/react-table": "8.20.5",
|
|
@@ -62,39 +53,38 @@
|
|
|
62
53
|
"lucide-react": "0.453.0",
|
|
63
54
|
"openapi-fetch": "0.14.0",
|
|
64
55
|
"react": "^19.1.0",
|
|
65
|
-
"react-dom": "^19.1.0",
|
|
66
56
|
"react-aria-components": "1.11.0",
|
|
67
|
-
"
|
|
57
|
+
"react-dom": "^19.1.0",
|
|
68
58
|
"recharts": "2.15.3",
|
|
69
59
|
"sonner": "1.7.0",
|
|
70
60
|
"tailwindcss": "^4.0.6",
|
|
71
61
|
"tw-animate-css": "1.3.0"
|
|
72
62
|
},
|
|
73
63
|
"devDependencies": {
|
|
74
|
-
"@storybook/addon-docs": "
|
|
75
|
-
"@storybook/addon-links": "
|
|
76
|
-
"@storybook/addon-onboarding": "
|
|
77
|
-
"@storybook/react-vite": "
|
|
78
|
-
"@tailwindcss/vite": "^4.
|
|
79
|
-
"@types/lodash-es": "
|
|
64
|
+
"@storybook/addon-docs": "9.0.18",
|
|
65
|
+
"@storybook/addon-links": "9.0.18",
|
|
66
|
+
"@storybook/addon-onboarding": "9.0.18",
|
|
67
|
+
"@storybook/react-vite": "9.0.18",
|
|
68
|
+
"@tailwindcss/vite": "^4.1.11",
|
|
69
|
+
"@types/lodash-es": "4.17.12",
|
|
80
70
|
"@types/node": "^22.7.8",
|
|
81
|
-
"@types/react": "19.1.0",
|
|
82
|
-
"@types/react-dom": "19.1.0",
|
|
83
|
-
"@vitejs/plugin-react": "^4.
|
|
84
|
-
"
|
|
85
|
-
"
|
|
86
|
-
"
|
|
87
|
-
"typescript": "
|
|
88
|
-
"
|
|
89
|
-
"vite": "^5.4
|
|
90
|
-
"vite-plugin-dts": "^4.2.4",
|
|
71
|
+
"@types/react": "^19.1.0",
|
|
72
|
+
"@types/react-dom": "^19.1.0",
|
|
73
|
+
"@vitejs/plugin-react": "^4.7.0",
|
|
74
|
+
"sass": "1.80.6",
|
|
75
|
+
"storybook": "9.0.18",
|
|
76
|
+
"typescript": "5.8.3",
|
|
77
|
+
"typescript-eslint": "8.38.0",
|
|
78
|
+
"vite": "7.0.6",
|
|
79
|
+
"vite-tsconfig-paths": "^5.1.4",
|
|
91
80
|
"zod": "3.25.20"
|
|
92
81
|
},
|
|
93
82
|
"scripts": {
|
|
94
|
-
"build": "tsc
|
|
83
|
+
"build": "tsc",
|
|
95
84
|
"lint": "eslint .",
|
|
96
85
|
"storybook": "storybook dev -p 6006 --no-open",
|
|
97
86
|
"build:storybook": "storybook build",
|
|
98
|
-
"build:tokens": "sass --no-source-map ./lib/tokens.scss ./lib/tokens.css"
|
|
87
|
+
"build:tokens": "sass --no-source-map ./lib/tokens.scss ./lib/tokens.css",
|
|
88
|
+
"build-storybook": "storybook build"
|
|
99
89
|
}
|
|
100
90
|
}
|
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
import { jsx as e, jsxs as s, Fragment as m } from "react/jsx-runtime";
|
|
2
|
-
import { useDataTable as T } from "./data-table.es.js";
|
|
3
|
-
import { SelectItem as w } from "../inputs/select.es.js";
|
|
4
|
-
import { EasyMenu as S, MenuItem as x } from "../ui/menu.es.js";
|
|
5
|
-
import { useResourceFormatter as O } from "../../utils/resource-names.es.js";
|
|
6
|
-
import { Filter as R, Trash as P } from "lucide-react";
|
|
7
|
-
import { useRef as d } from "react";
|
|
8
|
-
import { useAppForm as q } from "../../utils/form-hook.es.js";
|
|
9
|
-
import { TfDatePicker as D } from "../inputs/date-picker.es.js";
|
|
10
|
-
import { TfIdSearchInput as E } from "../inputs/id-search.es.js";
|
|
11
|
-
import { cn as N } from "../../utils/primitives.es.js";
|
|
12
|
-
import { PopoverTrigger as $, Popover as I } from "../ui/popover.es.js";
|
|
13
|
-
import { Button as c } from "../ui/button.es.js";
|
|
14
|
-
const X = [
|
|
15
|
-
"eq",
|
|
16
|
-
"ne",
|
|
17
|
-
"cn",
|
|
18
|
-
"nc",
|
|
19
|
-
"sw",
|
|
20
|
-
"ew",
|
|
21
|
-
"in",
|
|
22
|
-
"nin",
|
|
23
|
-
"gt",
|
|
24
|
-
"gte",
|
|
25
|
-
"lt",
|
|
26
|
-
"lte"
|
|
27
|
-
], _ = {
|
|
28
|
-
eq: "equal to",
|
|
29
|
-
ne: "not equal to",
|
|
30
|
-
cn: "contains",
|
|
31
|
-
nc: "does not contain",
|
|
32
|
-
sw: "starts with",
|
|
33
|
-
ew: "ends with",
|
|
34
|
-
in: "includes",
|
|
35
|
-
nin: "does not include",
|
|
36
|
-
gt: "greater than",
|
|
37
|
-
gte: "greater than or equal to",
|
|
38
|
-
lt: "less than",
|
|
39
|
-
lte: "less than or equal to"
|
|
40
|
-
}, h = {
|
|
41
|
-
bool: ["eq"],
|
|
42
|
-
enum: ["in", "nin"],
|
|
43
|
-
id: ["in", "nin"],
|
|
44
|
-
"id-search": ["in", "nin"],
|
|
45
|
-
string: ["eq", "ne", "cn", "nc", "sw", "ew", "in", "nin"],
|
|
46
|
-
date: ["lt", "gt"]
|
|
47
|
-
};
|
|
48
|
-
function Y({ className: f, ...g }) {
|
|
49
|
-
const { filters: F, query: y, setFilters: v, filterConfig: o } = T();
|
|
50
|
-
d([]);
|
|
51
|
-
const A = d(null), p = O(), a = q({
|
|
52
|
-
defaultValues: {
|
|
53
|
-
// TODO, initialize with filters from tableState
|
|
54
|
-
filters: []
|
|
55
|
-
},
|
|
56
|
-
onSubmit: ({ value: i }) => {
|
|
57
|
-
v(i.filters.map((t) => ({ [t.property]: { [t.operator]: [t.value] } })));
|
|
58
|
-
}
|
|
59
|
-
}), u = Object.keys(o).sort();
|
|
60
|
-
return /* @__PURE__ */ e("section", { ...g, className: N("flex gap-icon items-center", f), children: /* @__PURE__ */ s($, { onOpenChange: (i) => {
|
|
61
|
-
var t;
|
|
62
|
-
i ? (t = A.current) == null || t.focus() : a.handleSubmit();
|
|
63
|
-
}, children: [
|
|
64
|
-
/* @__PURE__ */ e(c, { active: F.length > 0, isDisabled: y.isPending || u.length === 0, type: "button", size: "icon", variant: "neutral", children: /* @__PURE__ */ e(R, {}) }),
|
|
65
|
-
/* @__PURE__ */ e(I, { className: "w-full p-icon", children: /* @__PURE__ */ e("form", { onSubmit: (i) => {
|
|
66
|
-
i.preventDefault();
|
|
67
|
-
}, className: "flex flex-col gap-icon max-h-table overflow-auto ", children: /* @__PURE__ */ e(a.Field, { mode: "array", name: "filters", children: (i) => /* @__PURE__ */ s(m, { children: [
|
|
68
|
-
i.state.value.map((t, n) => /* @__PURE__ */ s("div", { className: "flex gap-icon items-center justify-normal", children: [
|
|
69
|
-
/* @__PURE__ */ e("span", { className: "text-sm", children: p(t.property) }),
|
|
70
|
-
/* @__PURE__ */ e(
|
|
71
|
-
a.AppField,
|
|
72
|
-
{
|
|
73
|
-
name: `filters[${n}].operator`,
|
|
74
|
-
children: (r) => /* @__PURE__ */ e(r.TfSingleSelect, { items: h[t.type].map((l) => ({ id: l, label: /* @__PURE__ */ e(m, { children: _[l] }) })), children: (l) => /* @__PURE__ */ e(w, { id: l.id, children: l.label }) })
|
|
75
|
-
},
|
|
76
|
-
t.id
|
|
77
|
-
),
|
|
78
|
-
t.type === "bool" && /* @__PURE__ */ e(a.AppField, { name: `filters[${n}].value`, children: (r) => /* @__PURE__ */ e(r.TfCheckbox, {}) }),
|
|
79
|
-
t.type === "date" && /* @__PURE__ */ e(a.AppField, { name: `filters[${n}].value`, children: (r) => /* @__PURE__ */ e(D, {}) }),
|
|
80
|
-
t.type === "id" && /* @__PURE__ */ e(a.AppField, { name: `filters[${n}].value`, children: (r) => /* @__PURE__ */ e(r.TfTextField, {}) }),
|
|
81
|
-
t.type === "string" && /* @__PURE__ */ e(a.AppField, { name: `filters[${n}].value`, children: (r) => /* @__PURE__ */ e(r.TfTextField, {}) }),
|
|
82
|
-
t.type === "enum" && /* @__PURE__ */ e(a.AppField, { name: `filters[${n}].value`, children: (r) => /* @__PURE__ */ e(r.TfMultiSelect, { items: o[t.property].options }) }),
|
|
83
|
-
t.type === "id-search" && /* @__PURE__ */ e(a.AppField, { name: `filters[${n}].value`, children: (r) => /* @__PURE__ */ e(E, { multiple: !0, accessor: "id", searchFn: o[t.property].search }) }),
|
|
84
|
-
/* @__PURE__ */ e(c, { type: "button", variant: "destructive", size: "icon", onPress: () => i.removeValue(n), children: /* @__PURE__ */ e(P, {}) })
|
|
85
|
-
] }, t.id)),
|
|
86
|
-
/* @__PURE__ */ s("div", { className: "flex w-full items-center justify-end gap-2 not-first:mt-icon", children: [
|
|
87
|
-
/* @__PURE__ */ e(S, { label: "Add Filter", children: u.map((t) => /* @__PURE__ */ e(x, { onAction: () => {
|
|
88
|
-
const n = o[t].type, r = (b) => {
|
|
89
|
-
switch (b) {
|
|
90
|
-
case "bool":
|
|
91
|
-
return !0;
|
|
92
|
-
case "string":
|
|
93
|
-
return "";
|
|
94
|
-
case "date":
|
|
95
|
-
return (/* @__PURE__ */ new Date()).toISOString();
|
|
96
|
-
case "id":
|
|
97
|
-
return "";
|
|
98
|
-
case "id-search":
|
|
99
|
-
return [];
|
|
100
|
-
case "enum":
|
|
101
|
-
return [];
|
|
102
|
-
}
|
|
103
|
-
}, l = {
|
|
104
|
-
id: `${t}-${Date.now()}`,
|
|
105
|
-
operator: h[n][0],
|
|
106
|
-
value: r(n),
|
|
107
|
-
type: n,
|
|
108
|
-
property: t
|
|
109
|
-
};
|
|
110
|
-
i.pushValue(l);
|
|
111
|
-
}, className: "dropdown-item", children: p(t) }, t)) }),
|
|
112
|
-
i.state.value.length > 0 ? /* @__PURE__ */ e(
|
|
113
|
-
c,
|
|
114
|
-
{
|
|
115
|
-
type: "button",
|
|
116
|
-
variant: "neutral",
|
|
117
|
-
onPress: () => {
|
|
118
|
-
i.setValue([]);
|
|
119
|
-
},
|
|
120
|
-
children: "Reset filters"
|
|
121
|
-
}
|
|
122
|
-
) : null
|
|
123
|
-
] })
|
|
124
|
-
] }) }) }) })
|
|
125
|
-
] }) });
|
|
126
|
-
}
|
|
127
|
-
export {
|
|
128
|
-
_ as COMPARISON_OPERATOR_LABELS,
|
|
129
|
-
Y as DataTableFilter,
|
|
130
|
-
X as FILTER_COMPARISON_OPERATORS
|
|
131
|
-
};
|
|
132
|
-
//# sourceMappingURL=data-table-filter.es.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-filter.es.js","sources":["../../../lib/components/data-table/data-table-filter.tsx"],"sourcesContent":["import { useDataTable, type OperationKeys } from \"@/components/data-table/data-table\";\nimport { type ApiFilters } from \"@/components/data-table/table-commons\";\nimport { TfDatePicker, TfIdSearchInput, type MultiSelectProps } from \"@/components/inputs\";\nimport { SelectItem } from \"@/components/inputs/select\";\nimport { Button, Popover, PopoverTrigger, } from \"@/components/ui\";\nimport { EasyMenu, MenuItem } from \"@/components/ui/menu\";\nimport { cn, useAppForm } from \"@/utils\";\nimport { useResourceFormatter } from \"@/utils/resource-names\";\nimport type { CalendarDateTime } from \"@internationalized/date\";\nimport { Filter, Trash } from \"lucide-react\";\nimport { useRef } from \"react\";\n\nexport const FILTER_COMPARISON_OPERATORS = [\n 'eq',\n 'ne',\n 'cn',\n 'nc',\n 'sw',\n 'ew',\n 'in',\n 'nin',\n 'gt',\n 'gte',\n 'lt',\n 'lte',\n] as const;\nexport type FilterComparisonOperator =\n (typeof FILTER_COMPARISON_OPERATORS)[number];\n\nexport const COMPARISON_OPERATOR_LABELS: Record<\n FilterComparisonOperator,\n string\n> = {\n eq: 'equal to',\n ne: 'not equal to',\n cn: 'contains',\n nc: 'does not contain',\n sw: 'starts with',\n ew: 'ends with',\n in: 'includes',\n nin: 'does not include',\n gt: 'greater than',\n gte: 'greater than or equal to',\n lt: 'less than',\n lte: 'less than or equal to',\n};\n\ntype BaseLocalFilter<T extends FilterType, V> = {\n id: string;\n type: T;\n property: string;\n operator: FilterComparisonOperator;\n value: V | undefined;\n displayValue?: string;\n};\ntype EnumLocalFilter = BaseLocalFilter<'enum', Set<string | number>>;\ntype IdLocalFilter = BaseLocalFilter<'id', string>;\ntype BoolLocalFilter = BaseLocalFilter<'bool', boolean>;\ntype StringLocalFilter = BaseLocalFilter<'string', string>;\ntype DateLocalFilter = BaseLocalFilter<'date', CalendarDateTime>;\ntype IdSearchLocalFilter = BaseLocalFilter<'id-search', Set<string | number>>;\n\ntype LocalFilter = EnumLocalFilter\n | IdLocalFilter\n | BoolLocalFilter\n | StringLocalFilter\n | DateLocalFilter\n | IdSearchLocalFilter;\n\nexport type FilterConfig =\n | { type: 'enum'; options: MultiSelectProps['items'] }\n | { type: 'id-search'; search: () => Promise<{ id: string; name: string }[]> }\n | { type: 'id' }\n | { type: 'bool' }\n | { type: 'string' }\n | { type: 'date' }\n\nexport type FilterType = FilterConfig['type'];\n\nconst FilterOperations: Record<FilterType, FilterComparisonOperator[]> = {\n 'bool': ['eq'],\n 'enum': ['in', 'nin'],\n 'id': ['in', 'nin'],\n 'id-search': ['in', 'nin'],\n 'string': ['eq', 'ne', 'cn', 'nc', 'sw', 'ew', 'in', 'nin'],\n 'date': ['lt', 'gt'],\n}\n\nexport type FiltersConfig<TOperation extends OperationKeys> = Required<Record<keyof ApiFilters<TOperation>, FilterConfig>>\n\nexport function DataTableFilter({ className, ...props }: React.ComponentProps<'section'>) {\n const { filters, query, setFilters, filterConfig } = useDataTable();\n const localFilterRefs = useRef([]);\n const addFilterButtonRef = useRef<HTMLButtonElement>(null);\n\n const resourceFormatter = useResourceFormatter();\n\n const DEFAULT_VALUES: { filters: LocalFilter[] } = {\n // TODO, initialize with filters from tableState\n filters: []\n };\n const form = useAppForm({\n defaultValues: DEFAULT_VALUES,\n onSubmit: ({ value }) => {\n // TODO, instead of generic transformation, use type based tranform()\n setFilters(value.filters.map(lf => { return { [lf.property]: { [lf.operator]: [lf.value] } } }))\n }\n })\n\n // More reason to hate TS https://github.com/Microsoft/TypeScript/issues/12870\n const filterKeys = Object.keys(filterConfig).sort();\n\n return (\n <section {...props} className={cn(\"flex gap-icon items-center\", className)}>\n <PopoverTrigger onOpenChange={(o) => {\n // Set filters when the popover closes\n if (!o) {\n form.handleSubmit();\n } else {\n addFilterButtonRef.current?.focus();\n }\n }}>\n <Button active={filters.length > 0} isDisabled={query.isPending || filterKeys.length === 0} type=\"button\" size={'icon'} variant={'neutral'}><Filter /></Button>\n {/* TODO, icon maps with dynamic imports? */}\n {/* TODO open popover with form for property specific filter */}\n {/* TODO, icons here??? */}\n <Popover className=\"w-full p-icon\">\n {/* const h3Styles = \"body mb-icon text-muted-foreground\"; */}\n {/* <h3 className={h3Styles}>{isFiltersActive ? \"Active filters\" : \"Add filters\"}</h3> */}\n <form onSubmit={(e) => { e.preventDefault(); }} className=\"flex flex-col gap-icon max-h-table overflow-auto \">\n <form.Field mode=\"array\" name={\"filters\"}>\n {\n (field) => {\n return <>\n {field.state.value.map((lf, i) => {\n return (\n <div key={lf.id} className=\"flex gap-icon items-center justify-normal\">\n <span className=\"text-sm\">{resourceFormatter(lf.property)}</span>\n <form.AppField\n key={lf.id}\n name={`filters[${i}].operator`}\n >\n {(sf) => (<sf.TfSingleSelect items={FilterOperations[lf.type].map(op => ({ id: op, label: <>{COMPARISON_OPERATOR_LABELS[op]}</> }))}>{(operator) => <SelectItem id={operator.id}>{operator.label}</SelectItem>}</sf.TfSingleSelect>)}\n </form.AppField>\n\n {lf.type === 'bool' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfCheckbox />)}</form.AppField>}\n {lf.type === 'date' && <form.AppField name={`filters[${i}].value`}>{(_) => (<TfDatePicker />)}</form.AppField>}\n {lf.type === 'id' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfTextField />)}</form.AppField>}\n {lf.type === 'string' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfTextField />)}</form.AppField>}\n {lf.type === 'enum' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfMultiSelect items={filterConfig[lf.property].options} />)}</form.AppField>}\n {lf.type === 'id-search' && <form.AppField name={`filters[${i}].value`}>{(_) => (<TfIdSearchInput multiple accessor=\"id\" searchFn={filterConfig[lf.property].search} />)}</form.AppField>}\n\n <Button type=\"button\" variant=\"destructive\" size=\"icon\" onPress={() => field.removeValue(i)}><Trash /></Button>\n </div>\n )\n })}\n <div className=\"flex w-full items-center justify-end gap-2 not-first:mt-icon\">\n <EasyMenu label=\"Add Filter\">\n {filterKeys.map(k => <MenuItem key={k} onAction={() => {\n const type = filterConfig[k].type as FilterType;\n\n const defaultValue = (t: FilterType) => {\n // TODO, ensure exhaustive???\n switch (t) {\n case 'bool':\n return true;\n case 'string':\n return '';\n case 'date':\n return new Date().toISOString();\n case 'id':\n return '';\n case 'id-search':\n return [] as string[];\n case 'enum':\n return [] as string[];\n }\n }\n\n const newFilter: LocalFilter = {\n id: `${k}-${Date.now()}`,\n operator: FilterOperations[type][0],\n value: defaultValue(type),\n type: type,\n property: k,\n };\n\n field.pushValue(newFilter);\n // TODO Focus to ref\n\n }} className=\"dropdown-item\">{resourceFormatter(k)}</MenuItem>)}\n </EasyMenu>\n {field.state.value.length > 0 ? (\n <Button\n type=\"button\"\n variant=\"neutral\"\n onPress={() => { field.setValue([]) }}\n >\n Reset filters\n </Button>\n ) : null}\n </div>\n </>\n }\n }\n </form.Field >\n </form>\n </Popover>\n </PopoverTrigger>\n </section>\n );\n};"],"names":["FILTER_COMPARISON_OPERATORS","COMPARISON_OPERATOR_LABELS","FilterOperations","DataTableFilter","className","props","filters","query","setFilters","filterConfig","useDataTable","useRef","addFilterButtonRef","resourceFormatter","useResourceFormatter","form","useAppForm","value","lf","filterKeys","jsx","cn","jsxs","PopoverTrigger","o","_a","Button","Filter","Popover","e","field","Fragment","i","sf","op","operator","SelectItem","_","TfDatePicker","TfIdSearchInput","Trash","EasyMenu","k","MenuItem","type","defaultValue","t","newFilter"],"mappings":"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"}
|