@umituz/web-dashboard 2.0.6 → 2.0.8

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

@@ -0,0 +1,214 @@
+/**
+ * Onboarding Types
+ *
+ * Type definitions for onboarding system
+ */
+
+import type { LucideIcon } from "lucide-react";
+import type { ComponentType, ReactElement, ReactNode } from "react";
+
+/**
+ * User type option for first step
+ */
+export interface UserTypeOption {
+  /** Unique identifier */
+  id: string;
+  /** Display label */
+  label: string;
+  /** Description text */
+  description: string;
+  /** Icon component */
+  icon?: LucideIcon;
+  /** Badge text */
+  badge?: string;
+}
+
+/**
+ * Platform connection option
+ */
+export interface PlatformOption {
+  /** Unique identifier */
+  id: string;
+  /** Display name */
+  name: string;
+  /** Icon/emoji */
+  icon: string;
+  /** Color theme */
+  color?: string;
+  /** Connection status */
+  connected?: boolean;
+}
+
+/**
+ * Plan option for billing step
+ */
+export interface PlanOption {
+  /** Unique identifier */
+  id: string;
+  /** Plan name */
+  name: string;
+  /** Badge text */
+  badge?: string;
+  /** Badge color class */
+  badgeColor?: string;
+  /** Description text */
+  description: string;
+  /** Monthly price */
+  price: number;
+  /** Features list */
+  features: (string | { text: string; bold?: boolean })[];
+  /** Highlight style */
+  highlight?: boolean;
+}
+
+/**
+ * Props for onboarding step components
+ */
+export interface OnboardingStepContentProps {
+  /** Current onboarding state */
+  state: OnboardingState;
+  /** Update state function */
+  updateState: (updates: Partial<OnboardingState>) => void;
+  /** Go to next step */
+  goToNext: () => void;
+  /** Go to previous step */
+  goToPrev: () => void;
+  /** Go to specific step */
+  goToStep: (step: number) => void;
+  /** Onboarding configuration */
+  config: OnboardingConfig;
+}
+
+/**
+ * Onboarding step configuration
+ */
+export interface OnboardingStep {
+  /** Step identifier */
+  id: string;
+  /** Step number */
+  order: number;
+  /** Step title */
+  title: string;
+  /** Step description */
+  description?: string;
+  /** Custom component - either a function component with props or a direct React node */
+  component?: ComponentType<OnboardingStepContentProps> | ReactElement;
+  /** Whether this step can be skipped */
+  skippable?: boolean;
+  /** Validation function */
+  validate?: (data: OnboardingState) => boolean;
+}
+
+/**
+ * Onboarding configuration
+ */
+export interface OnboardingConfig {
+  /** Brand/application name */
+  brandName: string;
+  /** Brand tagline */
+  brandTagline?: string;
+  /** Onboarding steps */
+  steps: OnboardingStep[];
+  /** Route to navigate after completion */
+  completeRoute: string;
+  /** Route to navigate on cancel */
+  cancelRoute?: string;
+  /** Allow skipping steps */
+  allowSkip?: boolean;
+  /** Show progress indicator */
+  showProgress?: boolean;
+  /** Enable user menu in header */
+  showUserMenu?: boolean;
+}
+
+/**
+ * Onboarding state
+ */
+export interface OnboardingState extends Record<string, unknown> {
+  /** Current step number */
+  currentStep: number;
+  /** Selected user type */
+  selectedUserType?: string;
+  /** Has mobile app */
+  hasMobileApp?: boolean;
+  /** Has web app */
+  hasWebApp?: boolean;
+  /** Connected platform IDs */
+  connectedPlatforms: string[];
+  /** Selected plan ID */
+  selectedPlan?: string;
+  /** Billing cycle */
+  billingCycle: "monthly" | "yearly";
+  /** Additional step data */
+  stepData: Record<string, unknown>;
+}
+
+/**
+ * Onboarding actions
+ */
+export interface OnboardingActions {
+  /** Go to next step */
+  goToNext: () => void;
+  /** Go to previous step */
+  goToPrev: () => void;
+  /** Go to specific step */
+  goToStep: (step: number) => void;
+  /** Update state */
+  updateState: (updates: Partial<OnboardingState>) => void;
+  /** Complete onboarding */
+  complete: () => Promise<void>;
+  /** Cancel onboarding */
+  cancel: () => void;
+}
+
+/**
+ * Onboarding wizard props
+ */
+export interface OnboardingWizardProps {
+  /** Onboarding configuration */
+  config: OnboardingConfig;
+  /** Initial state */
+  initialState?: Partial<OnboardingState>;
+  /** Completion callback */
+  onComplete?: (data: OnboardingState) => Promise<void>;
+  /** Cancel callback */
+  onCancel?: () => void;
+}
+
+/**
+ * Step progress props
+ */
+export interface StepProgressProps {
+  /** Current step number */
+  currentStep: number;
+  /** Total number of steps */
+  totalSteps: number;
+  /** Completed steps */
+  completedSteps?: number[];
+}
+
+/**
+ * Step navigation props
+ */
+export interface StepNavigationProps {
+  /** Current step number */
+  currentStep: number;
+  /** Total number of steps */
+  totalSteps: number;
+  /** Can proceed to next step */
+  canGoNext: boolean;
+  /** Is saving/completing */
+  isSaving?: boolean;
+  /** Next button label */
+  nextLabel?: string;
+  /** Previous button label */
+  prevLabel?: string;
+  /** On next */
+  onNext: () => void;
+  /** On previous */
+  onPrev: () => void;
+  /** Allow skipping */
+  allowSkip?: boolean;
+  /** On skip */
+  onSkip?: () => void;
+}

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

