@guided-tour-s4marth/recorder 0.1.0 → 0.1.1
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 +55 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
# @guided-tour-s4marth/recorder
|
|
2
|
+
|
|
3
|
+
**DEV-only** click-to-record authoring overlay for the guided-tour system. Mount
|
|
4
|
+
it in your app (development builds only) to record tours by clicking through the
|
|
5
|
+
UI — it captures a resilient locator + signature per step, so the resulting tour
|
|
6
|
+
targets elements at runtime with no build-time `data-tour` attributes and no deploy.
|
|
7
|
+
|
|
8
|
+
Pairs with
|
|
9
|
+
[`@guided-tour-s4marth/react`](https://www.npmjs.com/package/@guided-tour-s4marth/react).
|
|
10
|
+
|
|
11
|
+
## Install
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm i -D @guided-tour-s4marth/recorder
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
(`@guided-tour-s4marth/core` and React >=18 are peers.)
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
Render it **only in development** and hand it a `onSubmit` that persists the
|
|
22
|
+
recorded tour to your backend:
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
import { lazy, Suspense } from 'react';
|
|
26
|
+
|
|
27
|
+
const RecorderOverlay = import.meta.env.DEV
|
|
28
|
+
? lazy(() => import('@guided-tour-s4marth/recorder').then(m => ({ default: m.RecorderOverlay })))
|
|
29
|
+
: null;
|
|
30
|
+
|
|
31
|
+
{import.meta.env.DEV && RecorderOverlay && (
|
|
32
|
+
<Suspense fallback={null}>
|
|
33
|
+
<RecorderOverlay
|
|
34
|
+
navigate={route => router.push(route)}
|
|
35
|
+
onSubmit={result => saveTour(result.draft)} // POST to your backend
|
|
36
|
+
onSaveRepair={result => updateTour(result.draft)} // PATCH existing (repair mode)
|
|
37
|
+
/>
|
|
38
|
+
</Suspense>
|
|
39
|
+
)}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## What you get
|
|
43
|
+
|
|
44
|
+
- **Record** — a floating button opens the recorder; click targets to add steps,
|
|
45
|
+
navigations/clicks between steps are captured as each step's prepare path.
|
|
46
|
+
- **Modal steps** — add a targetless centered-modal step (intro/outro).
|
|
47
|
+
- **Preview** — play the draft with the real player before submitting.
|
|
48
|
+
- **Repair mode** — load an existing tour (`repairTour` prop), see a live health
|
|
49
|
+
badge per step, re-capture a broken step, and save — no deploy.
|
|
50
|
+
|
|
51
|
+
The overlay marks its own DOM so it never records itself.
|
|
52
|
+
|
|
53
|
+
## License
|
|
54
|
+
|
|
55
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@guided-tour-s4marth/recorder",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "DEV-ONLY: click-to-record guided tour authoring overlay",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "DataGenie",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"dist"
|
|
34
34
|
],
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@guided-tour-s4marth/core": "0.1.
|
|
36
|
+
"@guided-tour-s4marth/core": "0.1.1"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"react": ">=18.0.0",
|