@xeplr/ui-utils 1.0.0

package/src/data/states.json

@@ -0,0 +1,296 @@
+{
+  "STATES": {
+    "IN": [
+      {
+        "code": "AN",
+        "name": "Andaman and Nicobar Islands"
+      },
+      {
+        "code": "AP",
+        "name": "Andhra Pradesh"
+      },
+      {
+        "code": "AR",
+        "name": "Arunachal Pradesh"
+      },
+      {
+        "code": "AS",
+        "name": "Assam"
+      },
+      {
+        "code": "BR",
+        "name": "Bihar"
+      },
+      {
+        "code": "CH",
+        "name": "Chandigarh"
+      },
+      {
+        "code": "CT",
+        "name": "Chhattisgarh"
+      },
+      {
+        "code": "DN",
+        "name": "Dadra and Nagar Haveli and Daman and Diu"
+      },
+      {
+        "code": "DL",
+        "name": "Delhi"
+      },
+      {
+        "code": "GA",
+        "name": "Goa"
+      },
+      {
+        "code": "GJ",
+        "name": "Gujarat"
+      },
+      {
+        "code": "HR",
+        "name": "Haryana"
+      },
+      {
+        "code": "HP",
+        "name": "Himachal Pradesh"
+      },
+      {
+        "code": "JK",
+        "name": "Jammu and Kashmir"
+      },
+      {
+        "code": "JH",
+        "name": "Jharkhand"
+      },
+      {
+        "code": "KA",
+        "name": "Karnataka"
+      },
+      {
+        "code": "KL",
+        "name": "Kerala"
+      },
+      {
+        "code": "LA",
+        "name": "Ladakh"
+      },
+      {
+        "code": "LD",
+        "name": "Lakshadweep"
+      },
+      {
+        "code": "MP",
+        "name": "Madhya Pradesh"
+      },
+      {
+        "code": "MH",
+        "name": "Maharashtra"
+      },
+      {
+        "code": "MN",
+        "name": "Manipur"
+      },
+      {
+        "code": "ML",
+        "name": "Meghalaya"
+      },
+      {
+        "code": "MZ",
+        "name": "Mizoram"
+      },
+      {
+        "code": "NL",
+        "name": "Nagaland"
+      },
+      {
+        "code": "OR",
+        "name": "Odisha"
+      },
+      {
+        "code": "PY",
+        "name": "Puducherry"
+      },
+      {
+        "code": "PB",
+        "name": "Punjab"
+      },
+      {
+        "code": "RJ",
+        "name": "Rajasthan"
+      },
+      {
+        "code": "SK",
+        "name": "Sikkim"
+      },
+      {
+        "code": "TN",
+        "name": "Tamil Nadu"
+      },
+      {
+        "code": "TG",
+        "name": "Telangana"
+      },
+      {
+        "code": "TR",
+        "name": "Tripura"
+      },
+      {
+        "code": "UP",
+        "name": "Uttar Pradesh"
+      },
+      {
+        "code": "UT",
+        "name": "Uttarakhand"
+      },
+      {
+        "code": "WB",
+        "name": "West Bengal"
+      }
+    ]
+  },
+  "STATES_IN": [
+    {
+      "code": "AN",
+      "name": "Andaman and Nicobar Islands"
+    },
+    {
+      "code": "AP",
+      "name": "Andhra Pradesh"
+    },
+    {
+      "code": "AR",
+      "name": "Arunachal Pradesh"
+    },
+    {
+      "code": "AS",
+      "name": "Assam"
+    },
+    {
+      "code": "BR",
+      "name": "Bihar"
+    },
+    {
+      "code": "CH",
+      "name": "Chandigarh"
+    },
+    {
+      "code": "CT",
+      "name": "Chhattisgarh"
+    },
+    {
+      "code": "DN",
+      "name": "Dadra and Nagar Haveli and Daman and Diu"
+    },
+    {
+      "code": "DL",
+      "name": "Delhi"
+    },
+    {
+      "code": "GA",
+      "name": "Goa"
+    },
+    {
+      "code": "GJ",
+      "name": "Gujarat"
+    },
+    {
+      "code": "HR",
+      "name": "Haryana"
+    },
+    {
+      "code": "HP",
+      "name": "Himachal Pradesh"
+    },
+    {
+      "code": "JK",
+      "name": "Jammu and Kashmir"
+    },
+    {
+      "code": "JH",
+      "name": "Jharkhand"
+    },
+    {
+      "code": "KA",
+      "name": "Karnataka"
+    },
+    {
+      "code": "KL",
+      "name": "Kerala"
+    },
+    {
+      "code": "LA",
+      "name": "Ladakh"
+    },
+    {
+      "code": "LD",
+      "name": "Lakshadweep"
+    },
+    {
+      "code": "MP",
+      "name": "Madhya Pradesh"
+    },
+    {
+      "code": "MH",
+      "name": "Maharashtra"
+    },
+    {
+      "code": "MN",
+      "name": "Manipur"
+    },
+    {
+      "code": "ML",
+      "name": "Meghalaya"
+    },
+    {
+      "code": "MZ",
+      "name": "Mizoram"
+    },
+    {
+      "code": "NL",
+      "name": "Nagaland"
+    },
+    {
+      "code": "OR",
+      "name": "Odisha"
+    },
+    {
+      "code": "PY",
+      "name": "Puducherry"
+    },
+    {
+      "code": "PB",
+      "name": "Punjab"
+    },
+    {
+      "code": "RJ",
+      "name": "Rajasthan"
+    },
+    {
+      "code": "SK",
+      "name": "Sikkim"
+    },
+    {
+      "code": "TN",
+      "name": "Tamil Nadu"
+    },
+    {
+      "code": "TG",
+      "name": "Telangana"
+    },
+    {
+      "code": "TR",
+      "name": "Tripura"
+    },
+    {
+      "code": "UP",
+      "name": "Uttar Pradesh"
+    },
+    {
+      "code": "UT",
+      "name": "Uttarakhand"
+    },
+    {
+      "code": "WB",
+      "name": "West Bengal"
+    }
+  ]
+}

