@burdenoff/microfe-bigconsole 2026.1027.1 → 2026.1028.1
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.
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
1
|
+
import { collectCategories as e, filterTemplates as t, formatCategoryLabel as n } from "../../utils/templateGalleryFilter.js";
|
|
2
|
+
import { memo as r, useMemo as i, useState as a } from "react";
|
|
3
|
+
import { Download as o, LayoutTemplate as s, Search as c, Sparkles as l, Star as u } from "lucide-react";
|
|
4
|
+
import { Badge as d, Input as f, Spinner as p } from "@burdenoff/fe-libs/ui";
|
|
5
|
+
import { jsx as m, jsxs as h } from "react/jsx-runtime";
|
|
5
6
|
//#region src/bigconsole/components/dashboard/StoreTemplatePicker.tsx
|
|
6
|
-
var
|
|
7
|
+
var g = {
|
|
7
8
|
textAlign: "left",
|
|
8
9
|
padding: "var(--space-cardPadding)",
|
|
9
10
|
borderRadius: "var(--radius-card)",
|
|
@@ -14,38 +15,41 @@ var l = {
|
|
|
14
15
|
flexDirection: "column",
|
|
15
16
|
gap: "var(--space-controlGap)",
|
|
16
17
|
transition: "all 0.15s ease"
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
}, _ = r(function({ templates: r, loading: _, error: v, selectedTemplateId: y, onSelect: b }) {
|
|
19
|
+
let [x, S] = a("ALL"), [C, w] = a(""), T = i(() => e(r), [r]), E = x === "ALL" || T.includes(x) ? x : "ALL", D = i(() => t(r, E, C), [
|
|
20
|
+
r,
|
|
21
|
+
E,
|
|
22
|
+
C
|
|
23
|
+
]);
|
|
24
|
+
if (_) return /* @__PURE__ */ m("div", {
|
|
23
25
|
style: {
|
|
24
26
|
display: "flex",
|
|
25
27
|
justifyContent: "center",
|
|
26
28
|
padding: "var(--space-pagePadding)"
|
|
27
29
|
},
|
|
28
|
-
children: /* @__PURE__ */
|
|
29
|
-
})
|
|
30
|
+
children: /* @__PURE__ */ m(p, {})
|
|
31
|
+
});
|
|
32
|
+
if (v) return /* @__PURE__ */ h("div", {
|
|
30
33
|
style: {
|
|
31
34
|
padding: "var(--space-cardPadding)",
|
|
32
35
|
color: "var(--color-status-error-text)"
|
|
33
36
|
},
|
|
34
|
-
children: ["Could not load templates from the store: ",
|
|
35
|
-
})
|
|
37
|
+
children: ["Could not load templates from the store: ", v]
|
|
38
|
+
});
|
|
39
|
+
if (r.length === 0) return /* @__PURE__ */ h("div", {
|
|
36
40
|
style: {
|
|
37
41
|
padding: "var(--space-pagePadding)",
|
|
38
42
|
textAlign: "center",
|
|
39
43
|
color: "var(--color-text-muted)"
|
|
40
44
|
},
|
|
41
45
|
children: [
|
|
42
|
-
/* @__PURE__ */ s
|
|
46
|
+
/* @__PURE__ */ m(s, { style: {
|
|
43
47
|
height: "var(--size-icon-lg)",
|
|
44
48
|
width: "var(--size-icon-lg)",
|
|
45
49
|
margin: "0 auto var(--space-formGap)"
|
|
46
50
|
} }),
|
|
47
|
-
/* @__PURE__ */
|
|
48
|
-
/* @__PURE__ */
|
|
51
|
+
/* @__PURE__ */ m("div", { children: "No dashboard templates published yet" }),
|
|
52
|
+
/* @__PURE__ */ m("div", {
|
|
49
53
|
style: {
|
|
50
54
|
fontSize: "var(--font-size-body-sm)",
|
|
51
55
|
marginTop: "var(--space-iconGap)"
|
|
@@ -53,45 +57,138 @@ var d = e(function({ templates: e, loading: d, error: f, selectedTemplateId: p,
|
|
|
53
57
|
children: "Templates published to the store will appear here."
|
|
54
58
|
})
|
|
55
59
|
]
|
|
56
|
-
})
|
|
60
|
+
});
|
|
61
|
+
let O = (e) => ({
|
|
62
|
+
padding: "4px var(--space-controlGap)",
|
|
63
|
+
borderRadius: "var(--radius-pill)",
|
|
64
|
+
border: "1px solid",
|
|
65
|
+
borderColor: e ? "var(--color-action-primary-border)" : "var(--color-border-subtle)",
|
|
66
|
+
backgroundColor: e ? "var(--color-action-primary-bg)" : "var(--color-bg-surface)",
|
|
67
|
+
color: e ? "var(--color-action-primary-text)" : "var(--color-text-secondary)",
|
|
68
|
+
fontSize: "var(--font-size-body-sm)",
|
|
69
|
+
cursor: "pointer",
|
|
70
|
+
whiteSpace: "nowrap"
|
|
71
|
+
}), k = /* @__PURE__ */ h("div", {
|
|
72
|
+
style: {
|
|
73
|
+
display: "flex",
|
|
74
|
+
flexWrap: "wrap",
|
|
75
|
+
alignItems: "center",
|
|
76
|
+
gap: "var(--space-controlGap)",
|
|
77
|
+
marginBottom: "var(--space-formGap)"
|
|
78
|
+
},
|
|
79
|
+
children: [T.length > 0 && /* @__PURE__ */ h("div", {
|
|
80
|
+
role: "group",
|
|
81
|
+
"aria-label": "Template category",
|
|
82
|
+
style: {
|
|
83
|
+
display: "flex",
|
|
84
|
+
flexWrap: "wrap",
|
|
85
|
+
gap: "var(--space-iconGap)",
|
|
86
|
+
flex: "1 1 240px",
|
|
87
|
+
minWidth: 0
|
|
88
|
+
},
|
|
89
|
+
children: [/* @__PURE__ */ m("button", {
|
|
90
|
+
type: "button",
|
|
91
|
+
"data-testid": "template-category-filter-all",
|
|
92
|
+
"aria-pressed": E === "ALL",
|
|
93
|
+
onClick: () => S("ALL"),
|
|
94
|
+
style: O(E === "ALL"),
|
|
95
|
+
children: "All"
|
|
96
|
+
}), T.map((e) => /* @__PURE__ */ m("button", {
|
|
97
|
+
type: "button",
|
|
98
|
+
"data-testid": "template-category-filter",
|
|
99
|
+
"aria-pressed": E === e,
|
|
100
|
+
onClick: () => S(e),
|
|
101
|
+
style: O(E === e),
|
|
102
|
+
children: n(e)
|
|
103
|
+
}, e))]
|
|
104
|
+
}), /* @__PURE__ */ h("div", {
|
|
105
|
+
style: {
|
|
106
|
+
position: "relative",
|
|
107
|
+
flex: "1 1 200px",
|
|
108
|
+
minWidth: 0
|
|
109
|
+
},
|
|
110
|
+
children: [/* @__PURE__ */ m(c, {
|
|
111
|
+
"aria-hidden": "true",
|
|
112
|
+
style: {
|
|
113
|
+
position: "absolute",
|
|
114
|
+
left: "var(--space-controlGap)",
|
|
115
|
+
top: "50%",
|
|
116
|
+
transform: "translateY(-50%)",
|
|
117
|
+
height: "var(--size-icon-sm)",
|
|
118
|
+
width: "var(--size-icon-sm)",
|
|
119
|
+
color: "var(--color-text-muted)"
|
|
120
|
+
}
|
|
121
|
+
}), /* @__PURE__ */ m(f, {
|
|
122
|
+
type: "search",
|
|
123
|
+
"data-testid": "template-search",
|
|
124
|
+
"aria-label": "Search templates",
|
|
125
|
+
placeholder: "Search templates...",
|
|
126
|
+
value: C,
|
|
127
|
+
onChange: (e) => w(e.target.value),
|
|
128
|
+
style: {
|
|
129
|
+
paddingLeft: "var(--size-controlHeight-md)",
|
|
130
|
+
height: "var(--size-controlHeight-md)"
|
|
131
|
+
}
|
|
132
|
+
})]
|
|
133
|
+
})]
|
|
134
|
+
});
|
|
135
|
+
return D.length === 0 ? /* @__PURE__ */ h("div", { children: [k, /* @__PURE__ */ h("div", {
|
|
136
|
+
"data-testid": "template-no-results",
|
|
137
|
+
style: {
|
|
138
|
+
padding: "var(--space-pagePadding)",
|
|
139
|
+
textAlign: "center",
|
|
140
|
+
color: "var(--color-text-muted)"
|
|
141
|
+
},
|
|
142
|
+
children: [/* @__PURE__ */ m("div", { children: "No templates match your search" }), /* @__PURE__ */ m("button", {
|
|
143
|
+
type: "button",
|
|
144
|
+
onClick: () => {
|
|
145
|
+
w(""), S("ALL");
|
|
146
|
+
},
|
|
147
|
+
style: {
|
|
148
|
+
...O(!1),
|
|
149
|
+
marginTop: "var(--space-iconGap)"
|
|
150
|
+
},
|
|
151
|
+
children: "Clear filters"
|
|
152
|
+
})]
|
|
153
|
+
})] }) : /* @__PURE__ */ h("div", { children: [k, /* @__PURE__ */ m("div", {
|
|
57
154
|
style: {
|
|
58
155
|
display: "grid",
|
|
59
156
|
gridTemplateColumns: "repeat(auto-fill, minmax(min(220px, 100%), 1fr))",
|
|
60
157
|
gap: "var(--space-formGap)"
|
|
61
158
|
},
|
|
62
|
-
children:
|
|
63
|
-
let
|
|
64
|
-
return /* @__PURE__ */
|
|
159
|
+
children: D.map((e) => {
|
|
160
|
+
let t = e.id === y;
|
|
161
|
+
return /* @__PURE__ */ h("button", {
|
|
65
162
|
type: "button",
|
|
66
|
-
onClick: () =>
|
|
67
|
-
"aria-pressed":
|
|
163
|
+
onClick: () => b(e),
|
|
164
|
+
"aria-pressed": t,
|
|
68
165
|
style: {
|
|
69
|
-
...
|
|
70
|
-
borderColor:
|
|
71
|
-
backgroundColor:
|
|
72
|
-
boxShadow:
|
|
166
|
+
...g,
|
|
167
|
+
borderColor: t ? "var(--color-action-primary-border)" : "var(--color-border-subtle)",
|
|
168
|
+
backgroundColor: t ? "var(--color-bg-accentSubtle)" : "var(--color-bg-surface)",
|
|
169
|
+
boxShadow: t ? "0 0 0 2px var(--color-action-primary-bg)" : "none"
|
|
73
170
|
},
|
|
74
171
|
children: [
|
|
75
|
-
/* @__PURE__ */
|
|
172
|
+
/* @__PURE__ */ h("div", {
|
|
76
173
|
style: {
|
|
77
174
|
display: "flex",
|
|
78
175
|
alignItems: "center",
|
|
79
176
|
gap: "var(--space-iconGap)"
|
|
80
177
|
},
|
|
81
178
|
children: [
|
|
82
|
-
/* @__PURE__ */ s
|
|
179
|
+
/* @__PURE__ */ m(s, { style: {
|
|
83
180
|
height: "var(--size-icon-sm)",
|
|
84
181
|
width: "var(--size-icon-sm)",
|
|
85
182
|
flexShrink: 0
|
|
86
183
|
} }),
|
|
87
|
-
/* @__PURE__ */
|
|
184
|
+
/* @__PURE__ */ m("span", {
|
|
88
185
|
style: {
|
|
89
186
|
fontWeight: "var(--font-weight-medium)",
|
|
90
187
|
minWidth: 0
|
|
91
188
|
},
|
|
92
189
|
children: e.name
|
|
93
190
|
}),
|
|
94
|
-
e.featured && /* @__PURE__ */
|
|
191
|
+
e.featured && /* @__PURE__ */ h("span", {
|
|
95
192
|
"data-testid": "template-featured",
|
|
96
193
|
title: "Featured in the store",
|
|
97
194
|
style: {
|
|
@@ -109,7 +206,7 @@ var d = e(function({ templates: e, loading: d, error: f, selectedTemplateId: p,
|
|
|
109
206
|
textTransform: "uppercase",
|
|
110
207
|
letterSpacing: "0.02em"
|
|
111
208
|
},
|
|
112
|
-
children: [/* @__PURE__ */
|
|
209
|
+
children: [/* @__PURE__ */ m(l, {
|
|
113
210
|
style: {
|
|
114
211
|
height: "10px",
|
|
115
212
|
width: "10px"
|
|
@@ -119,7 +216,7 @@ var d = e(function({ templates: e, loading: d, error: f, selectedTemplateId: p,
|
|
|
119
216
|
})
|
|
120
217
|
]
|
|
121
218
|
}),
|
|
122
|
-
/* @__PURE__ */
|
|
219
|
+
/* @__PURE__ */ m("div", {
|
|
123
220
|
style: {
|
|
124
221
|
fontSize: "var(--font-size-body-sm)",
|
|
125
222
|
color: "var(--color-text-muted)",
|
|
@@ -130,7 +227,7 @@ var d = e(function({ templates: e, loading: d, error: f, selectedTemplateId: p,
|
|
|
130
227
|
},
|
|
131
228
|
children: e.description || "No description provided"
|
|
132
229
|
}),
|
|
133
|
-
/* @__PURE__ */
|
|
230
|
+
/* @__PURE__ */ h("div", {
|
|
134
231
|
style: {
|
|
135
232
|
display: "flex",
|
|
136
233
|
alignItems: "center",
|
|
@@ -141,14 +238,14 @@ var d = e(function({ templates: e, loading: d, error: f, selectedTemplateId: p,
|
|
|
141
238
|
color: "var(--color-text-muted)"
|
|
142
239
|
},
|
|
143
240
|
children: [
|
|
144
|
-
e.requiresPurchase ? /* @__PURE__ */
|
|
241
|
+
e.requiresPurchase ? /* @__PURE__ */ h(d, {
|
|
145
242
|
variant: "secondary",
|
|
146
243
|
children: ["$", e.price]
|
|
147
|
-
}) : /* @__PURE__ */
|
|
244
|
+
}) : /* @__PURE__ */ m(d, {
|
|
148
245
|
variant: "secondary",
|
|
149
246
|
children: "Free"
|
|
150
247
|
}),
|
|
151
|
-
e.category && /* @__PURE__ */
|
|
248
|
+
e.category && /* @__PURE__ */ m("span", {
|
|
152
249
|
"data-testid": "template-category",
|
|
153
250
|
style: {
|
|
154
251
|
padding: "2px 6px",
|
|
@@ -157,26 +254,26 @@ var d = e(function({ templates: e, loading: d, error: f, selectedTemplateId: p,
|
|
|
157
254
|
color: "var(--color-text-secondary)",
|
|
158
255
|
whiteSpace: "nowrap"
|
|
159
256
|
},
|
|
160
|
-
children:
|
|
257
|
+
children: n(e.category)
|
|
161
258
|
}),
|
|
162
|
-
e.downloads > 0 && /* @__PURE__ */
|
|
259
|
+
e.downloads > 0 && /* @__PURE__ */ h("span", {
|
|
163
260
|
style: {
|
|
164
261
|
display: "inline-flex",
|
|
165
262
|
alignItems: "center",
|
|
166
263
|
gap: "2px"
|
|
167
264
|
},
|
|
168
|
-
children: [/* @__PURE__ */
|
|
265
|
+
children: [/* @__PURE__ */ m(o, { style: {
|
|
169
266
|
height: "12px",
|
|
170
267
|
width: "12px"
|
|
171
268
|
} }), e.downloads]
|
|
172
269
|
}),
|
|
173
|
-
e.rating ? /* @__PURE__ */
|
|
270
|
+
e.rating ? /* @__PURE__ */ h("span", {
|
|
174
271
|
style: {
|
|
175
272
|
display: "inline-flex",
|
|
176
273
|
alignItems: "center",
|
|
177
274
|
gap: "2px"
|
|
178
275
|
},
|
|
179
|
-
children: [/* @__PURE__ */
|
|
276
|
+
children: [/* @__PURE__ */ m(u, { style: {
|
|
180
277
|
height: "12px",
|
|
181
278
|
width: "12px"
|
|
182
279
|
} }), e.rating.toFixed(1)]
|
|
@@ -186,7 +283,7 @@ var d = e(function({ templates: e, loading: d, error: f, selectedTemplateId: p,
|
|
|
186
283
|
]
|
|
187
284
|
}, e.id);
|
|
188
285
|
})
|
|
189
|
-
});
|
|
286
|
+
})] });
|
|
190
287
|
});
|
|
191
288
|
//#endregion
|
|
192
|
-
export {
|
|
289
|
+
export { _ as default };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { StoreDashboardTemplate } from '../hooks/useStoreDashboardTemplates';
|
|
2
|
+
export declare const ALL_CATEGORIES = "ALL";
|
|
3
|
+
/**
|
|
4
|
+
* `StoreProduct.category` is free-form: publishers write either prose
|
|
5
|
+
* ("Operations") or a machine constant ("SALES_PIPELINE"). Only the machine
|
|
6
|
+
* form is rewritten; prose is shown exactly as published.
|
|
7
|
+
*/
|
|
8
|
+
export declare function formatCategoryLabel(raw: string): string;
|
|
9
|
+
/** Distinct non-empty categories, in first-seen order. */
|
|
10
|
+
export declare function collectCategories(templates: StoreDashboardTemplate[]): string[];
|
|
11
|
+
export declare function filterTemplates(templates: StoreDashboardTemplate[], category: string, query: string): StoreDashboardTemplate[];
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
function e(e) {
|
|
2
|
+
return /^[A-Z0-9_]+$/.test(e) ? e.toLowerCase().split("_").filter(Boolean).map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join(" ") : e;
|
|
3
|
+
}
|
|
4
|
+
function t(e) {
|
|
5
|
+
let t = /* @__PURE__ */ new Set();
|
|
6
|
+
for (let n of e) n.category && t.add(n.category);
|
|
7
|
+
return [...t];
|
|
8
|
+
}
|
|
9
|
+
function n(t, n, r) {
|
|
10
|
+
let i = r.trim().toLowerCase();
|
|
11
|
+
return t.filter((t) => n !== "ALL" && t.category !== n ? !1 : i ? [
|
|
12
|
+
t.name,
|
|
13
|
+
t.description ?? "",
|
|
14
|
+
t.category ? e(t.category) : "",
|
|
15
|
+
...t.tags
|
|
16
|
+
].join(" ").toLowerCase().includes(i) : !0);
|
|
17
|
+
}
|
|
18
|
+
//#endregion
|
|
19
|
+
export { t as collectCategories, n as filterTemplates, e as formatCategoryLabel };
|