@@ -0,0 +1,15 @@
+/**
+ * Onboarding Utils Export
+ */
+
+export {
+  validateStep,
+  getStepTitle,
+  getStepDescription,
+  calculateProgress,
+  getCompletedSteps,
+  formatOnboardingData,
+  generateOnboardingEvent,
+  isValidEmail,
+  isValidPassword,
+} from './onboarding';

package/src/domains/onboarding/utils/onboarding.ts

@@ -0,0 +1,166 @@
+/**
+ * Onboarding Utilities
+ *
+ * Utility functions for onboarding operations
+ */
+
+import type { OnboardingState, OnboardingConfig } from "../types/onboarding";
+
+/**
+ * Validate onboarding step
+ *
+ * @param state - Current onboarding state
+ * @param stepNumber - Step number to validate
+ * @param config - Onboarding configuration
+ * @returns Whether the step is valid
+ */
+export function validateStep(
+  state: OnboardingState,
+  stepNumber: number,
+  config: OnboardingConfig
+): boolean {
+  const stepConfig = config.steps[stepNumber - 1];
+
+  if (stepConfig?.validate) {
+    return stepConfig.validate(state);
+  }
+
+  // Default validations
+  switch (stepNumber) {
+    case 1:
+      // User type step
+      return !!state.selectedUserType;
+
+    case 2:
+      // App focus step
+      return !!(state.hasMobileApp || state.hasWebApp);
+
+    case 3:
+      // Platforms step
+      return state.connectedPlatforms.length > 0;
+
+    case 4:
+      // Plan step
+      return !!state.selectedPlan;
+
+    default:
+      return true;
+  }
+}
+
+/**
+ * Get step title
+ *
+ * @param stepNumber - Step number
+ * @param config - Onboarding configuration
+ * @returns Step title
+ */
+export function getStepTitle(stepNumber: number, config: OnboardingConfig): string {
+  const stepConfig = config.steps[stepNumber - 1];
+  return stepConfig?.title || `Step ${stepNumber}`;
+}
+
+/**
+ * Get step description
+ *
+ * @param stepNumber - Step number
+ * @param config - Onboarding configuration
+ * @returns Step description or undefined
+ */
+export function getStepDescription(stepNumber: number, config: OnboardingConfig): string | undefined {
+  const stepConfig = config.steps[stepNumber - 1];
+  return stepConfig?.description;
+}
+
+/**
+ * Calculate onboarding progress
+ *
+ * @param currentStep - Current step number
+ * @param totalSteps - Total number of steps
+ * @returns Progress percentage (0-100)
+ */
+export function calculateProgress(currentStep: number, totalSteps: number): number {
+  return Math.min((currentStep / totalSteps) * 100, 100);
+}
+
+/**
+ * Get completed steps
+ *
+ * @param currentStep - Current step number
+ * @returns Array of completed step numbers
+ */
+export function getCompletedSteps(currentStep: number): number[] {
+  return Array.from({ length: currentStep - 1 }, (_, i) => i + 1);
+}
+
+/**
+ * Format onboarding data for API submission
+ *
+ * @param state - Onboarding state
+ * @param userId - User ID
+ * @returns Formatted data object
+ */
+export function formatOnboardingData(state: OnboardingState, userId?: string) {
+  return {
+    userId,
+    userType: state.selectedUserType,
+    hasMobileApp: state.hasMobileApp,
+    hasWebApp: state.hasWebApp,
+    connectedPlatforms: state.connectedPlatforms,
+    selectedPlan: state.selectedPlan,
+    billingCycle: state.billingCycle,
+    stepData: state.stepData,
+    completedAt: new Date().toISOString(),
+  };
+}
+
+/**
+ * Generate onboarding analytics event
+ *
+ * @param event - Event name
+ * @param state - Onboarding state
+ * @param additionalData - Additional event data
+ * @returns Analytics event object
+ */
+export function generateOnboardingEvent(
+  event: string,
+  state: OnboardingState,
+  additionalData?: Record<string, unknown>
+) {
+  return {
+    event,
+    properties: {
+      currentStep: state.currentStep,
+      userType: state.selectedUserType,
+      hasMobileApp: state.hasMobileApp,
+      hasWebApp: state.hasWebApp,
+      platformCount: state.connectedPlatforms.length,
+      selectedPlan: state.selectedPlan,
+      billingCycle: state.billingCycle,
+      ...additionalData,
+    },
+    timestamp: new Date().toISOString(),
+  };
+}
+
+/**
+ * Validate email format
+ *
+ * @param email - Email address
+ * @returns Whether email is valid
+ */
+export function isValidEmail(email: string): boolean {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+}
+
+/**
+ * Validate password strength
+ *
+ * @param password - Password
+ * @param minLength - Minimum length (default: 8)
+ * @returns Whether password meets requirements
+ */
+export function isValidPassword(password: string, minLength: number = 8): boolean {
+  return password.length >= minLength;
+}

