Save bar

import { Input } from "@oration/canon/components/input";import { SaveBar } from "@oration/canon/components/save-bar";import { SettingsSelect } from "@oration/canon/components/select-field";import { descriptionId, SettingsGroup, SettingsRow } from "@oration/canon/components/settings-section";import { Switch } from "@oration/canon/components/switch";import { toast } from "@oration/canon/components/toast";import { useDirtyForm } from "@oration/canon/hooks/use-dirty-form";import * as React from "react";export function ChangeCount() {    const id = React.useId();    const form = useDirtyForm(        {            payer: "Cedarline Inc.",            terms: "net-30",            approver: "maya",            notify: true,        },        {            onSave: () => {                toast.add({ type: "success", title: "Changes saved" });            },        },    );    return (        <div className="relative h-80 w-full max-w-xl overflow-y-auto rounded-xl bg-background p-4 shadow-border">            <SettingsGroup>                <SettingsRow                    label="Payer name"                    htmlFor={`${id}-payer`}                    description="Printed on every remittance."                >                    <Input                        id={`${id}-payer`}                        value={form.values.payer}                        onChange={(event) =>                            form.set("payer", event.target.value)                        }                        aria-describedby={descriptionId(`${id}-payer`)}                        className="sm:w-56"                    />                </SettingsRow>                <SettingsRow label="Default terms" htmlFor={`${id}-terms`}>                    <SettingsSelect                        id={`${id}-terms`}                        value={form.values.terms}                        onValueChange={(terms) => form.set("terms", terms)}                        options={[                            { value: "net-15", label: "Net 15" },                            { value: "net-30", label: "Net 30" },                            { value: "net-45", label: "Net 45" },                        ]}                        className="sm:w-56"                    />                </SettingsRow>                <SettingsRow label="Final approver" htmlFor={`${id}-approver`}>                    <SettingsSelect                        id={`${id}-approver`}                        value={form.values.approver}                        onValueChange={(approver) =>                            form.set("approver", approver)                        }                        options={[                            { value: "maya", label: "Maya Okafor" },                            { value: "priya", label: "Priya Raman" },                            { value: "tomas", label: "Tomás Ferreira" },                        ]}                        className="sm:w-56"                    />                </SettingsRow>                <SettingsRow                    inline                    label="Email suppliers when paid"                    htmlFor={`${id}-notify`}                >                    <Switch                        id={`${id}-notify`}                        checked={form.values.notify}                        onCheckedChange={(notify) => form.set("notify", notify)}                    />                </SettingsRow>            </SettingsGroup>            <SaveBar                dirty={form.isDirty}                changes={form.dirtyCount}                saving={form.saving}                onDiscard={form.reset}                onSave={() => void form.save()}            />        </div>    );}

import { Input } from "@oration/canon/components/input";import { SaveBar } from "@oration/canon/components/save-bar";import { descriptionId, SettingsGroup, SettingsRow } from "@oration/canon/components/settings-section";import { Switch } from "@oration/canon/components/switch";import { toast } from "@oration/canon/components/toast";import { useDirtyForm } from "@oration/canon/hooks/use-dirty-form";import * as React from "react";export function SavingAndFailure() {    const id = React.useId();    const [failNext, setFailNext] = React.useState(false);    const form = useDirtyForm(        { holdDays: "3", reminder: true },        {            onSave: async () => {                await new Promise((resolve) => setTimeout(resolve, 1200));                if (failNext) {                    setFailNext(false);                    toast.add({                        type: "error",                        title: "Couldn't save changes",                        description: "Check your connection and try again.",                    });                    throw new Error("Save failed");                }                toast.add({ type: "success", title: "Changes saved" });            },        },    );    return (        <div className="flex w-full max-w-xl flex-col gap-3">            <div className="flex items-center gap-2.5">                <Switch                    id={`${id}-fail`}                    checked={failNext}                    onCheckedChange={setFailNext}                />                <label                    htmlFor={`${id}-fail`}                    className="text-13 text-muted-foreground"                >                    Make the next save fail                </label>            </div>            <div className="relative h-72 overflow-y-auto rounded-xl bg-background p-4 shadow-border">                <SettingsGroup>                    <SettingsRow                        label="Hold new suppliers"                        htmlFor={`${id}-hold`}                        description="Days before a new supplier's first payment can go out."                    >                        <Input                            id={`${id}-hold`}                            inputMode="numeric"                            value={form.values.holdDays}                            onChange={(event) =>                                form.set("holdDays", event.target.value)                            }                            aria-describedby={descriptionId(`${id}-hold`)}                            className="tabular-nums sm:w-24"                        />                    </SettingsRow>                    <SettingsRow                        inline                        label="Remind approvers"                        htmlFor={`${id}-reminder`}                        description="Nudge the approver a day before the cutoff."                    >                        <Switch                            id={`${id}-reminder`}                            checked={form.values.reminder}                            onCheckedChange={(reminder) =>                                form.set("reminder", reminder)                            }                            aria-describedby={descriptionId(`${id}-reminder`)}                        />                    </SettingsRow>                </SettingsGroup>                <SaveBar                    dirty={form.isDirty}                    changes={form.dirtyCount}                    saving={form.saving}                    onDiscard={form.reset}                    onSave={() => void form.save()}                />            </div>        </div>    );}

