@hortonstudio/main 1.9.10 → 1.9.20

package/src/modules/structure/functions/form/functions/select/functions/states/states.ts

@@ -0,0 +1,118 @@
+import { querySelectorAll } from '@utils';
+
+const US_STATES = [
+  { name: 'Alabama', value: 'AL' },
+  { name: 'Alaska', value: 'AK' },
+  { name: 'Arizona', value: 'AZ' },
+  { name: 'Arkansas', value: 'AR' },
+  { name: 'California', value: 'CA' },
+  { name: 'Colorado', value: 'CO' },
+  { name: 'Connecticut', value: 'CT' },
+  { name: 'Delaware', value: 'DE' },
+  { name: 'Florida', value: 'FL' },
+  { name: 'Georgia', value: 'GA' },
+  { name: 'Hawaii', value: 'HI' },
+  { name: 'Idaho', value: 'ID' },
+  { name: 'Illinois', value: 'IL' },
+  { name: 'Indiana', value: 'IN' },
+  { name: 'Iowa', value: 'IA' },
+  { name: 'Kansas', value: 'KS' },
+  { name: 'Kentucky', value: 'KY' },
+  { name: 'Louisiana', value: 'LA' },
+  { name: 'Maine', value: 'ME' },
+  { name: 'Maryland', value: 'MD' },
+  { name: 'Massachusetts', value: 'MA' },
+  { name: 'Michigan', value: 'MI' },
+  { name: 'Minnesota', value: 'MN' },
+  { name: 'Mississippi', value: 'MS' },
+  { name: 'Missouri', value: 'MO' },
+  { name: 'Montana', value: 'MT' },
+  { name: 'Nebraska', value: 'NE' },
+  { name: 'Nevada', value: 'NV' },
+  { name: 'New Hampshire', value: 'NH' },
+  { name: 'New Jersey', value: 'NJ' },
+  { name: 'New Mexico', value: 'NM' },
+  { name: 'New York', value: 'NY' },
+  { name: 'North Carolina', value: 'NC' },
+  { name: 'North Dakota', value: 'ND' },
+  { name: 'Ohio', value: 'OH' },
+  { name: 'Oklahoma', value: 'OK' },
+  { name: 'Oregon', value: 'OR' },
+  { name: 'Pennsylvania', value: 'PA' },
+  { name: 'Rhode Island', value: 'RI' },
+  { name: 'South Carolina', value: 'SC' },
+  { name: 'South Dakota', value: 'SD' },
+  { name: 'Tennessee', value: 'TN' },
+  { name: 'Texas', value: 'TX' },
+  { name: 'Utah', value: 'UT' },
+  { name: 'Vermont', value: 'VT' },
+  { name: 'Virginia', value: 'VA' },
+  { name: 'Washington', value: 'WA' },
+  { name: 'West Virginia', value: 'WV' },
+  { name: 'Wisconsin', value: 'WI' },
+  { name: 'Wyoming', value: 'WY' },
+];
+
+export function init(config) {
+  // Find all select elements with data-hs-form-select="states"
+  const stateSelects = querySelectorAll(config, 'states');
+
+  stateSelects.forEach((select) => {
+    if (select.tagName !== 'SELECT') {
+      console.warn(
+        '[select-states] data-hs-form-select="states" must be on a <select> element',
+        select
+      );
+      return;
+    }
+
+    const existingOptions = select.querySelectorAll('option');
+
+    // Validate: Must have exactly 1 option (placeholder template)
+    if (existingOptions.length !== 1) {
+      console.warn(
+        '[select-states] Select must have exactly 1 default template option (placeholder). Found:',
+        existingOptions.length,
+        select
+      );
+      return;
+    }
+
+    const templateOption = existingOptions[0];
+
+    // Validate: Template option must have empty value
+    if (templateOption.value !== '') {
+      console.warn(
+        '[select-states] Template option must have empty value for placeholder. Found value:',
+        templateOption.value,
+        select
+      );
+      return;
+    }
+
+    // Store placeholder text and clear select
+    const placeholderText = templateOption.textContent;
+    select.innerHTML = '';
+
+    // Re-create placeholder as first option
+    const placeholder = document.createElement('option');
+    placeholder.value = '';
+    placeholder.textContent = placeholderText;
+    select.appendChild(placeholder);
+
+    // Add all 50 states after placeholder
+    US_STATES.forEach((state) => {
+      const option = document.createElement('option');
+      option.value = state.value;
+      option.textContent = state.name;
+      select.appendChild(option);
+    });
+  });
+
+  return {
+    result: `states initialized on ${stateSelects.length} select${stateSelects.length !== 1 ? 's' : ''}`,
+    destroy: () => {
+      // No cleanup needed - states are just populated into native select
+    },
+  };
+}

package/src/modules/structure/functions/form/functions/select/select.ts

