@umituz/web-dashboard 6.0.0 → 6.2.0

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

@@ -0,0 +1,201 @@
+import type { OnboardingConfig } from '../types/config';
+import type { OnboardingScreen } from '../types/screens';
+import { withDefaultDemo, defaultDemoResult } from './TemplateDemoFallback';
+
+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 }),
+  },
+];
+
+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,95 @@
+import type { OnboardingConfig } from '../types/config';
+import type { OnboardingScreen } from '../types/screens';
+
+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,23 @@
+import { afterEach, vi } from 'vitest';
+import { cleanup } from '@testing-library/react';
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+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(),       removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    }) as unknown as MediaQueryList,
+});
+
+afterEach(() => {
+  cleanup();
+});

package/src/domains/onboarding/types/config.ts

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+import type { DemoConfig, OnboardingScreen, PaywallScreenConfig } from './screens';
+import type { OnboardingLabels } from './labels';
+
+export type { OnboardingLabels } from './labels';
+
+export type OnboardingCategory =
+  | 'health'
+  | 'art'
+  | 'video'
+  | 'security'
+  | 'education'
+  | 'platform'
+  | 'lifestyle';
+
+export type AnalyticsProvider = 'google-analytics' | 'amplitude' | 'mixpanel' | 'custom';
+
+export interface AnalyticsConfig {
+  trackEvents: boolean;
+  provider?: AnalyticsProvider;
+    customTracker?: (event: OnboardingAnalyticsEvent) => void;
+}
+
+export type OnboardingAnalyticsEvent =
+  | { name: 'onboarding_started'; category: OnboardingCategory; timestamp: number }
+  | { name: 'onboarding_step_completed'; stepId: string; stepType: string; index: number; timestamp: number }
+  | { name: 'onboarding_step_skipped'; stepId: string; index: number; timestamp: number }
+  | { name: 'onboarding_completed'; durationMs: number; timestamp: number }
+  | { name: 'onboarding_abandoned'; lastStepId: string; durationMs: number; timestamp: number }
+  | { name: 'paywall_viewed'; stepId: string; timestamp: number }
+  | { name: 'paywall_accepted'; stepId: string; price: string; timestamp: number }
+  | { name: 'paywall_declined'; stepId: string; timestamp: number }
+  | { name: 'permission_requested'; permission: string; stepId: string; timestamp: number }
+  | { name: 'permission_granted'; permission: string; stepId: string; timestamp: number }
+  | { name: 'permission_denied'; permission: string; stepId: string; timestamp: number };
+
+export interface OnboardingConfig {
+  category: OnboardingCategory;
+  screens: ReadonlyArray<OnboardingScreen>;
+  demo?: DemoConfig;
+  paywall?: PaywallScreenConfig;
+  analytics?: AnalyticsConfig;
+    labels?: Partial<OnboardingLabels>;
+    locale?: string;
+    headerSlot?: ReactNode;
+    footerSlot?: ReactNode;
+  onComplete?: (data: OnboardingResult) => void;
+  onSkip?: () => void;
+    storageKey?: string;
+}
+
+export interface OnboardingResult {
+  completedSteps: ReadonlyArray<string>;
+    collected: Record<string, unknown>;
+  durationMs: number;
+  finishedAt: Date;
+}

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

@@ -0,0 +1,10 @@
+export type { OnboardingScreen, OnboardingScreenType, OnboardingOption } from './screens';
+export type {
+  OnboardingConfig,
+  OnboardingCategory,
+  AnalyticsConfig,
+  AnalyticsProvider,
+  OnboardingAnalyticsEvent,
+  OnboardingResult,
+  OnboardingLabels,
+} from './config';

package/src/domains/onboarding/types/labels.ts

@@ -0,0 +1,49 @@
+export interface OnboardingLabels {
+    continueAction: string;
+    back: string;
+    skip: string;
+    loading: string;
+    stepOfPattern: string;
+    countOfPattern: string;
+
+    selectAllThatApply: string;
+  selectOne: string;
+    pickUpToPattern: string;
+    pickTheOne: string;
+    tailorExperience: string;
+
+    agree: string;
+  disagree: string;
+    swipeHint: string;
+    allDone: string;
+
+    withoutUs: string;
+  withUs: string;
+
+    previous: string;
+  nextAction: string;
+
+    continueWithResult: string;
+
+    allowAccess: string;
+  permissionRequestFailed: string;
+
+    continueWithEmail: string;
+  continueWithGoogle: string;
+  continueWithApple: string;
+  continueWithGitHub: string;
+  skipForNow: string;
+  signInFailed: string;
+
+    couldNotStartTrial: string;
+    trialDaysPattern: string;
+    trialIntroPattern: string;
+    cancelAnytimeNote: string;
+
+    share: string;
+  copied: string;
+
+    somethingWentWrong: string;
+  unexpectedError: string;
+  tryAgain: string;
+}

package/src/domains/onboarding/types/screens.ts

