@prosdevlab/experience-sdk-plugins 0.2.0 → 0.3.0

package/src/modal/form-rendering.ts

@@ -0,0 +1,262 @@
+/**
+ * Pure form rendering functions
+ *
+ * These functions are intentionally pure (return DOM elements, no side effects) to make them:
+ * - Easy to test
+ * - Easy to extract into a separate form plugin later
+ * - Reusable across different contexts
+ */
+
+import type { ExperienceButton } from '../types';
+import {
+  getErrorMessageStyles,
+  getErrorStateStyles,
+  getFieldStyles,
+  getFormStateStyles,
+  getFormStyles,
+  getInputStyles,
+  getLabelStyles,
+  getRequiredStyles,
+  getStateButtonsStyles,
+  getStateMessageStyles,
+  getStateTitleStyles,
+  getSubmitButtonHoverBg,
+  getSubmitButtonStyles,
+  getSuccessStateStyles,
+} from './form-styles';
+import type { FormConfig, FormField } from './types';
+
+/**
+ * Render complete form element
+ *
+ * @param experienceId - Experience ID for namespacing field IDs
+ * @param config - Form configuration
+ * @returns Form HTML element
+ */
+export function renderForm(experienceId: string, config: FormConfig): HTMLFormElement {
+  const form = document.createElement('form');
+  form.className = 'xp-modal__form';
+  form.style.cssText = getFormStyles();
+  form.dataset.xpExperienceId = experienceId;
+  form.setAttribute('novalidate', ''); // Use custom validation instead of browser default
+
+  // Render each field
+  config.fields.forEach((field) => {
+    const fieldElement = renderFormField(experienceId, field);
+    form.appendChild(fieldElement);
+  });
+
+  // Render submit button
+  const submitButton = renderSubmitButton(config.submitButton);
+  form.appendChild(submitButton);
+
+  return form;
+}
+
+/**
+ * Render a single form field with label and error container
+ *
+ * @param experienceId - Experience ID for namespacing field ID
+ * @param field - Field configuration
+ * @returns Field wrapper HTML element
+ */
+export function renderFormField(experienceId: string, field: FormField): HTMLElement {
+  const wrapper = document.createElement('div');
+  wrapper.className = 'xp-form__field';
+  wrapper.style.cssText = getFieldStyles();
+
+  // Label (optional)
+  if (field.label) {
+    const label = document.createElement('label');
+    label.className = 'xp-form__label';
+    label.style.cssText = getLabelStyles();
+    label.htmlFor = `${experienceId}-${field.name}`;
+    label.textContent = field.label;
+
+    // Required indicator
+    if (field.required) {
+      const required = document.createElement('span');
+      required.className = 'xp-form__required';
+      required.style.cssText = getRequiredStyles();
+      required.textContent = ' *';
+      required.setAttribute('aria-label', 'required');
+      label.appendChild(required);
+    }
+
+    wrapper.appendChild(label);
+  }
+
+  // Input element (input or textarea)
+  const input =
+    field.type === 'textarea'
+      ? document.createElement('textarea')
+      : document.createElement('input');
+
+  input.className = 'xp-form__input';
+  input.style.cssText = getInputStyles();
+  input.id = `${experienceId}-${field.name}`;
+  input.name = field.name;
+
+  // Set type for input elements
+  if (input instanceof HTMLInputElement) {
+    input.type = field.type;
+  }
+
+  // Placeholder
+  if (field.placeholder) {
+    input.placeholder = field.placeholder;
+  }
+
+  // Required attribute (for screen readers)
+  if (field.required) {
+    input.required = true;
+  }
+
+  // Pattern attribute (for HTML5 validation as fallback)
+  if (field.pattern && input instanceof HTMLInputElement) {
+    input.setAttribute('pattern', field.pattern);
+  }
+
+  // Accessibility attributes
+  input.setAttribute('aria-invalid', 'false');
+  input.setAttribute('aria-describedby', `${experienceId}-${field.name}-error`);
+
+  // Custom styling
+  if (field.className) {
+    input.className += ` ${field.className}`;
+  }
+  if (field.style) {
+    Object.assign(input.style, field.style);
+  }
+
+  wrapper.appendChild(input);
+
+  // Error message container
+  const error = document.createElement('div');
+  error.className = 'xp-form__error';
+  error.style.cssText = getErrorMessageStyles();
+  error.id = `${experienceId}-${field.name}-error`;
+  error.setAttribute('role', 'alert');
+  error.setAttribute('aria-live', 'polite');
+  wrapper.appendChild(error);
+
+  return wrapper;
+}
+
+/**
+ * Render submit button
+ *
+ * @param buttonConfig - Button configuration
+ * @returns Button HTML element
+ */
+export function renderSubmitButton(buttonConfig: ExperienceButton): HTMLButtonElement {
+  const button = document.createElement('button');
+  button.type = 'submit';
+  button.className = 'xp-form__submit xp-modal__button';
+  button.style.cssText = getSubmitButtonStyles();
+
+  // Variant styling
+  if (buttonConfig.variant) {
+    button.className += ` xp-modal__button--${buttonConfig.variant}`;
+  }
+
+  // Custom class
+  if (buttonConfig.className) {
+    button.className += ` ${buttonConfig.className}`;
+  }
+
+  // Button text
+  button.textContent = buttonConfig.text;
+
+  // Hover effect using CSS variable
+  const hoverBg = getSubmitButtonHoverBg();
+  button.onmouseover = () => {
+    button.style.backgroundColor = hoverBg;
+  };
+  button.onmouseout = () => {
+    button.style.backgroundColor = ''; // Reset to CSS variable default
+  };
+
+  // Custom styling (applied last to allow overrides)
+  if (buttonConfig.style) {
+    Object.assign(button.style, buttonConfig.style);
+  }
+
+  return button;
+}
+
+/**
+ * Render form state (success or error)
+ *
+ * @param state - State configuration ('success' or 'error')
+ * @param stateConfig - State content configuration
+ * @returns State HTML element
+ */
+export function renderFormState(
+  state: 'success' | 'error',
+  stateConfig: { title?: string; message: string; buttons?: ExperienceButton[] }
+): HTMLElement {
+  const stateEl = document.createElement('div');
+  stateEl.className = `xp-form__state xp-form__state--${state}`;
+
+  // Base styles + state-specific styles
+  const baseStyles = getFormStateStyles();
+  const stateStyles = state === 'success' ? getSuccessStateStyles() : getErrorStateStyles();
+  stateEl.style.cssText = `${baseStyles}; ${stateStyles}`;
+
+  // Title (optional)
+  if (stateConfig.title) {
+    const title = document.createElement('h3');
+    title.className = 'xp-form__state-title';
+    title.style.cssText = getStateTitleStyles();
+    title.textContent = stateConfig.title;
+    stateEl.appendChild(title);
+  }
+
+  // Message
+  const message = document.createElement('div');
+  message.className = 'xp-form__state-message';
+  message.style.cssText = getStateMessageStyles();
+  message.textContent = stateConfig.message;
+  stateEl.appendChild(message);
+
+  // Buttons (optional)
+  if (stateConfig.buttons && stateConfig.buttons.length > 0) {
+    const buttonContainer = document.createElement('div');
+    buttonContainer.className = 'xp-form__state-buttons';
+    buttonContainer.style.cssText = getStateButtonsStyles();
+
+    stateConfig.buttons.forEach((btnConfig) => {
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'xp-modal__button';
+
+      if (btnConfig.variant) {
+        btn.className += ` xp-modal__button--${btnConfig.variant}`;
+      }
+      if (btnConfig.className) {
+        btn.className += ` ${btnConfig.className}`;
+      }
+
+      btn.textContent = btnConfig.text;
+
+      if (btnConfig.style) {
+        Object.assign(btn.style, btnConfig.style);
+      }
+
+      // Store action/dismiss metadata for event handlers
+      if (btnConfig.action) {
+        btn.dataset.action = btnConfig.action;
+      }
+      if (btnConfig.dismiss) {
+        btn.dataset.dismiss = 'true';
+      }
+
+      buttonContainer.appendChild(btn);
+    });
+
+    stateEl.appendChild(buttonContainer);
+  }
+
+  return stateEl;
+}

