@xeplr/ui-utils 1.0.0

package/src/fileUpload/useFileUploadController.js

@@ -0,0 +1,163 @@
+import { useState, useRef } from 'react';
+import { uploadFile } from './uploadFile.js';
+
+/**
+ * @param {object} options
+ * @param {string[]} [options.allowedTypes] - MIME types: ['image/*', 'application/pdf']
+ * @param {number} [options.maxSize] - Max file size in bytes
+ * @param {number} [options.maxFiles=1] - Max number of files
+ * @param {string} [options.url] - Upload URL override
+ * @param {string} [options.fieldName='file'] - Form field name
+ * @param {object} [options.extraData] - Additional form data
+ * @param {function} [options.onSuccess] - Called with server response
+ * @param {function} [options.onError] - Called with error
+ */
+export function useFileUploadController(options = {}) {
+  var [files, setFiles] = useState([]);
+  var [uploading, setUploading] = useState(false);
+  var [progress, setProgress] = useState(0);
+  var [error, setError] = useState('');
+  var [result, setResult] = useState(null);
+  var [dragOver, setDragOver] = useState(false);
+  var inputRef = useRef(null);
+
+  var allowedTypes = options.allowedTypes || ['*'];
+  var maxSize = options.maxSize || 5 * 1024 * 1024;
+  var maxFiles = options.maxFiles || 1;
+
+  function isTypeAllowed(mimetype) {
+    for (var i = 0; i < allowedTypes.length; i++) {
+      var allowed = allowedTypes[i];
+      if (allowed === '*') return true;
+      if (allowed.endsWith('/*')) {
+        var category = allowed.split('/')[0];
+        if (mimetype.startsWith(category + '/')) return true;
+      }
+      if (allowed === mimetype) return true;
+    }
+    return false;
+  }
+
+  function validate(fileList) {
+    var validated = [];
+    for (var i = 0; i < fileList.length; i++) {
+      var file = fileList[i];
+      if (!isTypeAllowed(file.type)) {
+        return { error: 'File type not allowed: ' + file.name };
+      }
+      if (file.size > maxSize) {
+        return { error: 'File too large: ' + file.name };
+      }
+      validated.push(file);
+    }
+    if (validated.length > maxFiles) {
+      return { error: 'Too many files. Maximum: ' + maxFiles };
+    }
+    return { files: validated };
+  }
+
+  function handleFiles(fileList) {
+    setError('');
+    setResult(null);
+    var validation = validate(fileList);
+    if (validation.error) {
+      setError(validation.error);
+      return;
+    }
+    setFiles(validation.files);
+  }
+
+  function handleChange(e) {
+    handleFiles(Array.from(e.target.files));
+  }
+
+  function handleDragOver(e) {
+    e.preventDefault();
+    setDragOver(true);
+  }
+
+  function handleDragLeave(e) {
+    e.preventDefault();
+    setDragOver(false);
+  }
+
+  function handleDrop(e) {
+    e.preventDefault();
+    setDragOver(false);
+    handleFiles(Array.from(e.dataTransfer.files));
+  }
+
+  function openFilePicker() {
+    if (inputRef.current) {
+      inputRef.current.click();
+    }
+  }
+
+  function removeFile(index) {
+    setFiles(function(prev) {
+      var next = prev.slice();
+      next.splice(index, 1);
+      return next;
+    });
+  }
+
+  function clear() {
+    setFiles([]);
+    setError('');
+    setResult(null);
+    setProgress(0);
+    if (inputRef.current) {
+      inputRef.current.value = '';
+    }
+  }
+
+  async function handleUpload() {
+    if (files.length === 0) return;
+    setError('');
+    setUploading(true);
+    setProgress(0);
+    try {
+      var response = await uploadFile(files, {
+        url: options.url,
+        fieldName: options.fieldName,
+        extraData: options.extraData,
+        onProgress: function(percent) {
+          setProgress(percent);
+        }
+      });
+      setResult(response);
+      if (options.onSuccess) options.onSuccess(response);
+    } catch (err) {
+      setError(err.message);
+      if (options.onError) options.onError(err);
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  return {
+    // State
+    files,
+    uploading,
+    progress,
+    error,
+    result,
+    dragOver,
+    inputRef,
+
+    // Actions
+    handleChange,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+    handleUpload,
+    openFilePicker,
+    removeFile,
+    clear,
+
+    // Config (for view to read)
+    allowedTypes,
+    maxSize,
+    maxFiles
+  };
+}

package/src/fileUpload/validateDesign.js

@@ -0,0 +1,49 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Validates that required elements exist in the rendered design.
+ * Throws a visible error if any required element is missing.
+ *
+ * @param {string} componentName - Name of the page (for error messages)
+ * @param {Array<{id?: string, role?: string, selector?: string, label: string}>} requiredElements
+ */
+export function useDesignValidator(componentName, requiredElements) {
+  var containerRef = useRef(null);
+
+  useEffect(function() {
+    if (!containerRef.current) return;
+
+    var missing = [];
+    for (var i = 0; i < requiredElements.length; i++) {
+      var rule = requiredElements[i];
+      var found = false;
+
+      if (rule.id) {
+        found = !!containerRef.current.querySelector('#' + rule.id);
+      } else if (rule.role) {
+        found = !!containerRef.current.querySelector('[role="' + rule.role + '"]');
+      } else if (rule.selector) {
+        found = !!containerRef.current.querySelector(rule.selector);
+      }
+
+      if (!found) {
+        missing.push(rule.label + (rule.id ? ' (id="' + rule.id + '")' : '') + (rule.selector ? ' (' + rule.selector + ')' : ''));
+      }
+    }
+
+    if (missing.length > 0) {
+      throw new Error(
+        '[xeplr-ui-utils] ' + componentName + ' design is missing required elements:\n' +
+        missing.map(function(m) { return '  - ' + m; }).join('\n')
+      );
+    }
+  }, []);
+
+  return containerRef;
+}
+
+export var FILE_UPLOAD_RULES = [
+  { selector: 'input[type="file"]', label: 'File input' },
+  { selector: '.xeplr-upload-dropzone, [role="dropzone"]', label: 'Drop zone area' },
+  { selector: 'button', label: 'Upload/action button' }
+];

package/src/index.js

@@ -0,0 +1,23 @@
+// File Upload — model
+export { configureUpload, uploadFile } from './fileUpload/uploadFile.js';
+
+// File Upload — controller
+export { useFileUploadController } from './fileUpload/useFileUploadController.js';
+
+// File Upload — design validation
+export { useDesignValidator, FILE_UPLOAD_RULES } from './fileUpload/validateDesign.js';
+
+// File Upload — sample design
+export { FileUploadSample } from './fileUpload/designs/index.js';
+
+// File Upload — ready-made page (controller + sample design wired)
+export { FileUploadPage } from './fileUpload/pages.jsx';
+
+// Snackbar
+export { raiseSnackbar } from './snackbar/snackbar.js';
+
+// Static data
+export { default as COUNTRIES } from './data/countries.json';
+import _statesData from './data/states.json';
+export var STATES = _statesData.STATES;
+export var STATES_IN = _statesData.STATES_IN;

package/src/snackbar/snackbar.js

@@ -0,0 +1,72 @@
+var _container = null;
+var _queue = [];
+var _timer = null;
+
+var DESIGNS = {
+  success: { bg: '#059669', color: '#fff' },
+  error: { bg: '#dc2626', color: '#fff' },
+  default: { bg: '#2563eb', color: '#fff' }
+};
+
+var DEFAULT_DURATION = 3000;
+
+function _ensureContainer() {
+  if (_container) return _container;
+
+  _container = document.createElement('div');
+  _container.id = 'xeplr-snackbar-container';
+  _container.style.cssText = 'position:fixed;bottom:24px;right:24px;z-index:99999;display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none;';
+  document.body.appendChild(_container);
+  return _container;
+}
+
+function _createEl(message, design, duration) {
+  var colors = DESIGNS[design] || DESIGNS.default;
+
+  var el = document.createElement('div');
+  el.style.cssText = 'padding:12px 20px;border-radius:6px;font:14px/1.4 system-ui,sans-serif;max-width:380px;word-break:break-word;pointer-events:auto;opacity:0;transform:translateY(8px);transition:opacity 0.2s,transform 0.2s;cursor:pointer;'
+    + 'background:' + colors.bg + ';color:' + colors.color + ';';
+  el.textContent = message;
+
+  el.onclick = function() { _dismiss(el); };
+
+  // Animate in
+  requestAnimationFrame(function() {
+    el.style.opacity = '1';
+    el.style.transform = 'translateY(0)';
+  });
+
+  // Auto dismiss
+  el._timeout = setTimeout(function() { _dismiss(el); }, duration);
+
+  return el;
+}
+
+function _dismiss(el) {
+  if (el._dismissed) return;
+  el._dismissed = true;
+  clearTimeout(el._timeout);
+  el.style.opacity = '0';
+  el.style.transform = 'translateY(8px)';
+  setTimeout(function() {
+    if (el.parentNode) el.parentNode.removeChild(el);
+  }, 200);
+}
+
+/**
+ * Show a snackbar notification.
+ *
+ * @param {string} message - Text to display
+ * @param {object} [options]
+ * @param {string} [options.design='default'] - 'success' | 'error' | 'default'
+ * @param {number} [options.duration=3000] - Auto-dismiss in ms
+ */
+export function raiseSnackbar(message, options) {
+  options = options || {};
+  var design = options.design || 'default';
+  var duration = options.duration || DEFAULT_DURATION;
+
+  var container = _ensureContainer();
+  var el = _createEl(message, design, duration);
+  container.appendChild(el);
+}