@xeplr/ui-utils 1.0.0 → 1.0.1

package/src/index.js

@@ -10,12 +10,126 @@ export { useDesignValidator, FILE_UPLOAD_RULES } from './fileUpload/validateDesi
 // File Upload — sample design
 export { FileUploadSample } from './fileUpload/designs/index.js';
 
-// File Upload — ready-made page (controller + sample design wired)
+// File Upload — ready-made page
 export { FileUploadPage } from './fileUpload/pages.jsx';
 
+// DataImport — model. Upload a file, map its parts (e.g. Excel sheets — or
+// the whole file, for CSV/JSON) to app-defined named targets, commit. The
+// app supplies onInspect/onCommit (its own upload + load endpoints); this
+// module only owns the file-pick -> mapping -> commit flow and UI.
+export { sanitizeTargetName, buildInitialMappings } from './dataImport/dataImport.js';
+
+// DataImport — controller
+export { useDataImportController } from './dataImport/useDataImportController.js';
+
+// DataImport — design validation
+export { DATA_IMPORT_RULES } from './dataImport/validateDesign.js';
+
+// DataImport — sample design
+export { DataImportSample } from './dataImport/designs/index.js';
+
+// DataImport — ready-made page
+export { DataImportPage } from './dataImport/pages.jsx';
+
+// ImportHistory — lists past import jobs (app-supplied onList) with a
+// Rollback action per row (app-supplied onRollback) — the read/undo side of
+// DataImportPage's write side, same file/model. Product-agnostic: the app
+// owns what "list" and "rollback" actually call.
+export { useImportHistoryController } from './dataImport/useImportHistoryController.js';
+export { IMPORT_HISTORY_RULES } from './dataImport/validateDesign.js';
+export { ImportHistorySample } from './dataImport/designs/index.js';
+export { ImportHistoryPage } from './dataImport/pages.jsx';
+
+// NumberField — model
+export {
+  NUMBER_TYPES,
+  sanitizeNumberInput,
+  toNumeric,
+  formatDisplay,
+  validateRange,
+  resolveAffixState
+} from './numberField/numberField.js';
+
+// NumberField — controller
+export { useNumberFieldController } from './numberField/useNumberFieldController.js';
+
+// NumberField — design validation
+export { NUMBER_FIELD_RULES } from './numberField/validateDesign.js';
+
+// NumberField — sample design
+export { NumberFieldSample } from './numberField/designs/index.js';
+
+// NumberField — ready-made page
+export { NumberFieldPage } from './numberField/pages.jsx';
+
+// DateField — model
+export {
+  DATE_TYPES,
+  isValidISODate,
+  calculateAge,
+  inputTypeFor,
+  toInputValue,
+  validateBounds
+} from './dateField/dateField.js';
+
+// DateField — controller
+export { useDateFieldController } from './dateField/useDateFieldController.js';
+
+// DateField — design validation
+export { DATE_FIELD_RULES } from './dateField/validateDesign.js';
+
+// DateField — sample design
+export { DateFieldSample } from './dateField/designs/index.js';
+
+// DateField — ready-made page
+export { DateFieldPage } from './dateField/pages.jsx';
+
+// Dropdown — model
+export {
+  DROPDOWN_MODES,
+  normalizeKeys,
+  sortByKey,
+  filterByQuery,
+  pickSelected
+} from './dropdown/dropdown.js';
+
+// Dropdown — controller
+export { useDropdownController } from './dropdown/useDropdownController.js';
+
+// Dropdown — design validation
+export { DROPDOWN_RULES } from './dropdown/validateDesign.js';
+
+// Dropdown — sample design
+export { DropdownSample } from './dropdown/designs/index.js';
+
+// Dropdown — ready-made page
+export { DropdownPage } from './dropdown/pages.jsx';
+
+// GridDisplayer — model
+export { filterRows as filterGridRows, sortRows as sortGridRows } from './gridDisplayer/gridDisplayer.js';
+
+// GridDisplayer — controller
+export { useGridDisplayerController } from './gridDisplayer/useGridDisplayerController.js';
+
+// GridDisplayer — design validation
+export { GRID_DISPLAYER_RULES } from './gridDisplayer/validateDesign.js';
+
+// GridDisplayer — sample design
+export { GridDisplayerSample } from './gridDisplayer/designs/index.js';
+
+// GridDisplayer — ready-made page
+export { GridDisplayerPage } from './gridDisplayer/pages.jsx';
+
 // Snackbar
 export { raiseSnackbar } from './snackbar/snackbar.js';
 
