@synerise/ds-wizard 1.1.8 → 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.
Files changed (3) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/CLAUDE.md +136 -0
  3. package/package.json +8 -7
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.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
+
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)
11
+
12
+ **Note:** Version bump only for package @synerise/ds-wizard
13
+
6
14
  ## [1.1.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-wizard@1.1.7...@synerise/ds-wizard@1.1.8) (2026-07-09)
7
15
 
8
16
  **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.8",
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.33",
45
- "@synerise/ds-icon": "^1.18.4",
46
- "@synerise/ds-layout": "^1.2.15",
47
- "@synerise/ds-modal": "^1.6.4",
48
- "@synerise/ds-page-header": "^1.1.4",
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": "5c90008871be36fb52553a2ed3a633acf5db5b3b"
62
+ "gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
62
63
  }