{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "onboarding-wizard", "title": "Onboarding Wizard", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/onboarding-wizard/onboarding-wizard.component.ts", "content": "import { Component, Input, OnInit, computed, signal, ChangeDetectionStrategy } from '@angular/core'\nimport { Check, ChevronLeft, ChevronRight, Globe, LucideAngularModule, Plus, X } from 'lucide-angular'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiSectionCardComponent } from '@/ui/section-card/section-card.component'\nimport { UiStepperComponent, type StepperStep } from '@/ui/stepper/stepper.component'\nimport { UiSwitchComponent } from '@/ui/switch/switch.component'\n\ninterface Preference {\n id: string\n label: string\n description: string\n enabled: boolean\n}\n\nconst steps: StepperStep[] = [\n { id: 1, title: 'Workspace' },\n { id: 2, title: 'Team' },\n { id: 3, title: 'Preferences' },\n { id: 4, title: 'Done' },\n]\n\nconst defaultPreferences: Preference[] = [\n {\n id: 'digests',\n label: 'Email digests',\n description: 'A daily summary of workspace activity.',\n enabled: true,\n },\n {\n id: 'updates',\n label: 'Product updates',\n description: 'Occasional notes about new features and improvements.',\n enabled: false,\n },\n {\n id: 'reports',\n label: 'Weekly reports',\n description: 'Usage analytics delivered every Monday morning.',\n enabled: true,\n },\n]\n\nconst EMAIL_RE = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\n\n/**\n * Angular port of the React OnboardingWizard block: a SectionCard with a four-step Stepper\n * (Workspace, Team, Preferences, Done), a workspace-name input with a live URL slug, teammate\n * invites as removable chips, preference Switch rows and a success panel. Backward navigation\n * through the stepper is free; forward goes through the footer button only.\n *\n * Icons inside `ui-button` sit in ``, so the React `size=\"sm\"` `has-[>svg]:px-2.5`\n * padding is set explicitly on those buttons.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-onboarding-wizard, [ui-onboarding-wizard]',\n standalone: true,\n // React renders the SectionCard itself: the host stays out of layout and `class` goes to the card.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiInputComponent,\n UiSectionCardComponent,\n UiStepperComponent,\n UiSwitchComponent,\n ],\n template: `\n \n \n\n @if (step() === 1) {\n
\n
\n \n \n
\n
\n \n

\n uipkge.dev/\n {{ slug() }}\n

\n
\n
\n }\n\n @if (step() === 2) {\n
\n
\n \n \n \n @if (inviteInvalid()) {\n

Enter a valid email address.

\n }\n @if (invites().length > 0) {\n
\n @for (email of invites(); track email) {\n {{ email\n }}\n \n \n \n }\n
\n } @else {\n

No teammates invited yet.

\n }\n \n Skip for now\n \n
\n }\n\n @if (step() === 3) {\n
\n @for (pref of preferences(); track pref.id) {\n
\n
\n

{{ pref.label }}

\n

{{ pref.description }}

\n
\n \n
\n }\n
\n }\n\n @if (step() === 4) {\n
\n \n \n
\n
\n

You're all set

\n

{{ doneMessage() }}

\n
\n \n \n }\n\n
\n @if (step() > 1 && step() < 4) {\n \n } @else {\n \n }\n Step {{ step() }} of 4\n @if (step() < 4) {\n \n {{ step() === 3 ? 'Finish' : 'Continue' }}\n \n \n } @else {\n \n }\n
\n \n `,\n})\nexport class UiOnboardingWizardComponent implements OnInit {\n /** Jump straight to a step (1 Workspace · 2 Team · 3 Preferences · 4 Done). */\n @Input() initialStep = 1\n /** Pre-fill the workspace name so later steps read naturally in isolation. */\n @Input() initialWorkspaceName = 'Acme Inc'\n /** Pre-seed invited teammates. */\n @Input() initialInvites: string[] = []\n @Input('class') className?: string\n\n protected readonly steps = steps\n protected readonly Check = Check\n protected readonly ChevronLeft = ChevronLeft\n protected readonly ChevronRight = ChevronRight\n protected readonly Globe = Globe\n protected readonly Plus = Plus\n protected readonly X = X\n\n readonly step = signal(1)\n readonly workspaceName = signal('Acme Inc')\n readonly invites = signal([])\n readonly inviteDraft = signal('')\n readonly inviteInvalid = signal(false)\n readonly preferences = signal(defaultPreferences.map((p) => ({ ...p })))\n\n readonly slug = computed(\n () =>\n this.workspaceName()\n .trim()\n .toLowerCase()\n .replace(/[^a-z0-9]+/g, '-')\n .replace(/^-+|-+$/g, '') || 'your-workspace',\n )\n\n readonly doneMessage = computed(() => {\n const name = this.workspaceName() || 'Your workspace'\n const count = this.invites().length\n return count > 0\n ? `${name} is ready and ${count} invitation${count === 1 ? '' : 's'} sent.`\n : `${name} is ready — invite teammates anytime from settings.`\n })\n\n ngOnInit(): void {\n this.step.set(this.initialStep)\n this.workspaceName.set(this.initialWorkspaceName)\n this.invites.set([...this.initialInvites])\n }\n\n addInvite(): void {\n const email = this.inviteDraft().trim()\n if (!EMAIL_RE.test(email) || this.invites().includes(email)) {\n this.inviteInvalid.set(true)\n return\n }\n this.inviteInvalid.set(false)\n this.invites.update((prev) => [...prev, email])\n this.inviteDraft.set('')\n }\n\n onInviteSubmit(event: Event): void {\n event.preventDefault()\n this.addInvite()\n }\n\n onInviteDraft(value: string): void {\n this.inviteDraft.set(value)\n this.inviteInvalid.set(false)\n }\n\n removeInvite(email: string): void {\n this.invites.update((prev) => prev.filter((e) => e !== email))\n }\n\n setPreference(id: string, checked: boolean): void {\n this.preferences.update((prev) => prev.map((p) => (p.id === id ? { ...p, enabled: checked } : p)))\n }\n\n onStepperInput(value: number): void {\n // Free backward navigation; forward goes through the footer button only.\n const current = this.step()\n if (value < current && current !== 4) this.step.set(value)\n }\n\n goNext(): void {\n if (this.step() < 4) this.step.update((s) => s + 1)\n }\n\n reset(): void {\n this.step.set(1)\n this.workspaceName.set('')\n this.invites.set([])\n this.inviteDraft.set('')\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/onboarding-wizard/onboarding-wizard.component.ts" }, { "path": "packages/registry-angular/blocks/onboarding-wizard/index.ts", "content": "export { UiOnboardingWizardComponent } from './onboarding-wizard.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/onboarding-wizard/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/input.json", "https://uipkge.dev/r/angular/section-card.json", "https://uipkge.dev/r/angular/stepper.json", "https://uipkge.dev/r/angular/switch.json" ], "description": "Multi-step workspace setup flow in a SectionCard: a four-step Stepper (Workspace → Team → Preferences → Done) with check icons on completed steps, a workspace-name input with live URL slug preview, teammate invites as removable email chips with a skip link, preference Switch rows, and a success panel with a glowing check circle. Footer carries Back/Continue actions plus a Step X of 4 counter. Data is stubbed inline — wire your API of choice.", "categories": [ "auth", "app", "onboarding" ] }