+// Confirm
+export { raiseConfirm } from './confirm/confirm.js';
+
+// Theme — brand-neutral DEFAULT design tokens (chart + table), override-friendly.
+// Consumers pass overrides to resolveTheme(); overrides win, rest falls through.
+export { default as DEFAULT_THEME, resolveTheme, getThemeVariant, getChartOptions, deepMerge } from './theme/index.js';
+
 // Static data
 export { default as COUNTRIES } from './data/countries.json';
 import _statesData from './data/states.json';

package/src/numberField/designs/NumberFieldSample.jsx

@@ -0,0 +1,52 @@
+import './numberField.css';
+
+export default function NumberFieldSample({
+  type, raw, error, placeholder, disabled, affix,
+  handleNumberChange, handleAffixChange, handleBlur
+}) {
+  function renderAffix() {
+    if (!affix) return null;
+    if (affix.list.length === 1) {
+      return <span className="xeplr-numberfield-affix-static">{affix.selected[affix.labelKey]}</span>;
+    }
+    return (
+      <select
+        className="xeplr-numberfield-affix-select"
+        value={affix.selected[affix.valueKey]}
+        onChange={handleAffixChange}
+        disabled={disabled}
+      >
+        {affix.list.map(function(item) {
+          return (
+            <option key={item[affix.valueKey]} value={item[affix.valueKey]}>
+              {item[affix.labelKey]}
+            </option>
+          );
+        })}
+      </select>
+    );
+  }
+
+  var affixBefore = affix && affix.position === 'before';
+  var affixAfter = affix && affix.position === 'after';
+
+  return (
+    <div className={'xeplr-numberfield xeplr-numberfield-' + type + (error ? ' xeplr-numberfield-error' : '')}>
+      <div className="xeplr-numberfield-row">
+        {affixBefore && renderAffix()}
+        <input
+          type="text"
+          inputMode="decimal"
+          className="xeplr-numberfield-input"
+          value={raw}
+          placeholder={placeholder}
+          disabled={disabled}
+          onChange={handleNumberChange}
+          onBlur={handleBlur}
+        />
+        {affixAfter && renderAffix()}
+      </div>
+      {error && <div className="xeplr-numberfield-error-text">{error}</div>}
+    </div>
+  );
+}

package/src/numberField/designs/index.js

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

package/src/numberField/designs/numberField.css

@@ -0,0 +1,66 @@
+.xeplr-numberfield {
+  font-family: system-ui, -apple-system, sans-serif;
+  color: #e0e0e0;
+}
+
+.xeplr-numberfield-row {
+  display: flex;
+  align-items: stretch;
+  border: 1px solid #444;
+  border-radius: 6px;
+  background: #1a1a1a;
+  overflow: hidden;
+}
+
+.xeplr-numberfield-row:focus-within {
+  border-color: #646cff;
+  box-shadow: 0 0 0 2px rgba(100, 108, 255, 0.18);
+}
+
+.xeplr-numberfield-error .xeplr-numberfield-row {
+  border-color: #e25555;
+}
+
+.xeplr-numberfield-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: inherit;
+  padding: 9px 12px;
+  font-size: 14px;
+  min-width: 0;
+}
+
+.xeplr-numberfield-affix-select,
+.xeplr-numberfield-affix-static {
+  background: #232540;
+  border: none;
+  color: #b8bbe0;
+  padding: 0 12px;
+  font-size: 13px;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  outline: none;
+}
+
+.xeplr-numberfield-affix-static {
+  cursor: default;
+}
+
+.xeplr-numberfield-row > .xeplr-numberfield-affix-select:first-child,
+.xeplr-numberfield-row > .xeplr-numberfield-affix-static:first-child {
+  border-right: 1px solid #444;
+}
+
+.xeplr-numberfield-row > .xeplr-numberfield-affix-select:last-child,
+.xeplr-numberfield-row > .xeplr-numberfield-affix-static:last-child {
+  border-left: 1px solid #444;
+}
+
+.xeplr-numberfield-error-text {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #e25555;
+}

package/src/numberField/numberField.js

