refactor(onboarding): replace 50-prop drilling with OnboardingContext

OnboardingStepPanel previously forwarded ~50 props to seven step
components, so adding a single wizard field meant touching four layers.
Introduce a renderer-local React Context (OnboardingProvider /
useOnboarding) that carries all wizard state and actions (connectors,
node status, company inputs, model selection, execution mode, mission,
launch summary, locale, t, error/loading). Step panels now receive only
their navigation callbacks (onContinue / onBack / onLaunch / onFinish)
and read everything else via useOnboarding(). CompanyOnboarding wraps
the step panel tree in OnboardingProvider with a memoised value.

Business logic is unchanged: each onContinueFrom* transition, the
bootstrap call, and the welcome-step branch remain exactly as before;
this refactor only moves the data-passing mechanism.
This commit is contained in:
ZacharyZhang-NY committed 2026-04-16 22:11:45 -04:00
1 parent f3816c6115
commit de77f5f38e
10 files changed
+256 -333

No files matched your search

@@ -1,23 +1,16 @@
import { motion } from "framer-motion";
import { ArrowRight, Brain, UserCircle, type Icon } from "@phosphor-icons/react";
import type { ExecutionMode } from "@shared/types";
import { getStepNumber, TOTAL_STEPS } from "./OnboardingHero";
import { useOnboarding } from "./OnboardingContext";
interface ExecutionModeStepProps {
executionMode: ExecutionMode;
setExecutionMode: (mode: ExecutionMode) => void;
onContinue: () => void;
onBack: () => void;
t: (key: string) => string;
}
export function ExecutionModeStep({
executionMode,
setExecutionMode,
onContinue,
onBack,
t,
}: ExecutionModeStepProps) {
export function ExecutionModeStep({ onContinue, onBack }: ExecutionModeStepProps) {
const { executionMode, setExecutionMode, t } = useOnboarding();
return (
<motion.div
key="executionmode"