@voila.dev/ui-email-block-editor 1.1.9

package/src/sections/block-options/block-option-row.tsx

@@ -0,0 +1,79 @@
+import {
+	Field,
+	FieldContent,
+	FieldDescription,
+	FieldLabel,
+} from "@voila.dev/ui/components/field";
+import type { ReactNode } from "react";
+
+/**
+ * One labelled option in « Réglages du bloc ». Every block setting goes
+ * through this row rather than hand-rolling `useId()` + `Label` + control, so
+ * spacing, label typography and description placement cannot drift from block
+ * to block.
+ *
+ * `vertical` stacks the label above a full-width control (text, select,
+ * segmented control); `horizontal` puts the control beside the label, which is
+ * what a `Switch` wants.
+ */
+export function BlockOptionRow({
+	label,
+	htmlFor,
+	description,
+	orientation = "vertical",
+	children,
+}: {
+	label: string;
+	/** The id of the control this row labels; omit for controls that label
+	 * themselves (a radio group carries its own `aria-label`). */
+	htmlFor?: string;
+	description?: string;
+	orientation?: "vertical" | "horizontal";
+	children: ReactNode;
+}) {
+	if (orientation === "horizontal") {
+		return (
+			<Field orientation="horizontal">
+				<FieldContent>
+					<FieldLabel htmlFor={htmlFor}>{label}</FieldLabel>
+					{description === undefined ? null : (
+						<FieldDescription>{description}</FieldDescription>
+					)}
+				</FieldContent>
+				{children}
+			</Field>
+		);
+	}
+
+	return (
+		<Field>
+			<FieldLabel htmlFor={htmlFor}>{label}</FieldLabel>
+			{children}
+			{description === undefined ? null : (
+				<FieldDescription>{description}</FieldDescription>
+			)}
+		</Field>
+	);
+}
+
+/**
+ * A titled group of rows. §1.4 of the editor plan: once a block carries more
+ * than a handful of options they are split into « Contenu », « Apparence » and
+ * « Lien », always in that order.
+ */
+export function BlockOptionSection({
+	title,
+	children,
+}: {
+	title: string;
+	children: ReactNode;
+}) {
+	return (
+		<section className="flex flex-col gap-3">
+			<h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+				{title}
+			</h4>
+			{children}
+		</section>
+	);
+}

package/src/sections/block-options/money-option.tsx

@@ -0,0 +1,69 @@
+import { MoneyInput } from "@voila.dev/ui/components/money-input";
+import { useId } from "react";
+import type { EmailEditorMoney } from "#/document/types.ts";
+import { BlockOptionRow } from "#/sections/block-options/block-option-row.tsx";
+import { EMAIL_PREVIEW_LOCALE } from "#/theme.ts";
+
+/** EUR has two decimals, and it is the only currency the platform transacts
+ * in; widening this means mirroring the domain's `currencyDecimals`. */
+const MINOR_UNITS_PER_UNIT = 100;
+
+/** `2550` → `"25.50"`, and back. The field holds major units because that is
+ * what an author types; the document only ever stores the integer. */
+const moneyToInputValue = (money: EmailEditorMoney): string =>
+	money.amountInMinorUnits === 0
+		? ""
+		: (money.amountInMinorUnits / MINOR_UNITS_PER_UNIT).toString();
+
+const inputValueToMinorUnits = (value: string): number => {
+	const parsed = Number.parseFloat(value.replace(",", "."));
+	return Number.isFinite(parsed)
+		? Math.round(parsed * MINOR_UNITS_PER_UNIT)
+		: 0;
+};
+
+/**
+ * How a price reads on the canvas. The sent email formats it per recipient
+ * (`renderMarketingEmailDocument`); the canvas shows the default locale, so an
+ * author never sees an amount their reader will not get.
+ */
+export const formatPreviewPrice = (money: EmailEditorMoney): string =>
+	new Intl.NumberFormat(EMAIL_PREVIEW_LOCALE, {
+		style: "currency",
+		currency: money.currency,
+	}).format(money.amountInMinorUnits / MINOR_UNITS_PER_UNIT);
+
+/**
+ * The one price control. The document stores integer minor units and a
+ * currency (never a formatted string), so one campaign can be sent in several
+ * locales and formatted per recipient at render time.
+ */
+export function MoneyOption({
+	label,
+	value,
+	onChange,
+	description,
+}: {
+	label: string;
+	value: EmailEditorMoney;
+	onChange: (money: EmailEditorMoney) => void;
+	description?: string;
+}) {
+	const id = useId();
+	return (
+		<BlockOptionRow label={label} htmlFor={id} description={description}>
+			<MoneyInput
+				id={id}
+				value={moneyToInputValue(value)}
+				onValueChange={(next) =>
+					onChange({
+						...value,
+						amountInMinorUnits: inputValueToMinorUnits(next),
+					})
+				}
+				currency={value.currency}
+				currencyLabel="Devise"
+			/>
+		</BlockOptionRow>
+	);
+}

package/src/sections/block-options/segmented-option.tsx

