@synerise/ds-cruds 1.1.14 → 1.1.16

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.
Files changed (3) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/CLAUDE.md +128 -0
  3. package/package.json +6 -5
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.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-cruds@1.1.15...@synerise/ds-cruds@1.1.16) (2026-07-23)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-cruds
9
+
10
+ ## [1.1.15](https://github.com/Synerise/synerise-design/compare/@synerise/ds-cruds@1.1.14...@synerise/ds-cruds@1.1.15) (2026-06-17)
11
+
12
+ **Note:** Version bump only for package @synerise/ds-cruds
13
+
6
14
  ## [1.1.14](https://github.com/Synerise/synerise-design/compare/@synerise/ds-cruds@1.1.13...@synerise/ds-cruds@1.1.14) (2026-06-11)
7
15
 
8
16
  **Note:** Version bump only for package @synerise/ds-cruds
package/CLAUDE.md ADDED
@@ -0,0 +1,128 @@
1
+ # Cruds (`@synerise/ds-cruds`)
2
+
3
+ > A row of icon-button actions (add, edit, duplicate, delete, move, etc.) for list/table items, where each action is rendered only when its corresponding callback is provided.
4
+
5
+ ## Package structure
6
+
7
+ ```
8
+ src/
9
+ Cruds.tsx — main component; conditionally renders SingleAction per callback
10
+ Cruds.types.ts — CrudsProps interface, CrudsSubComponents type
11
+ Cruds.styles.tsx — CrudsContainer, IconWrapper styled-components
12
+ SingleAction.tsx — tooltip-wrapped icon button used for each action
13
+ SingleAction.types.ts — SingleActionProps
14
+ index.ts — default export only (Cruds)
15
+ ```
16
+
17
+ ## Public exports
18
+
19
+ ### `Cruds` (default export)
20
+
21
+ `React.FC<CrudsProps> & { CustomAction: typeof SingleAction }`
22
+
23
+ Each action is rendered **only when its corresponding `on*` callback is provided** — there are no separate `visible` flags.
24
+
25
+ | Prop | Type | Default | Description |
26
+ |------|------|---------|-------------|
27
+ | `onAdd` | `(event?: MouseEvent) => void` | — | Renders add button (AddS icon) |
28
+ | `onEdit` | `(event?: MouseEvent) => void` | — | Renders edit button (EditS icon) |
29
+ | `onDuplicate` | `(event?: MouseEvent) => void` | — | Renders duplicate button (DuplicateS icon) |
30
+ | `onDelete` | `(event?: MouseEvent) => void` | — | Renders delete button (TrashS icon, red) |
31
+ | `onRemove` | `(event?: MouseEvent) => void` | — | Renders remove button (CloseS icon, red) |
32
+ | `onMove` | `(event?: MouseEvent) => void` | — | Renders drag-handle button (DragHandleM icon) |
33
+ | `onMoveUp` | `(event?: MouseEvent) => void` | — | Renders move-up button (ArrowUpS icon) |
34
+ | `onMoveDown` | `(event?: MouseEvent) => void` | — | Renders move-down button (ArrowDownS icon) |
35
+ | `onPreview` | `() => void` | — | Renders preview button (ShowM icon); **no event parameter** |
36
+ | `addTooltip` | `ReactNode` | — | Tooltip content for the add button |
37
+ | `editTooltip` | `ReactNode` | — | Tooltip content for the edit button |
38
+ | `duplicateTooltip` | `ReactNode` | — | Tooltip content for the duplicate button |
39
+ | `deleteTooltip` | `ReactNode` | — | Tooltip content for the delete button |
40
+ | `removeTooltip` | `ReactNode` | — | Tooltip content for the remove button |
41
+ | `moveTooltip` | `ReactNode` | — | Tooltip content for the move button |
42
+ | `moveUpTooltip` | `ReactNode` | — | Tooltip content for the move-up button |
43
+ | `moveDownTooltip` | `ReactNode` | — | Tooltip content for the move-down button |
44
+ | `previewTooltip` | `ReactNode` | — | Tooltip content for the preview button |
45
+ | `moveUpInactive` | `boolean` | — | Disables move-up button visually (grey, no pointer) |
46
+ | `moveDownInactive` | `boolean` | — | Disables move-down button visually (grey, no pointer) |
47
+
48
+ All additional HTML `div` attributes are spread onto the root `CrudsContainer`.
49
+
50
+ ### `Cruds.CustomAction`
51
+
52
+ Sub-component for adding custom actions with the same visual style. Internally calls `SingleAction` directly (not via JSX, just a function call wrapper).
53
+
54
+ Props (`SingleActionProps`):
55
+
56
+ | Prop | Type | Default | Description |
57
+ |------|------|---------|-------------|
58
+ | `title` | `ReactNode` | — | **Required.** Tooltip content |
59
+ | `icon` | `ReactNode` | — | **Required.** Icon element |
60
+ | `onClick` | `() => void` | — | **Required.** Click handler |
61
+ | `className` | `string` | — | CSS class applied to the icon wrapper |
62
+ | `inactive` | `boolean` | — | Disables visually (grey, no pointer) |
63
+ | `iconSize` | `number` | `24` | Icon size in px |
64
+
65
+ Also accepts all HTML `div` attributes via `WithHTMLAttributes<HTMLDivElement, ...>`.
66
+
67
+ ## Usage patterns
68
+
69
+ ```tsx
70
+ import Cruds from '@synerise/ds-cruds';
71
+ import { Settings2S } from '@synerise/ds-icon';
72
+
73
+ // Standard actions — only provided callbacks render
74
+ <Cruds
75
+ onAdd={handleAdd}
76
+ onEdit={handleEdit}
77
+ onDelete={handleDelete}
78
+ addTooltip="Add"
79
+ editTooltip="Edit"
80
+ deleteTooltip="Delete"
81
+ />
82
+
83
+ // Move up/down with inactive state
84
+ <Cruds
85
+ onMoveUp={handleMoveUp}
86
+ onMoveDown={handleMoveDown}
87
+ moveUpInactive={isFirst}
88
+ moveDownInactive={isLast}
89
+ moveUpTooltip="Move up"
90
+ moveDownTooltip="Move down"
91
+ />
92
+
93
+ // Custom action via Cruds.CustomAction
94
+ <Cruds onEdit={handleEdit} editTooltip="Edit">
95
+ <Cruds.CustomAction
96
+ title="Settings"
97
+ icon={<Settings2S />}
98
+ onClick={handleSettings}
99
+ />
100
+ </Cruds>
101
+ ```
102
+
103
+ > Note: `Cruds.CustomAction` is a static sub-component on the `Cruds` function — it is **not** a child renderer. Custom actions must be rendered separately alongside `<Cruds>`, or `Cruds.CustomAction` used directly.
104
+
105
+ ## Styling
106
+
107
+ Styles live in `Cruds.styles.tsx`. Uses `theme.palette` from `@synerise/ds-core` (requires styled-components `ThemeProvider`):
108
+
109
+ - `.add`, `.edit`, `.duplicate`, `.move`, `.moveup`, `.movedown` — `grey-600` fill, `blue-600` on hover
110
+ - `.delete`, `.remove` — `red-600` fill (no hover change)
111
+ - `inactive` state — `grey-300` fill, `cursor: default`, pointer-events disabled
112
+
113
+ The root `CrudsContainer` has `className="ds-cruds"` applied unconditionally.
114
+
115
+ ## Key dependencies
116
+
117
+ - `@synerise/ds-icon` — all action icons plus the `Icon` wrapper component
118
+ - `@synerise/ds-tooltip` — imported directly from `@synerise/ds-tooltip/dist/Tooltip` (deep import, not the package root) — wraps each `SingleAction`
119
+ - `@synerise/ds-utils` — `WithHTMLAttributes` utility type used by `SingleActionProps`
120
+
121
+ ## Implementation notes
122
+
123
+ - **Click events stop propagation** — `SingleAction` calls `event.stopPropagation()` before invoking `onClick`. This is intentional for row-level actions inside clickable table rows, but means parent click handlers will not fire.
124
+ - **`onPreview` has no event parameter** (`() => void`) while all other callbacks accept `(event?: MouseEvent<HTMLElement>) => void`. This asymmetry is in the types.
125
+ - **`Cruds.CustomAction` is not a proper React component** — it is assigned as `(props) => SingleAction(props) as ReactElement`, calling `SingleAction` as a plain function. Avoid using it as a child of `<Cruds>` (it won't render inline there); use it as a standalone rendered element.
126
+ - **Render order is fixed** in source: moveUp → moveDown → add → edit → preview → duplicate → delete → move → remove. There is no prop to reorder actions.
127
+ - **`inactive` only applies to `moveUp` and `moveDown`** via dedicated props on `Cruds`. For other actions, use `Cruds.CustomAction` with `inactive` if needed, or omit the callback to hide the button entirely.
128
+ - **Deep import of ds-tooltip** (`/dist/Tooltip`) bypasses the package index — this could break if the tooltip package restructures its dist output.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-cruds",
3
- "version": "1.1.14",
3
+ "version": "1.1.16",
4
4
  "description": "Cruds 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,9 +42,9 @@
41
42
  ],
42
43
  "types": "dist/index.d.ts",
43
44
  "dependencies": {
44
- "@synerise/ds-icon": "^1.18.3",
45
- "@synerise/ds-tooltip": "^1.5.2",
46
- "@synerise/ds-utils": "^1.10.0"
45
+ "@synerise/ds-icon": "^1.18.5",
46
+ "@synerise/ds-tooltip": "^1.5.4",
47
+ "@synerise/ds-utils": "^1.10.2"
47
48
  },
48
49
  "devDependencies": {
49
50
  "vitest": "4"
@@ -53,5 +54,5 @@
53
54
  "react": ">=16.9.0 <= 18.3.1",
54
55
  "styled-components": "^5.3.3"
55
56
  },
56
- "gitHead": "fe3379f50afdce6d8c61a2222ebbf03324107c95"
57
+ "gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
57
58
  }