@trailguide/core 0.0.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 +125 -0
- package/dist/dom.d.ts +5 -0
- package/dist/dom.d.ts.map +1 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/style.css +1 -0
- package/dist/trailguide.d.ts +32 -0
- package/dist/trailguide.d.ts.map +1 -0
- package/dist/trailguide.js +1090 -0
- package/dist/trailguide.umd.js +27 -0
- package/dist/types.d.ts +29 -0
- package/dist/types.d.ts.map +1 -0
- package/package.json +54 -0
package/README.md
ADDED
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
# @trailguide/core
|
|
2
|
+
|
|
3
|
+
Framework-agnostic product tours. Works with any web app - vanilla JS, React, Vue, Svelte, or anything else.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @trailguide/core
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Quick Start
|
|
12
|
+
|
|
13
|
+
```js
|
|
14
|
+
import { start } from '@trailguide/core';
|
|
15
|
+
import '@trailguide/core/styles.css';
|
|
16
|
+
|
|
17
|
+
// Load your trail
|
|
18
|
+
const trail = {
|
|
19
|
+
id: 'welcome',
|
|
20
|
+
title: 'Welcome Tour',
|
|
21
|
+
version: '1.0.0',
|
|
22
|
+
steps: [
|
|
23
|
+
{
|
|
24
|
+
id: 'step-1',
|
|
25
|
+
target: '#create-button',
|
|
26
|
+
placement: 'bottom',
|
|
27
|
+
title: 'Create something',
|
|
28
|
+
content: 'Click here to get started.'
|
|
29
|
+
}
|
|
30
|
+
]
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
// Start the tour
|
|
34
|
+
start(trail, {
|
|
35
|
+
onComplete: () => console.log('Tour completed!'),
|
|
36
|
+
onSkip: () => console.log('Tour skipped'),
|
|
37
|
+
});
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## CDN Usage (No Build Step)
|
|
41
|
+
|
|
42
|
+
```html
|
|
43
|
+
<link rel="stylesheet" href="https://unpkg.com/@trailguide/core/dist/trailguide.css">
|
|
44
|
+
<script src="https://unpkg.com/@trailguide/core/dist/trailguide.umd.js"></script>
|
|
45
|
+
<script>
|
|
46
|
+
Trailguide.start({
|
|
47
|
+
id: 'welcome',
|
|
48
|
+
title: 'Welcome',
|
|
49
|
+
version: '1.0.0',
|
|
50
|
+
steps: [
|
|
51
|
+
{ id: '1', target: '#btn', placement: 'bottom', title: 'Click me', content: 'Start here' }
|
|
52
|
+
]
|
|
53
|
+
});
|
|
54
|
+
</script>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## API
|
|
58
|
+
|
|
59
|
+
### Functions
|
|
60
|
+
|
|
61
|
+
```js
|
|
62
|
+
import { start, stop, next, prev, skip } from '@trailguide/core';
|
|
63
|
+
|
|
64
|
+
start(trail, options) // Start a tour
|
|
65
|
+
stop() // Stop the current tour
|
|
66
|
+
next() // Go to next step
|
|
67
|
+
prev() // Go to previous step
|
|
68
|
+
skip() // Skip/close the tour
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Class API
|
|
72
|
+
|
|
73
|
+
```js
|
|
74
|
+
import { Trailguide } from '@trailguide/core';
|
|
75
|
+
|
|
76
|
+
const tour = new Trailguide({
|
|
77
|
+
onComplete: () => {},
|
|
78
|
+
onSkip: () => {},
|
|
79
|
+
onStepChange: (step, index) => {},
|
|
80
|
+
});
|
|
81
|
+
|
|
82
|
+
tour.start(trail);
|
|
83
|
+
tour.next();
|
|
84
|
+
tour.prev();
|
|
85
|
+
tour.goToStep(2);
|
|
86
|
+
tour.stop();
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### Options
|
|
90
|
+
|
|
91
|
+
| Option | Type | Description |
|
|
92
|
+
|--------|------|-------------|
|
|
93
|
+
| `onComplete` | `() => void` | Called when tour finishes |
|
|
94
|
+
| `onSkip` | `() => void` | Called when user skips |
|
|
95
|
+
| `onStepChange` | `(step, index) => void` | Called on each step change |
|
|
96
|
+
|
|
97
|
+
## Trail Format
|
|
98
|
+
|
|
99
|
+
```typescript
|
|
100
|
+
interface Trail {
|
|
101
|
+
id: string;
|
|
102
|
+
title: string;
|
|
103
|
+
version: string;
|
|
104
|
+
steps: Step[];
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
interface Step {
|
|
108
|
+
id: string;
|
|
109
|
+
target: string; // CSS selector
|
|
110
|
+
placement: 'top' | 'bottom' | 'left' | 'right';
|
|
111
|
+
title: string;
|
|
112
|
+
content: string;
|
|
113
|
+
}
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
## Keyboard Shortcuts
|
|
117
|
+
|
|
118
|
+
- `→` or `Enter` - Next step
|
|
119
|
+
- `←` - Previous step
|
|
120
|
+
- `Escape` - Skip tour
|
|
121
|
+
|
|
122
|
+
## Framework Wrappers
|
|
123
|
+
|
|
124
|
+
- **React**: Use `@trailguide/runtime` for hooks and components
|
|
125
|
+
- **Vue/Svelte/etc**: Use this package directly
|
package/dist/dom.d.ts
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare function findElement(selector: string): HTMLElement | null;
|
|
2
|
+
export declare function isElementVisible(element: HTMLElement): boolean;
|
|
3
|
+
export declare function scrollToElement(element: HTMLElement): void;
|
|
4
|
+
export declare function createElement<K extends keyof HTMLElementTagNameMap>(tag: K, className?: string, parent?: HTMLElement): HTMLElementTagNameMap[K];
|
|
5
|
+
//# sourceMappingURL=dom.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAOhE;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAW9D;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,CAM1D;AAED,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,qBAAqB,EACjE,GAAG,EAAE,CAAC,EACN,SAAS,CAAC,EAAE,MAAM,EAClB,MAAM,CAAC,EAAE,WAAW,GACnB,qBAAqB,CAAC,CAAC,CAAC,CAK1B"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
|
|
2
|
+
export { Trailguide, start, stop, next, prev, skip } from './trailguide';
|
|
3
|
+
export type { Trail, Step, Placement, StepAction, NextTrigger, TrailguideOptions, TrailguideState, } from './types';
|
|
4
|
+
export { findElement, isElementVisible, scrollToElement, } from './dom';
|
|
5
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzE,YAAY,EACV,KAAK,EACL,IAAI,EACJ,SAAS,EACT,UAAU,EACV,WAAW,EACX,iBAAiB,EACjB,eAAe,GAChB,MAAM,SAAS,CAAC;AAEjB,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,eAAe,GAChB,MAAM,OAAO,CAAC"}
|
package/dist/style.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.trailguide-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9998;pointer-events:none}.trailguide-spotlight{position:absolute;top:0;right:0;bottom:0;left:0}.trailguide-spotlight svg{width:100%;height:100%}.trailguide-highlight{position:fixed;border-radius:4px;box-shadow:0 0 0 2px #3b82f6,0 0 0 4px #3b82f64d;transition:all .2s ease-out;pointer-events:none}.trailguide-tooltip{position:fixed;z-index:9999;pointer-events:auto;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.trailguide-tooltip-content{background:#fff;border-radius:8px;box-shadow:0 10px 25px #00000026;max-width:320px;min-width:280px}.trailguide-tooltip-header{padding:12px 16px;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center}.trailguide-tooltip-title{font-size:14px;font-weight:600;color:#111827;margin:0}.trailguide-tooltip-close{background:none;border:none;cursor:pointer;padding:4px;color:#6b7280;font-size:18px;line-height:1}.trailguide-tooltip-close:hover{color:#374151}.trailguide-tooltip-body{padding:16px;font-size:14px;line-height:1.5;color:#374151}.trailguide-tooltip-footer{padding:12px 16px;border-top:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center}.trailguide-tooltip-progress{font-size:12px;color:#6b7280}.trailguide-tooltip-nav{display:flex;gap:8px}.trailguide-btn{padding:6px 12px;font-size:13px;font-weight:500;border-radius:6px;cursor:pointer;transition:all .15s ease}.trailguide-btn-secondary{border:1px solid #d1d5db;background:#fff;color:#374151}.trailguide-btn-secondary:hover{background:#f9fafb}.trailguide-btn-primary{border:none;background:#3b82f6;color:#fff}.trailguide-btn-primary:hover{background:#2563eb}.trailguide-tooltip-arrow{position:absolute;width:12px;height:12px;background:#fff;transform:rotate(45deg)}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { Trail, TrailguideOptions } from './types';
|
|
2
|
+
|
|
3
|
+
export declare class Trailguide {
|
|
4
|
+
private trail;
|
|
5
|
+
private currentStepIndex;
|
|
6
|
+
private isActive;
|
|
7
|
+
private options;
|
|
8
|
+
private overlay;
|
|
9
|
+
private tooltip;
|
|
10
|
+
private arrowEl;
|
|
11
|
+
private cleanupFns;
|
|
12
|
+
constructor(options?: TrailguideOptions);
|
|
13
|
+
start(trail: Trail): void;
|
|
14
|
+
stop(): void;
|
|
15
|
+
next(): void;
|
|
16
|
+
prev(): void;
|
|
17
|
+
skip(): void;
|
|
18
|
+
goToStep(index: number): void;
|
|
19
|
+
private complete;
|
|
20
|
+
private createOverlay;
|
|
21
|
+
private showStep;
|
|
22
|
+
private updateSpotlight;
|
|
23
|
+
private updateTooltip;
|
|
24
|
+
private bindKeyboard;
|
|
25
|
+
private cleanup;
|
|
26
|
+
}
|
|
27
|
+
export declare function start(trail: Trail, options?: TrailguideOptions): Trailguide;
|
|
28
|
+
export declare function stop(): void;
|
|
29
|
+
export declare function next(): void;
|
|
30
|
+
export declare function prev(): void;
|
|
31
|
+
export declare function skip(): void;
|
|
32
|
+
//# sourceMappingURL=trailguide.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"trailguide.d.ts","sourceRoot":"","sources":["../src/trailguide.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAQ,iBAAiB,EAAa,MAAM,SAAS,CAAC;AAGzE,qBAAa,UAAU;IACrB,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,OAAO,CAAyB;IAGxC,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,OAAO,CAA4B;IAG3C,OAAO,CAAC,UAAU,CAAsB;gBAE5B,OAAO,GAAE,iBAAsB;IAI3C,KAAK,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IASzB,IAAI,IAAI,IAAI;IAKZ,IAAI,IAAI,IAAI;IAWZ,IAAI,IAAI,IAAI;IASZ,IAAI,IAAI,IAAI;IAMZ,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQ7B,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,aAAa;IAmDrB,OAAO,CAAC,QAAQ;IAwBhB,OAAO,CAAC,eAAe;YAkDT,aAAa;IAyC3B,OAAO,CAAC,YAAY;IAsBpB,OAAO,CAAC,OAAO;CAShB;AAKD,wBAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,EAAE,iBAAiB,GAAG,UAAU,CAO3E;AAED,wBAAgB,IAAI,IAAI,IAAI,CAE3B;AAED,wBAAgB,IAAI,IAAI,IAAI,CAE3B;AAED,wBAAgB,IAAI,IAAI,IAAI,CAE3B;AAED,wBAAgB,IAAI,IAAI,IAAI,CAE3B"}
|