package/src/domains/settings/components/SettingsLayout.tsx

@@ -0,0 +1,144 @@
+import { useState } from "react";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
+import { SettingsSection } from "./SettingsSection";
+import type { SettingsConfig } from "../types/settings";
+import { Skeleton } from "@umituz/web-design-system/atoms";
+import { ChevronLeft, Menu } from "lucide-react";
+import { Button } from "@umituz/web-design-system/atoms";
+
+interface SettingsLayoutProps {
+  /** Settings configuration */
+  config: SettingsConfig;
+}
+
+/**
+ * Settings Layout Component
+ *
+ * Main layout wrapper for settings pages.
+ * Provides sidebar navigation and content area.
+ *
+ * @param props - Settings layout props
+ */
+export const SettingsLayout = ({
+  config,
+}: SettingsLayoutProps) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [collapsed, setCollapsed] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  // Simulate loading on route change
+  useState(() => {
+    setLoading(true);
+    const timer = setTimeout(() => setLoading(false), 200);
+    return () => clearTimeout(timer);
+  });
+
+  const handleNavigate = (path: string) => {
+    navigate(path);
+    setMobileOpen(false);
+  };
+
+  return (
+    <div className="flex h-screen w-full bg-background font-sans">
+      {/* Desktop Sidebar */}
+      <aside
+        className={`hidden md:flex flex-col shrink-0 border-r border-border bg-card transition-all duration-300 ${
+          collapsed ? "w-16" : "w-64"
+        }`}
+      >
+        <div className="flex h-14 items-center justify-between border-b border-border px-4">
+          {!collapsed && (
+            <h2 className="text-lg font-semibold text-foreground">
+              {config.brandName || "Settings"}
+            </h2>
+          )}
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setCollapsed(!collapsed)}
+            className="ml-auto"
+          >
+            {collapsed ? <Menu className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
+          </Button>
+        </div>
+
+        <nav className="flex-1 overflow-y-auto p-2">
+          {config.sections.map((section) => (
+            <SettingsSection
+              key={section.key}
+              section={section}
+              currentPath={location.pathname}
+              onNavigate={handleNavigate}
+              collapsed={collapsed}
+            />
+          ))}
+        </nav>
+      </aside>
+
+      {/* Mobile Menu Overlay */}
+      {mobileOpen && (
+        <div className="fixed inset-0 z-50 md:hidden">
+          <div
+            className="absolute inset-0 bg-background/80 backdrop-blur-sm"
+            onClick={() => setMobileOpen(false)}
+          />
+          <aside className="absolute left-0 top-0 h-full w-64 border-r border-border bg-card shadow-xl">
+            <div className="flex h-14 items-center justify-between border-b border-border px-4">
+              <h2 className="text-lg font-semibold text-foreground">
+                {config.brandName || "Settings"}
+              </h2>
+              <Button variant="ghost" size="icon" onClick={() => setMobileOpen(false)}>
+                <Menu className="h-4 w-4" />
+              </Button>
+            </div>
+
+            <nav className="flex-1 overflow-y-auto p-2">
+              {config.sections.map((section) => (
+                <SettingsSection
+                  key={section.key}
+                  section={section}
+                  currentPath={location.pathname}
+                  onNavigate={handleNavigate}
+                />
+              ))}
+            </nav>
+          </aside>
+        </div>
+      )}
+
+      {/* Main Content Area */}
+      <div className="flex flex-1 flex-col overflow-hidden min-w-0">
+        {/* Mobile Header */}
+        <header className="flex h-14 items-center justify-between border-b border-border bg-card/50 backdrop-blur-md px-4 shrink-0 md:hidden">
+          <div className="flex items-center gap-3">
+            <Button variant="ghost" size="icon" onClick={() => setMobileOpen(true)}>
+              <Menu className="h-5 w-5" />
+            </Button>
+            <h2 className="text-sm font-semibold text-foreground">
+              {config.brandName || "Settings"}
+            </h2>
+          </div>
+        </header>
+
+        <main className="flex-1 overflow-y-auto p-4 md:p-8">
+          {loading ? (
+            <div className="mx-auto w-full max-w-4xl space-y-6">
+              <Skeleton className="h-8 w-1/3 rounded-xl" />
+              <div className="grid gap-4">
+                {Array.from({ length: 3 }).map((_, i) => (
+                  <Skeleton key={i} className="h-24 rounded-xl" />
+                ))}
+              </div>
+            </div>
+          ) : (
+            <Outlet />
+          )}
+        </main>
+      </div>
+    </div>
+  );
+};
+
+export default SettingsLayout;

