@granularjs/ui 0.1.0

package/src/components/NumberField.js

@@ -0,0 +1,389 @@
+import { cx, splitPropsChildren, resolveValue } from '../utils.js';
+import { Div, Span, when, after, state } from '@granularjs/core';
+import { TextInput } from './TextInput.js';
+
+export function NumberField(...args) {
+  const { props, rawProps } = splitPropsChildren(args, {
+    size: 'md',
+    step: 1,
+    allowDecimal: true,
+    allowNegative: true,
+    clampBehavior: 'blur',
+    hideControls: false,
+    decimalSeparator: '.',
+    thousandSeparator: '',
+    format: null,
+    prefix: '',
+    suffix: '',
+  });
+  const {
+    value,
+    min,
+    max,
+    step,
+    size,
+    allowDecimal,
+    allowNegative,
+    decimalSeparator,
+    thousandSeparator,
+    decimalScale,
+    clampBehavior,
+    hideControls,
+    format,
+    locale,
+    currency,
+    formatOptions,
+    prefix,
+    suffix,
+    leftSection,
+    rightSection,
+    className,
+    onChange: computed_onChange,
+    onInput: computed_onInput,
+    ...rest
+  } = props;
+  const { onChange: _onChange, onInput: _onInput, onBlur, onFocus, onKeyDown } = rawProps;
+
+  const onChange = (e) => {
+    _onChange?.(e.target?.value ?? '');
+    _onInput?.(e.target?.value ?? '');
+  }
+  const onInput = onChange;
+
+  const currentState = state('');
+
+  const escapeRegExp = (value) => String(value ?? '').replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+  const getScale = () => {
+    const allowDec = !!resolveValue(allowDecimal);
+    if (!allowDec) return 0;
+    const resolved = resolveValue(decimalScale);
+    if (resolved != null && resolved !== '' && Number.isFinite(Number(resolved))) return Math.max(0, Number(resolved));
+    const fmt = resolveValue(format);
+    if (fmt === 'currency' || fmt === 'percent') return 2;
+    return 0;
+  };
+
+  const parseNumber = (raw) => {
+    const decSep = resolveValue(decimalSeparator) ?? '.';
+    const thousSep = resolveValue(thousandSeparator) ?? '';
+    let rawValue = String(raw ?? '');
+    if (thousSep) {
+      rawValue = rawValue.split(thousSep).join('');
+    }
+    if (!rawValue || rawValue === '-' || rawValue === decSep || rawValue.endsWith(decSep)) return null;
+    const normalized = rawValue.replace(decSep, '.');
+    const num = Number(normalized);
+    if (!Number.isFinite(num)) return null;
+    return num;
+  };
+
+  const addThousandSeparators = (intPart) => {
+    const thousSep = resolveValue(thousandSeparator) ?? '';
+    if (!thousSep) return intPart;
+    return intPart.replace(/\B(?=(\d{3})+(?!\d))/g, thousSep);
+  };
+
+  const formatNumber = (num) => {
+    const decSep = resolveValue(decimalSeparator) ?? '.';
+    const scale = getScale();
+    const numeric = Number(num);
+    if (!Number.isFinite(numeric)) return '';
+    const sign = numeric < 0 ? '-' : '';
+    const abs = Math.abs(numeric);
+    let [int, dec = ''] = String(abs).split('.');
+    const formattedInt = addThousandSeparators(int);
+    if (scale > 0) {
+      const trimmed = dec.slice(0, scale).padEnd(scale, '0');
+      return `${sign}${formattedInt}${decSep}${trimmed}`;
+    }
+    return `${sign}${formattedInt}`;
+  };
+
+  const formatWithIntl = (num, kind) => {
+    try {
+      const resolvedLocale = resolveValue(locale);
+      const resolvedCurrency = resolveValue(currency) ?? 'USD';
+      const options = resolveValue(formatOptions) ?? {};
+      const scale = getScale();
+      const style = kind === 'currency' ? 'currency' : 'decimal';
+      const formatter = new Intl.NumberFormat(resolvedLocale, {
+        style,
+        currency: resolvedCurrency,
+        ...(scale > 0 ? { minimumFractionDigits: scale, maximumFractionDigits: scale } : { maximumFractionDigits: 0 }),
+        ...options,
+      });
+      return formatter.format(num);
+    } catch {
+      return formatNumber(num);
+    }
+  };
+
+  const clampValue = (num) => {
+    let next = num;
+    const minValue = resolveValue(min);
+    const maxValue = resolveValue(max);
+    if (minValue != null && Number.isFinite(Number(minValue))) next = Math.max(next, Number(minValue));
+    if (maxValue != null && Number.isFinite(Number(maxValue))) next = Math.min(next, Number(maxValue));
+    if (!resolveValue(allowNegative) && next < 0) next = 0;
+    return next;
+  };
+
+  const resolveSuffix = () => {
+    const suffixValue = resolveValue(suffix) ?? '';
+    const fmt = resolveValue(format);
+    if (!suffixValue && fmt === 'percent') return '%';
+    return suffixValue;
+  };
+
+  const buildVisual = (raw, sign, fmt) => {
+    const prefixValue = resolveValue(prefix) ?? '';
+    const suffixValue = resolveSuffix();
+    const normalizedRaw = String(raw ?? '').replace(/\u00A0/g, ' ');
+    const normalizedPrefix = String(prefixValue ?? '').replace(/\u00A0/g, ' ');
+    const normalizedSuffix = String(suffixValue ?? '').replace(/\u00A0/g, ' ');
+    const hasPrefix = normalizedPrefix && normalizedRaw.startsWith(normalizedPrefix);
+    const hasSuffix = normalizedSuffix && normalizedRaw.endsWith(normalizedSuffix);
+    const finalPrefix = hasPrefix ? '' : prefixValue;
+    const finalSuffix = hasSuffix ? '' : suffixValue;
+    return `${sign ?? ''}${finalPrefix}${raw}${finalSuffix}`;
+  };
+
+  const makeSanitizedFromDigits = (digitsValue, sign) => {
+    const scale = getScale();
+    const sep = resolveValue(decimalSeparator) ?? '.';
+    const digits = String(digitsValue ?? '').replace(/\D/g, '');
+    const baseDigits = digits || '0';
+    const padded = scale > 0 ? baseDigits.padStart(scale + 1, '0') : baseDigits;
+    const rawInt = scale > 0 ? padded.slice(0, -scale) : padded;
+    const intPart = rawInt.replace(/^0+(?=\d)/, '') || '0';
+    const decPart = scale > 0 ? padded.slice(-scale) : '';
+    const sanitized = scale > 0 ? `${intPart}${sep}${decPart}` : intPart;
+    return `${sign ?? ''}${sanitized}`;
+  };
+
+  const stripAffixes = (raw) => {
+    const prefixValue = resolveValue(prefix) ?? '';
+    const suffixValue = resolveSuffix();
+    let out = String(raw ?? '');
+    const normalizedPrefix = String(prefixValue ?? '').replace(/\u00A0/g, ' ');
+    const normalizedSuffix = String(suffixValue ?? '').replace(/\u00A0/g, ' ');
+    if (normalizedPrefix) {
+      const normalizedOut = out.replace(/\u00A0/g, ' ');
+      if (normalizedOut.startsWith(normalizedPrefix)) out = out.slice(prefixValue.length);
+    }
+    if (normalizedSuffix) {
+      const normalizedOut = out.replace(/\u00A0/g, ' ');
+      if (normalizedOut.endsWith(normalizedSuffix)) out = out.slice(0, -suffixValue.length);
+    }
+    return out;
+  };
+
+  const sanitizeFromInput = (rawInput) => {
+    const allowNeg = !!resolveValue(allowNegative);
+    const body = stripAffixes(rawInput);
+    const sign = allowNeg && body.includes('-') ? '-' : '';
+    const digits = body.replace(/\D/g, '');
+    let sanitized = makeSanitizedFromDigits(digits, sign);
+    if (resolveValue(clampBehavior) === 'strict') {
+      const parsed = parseNumber(sanitized);
+      if (parsed != null) {
+        const clamped = clampValue(parsed);
+        const clampedSign = clamped < 0 ? '-' : '';
+        sanitized = `${clampedSign}${formatNumber(Math.abs(clamped))}`;
+      }
+    }
+    return sanitized;
+  };
+
+  const normalizeIncoming = (next) => {
+    if (next == null || next === '') return makeSanitizedFromDigits('', '');
+    if (typeof next === 'number' && Number.isFinite(next)) {
+      const clamped = resolveValue(clampBehavior) === 'strict' ? clampValue(next) : next;
+      const sign = clamped < 0 ? '-' : '';
+      return `${sign}${formatNumber(Math.abs(clamped))}`;
+    }
+    const inputText = stripAffixes(next);
+    const sep = resolveValue(decimalSeparator) ?? '.';
+    const allowNeg = !!resolveValue(allowNegative);
+    const sign = allowNeg && String(inputText).includes('-') ? '-' : '';
+    const filtered = String(inputText ?? '').replace(new RegExp(`[^0-9${escapeRegExp(sep)}]`, 'g'), '');
+    const parsed = parseNumber(`${sign}${filtered}`);
+    if (parsed != null) {
+      const clamped = resolveValue(clampBehavior) === 'strict' ? clampValue(parsed) : parsed;
+      const clampedSign = clamped < 0 ? '-' : '';
+      return `${clampedSign}${formatNumber(Math.abs(clamped))}`;
+    }
+    return sanitizeFromInput(next);
+  };
+
+  let lastExternalValue = undefined;
+  const updateFromExternal = (next) => {
+    const resolved = resolveValue(next);
+    if (resolved === undefined) return;
+
+    const normalized = normalizeIncoming(resolved);
+    if (normalized === currentState.get()) return;
+    lastExternalValue = normalized;
+    currentState.set(normalized);
+  };
+
+  updateFromExternal(value);
+  after(value).change((next) => {
+    updateFromExternal(next)
+  });
+
+  after(currentState).change((next) => {
+    if (next === lastExternalValue) {
+      lastExternalValue = undefined;
+      return;
+    }
+    lastExternalValue = undefined;
+    const parsed = parseNumber(next);
+    if (parsed == null) {
+      onChange?.(next ?? '');
+      return;
+    }
+    onChange?.(parsed);
+  });
+
+  const hasRightSection = after(rightSection).compute((next) => next != null && next !== false);
+  const showControls = after(hideControls, hasRightSection).compute(([nextHidden, nextRight]) =>
+    !resolveValue(nextHidden) && !nextRight
+  );
+  const inputMode = after(allowDecimal).compute((next) => (resolveValue(next) ? 'decimal' : 'numeric'));
+
+  const inputFormat = after(
+    format,
+    prefix,
+    suffix,
+    allowDecimal,
+    allowNegative,
+    decimalSeparator,
+    thousandSeparator,
+    decimalScale,
+    clampBehavior,
+    min,
+    max,
+    locale,
+    currency,
+    formatOptions
+  ).compute(() => ({
+    mode: 'both',
+    format: (raw) => {
+      const sanitized = sanitizeFromInput(raw);
+      const fmt = resolveValue(format);
+      const allowNeg = !!resolveValue(allowNegative);
+      const sign = allowNeg && sanitized.startsWith('-') ? '-' : '';
+      const parsed = parseNumber(sanitized);
+      let visual = sanitized.replace(sign, '');
+      if (parsed != null) {
+        const abs = Math.abs(parsed);
+        if (typeof fmt === 'function') {
+          try {
+            visual = fmt(abs);
+          } catch {
+            visual = formatNumber(abs);
+          }
+        } else if (fmt === 'currency') {
+          visual = formatWithIntl(abs, 'currency');
+        } else if (fmt === 'decimal') {
+          const resolvedLocale = resolveValue(locale);
+          const resolvedOptions = resolveValue(formatOptions);
+          visual = resolvedLocale || resolvedOptions ? formatWithIntl(abs, 'decimal') : formatNumber(abs);
+        } else if (fmt === 'percent') {
+          visual = formatNumber(abs);
+        } else {
+          visual = formatNumber(abs);
+        }
+      }
+      return { value: sanitized, raw: sanitized, visual: buildVisual(visual, sign, fmt) };
+    },
+  }));
+
+  const stepBy = (direction) => {
+    const current = parseNumber(currentState.get());
+    const delta = Number(resolveValue(step) ?? 1);
+    const base = current == null ? 0 : current;
+    const next = clampValue(base + delta * direction);
+    currentState.set(formatNumber(next));
+  };
+
+  const setCaretToEnd = (target) => {
+    if (!target || typeof target.setSelectionRange !== 'function') return;
+    const setToEnd = () => {
+      try {
+        const end = String(target.value ?? '').length;
+        target.setSelectionRange(end, end);
+      } catch { }
+    };
+    if (typeof requestAnimationFrame === 'function') {
+      requestAnimationFrame(setToEnd);
+    } else {
+      setToEnd();
+    }
+  };
+
+  const handleInput = (ev) => {
+    onInput?.(ev);
+    const target = ev?.target;
+    if (!target) return;
+    setCaretToEnd(target);
+  };
+
+  const handleBlur = (ev) => {
+    onBlur?.(ev);
+    if (resolveValue(clampBehavior) !== 'blur') return;
+    const parsed = parseNumber(currentState.get());
+    if (parsed == null) return;
+    const clamped = clampValue(parsed);
+    currentState.set(formatNumber(clamped));
+  };
+
+  const handleFocus = (ev) => {
+    onFocus?.(ev);
+    setCaretToEnd(ev?.target);
+  };
+
+  const handleKeyDown = (ev) => {
+    onKeyDown?.(ev);
+    const target = ev?.target;
+    if (!target) return;
+    const prefixValue = resolveValue(prefix) ?? '';
+    const suffixValue = resolveSuffix();
+    if (suffixValue && typeof target.selectionEnd === 'number') {
+      target.selectionEnd = Math.min(target.selectionEnd, String(target.value ?? '').length - suffixValue.length);
+    }
+    if (prefixValue && typeof target.selectionStart === 'number') {
+      target.selectionStart = Math.max(target.selectionStart, prefixValue.length);
+    }
+  };
+
+  const controls = Div(
+    { className: 'g-ui-number-field-controls' },
+    Span({ className: 'g-ui-number-field-control', onClick: () => stepBy(1) }, '+'),
+    Span({ className: 'g-ui-number-field-control', onClick: () => stepBy(-1) }, '−')
+  );
+  const controlsWrapper = Div({ className: 'g-ui-number-field-controls-wrapper' }, controls);
+  const finalRightSection = after(showControls, rightSection).compute(([nextControls, nextRight]) => {
+    if (nextControls) return controlsWrapper;
+    return nextRight;
+  });
+
+  return TextInput({
+    ...rest,
+    size,
+    className: cx('g-ui-number-field', className),
+    leftSection,
+    rightSection: finalRightSection,
+    type: 'text',
+    inputMode,
+    inputClassName: cx('g-ui-input-number'),
+    value: currentState,
+    format: inputFormat,
+    onInput: handleInput,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onKeyDown: handleKeyDown,
+  });
+}

