@prosdevlab/experience-sdk-plugins 0.1.4 → 0.3.0

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();
+}

package/src/modal/form-validation.test.ts

@@ -0,0 +1,413 @@
+import { describe, expect, it } from 'vitest';
+import { validateField, validateForm } from './form-validation';
+import type { FormConfig, FormField } from './types';
+
+describe('validateField', () => {
+  describe('required validation', () => {
+    it('should pass when required field has value', () => {
+      const field: FormField = {
+        name: 'email',
+        type: 'email',
+        required: true,
+      };
+
+      const result = validateField(field, 'user@example.com');
+
+      expect(result.valid).toBe(true);
+      expect(result.errors).toBeUndefined();
+    });
+
+    it('should fail when required field is empty', () => {
+      const field: FormField = {
+        name: 'email',
+        type: 'email',
+        required: true,
+      };
+
+      const result = validateField(field, '');
+
+      expect(result.valid).toBe(false);
+      expect(result.errors).toEqual({ email: 'email is required' });
+    });
+
+    it('should fail when required field is whitespace', () => {
+      const field: FormField = {
+        name: 'name',
+        type: 'text',
+        label: 'Name',
+        required: true,
+      };
+
+      const result = validateField(field, '   ');
+
+      expect(result.valid).toBe(false);
+      expect(result.errors).toEqual({ name: 'Name is required' });
+    });
+
+    it('should use custom error message for required field', () => {
+      const field: FormField = {
+        name: 'email',
+        type: 'email',
+        required: true,
+        errorMessage: 'Email address is required',
+      };
+
+      const result = validateField(field, '');
+
+      expect(result.valid).toBe(false);
+      expect(result.errors).toEqual({ email: 'Email address is required' });
+    });
+
+    it('should pass when optional field is empty', () => {
+      const field: FormField = {
+        name: 'phone',
+        type: 'tel',
+        required: false,
+      };
+
+      const result = validateField(field, '');
+
+      expect(result.valid).toBe(true);
+      expect(result.errors).toBeUndefined();
+    });
+  });
+
+  describe('email validation', () => {
+    const field: FormField = {
+      name: 'email',
+      type: 'email',
+      required: false,
+    };
+
+    it('should pass with valid email', () => {
+      const result = validateField(field, 'user@example.com');
+      expect(result.valid).toBe(true);
+    });
+
+    it('should pass with subdomain email', () => {
+      const result = validateField(field, 'user@mail.example.com');
+      expect(result.valid).toBe(true);
+    });
+
+    it('should fail with invalid email (no @)', () => {
+      const result = validateField(field, 'userexample.com');
+      expect(result.valid).toBe(false);
+      expect(result.errors).toEqual({ email: 'Please enter a valid email address' });
+    });
+
+    it('should fail with invalid email (no domain)', () => {
+      const result = validateField(field, 'user@');
+      expect(result.valid).toBe(false);
+    });
+
+    it('should fail with invalid email (no TLD)', () => {
+      const result = validateField(field, 'user@example');
+      expect(result.valid).toBe(false);
+    });
+
+    it('should use custom error message for invalid email', () => {
+      const customField: FormField = {
+        ...field,
+        errorMessage: 'Invalid email format',
+      };
+
+      const result = validateField(customField, 'invalid');
+      expect(result.errors).toEqual({ email: 'Invalid email format' });
+    });
+  });
+
+  describe('url validation', () => {
+    const field: FormField = {
+      name: 'website',
+      type: 'url',
+      required: false,
+    };
+
+    it('should pass with valid HTTP URL', () => {
+      const result = validateField(field, 'http://example.com');
+      expect(result.valid).toBe(true);
+    });
+
+    it('should pass with valid HTTPS URL', () => {
+      const result = validateField(field, 'https://example.com/path?query=1');
+      expect(result.valid).toBe(true);
+    });
+
+    it('should fail with invalid URL (no protocol)', () => {
+      const result = validateField(field, 'example.com');
+      expect(result.valid).toBe(false);
+      expect(result.errors).toEqual({ website: 'Please enter a valid URL' });
+    });
+
+    it('should fail with invalid URL format', () => {
+      const result = validateField(field, 'not a url');
+      expect(result.valid).toBe(false);
+    });
+  });
+
+  describe('tel validation', () => {
+    const field: FormField = {
+      name: 'phone',
+      type: 'tel',
+      required: false,
+    };
+
+    it('should pass with digits only', () => {
+      const result = validateField(field, '5551234567');
+      expect(result.valid).toBe(true);
+    });
+
+    it('should pass with dashes', () => {
+      const result = validateField(field, '555-123-4567');
+      expect(result.valid).toBe(true);
+    });
+
+    it('should pass with parentheses and spaces', () => {
+      const result = validateField(field, '(555) 123-4567');
+      expect(result.valid).toBe(true);
+    });
+
+    it('should pass with plus and country code', () => {
+      const result = validateField(field, '+1 555-123-4567');
+      expect(result.valid).toBe(true);
+    });
+
+    it('should fail with letters', () => {
+      const result = validateField(field, '555-CALL-NOW');
+      expect(result.valid).toBe(false);
+      expect(result.errors).toEqual({ phone: 'Please enter a valid phone number' });
+    });
+  });
+
+  describe('number validation', () => {
+    const field: FormField = {
+      name: 'age',
+      type: 'number',
+      required: false,
+    };
+
+    it('should pass with integer', () => {
+      const result = validateField(field, '25');
+      expect(result.valid).toBe(true);
+    });
+
+    it('should pass with decimal', () => {
+      const result = validateField(field, '25.5');
+      expect(result.valid).toBe(true);
+    });
+
+    it('should pass with negative number', () => {
+      const result = validateField(field, '-10');
+      expect(result.valid).toBe(true);
+    });
+
+    it('should fail with non-numeric value', () => {
+      const result = validateField(field, 'twenty');
+      expect(result.valid).toBe(false);
+      expect(result.errors).toEqual({ age: 'Please enter a valid number' });
+    });
+  });
+
+  describe('pattern validation', () => {
+    it('should pass when value matches pattern', () => {
+      const field: FormField = {
+        name: 'zipcode',
+        type: 'text',
+        pattern: '^\\d{5}$',
+        required: false,
+      };
+
+      const result = validateField(field, '12345');
+      expect(result.valid).toBe(true);
+    });
+
+    it('should fail when value does not match pattern', () => {
+      const field: FormField = {
+        name: 'zipcode',
+        type: 'text',
+        label: 'ZIP Code',
+        pattern: '^\\d{5}$',
+        required: false,
+      };
+
+      const result = validateField(field, '1234');
+      expect(result.valid).toBe(false);
+      expect(result.errors).toEqual({ zipcode: 'Invalid format for ZIP Code' });
+    });
+
+    it('should use custom error message for pattern mismatch', () => {
+      const field: FormField = {
+        name: 'zipcode',
+        type: 'text',
+        pattern: '^\\d{5}$',
+        errorMessage: 'ZIP code must be 5 digits',
+        required: false,
+      };
+
+      const result = validateField(field, 'ABCDE');
+      expect(result.errors).toEqual({ zipcode: 'ZIP code must be 5 digits' });
+    });
+
+    it('should handle invalid regex pattern gracefully', () => {
+      const field: FormField = {
+        name: 'test',
+        type: 'text',
+        pattern: '[invalid(regex',
+        required: false,
+      };
+
+      // Should not throw, just pass validation
+      const result = validateField(field, 'anything');
+      expect(result.valid).toBe(true);
+    });
+  });
+});
+
+describe('validateForm', () => {
+  it('should pass when all fields are valid', () => {
+    const config: FormConfig = {
+      fields: [
+        { name: 'email', type: 'email', required: true },
+        { name: 'name', type: 'text', required: true },
+      ],
+      submitButton: { text: 'Submit', action: 'submit' },
+    };
+
+    const data = {
+      email: 'user@example.com',
+      name: 'John Doe',
+    };
+
+    const result = validateForm(config, data);
+    expect(result.valid).toBe(true);
+    expect(result.errors).toBeUndefined();
+  });
+
+  it('should fail when any field is invalid', () => {
+    const config: FormConfig = {
+      fields: [
+        { name: 'email', type: 'email', required: true },
+        { name: 'name', type: 'text', required: true },
+      ],
+      submitButton: { text: 'Submit', action: 'submit' },
+    };
+
+    const data = {
+      email: 'invalid-email',
+      name: 'John Doe',
+    };
+
+    const result = validateForm(config, data);
+    expect(result.valid).toBe(false);
+    expect(result.errors).toHaveProperty('email');
+  });
+
+  it('should collect errors from multiple fields', () => {
+    const config: FormConfig = {
+      fields: [
+        { name: 'email', type: 'email', required: true },
+        { name: 'name', type: 'text', required: true },
+        { name: 'phone', type: 'tel', required: true },
+      ],
+      submitButton: { text: 'Submit', action: 'submit' },
+    };
+
+    const data = {
+      email: '',
+      name: '',
+      phone: '',
+    };
+
+    const result = validateForm(config, data);
+    expect(result.valid).toBe(false);
+    expect(Object.keys(result.errors || {})).toHaveLength(3);
+    expect(result.errors).toHaveProperty('email');
+    expect(result.errors).toHaveProperty('name');
+    expect(result.errors).toHaveProperty('phone');
+  });
+
+  it('should run custom validation function', () => {
+    const config: FormConfig = {
+      fields: [{ name: 'email', type: 'email', required: true }],
+      submitButton: { text: 'Submit', action: 'submit' },
+      validate: (data) => {
+        if (data.email.endsWith('@competitor.com')) {
+          return {
+            valid: false,
+            errors: { email: 'Competitor emails not allowed' },
+          };
+        }
+        return { valid: true };
+      },
+    };
+
+    const data = { email: 'user@competitor.com' };
+
+    const result = validateForm(config, data);
+    expect(result.valid).toBe(false);
+    expect(result.errors).toEqual({ email: 'Competitor emails not allowed' });
+  });
+
+  it('should merge custom validation errors with field errors', () => {
+    const config: FormConfig = {
+      fields: [
+        { name: 'email', type: 'email', required: true },
+        { name: 'password', type: 'text', required: true },
+      ],
+      submitButton: { text: 'Submit', action: 'submit' },
+      validate: (data) => {
+        if (data.password.length < 8) {
+          return {
+            valid: false,
+            errors: { password: 'Password must be at least 8 characters' },
+          };
+        }
+        return { valid: true };
+      },
+    };
+
+    const data = {
+      email: 'invalid',
+      password: '123',
+    };
+
+    const result = validateForm(config, data);
+    expect(result.valid).toBe(false);
+    expect(result.errors).toHaveProperty('email'); // Field validation error
+    expect(result.errors).toHaveProperty('password'); // Custom validation error
+  });
+
+  it('should handle custom validation function errors gracefully', () => {
+    const config: FormConfig = {
+      fields: [{ name: 'email', type: 'email', required: true }],
+      submitButton: { text: 'Submit', action: 'submit' },
+      validate: () => {
+        throw new Error('Custom validation broke!');
+      },
+    };
+
+    const data = { email: 'user@example.com' };
+
+    // Should not throw, should pass validation
+    const result = validateForm(config, data);
+    expect(result.valid).toBe(true);
+  });
+
+  it('should pass when optional fields are empty', () => {
+    const config: FormConfig = {
+      fields: [
+        { name: 'email', type: 'email', required: true },
+        { name: 'phone', type: 'tel', required: false },
+      ],
+      submitButton: { text: 'Submit', action: 'submit' },
+    };
+
+    const data = {
+      email: 'user@example.com',
+      phone: '',
+    };
+
+    const result = validateForm(config, data);
+    expect(result.valid).toBe(true);
+  });
+});