@umituz/web-dashboard 5.0.1 → 6.1.0

package/src/domains/onboarding/templates/health-onboarding.ts

@@ -0,0 +1,97 @@
+import type { OnboardingConfig } from '../types/config';
+import type { OnboardingScreen } from '../types/screens';
+
+/**
+ * Health category — privacy-first, 5–7 screens.
+ * Trust is the #1 conversion lever: lead with privacy reassurance.
+ */
+
+const screens: OnboardingScreen[] = [
+  {
+    id: 'welcome',
+    type: 'welcome',
+    title: 'Your health, your data, your call',
+    subtitle: 'Private by design. Always encrypted on-device.',
+    cta: 'Get started',
+    heroIconName: 'ShieldCheck',
+    highlight: 'HIPAA-ready',
+  },
+  {
+    id: 'goal',
+    type: 'goal-question',
+    question: 'What brings you here today?',
+    multiSelect: false,
+    options: [
+      { id: 'sleep', label: 'Better sleep', iconName: 'Moon' },
+      { id: 'fitness', label: 'Get fitter', iconName: 'Dumbbell' },
+      { id: 'nutrition', label: 'Eat healthier', iconName: 'Apple' },
+      { id: 'stress', label: 'Manage stress', iconName: 'HeartPulse' },
+    ],
+    onChange: () => undefined,
+    cta: 'Continue',
+  },
+  {
+    id: 'privacy',
+    type: 'pain-points',
+    title: 'What worries you most about health apps?',
+    painPoints: [
+      { id: 'data-shared', label: 'Data shared with insurers' },
+      { id: 'tracking', label: 'Being tracked across apps' },
+      { id: 'ads', label: 'Seeing health ads' },
+      { id: 'leaks', label: 'Data breaches' },
+    ],
+    multiSelect: true,
+    onChange: () => undefined,
+    cta: 'Continue',
+  },
+  {
+    id: 'permission-priming-notifications',
+    type: 'permission-priming',
+    permission: 'notifications',
+    title: 'Gentle daily reminders',
+    description: 'We only ping you when it matters — never spammy.',
+    benefits: [
+      'Reminders you can mute any time',
+      'On-device scheduling — nothing leaves your phone',
+      'One-tap unsubscribe from any category',
+    ],
+    iconName: 'Bell',
+    onRequest: async () => 'prompt',
+    cta: 'Allow reminders',
+  },
+  {
+    id: 'processing',
+    type: 'processing',
+    title: 'Building your wellness plan…',
+    steps: ['Reading your goals', 'Filtering privacy settings', 'Personalizing the plan'],
+    durationMs: 3000,
+    onComplete: () => undefined,
+  },
+  {
+    id: 'paywall',
+    type: 'paywall',
+    title: 'Unlock your full plan',
+    subtitle: 'Most users see results in their first week.',
+    price: '$6.99 / month',
+    trialDays: 7,
+    trialPrice: 'Free',
+    cta: 'Start 7-day trial',
+    secondaryCta: 'Maybe later',
+    features: [
+      { iconName: 'Lock', text: 'End-to-end encrypted data' },
+      { iconName: 'Activity', text: 'Personalized daily plan' },
+      { iconName: 'MessageCircle', text: '24/7 human coaching' },
+      { iconName: 'Award', text: 'Progress you can share (or not)' },
+    ],
+    socialProof: { text: 'Trusted by', count: 250000 },
+    onSecondaryCta: () => undefined,
+    onAccept: async () => ({ accepted: true, trialStarted: true }),
+  },
+];
+
+export const healthOnboardingTemplate: OnboardingConfig = {
+  category: 'health',
+  screens,
+  onSkip: () => undefined,
+  onComplete: () => undefined,
+};

package/src/domains/onboarding/templates/index.ts

@@ -0,0 +1,6 @@
+export { healthOnboardingTemplate } from './health-onboarding';
+export { artOnboardingTemplate } from './art-onboarding';
+export { videoOnboardingTemplate } from './video-onboarding';
+export { platformOnboardingTemplate } from './platform-onboarding';
+export { withDefaultDemo, defaultDemoResult, TemplateDemoFallback } from './TemplateDemoFallback';
+export type { TemplateDemoResult } from './TemplateDemoFallback';

