4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 51:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T8c95,'use client'; /** * A create-workspace flow: four steps, a horizontal Stepper, per-step * validation, and a review step that summarises every answer before anything * is written. * * The horizontal orientation is the right default when a wizard owns the whole * page and the steps are short nouns. It reads as a progress bar with names, * costs one row of vertical space, and leaves the full content column for the * form. Reach for the vertical orientation instead when step labels need * descriptions to be understood, or when the wizard shares its width with * something else. * * Three pieces of state drive the whole flow: `step` (which panel is showing), * the field values, and `attempted` (which steps the user has tried to leave). * Validation is a pure function of the field values, so the same `errors` * object gates the Next button, colors the Stepper, and fills the review * step's issue list — there is no second copy of the rules to drift. * * ## Extending this template * * **Validate on leave, not on keystroke.** `attempted` exists so a field that * has never been filled in is not already red. A step joins the set when the * user presses Next on it, which is the first moment they have asserted it is * done. Everything downstream reads `attempted`, so a new field inherits the * behavior by being added to `validate` — do not add a per-field touched flag. * * **Let people move backward freely.** `onStepClick` is passed unconditionally, * so every step is reachable at any time. A wizard that locks you out of step 1 * because step 3 is invalid turns a typo into a restart. Forward movement is * still gated by the footer button; the stepper is an escape hatch, not the * primary path. * * **`status` is color, not progress.** A Step derives completed/current/upcoming * from its index against `activeStep`; `status="error"` only tints it. That is * why a step can read as completed and still show an error — which is exactly * what you want when someone skips ahead and leaves something broken behind. * * **Keep the review step derived.** Every row in the summary reads the same * state the inputs write. Never copy answers into a separate summary object on * Next: the copy is what goes stale when someone jumps back and edits. * * **One panel, one step.** The content region swaps its contents rather than * stacking every step in a scrolling page. If a step grows past roughly a * screen, that is the signal it is two steps, not the signal to scroll harder. * * **The step is not in a Card.** The pinned header and footer already fence * this region; a card inside them is a second border and, worse, a second * inset — its padding would push every field off the line the title and the * stepper sit on. Cards go around things inside a step (the cost estimate * below), never around the step itself. */ import {useId, useMemo, useRef, useState, type CSSProperties} from 'react'; import {Badge} from '@astryxdesign/core/Badge'; import {Banner} from '@astryxdesign/core/Banner'; import {Button} from '@astryxdesign/core/Button'; import {Card} from '@astryxdesign/core/Card'; import {CheckboxInput} from '@astryxdesign/core/CheckboxInput'; import {CheckboxList, CheckboxListItem} from '@astryxdesign/core/CheckboxList'; import {Divider} from '@astryxdesign/core/Divider'; import {Field} from '@astryxdesign/core/Field'; import {FormLayout} from '@astryxdesign/core/FormLayout'; import {Grid} from '@astryxdesign/core/Grid'; import { Layout, LayoutContent, LayoutFooter, LayoutHeader, } from '@astryxdesign/core/Layout'; import {MetadataList, MetadataListItem} from '@astryxdesign/core/MetadataList'; import {NumberInput} from '@astryxdesign/core/NumberInput'; import {RadioList, RadioListItem} from '@astryxdesign/core/RadioList'; import {SelectableCard} from '@astryxdesign/core/SelectableCard'; import {Selector} from '@astryxdesign/core/Selector'; import {HStack, StackItem, VStack} from '@astryxdesign/core/Stack'; import {Step, Stepper} from '@astryxdesign/core/Stepper'; import {Switch} from '@astryxdesign/core/Switch'; import {Heading, Text} from '@astryxdesign/core/Text'; import {TextArea} from '@astryxdesign/core/TextArea'; import {TextInput} from '@astryxdesign/core/TextInput'; import {useMediaQuery} from '@astryxdesign/core/hooks'; // ── Data ────────────────────────────────────────────────────────────────────── // `isOptional` is read twice — by the Stepper to mark the step and by the // footer to decide whether Skip exists — so it lives on the step rather than // as an index check in two places that could disagree. const STEPS = [ {label: 'Workspace'}, {label: 'Team', isOptional: true}, {label: 'Plan'}, {label: 'Review'}, ]; const REGIONS = [ {value: 'us-east', label: 'US East (N. Virginia)'}, {value: 'us-west', label: 'US West (Oregon)'}, {value: 'eu-central', label: 'EU Central (Frankfurt)'}, {value: 'ap-southeast', label: 'Asia Pacific (Singapore)'}, ]; const ROLE_LABELS: Record = { admin: 'Admin', member: 'Member', guest: 'Guest', }; const PLANS = [ { id: 'starter', label: 'Starter', pricePerSeat: 0, seatLimit: 5, description: 'Up to 5 members, 3 projects, community support.', }, { id: 'growth', label: 'Growth', pricePerSeat: 24, seatLimit: 250, description: 'Unlimited projects, integrations, and standard support.', }, { id: 'scale', label: 'Scale', pricePerSeat: 48, seatLimit: 2000, description: 'Advanced controls, a 99.9% SLA, and a dedicated CSM.', }, ]; const ADDONS = [ { id: 'sso', label: 'SSO / SAML', price: 3, description: 'Single sign-on through Okta, Entra ID, or Google.', }, { id: 'audit', label: 'Audit log export', price: 2, description: 'Stream workspace audit events to your SIEM.', }, { id: 'support', label: 'Priority support', price: 6, description: 'Four-hour response target, 24/5.', }, ]; // Reserved slugs the backend would reject; checked client-side so the user // finds out while typing rather than after pressing Create. const TAKEN_SLUGS = ['admin', 'app', 'api', 'northwind', 'support']; const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/; const SLUG_PATTERN = /^[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/; // ── Styles ──────────────────────────────────────────────────────────────────── // Plain inline styles over Astryx token CSS variables, so the template compiles // in a project with no StyleX pipeline. // The footer's two end zones divide the leftover space equally rather than // sizing to their own contents, which is what keeps the step counter on the // page's centre line. Without the zero basis the counter drifts by half the // difference between the zones — most visibly on the last step, where the // primary button's label grows from "Next" to "Create workspace". const footerZone: CSSProperties = {flexBasis: 0}; // ── Helpers ─────────────────────────────────────────────────────────────────── const money = (n: number) => (n === 0 ? '$0' : `$${n.toLocaleString()}`); /** Split a textarea of addresses on newlines and commas, dropping blanks. */ function parseEmails(raw: string): string[] { return raw .split(/[\n,]/) .map(line => line.trim()) .filter(Boolean); } export default function FormWizardPage() { const isNarrow = useMediaQuery('(max-width: 640px)'); // Field wraps controls that have no label of their own; it needs an id to // point its label at. useId, not a hand-written string, so two of these // templates on one page cannot collide. const planID = useId(); // Focus targets for every field `validate` can complain about, keyed by the // same names it uses. Pressing Next on a blocked step sends focus to the // first of these that has a problem, which scrolls it into view and lets the // field's own error announce itself — so the footer needs no summary line, // and there is no second copy of the message to keep in sync. const fieldRefs = { name: useRef(null), slug: useRef(null), invites: useRef(null), seats: useRef(null), terms: useRef(null), }; const [step, setStep] = useState(0); // Steps the user has tried to advance past. Errors stay silent until a step // is in this set, so an untouched field is never pre-flagged red. const [attempted, setAttempted] = useState>(new Set()); // Step 1 — workspace const [name, setName] = useState('Northwind Robotics'); const [slug, setSlug] = useState('northwind-robotics'); const [region, setRegion] = useState('us-east'); const [visibility, setVisibility] = useState('invite'); // Step 2 — team const [invites, setInvites] = useState( 'amara.diallo@northwind.dev\nfelix.tran@northwind.dev\nrosa.marchetti@northwind.dev', ); const [role, setRole] = useState('member'); const [sendNow, setSendNow] = useState(true); const [inviteNote, setInviteNote] = useState(''); // Step 3 — plan const [planId, setPlanId] = useState('growth'); const [seats, setSeats] = useState(8); const [addons, setAddons] = useState(['audit']); const [digest, setDigest] = useState(true); // Step 4 — review const [acceptedTerms, setAcceptedTerms] = useState(false); const emails = useMemo(() => parseEmails(invites), [invites]); const invalidEmails = useMemo( () => emails.filter(email => !EMAIL_PATTERN.test(email)), [emails], ); const plan = PLANS.find(p => p.id === planId) ?? PLANS[0]; const addonCostPerSeat = ADDONS.filter(a => addons.includes(a.id)).reduce( (sum, a) => sum + a.price, 0, ); const monthlyTotal = (plan.pricePerSeat + addonCostPerSeat) * seats; // One rule set, read by the Next button, the Stepper tint, and the review // step's issue list. Keyed by step index so a step's validity is a lookup. const errorsByStep = useMemo>>(() => { const workspace: Record = {}; if (!name.trim()) { workspace.name = 'Enter a name for the workspace.'; } if (!slug.trim()) { workspace.slug = 'Enter a URL for the workspace.'; } else if (!SLUG_PATTERN.test(slug)) { workspace.slug = 'Use lowercase letters, numbers, and hyphens, starting and ending with a letter or number.'; } else if (TAKEN_SLUGS.includes(slug)) { workspace.slug = `terrace.app/${slug} is already taken.`; } const team: Record = {}; if (invalidEmails.length > 0) { team.invites = `Not a valid email address: ${invalidEmails.join(', ')}`; } const planStep: Record = {}; if (seats < 1) { planStep.seats = 'A workspace needs at least one seat.'; } else if (seats > plan.seatLimit) { planStep.seats = `${plan.label} tops out at ${plan.seatLimit} seats. Choose a larger plan or reduce the seat count.`; } else if (seats < emails.length + 1) { planStep.seats = `You are inviting ${emails.length} ${ emails.length === 1 ? 'person' : 'people' } plus yourself, so you need at least ${emails.length + 1} seats.`; } const review: Record = {}; if (!acceptedTerms) { review.terms = 'Accept the terms to create the workspace.'; } return [workspace, team, planStep, review]; }, [ name, slug, invalidEmails, seats, plan.seatLimit, plan.label, emails.length, acceptedTerms, ]); /** Errors to render for a step: only once the user has tried to leave it. */ const shownErrors = (index: number) => attempted.has(index) ? errorsByStep[index] : {}; const currentErrors = shownErrors(step); const isLastStep = step === STEPS.length - 1; // Steps before the current one that the user has already tried and left // broken — surfaced on the review step so nothing hides behind a panel. const outstanding = STEPS.map((s, i) => ({ ...s, index: i, issues: Object.values(shownErrors(i)), })).filter(s => s.index !== step && s.issues.length > 0); const markAttempted = (index: number) => setAttempted(prev => new Set(prev).add(index)); const goNext = () => { markAttempted(step); // `validate` records each step's problems in the order the fields appear, // so the first key is the first thing on the page that needs attention. // Sending focus there is the whole response to a blocked Next: it scrolls // the field into view, and the error the field is already showing becomes // its accessible description, so a screen reader hears exactly which field // and why rather than a count of how many. const [firstProblem] = Object.keys(errorsByStep[step]); if (firstProblem) { fieldRefs[firstProblem as keyof typeof fieldRefs]?.current?.focus(); return; } if (!isLastStep) { setStep(s => s + 1); } }; // Skip is not Next with a different label. Next asserts the step is done and // validates it; Skip declines the step outright, so it clears what the step // collects and moves on without validating. Clearing is the point: a // half-filled optional step that rides along invisibly is the bug this // button exists to prevent, and a malformed address left behind by someone // who chose not to invite anyone would never be shown again. const goSkip = () => { setInvites(''); setInviteNote(''); setStep(s => Math.min(STEPS.length - 1, s + 1)); }; const goTo = (index: number) => { // Leaving a step forward is an assertion that it is done; leaving it // backward is not, so only mark it when moving on. if (index > step) { markAttempted(step); } setStep(index); }; return ( Create workspace