@umituz/web-dashboard 4.6.5 → 4.7.1

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

@@ -1,144 +0,0 @@
-/**
- * AppFocusStep
- *
- * Second step of onboarding: which platforms is the user building for.
- * Icons are Lucide components (no emoji). State mapping is
- * config-driven: each option declares which state field it toggles.
- */
-
-import { Check, Smartphone, Monitor, Sparkles } from "lucide-react";
-import { useT } from "../../../i18n";
-import { cn } from "../../../primitives";
-import type {
-  OnboardingState,
-  AppTypeOption,
-} from "../types/onboarding";
-import { ONBOARDING_KEYS } from "../utils/i18nKeys";
-
-export interface AppFocusStepProps {
-  state: OnboardingState;
-  updateState: (updates: Partial<OnboardingState>) => void;
-  appTypes?: AppTypeOption[];
-}
-
-/**
- * Each option toggles a `stateField` of OnboardingState. This keeps the
- * wizard data-driven — adding a new platform doesn't require a code
- * change in this file. Consumer-supplied options may omit `stateField`;
- * it is then derived from the well-known ids below.
- */
-type AppFocusStateField = NonNullable<AppTypeOption["stateField"]>;
-
-const DEFAULT_STATE_FIELD_BY_ID: Record<string, AppFocusStateField> = {
-  mobile: "hasMobileApp",
-  web: "hasWebApp",
-};
-
-const DEFAULT_OPTIONS: AppTypeOption[] = [
-  {
-    id: "mobile",
-    name: "Mobile App",
-    description: "iOS or Android application",
-    icon: Smartphone,
-    stateField: "hasMobileApp",
-  },
-  {
-    id: "web",
-    name: "Web App",
-    description: "Web application or website",
-    icon: Monitor,
-    stateField: "hasWebApp",
-  },
-];
-
-export const AppFocusStep = ({
-  state,
-  updateState,
-  appTypes,
-}: AppFocusStepProps) => {
-  const t = useT();
-
-  const resolveStateField = (option: AppTypeOption): AppFocusStateField | undefined =>
-    option.stateField ?? DEFAULT_STATE_FIELD_BY_ID[option.id];
-
-  const types = (appTypes ?? DEFAULT_OPTIONS).map((option) => ({
-    ...option,
-    resolvedField: resolveStateField(option),
-  }));
-
-  const toggle = (option: AppTypeOption, field: AppFocusStateField) => {
-    const current = Boolean(state[field]);
-    updateState({ [field]: !current } as Partial<OnboardingState>);
-  };
-
-  const anySelected = types.some((type) =>
-    type.resolvedField ? Boolean(state[type.resolvedField]) : false,
-  );
-
-  return (
-    <div className="udb-step">
-      <div className="udb-step__header">
-        <h1 className="udb-step__title">
-          {t(ONBOARDING_KEYS.appFocus.title)}
-        </h1>
-        <p className="udb-step__description">
-          {t(ONBOARDING_KEYS.appFocus.description)}
-        </p>
-      </div>
-
-      <div className="udb-step__options udb-step__options--list" role="group" aria-label={t(ONBOARDING_KEYS.appFocus.title)}>
-        {types.map((type) => {
-          const isSelected = type.resolvedField
-            ? Boolean(state[type.resolvedField])
-            : false;
-          const Icon = type.icon;
-          return (
-            <button
-              key={type.id}
-              type="button"
-              aria-pressed={isSelected}
-              onClick={() => type.resolvedField && toggle(type, type.resolvedField)}
-              className={cn(
-                "udb-choice",
-                isSelected && "udb-choice--selected",
-              )}
-            >
-              <span
-                className={cn(
-                  "udb-choice__icon-box udb-choice__icon-box--lg",
-                  isSelected && "udb-choice__icon-box--on",
-                )}
-              >
-                <Icon className="udb-choice__icon udb-choice__icon--lg" aria-hidden="true" />
-              </span>
-
-              <span className="udb-choice__body">
-                <span className="udb-choice__label udb-choice__label--lg">{type.name}</span>
-                <span className="udb-choice__description">{type.description}</span>
-              </span>
-
-              <span
-                className={cn(
-                  "udb-choice__check",
-                  isSelected && "udb-choice__check--on",
-                )}
-                aria-hidden="true"
-              >
-                {isSelected && <Check className="udb-choice__check-icon" />}
-              </span>
-            </button>
-          );
-        })}
-      </div>
-
-      {anySelected && (
-        <p className="udb-step__hint" role="status" aria-live="polite">
-          <Sparkles className="udb-step__hint-icon" aria-hidden="true" />
-          {t(ONBOARDING_KEYS.appFocus.success)}
-        </p>
-      )}
-    </div>
-  );
-};
-
-export default AppFocusStep;

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

