@umituz/web-dashboard 2.0.6 → 2.0.8

package/src/domains/onboarding/components/PlanStep.tsx

@@ -0,0 +1,208 @@
+import { Check } from "lucide-react";
+import { cn } from "@umituz/web-design-system/utils";
+import type { OnboardingState, PlanOption } from "../types/onboarding";
+
+interface PlanStepProps {
+  /** Current onboarding state */
+  state: OnboardingState;
+  /** Update state function */
+  updateState: (updates: Partial<OnboardingState>) => void;
+  /** Plan options */
+  plans?: PlanOption[];
+}
+
+/**
+ * Plan Selection Step
+ *
+ * Fourth step - select subscription plan
+ */
+export const PlanStep = ({
+  state,
+  updateState,
+  plans,
+}: PlanStepProps) => {
+  // Default plans
+  const defaultPlans: PlanOption[] = [
+    {
+      id: "standard",
+      name: "Standard",
+      badge: "Most Popular",
+      badgeColor: "bg-muted text-muted-foreground",
+      description: "Perfect for individuals and small businesses",
+      price: 12,
+      features: [
+        { text: "3 Social Accounts", bold: true },
+        "100 posts per month",
+        "Basic Analytics",
+        "Email Support",
+      ],
+    },
+    {
+      id: "pro",
+      name: "Pro",
+      badge: "Best Value",
+      badgeColor: "bg-primary text-primary-foreground",
+      description: "For growing businesses and teams",
+      price: 29,
+      features: [
+        { text: "15 Social Accounts", bold: true },
+        "Unlimited posts",
+        "Advanced Analytics",
+        "AI Caption Suggestions",
+        { text: "5 Team Members", bold: true },
+        "Priority Support",
+      ],
+      highlight: true,
+    },
+    {
+      id: "enterprise",
+      name: "Enterprise",
+      badge: "Custom",
+      badgeColor: "bg-purple-600 text-white",
+      description: "For large organizations with custom needs",
+      price: 99,
+      features: [
+        { text: "Unlimited Accounts", bold: true },
+        "Unlimited everything",
+        "Custom Integrations",
+        "Dedicated Account Manager",
+        "24/7 Phone Support",
+        "SLA Guarantee",
+      ],
+    },
+  ];
+
+  const planOptions = plans || defaultPlans;
+
+  // Calculate price with billing cycle discount
+  const getPlanPrice = (plan: PlanOption) => {
+    const basePrice = plan.price;
+    return state.billingCycle === "yearly" ? basePrice * 12 * 0.8 : basePrice; // 20% discount
+  };
+
+  return (
+    <div className="w-full max-w-5xl">
+      <div className="text-center mb-8">
+        <h1 className="text-3xl md:text-4xl font-extrabold text-foreground mb-3">
+          Choose your plan
+        </h1>
+        <p className="text-muted-foreground text-lg">
+          Start with a 14-day free trial - no credit card required
+        </p>
+      </div>
+
+      {/* Billing Cycle Toggle */}
+      <div className="flex items-center justify-center gap-2 mb-12">
+        <div className="flex bg-muted rounded-full p-1.5 border border-border">
+          <button
+            onClick={() => updateState({ billingCycle: "monthly" })}
+            className={cn(
+              "px-6 py-2 rounded-full text-sm font-bold transition-all",
+              state.billingCycle === "monthly"
+                ? "bg-primary text-primary-foreground shadow-lg shadow-primary/20"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            Monthly
+          </button>
+          <button
+            onClick={() => updateState({ billingCycle: "yearly" })}
+            className={cn(
+              "px-6 py-2 rounded-full text-sm font-bold transition-all flex items-center gap-2",
+              state.billingCycle === "yearly"
+                ? "bg-primary text-primary-foreground shadow-lg shadow-primary/20"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            Yearly
+            <span
+              className={cn(
+                "text-[10px] px-1.5 py-0.5 rounded-full transition-colors",
+                state.billingCycle === "yearly" ? "bg-white/20 text-white" : "bg-green-500/10 text-green-600"
+              )}
+            >
+              Save 20%
+            </span>
+          </button>
+        </div>
+      </div>
+
+      {/* Plans Grid */}
+      <div className="grid md:grid-cols-3 gap-8">
+        {planOptions.map((plan) => {
+          const isSelected = state.selectedPlan === plan.id;
+          const planPrice = getPlanPrice(plan);
+
+          return (
+            <button
+              key={plan.id}
+              onClick={() => updateState({ selectedPlan: plan.id })}
+              className={cn(
+                "bg-background border-2 rounded-[32px] p-8 text-left transition-all hover:translate-y-[-4px] relative",
+                isSelected
+                  ? "border-primary ring-4 ring-primary/10"
+                  : "border-border hover:border-primary/40",
+                plan.highlight && "shadow-xl"
+              )}
+            >
+              {plan.highlight && (
+                <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-gradient-to-r from-primary to-purple-600 text-white text-[10px] font-black uppercase tracking-widest px-4 py-1 rounded-full">
+                  Recommended
+                </div>
+              )}
+
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-2xl font-black text-foreground">{plan.name}</h3>
+                {plan.badge && (
+                  <div
+                    className={cn(
+                      "text-[10px] font-black uppercase tracking-widest px-3 py-1 rounded-full",
+                      plan.badgeColor
+                    )}
+                  >
+                    {plan.badge}
+                  </div>
+                )}
+              </div>
+
+              <p className="text-muted-foreground mb-8 font-medium">{plan.description}</p>
+
+              <div className="flex items-baseline gap-1 mb-8">
+                <span className="text-5xl font-black text-foreground">
+                  ${Math.round(planPrice)}
+                </span>
+                <span className="text-lg font-bold text-muted-foreground">/mo</span>
+              </div>
+
+              <ul className="space-y-4">
+                {plan.features.map((feature, i) => {
+                  const text = typeof feature === "string" ? feature : feature.text;
+                  const bold = typeof feature !== "string" && feature.bold;
+
+                  return (
+                    <li key={i} className="flex items-start gap-3 text-sm font-medium">
+                      <div className="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center shrink-0 mt-0.5">
+                        <Check className="h-3 w-3 text-primary" />
+                      </div>
+                      <span className={cn("text-foreground/90", bold && "font-black")}>
+                        {text}
+                      </span>
+                    </li>
+                  );
+                })}
+              </ul>
+            </button>
+          );
+        })}
+      </div>
+
+      {state.selectedPlan && (
+        <p className="mt-8 text-center text-sm text-muted-foreground animate-in fade-in">
+          ✨ Great choice! You selected the {planOptions.find((p) => p.id === state.selectedPlan)?.name} plan
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default PlanStep;

package/src/domains/onboarding/components/PlatformsStep.tsx

@@ -0,0 +1,109 @@
+import { cn } from "@umituz/web-design-system/utils";
+import type { OnboardingState } from "../types/onboarding";
+
+interface PlatformsStepProps {
+  /** Current onboarding state */
+  state: OnboardingState;
+  /** Update state function */
+  updateState: (updates: Partial<OnboardingState>) => void;
+  /** Platform options */
+  platforms?: Array<{
+    id: string;
+    name: string;
+    icon: string;
+    color?: string;
+  }>;
+}
+
+/**
+ * Platform Selection Step
+ *
+ * Third step - select social media platforms to connect
+ */
+export const PlatformsStep = ({
+  state,
+  updateState,
+  platforms,
+}: PlatformsStepProps) => {
+  // Default platforms
+  const defaultPlatforms = [
+    { id: "instagram", name: "Instagram", icon: "📸", color: "bg-gradient-to-br from-purple-500 to-pink-500" },
+    { id: "twitter", name: "Twitter / X", icon: "🐦", color: "bg-black" },
+    { id: "facebook", name: "Facebook", icon: "👍", color: "bg-blue-600" },
+    { id: "linkedin", name: "LinkedIn", icon: "💼", color: "bg-blue-700" },
+    { id: "tiktok", name: "TikTok", icon: "🎵", color: "bg-black" },
+    { id: "youtube", name: "YouTube", icon: "📺", color: "bg-red-600" },
+    { id: "pinterest", name: "Pinterest", icon: "📌", color: "bg-red-700" },
+    { id: "threads", name: "Threads", icon: "🧵", color: "bg-black" },
+  ];
+
+  const platformOptions = platforms || defaultPlatforms;
+
+  const togglePlatform = (id: string) => {
+    const isConnected = state.connectedPlatforms.includes(id);
+    updateState({
+      connectedPlatforms: isConnected
+        ? state.connectedPlatforms.filter((p) => p !== id)
+        : [...state.connectedPlatforms, id],
+    });
+  };
+
+  return (
+    <div className="w-full max-w-4xl">
+      <div className="text-center mb-10">
+        <h1 className="text-3xl md:text-4xl font-extrabold text-foreground mb-3">
+          Connect your platforms
+        </h1>
+        <p className="text-muted-foreground">
+          Select the platforms you want to manage - you can add more later
+        </p>
+      </div>
+
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+        {platformOptions.map((platform) => {
+          const isConnected = state.connectedPlatforms.includes(platform.id);
+
+          return (
+            <button
+              key={platform.id}
+              onClick={() => togglePlatform(platform.id)}
+              className={cn(
+                "group bg-background border rounded-2xl p-6 flex flex-col items-center gap-4 transition-all hover:scale-[1.02]",
+                isConnected ? "border-primary ring-2 ring-primary/20 bg-primary/5" : "border-border hover:border-primary/40"
+              )}
+            >
+              <div
+                className={cn(
+                  "w-12 h-12 rounded-2xl bg-muted flex items-center justify-center text-2xl group-hover:scale-110 transition-transform",
+                  platform.color
+                )}
+              >
+                {platform.icon}
+              </div>
+
+              <div className="flex flex-col items-center">
+                <span className="font-bold text-foreground text-sm">{platform.name}</span>
+                <span
+                  className={cn(
+                    "text-[10px] font-bold uppercase tracking-wider mt-1 transition-colors",
+                    isConnected ? "text-primary" : "text-muted-foreground"
+                  )}
+                >
+                  {isConnected ? "Connected" : "Connect"}
+                </span>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+
+      {state.connectedPlatforms.length > 0 && (
+        <p className="mt-8 text-center text-sm text-muted-foreground animate-in fade-in">
+          ✨ {state.connectedPlatforms.length} platform{state.connectedPlatforms.length > 1 ? "s" : ""} selected
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default PlatformsStep;

package/src/domains/onboarding/components/UserTypeStep.tsx

@@ -0,0 +1,135 @@
+import { Check } from "lucide-react";
+import { cn } from "@umituz/web-design-system/utils";
+import type { OnboardingState } from "../types/onboarding";
+import type { ComponentType } from "react";
+
+interface UserTypeOption {
+  id: string;
+  label: string;
+  description: string;
+  icon?: ComponentType<{ className?: string }>;
+  badge?: string;
+}
+
+interface UserTypeStepProps {
+  /** Current onboarding state */
+  state: OnboardingState;
+  /** Update state function */
+  updateState: (updates: Partial<OnboardingState>) => void;
+  /** User type options */
+  options?: UserTypeOption[];
+}
+
+/**
+ * User Type Selection Step
+ *
+ * First step of onboarding - select user type/category
+ */
+export const UserTypeStep = ({
+  state,
+  updateState,
+  options = [],
+}: UserTypeStepProps) => {
+  // Default options if not provided
+  const defaultOptions: UserTypeOption[] = [
+    {
+      id: "founder",
+      label: "Founder",
+      description: "Building your own startup or business",
+    },
+    {
+      id: "creator",
+      label: "Content Creator",
+      description: "Creating content for social media and platforms",
+    },
+    {
+      id: "agency",
+      label: "Agency",
+      description: "Managing multiple client accounts",
+    },
+    {
+      id: "enterprise",
+      label: "Enterprise",
+      description: "Large scale organization with teams",
+    },
+    {
+      id: "small-business",
+      label: "Small Business",
+      description: "Local or niche business owner",
+    },
+    {
+      id: "personal",
+      label: "Personal",
+      description: "Individual looking to grow personal brand",
+    },
+  ];
+
+  const userTypeOptions = options.length > 0 ? options : defaultOptions;
+
+  return (
+    <div className="w-full max-w-xl">
+      <div className="text-center mb-10">
+        <h1 className="text-3xl md:text-4xl font-extrabold text-foreground mb-3">
+          What describes you best?
+        </h1>
+        <p className="text-muted-foreground">
+          Select the option that best describes your situation
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 gap-3">
+        {userTypeOptions.map((option) => {
+          const isSelected = state.selectedUserType === option.id;
+          const hasBadge = option.badge != null;
+          const hasIcon = option.icon != null;
+
+          return (
+            <button
+              key={option.id}
+              onClick={() => updateState({ selectedUserType: option.id })}
+              className={cn(
+                "w-full flex items-center gap-4 p-5 rounded-2xl border bg-background text-left transition-all group",
+                isSelected
+                  ? "border-primary ring-2 ring-primary/20 bg-primary/5"
+                  : "border-border hover:border-primary/40 hover:bg-muted/50"
+              )}
+            >
+              <div
+                className={cn(
+                  "w-6 h-6 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors",
+                  isSelected
+                    ? "border-primary bg-primary text-white"
+                    : "border-muted-foreground/30"
+                )}
+              >
+                {isSelected && <Check className="h-4 w-4" />}
+              </div>
+
+              <div className="flex-1">
+                <div className="flex items-center gap-2">
+                  <p className="font-bold text-foreground">{option.label}</p>
+                  {hasBadge && (
+                    <span className="text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full bg-primary/10 text-primary">
+                      {option.badge}
+                    </span>
+                  )}
+                </div>
+                <p className="text-sm text-muted-foreground mt-0.5">
+                  {option.description}
+                </p>
+              </div>
+
+              {hasIcon && option.icon && (
+                <div className="w-10 h-10 rounded-xl bg-muted flex items-center justify-center shrink-0">
+                  <option.icon className="h-5 w-5 text-muted-foreground" />
+                </div>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default UserTypeStep;

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

@@ -0,0 +1,9 @@
+/**
+ * Onboarding Components Export
+ */
+
+export { OnboardingWizard } from './OnboardingWizard';
+export { UserTypeStep } from './UserTypeStep';
+export { AppFocusStep } from './AppFocusStep';
+export { PlatformsStep } from './PlatformsStep';
+export { PlanStep } from './PlanStep';

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

@@ -0,0 +1,5 @@
+/**
+ * Onboarding Hooks Export
+ */
+
+export { useOnboarding, useOnboardingStep } from './useOnboarding';

package/{dist/onboarding/hooks/index.js → src/domains/onboarding/hooks/useOnboarding.ts}

@@ -1,28 +1,53 @@
-"use client";
+/**
+ * Onboarding Hooks
+ *
+ * Custom React hooks for onboarding functionality
+ */
 
-// src/domains/onboarding/hooks/useOnboarding.ts
 import { useState, useCallback } from "react";
-function useOnboarding(config, initialState) {
-  const [state, setState] = useState({
+import type { OnboardingState, OnboardingConfig } from "../types/onboarding";
+
+/**
+ * Use Onboarding Hook
+ *
+ * Manages onboarding state and actions
+ *
+ * @param config - Onboarding configuration
+ * @param initialState - Initial state
+ * @returns Onboarding state and actions
+ */
+export function useOnboarding(
+  config: OnboardingConfig,
+  initialState?: Partial<OnboardingState>
+) {
+  const [state, setState] = useState<OnboardingState>({
     currentStep: 1,
     connectedPlatforms: [],
     billingCycle: "monthly",
     stepData: {},
-    ...initialState
+    ...initialState,
   });
+
   const totalSteps = config.steps.length;
+
+  // Navigation actions
   const goToNext = useCallback(() => {
     const currentStepConfig = config.steps[state.currentStep - 1];
+
+    // Validate if needed
     if (currentStepConfig?.validate) {
       const isValid = currentStepConfig.validate(state);
       if (!isValid) return false;
     }
+
     if (state.currentStep < totalSteps) {
       setState((prev) => ({ ...prev, currentStep: prev.currentStep + 1 }));
       return true;
     }
+
     return false;
   }, [config.steps, state, totalSteps]);
+
   const goToPrev = useCallback(() => {
     if (state.currentStep > 1) {
       setState((prev) => ({ ...prev, currentStep: prev.currentStep - 1 }));
@@ -30,14 +55,19 @@ function useOnboarding(config, initialState) {
     }
     return false;
   }, [state.currentStep]);
-  const goToStep = useCallback((step) => {
+
+  const goToStep = useCallback((step: number) => {
     if (step >= 1 && step <= totalSteps) {
       setState((prev) => ({ ...prev, currentStep: step }));
     }
   }, [totalSteps]);
-  const updateState = useCallback((updates) => {
+
+  // State update action
+  const updateState = useCallback((updates: Partial<OnboardingState>) => {
     setState((prev) => ({ ...prev, ...updates }));
   }, []);
+
+  // Validation helper
   const canGoNext = useCallback(() => {
     const currentStepConfig = config.steps[state.currentStep - 1];
     if (currentStepConfig?.validate) {
@@ -45,11 +75,18 @@ function useOnboarding(config, initialState) {
     }
     return true;
   }, [config.steps, state]);
+
+  // Progress calculation
   const getProgress = useCallback(() => {
-    return state.currentStep / totalSteps * 100;
+    return (state.currentStep / totalSteps) * 100;
   }, [state.currentStep, totalSteps]);
+
+  // Is first step
   const isFirstStep = state.currentStep === 1;
+
+  // Is last step
   const isLastStep = state.currentStep === totalSteps;
+
   return {
     // State
     state,
@@ -58,43 +95,52 @@ function useOnboarding(config, initialState) {
     isFirstStep,
     isLastStep,
     progress: getProgress(),
+
     // Actions
     goToNext,
     goToPrev,
     goToStep,
     updateState,
-    canGoNext
+    canGoNext,
   };
 }
-function useOnboardingStep(stepId) {
-  const [data, setData] = useState({});
+
+/**
+ * Use Onboarding Step Hook
+ *
+ * Hook for managing individual step state
+ *
+ * @param stepId - Step identifier
+ * @returns Step state and actions
+ */
+export function useOnboardingStep(stepId: string) {
+  const [data, setData] = useState<Record<string, unknown>>({});
   const [isValid, setIsValid] = useState(false);
   const [isTouched, setIsTouched] = useState(false);
-  const updateData = useCallback((updates) => {
+
+  const updateData = useCallback((updates: Record<string, unknown>) => {
     setData((prev) => ({ ...prev, ...updates }));
     setIsTouched(true);
   }, []);
-  const validate = useCallback((validator) => {
+
+  const validate = useCallback((validator: (data: Record<string, unknown>) => boolean) => {
     const valid = validator(data);
     setIsValid(valid);
     return valid;
   }, []);
+
   const reset = useCallback(() => {
     setData({});
     setIsValid(false);
     setIsTouched(false);
   }, []);
+
   return {
     data,
     isValid,
     isTouched,
     updateData,
     validate,
-    reset
+    reset,
   };
 }
-export {
-  useOnboarding,
-  useOnboardingStep
-};
-//# sourceMappingURL=index.js.map

package/src/domains/onboarding/index.ts

@@ -0,0 +1,35 @@
+/**
+ * @umituz/web-dashboard - Onboarding Domain
+ *
+ * Config-driven Onboarding System
+ */
+
+export { OnboardingWizard } from './components';
+export { UserTypeStep } from './components';
+export { AppFocusStep } from './components';
+export { PlatformsStep } from './components';
+export { PlanStep } from './components';
+export { useOnboarding, useOnboardingStep } from './hooks';
+export {
+  validateStep,
+  getStepTitle,
+  getStepDescription,
+  calculateProgress,
+  getCompletedSteps,
+  formatOnboardingData,
+  generateOnboardingEvent,
+  isValidEmail,
+  isValidPassword,
+} from './utils';
+export type {
+  UserTypeOption,
+  PlatformOption,
+  PlanOption,
+  OnboardingStep,
+  OnboardingConfig,
+  OnboardingState,
+  OnboardingActions,
+  OnboardingWizardProps,
+  StepProgressProps,
+  StepNavigationProps,
+} from './types';

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

@@ -0,0 +1,16 @@
+/**
+ * Onboarding Types Export
+ */
+
+export type {
+  UserTypeOption,
+  PlatformOption,
+  PlanOption,
+  OnboardingStep,
+  OnboardingConfig,
+  OnboardingState,
+  OnboardingActions,
+  OnboardingWizardProps,
+  StepProgressProps,
+  StepNavigationProps,
+} from './onboarding';