@umituz/web-dashboard 6.0.0 → 6.2.0

package/src/domains/onboarding/predicates/icon-name-resolves.ts

@@ -0,0 +1,97 @@
+import type { LucideIcon } from 'lucide-react';
+import {
+  Activity,
+  AlertTriangle,
+  Apple,
+  Award,
+  Ban,
+  Bell,
+  BookOpen,
+  Camera,
+  Check,
+  CheckCircle2,
+  Download,
+  Dumbbell,
+  GraduationCap,
+  Headphones,
+  HeartPulse,
+  Image,
+  Infinity as InfinityIcon,
+  Lock,
+  MapPin,
+  MessageCircle,
+  Mic,
+  Moon,
+  Palette,
+  PenTool,
+  Play,
+  Rocket,
+  Rewind,
+  Share2,
+  Shield,
+  ShieldCheck,
+  Smile,
+  Sparkles,
+  Square,
+  Star,
+  Theater,
+  Tv,
+  Users,
+  X,
+  Zap,
+} from 'lucide-react';
+
+const ICON_REGISTRY: Readonly<Record<string, LucideIcon>> = {
+  Activity,
+  AlertTriangle,
+  Apple,
+  Award,
+  Ban,
+  Bell,
+  BookOpen,
+  Camera,
+  Check,
+  CheckCircle2,
+  Download,
+  Dumbbell,
+  GraduationCap,
+  Headphones,
+  HeartPulse,
+  Image,
+    Infinity: InfinityIcon,
+  Lock,
+  MapPin,
+  MessageCircle,
+  Mic,
+  Moon,
+  Palette,
+  PenTool,
+  Play,
+  Rocket,
+  Rewind,
+  Share2,
+  Shield,
+  ShieldCheck,
+  Smile,
+  Sparkles,
+  Square,
+  Star,
+  Theater,
+  Tv,
+  Users,
+  X,
+  Zap,
+};
+
+export function getRegisteredIconNames(): ReadonlyArray<string> {
+  return Object.keys(ICON_REGISTRY);
+}
+
+export function doesIconNameResolve(name: string | undefined): boolean {
+  return typeof name === 'string' && name in ICON_REGISTRY;
+}
+
+export function resolveIconByName(name: string | undefined): LucideIcon | null {
+  if (!doesIconNameResolve(name)) return null;
+  return ICON_REGISTRY[name as string];
+}

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

@@ -0,0 +1,26 @@
+export {
+  isPermissionGranted,
+  isPermissionDenied,
+  isPermissionPrompt,
+  isPermissionUnsupported,
+  isPermissionDecided,
+} from './permission-granted';
+export {
+  doesBrowserSupportNotifications,
+  doesBrowserSupportMediaCapture,
+  doesBrowserSupportGeolocation,
+  isRuntimeSupportMissing,
+} from './permission-supports';
+export { isLocalStorageAvailable } from './storage-available';
+export {
+  doesIconNameResolve,
+  resolveIconByName,
+  getRegisteredIconNames,
+} from './icon-name-resolves';
+export {
+  hasOnRequest,
+  hasOnAccept,
+  hasOnSignIn,
+  accountGateAllowsSkip,
+} from './has-handler';
+export { screenEmitsData } from './screen-emits-data';

package/src/domains/onboarding/predicates/permission-granted.ts

@@ -0,0 +1,21 @@
+import type { PermissionStatus } from '../types/screens';
+
+export function isPermissionGranted(status: PermissionStatus): boolean {
+  return status === 'granted';
+}
+
+export function isPermissionDenied(status: PermissionStatus): boolean {
+  return status === 'denied';
+}
+
+export function isPermissionPrompt(status: PermissionStatus): boolean {
+  return status === 'prompt';
+}
+
+export function isPermissionUnsupported(status: PermissionStatus): boolean {
+  return status === 'unsupported';
+}
+
+export function isPermissionDecided(status: PermissionStatus): boolean {
+  return status === 'granted' || status === 'denied';
+}

package/src/domains/onboarding/predicates/permission-supports.ts