package/src/components/NumberInput.js

@@ -0,0 +1,5 @@
+import { NumberField } from './NumberField.js';
+
+export function NumberInput(...args) {
+  return NumberField(...args);
+}

package/src/components/Pagination.js

@@ -0,0 +1,56 @@
+import { Button, Div, state, after } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar, resolveValue } from '../utils.js';
+
+export function Pagination(...args) {
+  const { props, rawProps } = splitPropsChildren(args, { total: 1, size: 'md' });
+  const { page, total, size, className, ...rest } = props;
+  const { onChange } = rawProps;
+  const currentState = state(resolveValue(page ?? 1));
+  after(page).change((next) => {
+    const resolved = resolveValue(next);
+    if (resolved == null) return;
+    currentState.set(resolved);
+  });
+  const setPage = (next) => {
+    const totalValue = Number(resolveValue(total)) || 1;
+    const clamped = Math.max(1, Math.min(totalValue, next));
+    currentState.set(clamped);
+    onChange?.(clamped);
+  };
+  const items = [];
+  const totalValue = Number(resolveValue(total)) || 1;
+  for (let i = 1; i <= totalValue; i += 1) items.push(i);
+  return Div(
+    {
+      ...rest,
+      className: cx('g-ui-pagination', classVar('g-ui-pagination-size-', size, 'md'), props.className ?? className),
+    },
+    Button(
+      {
+        className: 'g-ui-pagination-item',
+        onClick: () => setPage((currentState.get?.() ?? currentState) - 1),
+        disabled: after(currentState).compute((v) => v <= 1),
+      },
+      '<'
+    ),
+    items.map((i) =>
+      Button(
+        {
+          className: after(currentState).compute((v) =>
+            cx('g-ui-pagination-item', i === v && 'g-ui-pagination-item-active')
+          ),
+          onClick: () => setPage(i),
+        },
+        String(i)
+      )
+    ),
+    Button(
+      {
+        className: 'g-ui-pagination-item',
+        onClick: () => setPage((currentState.get?.() ?? currentState) + 1),
+        disabled: after(currentState).compute((v) => v >= total),
+      },
+      '>'
+    )
+  );
+}

