@synerise/ds-action-area 1.0.63 → 1.0.65

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 +109 -0
  3. package/package.json +5 -4
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.0.65](https://github.com/Synerise/synerise-design/compare/@synerise/ds-action-area@1.0.64...@synerise/ds-action-area@1.0.65) (2026-07-23)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-action-area
9
+
10
+ ## [1.0.64](https://github.com/Synerise/synerise-design/compare/@synerise/ds-action-area@1.0.63...@synerise/ds-action-area@1.0.64) (2026-07-16)
11
+
12
+ **Note:** Version bump only for package @synerise/ds-action-area
13
+
6
14
  ## [1.0.63](https://github.com/Synerise/synerise-design/compare/@synerise/ds-action-area@1.0.62...@synerise/ds-action-area@1.0.63) (2026-06-17)
7
15
 
8
16
  **Note:** Version bump only for package @synerise/ds-action-area
package/CLAUDE.md ADDED
@@ -0,0 +1,109 @@
1
+ # ActionArea (`@synerise/ds-action-area`)
2
+
3
+ > A centered call-to-action panel with a dashed border, optional title/description, and either a standard button or fully custom action content. Supports an error/validation state.
4
+
5
+ ## Package structure
6
+
7
+ ```
8
+ src/
9
+ ActionArea.tsx — main component
10
+ ActionArea.types.ts — prop interfaces (discriminated union)
11
+ ActionArea.styles.ts — styled-components
12
+ ActionArea.utils.tsx — renderAction() helper
13
+ index.ts — public exports
14
+ __specs__/ — Vitest tests
15
+ ```
16
+
17
+ ## Public exports
18
+
19
+ ### `ActionArea` (default export)
20
+
21
+ | Prop | Type | Default | Description |
22
+ |------|------|---------|-------------|
23
+ | `description` | `ReactNode` | **required** | Body text inside the panel |
24
+ | `label` | `ReactNode` | `undefined` | Optional title rendered above description (`Title` level 6) |
25
+ | `isFullWidth` | `boolean` | `false` | Expands width to 100%; default caps at 588px |
26
+ | `isError` | `boolean` | `false` | Switches to error visual state (red border + background) |
27
+ | `errorText` | `ReactNode` | `undefined` | Shown below the panel when `isError` is true |
28
+ | `className` | `string` | `undefined` | Extra CSS class on the outer wrapper |
29
+ | `style` | `CSSProperties` | `undefined` | Inline style on the outer wrapper |
30
+ | *(standard)* `action` | `() => void` | — | Click handler for the generated primary button |
31
+ | *(standard)* `actionLabel` | `ReactNode` | — | Label for the generated primary button |
32
+ | *(standard)* `buttonProps` | `Partial<ButtonProps>` | `undefined` | Overrides for the generated button (e.g. `type="secondary"`) |
33
+ | *(custom)* `customAction` | `ReactNode` | — | Replaces the generated button entirely |
34
+
35
+ No `forwardRef`. No imperative handle.
36
+
37
+ ### Exported types
38
+
39
+ - `ActionAreaProps` — full union type
40
+ - `ActionAreaWithStandardActionProps` — `{ action, actionLabel, buttonProps? }`
41
+ - `ActionAreaWithCustomActionProps` — `{ customAction }`
42
+
43
+ ### Attached styled-component refs
44
+
45
+ `ActionArea.ActionAreaWrapper`, `ActionArea.ActionAreaContent`, `ActionArea.ErrorText` are attached directly to the component for use as styled-component targets in consuming packages.
46
+
47
+ ## Usage patterns
48
+
49
+ ```tsx
50
+ import ActionArea from '@synerise/ds-action-area';
51
+
52
+ // Standard button
53
+ <ActionArea
54
+ label="No results"
55
+ description="Add your first item to get started."
56
+ action={() => handleAdd()}
57
+ actionLabel="Add item"
58
+ />
59
+
60
+ // Override button style
61
+ <ActionArea
62
+ description="Upload a file to continue."
63
+ action={() => handleUpload()}
64
+ actionLabel="Upload"
65
+ buttonProps={{ type: 'secondary' }}
66
+ />
67
+
68
+ // Custom action (e.g. multiple buttons)
69
+ <ActionArea
70
+ description="Choose an option below."
71
+ customAction={<><Button>A</Button><Button>B</Button></>}
72
+ />
73
+
74
+ // Error state
75
+ <ActionArea
76
+ description="Something went wrong."
77
+ action={() => retry()}
78
+ actionLabel="Retry"
79
+ isError
80
+ errorText="Connection failed."
81
+ />
82
+ ```
83
+
84
+ ## Discriminated union — action vs customAction
85
+
86
+ `ActionAreaProps` is a discriminated union: you must provide **either** `customAction` **or** both `action` + `actionLabel`. The `renderAction()` utility in `ActionArea.utils.tsx` checks for the `customAction` key via `'customAction' in props` to branch between the two variants. TypeScript enforces this at the call site.
87
+
88
+ ## Styling
89
+
90
+ Styles live in `ActionArea.styles.ts`. Uses `@synerise/ds-core` theme palette tokens:
91
+
92
+ - Error background: `theme.palette['red-050']`
93
+ - Error border / error text: `theme.palette['red-600']`
94
+ - Normal border: `theme.palette['grey-300']`
95
+
96
+ Default width is `588px` (not `100%`) — the `isFullWidth` prop switches to `100%`. This is a common source of surprise in layouts that expect full-width behavior by default.
97
+
98
+ ## Key dependencies
99
+
100
+ - `@synerise/ds-button` — renders the standard action button (`type="primary"` by default)
101
+ - `@synerise/ds-typography` — `Title` (level 6) for `label`, `Description` for `description`
102
+ - `classnames` — merges `ds-action-area` with any consumer `className`
103
+
104
+ ## Implementation notes
105
+
106
+ - `description` is **required** in the type; `label` is optional and only renders when truthy.
107
+ - `errorText` only renders if **both** `isError` is `true` and `errorText` is non-empty (`Boolean(errorText)`).
108
+ - The outer `ActionAreaWrapper` caps width at `588px` unless `isFullWidth` is set — not `max-width` only; the `width` property is set directly.
109
+ - The component adds `ds-action-area` as a fixed CSS class alongside any consumer `className`.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-action-area",
3
- "version": "1.0.63",
3
+ "version": "1.0.65",
4
4
  "description": "ActionArea 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,8 +42,8 @@
41
42
  ],
42
43
  "types": "dist/index.d.ts",
43
44
  "dependencies": {
44
- "@synerise/ds-button": "^1.5.33",
45
- "@synerise/ds-typography": "^1.1.26",
45
+ "@synerise/ds-button": "^1.5.35",
46
+ "@synerise/ds-typography": "^1.1.27",
46
47
  "classnames": "^2.5.1"
47
48
  },
48
49
  "peerDependencies": {
@@ -51,5 +52,5 @@
51
52
  "styled-components": "^5.3.3",
52
53
  "vitest": "4"
53
54
  },
54
- "gitHead": "d8c64070f58f14e3fb1bfbcbf00d1e3b8fd51eb8"
55
+ "gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
55
56
  }