@synerise/ds-mapping 1.1.52 → 1.1.54
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/CHANGELOG.md +8 -0
- package/CLAUDE.md +117 -0
- package/package.json +9 -8
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.1.54](https://github.com/Synerise/synerise-design/compare/@synerise/ds-mapping@1.1.53...@synerise/ds-mapping@1.1.54) (2026-08-11)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-mapping
|
|
9
|
+
|
|
10
|
+
## [1.1.53](https://github.com/Synerise/synerise-design/compare/@synerise/ds-mapping@1.1.52...@synerise/ds-mapping@1.1.53) (2026-07-23)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-mapping
|
|
13
|
+
|
|
6
14
|
## [1.1.52](https://github.com/Synerise/synerise-design/compare/@synerise/ds-mapping@1.1.51...@synerise/ds-mapping@1.1.52) (2026-07-16)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-mapping
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
# Mapping (`@synerise/ds-mapping`)
|
|
2
|
+
|
|
3
|
+
> A two-column data-mapping UI — each row renders a left component and a right component (with an optional centre column), with optional batch selection via tristate checkbox.
|
|
4
|
+
|
|
5
|
+
## Package structure
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
src/
|
|
9
|
+
Mapping.tsx — main component (generic)
|
|
10
|
+
Mapping.types.ts — MappingProps, BaseItemType, BatchSelectionType, MappingTexts, etc.
|
|
11
|
+
Mapping.styles.ts — all styled components
|
|
12
|
+
index.ts — public exports
|
|
13
|
+
components/
|
|
14
|
+
BatchSelectionHeader/BatchSelectionHeader.tsx — header bar with tristate checkbox, counter, action buttons, toggle button
|
|
15
|
+
RowSelection/RowSelection.tsx — per-row checkbox
|
|
16
|
+
TitleRow/TitleRow.tsx — column title row with optional info tooltips
|
|
17
|
+
hooks/
|
|
18
|
+
useBatchSelection.ts — checkbox state machine (none / some / all)
|
|
19
|
+
useTexts.ts — i18n defaults via react-intl
|
|
20
|
+
utils/
|
|
21
|
+
counter.tsx — default counter renderer
|
|
22
|
+
__specs__/
|
|
23
|
+
Mapping.spec.tsx — Vitest tests
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Public exports
|
|
27
|
+
|
|
28
|
+
### `Mapping` (default export)
|
|
29
|
+
|
|
30
|
+
Generic component: `Mapping<ItemType extends BaseItemType>`.
|
|
31
|
+
|
|
32
|
+
`MappingProps<T> = WithHTMLAttributes<HTMLDivElement, { … }>`
|
|
33
|
+
|
|
34
|
+
| Prop | Type | Default | Description |
|
|
35
|
+
|------|------|---------|-------------|
|
|
36
|
+
| `dataSource` | `Array<T>` | — (required) | Items to render; each must have `id: string \| number` |
|
|
37
|
+
| `leftComponent` | `(props: { item: T, index: number }) => ReactNode` | — (required) | Render function for the left column cell |
|
|
38
|
+
| `rightComponent` | `(props: { item: T, index: number }) => ReactNode` | — (required) | Render function for the right column cell |
|
|
39
|
+
| `centerComponent` | `(props: { item: T, index: number }) => ReactNode` | — | Optional centre column (e.g. an arrow icon); omitting it collapses the centre slot |
|
|
40
|
+
| `batchSelection` | `BatchSelectionType<T>` | — | Enables selection header with tristate checkbox and action buttons |
|
|
41
|
+
| `leftTitle` | `ReactNode` | — | Column heading above the left cells |
|
|
42
|
+
| `leftTitleTooltip` | `TooltipProps` | — | Info icon tooltip for the left heading |
|
|
43
|
+
| `rightTitle` | `ReactNode` | — | Column heading above the right cells |
|
|
44
|
+
| `rightTitleTooltip` | `TooltipProps` | — | Info icon tooltip for the right heading |
|
|
45
|
+
| `texts` | `Partial<MappingTexts>` | see defaults | i18n overrides for the batch-selection toggle button |
|
|
46
|
+
|
|
47
|
+
Accepts all standard `<div>` HTML attributes.
|
|
48
|
+
|
|
49
|
+
### `MappingProps`
|
|
50
|
+
|
|
51
|
+
Full props type re-export.
|
|
52
|
+
|
|
53
|
+
### `BaseItemType`
|
|
54
|
+
|
|
55
|
+
`{ id: string | number }` — minimum shape required by `dataSource`.
|
|
56
|
+
|
|
57
|
+
### `BatchSelectionType<T>`
|
|
58
|
+
|
|
59
|
+
| Field | Type | Description |
|
|
60
|
+
|-------|------|-------------|
|
|
61
|
+
| `onSelectionChange` | `(selectedIds: T['id'][]) => void` | Called (via `useEffect`) whenever selection changes |
|
|
62
|
+
| `actionButtons` | `ReactNode` | Buttons shown in the header when at least one item is selected |
|
|
63
|
+
| `renderCounter` | `(selectedCount: number, total: number) => ReactNode` | Custom counter; defaults to `"N Items"` / `"N Selected"` |
|
|
64
|
+
|
|
65
|
+
### `MappingTexts` (i18n defaults)
|
|
66
|
+
|
|
67
|
+
| Key | Default |
|
|
68
|
+
|-----|---------|
|
|
69
|
+
| `enableBatchSelection` | `'Bulk actions'` |
|
|
70
|
+
| `disableBatchSelection` | `'Hide actions'` |
|
|
71
|
+
|
|
72
|
+
## Usage patterns
|
|
73
|
+
|
|
74
|
+
```tsx
|
|
75
|
+
import Mapping from '@synerise/ds-mapping';
|
|
76
|
+
import type { BaseItemType } from '@synerise/ds-mapping';
|
|
77
|
+
|
|
78
|
+
type RowItem = BaseItemType & { paramName: string; mappedName: string };
|
|
79
|
+
|
|
80
|
+
<Mapping<RowItem>
|
|
81
|
+
dataSource={rows}
|
|
82
|
+
leftComponent={({ item }) => <Input value={item.paramName} readOnly />}
|
|
83
|
+
rightComponent={({ item }) => <Input value={item.mappedName} />}
|
|
84
|
+
centerComponent={() => <Icon component={<ArrowRightM />} />}
|
|
85
|
+
leftTitle="Source parameter"
|
|
86
|
+
rightTitle="Target parameter"
|
|
87
|
+
/>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Custom hooks
|
|
91
|
+
|
|
92
|
+
### `useBatchSelection`
|
|
93
|
+
|
|
94
|
+
Manages `selectedItemIds` state and derives `batchSelectionCheckboxState` (`true` = all, `false` = none, `undefined` = indeterminate). Returns `{ selectedItemIds, setSelectedItemIds, handleBatchCheckboxChange, batchSelectionCheckboxState }`.
|
|
95
|
+
|
|
96
|
+
### `useTexts`
|
|
97
|
+
|
|
98
|
+
Merges `react-intl` defaults with `texts` prop override. Returns a complete `MappingTexts` object.
|
|
99
|
+
|
|
100
|
+
## Styling
|
|
101
|
+
|
|
102
|
+
`Mapping.styles.ts`. Uses `theme.palette['grey-300']` for the batch selection header border. The wrapper has no gap when `dataSource.length === 1` (`isCompact` mode); otherwise `gap: 16px` between rows.
|
|
103
|
+
|
|
104
|
+
## Key dependencies
|
|
105
|
+
|
|
106
|
+
- `@synerise/ds-checkbox` — tristate batch checkbox and per-row row selection
|
|
107
|
+
- `@synerise/ds-tooltip` + `@synerise/ds-icon` — info icon on column titles
|
|
108
|
+
- `@synerise/ds-utils` — `WithHTMLAttributes`
|
|
109
|
+
- `react-intl` — i18n for batch-action toggle labels; requires `IntlProvider`
|
|
110
|
+
|
|
111
|
+
## Implementation notes
|
|
112
|
+
|
|
113
|
+
- **Batch selection is opt-in** — omit `batchSelection` entirely to hide the header and checkboxes.
|
|
114
|
+
- **Selection is local state** — `selectedItemIds` lives inside `Mapping`; `onSelectionChange` is fired via `useEffect` on every change. The parent does not control selection.
|
|
115
|
+
- **Action buttons visibility** — shown only when `enabled && checkboxState !== false` (i.e. at least one item is checked).
|
|
116
|
+
- **`texts` prop is missing from the README** — `MappingTexts` and the `texts` prop are not documented.
|
|
117
|
+
- **Uses Vitest**.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-mapping",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.54",
|
|
4
4
|
"description": "Mapping UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"files": [
|
|
18
18
|
"/dist",
|
|
19
19
|
"CHANGELOG.md",
|
|
20
|
+
"CLAUDE.md",
|
|
20
21
|
"README.md",
|
|
21
22
|
"package.json",
|
|
22
23
|
"LICENSE.md"
|
|
@@ -41,12 +42,12 @@
|
|
|
41
42
|
],
|
|
42
43
|
"types": "dist/index.d.ts",
|
|
43
44
|
"dependencies": {
|
|
44
|
-
"@synerise/ds-button": "^1.5.
|
|
45
|
-
"@synerise/ds-checkbox": "^1.2.
|
|
46
|
-
"@synerise/ds-icon": "^1.18.
|
|
47
|
-
"@synerise/ds-tooltip": "^1.5.
|
|
48
|
-
"@synerise/ds-typography": "^1.1.
|
|
49
|
-
"@synerise/ds-utils": "^1.10.
|
|
45
|
+
"@synerise/ds-button": "^1.5.36",
|
|
46
|
+
"@synerise/ds-checkbox": "^1.2.37",
|
|
47
|
+
"@synerise/ds-icon": "^1.18.5",
|
|
48
|
+
"@synerise/ds-tooltip": "^1.5.5",
|
|
49
|
+
"@synerise/ds-typography": "^1.1.28",
|
|
50
|
+
"@synerise/ds-utils": "^1.10.2"
|
|
50
51
|
},
|
|
51
52
|
"peerDependencies": {
|
|
52
53
|
"@synerise/ds-core": "*",
|
|
@@ -56,5 +57,5 @@
|
|
|
56
57
|
"styled-components": "^5.3.3",
|
|
57
58
|
"vitest": "4"
|
|
58
59
|
},
|
|
59
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "6df24ed12cd5f276d8eccde730591807982e3385"
|
|
60
61
|
}
|