@synerise/ds-wizard 1.1.9 → 1.1.10
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 +4 -0
- package/CLAUDE.md +136 -0
- package/package.json +8 -7
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
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.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-wizard@1.1.9...@synerise/ds-wizard@1.1.10) (2026-07-23)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-wizard
|
|
9
|
+
|
|
6
10
|
## [1.1.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-wizard@1.1.8...@synerise/ds-wizard@1.1.9) (2026-07-16)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @synerise/ds-wizard
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
# Wizard (`@synerise/ds-wizard`)
|
|
2
|
+
|
|
3
|
+
> A full-page, step-by-step guided workflow component with a fixed header, scrollable content area, optional stepper, and navigation buttons. Also available as a modal variant via `Wizard.OnModal`.
|
|
4
|
+
|
|
5
|
+
## Package structure
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
src/
|
|
9
|
+
Wizard.tsx — main full-page component; attaches Wizard.OnModal
|
|
10
|
+
Wizard.types.ts — WizardProps interface
|
|
11
|
+
Wizard.styles.ts — all styled-components (shared between Wizard and OnModal)
|
|
12
|
+
index.ts — public exports
|
|
13
|
+
onModal/
|
|
14
|
+
onModal.tsx — modal-based wizard variant
|
|
15
|
+
onModal.types.ts — OnModalProps (extends WizardProps)
|
|
16
|
+
__specs__/
|
|
17
|
+
Wizard.spec.tsx — Vitest tests
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Public exports
|
|
21
|
+
|
|
22
|
+
### `Wizard` (default export)
|
|
23
|
+
|
|
24
|
+
Full-page overlay wizard. Returns `null` when `visible` is `false` — component is unmounted, not hidden.
|
|
25
|
+
|
|
26
|
+
| Prop | Type | Default | Description |
|
|
27
|
+
|------|------|---------|-------------|
|
|
28
|
+
| `visible` | `boolean` | — | **Required.** Whether the wizard is rendered |
|
|
29
|
+
| `title` | `ReactNode` | — | **Required.** Header title. Ignored when `headerInlineEdit` is set |
|
|
30
|
+
| `onClose` | `() => void` | — | **Required.** Called when the close button is clicked |
|
|
31
|
+
| `children` | `ReactNode` | — | Main content rendered in the content area |
|
|
32
|
+
| `stepper` | `ReactNode` | — | Rendered in the header, left of the close button area |
|
|
33
|
+
| `headerAction` | `ReactNode` | — | Rendered in the header alongside the stepper |
|
|
34
|
+
| `footerLeft` | `ReactNode` | — | Left side of the fixed footer bar |
|
|
35
|
+
| `footerAction` | `ReactNode` | — | Right side of the fixed footer bar |
|
|
36
|
+
| `footer` | `ReactNode` | — | **@deprecated.** Use `footerLeft` instead |
|
|
37
|
+
| `contentWidth` | `string` | `'100%'` | CSS width of the content column (e.g. `'588px'`) |
|
|
38
|
+
| `onPrevStep` | `() => void` | — | When provided, renders the Back button |
|
|
39
|
+
| `onNextStep` | `() => void` | — | When provided, renders the Next step button |
|
|
40
|
+
| `texts` | `{ prevButtonLabel: ReactNode; nextButtonLabel: ReactNode }` | — | Overrides i18n labels for nav buttons |
|
|
41
|
+
| `stepButtonProps` | `{ prevButtonProps?: Partial<Omit<ButtonProps, 'onClick'>>; nextButtonProps?: Partial<Omit<ButtonProps, 'onClick'>> }` | — | Overrides default button variant/mode/disabled/etc. |
|
|
42
|
+
| `navigationInFooter` | `boolean` | — | Moves prev/next buttons to the right side of the footer instead of below content |
|
|
43
|
+
| `headerInlineEdit` | `PageHeaderProps['inlineEdit']` | — | Enables inline title editing in the header; when set, `title` is not rendered |
|
|
44
|
+
| `headerAvatar` | `PageHeaderProps['avatar']` | — | Avatar shown in the header alongside `headerInlineEdit` |
|
|
45
|
+
| `className` | `string` | — | Added to the outermost `.ds-wizard` wrapper |
|
|
46
|
+
|
|
47
|
+
No `forwardRef`.
|
|
48
|
+
|
|
49
|
+
### `Wizard.OnModal`
|
|
50
|
+
|
|
51
|
+
Modal-based wizard variant, attached as a static property on `Wizard`. Same props as `WizardProps` minus `footer` and `contentWidth`, plus a required `modalProps`.
|
|
52
|
+
|
|
53
|
+
| Prop | Type | Description |
|
|
54
|
+
|------|------|-------------|
|
|
55
|
+
| `modalProps` | `ModalProps` | **Required.** Passed directly to `@synerise/ds-modal`. Also accepts `prefix`, `infix`, `suffix` (`ReactNode`) for custom footer slots |
|
|
56
|
+
|
|
57
|
+
### `WizardProps`
|
|
58
|
+
|
|
59
|
+
TypeScript type re-exported for consumers.
|
|
60
|
+
|
|
61
|
+
### `OnModalProps`
|
|
62
|
+
|
|
63
|
+
TypeScript type for `Wizard.OnModal` props: `Omit<WizardProps, 'footer' | 'contentWidth'> & { modalProps: ModalProps }`.
|
|
64
|
+
|
|
65
|
+
## Usage patterns
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
import Wizard from '@synerise/ds-wizard';
|
|
69
|
+
|
|
70
|
+
// Full-page wizard
|
|
71
|
+
<Wizard
|
|
72
|
+
visible={isVisible}
|
|
73
|
+
title="Setup"
|
|
74
|
+
onClose={handleClose}
|
|
75
|
+
onPrevStep={step > 0 ? handlePrev : undefined}
|
|
76
|
+
onNextStep={step < 3 ? handleNext : undefined}
|
|
77
|
+
stepper={<Stepper>..</Stepper>}
|
|
78
|
+
contentWidth="588px"
|
|
79
|
+
>
|
|
80
|
+
<StepContent />
|
|
81
|
+
</Wizard>
|
|
82
|
+
|
|
83
|
+
// With footer navigation
|
|
84
|
+
<Wizard
|
|
85
|
+
visible={isVisible}
|
|
86
|
+
title="Setup"
|
|
87
|
+
onClose={handleClose}
|
|
88
|
+
navigationInFooter
|
|
89
|
+
footerLeft={<Button>Help</Button>}
|
|
90
|
+
footerAction={<Button>Skip</Button>}
|
|
91
|
+
onPrevStep={handlePrev}
|
|
92
|
+
onNextStep={handleNext}
|
|
93
|
+
>
|
|
94
|
+
<StepContent />
|
|
95
|
+
</Wizard>
|
|
96
|
+
|
|
97
|
+
// Modal variant
|
|
98
|
+
<Wizard.OnModal
|
|
99
|
+
visible={isVisible}
|
|
100
|
+
title="Setup"
|
|
101
|
+
onClose={handleClose}
|
|
102
|
+
onPrevStep={handlePrev}
|
|
103
|
+
onNextStep={handleNext}
|
|
104
|
+
modalProps={{ size: 'medium' }}
|
|
105
|
+
>
|
|
106
|
+
<StepContent />
|
|
107
|
+
</Wizard.OnModal>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## Styling
|
|
111
|
+
|
|
112
|
+
All styles are in `Wizard.styles.ts` and shared between `Wizard` and `WizardOnModal`. Uses `@synerise/ds-core` theme palette tokens throughout. Key layout values:
|
|
113
|
+
|
|
114
|
+
- Wizard wrapper: `position: fixed; z-index: 1500; width: 100vw; height: 100vh`
|
|
115
|
+
- Content area: `padding-top: 122px`, `padding-bottom: 100px` when footer is present
|
|
116
|
+
- Footer: `position: fixed; bottom: 0; padding: 24px`
|
|
117
|
+
|
|
118
|
+
## Key dependencies
|
|
119
|
+
|
|
120
|
+
- `@synerise/ds-layout` — provides the `Layout` with full-page header slot
|
|
121
|
+
- `@synerise/ds-page-header` — header bar with title, close button, inline edit, avatar
|
|
122
|
+
- `@synerise/ds-modal` — used by `Wizard.OnModal`
|
|
123
|
+
- `@synerise/ds-button` — nav buttons
|
|
124
|
+
- `@synerise/ds-icon` — `ArrowLeftCircleM` icon on Back button
|
|
125
|
+
- `react-intl` — i18n for default button labels (`DS.WIZARD.PREV-BUTTON`, `DS.WIZARD.NEXT-BUTTON`)
|
|
126
|
+
|
|
127
|
+
## Implementation notes
|
|
128
|
+
|
|
129
|
+
- **`visible=false` unmounts**: The component returns `null` rather than hiding — no DOM is rendered when invisible.
|
|
130
|
+
- **Nav buttons are conditional**: Buttons only appear when `onPrevStep`/`onNextStep` are provided. If only `onNextStep` is provided, a `ButtonPlaceholder` renders in place of Back to preserve the flex space-between layout.
|
|
131
|
+
- **`navigationInFooter` changes button style**: When `true`, the Back button default type changes from `'ghost'` to `'secondary'`. Overridable via `stepButtonProps`.
|
|
132
|
+
- **`headerInlineEdit` replaces `title`**: When `headerInlineEdit` is set, the `title` prop is silently ignored. The `headerAvatar` prop is only rendered when `headerInlineEdit` is also set.
|
|
133
|
+
- **`footer` is deprecated**: Use `footerLeft` for left-side footer content. Both work simultaneously but `footer` maps to the same `FooterLeftSide` slot.
|
|
134
|
+
- **`WizardOnModal` accesses non-standard `modalProps` keys**: The `prefix`, `infix`, and `suffix` keys on `modalProps` are extra fields used by `WizardOnModal`'s own footer layout — they are not standard `ModalProps` fields.
|
|
135
|
+
- **Uses Vitest**: The package has `jest.config.js` and a `"test": "jest"` script — it has not been migrated to Vitest yet.
|
|
136
|
+
- **`react-intl` is a peer dependency** (≥3.12.0 ≤6.8) — the component will throw at runtime without an IntlProvider in the tree.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-wizard",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.10",
|
|
4
4
|
"description": "Wizard 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,11 +42,11 @@
|
|
|
41
42
|
],
|
|
42
43
|
"types": "dist/index.d.ts",
|
|
43
44
|
"dependencies": {
|
|
44
|
-
"@synerise/ds-button": "^1.5.
|
|
45
|
-
"@synerise/ds-icon": "^1.18.
|
|
46
|
-
"@synerise/ds-layout": "^1.2.
|
|
47
|
-
"@synerise/ds-modal": "^1.6.
|
|
48
|
-
"@synerise/ds-page-header": "^1.1.
|
|
45
|
+
"@synerise/ds-button": "^1.5.35",
|
|
46
|
+
"@synerise/ds-icon": "^1.18.5",
|
|
47
|
+
"@synerise/ds-layout": "^1.2.16",
|
|
48
|
+
"@synerise/ds-modal": "^1.6.6",
|
|
49
|
+
"@synerise/ds-page-header": "^1.1.6",
|
|
49
50
|
"classnames": "^2.5.1"
|
|
50
51
|
},
|
|
51
52
|
"devDependencies": {
|
|
@@ -58,5 +59,5 @@
|
|
|
58
59
|
"styled-components": "^5.3.3",
|
|
59
60
|
"vitest": "4"
|
|
60
61
|
},
|
|
61
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
|
|
62
63
|
}
|