@@ -0,0 +1,48 @@
+/**
+ * Select Orchestrator
+ * Manages select enhancement functions in sequence
+ *
+ * Uses static imports and passes config down to functions
+ * @version 2.0.0
+ */
+import { init as statesInit } from './functions/states/states.ts';
+import { init as customSelectInit } from './functions/custom-select/custom-select.ts';
+
+export async function init(selectConfig) {
+  const cleanup = { destroyFunctions: [] };
+
+  try {
+    // IMPORTANT: Load states FIRST to populate native select,
+    // then load custom-select to create custom UI
+    const statesResult = await statesInit(selectConfig.states);
+    if (statesResult?.destroy) cleanup.destroyFunctions.push(statesResult.destroy);
+
+    const customSelectResult = await customSelectInit(selectConfig['custom-select']);
+    if (customSelectResult?.destroy) cleanup.destroyFunctions.push(customSelectResult.destroy);
+
+    return {
+      result: 'select initialized',
+      destroy: () => {
+        cleanup.destroyFunctions.forEach((destroyFn) => {
+          try {
+            destroyFn();
+          } catch (error) {
+            console.error('[select] Error during cleanup:', error);
+          }
+        });
+        cleanup.destroyFunctions.length = 0;
+      },
+    };
+  } catch (error) {
+    console.error('[select] Initialization failed:', error);
+    // Cleanup any partial initialization
+    cleanup.destroyFunctions.forEach((fn) => {
+      try {
+        fn();
+      } catch (cleanupError) {
+        console.error('[select] Error during error cleanup:', cleanupError);
+      }
+    });
+    throw error;
+  }
+}

package/src/modules/structure/functions/form/functions/test/test.ts

@@ -0,0 +1,132 @@
+import { querySelectorAll, querySelector } from '@utils';
+
+export function init(config) {
+  // Centralized cleanup tracking
+  const cleanup = {
+    handlers: [],
+  };
+
+  const addHandler = (element, event, handler, options) => {
+    element.addEventListener(event, handler, options);
+    cleanup.handlers.push({ element, event, handler, options });
+  };
+
+  // Find all test wrappers
+  const testWrappers = querySelectorAll(config, 'wrapper');
+
+  testWrappers.forEach((wrapper) => {
+    // Find form element within wrapper
+    const form = wrapper.querySelector('form');
+    if (!form) {
+      console.warn(
+        '[form-test] No <form> element found within data-hs-form-test="wrapper"',
+        wrapper
+      );
+      return;
+    }
+
+    // Find test info element (optional)
+    const testInfo = querySelector(config, 'info', wrapper);
+
+    // Function to collect and display current form data
+    const updateLiveData = () => {
+      const formData = new FormData(form);
+      const data = {};
+      for (const [key, value] of formData.entries()) {
+        data[key] = value;
+      }
+
+      if (testInfo) {
+        // Show live form data
+        const liveDisplay = document.createElement('pre');
+        liveDisplay.textContent = JSON.stringify(data, null, 2);
+
+        testInfo.innerHTML = '';
+        testInfo.appendChild(document.createTextNode('Test mode active - Live form data:'));
+        testInfo.appendChild(liveDisplay);
+      }
+    };
+
+    // Set initial message and data
+    if (testInfo) {
+      testInfo.textContent = 'Test mode active, preventing native submissions';
+      // Show initial form state
+      updateLiveData();
+    }
+
+    // Listen to all form inputs for live updates
+    addHandler(form, 'input', updateLiveData);
+    addHandler(form, 'change', updateLiveData);
+
+    // Find submit button
+    const submitButton =
+      form.querySelector('button[type="submit"], input[type="submit"]') ||
+      form.querySelector('button:not([type])');
+
+    // Track button clicks to detect when browser validation blocks submission
+    if (submitButton) {
+      const clickHandler = () => {
+        console.log('[form-test] Submit button clicked');
+
+        // Use requestAnimationFrame to check if form will submit
+        // If form is invalid, submit event won't fire
+        requestAnimationFrame(() => {
+          if (!form.checkValidity()) {
+            console.log('[form-test] Browser blocked submission - validation failed');
+          }
+        });
+      };
+      addHandler(submitButton, 'click', clickHandler);
+    }
+
+    // Handle form submission
+    const submitHandler = (e) => {
+      e.preventDefault(); // Prevent actual submission
+      e.stopPropagation(); // Stop event from bubbling
+      e.stopImmediatePropagation(); // Stop other listeners on same element
+
+      console.log('[form-test] Submission prevented - displaying test results');
+
+      // Get form data
+      const formData = new FormData(form);
+      const data = {};
+      for (const [key, value] of formData.entries()) {
+        data[key] = value;
+      }
+
+      // Create success message
+      const timestamp = new Date().toLocaleTimeString();
+      const message = `✅ Form would submit successfully at ${timestamp}`;
+
+      // Display in test info element or console
+      if (testInfo) {
+        // Show form data in a formatted way
+        const dataDisplay = document.createElement('pre');
+        dataDisplay.textContent = JSON.stringify(data, null, 2);
+
+        testInfo.innerHTML = ''; // Clear previous
+        testInfo.appendChild(document.createTextNode(message));
+        testInfo.appendChild(dataDisplay);
+      } else {
+        console.log(message);
+        console.log('Form data:', data);
+      }
+
+      return false; // Extra insurance to prevent submission
+    };
+
+    // Use capture phase to catch submit event before anything else
+    addHandler(form, 'submit', submitHandler, true);
+  });
+
+  return {
+    result: `test initialized on ${testWrappers.length} form${testWrappers.length !== 1 ? 's' : ''}`,
+    destroy: () => {
+      // Remove all event listeners
+      cleanup.handlers.forEach(({ element, event, handler, options }) => {
+        element.removeEventListener(event, handler, options);
+      });
+      cleanup.handlers.length = 0;
+    },
+  };
+}