package/src/components/Paper.js

@@ -0,0 +1,20 @@
+import { Div } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function Paper(...args) {
+  const { props, children } = splitPropsChildren(args, { padding: 'md', radius: 'md', shadow: 'none' });
+  const { padding, radius, shadow, className, ...rest } = props;
+  return Div(
+    {
+      ...rest,
+      className: cx(
+        'g-ui-paper',
+        [padding, (value) => `g-ui-card-padding-${value}`],
+        [radius, (value) => `g-ui-card-radius-${value}`],
+        [shadow, (value) => `g-ui-card-shadow-${value}`],
+        className
+      ),
+    },
+    children
+  );
+}

package/src/components/PasswordInput.js

@@ -0,0 +1,29 @@
+import { Button, after, when, state } from '@granularjs/core';
+import { splitPropsChildren } from '../utils.js';
+import { TextInput } from './TextInput.js';
+
+export function PasswordInput(...args) {
+  const { props, rawProps } = splitPropsChildren(args, { size: 'md' });
+  const { size, className, rightSection, ...rest } = props;
+  const { onChange } = rawProps;
+  const visible = state(false);
+  const inputType = after(visible).compute((next) => {
+    if (next) return 'text';
+    return 'password';
+  });
+  const computedRightSection = after(rightSection).compute((next) =>
+    next ?? Button(
+      { className: 'g-ui-password-toggle', onClick: () => visible.set(!visible.get()) },
+      when(visible, () => 'Hide', () => 'Show')
+    )
+  );
+
+  return TextInput({
+    ...rest,
+    size,
+    className,
+    onChange,
+    rightSection: computedRightSection,
+    type: inputType,
+  });
+}