@synerise/ds-form 1.2.20 → 1.2.21

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.21](https://github.com/Synerise/synerise-design/compare/@synerise/ds-form@1.2.20...@synerise/ds-form@1.2.21) (2026-07-23)
+
+**Note:** Version bump only for package @synerise/ds-form
+
 ## [1.2.20](https://github.com/Synerise/synerise-design/compare/@synerise/ds-form@1.2.19...@synerise/ds-form@1.2.20) (2026-07-16)
 
 **Note:** Version bump only for package @synerise/ds-form

package/CLAUDE.md

@@ -0,0 +1,115 @@
+# Form (`@synerise/ds-form`)
+
+> **⚠️ Deprecated.** This entire package is deprecated in favour of `@synerise/ds-editable-items-list`. Do not add features; minimise changes.
+
+## Package structure
+
+```
+src/
+ Form.tsx — class component namespace (only purpose: holds Form.FieldSet)
+ index.ts — public exports
+ Elements/
+ FieldSet/
+ FieldSet.tsx — @deprecated labelled section with heading + optional divider
+ FieldSet.types.ts — FieldSetProps
+ FieldSet.styles.ts — TopWrapper, Heading, Description (NOTE: Description = 'div', not styled)
+ __specs__/FieldSet.spec.tsx — Vitest tests (heading/description render, divider)
+ EditableList/
+ EditableList.tsx — editable key-value row list (Autocomplete + Input per row)
+ EditableList.types.ts — EditListProps, EditableParam, AddButtonConfigProps
+ EditableList.styles.tsx — row/wrapper styled components
+ __spec__/EditableList.spec.ts — all tests are it.todo() — no real tests
+```
+
+## Public exports
+
+### `Form` (default export)
+
+Class component with no props. Its sole purpose is to expose `Form.FieldSet` as a static property. Do not render `<Form>` directly.
+
+### `Form.FieldSet` _(deprecated)_
+
+`@deprecated — FieldSet component will no longer be supported.`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `heading` | `ReactNode` | — (required) | Heading text rendered in h400 style |
+| `description` | `ReactNode` | — | Subtitle below heading |
+| `children` | `ReactNode` | — | Content below the heading block |
+| `withLine` | `boolean` | `undefined` | Renders a `Divider` with `marginTop={18}` between heading and children |
+| `className` | `string` | — | Applied to the `TopWrapper` div |
+
+### `EditableList` _(deprecated)_
+
+A controlled list of editable key-value rows. Each row renders an `Autocomplete` (left) + `Input` (right) by default; every slot is replaceable via render props.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `EditableParam[]` | — | Controlled rows array |
+| `onChange` | `(params: EditableParam[]) => void` | — | Called after any name/value change |
+| `leftColumnName` | `ReactNode` | — | Label shown above the first column (row 0 only) |
+| `rightColumnName` | `ReactNode` | — | Label shown above the second column (row 0 only) |
+| `autocompleteOptions` | `ReactNode` | — | Option children passed to the `Autocomplete` in each row |
+| `onSearch` | `(query: string) => void` | — | Forwarded to `Autocomplete.onSearch` |
+| `onClickDelete` | `DeleteHandler` | — | Custom delete handler; if absent, the row is removed from local state |
+| `addButtonConfig` | `AddButtonConfigProps` | — | `{ textAddButton?, disableAddButton?, onClickAddRow? }` |
+| `validation` | `{ validateLeftColumn?, validateRightColumn? }` | — | Return a `ReactNode` error message (or falsy) per field value |
+| `firstInputProps` | `AutocompleteProps` | `{ style: { width: 350 } }` | Spread onto the Autocomplete; use to override width/style |
+| `secondInputProps` | `InputProps` | `{ style: { width: 300 } }` | Spread onto the Input; use to override width/style |
+| `renderAddButton` | `(params?) => JSX.Element` | — | Replaces the default "add row" button entirely |
+| `renderLeftColumn` | `(param, index) => JSX.Element` | — | Replaces the Autocomplete for each row |
+| `renderRightColumn` | `(param, index) => JSX.Element` | — | Replaces the Input for each row |
+| `renderAdditionalColumn` | `(rows) => JSX.Element` | — | Appended after the two default columns in each row |
+| `renderActions` | `boolean \| Function` | — | `true` = show a `Cruds` delete button; function = render custom actions |
+
+### `EditableParam`
+
+`{ name: string; value: string }` — shape of a single row.
+
+### `EditListProps`
+
+Full props type for `EditableList`.
+
+## Usage patterns
+
+```tsx
+import Form, { EditableList } from '@synerise/ds-form';
+
+// Form.FieldSet (deprecated)
+<Form.FieldSet heading="Section" description="Details" withLine>
+ <MyFormFields />
+</Form.FieldSet>
+
+// EditableList (deprecated)
+const [rows, setRows] = useState([{ name: '', value: '' }]);
+
+<EditableList
+ value={rows}
+ onChange={setRows}
+ leftColumnName="Key"
+ rightColumnName="Value"
+ addButtonConfig={{ textAddButton: 'Add row' }}
+ renderActions
+/>
+```
+
+## Styling
+
+- `FieldSet.styles.ts`: `Heading` uses `macro.heading` + `macro.h400` from `@synerise/ds-typography`. **`Description` is exported as the string `'div'`** (not a styled component) — this is intentional (renders a native `<div>`) but inconsistent with the rest of the pattern.
+- `EditableList.styles.tsx`: plain flex wrappers, no theme tokens except `theme.palette['blue-600']` hardcoded in the add icon colour in `EditableList.tsx`.
+
+## Key dependencies
+
+- `@synerise/ds-autocomplete` — left column input (with options)
+- `@synerise/ds-input` — right column input
+- `@synerise/ds-cruds` — delete action button when `renderActions={true}`
+- `@synerise/ds-divider` — optional line in `Form.FieldSet`
+- `@synerise/ds-typography` — `macro.heading` / `macro.h400` for FieldSet heading styles
+
+## Implementation notes
+
+- **`Form` class renders nothing** — it exists only to provide the `Form.FieldSet` static property. Never render `<Form>` as a container.
+- **`EditableList` is uncontrolled by default** — it maintains its own internal `params` state synced from `value` via `useEffect`. Changes propagate out via `onChange` but the component does not re-render from `value` alone unless the reference changes.
+- **`renderActions={true}` vs function** — when `true`, uses `Cruds` delete button which calls `onClickDelete` if provided, otherwise removes the row from internal state. When a function, it receives `(param, idx, params, { onClickDelete })` and must return a `JSX.Element`.
+- **No real tests** — `EditableList.__spec__/EditableList.spec.ts` contains only `it.todo()` entries.
+- **Uses Vitest**.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-form",
-  "version": "1.2.20",
+  "version": "1.2.21",
   "description": "Form UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -17,6 +17,7 @@
   "files": [
     "/dist",
     "CHANGELOG.md",
+    "CLAUDE.md",
     "README.md",
     "package.json",
     "LICENSE.md"
@@ -41,13 +42,13 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-autocomplete": "^1.2.50",
-    "@synerise/ds-button": "^1.5.34",
-    "@synerise/ds-cruds": "^1.1.15",
-    "@synerise/ds-divider": "^1.3.15",
-    "@synerise/ds-icon": "^1.18.4",
-    "@synerise/ds-input": "^1.7.12",
-    "@synerise/ds-typography": "^1.1.26"
+    "@synerise/ds-autocomplete": "^1.2.51",
+    "@synerise/ds-button": "^1.5.35",
+    "@synerise/ds-cruds": "^1.1.16",
+    "@synerise/ds-divider": "^1.3.16",
+    "@synerise/ds-icon": "^1.18.5",
+    "@synerise/ds-input": "^1.7.13",
+    "@synerise/ds-typography": "^1.1.27"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -56,5 +57,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "a81ab6519d49a3dea9c0cfebcdc9104cbb4f4226"
+  "gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
 }