@@ -1,188 +0,0 @@
-/**
- * Onboarding Wizard
- *
- * Multi-step onboarding container. Delegates state, navigation, and
- * progress to `useOnboarding` so there's a single source of truth
- * for the wizard's lifecycle. Styling is entirely `udb-onboarding*`
- * classes from the package stylesheet.
- */
-
-import { useCallback, useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { useT } from "../../../i18n";
-import { Button } from "../../../primitives";
-import { useOnboarding } from "../hooks/useOnboarding";
-import { StepProgress } from "./StepProgress";
-import { StepNavigation } from "./StepNavigation";
-import type {
-  OnboardingWizardProps,
-  OnboardingError,
-} from "../types/onboarding";
-
-/**
- * Onboarding Wizard Component
- */
-export const OnboardingWizard = ({
-  config,
-  initialState,
-  onComplete,
-  onCancel,
-}: OnboardingWizardProps) => {
-  const navigate = useNavigate();
-  const t = useT();
-  const [saving, setSaving] = useState(false);
-  const [error, setError] = useState<OnboardingError | null>(null);
-
-  const {
-    state,
-    currentStep,
-    totalSteps,
-    isLastStep,
-    goToNext,
-    goToPrev,
-    goToStep,
-    updateState,
-  } = useOnboarding(config, initialState);
-
-  const completedSteps = useMemo(() => {
-    if (currentStep <= 1) return [] as number[];
-    return Array.from({ length: currentStep - 1 }, (_, i) => i + 1);
-  }, [currentStep]);
-
-  const validateCurrentStep = useCallback((): boolean => {
-    const currentStepConfig = config.steps[currentStep - 1];
-    return currentStepConfig?.validate ? currentStepConfig.validate(state) : true;
-  }, [config.steps, currentStep, state]);
-
-  const handleNext = useCallback(async () => {
-    if (!validateCurrentStep()) {
-      return;
-    }
-
-    if (isLastStep) {
-      setSaving(true);
-      setError(null);
-      try {
-        await onComplete?.(state);
-        navigate(config.completeRoute);
-      } catch (err) {
-        // Surface the failure to the user — silently logging is
-        // forbidden on critical paths.
-        setError({
-          step: currentStep,
-          message: err instanceof Error ? err.message : 'onboarding.errors.completionFailed',
-        });
-      } finally {
-        setSaving(false);
-      }
-      return;
-    }
-
-    goToNext();
-  }, [
-    config.completeRoute,
-    currentStep,
-    goToNext,
-    isLastStep,
-    navigate,
-    onComplete,
-    state,
-    validateCurrentStep,
-  ]);
-
-  const handlePrev = useCallback(() => {
-    goToPrev();
-  }, [goToPrev]);
-
-  const handleCancel = useCallback(() => {
-    onCancel?.();
-    navigate(config.cancelRoute ?? "/");
-  }, [config.cancelRoute, navigate, onCancel]);
-
-  const handleSkip = useCallback(() => {
-    if (!isLastStep) {
-      handleNext();
-    }
-  }, [handleNext, isLastStep]);
-
-  const currentStepConfig = config.steps[currentStep - 1];
-  const StepContent = currentStepConfig?.component;
-
-  return (
-    <div className="udb-root udb-onboarding">
-      <header className="udb-onboarding__header">
-        <div className="udb-onboarding__brand">
-          <span className="udb-onboarding__brand-name">{config.brandName}</span>
-        </div>
-
-        {config.showProgress !== false && (
-          <StepProgress
-            currentStep={currentStep}
-            totalSteps={totalSteps}
-            completedSteps={completedSteps}
-          />
-        )}
-
-        <div className="udb-onboarding__header-actions">
-          {config.allowCancel !== false && (
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={handleCancel}
-              disabled={saving}
-            >
-              {t('onboarding.buttons.cancel')}
-            </Button>
-          )}
-        </div>
-      </header>
-
-      <main className="udb-onboarding__main">
-        <div className="udb-onboarding__content">
-          {error && (
-            <div
-              role="alert"
-              aria-live="polite"
-              className="udb-onboarding__error"
-            >
-              {t(error.message)}
-            </div>
-          )}
-
-          {StepContent ? (
-            typeof StepContent === 'function' ? (
-              <StepContent
-                state={state}
-                updateState={updateState}
-                goToNext={goToNext}
-                goToPrev={goToPrev}
-                goToStep={goToStep}
-                config={config}
-              />
-            ) : (
-              StepContent
-            )
-          ) : (
-            <div className="udb-onboarding__empty">
-              {t('onboarding.errors.stepNotConfigured')}
-            </div>
-          )}
-        </div>
-      </main>
-
-      <StepNavigation
-        currentStep={currentStep}
-        totalSteps={totalSteps}
-        canGoNext={validateCurrentStep()}
-        isSaving={saving}
-        onNext={handleNext}
-        onPrev={handlePrev}
-        allowSkip={config.allowSkip}
-        onSkip={handleSkip}
-        translate={t}
-      />
-    </div>
-  );
-};
-
-export default OnboardingWizard;

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

@@ -1,241 +0,0 @@
-/**
- * PlanStep
- *
- * Subscription plan selection step. All copy is i18n-keyed;
- * the 20% yearly discount is a named constant, not a magic 0.8.
- * Badge tones are semantic (`muted` | `primary` | `accent`) —
- * no data-driven utility classes.
- */
-
-import { useMemo } from "react";
-import { Check, Sparkles } from "lucide-react";
-import { useT } from "../../../i18n";
-import { cn } from "../../../primitives";
-import type { OnboardingState, PlanOption } from "../types/onboarding";
-import { ONBOARDING_KEYS } from "../utils/i18nKeys";
-
-export interface PlanStepProps {
-  state: OnboardingState;
-  updateState: (updates: Partial<OnboardingState>) => void;
-  plans?: PlanOption[];
-  /** Yearly discount percentage (0-100). Default 20. */
-  yearlyDiscountPercent?: number;
-  /** Free trial duration in days, shown in the subtitle. Default 14. */
-  trialDays?: number;
-}
-
-const MONTHS_IN_YEAR = 12;
-const DEFAULT_YEARLY_DISCOUNT = 20;
-const DEFAULT_TRIAL_DAYS = 14;
-
-const DEFAULT_PLANS: PlanOption[] = [
-  {
-    id: "standard",
-    name: "Standard",
-    badgeKey: ONBOARDING_KEYS.plan.mostPopular,
-    badgeTone: "muted",
-    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",
-    badgeKey: ONBOARDING_KEYS.plan.bestValue,
-    badgeTone: "primary",
-    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",
-    badgeKey: ONBOARDING_KEYS.plan.custom,
-    badgeTone: "accent",
-    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",
-    ],
-  },
-];
-
-export const PlanStep = ({
-  state,
-  updateState,
-  plans,
-  yearlyDiscountPercent = DEFAULT_YEARLY_DISCOUNT,
-  trialDays = DEFAULT_TRIAL_DAYS,
-}: PlanStepProps) => {
-  const t = useT();
-  const planOptions = plans ?? DEFAULT_PLANS;
-
-  /**
-   * Pure function for plan pricing — given a base monthly price and
-   * a cycle, return the effective price. The discount multiplier
-   * is derived from the named constant; no more magic 0.8.
-   */
-  const getPlanPrice = (plan: PlanOption): number => {
-    const base = plan.price;
-    if (state.billingCycle === "yearly") {
-      return (base * MONTHS_IN_YEAR * (100 - yearlyDiscountPercent)) / 100;
-    }
-    return base;
-  };
-
-  const selectedPlan = useMemo(
-    () => planOptions.find((p) => p.id === state.selectedPlan) ?? null,
-    [planOptions, state.selectedPlan],
-  );
-
-  return (
-    <div className="udb-step udb-step--widest">
-      <div className="udb-step__header">
-        <h1 className="udb-step__title">
-          {t(ONBOARDING_KEYS.plan.title)}
-        </h1>
-        <p className="udb-step__description udb-step__description--lg">
-          {t(ONBOARDING_KEYS.plan.description, { days: trialDays })}
-        </p>
-      </div>
-
-      <div className="udb-cycle-toggle-row">
-        <div
-          className="udb-cycle-toggle"
-          role="group"
-          aria-label={t(ONBOARDING_KEYS.plan.title)}
-        >
-          <button
-            type="button"
-            aria-pressed={state.billingCycle === "monthly"}
-            onClick={() => updateState({ billingCycle: "monthly" })}
-            className={cn(
-              "udb-cycle-toggle__pill",
-              state.billingCycle === "monthly" && "udb-cycle-toggle__pill--on",
-            )}
-          >
-            {t(ONBOARDING_KEYS.plan.monthly)}
-          </button>
-          <button
-            type="button"
-            aria-pressed={state.billingCycle === "yearly"}
-            onClick={() => updateState({ billingCycle: "yearly" })}
-            className={cn(
-              "udb-cycle-toggle__pill udb-cycle-toggle__pill--with-badge",
-              state.billingCycle === "yearly" && "udb-cycle-toggle__pill--on",
-            )}
-          >
-            {t(ONBOARDING_KEYS.plan.yearly)}
-            <span
-              className={cn(
-                "udb-cycle-toggle__save",
-                state.billingCycle === "yearly" && "udb-cycle-toggle__save--on",
-              )}
-            >
-              {t(ONBOARDING_KEYS.plan.save, { percent: yearlyDiscountPercent })}
-            </span>
-          </button>
-        </div>
-      </div>
-
-      <div
-        className="udb-plans"
-        role="radiogroup"
-        aria-label={t(ONBOARDING_KEYS.plan.title)}
-      >
-        {planOptions.map((plan) => {
-          const isSelected = state.selectedPlan === plan.id;
-          const planPrice = getPlanPrice(plan);
-          const badge = plan.badge ?? (plan.badgeKey ? t(plan.badgeKey) : undefined);
-
-          return (
-            <button
-              key={plan.id}
-              type="button"
-              role="radio"
-              aria-checked={isSelected}
-              onClick={() => updateState({ selectedPlan: plan.id })}
-              className={cn(
-                "udb-plan",
-                isSelected && "udb-plan--selected",
-                plan.highlight && "udb-plan--highlight",
-              )}
-            >
-              {plan.highlight && (
-                <div className="udb-plan__recommended">
-                  {t(ONBOARDING_KEYS.plan.recommended)}
-                </div>
-              )}
-
-              <div className="udb-plan__heading">
-                <h3 className="udb-plan__name">{plan.name}</h3>
-                {badge && (
-                  <div className={cn("udb-plan__badge", plan.badgeTone && `udb-plan__badge--${plan.badgeTone}`)}>
-                    {badge}
-                  </div>
-                )}
-              </div>
-
-              <p className="udb-plan__description">{plan.description}</p>
-
-              <div className="udb-plan__price-row">
-                <span className="udb-plan__price">
-                  ${Math.round(planPrice)}
-                </span>
-                <span className="udb-plan__price-unit">
-                  /{state.billingCycle === "yearly"
-                    ? t(ONBOARDING_KEYS.plan.yearlyShort)
-                    : t(ONBOARDING_KEYS.plan.monthlyShort)}
-                </span>
-              </div>
-
-              <ul className="udb-plan__features">
-                {plan.features.map((feature, i) => {
-                  const text = typeof feature === "string" ? feature : feature.text;
-                  const bold = typeof feature !== "string" && feature.bold;
-                  return (
-                    <li key={`${plan.id}-feature-${i}`} className="udb-plan__feature">
-                      <span className="udb-plan__feature-check">
-                        <Check className="udb-plan__feature-check-icon" aria-hidden="true" />
-                      </span>
-                      <span className={cn("udb-plan__feature-text", bold && "udb-plan__feature-text--bold")}>
-                        {text}
-                      </span>
-                    </li>
-                  );
-                })}
-              </ul>
-            </button>
-          );
-        })}
-      </div>
-
-      {selectedPlan && (
-        <p className="udb-step__hint" role="status" aria-live="polite">
-          <Sparkles className="udb-step__hint-icon" aria-hidden="true" />
-          {t(ONBOARDING_KEYS.plan.selectedPlan, { name: selectedPlan.name })}
-        </p>
-      )}
-    </div>
-  );
-};
-
-export default PlanStep;

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

