@synerise/ds-progress-bar 1.3.12 → 1.3.14
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 +155 -0
- 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.3.14](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@1.3.13...@synerise/ds-progress-bar@1.3.14) (2026-08-11)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-progress-bar
|
|
9
|
+
|
|
10
|
+
## [1.3.13](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@1.3.12...@synerise/ds-progress-bar@1.3.13) (2026-07-23)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-progress-bar
|
|
13
|
+
|
|
6
14
|
## [1.3.12](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@1.3.11...@synerise/ds-progress-bar@1.3.12) (2026-06-17)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-progress-bar
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
# ProgressBar (`@synerise/ds-progress-bar`)
|
|
2
|
+
|
|
3
|
+
> Three progress bar variants: a segmented single-value bar (`ProgressBar`), a colour-coded tile bar (`ProgressTiles`), and a multi-value stacked/side-by-side bar (`Multivalue`).
|
|
4
|
+
|
|
5
|
+
## Package structure
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
src/
|
|
9
|
+
ProgressBar.tsx — default export; segmented single-value bar
|
|
10
|
+
ProgressBar.types.ts — ProgressProps
|
|
11
|
+
ProgressBar.styles.ts — styled-components (note: .ts)
|
|
12
|
+
index.ts — default + named exports + type exports
|
|
13
|
+
Multivalue/
|
|
14
|
+
Multivalue.tsx — multi-value bar (stacked or side-by-side)
|
|
15
|
+
Multivalue.types.ts — MultivalueProps, ProgressValue
|
|
16
|
+
MultiValue.styles.ts — styles (note: filename casing inconsistency)
|
|
17
|
+
ProgressTiles/
|
|
18
|
+
ProgressTiles.tsx — colour-per-tile bar
|
|
19
|
+
ProgressTiles.types.ts — ProgressTilesProps
|
|
20
|
+
ProgressTiles.styles.ts — styles
|
|
21
|
+
__specs__/
|
|
22
|
+
ProgressBar.spec.tsx — render tests for ProgressBar only (Vitest)
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Public exports
|
|
26
|
+
|
|
27
|
+
### `ProgressBar` (default)
|
|
28
|
+
|
|
29
|
+
A single-value progress bar, optionally split into `steps` segments.
|
|
30
|
+
|
|
31
|
+
| Prop | Type | Default | Description |
|
|
32
|
+
|------|------|---------|-------------|
|
|
33
|
+
| `percent` | `number` | `50` | Fill percentage (0–100). |
|
|
34
|
+
| `steps` | `number` | `1` | Number of segments to split the bar into. Each segment fills proportionally. |
|
|
35
|
+
| `width` | `string` | `'100%'` | CSS width of each segment tile (not the container). |
|
|
36
|
+
| `customColor` | `string` | `''` | Bar fill colour. Falls back to `green-500` token when empty string. |
|
|
37
|
+
| `thin` | `boolean` | `false` | Uses 4px height instead of 6px. |
|
|
38
|
+
| `inline` | `boolean` | `false` | Renders label/percent to the right of the bar instead of above. Suppresses `description`. |
|
|
39
|
+
| `label` | `ReactNode` | `undefined` | Text above the bar (non-inline) or to the right (inline). In non-inline mode, `percent%` is also shown to the right of the label. |
|
|
40
|
+
| `description` | `ReactNode` | `undefined` | Text below the bar. Hidden in inline mode. |
|
|
41
|
+
| `containerStyles` | `CSSProperties` | `undefined` | **@deprecated** — use `style` prop instead. |
|
|
42
|
+
|
|
43
|
+
All standard `HTMLDivElement` attributes accepted via `WithHTMLAttributes<HTMLDivElement, ..>`.
|
|
44
|
+
|
|
45
|
+
### `Multivalue`
|
|
46
|
+
|
|
47
|
+
Overlapping (stacked) or side-by-side multi-value bar.
|
|
48
|
+
|
|
49
|
+
| Prop | Type | Default | Description |
|
|
50
|
+
|------|------|---------|-------------|
|
|
51
|
+
| `values` | `ProgressValue[]` | — | **Required.** Each entry has `{ percent: number; color: string; onClick?: (event: MouseEvent) => void; tooltip?: ReactNode; tooltipProps?: TooltipProps }`. Percent clamped to 0–100. Each bar is wrapped in a `Tooltip` from `@synerise/ds-tooltip`. |
|
|
52
|
+
| `stackedBars` | `boolean` | `true` | When `true`, bars are layered on top of each other (sorted descending by percent, largest first). When `false`, bars are placed side-by-side with 2px gaps. |
|
|
53
|
+
|
|
54
|
+
All standard `HTMLDivElement` attributes accepted.
|
|
55
|
+
|
|
56
|
+
### `ProgressTiles`
|
|
57
|
+
|
|
58
|
+
Fixed-width colour tiles, one per entry in `colors[]`.
|
|
59
|
+
|
|
60
|
+
| Prop | Type | Default | Description |
|
|
61
|
+
|------|------|---------|-------------|
|
|
62
|
+
| `colors` | `string[]` | — | **Required.** Array of CSS colour strings; determines the number of tiles. |
|
|
63
|
+
| `percent` | `number` | — | **Required.** Fill percentage (0–100); distributed across tiles proportionally. |
|
|
64
|
+
| `tileWidth` | `string` | — | **Required.** CSS width of each tile (e.g. `'24px'`). |
|
|
65
|
+
| `label` | `ReactNode` | `undefined` | Optional label rendered above the tiles via `FormFieldLabel`. |
|
|
66
|
+
|
|
67
|
+
All standard `HTMLDivElement` attributes accepted.
|
|
68
|
+
|
|
69
|
+
### Exported types
|
|
70
|
+
|
|
71
|
+
| Type | Description |
|
|
72
|
+
|------|-------------|
|
|
73
|
+
| `ProgressProps` | Props for `ProgressBar` |
|
|
74
|
+
| `MultivalueProps` | Props for `Multivalue` |
|
|
75
|
+
| `ProgressValue` | `{ percent: number; color: string; onClick?: (event: MouseEvent) => void; tooltip?: ReactNode; tooltipProps?: TooltipProps }` |
|
|
76
|
+
| `ProgressTilesProps` | Props for `ProgressTiles` |
|
|
77
|
+
|
|
78
|
+
## Usage patterns
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
import ProgressBar, { Multivalue, ProgressTiles } from '@synerise/ds-progress-bar';
|
|
82
|
+
|
|
83
|
+
// Basic
|
|
84
|
+
<ProgressBar percent={75} label="Loading" description="Almost there" />
|
|
85
|
+
|
|
86
|
+
// Segmented (5 steps, 40% = 2 full + 1 partial segment)
|
|
87
|
+
<ProgressBar percent={40} steps={5} />
|
|
88
|
+
|
|
89
|
+
// Inline (percent shown right of bar)
|
|
90
|
+
<ProgressBar percent={60} inline label="Step 2 of 5" />
|
|
91
|
+
|
|
92
|
+
// Thin bar, custom colour
|
|
93
|
+
<ProgressBar percent={80} thin customColor="#0070f3" />
|
|
94
|
+
|
|
95
|
+
// Multi-value stacked (default)
|
|
96
|
+
<Multivalue
|
|
97
|
+
values={[
|
|
98
|
+
{ percent: 80, color: '#blue' },
|
|
99
|
+
{ percent: 50, color: '#red' },
|
|
100
|
+
]}
|
|
101
|
+
/>
|
|
102
|
+
|
|
103
|
+
// Multi-value with tooltips
|
|
104
|
+
<Multivalue
|
|
105
|
+
values={[
|
|
106
|
+
{ percent: 80, color: '#blue', tooltip: '80%' },
|
|
107
|
+
{ percent: 50, color: '#red', tooltip: '50%' },
|
|
108
|
+
]}
|
|
109
|
+
/>
|
|
110
|
+
|
|
111
|
+
// Multi-value side by side
|
|
112
|
+
<Multivalue
|
|
113
|
+
values={[
|
|
114
|
+
{ percent: 30, color: '#blue' },
|
|
115
|
+
{ percent: 20, color: '#red' },
|
|
116
|
+
]}
|
|
117
|
+
stackedBars={false}
|
|
118
|
+
/>
|
|
119
|
+
|
|
120
|
+
// Colour tiles
|
|
121
|
+
<ProgressTiles
|
|
122
|
+
colors={['#4CAF50', '#FF9800', '#F44336']}
|
|
123
|
+
percent={55}
|
|
124
|
+
tileWidth="24px"
|
|
125
|
+
label="Risk level"
|
|
126
|
+
/>
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
## Styling
|
|
130
|
+
|
|
131
|
+
All styles in `*.styles.ts` files. Use `theme.palette` tokens for backgrounds; `customColor` / `color` props accept any CSS colour string.
|
|
132
|
+
|
|
133
|
+
- **ProgressBar**: bar track is `grey-200`; fill is `customColor` or `green-500`. Segment border-radius is 3px. In multi-step mode, first tile gets left radius only, last tile gets right radius only.
|
|
134
|
+
- **Multivalue stacked**: bars overlap via `margin-top: -6px`; each bar has `border-right: 2px solid white` (hardcoded white) to create visual separation.
|
|
135
|
+
- **ProgressTiles**: tile track is `grey-200`; fill uses the colour from `colors[]`. Same border-radius rule as ProgressBar.
|
|
136
|
+
- Both `ProgressBar.styles.ts` and `ProgressTiles.styles.ts` use `FormFieldLabel` from `@synerise/ds-form-field` for the label styled component.
|
|
137
|
+
|
|
138
|
+
## Key dependencies
|
|
139
|
+
|
|
140
|
+
- `uuid` (`v4`) — generates stable tile keys in `ProgressBar`; new IDs created on every `steps` change
|
|
141
|
+
- `@synerise/ds-form-field` — `FormFieldLabel` re-used for the label element in both `ProgressBar` and `ProgressTiles`
|
|
142
|
+
- `@synerise/ds-tooltip` — wraps each `Multivalue` bar segment for optional tooltips
|
|
143
|
+
- `@synerise/ds-utils` — `WithHTMLAttributes` utility type
|
|
144
|
+
|
|
145
|
+
## Implementation notes
|
|
146
|
+
|
|
147
|
+
- **Progress calculation (shared algorithm)**: `tileWidthRatio = 100 / steps`, `currentProgress = percent / tileWidthRatio`. Full tiles get width `100%`, the partial tile gets `(fractional part * 100)%`, remaining tiles get `0%`. Both `ProgressBar` and `ProgressTiles` use identical logic.
|
|
148
|
+
- **`inline` mode suppresses `description`** — when `inline` is `true`, the label content is shown to the right of the bar (or `${percent}%` if no label), and `description` is never rendered even if provided.
|
|
149
|
+
- **Label vs percent in non-inline mode** — both `label` and `${percent}%` are always shown in the `LabelWrapper` when `label` is truthy and `!inline`. There is no way to show only the percent without a label in this mode.
|
|
150
|
+
- **`containerStyles` deprecated** — use the standard `style` prop instead. `containerStyles` is still accepted but JSDoc-marked `@deprecated`.
|
|
151
|
+
- **`Multivalue` stacked sorting** — values are spread (`[..values]`) before sorting to avoid mutating the original array.
|
|
152
|
+
- **`getTilesConfig` in `ProgressTiles` is wrapped in `useCallback` but called directly** — `useCallback` provides no benefit here since the function is invoked immediately in render, not passed as a callback.
|
|
153
|
+
- **Spec uses non-existent `showLabel` prop** — `ProgressBar.spec.tsx` passes `showLabel={false}` which is not in `ProgressProps`; it is silently ignored via `..rest` spread.
|
|
154
|
+
- **No tests for `Multivalue` or `ProgressTiles`**.
|
|
155
|
+
- **Uses Vitest** — `package.json` has `"test": "jest"`.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-progress-bar",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.14",
|
|
4
4
|
"description": "Progress-Bar 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-form-field": "^1.3.
|
|
45
|
-
"@synerise/ds-tooltip": "^1.5.
|
|
46
|
-
"@synerise/ds-utils": "^1.10.
|
|
45
|
+
"@synerise/ds-form-field": "^1.3.25",
|
|
46
|
+
"@synerise/ds-tooltip": "^1.5.5",
|
|
47
|
+
"@synerise/ds-utils": "^1.10.2",
|
|
47
48
|
"uuid": "^8.3.2"
|
|
48
49
|
},
|
|
49
50
|
"peerDependencies": {
|
|
@@ -52,5 +53,5 @@
|
|
|
52
53
|
"styled-components": "^5.3.3",
|
|
53
54
|
"vitest": "4"
|
|
54
55
|
},
|
|
55
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "6df24ed12cd5f276d8eccde730591807982e3385"
|
|
56
57
|
}
|