@@ -0,0 +1,185 @@
+import type { ReactNode } from 'react';
+
+export interface BaseScreen<T extends string, D = unknown> {
+  id: string;
+  type: T;
+  title?: string;
+  subtitle?: string;
+  cta?: string;
+  onCta?: () => void;
+  data?: D;
+}
+
+export interface OnboardingOption {
+  id: string;
+  label: string;
+  description?: string;
+  iconName?: string;   image?: string;
+}
+
+export type WelcomeScreenConfig = BaseScreen<'welcome'> & {
+  heroIconName?: string;
+  highlight?: string;
+};
+
+export type GoalQuestionScreenConfig = BaseScreen<'goal-question', string[]> & {
+  question: string;
+  options: OnboardingOption[];
+  multiSelect?: boolean;
+  onChange: (selectedIds: string[]) => void;
+};
+
+export type PainPointsScreenConfig = BaseScreen<'pain-points', string[]> & {
+  title: string;
+  painPoints: OnboardingOption[];
+  multiSelect?: boolean;
+  maxSelect?: number;
+  onChange: (selectedIds: string[]) => void;
+};
+
+export type SocialProofScreenConfig = BaseScreen<'social-proof'> & {
+  testimonials: ReadonlyArray<{
+    name: string;
+    role: string;
+    content: string;
+    avatar?: string;
+    rating?: number;
+  }>;
+};
+
+export type TinderCardsScreenConfig = BaseScreen<'tinder-cards', string[]> & {
+  statements: ReadonlyArray<{
+    id: string;
+    text: string;
+    category: string;
+  }>;
+  onChange: (likedIds: string[]) => void;
+};
+
+export type PersonalizedSolutionScreenConfig = BaseScreen<'personalized-solution'> & {
+  solutions: ReadonlyArray<{
+    painPointId: string;
+    solution: string;
+    statistic?: string;
+  }>;
+  selectedPainPointIds: ReadonlyArray<string>;
+};
+
+export type ComparisonScreenConfig = BaseScreen<'comparison'> & {
+  before: ReadonlyArray<string>;
+  after: ReadonlyArray<string>;
+};
+
+export type PreferenceItem = {
+  id: string;
+  label: string;
+  type: 'select' | 'multi-select' | 'toggle' | 'slider';
+  options?: OnboardingOption[];
+  min?: number;
+  max?: number;
+  defaultValue?: string | number | string[] | boolean;
+};
+
+export type PreferencesScreenConfig = BaseScreen<
+  'preferences',
+  Record<string, string | number | string[] | boolean>
+> & {
+  title: string;
+  preferences: ReadonlyArray<PreferenceItem>;
+  onChange: (values: Record<string, string | number | string[] | boolean>) => void;
+};
+
+export type PermissionType = 'camera' | 'microphone' | 'location' | 'notifications' | 'photos' | 'contacts';
+
+export type PermissionPrimingScreenConfig = BaseScreen<'permission-priming', PermissionStatus> & {
+  permission: PermissionType;
+  description: string;
+  benefits: ReadonlyArray<string>;
+  iconName?: string;
+  onRequest: () => Promise<PermissionStatus>;
+};
+
+export type PermissionStatus = 'granted' | 'denied' | 'prompt' | 'unsupported';
+
+export type ProcessingScreenConfig = BaseScreen<'processing'> & {
+  title: string;
+  steps: ReadonlyArray<string>;
+  durationMs?: number;
+  onComplete: () => void;
+};
+
+export type DemoConfig<TProps = Record<string, unknown>, TResult = unknown> = {
+  component: React.ComponentType<TProps>;
+  props?: TProps;
+  onSave: (result: TResult) => void;
+  durationMs?: number;
+};
+
+export type AppDemoScreenConfig = BaseScreen<'app-demo', unknown> & {
+  demo: DemoConfig;
+};
+
+export type ValueDeliveryScreenConfig<TResult = unknown> = BaseScreen<
+  'value-delivery',
+  TResult
+> & {
+  title: string;
+  result: TResult;
+    shareConfig?: {
+    text: string;
+    url?: string;
+  };
+};
+
+export type SignInMethod = 'email' | 'google' | 'apple' | 'github';
+
+export type AccountGateScreenConfig = BaseScreen<'account-gate', { signedIn: boolean; method?: SignInMethod }> & {
+  optional: boolean;
+  signInMethod?: SignInMethod;
+  skipText?: string;
+  onSignIn: (method: SignInMethod) => Promise<{ signedIn: boolean; method?: SignInMethod }>;
+};
+
+export type PaywallFeature = {
+  iconName: string;   text: string;
+  highlighted?: boolean;
+};
+
+export type PaywallScreenConfig = BaseScreen<
+  'paywall',
+  { accepted: boolean; trialStarted: boolean }
+> & {
+  subtitle: string;
+  price: string;
+  trialDays: number;
+  trialPrice?: string;
+  features: ReadonlyArray<PaywallFeature>;
+  socialProof?: {
+    text: string;
+    count: number;
+  };
+  cta: string;
+  secondaryCta?: string;
+  onSecondaryCta?: () => void;
+  onAccept: () => Promise<{ accepted: boolean; trialStarted: boolean }>;
+};
+
+export type OnboardingScreen =
+  | WelcomeScreenConfig
+  | GoalQuestionScreenConfig
+  | PainPointsScreenConfig
+  | SocialProofScreenConfig
+  | TinderCardsScreenConfig
+  | PersonalizedSolutionScreenConfig
+  | ComparisonScreenConfig
+  | PreferencesScreenConfig
+  | PermissionPrimingScreenConfig
+  | ProcessingScreenConfig
+  | AppDemoScreenConfig
+  | ValueDeliveryScreenConfig
+  | AccountGateScreenConfig
+  | PaywallScreenConfig;
+
+export type OnboardingScreenType = OnboardingScreen['type'];
+
+export type { ReactNode };