@vectoriox/iox-ui 5.28.0 → 5.29.0

package/src/forms-core/form-presets.ts

@@ -0,0 +1,105 @@
+/**
+ * FORM PRESETS — a complete, working form as one insert: its fields, its submit label and the words of
+ * its Success and Error blocks. ONE definition (W1.1): the builder's Forms tray builds a preset from
+ * here (`buildFormPreset`, iox-builder), and the site composer (`generation-core`) stamps the SAME preset
+ * into a composed page, so a generated contact form is the real one — never a second, drifting copy.
+ * Data only: framework-free, like the rest of forms-core.
+ */
+
+export enum FormPresetId {
+    Contact = 'contact',
+    Newsletter = 'newsletter',
+    Application = 'application',
+    Booking = 'booking',
+}
+
+export interface FormPresetField {
+    label: string;
+    control: string;
+    required?: boolean;
+    help?: string;
+    placeholder?: string;
+    /** Choices for select/radio, `value|Label` per line — the Field's `optionsText` trait. */
+    optionsText?: string;
+    rows?: number;
+}
+
+export interface FormPresetDef {
+    id: string;
+    name: string;
+    icon: string;
+    /** One line in the panel: what it collects and where it goes. */
+    description: string;
+    /** The form's author-facing name, which the submissions inbox groups by. */
+    formName: string;
+    fields: FormPresetField[];
+    submitLabel: string;
+    successText: string;
+    errorText: string;
+}
+
+export const FORM_PRESETS: readonly FormPresetDef[] = Object.freeze([
+    {
+        id: FormPresetId.Contact, name: 'Contact', icon: 'ph-thin ph-envelope-simple',
+        description: 'Name, email and a message. Stored, and emailed to you.',
+        formName: 'Contact form',
+        fields: [
+            { label: 'Full name', control: 'text', required: true },
+            { label: 'Email', control: 'email', required: true },
+            { label: 'Message', control: 'textarea', required: true, rows: 5 },
+        ],
+        submitLabel: 'Send message',
+        successText: 'Thanks — we’ll be in touch shortly.',
+        errorText: 'We couldn’t send your message. Please try again — your answers are still here.',
+    },
+    {
+        id: FormPresetId.Newsletter, name: 'Newsletter', icon: 'ph-thin ph-paper-plane-tilt',
+        description: 'One email field plus consent. Stored.',
+        formName: 'Newsletter signup',
+        fields: [
+            { label: 'Email', control: 'email', required: true, placeholder: 'you@company.com' },
+            // Consent is a checkbox that must be TICKED — `required` on a checkbox becomes the
+            // `accepted` rule, with its own message, rather than a generic "this is required".
+            { label: 'Email me occasional updates', control: 'checkbox', required: true },
+        ],
+        submitLabel: 'Subscribe',
+        successText: 'You’re on the list.',
+        errorText: 'We couldn’t sign you up. Please try again.',
+    },
+    {
+        id: FormPresetId.Application, name: 'Application', icon: 'ph-thin ph-read-cv-logo',
+        description: 'Details plus a CV upload. Stored, with an auto-reply.',
+        formName: 'Application',
+        fields: [
+            { label: 'Full name', control: 'text', required: true },
+            { label: 'Email', control: 'email', required: true },
+            { label: 'Phone', control: 'tel' },
+            { label: 'Role', control: 'select', required: true, optionsText: 'Design\nEngineering\nOther' },
+            { label: 'CV', control: 'file', required: true, help: 'PDF or Word, up to 5MB' },
+            { label: 'Anything else', control: 'textarea', rows: 4 },
+        ],
+        submitLabel: 'Apply',
+        successText: 'Application received — we’ll read it properly and reply.',
+        errorText: 'We couldn’t submit your application. Please try again.',
+    },
+    {
+        id: FormPresetId.Booking, name: 'Booking request', icon: 'ph-thin ph-calendar-check',
+        description: 'Date and party size. Stored, and it notifies you.',
+        formName: 'Booking request',
+        fields: [
+            { label: 'Name', control: 'text', required: true },
+            { label: 'Email', control: 'email', required: true },
+            { label: 'Date', control: 'date', required: true },
+            { label: 'People', control: 'number', required: true },
+            { label: 'Notes', control: 'textarea', rows: 3, help: 'Allergies, access needs, anything useful' },
+        ],
+        submitLabel: 'Request a booking',
+        successText: 'Request received — we’ll confirm by email.',
+        errorText: 'We couldn’t send your request. Please try again.',
+    },
+]);
+
+/** The preset with this id, or undefined. */
+export function formPresetById(id: string | null | undefined): FormPresetDef | undefined {
+    return FORM_PRESETS.find(p => p.id === id);
+}

package/src/forms-core/public-api.ts

@@ -18,3 +18,4 @@ export * from './options';
 export * from './runtime';
 export * from './rule-catalog';
 export * from './transport';