@@ -0,0 +1,105 @@
+/**
+ * NumberField — pure model. No React.
+ *
+ * Handles the parsing, formatting, and validation of numeric input.
+ * Three flavours of value: float, currency, units. Currency and units
+ * are numerically the same — they only differ by the affix shown next
+ * to the number (a dropdown of currencies or a dropdown of units).
+ */
+
+export var NUMBER_TYPES = ['float', 'currency', 'units'];
+
+/**
+ * Strip everything that isn't a digit, decimal point, or leading minus.
+ * Collapses multiple decimal points to the first one.
+ */
+export function sanitizeNumberInput(raw) {
+  if (raw === null || raw === undefined) return '';
+  var str = String(raw);
+  var negative = str.charAt(0) === '-';
+  str = str.replace(/[^0-9.]/g, '');
+  var parts = str.split('.');
+  if (parts.length > 2) {
+    str = parts[0] + '.' + parts.slice(1).join('');
+  }
+  return (negative ? '-' : '') + str;
+}
+
+/**
+ * Convert a raw string to a Number. Returns null if not a finite number.
+ */
+export function toNumeric(raw) {
+  if (raw === null || raw === undefined || raw === '' || raw === '-') return null;
+  var n = Number(raw);
+  return isFinite(n) ? n : null;
+}
+
+/**
+ * Format a numeric value for display. Locale-aware grouping.
+ */
+export function formatDisplay(value, decimals) {
+  if (value === null || value === undefined || value === '') return '';
+  var n = Number(value);
+  if (!isFinite(n)) return '';
+  if (typeof decimals === 'number') {
+    return n.toLocaleString(undefined, {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals
+    });
+  }
+  return n.toLocaleString();
+}
+
+/**
+ * Validate a numeric value against optional min/max bounds.
+ * Returns { valid: true } or { valid: false, error: string }.
+ */
+export function validateRange(value, min, max) {
+  if (value === null) return { valid: true };
+  if (typeof min === 'number' && value < min) {
+    return { valid: false, error: 'Value must be at least ' + min };
+  }
+  if (typeof max === 'number' && value > max) {
+    return { valid: false, error: 'Value must be at most ' + max };
+  }
+  return { valid: true };
+}
+
+/**
+ * Resolve the affix list and currently-selected affix for a given type.
+ * Falls back to a sensible default when the user supplied only one item.
+ */
+export function resolveAffixState(type, options) {
+  options = options || {};
+  if (type === 'currency') {
+    var currencies = options.currencies || [];
+    if (currencies.length === 0) {
+      throw new Error('[xeplr-ui-utils:NumberField] type="currency" requires a `currencies` prop with at least one entry like { code: "INR", symbol: "₹" }');
+    }
+    var defaultCode = options.defaultCurrency || currencies[0].code;
+    var selected = currencies.find(function(c) { return c.code === defaultCode; }) || currencies[0];
+    return {
+      list: currencies,
+      selected: selected,
+      position: options.currencyPosition || 'before',
+      labelKey: 'symbol',
+      valueKey: 'code'
+    };
+  }
+  if (type === 'units') {
+    var units = options.units || [];
+    if (units.length === 0) {
+      throw new Error('[xeplr-ui-utils:NumberField] type="units" requires a `units` prop with at least one entry like { value: "kg", label: "kg" }');
+    }
+    var defaultValue = options.defaultUnit || units[0].value;
+    var selectedUnit = units.find(function(u) { return u.value === defaultValue; }) || units[0];
+    return {
+      list: units,
+      selected: selectedUnit,
+      position: options.unitPosition || 'after',
+      labelKey: 'label',
+      valueKey: 'value'
+    };
+  }
+  return null;
+}

package/src/numberField/pages.jsx

@@ -0,0 +1,10 @@
+import { useNumberFieldController } from './useNumberFieldController.js';
+import NumberFieldSample from './designs/NumberFieldSample.jsx';
+import { useDesignValidator } from '../fileUpload/validateDesign.js';
+import { NUMBER_FIELD_RULES } from './validateDesign.js';
+
+export function NumberFieldPage(props) {
+  var controller = useNumberFieldController(props);
+  var ref = useDesignValidator('NumberFieldPage', NUMBER_FIELD_RULES);
+  return <div ref={ref}><NumberFieldSample {...controller} /></div>;
+}

package/src/numberField/useNumberFieldController.js

