{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "demo-guided-tour", "title": "Demo — Guided Tour", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/demo-guided-tour/demo-guided-tour.component.ts", "content": "// Step-through product tour where next and previous move a highlight across a mocked\n// interface, with a step counter, progress bar and a skip control. Port of the React\n// block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport { ArrowLeft, ArrowRight, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport interface GuidedTourStep {\n target: string\n title: string\n body: string\n}\n\nexport interface GuidedTourPanel {\n id: string\n label: string\n rows: string[]\n}\n\n// Each step names the panel it highlights, so the copy and the mock cannot\n// drift apart when someone reorders the tour.\nexport const GUIDED_TOUR_STEPS: GuidedTourStep[] = [\n {\n target: 'catalog',\n title: 'Start from the catalogue',\n body: 'Every table we mirrored, with its freshness. Pick what the metric reads from.',\n },\n {\n target: 'definition',\n title: 'Write the definition',\n body: 'The window, the owner, and the joins. This is the file that opens a pull request.',\n },\n {\n target: 'consumers',\n title: 'See who it affects',\n body: 'Before publishing, the consumer list shows every dashboard and export that resolves it.',\n },\n {\n target: 'history',\n title: 'Check the history',\n body: 'Every prior version with its reviewer, and a one-click revert to any of them.',\n },\n]\n\nexport const GUIDED_TOUR_PANELS: GuidedTourPanel[] = [\n { id: 'catalog', label: 'Catalogue', rows: ['warehouse.orders', 'warehouse.refunds', 'warehouse.fx_rates'] },\n {\n id: 'definition',\n label: 'revenue_net.yml',\n rows: ['window: trailing_28d', 'owner: finance-analytics', 'joins: refunds, fx'],\n },\n { id: 'consumers', label: 'Consumers', rows: ['Exec summary', 'Finance close pack', 'Partner API'] },\n {\n id: 'history',\n label: 'History',\n rows: ['v128 · 14 Feb · A. Reyes', 'v127 · 02 Jan · A. Reyes', 'v126 · 11 Dec · M. Ellery'],\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-demo-guided-tour, [ui-demo-guided-tour]',\n standalone: true,\n host: {\n '[attr.data-slot]': '\"demo-guided-tour\"',\n '[class]': 'hostClass',\n },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiProgressComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n
\n
\n Guided tour\n

Four screens, ninety seconds

\n
\n \n
\n\n
\n
\n
\n

Step {{ index() + 1 }} of {{ steps.length }}

\n\n \n
\n

{{ current().title }}

\n

{{ current().body }}

\n
\n\n
\n \n \n
\n
\n\n
\n
\n @for (panel of panels; track panel.id) {\n
\n
\n

{{ panel.label }}

\n @if (panel.id === current().target) {\n This step\n }\n
\n \n
    \n @for (row of panel.rows; track row) {\n
  • \n {{ row }}\n
    • \n }\n
\n
\n }\n
\n
\n
\n
\n `,\n})\nexport class UiDemoGuidedTourComponent {\n protected readonly ArrowLeft = ArrowLeft\n protected readonly ArrowRight = ArrowRight\n\n @Input('class') className?: string\n\n readonly steps = GUIDED_TOUR_STEPS\n readonly panels = GUIDED_TOUR_PANELS\n\n readonly index = signal(0)\n readonly current = computed(() => this.steps[this.index()] ?? this.steps[0]!)\n readonly progress = computed(() => ((this.index() + 1) / this.steps.length) * 100)\n\n get hostClass(): string {\n return cn('bg-background block w-full', this.className)\n }\n\n panelClass(id: string): string {\n return cn(id === this.current().target ? 'border-primary bg-muted/40' : 'border-border bg-background opacity-60')\n }\n\n next(): void {\n this.index.update((i) => Math.min(i + 1, this.steps.length - 1))\n }\n\n back(): void {\n this.index.update((i) => Math.max(i - 1, 0))\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/demo-guided-tour/demo-guided-tour.component.ts" }, { "path": "packages/registry-angular/blocks/demo-guided-tour/index.ts", "content": "export {\n UiDemoGuidedTourComponent,\n GUIDED_TOUR_STEPS,\n GUIDED_TOUR_PANELS,\n type GuidedTourStep,\n type GuidedTourPanel,\n} from './demo-guided-tour.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/demo-guided-tour/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Step-through product tour where next and previous move a highlight across a mocked interface, with a step counter and a skip control.", "categories": [ "marketing" ] }