+export * from './form-presets';

package/src/generation-core/baseline-roles.ts

@@ -0,0 +1,75 @@
+import { NEUTRAL_STYLE_PROPS, NODE_BASELINES } from './node-baselines.generated';
+
+/**
+ * Why each type's constructor sets the style values it sets (W1.1, Q1). Every value a type's config
+ * gives that differs from what the trait saves when nobody sets it (`NEUTRAL_STYLE_PROPS`) is exactly
+ * one of:
+ *
+ * - **Layout** — a size or spacing that exists only so an EMPTY node dropped from the palette is visible
+ *   and grabbable (a Container's 200px, a Text's 10px padding). A composed node is never empty and its
+ *   pattern owns its box, so the composer RELEASES these to the neutral value unless the pattern
+ *   declares one: the nav bar was 200px tall and every lead line indented 10px (W1's screenshot).
+ * - **Behaviour** — what makes the type work: a button's inline-flex centring, a form's column, the 44px
+ *   touch target, a slide's width, a spacer's height, a list's marker room. Kept.
+ * - **Look** — the type's pre-design-system paint, which its element style replaces. Kept (the style
+ *   writes over it; a type with no style keeps its pre-DS2 look, D5).
+ *
+ * Saved pages are untouched: this is the composer's rule, never the builder's (a palette drop still
+ * gets its 200px). `baseline-roles.spec.ts` fails the moment a config gains a default this table does
+ * not classify — so a new default is a decision, not an accident.
+ */
+export enum BaselineRole {
+    Layout = 'layout',
+    Behaviour = 'behaviour',
+    Look = 'look',
+}
+
+const { Layout, Behaviour, Look } = BaselineRole;
+
+export const BASELINE_ROLES: Readonly<Record<string, Readonly<Record<string, BaselineRole>>>> = {
+    Button: {},
+    ButtonBlock: {
+        display: Behaviour, justifyContent: Behaviour, alignItems: Behaviour, gap: Behaviour, cursor: Behaviour,
+        padding: Look, borderRadius: Look,
+    },
+    Card: { width: Behaviour, maxWidth: Layout, padding: Look, borderWidth: Look, borderColor: Look, borderRadius: Look, backgroundColor: Look },
+    // `width: 100%` (DEFAULT_WIDTH_BY_TYPE) is what lets a block fill its row — a flex child collapses without it.
+    Container: { width: Behaviour, minHeight: Layout },
+    Heading: { fontSize: Look, fontWeight: Look },
+    Text: { width: Behaviour, minHeight: Layout, padding: Layout },
+    Image: { width: Behaviour, maxWidth: Layout, aspectRatio: Layout },
+    Link: {},
+    LinkedContainer: { minHeight: Layout },
+    Section: { minHeight: Layout },
+    Icon: { lineHeight: Behaviour, fontSize: Behaviour, color: Look },
+    Divider: { width: Behaviour, height: Look, margin: Layout, backgroundColor: Look },
+    Spacer: { width: Behaviour, height: Behaviour },
+    List: { width: Behaviour, padding: Behaviour },
+    ListItem: { width: Behaviour },
+    Repeater: { width: Behaviour },
+    SliderContainer: { width: Behaviour },
+    SliderSlide: { width: Behaviour, aspectRatio: Behaviour },
+    // The crossfade stacks its frames absolutely: without a box it has no height at all.
+    Gallery: { minHeight: Behaviour, backgroundColor: Look },
+    Form: { display: Behaviour, flexDirection: Behaviour, gap: Behaviour, width: Behaviour },
+    Field: { width: Behaviour },
+    FieldGroup: { display: Behaviour, gap: Behaviour, width: Behaviour },
+    SubmitButton: {
+        display: Behaviour, justifyContent: Behaviour, alignItems: Behaviour, minHeight: Behaviour, cursor: Behaviour,
+        color: Look, padding: Look, borderRadius: Look, backgroundColor: Look,
+    },
+    FormSuccess: { width: Behaviour, color: Look, padding: Look, borderRadius: Look, backgroundColor: Look },
+    FormError: { width: Behaviour, color: Look, padding: Look, borderRadius: Look, backgroundColor: Look },
+    Dialog: { width: Behaviour, padding: Look, borderRadius: Look, backgroundColor: Look, boxShadow: Look },
+};
+
+/** The style values a type's constructor sets for an empty palette drop, each mapped to the value the
+ *  trait saves when nobody sets it — what a composed node of that type starts from. */
+export function releasedLayoutDefaults(type: string): Record<string, unknown> {
+    const roles = BASELINE_ROLES[type] ?? {};
+    const out: Record<string, unknown> = {};
+    for (const [trait, role] of Object.entries(roles)) {
+        if (role === BaselineRole.Layout && trait in (NODE_BASELINES[type]?.styleProps ?? {})) out[trait] = NEUTRAL_STYLE_PROPS[trait];
+    }
+    return out;
+}