package/src/domains/onboarding/templates/platform-onboarding.ts

@@ -0,0 +1,210 @@
+import type { OnboardingConfig } from '../types/config';
+import type { OnboardingScreen } from '../types/screens';
+import { withDefaultDemo, defaultDemoResult } from './TemplateDemoFallback';
+
+/**
+ * Platform category — full 14-screen flow.
+ * Use for multi-feature platforms where personalization drives retention.
+ *
+ * The app-demo screen ships with a working palette-preview fallback so the
+ * template is runnable end-to-end out of the box.
+ */
+
+const screens: OnboardingScreen[] = [
+  {
+    id: 'welcome',
+    type: 'welcome',
+    title: 'Welcome aboard',
+    subtitle: 'A few questions and we’ll tailor the entire experience.',
+    cta: 'Start',
+    heroIconName: 'Rocket',
+    highlight: '~2 minutes',
+  },
+  {
+    id: 'goals',
+    type: 'goal-question',
+    question: 'What do you want to get out of this?',
+    multiSelect: true,
+    options: [
+      { id: 'productivity', label: 'Be more productive', iconName: 'Zap' },
+      { id: 'learn', label: 'Learn new skills', iconName: 'GraduationCap' },
+      { id: 'connect', label: 'Connect with people', iconName: 'Users' },
+      { id: 'create', label: 'Create content', iconName: 'PenTool' },
+    ],
+    onChange: () => undefined,
+    cta: 'Continue',
+  },
+  {
+    id: 'pains',
+    type: 'pain-points',
+    title: 'What frustrates you about tools like this?',
+    painPoints: [
+      { id: 'complex', label: 'Too complex' },
+      { id: 'slow', label: 'Too slow' },
+      { id: 'pricey', label: 'Too expensive' },
+      { id: 'privacy', label: 'Privacy concerns' },
+    ],
+    multiSelect: true,
+    maxSelect: 3,
+    onChange: () => undefined,
+    cta: 'Continue',
+  },
+  {
+    id: 'proof',
+    type: 'social-proof',
+    title: 'Why people stay',
+    testimonials: [
+      {
+        name: 'Maya K.',
+        role: 'Designer',
+        content: 'The best $10/mo I spend. Period.',
+        rating: 5,
+      },
+      {
+        name: 'Andre P.',
+        role: 'PM',
+        content: 'I onboarded my whole team in a day.',
+        rating: 5,
+      },
+      {
+        name: 'Sara L.',
+        role: 'Founder',
+        content: 'Replaced three other tools for me.',
+        rating: 4,
+      },
+    ],
+  },
+  {
+    id: 'tinder',
+    type: 'tinder-cards',
+    title: 'A bit about you',
+    statements: [
+      { id: 'a', text: 'I prefer learning by doing.', category: 'Style' },
+      { id: 'b', text: 'I read every doc end-to-end.', category: 'Style' },
+      { id: 'c', text: 'I collaborate with others daily.', category: 'Style' },
+      { id: 'd', text: 'I work alone most of the time.', category: 'Style' },
+    ],
+    onChange: () => undefined,
+    cta: 'Continue',
+  },
+  {
+    id: 'personalized',
+    type: 'personalized-solution',
+    title: 'Built for the way you work',
+    subtitle: 'Here is what we’ll set up for you.',
+    solutions: [
+      { painPointId: 'complex', solution: 'A guided first-run experience with smart defaults.' },
+      { painPointId: 'slow', solution: 'Sub-200ms interactions, no spinner purgatory.' },
+      { painPointId: 'pricey', solution: 'A free tier that actually does the job.' },
+      { painPointId: 'privacy', solution: 'You own your data — export and delete anytime.' },
+    ],
+    selectedPainPointIds: [],
+  },
+  {
+    id: 'comparison',
+    type: 'comparison',
+    title: 'Before vs. after',
+    before: ['Tool overload', 'Generic templates', 'Steep learning curve'],
+    after: ['One workspace', 'Personalized setup', '2-minute onboarding'],
+  },
+  {
+    id: 'prefs',
+    type: 'preferences',
+    title: 'A few preferences',
+    preferences: [
+      {
+        id: 'theme',
+        label: 'Theme',
+        type: 'select',
+        defaultValue: 'system',
+        options: [
+          { id: 'system', label: 'Match system' },
+          { id: 'light', label: 'Light' },
+          { id: 'dark', label: 'Dark' },
+        ],
+      },
+      {
+        id: 'density',
+        label: 'Density',
+        type: 'select',
+        defaultValue: 'comfortable',
+        options: [
+          { id: 'compact', label: 'Compact' },
+          { id: 'comfortable', label: 'Comfortable' },
+        ],
+      },
+    ],
+    onChange: () => undefined,
+    cta: 'Continue',
+  },
+  {
+    id: 'permission-notifications',
+    type: 'permission-priming',
+    permission: 'notifications',
+    title: 'Stay in the loop',
+    description: 'Only the alerts you actually want.',
+    benefits: ['Mentions & replies', 'Weekly summary', 'Customizable quiet hours'],
+    iconName: 'Bell',
+    onRequest: async () => 'prompt',
+    cta: 'Enable notifications',
+  },
+  {
+    id: 'processing',
+    type: 'processing',
+    title: 'Setting up your workspace…',
+    steps: ['Tuning recommendations', 'Importing defaults', 'Warming caches'],
+    durationMs: 3500,
+    onComplete: () => undefined,
+  },
+  {
+    id: 'demo',
+    type: 'app-demo',
+    title: 'Quick tour — try a quick action',
+    demo: { component: () => null, onSave: () => undefined },
+  },
+  {
+    id: 'value',
+    type: 'value-delivery',
+    title: 'You’re all set',
+    result: defaultDemoResult(),
+  },
+  {
+    id: 'account',
+    type: 'account-gate',
+    title: 'Save your progress',
+    subtitle: 'Sign in to sync across devices.',
+    optional: true,
+    signInMethod: 'email',
+    skipText: 'Continue without account',
+    onSignIn: async () => ({ signedIn: true, method: 'email' }),
+  },
+  {
+    id: 'paywall',
+    type: 'paywall',
+    title: 'Unlock the full platform',
+    subtitle: 'Pricing that scales with you.',
+    price: '$14.99 / month',
+    trialDays: 14,
+    cta: 'Start 14-day trial',
+    secondaryCta: 'Stay on free',
+    features: [
+      { iconName: 'Infinity', text: 'Unlimited projects' },
+      { iconName: 'Users', text: 'Team workspaces' },
+      { iconName: 'Shield', text: 'Enterprise SSO' },
+      { iconName: 'Headphones', text: 'Priority support' },
+    ],
+    socialProof: { text: 'Joined by', count: 850000 },
+    onSecondaryCta: () => undefined,
+    onAccept: async () => ({ accepted: true, trialStarted: true }),
+  },
+];
+
+// Replace the no-op demo component with the built-in working fallback.
+const resolvedScreens = screens.map((s) => withDefaultDemo(s));
+
+export const platformOnboardingTemplate: OnboardingConfig = {
+  category: 'platform',
+  screens: resolvedScreens,
+  onSkip: () => undefined,
+  onComplete: () => undefined,
+};