@@ -0,0 +1,56 @@
+import type { PermissionType } from '../types/screens';
+
+declare const navigator: undefined | {
+  mediaDevices?: { getUserMedia?: (constraints: MediaStreamConstraints) => Promise<MediaStream> };
+  geolocation?: {
+    getCurrentPosition: (
+      success: (pos: GeolocationPosition) => void,
+      error?: (err: GeolocationPositionError) => void,
+      options?: PositionOptions,
+    ) => void;
+  };
+  permissions?: { query: (descriptor: { name: string }) => Promise<{ state: string }> };
+};
+
+function safeWindow(): (Window & typeof globalThis) | null {
+  return typeof window === 'undefined' ? null : (window as Window & typeof globalThis);
+}
+
+function safeNavigator(): typeof navigator | null {
+  if (typeof navigator === 'undefined') return null;
+  return navigator;
+}
+
+export function doesBrowserSupportNotifications(): boolean {
+  const win = safeWindow();
+  if (!win) return false;
+  return typeof win.Notification !== 'undefined';
+}
+
+export function doesBrowserSupportMediaCapture(): boolean {
+  const nav = safeNavigator();
+  if (!nav) return false;
+  return Boolean(nav.mediaDevices?.getUserMedia);
+}
+
+export function doesBrowserSupportGeolocation(): boolean {
+  const nav = safeNavigator();
+  if (!nav) return false;
+  return Boolean(nav.geolocation);
+}
+
+export function isRuntimeSupportMissing(permission: PermissionType): boolean {
+  switch (permission) {
+    case 'notifications':
+      return !doesBrowserSupportNotifications();
+    case 'camera':
+    case 'microphone':
+      return !doesBrowserSupportMediaCapture();
+    case 'location':
+      return !doesBrowserSupportGeolocation();
+    case 'photos':
+    case 'contacts':
+      return true;     default:
+      return true;
+  }
+}

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

