ben.stull
afe36fd347
Claude Design export for SD-0001 (login + create-storefront surfaces): wf-*/hf-* screens, design-system bundle, offline preview. First artifact in the ui/designs/ collection (ecomm#8). Also ignore .DS_Store. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
215 lines
12 KiB
React
215 lines
12 KiB
React
// wf-bootstrap.jsx — Section 5: Bootstrap (PUC-10 / PUC-11, INV-1/INV-7).
|
|
// Operator & developer surfaces — terminals and a runbook, not app screens.
|
|
const { Screen: BScreen, Wordmark: BWordmark, WF_T: BT, WF_DS: BDS } = window;
|
|
const { Eyebrow: BEyebrow, Soul: BSoul, Tag: BTag, Callout: BCallout } = BDS;
|
|
|
|
const MONO = 'ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace';
|
|
|
|
// ── Terminal window ────────────────────────────────────────────────────────
|
|
function Terminal({ title, lines, style = {} }) {
|
|
return (
|
|
<div style={{
|
|
background: 'var(--wv-night)', border: `1px solid ${BT.hair}`, borderRadius: 12,
|
|
overflow: 'hidden', display: 'flex', flexDirection: 'column', ...style,
|
|
}}>
|
|
<div style={{ flex: '0 0 auto', height: 40, padding: '0 14px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: `1px solid ${BT.hair}`, background: 'rgba(155,140,255,.05)' }}>
|
|
<span style={{ display: 'flex', gap: 6 }}>
|
|
{['rgba(155,140,255,.5)', 'rgba(244,199,107,.5)', 'rgba(237,234,255,.3)'].map((c, i) => (
|
|
<span key={i} style={{ width: 9, height: 9, borderRadius: 5, background: c }} />
|
|
))}
|
|
</span>
|
|
<span style={{ fontFamily: MONO, fontSize: 12, color: BT.mute, marginLeft: 4 }}>{title}</span>
|
|
</div>
|
|
<div style={{ flex: 1, padding: '16px 18px', fontFamily: MONO, fontSize: 12.5, lineHeight: 1.75, whiteSpace: 'pre-wrap', overflow: 'hidden' }}>
|
|
{lines.map((ln, i) => <TLine key={i} ln={ln} />)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
function TLine({ ln }) {
|
|
const [k, t] = ln;
|
|
if (k === 'sp') return <div style={{ height: 9 }} />;
|
|
if (k === 'cmd') return <div><span style={{ color: BT.lilac }}>$ </span><span style={{ color: BT.star }}>{t}</span></div>;
|
|
if (k === 'step') return <div><span style={{ color: BT.lilac }}>→ </span><span style={{ color: BT.soft }}>{t}</span></div>;
|
|
if (k === 'ok') return <div><span style={{ color: BT.gold }}>✓ </span><span style={{ color: BT.star }}>{t}</span></div>;
|
|
if (k === 'hl') return <div style={{ color: BT.gold, background: 'rgba(244,199,107,.08)', margin: '0 -8px', padding: '1px 8px', borderRadius: 4 }}>{t}</div>;
|
|
if (k === 'note') return <div style={{ color: 'var(--wv-starlight-55)', fontStyle: 'italic' }}>{t}</div>;
|
|
return <div style={{ color: BT.mute }}>{t}</div>;
|
|
}
|
|
|
|
// ── Wrap a section artboard on the sky ─────────────────────────────────────
|
|
function Bay({ children, pad = 30 }) {
|
|
return <div style={{ height: '100%', background: BT.sky, padding: pad, boxSizing: 'border-box', overflow: 'hidden', fontFamily: BT.body, display: 'flex', flexDirection: 'column' }}>{children}</div>;
|
|
}
|
|
function BayHead({ kicker, title, sub }) {
|
|
return (
|
|
<div style={{ marginBottom: 20 }}>
|
|
<BEyebrow style={{ margin: '0 0 8px' }}>{kicker}</BEyebrow>
|
|
<h2 style={{ fontFamily: BT.disp, fontWeight: 700, letterSpacing: '-0.015em', fontSize: 22, color: BT.star, margin: '0 0 6px', lineHeight: 1.1 }}>{title}</h2>
|
|
{sub && <p style={{ fontFamily: BT.body, fontSize: 13.5, lineHeight: 1.5, color: BT.soft, margin: 0, maxWidth: 560 }}>{sub}</p>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── 1 · The principle — empty is a working state (INV-1) ───────────────────
|
|
function BootstrapPrinciple() {
|
|
const steps = [
|
|
['Operator starts the app', 'scripts/dev.sh locally · flotilla deploy when deployed', 'lilac'],
|
|
['App migrates itself', 'pending .sql migrations apply in order, fail-stop (INV-7)', 'lilac'],
|
|
['/healthz goes green', 'process up · DB reachable · migrations current', 'gold'],
|
|
['First merchant walks the product', 'sign up → create storefront → admin (PUC-2 / 4 / 6)', 'gold'],
|
|
['First rows exist', 'created through the flows alone — nothing placed by hand', 'lilac'],
|
|
];
|
|
return (
|
|
<Bay>
|
|
<BayHead kicker="INV-1 · the bootstrap property" title="Empty is a working state"
|
|
sub="No seed step, ever. A fresh, empty database is a first-class state the product brings to life itself — which is what makes launching anywhere an ordinary, rehearsed act." />
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 0, position: 'relative' }}>
|
|
{steps.map(([t, d, c], i) => {
|
|
const col = c === 'gold' ? BT.gold : BT.lilac;
|
|
return (
|
|
<div key={i} style={{ display: 'flex', gap: 16, paddingBottom: i < steps.length - 1 ? 18 : 0 }}>
|
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flex: '0 0 auto' }}>
|
|
<span style={{ width: 26, height: 26, borderRadius: 13, border: `1.5px solid ${col}`, color: col, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: BT.disp, fontWeight: 700, fontSize: 13 }}>{i + 1}</span>
|
|
{i < steps.length - 1 && <span style={{ width: 1.5, flex: 1, minHeight: 22, background: BT.hair }} />}
|
|
</div>
|
|
<div style={{ paddingTop: 2 }}>
|
|
<div style={{ fontFamily: BT.disp, fontWeight: 500, fontSize: 15, color: BT.star }}>{t}</div>
|
|
<div style={{ fontFamily: MONO, fontSize: 11.5, color: BT.mute, marginTop: 3 }}>{d}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</Bay>
|
|
);
|
|
}
|
|
|
|
// ── 2 · The runbook — docs/BOOTSTRAP.md (paper) ────────────────────────────
|
|
function RunbookDoc() {
|
|
const envs = [
|
|
['localhost', './scripts/dev.sh', 'Docker is the one prerequisite. Brings up Postgres, migrates, serves on :5173.'],
|
|
['pre-prod (PPE)', 'flotilla deploy ecomm --env ppe', 'Provisions Cloud SQL, resolves secrets, migrates at startup. Rehearse here first.'],
|
|
['production', 'flotilla deploy ecomm --env prod', 'The identical gesture. Day-one prod is simply the bootstrap state.'],
|
|
];
|
|
return (
|
|
<div style={{ height: '100%', background: 'var(--wv-paper)', padding: '34px 38px', boxSizing: 'border-box', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
|
|
<span style={{ fontFamily: MONO, fontSize: 12, color: 'var(--wv-violet)', background: 'rgba(124,111,224,.12)', padding: '3px 10px', borderRadius: 999 }}>docs/BOOTSTRAP.md</span>
|
|
<span style={{ fontFamily: MONO, fontSize: 11.5, color: '#8A7FB0' }}>the documented gesture</span>
|
|
</div>
|
|
<h2 style={{ fontFamily: BT.disp, fontWeight: 700, letterSpacing: '-0.015em', fontSize: 26, color: 'var(--wv-ink)', margin: '0 0 8px', lineHeight: 1.08 }}>Bringing ecomm up from empty</h2>
|
|
<p style={{ fontFamily: BT.body, fontSize: 14, lineHeight: 1.55, color: '#4B4170', margin: '0 0 22px', maxWidth: 560 }}>
|
|
One gesture, three environments. No hand-seeded data — the first merchant arrives through the product flows alone.
|
|
</p>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
|
{envs.map(([env, cmd, note], i) => (
|
|
<div key={i} style={{ display: 'grid', gridTemplateColumns: '128px 1fr', gap: 18, alignItems: 'baseline' }}>
|
|
<span style={{ fontFamily: BT.disp, fontWeight: 500, fontSize: 14, color: 'var(--wv-ink)' }}>{env}</span>
|
|
<div>
|
|
<div style={{ fontFamily: MONO, fontSize: 12.5, color: 'var(--wv-ink)', background: '#ECE8F7', border: '1px solid #DCD5F0', borderRadius: 8, padding: '7px 11px', display: 'inline-block' }}>{cmd}</div>
|
|
<div style={{ fontFamily: BT.body, fontSize: 12.5, lineHeight: 1.5, color: '#6A5F90', marginTop: 6 }}>{note}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div style={{ flex: 1 }} />
|
|
<BCallout onLight>Empty is a working state — there is no seed.</BCallout>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── 3 · localhost — scripts/dev.sh ─────────────────────────────────────────
|
|
function DevTerminal() {
|
|
const lines = [
|
|
['cmd', 'git clone …/wiggleverse-ecomm && cd wiggleverse-ecomm'],
|
|
['cmd', './scripts/dev.sh'],
|
|
['sp'],
|
|
['step', 'datastore: starting postgres (docker compose up)…'],
|
|
['ok', 'postgres healthy · ecomm_dev · :5432'],
|
|
['step', 'migrations: applying pending…'],
|
|
['ok', '0001_init applied · schema current'],
|
|
['step', 'backend: uvicorn on :8000'],
|
|
['step', 'web: vite on :5173 (proxying /api)'],
|
|
['ok', '/healthz 200 {status:"ok", migrations:"current"}'],
|
|
['sp'],
|
|
['out', ' ecomm is up against an empty database.'],
|
|
['hl', ' open http://localhost:5173'],
|
|
['sp'],
|
|
['note', 'one-time codes print to this log (LogMailer) — no real mail in dev.'],
|
|
];
|
|
return (
|
|
<Bay>
|
|
<BayHead kicker="PUC-10 · localhost" title="One command from clean checkout"
|
|
sub="A developer reaches “first merchant, first storefront” with Docker as the only prerequisite — the app migrates an empty database itself." />
|
|
<Terminal title="scripts/dev.sh" lines={lines} style={{ flex: 1 }} />
|
|
</Bay>
|
|
);
|
|
}
|
|
|
|
// ── 4 · The code channel — dev log vs real email ───────────────────────────
|
|
function DevChannel() {
|
|
return (
|
|
<Bay>
|
|
<BayHead kicker="PUC-10 / PUC-11 · the OTC channel" title="Where the one-time code lands"
|
|
sub="Same issue/verify path everywhere — only the mailer differs by configuration (INV-8)." />
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 16, flex: 1 }}>
|
|
<div>
|
|
<ChanLabel tone="lilac">Dev — the code prints to the backend log</ChanLabel>
|
|
<Terminal title="backend · LogMailer" lines={[
|
|
['out', '[mailer] adapter=LogMailer'],
|
|
['out', ' to: mara@studiofern.com'],
|
|
['hl', ' subject: Your ecomm code: 419 204'],
|
|
['out', ' code valid 10m · single-use · 5 tries'],
|
|
]} />
|
|
</div>
|
|
<div>
|
|
<ChanLabel tone="gold">Deployed — the code arrives as real email</ChanLabel>
|
|
<div style={{ background: BT.raised, border: `1px solid ${BT.hairCard}`, borderRadius: 12, padding: 16 }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: BT.body, fontSize: 12, color: BT.mute, marginBottom: 8, borderBottom: `1px solid ${BT.hair}`, paddingBottom: 8 }}>
|
|
<span>ecomm <no-reply@ecomm.wiggleverse.org></span><span>now</span>
|
|
</div>
|
|
<div style={{ fontFamily: BT.disp, fontWeight: 500, fontSize: 15, color: BT.star, marginBottom: 6 }}>Your ecomm code: 419 204</div>
|
|
<div style={{ fontFamily: BT.body, fontSize: 12.5, lineHeight: 1.5, color: BT.soft }}>
|
|
Enter this code to sign in. It's good for 10 minutes. If you didn't request it, ignore this email.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Bay>
|
|
);
|
|
}
|
|
function ChanLabel({ children, tone }) {
|
|
const c = tone === 'gold' ? BT.gold : BT.lilac;
|
|
return <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 9, fontFamily: BT.body, fontSize: 12.5, color: BT.soft }}>
|
|
<span aria-hidden="true" style={{ color: c }}>{tone === 'gold' ? '◆' : '◇'}</span>{children}
|
|
</div>;
|
|
}
|
|
|
|
// ── 5 · deployed — flotilla (PPE then Prod) ────────────────────────────────
|
|
function DeployTerminal() {
|
|
const lines = [
|
|
['cmd', 'flotilla deploy ecomm --env ppe'],
|
|
['sp'],
|
|
['step', 'provision: Cloud SQL (postgres) · backups + PITR…'],
|
|
['ok', 'database ready · secrets resolved from Secret Manager'],
|
|
['step', 'deploy: image → single VM · fail-stop'],
|
|
['step', 'migrations: applying at startup…'],
|
|
['ok', '0001_init applied'],
|
|
['ok', '/healthz 200 — ppe live'],
|
|
['out', ' rehearsal: real sign-up (real email) → storefront → admin ✓'],
|
|
['sp'],
|
|
['cmd', 'flotilla deploy ecomm --env prod'],
|
|
['ok', 'same gesture — day-one prod is the bootstrap state'],
|
|
];
|
|
return (
|
|
<Bay>
|
|
<BayHead kicker="PUC-11 · pre-prod, then prod" title="The same gesture, deployed"
|
|
sub="The operator runs flotilla; PPE rehearses Prod with real email (BUC-5a). No environment is “later.”" />
|
|
<Terminal title="flotilla — operator front door" lines={lines} style={{ flex: 1 }} />
|
|
</Bay>
|
|
);
|
|
}
|
|
|
|
Object.assign(window, { BootstrapPrinciple, RunbookDoc, DevTerminal, DevChannel, DeployTerminal });
|