@@ -0,0 +1,116 @@
+import { useState, useEffect, useMemo } from 'react';
+import {
+  sanitizeNumberInput,
+  toNumeric,
+  formatDisplay,
+  validateRange,
+  resolveAffixState,
+  NUMBER_TYPES
+} from './numberField.js';
+
+/**
+ * @param {object} props
+ * @param {'float'|'currency'|'units'} [props.type='float']
+ * @param {number|null} [props.value]            — controlled numeric value
+ * @param {number|null} [props.defaultValue]     — uncontrolled initial value
+ * @param {(value, meta) => void} [props.onChange] — called with (numericValue, { affix })
+ * @param {Array} [props.currencies]   — for currency type: [{ code, symbol }]
+ * @param {string} [props.defaultCurrency]
+ * @param {'before'|'after'} [props.currencyPosition='before']
+ * @param {Array} [props.units]        — for units type: [{ value, label }]
+ * @param {string} [props.defaultUnit]
+ * @param {'before'|'after'} [props.unitPosition='after']
+ * @param {number} [props.min]
+ * @param {number} [props.max]
+ * @param {number} [props.decimals]    — display decimals on blur
+ * @param {string} [props.placeholder]
+ * @param {boolean} [props.disabled]
+ */
+export function useNumberFieldController(props) {
+  props = props || {};
+  var type = props.type || 'float';
+  if (NUMBER_TYPES.indexOf(type) === -1) {
+    throw new Error('[xeplr-ui-utils:NumberField] Unknown type: ' + type + '. Expected one of ' + NUMBER_TYPES.join(', '));
+  }
+
+  var affixInit = useMemo(function() {
+    return resolveAffixState(type, props);
+  }, [
+    type,
+    props.currencies, props.defaultCurrency, props.currencyPosition,
+    props.units, props.defaultUnit, props.unitPosition
+  ]);
+
+  var isControlled = props.value !== undefined;
+  var initial = isControlled ? props.value : (props.defaultValue !== undefined ? props.defaultValue : null);
+
+  var [raw, setRaw] = useState(initial === null || initial === undefined ? '' : String(initial));
+  var [affix, setAffix] = useState(affixInit ? affixInit.selected : null);
+  var [error, setError] = useState('');
+
+  useEffect(function() {
+    if (isControlled) {
+      var next = props.value === null || props.value === undefined ? '' : String(props.value);
+      setRaw(next);
+    }
+  }, [props.value, isControlled]);
+
+  useEffect(function() {
+    if (affixInit) setAffix(affixInit.selected);
+  }, [affixInit]);
+
+  function emit(nextRaw, nextAffix) {
+    var numeric = toNumeric(nextRaw);
+    var rangeCheck = validateRange(numeric, props.min, props.max);
+    setError(rangeCheck.valid ? '' : rangeCheck.error);
+    if (props.onChange) {
+      props.onChange(numeric, { affix: nextAffix });
+    }
+  }
+
+  function handleNumberChange(e) {
+    var sanitized = sanitizeNumberInput(e.target.value);
+    if (!isControlled) setRaw(sanitized);
+    emit(sanitized, affix);
+  }
+
+  function handleAffixChange(e) {
+    var nextValue = e.target.value;
+    var next = (affixInit.list).find(function(item) {
+      return item[affixInit.valueKey] === nextValue;
+    });
+    if (!next) return;
+    setAffix(next);
+    emit(raw, next);
+  }
+
+  function handleBlur() {
+    var numeric = toNumeric(raw);
+    if (numeric === null) return;
+    if (typeof props.decimals === 'number') {
+      var fixed = numeric.toFixed(props.decimals);
+      if (!isControlled) setRaw(fixed);
+    }
+  }
+
+  return {
+    type,
+    raw,
+    numeric: toNumeric(raw),
+    error,
+    placeholder: props.placeholder,
+    disabled: !!props.disabled,
+    decimals: props.decimals,
+    formatDisplay: formatDisplay,
+    affix: affixInit ? {
+      list: affixInit.list,
+      selected: affix,
+      position: affixInit.position,
+      labelKey: affixInit.labelKey,
+      valueKey: affixInit.valueKey
+    } : null,
+    handleNumberChange,
+    handleAffixChange,
+    handleBlur
+  };
+}

package/src/numberField/validateDesign.js

@@ -0,0 +1,3 @@
+export var NUMBER_FIELD_RULES = [
+  { selector: 'input[inputmode="decimal"], input.xeplr-numberfield-input', label: 'Numeric input element' }
+];

package/src/snackbar/snackbar.js

@@ -2,10 +2,13 @@ var _container = null;
 var _queue = [];
 var _timer = null;
 
+// var(--xeplr-*, fallback) — picks up @xeplr/ui-account's theme tokens
+// (light/dark) when that stylesheet is loaded, falls back to these original
+// colors otherwise.
 var DESIGNS = {
-  success: { bg: '#059669', color: '#fff' },
-  error: { bg: '#dc2626', color: '#fff' },
-  default: { bg: '#2563eb', color: '#fff' }
+  success: { bg: 'var(--xeplr-success, #059669)', color: 'var(--xeplr-accent-text, #fff)' },
+  error: { bg: 'var(--xeplr-danger, #dc2626)', color: 'var(--xeplr-accent-text, #fff)' },
+  default: { bg: 'var(--xeplr-accent, #2563eb)', color: 'var(--xeplr-accent-text, #fff)' }
 };
 
 var DEFAULT_DURATION = 3000;