@@ -1,129 +0,0 @@
-/**
- * PlatformsStep
- *
- * Connect-platform onboarding step. Icons are Lucide components —
- * emoji is forbidden by project rules. Platform `color` is a plain
- * CSS color (brand hex), applied inline — no utility classes.
- */
-
-import {
-  Instagram,
-  Twitter,
-  Facebook,
-  Linkedin,
-  Youtube,
-  Pin,
-  Hash,
-} from "lucide-react";
-import { useT } from "../../../i18n";
-import { cn } from "../../../primitives";
-import type { OnboardingState, PlatformOption } from "../types/onboarding";
-import { ONBOARDING_KEYS } from "../utils/i18nKeys";
-
-export interface PlatformsStepProps {
-  state: OnboardingState;
-  updateState: (updates: Partial<OnboardingState>) => void;
-  platforms?: PlatformOption[];
-}
-
-/**
- * Default platform set with brand-accurate Lucide icons and
- * brand colors (CSS color strings, no emoji).
- */
-const DEFAULT_PLATFORMS: PlatformOption[] = [
-  { id: "instagram", name: "Instagram", icon: Instagram, color: "#c026d3" },
-  { id: "twitter",   name: "Twitter / X", icon: Twitter, color: "#0f172a" },
-  { id: "facebook",  name: "Facebook", icon: Facebook, color: "#1d4ed8" },
-  { id: "linkedin",  name: "LinkedIn", icon: Linkedin, color: "#1e3a8a" },
-  { id: "tiktok",    name: "TikTok", icon: Hash, color: "#111111" },
-  { id: "youtube",   name: "YouTube", icon: Youtube, color: "#dc2626" },
-  { id: "pinterest", name: "Pinterest", icon: Pin, color: "#b91c1c" },
-];
-
-export const PlatformsStep = ({
-  state,
-  updateState,
-  platforms,
-}: PlatformsStepProps) => {
-  const t = useT();
-  const platformOptions = platforms ?? DEFAULT_PLATFORMS;
-
-  const togglePlatform = (id: string) => {
-    const isConnected = state.connectedPlatforms.includes(id);
-    updateState({
-      connectedPlatforms: isConnected
-        ? state.connectedPlatforms.filter((p) => p !== id)
-        : [...state.connectedPlatforms, id],
-    });
-  };
-
-  const selectedCount = state.connectedPlatforms.length;
-
-  return (
-    <div className="udb-step udb-step--wide">
-      <div className="udb-step__header">
-        <h1 className="udb-step__title">
-          {t(ONBOARDING_KEYS.platforms.title)}
-        </h1>
-        <p className="udb-step__description">
-          {t(ONBOARDING_KEYS.platforms.description)}
-        </p>
-      </div>
-
-      <div
-        className="udb-platforms"
-        role="group"
-        aria-label={t(ONBOARDING_KEYS.platforms.title)}
-      >
-        {platformOptions.map((platform) => {
-          const isConnected = state.connectedPlatforms.includes(platform.id);
-          const Icon = platform.icon;
-          return (
-            <button
-              key={platform.id}
-              type="button"
-              aria-pressed={isConnected}
-              onClick={() => togglePlatform(platform.id)}
-              className={cn(
-                "udb-platform",
-                isConnected && "udb-platform--connected",
-              )}
-            >
-              <span
-                className="udb-platform__icon-box"
-                style={{ background: platform.color }}
-              >
-                <Icon className="udb-platform__icon" aria-hidden="true" />
-              </span>
-
-              <span className="udb-platform__meta">
-                <span className="udb-platform__name">{platform.name}</span>
-                <span
-                  className={cn(
-                    "udb-platform__state",
-                    isConnected && "udb-platform__state--on",
-                  )}
-                >
-                  {isConnected
-                    ? t(ONBOARDING_KEYS.platforms.connected)
-                    : t(ONBOARDING_KEYS.platforms.connect)}
-                </span>
-              </span>
-            </button>
-          );
-        })}
-      </div>
-
-      {selectedCount > 0 && (
-        <p className="udb-step__hint" role="status" aria-live="polite">
-          {t(ONBOARDING_KEYS.platforms.selected, {
-            count: selectedCount,
-            plural: selectedCount === 1 ? '' : 's',
-          })}
-        </p>
-      )}
-    </div>
-  );
-};
-
-export default PlatformsStep;