mirror of
https://github.com/lbr77/SideImpactor.git
synced 2026-05-06 11:14:01 -04:00
refactor: migrate frontend to React + Tailwind, add Docker + tests
Replace the vanilla-TS innerHTML frontend with a type-checked React component tree (React 19 + Tailwind v4 + Vite). Frontend: - 14 components: Header, Stepper, LoginPage, LoginModal, SignPage, DropZone, DevicePicker, ProgressCard, SavedAccountsList, TrustModal, TwoFactorModal, Button, Field, Chip, Modal - lib/ extracts: storage (10 localStorage keys preserved), pair-record, account-session, log-parser, ids, use-log hook - flows/ encapsulate async pair/login/sign/install with dependency injection - Accounts page as main view with Add Account modal - Fullscreen progress overlay during sign/install - Account selector + device picker on Sign page - Security notice in login modal (server trust warning) - All addLog calls mirrored to console.log for devtools debugging Build: - bun run dev: submodule init + install + wasm dist + vite + wrangler - bun run setup: one-shot project bootstrap - Docker: multi-stage bun build → nginx on :3000 - build:wasm:dist copies pre-built src→dist (no Rust/Emscripten needed) - jszip/node-forge/fflate pre-bundled for CJS→ESM conversion Tests: - 163 vitest tests (happy-dom): all lib, components, App integration, WASM dist artifact checks, libcurl Apple connectivity, anisette init error handling Cleanup: - Delete yarn.lock (bun.lock canonical), expand .gitignore - Remove README.zh.md, rewrite README.md + AGENTS.md - Update libcurl.js submodule to f65d440 (CI build artifacts)
This commit is contained in:
45
frontend/src/components/Stepper.tsx
Normal file
45
frontend/src/components/Stepper.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
type StepState = 'idle' | 'active' | 'done';
|
||||
|
||||
interface Step {
|
||||
label: string;
|
||||
state: StepState;
|
||||
}
|
||||
|
||||
interface StepperProps {
|
||||
steps: Step[];
|
||||
}
|
||||
|
||||
function StepMarker({ state, index }: { state: StepState; index: number }) {
|
||||
if (state === 'done') {
|
||||
return (
|
||||
<span className="stepper-marker" aria-hidden="true">
|
||||
✓
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span className="stepper-marker" aria-hidden="true">
|
||||
{index + 1}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function Stepper({ steps }: StepperProps) {
|
||||
return (
|
||||
<div className="stepper" role="list">
|
||||
{steps.map((step, index) => {
|
||||
const isLast = index === steps.length - 1;
|
||||
const nextStepDone = !isLast && steps[index].state === 'done';
|
||||
return (
|
||||
<div key={step.label} className="contents">
|
||||
<div className="stepper-step" role="listitem" data-state={step.state}>
|
||||
<StepMarker state={step.state} index={index} />
|
||||
<span className="stepper-label">{step.label}</span>
|
||||
</div>
|
||||
{!isLast ? <div className="stepper-bar" data-done={nextStepDone ? 'true' : 'false'} /> : null}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user