blixify-ui-web-mcp 0.1.24 โ 0.1.25
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.
|
@@ -22,6 +22,38 @@ This is the **base primitive** for the Batch 3 work. `NewListRow` is exported in
|
|
|
22
22
|
|
|
23
23
|
Do not duplicate the row layout in those components โ extend `NewListRow` via `renderExtra` or compose.
|
|
24
24
|
|
|
25
|
+
## Item content
|
|
26
|
+
|
|
27
|
+
| Item field | Rendered as |
|
|
28
|
+
| --- | --- |
|
|
29
|
+
| `title` | Row title |
|
|
30
|
+
| `description` | String / number: a `<p>`. Element: a `<div>` (block content). Both are truncated to one line per line of content unless `noTruncate` |
|
|
31
|
+
| `tag` / `tags` | Pill(s) next to the title |
|
|
32
|
+
| `date` | Right-aligned date text (see below) |
|
|
33
|
+
| `icon` / `img` | Avatar |
|
|
34
|
+
| `action` | Right-side element |
|
|
35
|
+
| any key in `extraKeys` | Block content under the description, in order |
|
|
36
|
+
|
|
37
|
+
The legacy `List` renders **every** extra key on an item. `NewList` renders only the keys listed in `extraKeys`:
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
<NewList list={tasks} extraKeys={["details", "activity"]} />
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Date
|
|
44
|
+
|
|
45
|
+
| `date` value | Output |
|
|
46
|
+
| --- | --- |
|
|
47
|
+
| `Date`, or a string / number `new Date()` parses | `dateFormat(date)` when given, else `date.toLocaleDateString()` (browser locale, no time) |
|
|
48
|
+
| A string `new Date()` cannot parse (e.g. `"18/09/2026 10:00"`) | The string as given |
|
|
49
|
+
|
|
50
|
+
```tsx
|
|
51
|
+
<NewList
|
|
52
|
+
list={tasks}
|
|
53
|
+
dateFormat={(date) => moment(date).format("DD/MM/YYYY HH:mm")}
|
|
54
|
+
/>
|
|
55
|
+
```
|
|
56
|
+
|
|
25
57
|
## Status
|
|
26
58
|
|
|
27
59
|
๐ง **Scaffold only.** Implementation lands in follow-up commits per #1714.
|
|
@@ -219,6 +219,46 @@ export const NewList = () => (
|
|
|
219
219
|
<NewListImpl list={baseLists} darkMode />
|
|
220
220
|
</StorySection>
|
|
221
221
|
|
|
222
|
+
<StorySection
|
|
223
|
+
title="NewList โ Extra Keys, Date Format and Rich Description"
|
|
224
|
+
description="extraKeys renders the named item keys (string or element) as block content under the description โ the legacy List rendered every extra key, NewList only the ones named. dateFormat customises the date text (here with time); a date string Date cannot parse is shown as given. A non-string description renders as block content in a div, truncated like a string unless noTruncate."
|
|
225
|
+
>
|
|
226
|
+
<NewListImpl
|
|
227
|
+
hidePagination
|
|
228
|
+
extraKeys={["details", "activity"]}
|
|
229
|
+
dateFormat={(date) =>
|
|
230
|
+
`${date.toLocaleDateString()} ${date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`
|
|
231
|
+
}
|
|
232
|
+
list={[
|
|
233
|
+
{
|
|
234
|
+
id: "task-1",
|
|
235
|
+
title: "3D Model โ Site A",
|
|
236
|
+
date: new Date(),
|
|
237
|
+
details: "โฑ 42 min ยท ๐ผ 318 images",
|
|
238
|
+
activity: (
|
|
239
|
+
<div className="h-1.5 w-40 overflow-hidden rounded-full bg-gray-100">
|
|
240
|
+
<div className="h-full w-2/3 bg-primary-500" />
|
|
241
|
+
</div>
|
|
242
|
+
),
|
|
243
|
+
},
|
|
244
|
+
{
|
|
245
|
+
id: "task-2",
|
|
246
|
+
title: "2D Map โ Site B",
|
|
247
|
+
date: "18/09/2026 10:00",
|
|
248
|
+
description: (
|
|
249
|
+
<div className="flex gap-2">
|
|
250
|
+
<span className="rounded bg-green-100 px-2 text-xs text-green-800">
|
|
251
|
+
Completed
|
|
252
|
+
</span>
|
|
253
|
+
<span className="text-xs text-gray-500">Ready to download</span>
|
|
254
|
+
</div>
|
|
255
|
+
),
|
|
256
|
+
details: "โฑ 12 min ยท ๐ผ 96 images",
|
|
257
|
+
},
|
|
258
|
+
]}
|
|
259
|
+
/>
|
|
260
|
+
</StorySection>
|
|
261
|
+
|
|
222
262
|
<StorySection
|
|
223
263
|
title="Comparing with the legacy List"
|
|
224
264
|
description="Open Display/List in another tab โ same sample data renders. NewListItem is exactly ListClass โ drop-in data swap. NewListImpl renders the same shape with modernised card styling, optional sticky section headers, and sticky search slot."
|