@@ -0,0 +1,62 @@
+import {
+	SegmentedControl,
+	SegmentedControlItem,
+} from "@voila.dev/ui/components/segmented-control";
+import type { ReactNode } from "react";
+import { BlockOptionRow } from "#/sections/block-options/block-option-row.tsx";
+
+/**
+ * A closed choice small enough to show every option at once: alignment, a
+ * column count. Values may be numbers; they are matched back by their string
+ * form, so the callback still receives the typed value.
+ *
+ * An option carrying an `icon` renders icon-only and keeps its `label` as the
+ * accessible name.
+ */
+export function SegmentedOption<Value extends string | number>({
+	label,
+	value,
+	options,
+	onChange,
+	description,
+}: {
+	label: string;
+	value: Value;
+	options: ReadonlyArray<{
+		readonly value: Value;
+		readonly label: string;
+		readonly icon?: ReactNode;
+	}>;
+	onChange: (value: Value) => void;
+	description?: string;
+}) {
+	return (
+		<BlockOptionRow label={label} description={description}>
+			<SegmentedControl
+				size="sm"
+				aria-label={label}
+				value={String(value)}
+				onValueChange={(next) => {
+					const picked = options.find(
+						(option) => String(option.value) === String(next),
+					);
+					if (picked !== undefined) {
+						onChange(picked.value);
+					}
+				}}
+				className="w-full"
+			>
+				{options.map((option) => (
+					<SegmentedControlItem
+						key={String(option.value)}
+						value={String(option.value)}
+						aria-label={option.icon === undefined ? undefined : option.label}
+						className="flex-1"
+					>
+						{option.icon ?? option.label}
+					</SegmentedControlItem>
+				))}
+			</SegmentedControl>
+		</BlockOptionRow>
+	);
+}

package/src/sections/block-options/select-option.tsx

@@ -0,0 +1,76 @@
+import {
+	NativeSelect,
+	NativeSelectOption,
+} from "@voila.dev/ui/components/native-select";
+import { Switch } from "@voila.dev/ui/components/switch";
+import { useId } from "react";
+import { BlockOptionRow } from "#/sections/block-options/block-option-row.tsx";
+
+/**
+ * The one control for a small closed choice — the admin-form default in this
+ * repo. Option values may be numbers (a heading level); they are matched back
+ * by their string form, so the callback still receives the typed value.
+ */
+export function SelectOption<Value extends string | number>({
+	label,
+	value,
+	options,
+	onChange,
+	description,
+}: {
+	label: string;
+	value: Value;
+	options: ReadonlyArray<{ readonly value: Value; readonly label: string }>;
+	onChange: (value: Value) => void;
+	description?: string;
+}) {
+	const id = useId();
+	return (
+		<BlockOptionRow label={label} htmlFor={id} description={description}>
+			<NativeSelect
+				id={id}
+				size="sm"
+				value={String(value)}
+				onChange={(event) => {
+					const picked = options.find(
+						(option) => String(option.value) === event.target.value,
+					);
+					if (picked !== undefined) {
+						onChange(picked.value);
+					}
+				}}
+			>
+				{options.map((option) => (
+					<NativeSelectOption key={String(option.value)} value={option.value}>
+						{option.label}
+					</NativeSelectOption>
+				))}
+			</NativeSelect>
+		</BlockOptionRow>
+	);
+}
+
+/** The one boolean control: a switch beside its label, description below. */
+export function ToggleOption({
+	label,
+	checked,
+	onChange,
+	description,
+}: {
+	label: string;
+	checked: boolean;
+	onChange: (checked: boolean) => void;
+	description?: string;
+}) {
+	const id = useId();
+	return (
+		<BlockOptionRow
+			label={label}
+			htmlFor={id}
+			description={description}
+			orientation="horizontal"
+		>
+			<Switch id={id} checked={checked} onCheckedChange={onChange} />
+		</BlockOptionRow>
+	);
+}

package/src/sections/block-options/text-option.tsx

@@ -0,0 +1,91 @@
+import { Input } from "@voila.dev/ui/components/input";
+import { Textarea } from "@voila.dev/ui/components/textarea";
+import { useId } from "react";
+import { BlockOptionRow } from "#/sections/block-options/block-option-row.tsx";
+
+/** A single-line text option (a label, a title, a price caption). */
+export function TextOption({
+	label,
+	value,
+	onChange,
+	placeholder,
+	description,
+}: {
+	label: string;
+	value: string;
+	onChange: (value: string) => void;
+	placeholder?: string;
+	description?: string;
+}) {
+	const id = useId();
+	return (
+		<BlockOptionRow label={label} htmlFor={id} description={description}>
+			<Input
+				id={id}
+				value={value}
+				placeholder={placeholder}
+				onChange={(event) => onChange(event.target.value)}
+			/>
+		</BlockOptionRow>
+	);
+}
+
+/** A multi-line text option (a card description, a rating question). */
+export function TextAreaOption({
+	label,
+	value,
+	onChange,
+	placeholder,
+	description,
+	rows = 3,
+}: {
+	label: string;
+	value: string;
+	onChange: (value: string) => void;
+	placeholder?: string;
+	description?: string;
+	rows?: number;
+}) {
+	const id = useId();
+	return (
+		<BlockOptionRow label={label} htmlFor={id} description={description}>
+			<Textarea
+				id={id}
+				rows={rows}
+				value={value}
+				placeholder={placeholder}
+				onChange={(event) => onChange(event.target.value)}
+			/>
+		</BlockOptionRow>
+	);
+}
+
+/**
+ * The one destination-URL control. Always « Lien (URL) », always
+ * `type="url"` with the `https://` placeholder, so a link field is
+ * recognisable at a glance in any block (§1.2 of the editor plan).
+ */
+export function LinkOption({
+	label = "Lien (URL)",
+	value,
+	onChange,
+	description,
+}: {
+	label?: string;
+	value: string;
+	onChange: (href: string) => void;
+	description?: string;
+}) {
+	const id = useId();
+	return (
+		<BlockOptionRow label={label} htmlFor={id} description={description}>
+			<Input
+				id={id}
+				type="url"
+				placeholder="https://"
+				value={value}
+				onChange={(event) => onChange(event.target.value)}
+			/>
+		</BlockOptionRow>
+	);
+}