@umituz/web-dashboard 4.6.5 → 4.7.0

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

@@ -1,108 +0,0 @@
-/**
- * Onboarding - Step Navigation Footer
- *
- * Renders the wizard's bottom action bar: back, skip, next/getStarted.
- * All labels are i18n keys; the consumer maps them to localized strings.
- */
-
-import { ArrowLeft, Loader2 } from "lucide-react";
-import { Button } from "../../../primitives";
-
-/**
- * Centralized i18n keys for navigation labels.
- * Components stay free of hardcoded UI strings.
- */
-export const STEP_NAVIGATION_KEYS = {
-  back: 'onboarding.buttons.back',
-  skip: 'onboarding.buttons.skip',
-  next: 'onboarding.buttons.next',
-  getStarted: 'onboarding.buttons.getStarted',
-  finalizing: 'onboarding.buttons.finalizing',
-} as const;
-
-export type StepNavigationKey =
-  (typeof STEP_NAVIGATION_KEYS)[keyof typeof STEP_NAVIGATION_KEYS];
-
-/**
- * Translation function shape consumers must inject.
- * The wizard never depends on a specific i18n library.
- */
-export type Translate = (key: string) => string;
-
-export interface StepNavigationProps {
-  currentStep: number;
-  totalSteps: number;
-  canGoNext: boolean;
-  isSaving?: boolean;
-  nextLabel?: string;
-  prevLabel?: string;
-  onNext: () => void;
-  onPrev: () => void;
-  allowSkip?: boolean;
-  onSkip?: () => void;
-  translate: Translate;
-}
-
-export const StepNavigation = ({
-  currentStep,
-  totalSteps,
-  canGoNext,
-  isSaving = false,
-  nextLabel,
-  prevLabel,
-  onNext,
-  onPrev,
-  allowSkip = false,
-  onSkip,
-  translate: t,
-}: StepNavigationProps) => {
-  const isLastStep = currentStep === totalSteps;
-
-  return (
-    <footer className="udb-onboarding__footer">
-      {currentStep > 1 ? (
-        <Button
-          variant="ghost"
-          onClick={onPrev}
-          className="udb-onboarding__footer-btn"
-          disabled={isSaving}
-        >
-          <ArrowLeft className="udb-onboarding__footer-icon" aria-hidden="true" />
-          {prevLabel ?? t(STEP_NAVIGATION_KEYS.back)}
-        </Button>
-      ) : (
-        <div />
-      )}
-
-      <div className="udb-onboarding__footer-actions">
-        {allowSkip && onSkip && !isLastStep && (
-          <Button
-            variant="ghost"
-            onClick={onSkip}
-            className="udb-onboarding__footer-btn"
-            disabled={isSaving}
-          >
-            {t(STEP_NAVIGATION_KEYS.skip)}
-          </Button>
-        )}
-
-        <Button
-          onClick={onNext}
-          className="udb-onboarding__footer-next"
-          disabled={!canGoNext || isSaving}
-        >
-          {isSaving ? (
-            <>
-              <Loader2 className="udb-onboarding__footer-icon udb-spin" aria-hidden="true" />
-              {t(STEP_NAVIGATION_KEYS.finalizing)}
-            </>
-          ) : isLastStep ? (
-            nextLabel ?? t(STEP_NAVIGATION_KEYS.getStarted)
-          ) : (
-            t(STEP_NAVIGATION_KEYS.next)
-          )}
-        </Button>
-      </div>
-    </footer>
-  );
-};

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