@@ -0,0 +1,188 @@
+import { describe, it, expect } from 'vitest';
+import {
+  doesIconNameResolve,
+  getRegisteredIconNames,
+  resolveIconByName,
+} from './icon-name-resolves';
+import {
+  isPermissionDecided,
+  isPermissionDenied,
+  isPermissionGranted,
+  isPermissionPrompt,
+  isPermissionUnsupported,
+} from './permission-granted';
+import {
+  doesBrowserSupportGeolocation,
+  doesBrowserSupportMediaCapture,
+  doesBrowserSupportNotifications,
+  isRuntimeSupportMissing,
+} from './permission-supports';
+import { isLocalStorageAvailable } from './storage-available';
+import {
+  accountGateAllowsSkip,
+  hasOnAccept,
+  hasOnRequest,
+  hasOnSignIn,
+} from './has-handler';
+import { screenEmitsData } from './screen-emits-data';
+import type { OnboardingScreen } from '../types/screens';
+
+describe('icon-name-resolves (§24.4)', () => {
+  it('resolves registered names', () => {
+    expect(doesIconNameResolve('HeartPulse')).toBe(true);
+    expect(doesIconNameResolve('Sparkles')).toBe(true);
+        expect(resolveIconByName('Sparkles')).toBeTruthy();
+  });
+
+  it('does not resolve unknown, missing, or case-mismatched names', () => {
+    expect(doesIconNameResolve('NonExistentIcon')).toBe(false);
+    expect(doesIconNameResolve(undefined)).toBe(false);
+    expect(doesIconNameResolve('sparkles')).toBe(false);     expect(resolveIconByName('NonExistentIcon')).toBeNull();
+  });
+
+  it('resolves the reserved-word alias "Infinity"', () => {
+    expect(doesIconNameResolve('Infinity')).toBe(true);
+    expect(resolveIconByName('Infinity')).toBeTruthy();
+  });
+
+  it('resolves every icon used by the bundled templates — including the video set', () => {
+        const templateIcons = [
+      'Activity', 'Apple', 'Award', 'Ban', 'Bell', 'BookOpen', 'Camera', 'Check',
+      'CheckCircle2', 'Download', 'Dumbbell', 'GraduationCap', 'Headphones',
+      'HeartPulse', 'Image', 'Infinity', 'Lock', 'MapPin', 'MessageCircle',
+      'Mic', 'Moon', 'Palette', 'PenTool', 'Play', 'Rocket', 'Rewind', 'Share2',
+      'Shield', 'ShieldCheck', 'Smile', 'Sparkles', 'Square', 'Star', 'Theater',
+      'Tv', 'Users', 'X', 'Zap',
+    ];
+    for (const name of templateIcons) {
+      expect(doesIconNameResolve(name), `expected "${name}" to resolve`).toBe(true);
+    }
+  });
+
+  it('keeps the registry curated (each name maps to a component)', () => {
+    const names = getRegisteredIconNames();
+    expect(names.length).toBeGreaterThan(30);
+    expect(names.length).toBeLessThan(60);     for (const name of names) {
+      expect(resolveIconByName(name), `icon "${name}"`).toBeTruthy();
+    }
+  });
+});
+
+describe('permission-granted (§24.1)', () => {
+  it('classifies statuses', () => {
+    expect(isPermissionGranted('granted')).toBe(true);
+    expect(isPermissionGranted('prompt')).toBe(false);
+    expect(isPermissionDenied('denied')).toBe(true);
+    expect(isPermissionPrompt('prompt')).toBe(true);
+    expect(isPermissionDecided('granted')).toBe(true);
+    expect(isPermissionDecided('denied')).toBe(true);
+    expect(isPermissionDecided('prompt')).toBe(false);
+    expect(isPermissionUnsupported('unsupported')).toBe(true);
+    expect(isPermissionUnsupported('granted')).toBe(false);
+  });
+});
+
+describe('permission-supports (§24.2)', () => {
+  it('reports support from the live navigator/window', () => {
+                expect(doesBrowserSupportMediaCapture()).toBe(
+      Boolean((globalThis as { navigator?: { mediaDevices?: { getUserMedia?: unknown } } })
+        .navigator?.mediaDevices?.getUserMedia),
+    );
+    expect(doesBrowserSupportGeolocation()).toBe(
+      Boolean(
+        (globalThis as { navigator?: { geolocation?: unknown } }).navigator?.geolocation,
+      ),
+    );
+  });
+
+  it('reports notification support from the window object', () => {
+    expect(doesBrowserSupportNotifications()).toBe(
+      typeof (globalThis as { Notification?: unknown }).Notification !== 'undefined',
+    );
+  });
+
+  it('treats photos/contacts as unsupported (no web-standard API)', () => {
+    expect(isRuntimeSupportMissing('photos')).toBe(true);
+    expect(isRuntimeSupportMissing('contacts')).toBe(true);
+  });
+});
+
+describe('storage-available (§24.3)', () => {
+  it('works in the jsdom browser environment', () => {
+    expect(isLocalStorageAvailable()).toBe(true);
+  });
+
+  it('returns false when storage access throws (e.g. blocked cookies)', () => {
+    const original = window.localStorage;
+        Object.defineProperty(window, 'localStorage', {
+      configurable: true,
+      get() {
+        throw new DOMException('Access is denied for this document', 'SecurityError');
+      },
+    });
+    try {
+      expect(isLocalStorageAvailable()).toBe(false);
+    } finally {
+      Object.defineProperty(window, 'localStorage', {
+        configurable: true,
+        value: original,
+        writable: true,
+      });
+    }
+  });
+});
+
+describe('has-handler (§24.5)', () => {
+  const paywall = {
+    id: 'w',
+    type: 'paywall',
+    price: '$1',
+    trialDays: 7,
+  } as Parameters<typeof hasOnAccept>[0];
+
+  it('detects usable callbacks', () => {
+    expect(hasOnAccept(paywall)).toBe(false);
+    expect(hasOnAccept({ ...paywall, onAccept: async () => ({ accepted: true, trialStarted: true }) })).toBe(true);
+
+    expect(
+      hasOnRequest({
+        permission: 'camera',
+        description: 'd',
+        benefits: [],
+      } as unknown as Parameters<typeof hasOnRequest>[0]),
+    ).toBe(false);
+
+    expect(
+      hasOnSignIn({
+        optional: false,
+        onSignIn: () => Promise.resolve({ signedIn: true }),
+      } as unknown as Parameters<typeof hasOnSignIn>[0]),
+    ).toBe(true);
+  });
+
+  it('allows skip only on optional account gates', () => {
+    expect(
+      accountGateAllowsSkip({ optional: true } as unknown as Parameters<
+        typeof accountGateAllowsSkip
+      >[0]),
+    ).toBe(true);
+    expect(
+      accountGateAllowsSkip({ optional: false } as unknown as Parameters<
+        typeof accountGateAllowsSkip
+      >[0]),
+    ).toBe(false);
+  });
+});
+
+describe('screen-emits-data (§24.6)', () => {
+  it('marks view-only screens as non-emitting', () => {
+    expect(screenEmitsData({ id: 'a', type: 'welcome' } as OnboardingScreen)).toBe(false);
+    expect(screenEmitsData({ id: 'v', type: 'value-delivery' } as OnboardingScreen)).toBe(false);
+    expect(screenEmitsData({ id: 's', type: 'social-proof' } as OnboardingScreen)).toBe(false);
+  });
+
+  it('marks data-collecting screens as emitting', () => {
+    expect(screenEmitsData({ id: 'g', type: 'goal-question' } as OnboardingScreen)).toBe(true);
+    expect(screenEmitsData({ id: 'p', type: 'preferences' } as OnboardingScreen)).toBe(true);
+  });
+});

