@daltonr/pathwrite-react 0.2.1 → 0.3.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 +71 -7
- package/dist/index.d.ts +4 -3
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/index.ts +8 -7
package/README.md
CHANGED
|
@@ -86,7 +86,7 @@ function NavButtons() {
|
|
|
86
86
|
|----------|------|-------------|
|
|
87
87
|
| `snapshot` | `PathSnapshot \| null` | Current snapshot. `null` when no path is active. Triggers a React re-render on change. |
|
|
88
88
|
| `start(definition, data?)` | `function` | Start or re-start a path. |
|
|
89
|
-
| `startSubPath(definition, data?)` | `function` | Push a sub-path. Requires an active path. |
|
|
89
|
+
| `startSubPath(definition, data?, meta?)` | `function` | Push a sub-path. Requires an active path. `meta` is returned unchanged to `onSubPathComplete` / `onSubPathCancel`. |
|
|
90
90
|
| `next()` | `function` | Advance one step. Completes the path on the last step. |
|
|
91
91
|
| `previous()` | `function` | Go back one step. No-op when already on the first step of a top-level path. |
|
|
92
92
|
| `cancel()` | `function` | Cancel the active path (or sub-path). |
|
|
@@ -138,9 +138,74 @@ These update automatically when data changes (e.g. after `setData`). Async guard
|
|
|
138
138
|
|
|
139
139
|
Wrap a subtree in `<PathProvider>` so multiple components share the same engine instance. Consume with `usePathContext()`.
|
|
140
140
|
|
|
141
|
-
|
|
141
|
+
---
|
|
142
|
+
|
|
143
|
+
## Default UI — `PathShell`
|
|
144
|
+
|
|
145
|
+
`<PathShell>` is a ready-made shell component that renders a progress indicator, step content, and navigation buttons. Pass a `steps` map to define per-step content.
|
|
146
|
+
|
|
147
|
+
```tsx
|
|
148
|
+
import { PathShell } from "@daltonr/pathwrite-react";
|
|
149
|
+
|
|
150
|
+
<PathShell
|
|
151
|
+
path={myPath}
|
|
152
|
+
initialData={{ name: "" }}
|
|
153
|
+
onComplete={(data) => console.log("Done!", data)}
|
|
154
|
+
steps={{
|
|
155
|
+
details: <DetailsForm />,
|
|
156
|
+
review: <ReviewPanel />,
|
|
157
|
+
}}
|
|
158
|
+
/>
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
### Props
|
|
162
|
+
|
|
163
|
+
| Prop | Type | Default | Description |
|
|
164
|
+
|------|------|---------|-------------|
|
|
165
|
+
| `path` | `PathDefinition` | *required* | The path to run. |
|
|
166
|
+
| `steps` | `Record<string, ReactNode>` | *required* | Map of step ID → content to render. |
|
|
167
|
+
| `initialData` | `PathData` | `{}` | Initial data passed to `engine.start()`. |
|
|
168
|
+
| `autoStart` | `boolean` | `true` | Start the path automatically on mount. |
|
|
169
|
+
| `onComplete` | `(data: PathData) => void` | — | Called when the path completes. |
|
|
170
|
+
| `onCancel` | `(data: PathData) => void` | — | Called when the path is cancelled. |
|
|
171
|
+
| `onEvent` | `(event: PathEvent) => void` | — | Called for every engine event. |
|
|
172
|
+
| `backLabel` | `string` | `"Back"` | Back button label. |
|
|
173
|
+
| `nextLabel` | `string` | `"Next"` | Next button label. |
|
|
174
|
+
| `finishLabel` | `string` | `"Finish"` | Finish button label (last step). |
|
|
175
|
+
| `cancelLabel` | `string` | `"Cancel"` | Cancel button label. |
|
|
176
|
+
| `hideCancel` | `boolean` | `false` | Hide the Cancel button. |
|
|
177
|
+
| `hideProgress` | `boolean` | `false` | Hide the progress indicator. |
|
|
178
|
+
| `className` | `string` | — | Extra CSS class on the root element. |
|
|
179
|
+
| `renderHeader` | `(snapshot) => ReactNode` | — | Render prop to replace the progress header. |
|
|
180
|
+
| `renderFooter` | `(snapshot, actions) => ReactNode` | — | Render prop to replace the navigation footer. |
|
|
181
|
+
|
|
182
|
+
### Customising the header and footer
|
|
183
|
+
|
|
184
|
+
Use `renderHeader` and `renderFooter` to replace the built-in progress bar or navigation buttons with your own UI. Both receive the current `PathSnapshot`; `renderFooter` also receives a `PathShellActions` object with all navigation callbacks.
|
|
142
185
|
|
|
143
|
-
|
|
186
|
+
```tsx
|
|
187
|
+
<PathShell
|
|
188
|
+
path={myPath}
|
|
189
|
+
steps={{ details: <DetailsForm />, review: <ReviewPanel /> }}
|
|
190
|
+
renderHeader={(snapshot) => (
|
|
191
|
+
<p>{snapshot.stepIndex + 1} / {snapshot.stepCount} — {snapshot.stepTitle}</p>
|
|
192
|
+
)}
|
|
193
|
+
renderFooter={(snapshot, actions) => (
|
|
194
|
+
<div>
|
|
195
|
+
<button onClick={actions.previous} disabled={snapshot.isFirstStep}>Back</button>
|
|
196
|
+
<button onClick={actions.next} disabled={!snapshot.canMoveNext}>
|
|
197
|
+
{snapshot.isLastStep ? "Finish" : "Next"}
|
|
198
|
+
</button>
|
|
199
|
+
</div>
|
|
200
|
+
)}
|
|
201
|
+
/>
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
`PathShellActions` contains: `next`, `previous`, `cancel`, `goToStep`, `goToStepChecked`, `setData`.
|
|
205
|
+
|
|
206
|
+
### Context sharing
|
|
207
|
+
|
|
208
|
+
`<PathShell>` provides a path context automatically — step components rendered inside it can call `usePathContext()` without a separate `<PathProvider>`:
|
|
144
209
|
|
|
145
210
|
```tsx
|
|
146
211
|
function DetailsForm() {
|
|
@@ -157,13 +222,12 @@ function DetailsForm() {
|
|
|
157
222
|
path={myPath}
|
|
158
223
|
initialData={{ name: "" }}
|
|
159
224
|
onComplete={handleDone}
|
|
160
|
-
steps={{
|
|
161
|
-
details: <DetailsForm />,
|
|
162
|
-
review: <ReviewPanel />,
|
|
163
|
-
}}
|
|
225
|
+
steps={{ details: <DetailsForm />, review: <ReviewPanel /> }}
|
|
164
226
|
/>
|
|
165
227
|
```
|
|
166
228
|
|
|
229
|
+
---
|
|
230
|
+
|
|
167
231
|
## Styling
|
|
168
232
|
|
|
169
233
|
`<PathShell>` renders structural HTML with BEM-style `pw-shell__*` CSS classes but ships with no embedded styles. Import the optional stylesheet for sensible defaults:
|
package/dist/index.d.ts
CHANGED
|
@@ -9,11 +9,11 @@ export interface UsePathReturn<TData extends PathData = PathData> {
|
|
|
9
9
|
snapshot: PathSnapshot<TData> | null;
|
|
10
10
|
/** Start (or restart) a path. */
|
|
11
11
|
start: (path: PathDefinition<any>, initialData?: PathData) => void;
|
|
12
|
-
/** Push a sub-path onto the stack. Requires an active path. */
|
|
13
|
-
startSubPath: (path: PathDefinition<any>, initialData?: PathData) => void;
|
|
12
|
+
/** Push a sub-path onto the stack. Requires an active path. Pass an optional `meta` object for correlation — it is returned unchanged to the parent step's `onSubPathComplete` / `onSubPathCancel` hooks. */
|
|
13
|
+
startSubPath: (path: PathDefinition<any>, initialData?: PathData, meta?: Record<string, unknown>) => void;
|
|
14
14
|
/** Advance one step. Completes the path on the last step. */
|
|
15
15
|
next: () => void;
|
|
16
|
-
/** Go back one step.
|
|
16
|
+
/** Go back one step. No-op when already on the first step of a top-level path. Pops back to the parent path when on the first step of a sub-path. */
|
|
17
17
|
previous: () => void;
|
|
18
18
|
/** Cancel the active path (or sub-path). */
|
|
19
19
|
cancel: () => void;
|
|
@@ -81,6 +81,7 @@ export interface PathShellActions {
|
|
|
81
81
|
previous: () => void;
|
|
82
82
|
cancel: () => void;
|
|
83
83
|
goToStep: (stepId: string) => void;
|
|
84
|
+
goToStepChecked: (stepId: string) => void;
|
|
84
85
|
setData: (key: string, value: unknown) => void;
|
|
85
86
|
}
|
|
86
87
|
/**
|
package/dist/index.js
CHANGED
|
@@ -29,7 +29,7 @@ export function usePath(options) {
|
|
|
29
29
|
const snapshot = useSyncExternalStore(subscribe, getSnapshot);
|
|
30
30
|
// Stable action callbacks
|
|
31
31
|
const start = useCallback((path, initialData = {}) => engine.start(path, initialData), [engine]);
|
|
32
|
-
const startSubPath = useCallback((path, initialData = {}) => engine.startSubPath(path, initialData), [engine]);
|
|
32
|
+
const startSubPath = useCallback((path, initialData = {}, meta) => engine.startSubPath(path, initialData, meta), [engine]);
|
|
33
33
|
const next = useCallback(() => engine.next(), [engine]);
|
|
34
34
|
const previous = useCallback(() => engine.previous(), [engine]);
|
|
35
35
|
const cancel = useCallback(() => engine.cancel(), [engine]);
|
|
@@ -90,7 +90,7 @@ export function PathShell({ path: pathDef, steps, initialData = {}, autoStart =
|
|
|
90
90
|
onCancel?.(event.data);
|
|
91
91
|
}
|
|
92
92
|
});
|
|
93
|
-
const { snapshot, start, next, previous, cancel, goToStep, setData } = pathReturn;
|
|
93
|
+
const { snapshot, start, next, previous, cancel, goToStep, goToStepChecked, setData } = pathReturn;
|
|
94
94
|
// Auto-start on mount
|
|
95
95
|
const startedRef = useRef(false);
|
|
96
96
|
useEffect(() => {
|
|
@@ -109,7 +109,7 @@ export function PathShell({ path: pathDef, steps, initialData = {}, autoStart =
|
|
|
109
109
|
onClick: () => start(pathDef, initialData)
|
|
110
110
|
}, "Start"))));
|
|
111
111
|
}
|
|
112
|
-
const actions = { next, previous, cancel, goToStep, setData };
|
|
112
|
+
const actions = { next, previous, cancel, goToStep, goToStepChecked, setData };
|
|
113
113
|
return createElement(PathContext.Provider, { value: pathReturn }, createElement("div", { className: cls("pw-shell", className) },
|
|
114
114
|
// Header — progress indicator
|
|
115
115
|
!hideProgress && (renderHeader
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,aAAa,EACb,WAAW,EACX,UAAU,EACV,SAAS,EACT,MAAM,EACN,oBAAoB,EACrB,MAAM,OAAO,CAAC;AAEf,OAAO,EAGL,UAAU,EAGX,MAAM,yBAAyB,CAAC;AAqCjC,8EAA8E;AAC9E,eAAe;AACf,8EAA8E;AAE9E,MAAM,UAAU,OAAO,CAAoC,OAAwB;IACjF,sDAAsD;IACtD,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,IAAI,SAAS,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;QAC/B,SAAS,CAAC,OAAO,GAAG,IAAI,UAAU,EAAE,CAAC;IACvC,CAAC;IACD,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC;IAEjC,4EAA4E;IAC5E,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAC5C,UAAU,CAAC,OAAO,GAAG,OAAO,EAAE,OAAO,CAAC;IAEtC,+DAA+D;IAC/D,MAAM,WAAW,GAAG,MAAM,CAA6B,IAAI,CAAC,CAAC;IAE7D,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,QAAoB,EAAE,EAAE,CACvB,MAAM,CAAC,SAAS,CAAC,CAAC,KAAgB,EAAE,EAAE;QACpC,IAAI,KAAK,CAAC,IAAI,KAAK,cAAc,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YAC9D,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC,QAA+B,CAAC;QAC9D,CAAC;aAAM,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;YACpE,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;QAC7B,CAAC;QACD,UAAU,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;QAC5B,QAAQ,EAAE,CAAC;IACb,CAAC,CAAC,EACJ,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;IAE/D,MAAM,QAAQ,GAAG,oBAAoB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;IAE9D,0BAA0B;IAC1B,MAAM,KAAK,GAAG,WAAW,CACvB,CAAC,IAAyB,EAAE,cAAwB,EAAE,EAAE,EAAE,CACxD,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,CAAC,EACjC,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,IAAyB,EAAE,cAAwB,EAAE,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@daltonr/pathwrite-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"description": "React adapter for @daltonr/pathwrite-core — hooks, context provider, and optional <PathShell> default UI.",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"react": ">=18.0.0"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@daltonr/pathwrite-core": "^0.
|
|
48
|
+
"@daltonr/pathwrite-core": "^0.3.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"react": "^18.3.1",
|
package/src/index.ts
CHANGED
|
@@ -30,11 +30,11 @@ export interface UsePathReturn<TData extends PathData = PathData> {
|
|
|
30
30
|
snapshot: PathSnapshot<TData> | null;
|
|
31
31
|
/** Start (or restart) a path. */
|
|
32
32
|
start: (path: PathDefinition<any>, initialData?: PathData) => void;
|
|
33
|
-
/** Push a sub-path onto the stack. Requires an active path. */
|
|
34
|
-
startSubPath: (path: PathDefinition<any>, initialData?: PathData) => void;
|
|
33
|
+
/** Push a sub-path onto the stack. Requires an active path. Pass an optional `meta` object for correlation — it is returned unchanged to the parent step's `onSubPathComplete` / `onSubPathCancel` hooks. */
|
|
34
|
+
startSubPath: (path: PathDefinition<any>, initialData?: PathData, meta?: Record<string, unknown>) => void;
|
|
35
35
|
/** Advance one step. Completes the path on the last step. */
|
|
36
36
|
next: () => void;
|
|
37
|
-
/** Go back one step.
|
|
37
|
+
/** Go back one step. No-op when already on the first step of a top-level path. Pops back to the parent path when on the first step of a sub-path. */
|
|
38
38
|
previous: () => void;
|
|
39
39
|
/** Cancel the active path (or sub-path). */
|
|
40
40
|
cancel: () => void;
|
|
@@ -96,8 +96,8 @@ export function usePath<TData extends PathData = PathData>(options?: UsePathOpti
|
|
|
96
96
|
);
|
|
97
97
|
|
|
98
98
|
const startSubPath = useCallback(
|
|
99
|
-
(path: PathDefinition<any>, initialData: PathData = {}) =>
|
|
100
|
-
engine.startSubPath(path, initialData),
|
|
99
|
+
(path: PathDefinition<any>, initialData: PathData = {}, meta?: Record<string, unknown>) =>
|
|
100
|
+
engine.startSubPath(path, initialData, meta),
|
|
101
101
|
[engine]
|
|
102
102
|
);
|
|
103
103
|
|
|
@@ -197,6 +197,7 @@ export interface PathShellActions {
|
|
|
197
197
|
previous: () => void;
|
|
198
198
|
cancel: () => void;
|
|
199
199
|
goToStep: (stepId: string) => void;
|
|
200
|
+
goToStepChecked: (stepId: string) => void;
|
|
200
201
|
setData: (key: string, value: unknown) => void;
|
|
201
202
|
}
|
|
202
203
|
|
|
@@ -242,7 +243,7 @@ export function PathShell({
|
|
|
242
243
|
}
|
|
243
244
|
});
|
|
244
245
|
|
|
245
|
-
const { snapshot, start, next, previous, cancel, goToStep, setData } = pathReturn;
|
|
246
|
+
const { snapshot, start, next, previous, cancel, goToStep, goToStepChecked, setData } = pathReturn;
|
|
246
247
|
|
|
247
248
|
// Auto-start on mount
|
|
248
249
|
const startedRef = useRef(false);
|
|
@@ -272,7 +273,7 @@ export function PathShell({
|
|
|
272
273
|
);
|
|
273
274
|
}
|
|
274
275
|
|
|
275
|
-
const actions: PathShellActions = { next, previous, cancel, goToStep, setData };
|
|
276
|
+
const actions: PathShellActions = { next, previous, cancel, goToStep, goToStepChecked, setData };
|
|
276
277
|
|
|
277
278
|
return createElement(PathContext.Provider, { value: pathReturn },
|
|
278
279
|
createElement("div", { className: cls("pw-shell", className) },
|