@xsolla/xui-stepper 0.99.0 → 0.100.0
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/README.md +228 -32
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,54 +1,250 @@
|
|
|
1
|
-
|
|
1
|
+
---
|
|
2
|
+
title: Stepper
|
|
3
|
+
subtitle: Multi-step progress indicator.
|
|
4
|
+
description: A cross-platform React stepper component for displaying progress through a sequence of steps with various states and orientations.
|
|
5
|
+
---
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
# Stepper
|
|
8
|
+
|
|
9
|
+
A cross-platform React stepper component that displays progress through a sequence of steps, supporting horizontal and vertical layouts with multiple step states.
|
|
4
10
|
|
|
5
11
|
## Installation
|
|
6
12
|
|
|
7
13
|
```bash
|
|
14
|
+
npm install @xsolla/xui-stepper
|
|
15
|
+
# or
|
|
8
16
|
yarn add @xsolla/xui-stepper
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
##
|
|
19
|
+
## Demo
|
|
20
|
+
|
|
21
|
+
### Basic Stepper
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import * as React from 'react';
|
|
25
|
+
import { Stepper } from '@xsolla/xui-stepper';
|
|
26
|
+
|
|
27
|
+
export default function BasicStepper() {
|
|
28
|
+
const steps = [
|
|
29
|
+
{ title: 'Account', state: 'complete' as const },
|
|
30
|
+
{ title: 'Payment', state: 'current' as const },
|
|
31
|
+
{ title: 'Review', state: 'incomplete' as const },
|
|
32
|
+
];
|
|
33
|
+
|
|
34
|
+
return <Stepper steps={steps} />;
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Vertical Stepper
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import * as React from 'react';
|
|
42
|
+
import { Stepper } from '@xsolla/xui-stepper';
|
|
43
|
+
|
|
44
|
+
export default function VerticalStepper() {
|
|
45
|
+
const steps = [
|
|
46
|
+
{ title: 'Step 1', description: 'Account details', state: 'complete' as const },
|
|
47
|
+
{ title: 'Step 2', description: 'Payment method', state: 'current' as const },
|
|
48
|
+
{ title: 'Step 3', description: 'Order review', state: 'incomplete' as const },
|
|
49
|
+
];
|
|
50
|
+
|
|
51
|
+
return <Stepper steps={steps} direction="vertical" />;
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### With States
|
|
12
56
|
|
|
13
57
|
```tsx
|
|
58
|
+
import * as React from 'react';
|
|
59
|
+
import { Stepper } from '@xsolla/xui-stepper';
|
|
60
|
+
|
|
61
|
+
export default function StepStates() {
|
|
62
|
+
const steps = [
|
|
63
|
+
{ title: 'Complete', state: 'complete' as const },
|
|
64
|
+
{ title: 'Warning', state: 'warning' as const },
|
|
65
|
+
{ title: 'Alert', state: 'alert' as const },
|
|
66
|
+
{ title: 'Loading', state: 'loading' as const },
|
|
67
|
+
{ title: 'Current', state: 'current' as const },
|
|
68
|
+
{ title: 'Incomplete', state: 'incomplete' as const },
|
|
69
|
+
];
|
|
70
|
+
|
|
71
|
+
return <Stepper steps={steps} />;
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Anatomy
|
|
76
|
+
|
|
77
|
+
```jsx
|
|
14
78
|
import { Stepper } from '@xsolla/xui-stepper';
|
|
15
79
|
|
|
16
80
|
<Stepper
|
|
17
|
-
steps={
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
onClick={
|
|
81
|
+
steps={steps} // Array of step objects
|
|
82
|
+
direction="horizontal" // horizontal or vertical
|
|
83
|
+
size="md" // s or m
|
|
84
|
+
variantUI="current" // current or simple
|
|
85
|
+
palette="brand" // brand or brandSecondary
|
|
86
|
+
tail={false} // Show connecting line (simple variant)
|
|
87
|
+
onClick={handleClick} // Step click handler
|
|
88
|
+
aria-label="Checkout" // Accessible label
|
|
24
89
|
/>
|
|
25
90
|
```
|
|
26
91
|
|
|
27
|
-
##
|
|
92
|
+
## Examples
|
|
93
|
+
|
|
94
|
+
### Checkout Flow
|
|
95
|
+
|
|
96
|
+
```tsx
|
|
97
|
+
import * as React from 'react';
|
|
98
|
+
import { Stepper } from '@xsolla/xui-stepper';
|
|
99
|
+
|
|
100
|
+
export default function CheckoutFlow() {
|
|
101
|
+
const [currentStep, setCurrentStep] = React.useState(1);
|
|
102
|
+
|
|
103
|
+
const steps = [
|
|
104
|
+
{ title: 'Cart', state: currentStep > 0 ? 'complete' as const : 'incomplete' as const },
|
|
105
|
+
{ title: 'Shipping', state: currentStep === 1 ? 'current' as const : currentStep > 1 ? 'complete' as const : 'incomplete' as const },
|
|
106
|
+
{ title: 'Payment', state: currentStep === 2 ? 'current' as const : currentStep > 2 ? 'complete' as const : 'incomplete' as const },
|
|
107
|
+
{ title: 'Confirm', state: currentStep === 3 ? 'current' as const : 'incomplete' as const },
|
|
108
|
+
];
|
|
28
109
|
|
|
29
|
-
|
|
30
|
-
|
|
110
|
+
return (
|
|
111
|
+
<div>
|
|
112
|
+
<Stepper
|
|
113
|
+
steps={steps}
|
|
114
|
+
onClick={({ number }) => setCurrentStep(number)}
|
|
115
|
+
/>
|
|
116
|
+
<div style={{ marginTop: 24 }}>
|
|
117
|
+
<button onClick={() => setCurrentStep(Math.max(0, currentStep - 1))}>Back</button>
|
|
118
|
+
<button onClick={() => setCurrentStep(Math.min(3, currentStep + 1))}>Next</button>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
);
|
|
122
|
+
}
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### Registration Steps
|
|
31
126
|
|
|
32
|
-
|
|
127
|
+
```tsx
|
|
128
|
+
import * as React from 'react';
|
|
129
|
+
import { Stepper } from '@xsolla/xui-stepper';
|
|
130
|
+
|
|
131
|
+
export default function RegistrationSteps() {
|
|
132
|
+
const steps = [
|
|
133
|
+
{ title: 'Email', description: 'Verify your email', state: 'complete' as const },
|
|
134
|
+
{ title: 'Profile', description: 'Set up your profile', state: 'current' as const },
|
|
135
|
+
{ title: 'Preferences', description: 'Customize settings', state: 'incomplete' as const },
|
|
136
|
+
];
|
|
137
|
+
|
|
138
|
+
return (
|
|
139
|
+
<Stepper
|
|
140
|
+
steps={steps}
|
|
141
|
+
direction="vertical"
|
|
142
|
+
variantUI="current"
|
|
143
|
+
size="md"
|
|
144
|
+
/>
|
|
145
|
+
);
|
|
146
|
+
}
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
### Simple Variant with Tail
|
|
150
|
+
|
|
151
|
+
```tsx
|
|
152
|
+
import * as React from 'react';
|
|
153
|
+
import { Stepper } from '@xsolla/xui-stepper';
|
|
154
|
+
|
|
155
|
+
export default function SimpleStepper() {
|
|
156
|
+
const steps = [
|
|
157
|
+
{ title: 'Step 1', state: 'complete' as const },
|
|
158
|
+
{ title: 'Step 2', state: 'current' as const },
|
|
159
|
+
{ title: 'Step 3', state: 'incomplete' as const },
|
|
160
|
+
];
|
|
161
|
+
|
|
162
|
+
return <Stepper steps={steps} variantUI="simple" tail />;
|
|
163
|
+
}
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
### Order Tracking
|
|
167
|
+
|
|
168
|
+
```tsx
|
|
169
|
+
import * as React from 'react';
|
|
170
|
+
import { Stepper } from '@xsolla/xui-stepper';
|
|
171
|
+
|
|
172
|
+
export default function OrderTracking() {
|
|
173
|
+
const steps = [
|
|
174
|
+
{ title: 'Order Placed', description: 'Jan 20, 2024', state: 'complete' as const },
|
|
175
|
+
{ title: 'Processing', description: 'Jan 21, 2024', state: 'complete' as const },
|
|
176
|
+
{ title: 'Shipped', description: 'In transit', state: 'loading' as const },
|
|
177
|
+
{ title: 'Delivered', state: 'incomplete' as const },
|
|
178
|
+
];
|
|
179
|
+
|
|
180
|
+
return (
|
|
181
|
+
<Stepper
|
|
182
|
+
steps={steps}
|
|
183
|
+
direction="vertical"
|
|
184
|
+
palette="brand"
|
|
185
|
+
/>
|
|
186
|
+
);
|
|
187
|
+
}
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
## API Reference
|
|
33
191
|
|
|
34
192
|
### Stepper
|
|
35
193
|
|
|
194
|
+
**StepperProps:**
|
|
195
|
+
|
|
36
196
|
| Prop | Type | Default | Description |
|
|
37
|
-
|
|
38
|
-
|
|
|
39
|
-
|
|
|
40
|
-
|
|
|
41
|
-
|
|
|
42
|
-
|
|
|
43
|
-
|
|
|
44
|
-
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
197
|
+
| :--- | :--- | :------ | :---------- |
|
|
198
|
+
| steps | `StepType[]` | - | Array of step definitions. |
|
|
199
|
+
| direction | `"horizontal" \| "vertical"` | `"horizontal"` | Layout direction. |
|
|
200
|
+
| size | `"sm" \| "md"` | `"md"` | Step size. |
|
|
201
|
+
| variantUI | `"current" \| "simple"` | `"current"` | Visual variant. |
|
|
202
|
+
| palette | `"brand" \| "brandSecondary"` | `"brand"` | Color palette. |
|
|
203
|
+
| tail | `boolean` | `false` | Show connecting lines (simple variant). |
|
|
204
|
+
| onClick | `StepClickType` | - | Step click handler. |
|
|
205
|
+
| aria-label | `string` | - | Accessible label for stepper. |
|
|
206
|
+
|
|
207
|
+
**StepType:**
|
|
208
|
+
|
|
209
|
+
```typescript
|
|
210
|
+
interface StepType {
|
|
211
|
+
title: string | ReactElement;
|
|
212
|
+
description?: string | ReactElement;
|
|
213
|
+
state?: "current" | "incomplete" | "loading" | "complete" | "alert" | "warning";
|
|
214
|
+
disabled?: boolean;
|
|
215
|
+
key?: string;
|
|
216
|
+
noClick?: boolean;
|
|
217
|
+
}
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
**StepClickType:**
|
|
221
|
+
|
|
222
|
+
```typescript
|
|
223
|
+
type StepClickType = ({ number, step }: { number: number; step: StepType }) => void;
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
## Step States
|
|
227
|
+
|
|
228
|
+
| State | Description |
|
|
229
|
+
| :---- | :---------- |
|
|
230
|
+
| `current` | Active step, highlighted with brand color |
|
|
231
|
+
| `complete` | Finished step with checkmark |
|
|
232
|
+
| `incomplete` | Future step, muted appearance |
|
|
233
|
+
| `loading` | Step in progress with spinner |
|
|
234
|
+
| `alert` | Error state with alert color |
|
|
235
|
+
| `warning` | Warning state with warning color |
|
|
236
|
+
|
|
237
|
+
## UI Variants
|
|
238
|
+
|
|
239
|
+
| Variant | Description |
|
|
240
|
+
| :------ | :---------- |
|
|
241
|
+
| `current` | Traditional stepper with step indicators and border line |
|
|
242
|
+
| `simple` | Minimalist stepper with optional connecting tail |
|
|
243
|
+
|
|
244
|
+
## Accessibility
|
|
245
|
+
|
|
246
|
+
- Stepper uses `role="navigation"` for semantic meaning
|
|
247
|
+
- Each step is keyboard accessible when clickable
|
|
248
|
+
- `aria-label` provides context for screen readers
|
|
249
|
+
- Step states are conveyed through visual and accessible means
|
|
250
|
+
- Disabled steps are properly announced
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-stepper",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.100.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
"test:coverage": "vitest run --coverage"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@xsolla/xui-core": "0.
|
|
18
|
-
"@xsolla/xui-icons": "0.
|
|
19
|
-
"@xsolla/xui-primitives-core": "0.
|
|
17
|
+
"@xsolla/xui-core": "0.100.0",
|
|
18
|
+
"@xsolla/xui-icons": "0.100.0",
|
|
19
|
+
"@xsolla/xui-primitives-core": "0.100.0"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"react": ">=16.8.0",
|