import { SaveBar } from "@oration/canon/components/save-bar";import { SettingsGroup, SettingsRow } from "@oration/canon/components/settings-section";import { Switch } from "@oration/canon/components/switch";import { toast } from "@oration/canon/components/toast";import { useDirtyForm } from "@oration/canon/hooks/use-dirty-form";import * as React from "react";export function CustomMessage() {    const id = React.useId();    const approvers = [        { key: "maya", name: "Maya Okafor", role: "VP of Revenue" },        { key: "priya", name: "Priya Raman", role: "Controller" },        { key: "jordan", name: "Jordan Lee", role: "AP lead" },    ] as const;    const form = useDirtyForm(        { maya: true, priya: true, jordan: false },        {            onSave: () => {                toast.add({                    type: "success",                    title: "Approval chain updated",                    description: "Applies from the Friday, Oct 2 payment run.",                });            },        },    );    return (        <div className="relative h-72 w-full max-w-xl overflow-y-auto rounded-xl bg-background p-4 shadow-border">            <SettingsGroup>                {approvers.map((approver) => (                    <SettingsRow                        key={approver.key}                        inline                        label={approver.name}                        description={approver.role}                        htmlFor={`${id}-${approver.key}`}                    >                        <Switch                            id={`${id}-${approver.key}`}                            checked={form.values[approver.key]}                            onCheckedChange={(on) => form.set(approver.key, on)}                        />                    </SettingsRow>                ))}            </SettingsGroup>            <SaveBar                dirty={form.isDirty}                message="Approval changes apply to the next payment run"                saveLabel="Apply changes"                discardLabel="Revert"                saving={form.saving}                onDiscard={form.reset}                onSave={() => void form.save()}            />        </div>    );}

import { Input } from "@oration/canon/components/input";import { SaveBar } from "@oration/canon/components/save-bar";import { descriptionId, SettingsGroup, SettingsRow } from "@oration/canon/components/settings-section";import { toast } from "@oration/canon/components/toast";import { useDirtyForm } from "@oration/canon/hooks/use-dirty-form";import * as React from "react";export function BlockedSave() {    const id = React.useId();    const form = useDirtyForm(        { replyTo: "ap@cedarline.com" },        {            onSave: () => {                toast.add({ type: "success", title: "Changes saved" });            },        },    );    const invalid = !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.values.replyTo);    return (        <div className="relative h-64 w-full max-w-xl overflow-y-auto rounded-xl bg-background p-4 shadow-border">            <SettingsGroup>                <SettingsRow                    label="Reply-to address"                    htmlFor={`${id}-reply`}                    description={                        invalid ? (                            <span className="text-destructive">                                Enter a full email address, like                                ap@cedarline.com.                            </span>                        ) : (                            "Supplier replies to remittance emails land here."                        )                    }                >                    <Input                        id={`${id}-reply`}                        value={form.values.replyTo}                        onChange={(event) =>                            form.set("replyTo", event.target.value)                        }                        aria-invalid={invalid || undefined}                        aria-describedby={descriptionId(`${id}-reply`)}                        className="sm:w-56"                    />                </SettingsRow>            </SettingsGroup>            <SaveBar                dirty={form.isDirty}                changes={form.dirtyCount}                message={                    invalid ? "Enter a full email address to save" : undefined                }                saveDisabled={invalid}                saving={form.saving}                onDiscard={form.reset}                onSave={() => void form.save()}            />        </div>    );}

import { SaveBar } from "@oration/canon/components/save-bar";import { toast } from "@oration/canon/components/toast";export function StatesMatrix() {    const rows = [        { label: "Unsaved", saving: false, blocked: false },        { label: "Saving", saving: true, blocked: false },        { label: "Save blocked", saving: false, blocked: true },    ];    return (        <div className="grid w-full max-w-xl grid-cols-[6rem_minmax(0,1fr)] items-center gap-x-4 gap-y-3">            {rows.map((row) => (                <div key={row.label} className="contents">                    <span className="text-13 text-muted-foreground">                        {row.label}                    </span>                    <div>                        <SaveBar                            dirty                            changes={2}                            message={                                row.blocked                                    ? "Fix the overlapping hours to save"                                    : undefined                            }                            saving={row.saving}                            saveDisabled={row.blocked}                            shortcut={false}                            warnOnLeave={false}                            className="mt-0"                            onDiscard={() =>                                toast.add({ title: "Changes discarded" })                            }                            onSave={() =>                                toast.add({                                    type: "success",                                    title: "Changes saved",                                })                            }                        />                    </div>                </div>            ))}        </div>    );}