react-status-tracker 1.0.0 → 1.1.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 +70 -17
- package/package.json +30 -7
package/README.md
CHANGED
|
@@ -10,7 +10,7 @@ This component can be used for:
|
|
|
10
10
|
- Process steps
|
|
11
11
|
- Progress visualization
|
|
12
12
|
|
|
13
|
-
It supports **active and inactive steps**, an optional **flagged (error) state**, full **TypeScript support**, and extensive **customization options** for colors and
|
|
13
|
+
It supports **active and inactive steps**, an optional **flagged (error) state**, **sequential animated progress**, full **TypeScript support**, and extensive **customization options** for colors, sizes, and animation behavior.
|
|
14
14
|
The component is **lightweight**, **production-ready**, and **compatible with MUI v5**.
|
|
15
15
|
|
|
16
16
|
---
|
|
@@ -45,7 +45,10 @@ const steps = [
|
|
|
45
45
|
export default function Example() {
|
|
46
46
|
return (
|
|
47
47
|
<Box sx={{ p: 4 }}>
|
|
48
|
-
<StatusTracker
|
|
48
|
+
<StatusTracker
|
|
49
|
+
steps={steps}
|
|
50
|
+
currentStatus="TESTING REVIEW"
|
|
51
|
+
/>
|
|
49
52
|
</Box>
|
|
50
53
|
);
|
|
51
54
|
}
|
|
@@ -77,6 +80,48 @@ export default function Example() {
|
|
|
77
80
|
|
|
78
81
|
---
|
|
79
82
|
|
|
83
|
+
## Animation Examples
|
|
84
|
+
|
|
85
|
+
### Sequential Animated Progress (Default)
|
|
86
|
+
|
|
87
|
+
```tsx
|
|
88
|
+
<StatusTracker
|
|
89
|
+
steps={steps}
|
|
90
|
+
currentStatus="TESTING REVIEW"
|
|
91
|
+
/>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
- Progress animates **step-by-step** from the first step to the current step
|
|
95
|
+
- Grey connector lines are always visible
|
|
96
|
+
- Active progress animates over the grey base line
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
### Disable Animation
|
|
101
|
+
|
|
102
|
+
```tsx
|
|
103
|
+
<StatusTracker
|
|
104
|
+
steps={steps}
|
|
105
|
+
currentStatus="TESTING REVIEW"
|
|
106
|
+
animate={false}
|
|
107
|
+
/>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
---
|
|
111
|
+
|
|
112
|
+
### Custom Animation Speed
|
|
113
|
+
|
|
114
|
+
```tsx
|
|
115
|
+
<StatusTracker
|
|
116
|
+
steps={steps}
|
|
117
|
+
currentStatus="TESTING REVIEW"
|
|
118
|
+
stepDelay={800}
|
|
119
|
+
transitionDuration={600}
|
|
120
|
+
/>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
---
|
|
124
|
+
|
|
80
125
|
## Custom Styling Example
|
|
81
126
|
|
|
82
127
|
```tsx
|
|
@@ -87,6 +132,8 @@ export default function Example() {
|
|
|
87
132
|
inactiveColor="#e0e0e0"
|
|
88
133
|
circleSize={24}
|
|
89
134
|
lineThickness={3}
|
|
135
|
+
transitionDuration={400}
|
|
136
|
+
stepDelay={300}
|
|
90
137
|
/>
|
|
91
138
|
```
|
|
92
139
|
|
|
@@ -94,25 +141,31 @@ export default function Example() {
|
|
|
94
141
|
|
|
95
142
|
## Props
|
|
96
143
|
|
|
97
|
-
| Prop Name
|
|
98
|
-
|
|
99
|
-
| steps
|
|
100
|
-
| currentStatus
|
|
101
|
-
| orientation
|
|
102
|
-
| flagged
|
|
103
|
-
| activeColor
|
|
104
|
-
| inactiveColor
|
|
105
|
-
| circleSize
|
|
106
|
-
| lineThickness
|
|
144
|
+
| Prop Name | Type | Description | Default |
|
|
145
|
+
|-----------------------|---------------------------|----------------------------------------------------------|---------------|
|
|
146
|
+
| steps | string[] | Ordered list of step labels | Required |
|
|
147
|
+
| currentStatus | string | Current active step | Required |
|
|
148
|
+
| orientation | horizontal \| vertical | Layout direction | horizontal |
|
|
149
|
+
| flagged | boolean | Error or alert state | false |
|
|
150
|
+
| activeColor | string | Active step color | Auto |
|
|
151
|
+
| inactiveColor | string | Inactive step / base line color | #ccc |
|
|
152
|
+
| circleSize | number | Step indicator size | 20 |
|
|
153
|
+
| lineThickness | number | Connector thickness | 2 |
|
|
154
|
+
| animate | boolean | Enable or disable sequential animation | true |
|
|
155
|
+
| stepDelay | number | Delay between each step animation (ms) | 500 |
|
|
156
|
+
| transitionDuration | number | CSS transition duration for steps and connectors (ms) | 500 |
|
|
107
157
|
|
|
108
158
|
---
|
|
109
159
|
|
|
110
160
|
## Behavior Notes
|
|
111
161
|
|
|
112
|
-
-
|
|
113
|
-
-
|
|
114
|
-
-
|
|
115
|
-
-
|
|
162
|
+
- Steps animate **sequentially from the first step to the current step**
|
|
163
|
+
- Grey connector lines are **always visible**, even for incomplete steps
|
|
164
|
+
- Active progress animates **over the grey base connector**
|
|
165
|
+
- All steps before and including the current step are marked active
|
|
166
|
+
- If `animate` is set to `false`, the tracker renders instantly
|
|
167
|
+
- If the provided `currentStatus` does not exist in the steps array, the first step is selected
|
|
168
|
+
- Text labels never affect layout alignment
|
|
116
169
|
|
|
117
170
|
---
|
|
118
171
|
|
|
@@ -145,10 +198,10 @@ import type { StatusTrackerProps } from "react-status-tracker";
|
|
|
145
198
|
|
|
146
199
|
## Planned Enhancements
|
|
147
200
|
|
|
148
|
-
- Animated progress
|
|
149
201
|
- Icons inside steps
|
|
150
202
|
- Clickable steps
|
|
151
203
|
- Tooltip support
|
|
204
|
+
- Accessibility (ARIA stepper roles)
|
|
152
205
|
- SVG-based rendering option
|
|
153
206
|
|
|
154
207
|
---
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-status-tracker",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "A reusable status tracker component for React with horizontal and vertical modes",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
|
|
@@ -48,10 +48,33 @@
|
|
|
48
48
|
},
|
|
49
49
|
|
|
50
50
|
"keywords": [
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
51
|
+
"react",
|
|
52
|
+
"react-component",
|
|
53
|
+
"react-ui",
|
|
54
|
+
"react-library",
|
|
55
|
+
"status-tracker",
|
|
56
|
+
"status",
|
|
57
|
+
"tracker",
|
|
58
|
+
"stepper",
|
|
59
|
+
"workflow",
|
|
60
|
+
"progress",
|
|
61
|
+
"progress-tracker",
|
|
62
|
+
"step-tracker",
|
|
63
|
+
"process",
|
|
64
|
+
"process-flow",
|
|
65
|
+
"pipeline",
|
|
66
|
+
"approval-workflow",
|
|
67
|
+
"order-tracking",
|
|
68
|
+
"timeline",
|
|
69
|
+
"vertical-stepper",
|
|
70
|
+
"horizontal-stepper",
|
|
71
|
+
"mui",
|
|
72
|
+
"material-ui",
|
|
73
|
+
"material-design",
|
|
74
|
+
"mui-stepper",
|
|
75
|
+
"typescript",
|
|
76
|
+
"animated",
|
|
77
|
+
"animation",
|
|
78
|
+
"ui-component"
|
|
79
|
+
]
|
|
57
80
|
}
|