package/src/domains/onboarding/templates/video-onboarding.ts

@@ -0,0 +1,100 @@
+import type { OnboardingConfig } from '../types/config';
+import type { OnboardingScreen } from '../types/screens';
+
+/**
+ * Video category — personalization-led, 6–8 screens.
+ * Goal: tune the recommendation engine early.
+ */
+
+const screens: OnboardingScreen[] = [
+  {
+    id: 'welcome',
+    type: 'welcome',
+    title: 'Watch what you actually love',
+    subtitle: 'A few quick questions and we’ll never recommend junk again.',
+    cta: 'Let’s go',
+    heroIconName: 'Play',
+  },
+  {
+    id: 'genres',
+    type: 'goal-question',
+    question: 'Which genres do you enjoy?',
+    multiSelect: true,
+    options: [
+      { id: 'comedy', label: 'Comedy', iconName: 'Smile' },
+      { id: 'drama', label: 'Drama', iconName: 'Theater' },
+      { id: 'documentary', label: 'Documentary', iconName: 'BookOpen' },
+      { id: 'thriller', label: 'Thriller', iconName: 'AlertTriangle' },
+      { id: 'sci-fi', label: 'Sci-fi', iconName: 'Rocket' },
+    ],
+    onChange: () => undefined,
+    cta: 'Continue',
+  },
+  {
+    id: 'mood',
+    type: 'tinder-cards',
+    title: 'Swipe on what feels right',
+    statements: [
+      { id: 's1', text: 'I want to learn something new today.', category: 'Curious' },
+      { id: 's2', text: 'I want pure entertainment.', category: 'Fun' },
+      { id: 's3', text: 'I want something to cry to.', category: 'Emotional' },
+      { id: 's4', text: 'I want background noise while I work.', category: 'Casual' },
+    ],
+    onChange: () => undefined,
+    cta: 'Continue',
+  },
+  {
+    id: 'length',
+    type: 'preferences',
+    title: 'How long should a video be?',
+    preferences: [
+      {
+        id: 'length',
+        label: 'Preferred length',
+        type: 'slider',
+        min: 1,
+        max: 120,
+        defaultValue: 20,
+      },
+    ],
+    onChange: () => undefined,
+    cta: 'Continue',
+  },
+  {
+    id: 'permission-priming-notifications',
+    type: 'permission-priming',
+    permission: 'notifications',
+    title: 'Never miss a live premiere',
+    description: 'Get a heads-up when channels you love go live.',
+    benefits: ['Only from channels you follow', 'Snooze any time', 'Silent by default'],
+    iconName: 'Bell',
+    onRequest: async () => 'prompt',
+    cta: 'Turn on alerts',
+  },
+  {
+    id: 'paywall',
+    type: 'paywall',
+    title: 'Watch without limits',
+    subtitle: 'Ad-free, offline downloads, 4K.',
+    price: '$11.99 / month',
+    trialDays: 14,
+    cta: 'Start 14-day trial',
+    secondaryCta: 'Continue with ads',
+    features: [
+      { iconName: 'Tv', text: '4K Ultra HD' },
+      { iconName: 'Download', text: 'Offline downloads' },
+      { iconName: 'Users', text: '4 screens at once' },
+      { iconName: 'Ban', text: 'Zero ads' },
+    ],
+    socialProof: { text: 'Loved by', count: 1200000 },
+    onSecondaryCta: () => undefined,
+    onAccept: async () => ({ accepted: true, trialStarted: true }),
+  },
+];
+
+export const videoOnboardingTemplate: OnboardingConfig = {
+  category: 'video',
+  screens,
+  onSkip: () => undefined,
+  onComplete: () => undefined,
+};