package/src/fileUpload/designs/FileUploadSample.jsx

@@ -0,0 +1,77 @@
+import './fileUpload.css';
+
+function formatSize(bytes) {
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+}
+
+export default function FileUploadSample({
+  files, uploading, progress, error, result, dragOver, inputRef,
+  handleChange, handleDragOver, handleDragLeave, handleDrop,
+  handleUpload, openFilePicker, removeFile, clear,
+  allowedTypes, maxSize, maxFiles
+}) {
+  return (
+    <div className="xeplr-upload-container">
+      <div
+        className={'xeplr-upload-dropzone' + (dragOver ? ' xeplr-upload-dragover' : '')}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        onClick={openFilePicker}
+      >
+        <input
+          ref={inputRef}
+          type="file"
+          onChange={handleChange}
+          multiple={maxFiles > 1}
+          accept={allowedTypes.join(',')}
+          className="xeplr-upload-input"
+        />
+        <div className="xeplr-upload-dropzone-text">
+          <p>Drag & drop files here or click to browse</p>
+          <p className="xeplr-upload-hint">
+            Max {formatSize(maxSize)} per file
+            {maxFiles > 1 ? ' · Up to ' + maxFiles + ' files' : ''}
+          </p>
+        </div>
+      </div>
+
+      {error && <div className="xeplr-upload-alert xeplr-upload-alert-error">{error}</div>}
+      {result && <div className="xeplr-upload-alert xeplr-upload-alert-success">Upload complete</div>}
+
+      {files.length > 0 && (
+        <div className="xeplr-upload-file-list">
+          {files.map(function(file, i) {
+            return (
+              <div key={i} className="xeplr-upload-file-item">
+                <span className="xeplr-upload-file-name">{file.name}</span>
+                <span className="xeplr-upload-file-size">{formatSize(file.size)}</span>
+                {!uploading && (
+                  <button type="button" className="xeplr-upload-file-remove" onClick={function() { removeFile(i); }}>×</button>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {uploading && (
+        <div className="xeplr-upload-progress">
+          <div className="xeplr-upload-progress-bar" style={{ width: progress + '%' }}></div>
+          <span className="xeplr-upload-progress-text">{progress}%</span>
+        </div>
+      )}
+
+      <div className="xeplr-upload-actions">
+        <button type="button" onClick={handleUpload} disabled={uploading || files.length === 0} className="xeplr-upload-btn xeplr-upload-btn-primary">
+          {uploading ? 'Uploading...' : 'Upload'}
+        </button>
+        <button type="button" onClick={clear} disabled={uploading} className="xeplr-upload-btn xeplr-upload-btn-secondary">
+          Clear
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/fileUpload/designs/fileUpload.css

@@ -0,0 +1,161 @@
+.xeplr-upload-container {
+  max-width: 500px;
+  margin: 20px auto;
+  font-family: system-ui, -apple-system, sans-serif;
+  color: #e0e0e0;
+}
+
+.xeplr-upload-dropzone {
+  border: 2px dashed #444;
+  border-radius: 8px;
+  padding: 40px 20px;
+  text-align: center;
+  cursor: pointer;
+  background: #1a1a1a;
+  transition: border-color 0.2s, background 0.2s;
+}
+
+.xeplr-upload-dropzone:hover {
+  border-color: #646cff;
+}
+
+.xeplr-upload-dragover {
+  border-color: #646cff;
+  background: #252540;
+}
+
+.xeplr-upload-input {
+  display: none;
+}
+
+.xeplr-upload-dropzone-text p {
+  margin: 5px 0;
+}
+
+.xeplr-upload-hint {
+  font-size: 12px;
+  color: #888;
+}
+
+.xeplr-upload-alert {
+  margin-top: 10px;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.xeplr-upload-alert-error {
+  background: #3a1a1a;
+  color: #ff6b6b;
+  border: 1px solid #5a2a2a;
+}
+
+.xeplr-upload-alert-success {
+  background: #1a3a1a;
+  color: #6bff6b;
+  border: 1px solid #2a5a2a;
+}
+
+.xeplr-upload-file-list {
+  margin-top: 12px;
+}
+
+.xeplr-upload-file-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 10px;
+  background: #2a2a2a;
+  border-radius: 4px;
+  margin-bottom: 6px;
+}
+
+.xeplr-upload-file-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+}
+
+.xeplr-upload-file-size {
+  font-size: 12px;
+  color: #888;
+  margin: 0 10px;
+}
+
+.xeplr-upload-file-remove {
+  background: none;
+  border: none;
+  color: #ff6b6b;
+  font-size: 18px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+}
+
+.xeplr-upload-file-remove:hover {
+  color: #ff4444;
+}
+
+.xeplr-upload-progress {
+  margin-top: 12px;
+  background: #2a2a2a;
+  border-radius: 4px;
+  height: 24px;
+  position: relative;
+  overflow: hidden;
+}
+
+.xeplr-upload-progress-bar {
+  height: 100%;
+  background: #646cff;
+  border-radius: 4px;
+  transition: width 0.3s;
+}
+
+.xeplr-upload-progress-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.xeplr-upload-actions {
+  margin-top: 12px;
+  display: flex;
+  gap: 8px;
+}
+
+.xeplr-upload-btn {
+  padding: 8px 20px;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.xeplr-upload-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.xeplr-upload-btn-primary {
+  background: #646cff;
+  color: #fff;
+  flex: 1;
+}
+
+.xeplr-upload-btn-primary:hover:not(:disabled) {
+  background: #535bf2;
+}
+
+.xeplr-upload-btn-secondary {
+  background: #333;
+  color: #e0e0e0;
+}
+
+.xeplr-upload-btn-secondary:hover:not(:disabled) {
+  background: #444;
+}

package/src/fileUpload/designs/index.js

@@ -0,0 +1 @@
+export { default as FileUploadSample } from './FileUploadSample.jsx';

package/src/fileUpload/pages.jsx

@@ -0,0 +1,9 @@
+import { useFileUploadController } from './useFileUploadController.js';
+import FileUploadSample from './designs/FileUploadSample.jsx';
+import { useDesignValidator, FILE_UPLOAD_RULES } from './validateDesign.js';
+
+export function FileUploadPage(props) {
+  var controller = useFileUploadController(props);
+  var ref = useDesignValidator('FileUploadPage', FILE_UPLOAD_RULES);
+  return <div ref={ref}><FileUploadSample {...controller} /></div>;
+}

package/src/fileUpload/uploadFile.js

@@ -0,0 +1,76 @@
+var _config = {
+  url: '/internal/upload',
+  headers: {}
+};
+
+export function configureUpload(config = {}) {
+  if (config.url) _config.url = config.url;
+  if (config.headers) _config.headers = config.headers;
+  if (config.getHeaders) _config.getHeaders = config.getHeaders;
+}
+
+/**
+ * Upload files to the server.
+ * @param {File[]} files - Files to upload
+ * @param {object} [options]
+ * @param {string} [options.url] - Override upload URL
+ * @param {string} [options.fieldName='file'] - Form field name
+ * @param {object} [options.extraData] - Additional form fields
+ * @param {function} [options.onProgress] - Progress callback: (percent, loaded, total)
+ * @returns {Promise<object>} Server response
+ */
+export function uploadFile(files, options = {}) {
+  return new Promise(function(resolve, reject) {
+    var url = options.url || _config.url;
+    var fieldName = options.fieldName || 'file';
+    var formData = new FormData();
+
+    var fileList = Array.isArray(files) ? files : [files];
+    fileList.forEach(function(file) {
+      formData.append(fieldName, file);
+    });
+
+    if (options.extraData) {
+      Object.keys(options.extraData).forEach(function(key) {
+        formData.append(key, options.extraData[key]);
+      });
+    }
+
+    var xhr = new XMLHttpRequest();
+    xhr.open('POST', url);
+
+    // Apply headers
+    var headers = _config.getHeaders ? _config.getHeaders() : _config.headers;
+    Object.keys(headers).forEach(function(key) {
+      xhr.setRequestHeader(key, headers[key]);
+    });
+
+    if (options.onProgress) {
+      xhr.upload.onprogress = function(e) {
+        if (e.lengthComputable) {
+          var percent = Math.round((e.loaded / e.total) * 100);
+          options.onProgress(percent, e.loaded, e.total);
+        }
+      };
+    }
+
+    xhr.onload = function() {
+      try {
+        var response = JSON.parse(xhr.responseText);
+        if (xhr.status >= 200 && xhr.status < 300) {
+          resolve(response);
+        } else {
+          reject(new Error(response.error || 'Upload failed'));
+        }
+      } catch (e) {
+        reject(new Error('Upload failed: ' + xhr.statusText));
+      }
+    };
+
+    xhr.onerror = function() {
+      reject(new Error('Upload failed: network error'));
+    };
+
+    xhr.send(formData);
+  });
+}