package/src/modal/form-styles.ts

@@ -0,0 +1,212 @@
+/**
+ * Form styling with CSS variables for theming
+ *
+ * Design tokens inspired by Tailwind CSS, fully customizable via CSS variables.
+ * Users can override by setting CSS variables in their stylesheet.
+ *
+ * @example
+ * ```css
+ * :root {
+ *   --xp-form-input-border: #3b82f6;
+ *   --xp-form-input-focus-ring: rgba(59, 130, 246, 0.2);
+ * }
+ * ```
+ */
+
+/**
+ * Get CSS for form container
+ */
+export function getFormStyles(): string {
+  return `
+    margin-top: var(--xp-form-spacing, 16px);
+    display: flex;
+    flex-direction: column;
+    gap: var(--xp-form-gap, 16px);
+  `.trim();
+}
+
+/**
+ * Get CSS for form field wrapper
+ */
+export function getFieldStyles(): string {
+  return `
+    display: flex;
+    flex-direction: column;
+    gap: var(--xp-field-gap, 6px);
+  `.trim();
+}
+
+/**
+ * Get CSS for form label
+ */
+export function getLabelStyles(): string {
+  return `
+    font-size: var(--xp-label-font-size, 14px);
+    font-weight: var(--xp-label-font-weight, 500);
+    color: var(--xp-label-color, #374151);
+    line-height: 1.5;
+  `.trim();
+}
+
+/**
+ * Get CSS for required indicator
+ */
+export function getRequiredStyles(): string {
+  return `
+    color: var(--xp-required-color, #ef4444);
+  `.trim();
+}
+
+/**
+ * Get CSS for form input/textarea
+ */
+export function getInputStyles(): string {
+  return `
+    padding: var(--xp-input-padding, 8px 12px);
+    font-size: var(--xp-input-font-size, 14px);
+    line-height: 1.5;
+    color: var(--xp-input-color, #111827);
+    background-color: var(--xp-input-bg, white);
+    border: var(--xp-input-border-width, 1px) solid var(--xp-input-border-color, #d1d5db);
+    border-radius: var(--xp-input-radius, 6px);
+    transition: all 0.15s ease-in-out;
+    outline: none;
+    width: 100%;
+    box-sizing: border-box;
+  `.trim();
+}
+
+/**
+ * Get CSS for input focus state (applies via :focus)
+ */
+export function getInputFocusStyles(): string {
+  return `
+    border-color: var(--xp-input-focus-border, #3b82f6);
+    box-shadow: 0 0 0 var(--xp-input-focus-ring-width, 3px) var(--xp-input-focus-ring, rgba(59, 130, 246, 0.1));
+  `.trim();
+}
+
+/**
+ * Get CSS for input error state
+ */
+export function getInputErrorStyles(): string {
+  return `
+    border-color: var(--xp-input-error-border, #ef4444);
+  `.trim();
+}
+
+/**
+ * Get CSS for error message
+ */
+export function getErrorMessageStyles(): string {
+  return `
+    font-size: var(--xp-error-font-size, 13px);
+    color: var(--xp-error-color, #ef4444);
+    line-height: 1.4;
+    min-height: 18px;
+  `.trim();
+}
+
+/**
+ * Get CSS for submit button
+ */
+export function getSubmitButtonStyles(): string {
+  return `
+    margin-top: var(--xp-submit-margin-top, 8px);
+    padding: var(--xp-submit-padding, 10px 20px);
+    font-size: var(--xp-submit-font-size, 14px);
+    font-weight: var(--xp-submit-font-weight, 500);
+    color: var(--xp-submit-color, white);
+    background-color: var(--xp-submit-bg, #2563eb);
+    border: none;
+    border-radius: var(--xp-submit-radius, 6px);
+    cursor: pointer;
+    transition: all 0.2s;
+    width: 100%;
+  `.trim();
+}
+
+/**
+ * Get CSS for submit button hover background
+ */
+export function getSubmitButtonHoverBg(): string {
+  return 'var(--xp-submit-bg-hover, #1d4ed8)';
+}
+
+/**
+ * Get CSS for submit button disabled state
+ */
+export function getSubmitButtonDisabledStyles(): string {
+  return `
+    opacity: var(--xp-submit-disabled-opacity, 0.6);
+    cursor: not-allowed;
+  `.trim();
+}
+
+/**
+ * Get CSS for form state container (success/error)
+ */
+export function getFormStateStyles(): string {
+  return `
+    padding: var(--xp-state-padding, 16px);
+    border-radius: var(--xp-state-radius, 8px);
+    text-align: center;
+  `.trim();
+}
+
+/**
+ * Get CSS for success state
+ */
+export function getSuccessStateStyles(): string {
+  return `
+    background-color: var(--xp-success-bg, #f0fdf4);
+    border: var(--xp-state-border-width, 1px) solid var(--xp-success-border, #86efac);
+  `.trim();
+}
+
+/**
+ * Get CSS for error state
+ */
+export function getErrorStateStyles(): string {
+  return `
+    background-color: var(--xp-error-bg, #fef2f2);
+    border: var(--xp-state-border-width, 1px) solid var(--xp-error-border, #fca5a5);
+  `.trim();
+}
+
+/**
+ * Get CSS for state title
+ */
+export function getStateTitleStyles(): string {
+  return `
+    font-size: var(--xp-state-title-font-size, 16px);
+    font-weight: var(--xp-state-title-font-weight, 600);
+    margin: 0 0 var(--xp-state-title-margin-bottom, 8px) 0;
+    color: var(--xp-state-title-color, #111827);
+  `.trim();
+}
+
+/**
+ * Get CSS for state message
+ */
+export function getStateMessageStyles(): string {
+  return `
+    font-size: var(--xp-state-message-font-size, 14px);
+    line-height: 1.5;
+    color: var(--xp-state-message-color, #374151);
+    margin: 0;
+  `.trim();
+}
+
+/**
+ * Get CSS for state buttons container
+ */
+export function getStateButtonsStyles(): string {
+  return `
+    margin-top: var(--xp-state-buttons-margin-top, 16px);
+    display: flex;
+    gap: var(--xp-state-buttons-gap, 8px);
+    justify-content: center;
+    flex-wrap: wrap;
+  `.trim();
+}