package/src/domains/settings/components/SettingsSection.tsx

@@ -0,0 +1,106 @@
+import { Link } from "react-router-dom";
+import { ChevronRight } from "lucide-react";
+import { cn } from "@umituz/web-design-system/utils";
+import type { SettingsSection as SettingsSectionType } from "../types/settings";
+
+interface SettingsSectionProps {
+  /** Section configuration */
+  section: SettingsSectionType;
+  /** Current path */
+  currentPath?: string;
+  /** On navigate callback */
+  onNavigate?: (path: string) => void;
+  /** Collapsed state */
+  collapsed?: boolean;
+}
+
+/**
+ * Settings Section Component
+ *
+ * Displays a section of settings items.
+ *
+ * @param props - Settings section props
+ */
+export const SettingsSection = ({
+  section,
+  currentPath,
+  onNavigate,
+  collapsed = false,
+}: SettingsSectionProps) => {
+  const filteredItems = section.items.filter((item) => item.enabled !== false);
+
+  if (filteredItems.length === 0) return null;
+
+  return (
+    <div className="mb-6 last:mb-0">
+      {!collapsed && (
+        <h3 className="px-2 mb-2 text-xs font-bold uppercase tracking-wider text-muted-foreground">
+          {section.title}
+        </h3>
+      )}
+
+      <div className="space-y-1">
+        {filteredItems.map((item) => {
+          const isActive = currentPath === item.path;
+
+          const itemContent = (
+            <>
+              {item.icon && (
+                <item.icon
+                  className={cn(
+                    "h-4 w-4 shrink-0",
+                    isActive && "scale-110"
+                  )}
+                />
+              )}
+              {!collapsed && (
+                <>
+                  <span className="flex-1 text-left">{item.label}</span>
+                  {item.badge !== undefined && item.badge > 0 && (
+                    <span className="ml-auto flex h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1.5 text-[10px] font-bold text-destructive-foreground">
+                      {item.badge > 99 ? "99+" : item.badge}
+                    </span>
+                  )}
+                  {item.path && <ChevronRight className="h-4 w-4 text-muted-foreground" />}
+                </>
+              )}
+            </>
+          );
+
+          const itemClassName = cn(
+            "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200 w-full",
+            "hover:bg-accent hover:text-accent-foreground",
+            isActive && "bg-accent text-accent-foreground",
+            collapsed ? "justify-center" : "justify-start"
+          );
+
+          if (item.path) {
+            return (
+              <Link
+                key={item.key}
+                to={item.path}
+                onClick={() => onNavigate?.(item.path!)}
+                className={itemClassName}
+                title={collapsed ? item.label : undefined}
+              >
+                {itemContent}
+              </Link>
+            );
+          }
+
+          return (
+            <button
+              key={item.key}
+              type="button"
+              onClick={() => {}}
+              className={itemClassName}
+              title={collapsed ? item.label : undefined}
+            >
+              {itemContent}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/src/domains/settings/components/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Settings Components Export
+ */
+
+export { SettingsLayout } from './SettingsLayout';
+export { SettingsSection } from './SettingsSection';

package/src/domains/settings/hooks/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Settings Hooks Export
+ */
+
+export {
+  useSettings,
+} from './useSettings';