feat(03-05): wire App.tsx step router and make App.test GREEN
- 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
This commit is contained in:
+36
-3
@@ -1,12 +1,45 @@
|
||||
// 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>
|
||||
<div className="p-4">
|
||||
<h1 className="text-2xl font-bold">Ready2Blob</h1>
|
||||
</div>
|
||||
<WizardShell />
|
||||
</WizardProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user