@@ -1,62 +0,0 @@
-/**
- * Onboarding - Step Progress Indicator
- *
- * Renders the wizard's progress as a row of numbered nodes connected
- * by lines. Stateless: receives all data via props.
- */
-
-import { Check } from "lucide-react";
-import { cn } from "../../../primitives";
-
-interface StepProgressProps {
-  currentStep: number;
-  totalSteps: number;
-  completedSteps?: number[];
-}
-
-export const StepProgress = ({
-  currentStep,
-  totalSteps,
-  completedSteps = [],
-}: StepProgressProps) => {
-  return (
-    <div
-      className="udb-progress"
-      role="progressbar"
-      aria-valuemin={1}
-      aria-valuemax={totalSteps}
-      aria-valuenow={currentStep}
-    >
-      {Array.from({ length: totalSteps }, (_, i) => i + 1).map((step) => {
-        const isCompleted = completedSteps.includes(step) || step < currentStep;
-        const isCurrent = step === currentStep;
-
-        return (
-          <div key={step} className="udb-progress__segment">
-            <div
-              className={cn(
-                "udb-progress__node",
-                (isCompleted || isCurrent) && "udb-progress__node--on",
-              )}
-              aria-current={isCurrent ? "step" : undefined}
-            >
-              {isCompleted ? (
-                <Check className="udb-progress__check" aria-hidden="true" />
-              ) : (
-                step
-              )}
-            </div>
-            {step < totalSteps && (
-              <div
-                className={cn(
-                  "udb-progress__connector",
-                  step < currentStep && "udb-progress__connector--on",
-                )}
-              />
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-};

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

@@ -1,114 +0,0 @@
-/**
- * User Type Step
- *
- * First step of the onboarding wizard: select user type.
- * String props are expected to be already-translated by the consumer
- * (so the consumer can localize each option via i18n).
- */
-
-import { Check } from "lucide-react";
-import { useT } from "../../../i18n";
-import { cn } from "../../../primitives";
-import type { OnboardingState, UserTypeOption } from "../types/onboarding";
-import type { ComponentType } from "react";
-import { ONBOARDING_KEYS } from "../utils/i18nKeys";
-
-export interface UserTypeStepProps {
-  /** Current onboarding state */
-  state: OnboardingState;
-  /** Update state function */
-  updateState: (updates: Partial<OnboardingState>) => void;
-  /** User type options — labels/desc are translated by the consumer */
-  options?: UserTypeOption[];
-  /** Custom icon component type (avoids `React.ComponentType` import here) */
-  iconComponent?: ComponentType<{ className?: string }>;
-}
-
-/**
- * Default options — every string is an i18n key. The consumer
- * supplies translations; nothing in this file is hardcoded copy.
- */
-const DEFAULT_OPTIONS: UserTypeOption[] = [
-  { id: "founder", labelKey: ONBOARDING_KEYS.defaults.founder, descriptionKey: ONBOARDING_KEYS.defaults.founderDescription },
-  { id: "creator", labelKey: ONBOARDING_KEYS.defaults.contentCreator, descriptionKey: ONBOARDING_KEYS.defaults.contentCreatorDescription },
-  { id: "agency", labelKey: ONBOARDING_KEYS.defaults.agency, descriptionKey: ONBOARDING_KEYS.defaults.agencyDescription },
-  { id: "enterprise", labelKey: ONBOARDING_KEYS.defaults.enterprise, descriptionKey: ONBOARDING_KEYS.defaults.enterpriseDescription },
-  { id: "small-business", labelKey: ONBOARDING_KEYS.defaults.smallBusiness, descriptionKey: ONBOARDING_KEYS.defaults.smallBusinessDescription },
-  { id: "personal", labelKey: ONBOARDING_KEYS.defaults.personal, descriptionKey: ONBOARDING_KEYS.defaults.personalDescription },
-];
-
-export const UserTypeStep = ({
-  state,
-  updateState,
-  options = [],
-}: UserTypeStepProps) => {
-  const t = useT();
-  const userTypeOptions = options.length > 0 ? options : DEFAULT_OPTIONS;
-
-  return (
-    <div className="udb-step">
-      <div className="udb-step__header">
-        <h1 className="udb-step__title">
-          {t(ONBOARDING_KEYS.userType.title)}
-        </h1>
-        <p className="udb-step__description">
-          {t(ONBOARDING_KEYS.userType.description)}
-        </p>
-      </div>
-
-      <div className="udb-step__options udb-step__options--list" role="radiogroup" aria-label={t(ONBOARDING_KEYS.userType.title)}>
-        {userTypeOptions.map((option) => {
-          const isSelected = state.selectedUserType === option.id;
-          const hasBadge = option.badge != null;
-          const hasIcon = option.icon != null;
-          const label = option.label ?? (option.labelKey ? t(option.labelKey) : '');
-          const description = option.description ?? (option.descriptionKey ? t(option.descriptionKey) : '');
-
-          return (
-            <button
-              key={option.id}
-              type="button"
-              role="radio"
-              aria-checked={isSelected}
-              onClick={() => updateState({ selectedUserType: option.id })}
-              className={cn(
-                "udb-choice",
-                isSelected && "udb-choice--selected",
-              )}
-            >
-              <span
-                className={cn(
-                  "udb-choice__check",
-                  isSelected && "udb-choice__check--on",
-                )}
-                aria-hidden="true"
-              >
-                {isSelected && <Check className="udb-choice__check-icon" />}
-              </span>
-
-              <span className="udb-choice__body">
-                <span className="udb-choice__label-row">
-                  <span className="udb-choice__label">{label}</span>
-                  {hasBadge && (
-                    <span className="udb-choice__badge">
-                      {option.badge}
-                    </span>
-                  )}
-                </span>
-                <span className="udb-choice__description">{description}</span>
-              </span>
-
-              {hasIcon && option.icon && (
-                <span className="udb-choice__icon-box">
-                  <option.icon className="udb-choice__icon" aria-hidden="true" />
-                </span>
-              )}
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-
-export default UserTypeStep;

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

@@ -1,13 +0,0 @@
-/**
- * Onboarding Components Export
- */
-
-export { OnboardingWizard } from './OnboardingWizard';
-export { UserTypeStep } from './UserTypeStep';
-export { AppFocusStep } from './AppFocusStep';
-export { PlatformsStep } from './PlatformsStep';
-export { PlanStep } from './PlanStep';
-export { StepProgress } from './StepProgress';
-export { StepNavigation } from './StepNavigation';
-export { STEP_NAVIGATION_KEYS } from './StepNavigation';
-export type { StepNavigationKey, Translate } from './StepNavigation';

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

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

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

@@ -1,156 +0,0 @@
-/**
- * Onboarding Hooks
- *
- * Custom React hooks for onboarding functionality. Navigation callbacks
- * read the current render's state so their boolean return values are
- * truthful; state updaters themselves stay pure.
- */
-
-import { useState, useCallback, useMemo, useRef } from "react";
-import type { OnboardingState, OnboardingConfig } from "../types/onboarding";
-
-/**
- * Initial onboarding state — single source of truth.
- */
-const buildInitialState = (
-  initialState?: Partial<OnboardingState>,
-): OnboardingState => ({
-  currentStep: 1,
-  connectedPlatforms: [],
-  billingCycle: "monthly",
-  stepData: {},
-  ...initialState,
-});
-
-/**
- * Use Onboarding Hook
- *
- * Manages onboarding state and actions.
- *
- * @param config - Onboarding configuration
- * @param initialState - Initial state overrides
- * @returns Onboarding state and actions
- */
-export function useOnboarding(
-  config: OnboardingConfig,
-  initialState?: Partial<OnboardingState>,
-) {
-  const [state, setState] = useState<OnboardingState>(() => buildInitialState(initialState));
-
-  const totalSteps = config.steps.length;
-
-  // Validation and the boolean return value are computed against the
-  // current render's state (always fresh — these callbacks are
-  // recreated when state changes); the setState updater stays pure and
-  // bounds-checked. The previous version flipped a closure variable
-  // inside the updater, which returned false before React had run it.
-  const goToNext = useCallback((): boolean => {
-    const currentStepConfig = config.steps[state.currentStep - 1];
-    if (currentStepConfig?.validate && !currentStepConfig.validate(state)) {
-      return false;
-    }
-    if (state.currentStep >= totalSteps) return false;
-    setState((prev) =>
-      prev.currentStep < totalSteps
-        ? { ...prev, currentStep: prev.currentStep + 1 }
-        : prev,
-    );
-    return true;
-  }, [config.steps, state, totalSteps]);
-
-  const goToPrev = useCallback((): boolean => {
-    if (state.currentStep <= 1) return false;
-    setState((prev) =>
-      prev.currentStep > 1
-        ? { ...prev, currentStep: prev.currentStep - 1 }
-        : prev,
-    );
-    return true;
-  }, [state]);
-
-  const goToStep = useCallback((step: number) => {
-    setState((prev) => {
-      if (step >= 1 && step <= totalSteps && step !== prev.currentStep) {
-        return { ...prev, currentStep: step };
-      }
-      return prev;
-    });
-  }, [totalSteps]);
-
-  const updateState = useCallback((updates: Partial<OnboardingState>) => {
-    setState((prev) => ({ ...prev, ...updates }));
-  }, []);
-
-  // Whether the current step passes its configured validator.
-  const canGoNext = useCallback((): boolean => {
-    const currentStepConfig = config.steps[state.currentStep - 1];
-    return currentStepConfig?.validate ? currentStepConfig.validate(state) : true;
-  }, [config.steps, state]);
-
-  // The `isFirstStep` / `isLastStep` derivations are cheap, but
-  // memoizing them avoids re-creating the object on every render.
-  const derived = useMemo(() => {
-    const isFirstStep = state.currentStep === 1;
-    const isLastStep = state.currentStep === totalSteps;
-    const progress = totalSteps === 0 ? 0 : (state.currentStep / totalSteps) * 100;
-    return { isFirstStep, isLastStep, progress };
-  }, [state.currentStep, totalSteps]);
-
-  return {
-    state,
-    currentStep: state.currentStep,
-    totalSteps,
-    isFirstStep: derived.isFirstStep,
-    isLastStep: derived.isLastStep,
-    progress: derived.progress,
-    goToNext,
-    goToPrev,
-    goToStep,
-    updateState,
-    canGoNext,
-  };
-}
-
-/**
- * Use Onboarding Step Hook
- *
- * Hook for managing individual step state.
- */
-export function useOnboardingStep(stepId: string) {
-  const [data, setData] = useState<Record<string, unknown>>({});
-  const [isValid, setIsValid] = useState(false);
-  const [isTouched, setIsTouched] = useState(false);
-
-  // Latest-ref mirror of `data` so `validate` can read the most recent
-  // value synchronously. State updaters must stay pure — the previous
-  // version called setIsValid inside the setData updater.
-  const dataRef = useRef<Record<string, unknown>>({});
-
-  const updateData = useCallback((updates: Record<string, unknown>) => {
-    const next = { ...dataRef.current, ...updates };
-    dataRef.current = next;
-    setData(next);
-    setIsTouched(true);
-  }, []);
-
-  const validate = useCallback((validator: (data: Record<string, unknown>) => boolean) => {
-    setIsValid(validator(dataRef.current));
-  }, []);
-
-  const reset = useCallback(() => {
-    dataRef.current = {};
-    setData({});
-    setIsValid(false);
-    setIsTouched(false);
-  }, []);
-
-  return {
-    stepId,
-    data,
-    isValid,
-    isTouched,
-    updateData,
-    validate,
-    reset,
-  };
-}

package/src/domains/onboarding/index.ts

@@ -1,36 +0,0 @@
-/**
- * @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,
-  ONBOARDING_KEYS,
-} from './utils';
-export type {
-  UserTypeOption,
-  PlatformOption,
-  PlanOption,
-  OnboardingStep,
-  OnboardingConfig,
-  OnboardingState,
-  OnboardingActions,
-  OnboardingWizardProps,
-  StepProgressProps,
-  StepNavigationProps,
-} from './types';

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

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