package/src/domains/onboarding/predicates/screen-emits-data.ts

@@ -0,0 +1,13 @@
+import type { OnboardingScreen } from '../types/screens';
+
+const VIEW_ONLY_SCREEN_TYPES: ReadonlySet<OnboardingScreen['type']> = new Set([
+  'welcome',
+  'social-proof',
+  'comparison',
+  'value-delivery',
+  'personalized-solution',
+]);
+
+export function screenEmitsData(screen: OnboardingScreen): boolean {
+  return !VIEW_ONLY_SCREEN_TYPES.has(screen.type);
+}

package/src/domains/onboarding/predicates/storage-available.ts

@@ -0,0 +1,14 @@
+const PROBE_KEY = '@umituz/web-onboarding:probe';
+const PROBE_VALUE = '1';
+
+export function isLocalStorageAvailable(): boolean {
+  if (typeof window === 'undefined') return false;
+  try {
+    const probe = window.localStorage;
+    probe.setItem(PROBE_KEY, PROBE_VALUE);
+    probe.removeItem(PROBE_KEY);
+    return true;
+  } catch {
+    return false;
+  }
+}

package/src/domains/onboarding/templates/TemplateDemoFallback.tsx

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+import { Button } from '@umituz/web-design-system/atoms';
+import { Sparkles } from 'lucide-react';
+import { cn } from '@umituz/web-design-system/utils/cn';
+import type { DemoConfig, OnboardingScreen } from '../types/screens';
+
+export interface TemplateDemoResult {
+  variant: string;
+  palette: string[];
+  generatedAt: number;
+}
+
+function TemplateDemoFallback({ onSave }: { onSave: (result: TemplateDemoResult) => void }) {
+  const palettes: ReadonlyArray<{ variant: string; palette: string[] }> = [
+    { variant: 'Minimal', palette: ['#0F172A', '#475569', '#94A3B8', '#F1F5F9', '#FFFFFF'] },
+    { variant: 'Bold', palette: ['#7C3AED', '#EC4899', '#F59E0B', '#10B981', '#0EA5E9'] },
+    { variant: 'Retro', palette: ['#92400E', '#B45309', '#D97706', '#FCD34D', '#FEF3C7'] },
+    { variant: 'Playful', palette: ['#F472B6', '#A78BFA', '#60A9FA', '#34D399', '#FBBF24'] },
+  ];
+
+  const [activeIdx, setActiveIdx] = useState(0);
+  const active = palettes[activeIdx];
+
+  return (
+    <div className="udb-onb-question__body">
+      <div className="udb-onb-palettes">
+        {palettes.map((p, i) => (
+          <button
+            key={p.variant}
+            type="button"
+            onClick={() => setActiveIdx(i)}
+            className={cn('udb-onb-palette', i === activeIdx && 'udb-onb-palette--active')}
+          >
+            <div className="udb-onb-palette__strip">
+              {p.palette.map((c) => (
+                <span key={c} className="udb-onb-palette__chip" style={{ background: c }} />
+              ))}
+            </div>
+            <span className="udb-onb-palette__name">{p.variant}</span>
+          </button>
+        ))}
+      </div>
+      <div className="udb-onb-palette-preview">
+        <div className="udb-onb-palette__strip udb-onb-palette__strip--lg">
+          {active.palette.map((c) => (
+            <span key={c} className="udb-onb-palette__chip" style={{ background: c }} />
+          ))}
+        </div>
+        <p className="udb-onb-lead">
+          Preview: <strong>{active.variant}</strong> palette
+        </p>
+      </div>
+      <Button
+        variant="primary"
+        size="sm"
+        icon={<Sparkles className="udb-onb-icon--sm" />}
+        onClick={() =>
+          onSave({
+            variant: active.variant,
+            palette: [...active.palette],
+            generatedAt: Date.now(),
+          })
+        }
+      >
+        Save this style
+      </Button>
+    </div>
+  );
+}
+
+const fallbackDemo: DemoConfig = {
+  component: TemplateDemoFallback as React.ComponentType<Record<string, unknown>>,
+  onSave: () => undefined,
+};
+
+const fallbackResult: TemplateDemoResult = {
+  variant: 'Minimal',
+  palette: ['#0F172A', '#475569', '#94A3B8', '#F1F5F9', '#FFFFFF'],
+  generatedAt: 0,
+};
+
+export function withDefaultDemo(screen: OnboardingScreen, fallback: DemoConfig = fallbackDemo): OnboardingScreen {
+  if (screen.type !== 'app-demo') return screen;
+  return { ...screen, demo: { ...fallback, ...screen.demo } };
+}
+
+export function defaultDemoResult(): TemplateDemoResult {
+  return { ...fallbackResult };
+}
+
+export { TemplateDemoFallback };
+export type { DemoConfig };

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

