kawa
8674bb83b3
- App.tsx: WizardShell routes to BackendSelectionStep/RemoteConfigStep/DeploymentStep - App.tsx: StepIndicator renders above every step as persistent breadcrumb - App.tsx: RemoteConfigStep keyed on backendType to force remount on backend change - App.test.tsx: all 3 WIZD-02 tests GREEN (step 0, 1, 2 routing verified) - Full suite: 87 tests GREEN across 11 test files
46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
// src/App.tsx
|
|
// Step router — renders the correct step component based on currentStep.
|
|
// StepIndicator renders above each step as persistent breadcrumb navigation.
|
|
|
|
import { useWizard } from './store/context';
|
|
import { WizardProvider } from './store/context';
|
|
import { StepIndicator } from './components/wizard/StepIndicator';
|
|
import { BackendSelectionStep } from './components/wizard/BackendSelectionStep';
|
|
import { RemoteConfigStep } from './components/wizard/RemoteConfigStep';
|
|
import { DeploymentStep } from './components/wizard/DeploymentStep';
|
|
|
|
function WizardShell() {
|
|
const { state } = useWizard();
|
|
|
|
const steps = [
|
|
<BackendSelectionStep key="backend" />,
|
|
// Key on backendType to force remount when backend changes — prevents stale form values
|
|
<RemoteConfigStep key={state.remote.backendType ?? 'none'} />,
|
|
<DeploymentStep key="deployment" />,
|
|
];
|
|
|
|
// Guard: clamp to valid range (phase 4 will add step 3 for review/download)
|
|
const stepIndex = Math.min(state.currentStep, steps.length - 1);
|
|
const CurrentStep = steps[stepIndex];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex flex-col items-center py-12 px-4">
|
|
<div className="w-full max-w-2xl">
|
|
<h1 className="text-3xl font-bold text-gray-900 mb-8 text-center">Ready2Blob</h1>
|
|
<StepIndicator />
|
|
<div className="mt-8">
|
|
{CurrentStep}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function App() {
|
|
return (
|
|
<WizardProvider>
|
|
<WizardShell />
|
|
</WizardProvider>
|
|
);
|
|
}
|