FormRenderer

import '@blukavantui/web/theme.css'

import { createFormRenderer, createFormSubmission, formatFormResponseText } from '@blukavantui/web/form-renderer';
import '@blukavantui/web/form-renderer.css';
import type { BluFormDefinition } from '@blukavantui/web/forms';
const definitions: Record<string, BluFormDefinition> = {
  "service_request": {
    "Version": 1,
    "Key": "service_request",
    "Title": "Workplace service request",
    "Description": "Tell us what you need. Your answers stay here as you move between steps.",
    "SubmitLabel": "Submit request",
    "Pages": [
      {
        "Key": "requester_page",
        "Title": "About you",
        "Description": "Start with your contact details.",
        "Sections": [
          {
            "Key": "contact_section",
            "Title": "Contact details",
            "Columns": 2,
            "Fields": [
              {
                "Key": "full_name",
                "Type": "Text",
                "Label": "Full name",
                "Autocomplete": "name",
                "Required": true,
                "Placeholder": "Jordan Lee",
                "MaxLength": 100
              },
              {
                "Key": "email",
                "Type": "Email",
                "Label": "Work email",
                "Autocomplete": "email",
                "Required": true,
                "Placeholder": "jordan@example.com"
              },
              {
                "Key": "department",
                "Type": "Select",
                "Label": "Department",
                "Required": true,
                "Options": [
                  {
                    "Value": "operations",
                    "Label": "Operations"
                  },
                  {
                    "Value": "engineering",
                    "Label": "Engineering"
                  },
                  {
                    "Value": "people",
                    "Label": "People team"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "Key": "details_page",
        "Title": "Request details",
        "Sections": [
          {
            "Key": "request_section",
            "Title": "What can we help with?",
            "Columns": 1,
            "Fields": [
              {
                "Key": "request_type",
                "Type": "Radio",
                "Label": "Request type",
                "Required": true,
                "Options": [
                  {
                    "Value": "equipment",
                    "Label": "Equipment"
                  },
                  {
                    "Value": "workspace",
                    "Label": "Workspace"
                  },
                  {
                    "Value": "other",
                    "Label": "Something else"
                  }
                ]
              },
              {
                "Key": "budget",
                "Type": "Number",
                "Label": "Estimated budget",
                "HelpText": "Shown only for equipment requests.",
                "Min": 0,
                "Max": 10000,
                "Required": true,
                "Visibility": {
                  "FieldKey": "request_type",
                  "Operator": "Equals",
                  "Value": "equipment"
                }
              },
              {
                "Key": "needed_by",
                "Type": "Date",
                "Label": "Needed by",
                "Required": true
              },
              {
                "Key": "description",
                "Type": "TextArea",
                "Label": "Describe your request",
                "Required": true,
                "MaxLength": 2000
              }
            ]
          }
        ]
      },
      {
        "Key": "confirm_page",
        "Title": "Preferences & confirmation",
        "Sections": [
          {
            "Key": "preferences_section",
            "Title": "Stay informed",
            "Columns": 1,
            "Fields": [
              {
                "Key": "updates",
                "Type": "MultiSelect",
                "Label": "Preferred updates",
                "Options": [
                  {
                    "Value": "email",
                    "Label": "Email"
                  },
                  {
                    "Value": "portal",
                    "Label": "In-app notification"
                  }
                ],
                "DefaultValue": [
                  "email"
                ]
              },
              {
                "Key": "confirmed",
                "Type": "Checkbox",
                "Label": "I confirm these details are correct",
                "Required": true
              }
            ]
          }
        ]
      }
    ]
  },
  "event_feedback": {
    "Version": 1,
    "Key": "event_feedback",
    "Title": "How was your experience?",
    "Description": "A second form definition, loaded by ID on the same screen.",
    "SubmitLabel": "Send feedback",
    "Pages": [
      {
        "Key": "experience_page",
        "Title": "Your experience",
        "Sections": [
          {
            "Key": "experience_section",
            "Columns": 1,
            "Fields": [
              {
                "Key": "rating",
                "Type": "Radio",
                "Label": "Overall experience",
                "Required": true,
                "Options": [
                  {
                    "Value": "great",
                    "Label": "Great"
                  },
                  {
                    "Value": "okay",
                    "Label": "Okay"
                  },
                  {
                    "Value": "poor",
                    "Label": "Needs improvement"
                  }
                ]
              },
              {
                "Key": "comments",
                "Type": "TextArea",
                "Label": "What could we improve?",
                "MaxLength": 2000
              }
            ]
          }
        ]
      },
      {
        "Key": "followup_page",
        "Title": "Follow-up",
        "Sections": [
          {
            "Key": "followup_section",
            "Fields": [
              {
                "Key": "followup",
                "Type": "Checkbox",
                "Label": "I would like someone to follow up"
              },
              {
                "Key": "contact_email",
                "Type": "Email",
                "Label": "Contact email",
                "Autocomplete": "email",
                "Required": true,
                "Visibility": {
                  "FieldKey": "followup",
                  "Operator": "Equals",
                  "Value": "true"
                }
              }
            ]
          }
        ]
      }
    ]
  }
};
export function mount(host: HTMLElement) {
  const picker = document.createElement('select');
  picker.setAttribute('aria-label', 'Load form by ID');
  for (const [id, definition] of Object.entries(definitions)) {
    const option = document.createElement('option'); option.value = id;
    option.textContent = definition.Title; picker.append(option);
  }
  const surface = document.createElement('div'), output = document.createElement('pre');
  output.style.whiteSpace = 'pre-wrap'; output.style.overflowWrap = 'anywhere';
  const label = document.createElement('label'); label.textContent = 'Load form by ID '; label.append(picker);
  host.append(label, surface, output);
  let formId = 'service_request';
  const renderer = createFormRenderer(surface, { FormId: formId, Definition: definitions[formId] }, {
    SubmitRequested(requestId, requestedFormId, values) {
      const definition = definitions[requestedFormId];
      const payload = createFormSubmission(requestedFormId, definition, values);
      const text = formatFormResponseText(definition, values);
      output.textContent = JSON.stringify(payload, null, 2) + '\n\n' + text;
      // Your app may send payload to its endpoint or use text in an email.
      // Acknowledge only after that operation completes. This example only displays output.
      renderer.update({ SubmitResultRequestId: requestId, SubmitResultSuccess: true,
        SubmitResultMessage: 'Output prepared. No endpoint called or email sent.' });
    },
    Error(message) { output.textContent = message; },
  });
  picker.onchange = () => {
    formId = picker.value;
    renderer.update({ FormId: formId, Definition: definitions[formId], Values: {}, ResetKey: String(Date.now()) });
    output.textContent = 'Loaded ' + formId + ' on the same page.';
  };
  return { destroy() { renderer.destroy(); host.replaceChildren(); } };
}

const instance = mount(document.getElementById('example')!)

// When this page or framework component is removed:
// instance.destroy()