@@ -0,0 +1,71 @@
+import type { OnboardingConfig } from '../types/config';
+import type { OnboardingScreen } from '../types/screens';
+import { withDefaultDemo, defaultDemoResult } from './TemplateDemoFallback';
+
+const baseScreens: OnboardingScreen[] = [
+  {
+    id: 'welcome',
+    type: 'welcome',
+    title: 'Make something beautiful in 60 seconds',
+    subtitle: 'No design skills. No learning curve. Just create.',
+    cta: 'Try the demo',
+    heroIconName: 'Sparkles',
+    highlight: 'Live demo',
+  },
+  {
+    id: 'style',
+    type: 'goal-question',
+    question: 'Pick a style that feels like you',
+    multiSelect: true,
+    options: [
+      { id: 'minimal', label: 'Minimal', iconName: 'Square' },
+      { id: 'bold', label: 'Bold colors', iconName: 'Zap' },
+      { id: 'retro', label: 'Retro', iconName: 'Rewind' },
+      { id: 'playful', label: 'Playful', iconName: 'Smile' },
+    ],
+    onChange: () => undefined,
+    cta: 'Continue',
+  },
+  {
+    id: 'demo',
+    type: 'app-demo',
+    title: 'Your turn — pick a palette',
+    demo: {
+            component: () => null,
+      onSave: () => undefined,
+    },
+  },
+  {
+    id: 'value',
+    type: 'value-delivery',
+    title: 'You made this!',
+    result: defaultDemoResult(),
+  },
+  {
+    id: 'paywall',
+    type: 'paywall',
+    title: 'Keep creating',
+    subtitle: 'Unlimited generations, all styles, no watermarks.',
+    price: '$4.99 / week',
+    trialDays: 3,
+    cta: 'Start free trial',
+    secondaryCta: 'Not now',
+    features: [
+      { iconName: 'Infinity', text: 'Unlimited creations', highlighted: true },
+      { iconName: 'Palette', text: 'All styles unlocked' },
+      { iconName: 'Download', text: 'High-res export' },
+      { iconName: 'Share2', text: 'Share anywhere' },
+    ],
+    onSecondaryCta: () => undefined,
+    onAccept: async () => ({ accepted: true, trialStarted: true }),
+  },
+];
+
+const screens = baseScreens.map((s) => withDefaultDemo(s));
+
+export const artOnboardingTemplate: OnboardingConfig = {
+  category: 'art',
+  screens,
+  onSkip: () => undefined,
+  onComplete: () => undefined,
+};

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

@@ -0,0 +1,92 @@
+import type { OnboardingConfig } from '../types/config';
+import type { OnboardingScreen } from '../types/screens';
+
+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';