package/src/domains/onboarding/test/setup.ts

@@ -0,0 +1,30 @@
+import { afterEach, vi } from 'vitest';
+import { cleanup } from '@testing-library/react';
+
+// React 18 testing-library contract: let `act` warnings be raised correctly.
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+// jsdom has no matchMedia. Provide a mock that reports reduced motion:
+// jsdom also lacks animation frames, so framer-motion's AnimatePresence can
+// never complete an exit animation here — the instant-transition path is the
+// only one that can be exercised in CI (and it is the a11y-correct path,
+// TEST_SCENARIOS.md §1.10).
+if (typeof window !== 'undefined')
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: (query: string): MediaQueryList =>
+    ({
+      matches: query.includes('prefers-reduced-motion'),
+      media: query,
+      onchange: null,
+      addListener: vi.fn(), // deprecated API — kept for older libraries
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    }) as unknown as MediaQueryList,
+});
+
+afterEach(() => {
+  cleanup();
+});

package/src/domains/onboarding/theme/cn.ts

@@ -0,0 +1,10 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Class name composer — merges Tailwind utility classes safely.
+ * Single responsibility: build a className string without conflicts.
+ */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

package/src/domains/onboarding/theme/index.css

@@ -0,0 +1,131 @@
+/*
+ * web-onboarding styles.
+ *
+ * Isolation contract (see README "Styling"):
+ *  - NO Tailwind preflight. Host applications keep their own global reset;
+ *    this stylesheet must never change styles outside `.uob-flow`.
+ *  - A scoped reset restores the preflight invariants the library's utility
+ *    classes rely on (box-sizing, border-style, form font inheritance)
+ *    inside `.uob-flow` only.
+ *  - All design tokens are namespaced `--uob-*`. Rebrand by overriding them:
+ *      .uob-flow { --uob-primary-500: 34 197 94; }
+ *    RGB triplets (e.g. "99 102 241"), not hex — they compose with
+ *    `rgb(var(--uob-primary-500) / <alpha>)` and Tailwind `<alpha-value>`.
+ *  - OnboardingFlow renders the `.uob-flow` wrapper automatically.
+ */
+
+/* ------------------------------------------------------------------ */
+/* Design tokens (light defaults)                                      */
+/* ------------------------------------------------------------------ */
+
+.uob-flow {
+  --uob-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, sans-serif;
+
+  --uob-primary-50: 238 242 255;
+  --uob-primary-100: 224 231 255;
+  --uob-primary-500: 99 102 241;
+  --uob-primary-600: 79 70 229;
+  --uob-primary-700: 67 56 202;
+
+  --uob-surface: 255 255 255;
+  --uob-surface-muted: 249 250 251;
+  --uob-text-primary: 17 24 39;
+  --uob-text-muted: 107 114 128;
+  --uob-border: 229 231 235;
+
+  --uob-success: 16 185 129;
+  --uob-warning: 245 158 11;
+  --uob-error: 239 68 68;
+}
+
+@media (prefers-color-scheme: dark) {
+  .uob-flow {
+    --uob-surface: 17 24 39;
+    --uob-surface-muted: 31 41 55;
+    --uob-text-primary: 243 244 246;
+    --uob-text-muted: 156 163 175;
+    --uob-border: 55 65 81;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Scoped reset — restores preflight invariants inside `.uob-flow`     */
+/* only. Deliberately emitted BEFORE the utilities layer so utility    */
+/* classes always win on equal specificity.                            */
+/* ------------------------------------------------------------------ */
+
+.uob-flow,
+.uob-flow *,
+.uob-flow *::before,
+.uob-flow *::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: rgb(var(--uob-border));
+}
+
+.uob-flow h1,
+.uob-flow h2,
+.uob-flow h3,
+.uob-flow h4,
+.uob-flow h5,
+.uob-flow h6,
+.uob-flow p,
+.uob-flow figure,
+.uob-flow blockquote,
+.uob-flow pre {
+  margin: 0;
+}
+
+.uob-flow ol,
+.uob-flow ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.uob-flow button,
+.uob-flow input,
+.uob-flow optgroup,
+.uob-flow select,
+.uob-flow textarea {
+  font-family: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+.uob-flow button,
+.uob-flow [type='button'],
+.uob-flow [type='reset'],
+.uob-flow [type='submit'] {
+  -webkit-appearance: button;
+  background-color: transparent;
+  background-image: none;
+}
+
+.uob-flow progress {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.uob-flow img,
+.uob-flow svg,
+.uob-flow video,
+.uob-flow canvas {
+  display: block;
+  vertical-align: middle;
+}
+
+.uob-flow img,
+.uob-flow video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Utilities LAST — emitted in place, after the scoped reset. */
+@tailwind utilities;

package/src/domains/onboarding/theme/index.ts

@@ -0,0 +1,12 @@
+export {
+  spacing,
+  radius,
+  typography,
+  zIndex,
+  motion,
+  breakpoint,
+  colorCssVar,
+} from './tokens';
+export { cn } from './cn';
+
+export type { SpacingToken, RadiusToken, FontSizeToken } from './tokens';