@proyecto-viviana/solidaria 0.2.2 → 0.2.3

package/src/gridlist/createGridListItem.ts

@@ -0,0 +1,180 @@
+/**
+ * createGridListItem - Provides accessibility for a grid list item.
+ * Based on @react-aria/gridlist/useGridListItem.
+ */
+
+import { createMemo, createSignal, type Accessor } from 'solid-js';
+import type { JSX } from 'solid-js';
+import type { GridState, GridCollection } from '@proyecto-viviana/solid-stately';
+import type { AriaGridListItemProps, GridListItemAria } from './types';
+import { getGridListData } from './createGridList';
+
+/**
+ * Creates accessibility props for a grid list item.
+ */
+export function createGridListItem<T extends object, C extends GridCollection<T> = GridCollection<T>>(
+  props: Accessor<AriaGridListItemProps>,
+  state: Accessor<GridState<T, C>>,
+  _ref: Accessor<HTMLLIElement | null>
+): GridListItemAria {
+  const [isPressed, setIsPressed] = createSignal(false);
+
+  const isSelected = createMemo(() => {
+    const s = state();
+    const p = props();
+    return s.isSelected(p.node.key);
+  });
+
+  const isDisabled = createMemo(() => {
+    const s = state();
+    const p = props();
+    return s.isDisabled(p.node.key);
+  });
+
+  const isFocused = createMemo(() => {
+    const s = state();
+    const p = props();
+    return s.focusedKey === p.node.key;
+  });
+
+  // Handle click/press for selection and actions
+  const onClick = (e: MouseEvent) => {
+    const s = state();
+    const p = props();
+
+    if (isDisabled()) return;
+
+    // Get grid list metadata for actions
+    const gridListData = getGridListData(s);
+    const onAction = gridListData?.actions.onAction;
+
+    // Handle selection
+    if (s.selectionMode !== 'none') {
+      if (e.shiftKey && s.selectionMode === 'multiple') {
+        s.extendSelection(p.node.key);
+      } else if (e.ctrlKey || e.metaKey) {
+        s.toggleSelection(p.node.key);
+      } else {
+        // Replace selection or toggle if already selected
+        if (isSelected() && s.selectedKeys !== 'all') {
+          const selectedKeys = s.selectedKeys as Set<unknown>;
+          if (selectedKeys.size === 1) {
+            // Single selection, trigger action
+            if (onAction) {
+              onAction(p.node.key);
+            }
+            if (p.onAction) {
+              p.onAction();
+            }
+          } else {
+            s.replaceSelection(p.node.key);
+          }
+        } else {
+          s.replaceSelection(p.node.key);
+        }
+      }
+    } else {
+      // No selection mode, just trigger action
+      if (onAction) {
+        onAction(p.node.key);
+      }
+      if (p.onAction) {
+        p.onAction();
+      }
+    }
+  };
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    const s = state();
+    const p = props();
+
+    if (isDisabled()) return;
+
+    if (e.key === 'Enter') {
+      // Get grid list metadata for actions
+      const gridListData = getGridListData(s);
+      const onAction = gridListData?.actions.onAction;
+
+      if (onAction || p.onAction) {
+        e.preventDefault();
+
+        if (onAction) {
+          onAction(p.node.key);
+        }
+
+        if (p.onAction) {
+          p.onAction();
+        }
+      }
+    } else if (e.key === ' ') {
+      // Space toggles selection
+      if (s.selectionMode !== 'none') {
+        e.preventDefault();
+        s.toggleSelection(p.node.key);
+      }
+    }
+  };
+
+  const onFocus = () => {
+    const s = state();
+    const p = props();
+    s.setFocusedKey(p.node.key);
+  };
+
+  const onPointerDown = () => {
+    setIsPressed(true);
+  };
+
+  const onPointerUp = () => {
+    setIsPressed(false);
+  };
+
+  const rowProps = createMemo(() => {
+    const s = state();
+    const p = props();
+    const node = p.node;
+
+    const baseProps: Record<string, unknown> = {
+      role: 'row',
+      'aria-selected': s.selectionMode !== 'none' ? isSelected() : undefined,
+      'aria-disabled': isDisabled() || undefined,
+      tabIndex: isFocused() ? 0 : -1,
+      onClick,
+      onKeyDown,
+      onFocus,
+      onPointerDown,
+      onPointerUp,
+    };
+
+    // Add aria-rowindex for virtualized lists
+    if (p.isVirtualized && node.rowIndex != null) {
+      baseProps['aria-rowindex'] = node.rowIndex + 1; // 1-based
+    }
+
+    return baseProps as JSX.HTMLAttributes<HTMLLIElement>;
+  });
+
+  const gridCellProps = createMemo(() => {
+    return {
+      role: 'gridcell',
+    } as JSX.HTMLAttributes<HTMLDivElement>;
+  });
+
+  return {
+    get rowProps() {
+      return rowProps();
+    },
+    get gridCellProps() {
+      return gridCellProps();
+    },
+    get isSelected() {
+      return isSelected();
+    },
+    get isDisabled() {
+      return isDisabled();
+    },
+    get isPressed() {
+      return isPressed();
+    },
+  };
+}

package/src/gridlist/createGridListSelectionCheckbox.ts

@@ -0,0 +1,59 @@
+/**
+ * createGridListSelectionCheckbox - Provides accessibility for a grid list item selection checkbox.
+ * Based on @react-aria/gridlist.
+ */
+
+import { createMemo, type Accessor } from 'solid-js';
+import type { JSX } from 'solid-js';
+import { createId } from '@proyecto-viviana/solid-stately';
+import type { GridState, GridCollection } from '@proyecto-viviana/solid-stately';
+import type { AriaGridListSelectionCheckboxProps, GridListSelectionCheckboxAria } from './types';
+
+/**
+ * Creates accessibility props for a grid list item selection checkbox.
+ */
+export function createGridListSelectionCheckbox<T extends object, C extends GridCollection<T> = GridCollection<T>>(
+  props: Accessor<AriaGridListSelectionCheckboxProps>,
+  state: Accessor<GridState<T, C>>
+): GridListSelectionCheckboxAria {
+  const checkboxId = createId();
+
+  const isSelected = createMemo(() => {
+    const s = state();
+    const p = props();
+    return s.isSelected(p.key);
+  });
+
+  const isDisabled = createMemo(() => {
+    const s = state();
+    const p = props();
+    return s.isDisabled(p.key);
+  });
+
+  const onChange = () => {
+    const s = state();
+    const p = props();
+    if (!isDisabled()) {
+      s.toggleSelection(p.key);
+    }
+  };
+
+  const checkboxProps = createMemo(() => {
+    const baseProps: Record<string, unknown> = {
+      id: checkboxId,
+      type: 'checkbox',
+      checked: isSelected(),
+      disabled: isDisabled(),
+      onChange,
+      'aria-label': 'Select',
+    };
+
+    return baseProps as JSX.InputHTMLAttributes<HTMLInputElement>;
+  });
+
+  return {
+    get checkboxProps() {
+      return checkboxProps();
+    },
+  };
+}

package/src/gridlist/index.ts

@@ -0,0 +1,16 @@
+/**
+ * GridList ARIA hooks for solidaria.
+ */
+
+export { createGridList, getGridListData } from './createGridList';
+export { createGridListItem } from './createGridListItem';
+export { createGridListSelectionCheckbox } from './createGridListSelectionCheckbox';
+
+export type {
+  AriaGridListProps,
+  GridListAria,
+  AriaGridListItemProps,
+  GridListItemAria,
+  AriaGridListSelectionCheckboxProps,
+  GridListSelectionCheckboxAria,
+} from './types';

package/src/gridlist/types.ts

@@ -0,0 +1,81 @@
+/**
+ * GridList ARIA types for GridList components.
+ * Based on @react-aria/gridlist types.
+ */
+
+import type { JSX } from 'solid-js';
+import type { Key, GridNode } from '@proyecto-viviana/solid-stately';
+
+/**
+ * Props for the createGridList hook.
+ */
+export interface AriaGridListProps {
+  /** ID for the grid list element. */
+  id?: string;
+  /** ARIA label for the grid list. */
+  'aria-label'?: string;
+  /** ARIA labelledby for the grid list. */
+  'aria-labelledby'?: string;
+  /** ARIA describedby for the grid list. */
+  'aria-describedby'?: string;
+  /** Whether the grid list uses virtual scrolling. */
+  isVirtualized?: boolean;
+  /** Handler for item actions. */
+  onAction?: (key: Key) => void;
+  /** Whether selection should occur on press up. */
+  shouldSelectOnPressUp?: boolean;
+  /** Whether the grid list is disabled. */
+  isDisabled?: boolean;
+}
+
+/**
+ * Return value from createGridList.
+ */
+export interface GridListAria {
+  /** Props to spread on the grid list element. */
+  gridProps: JSX.HTMLAttributes<HTMLUListElement>;
+}
+
+/**
+ * Props for the createGridListItem hook.
+ */
+export interface AriaGridListItemProps {
+  /** The item node. */
+  node: GridNode<unknown>;
+  /** Whether the grid list is virtualized. */
+  isVirtualized?: boolean;
+  /** Handler for item action. */
+  onAction?: () => void;
+}
+
+/**
+ * Return value from createGridListItem.
+ */
+export interface GridListItemAria {
+  /** Props to spread on the item element. */
+  rowProps: JSX.HTMLAttributes<HTMLLIElement>;
+  /** Props to spread on the grid cell wrapper. */
+  gridCellProps: JSX.HTMLAttributes<HTMLDivElement>;
+  /** Whether the item is selected. */
+  isSelected: boolean;
+  /** Whether the item is disabled. */
+  isDisabled: boolean;
+  /** Whether the item is pressed. */
+  isPressed: boolean;
+}
+
+/**
+ * Props for the createGridListSelectionCheckbox hook.
+ */
+export interface AriaGridListSelectionCheckboxProps {
+  /** The key of the item. */
+  key: Key;
+}
+
+/**
+ * Return value from createGridListSelectionCheckbox.
+ */
+export interface GridListSelectionCheckboxAria {
+  /** Props to spread on the checkbox input element. */
+  checkboxProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+}

package/src/i18n/NumberFormatter.ts

@@ -0,0 +1,266 @@
+/**
+ * NumberFormatter for solidaria
+ *
+ * A wrapper around Intl.NumberFormat with caching and polyfills.
+ *
+ * Port of @internationalized/number NumberFormatter.
+ */
+
+// ============================================
+// FEATURE DETECTION
+// ============================================
+
+let supportsSignDisplay = false;
+try {
+  supportsSignDisplay =
+    new Intl.NumberFormat('de-DE', { signDisplay: 'exceptZero' }).resolvedOptions()
+      .signDisplay === 'exceptZero';
+} catch {
+  // Not supported
+}
+
+let supportsUnit = false;
+try {
+  supportsUnit =
+    new Intl.NumberFormat('de-DE', { style: 'unit', unit: 'degree' }).resolvedOptions()
+      .style === 'unit';
+} catch {
+  // Not supported
+}
+
+// ============================================
+// POLYFILLS
+// ============================================
+
+// Polyfill for units since Safari doesn't support them yet.
+// Currently only polyfilling the unit degree in narrow format.
+const UNITS: Record<string, Record<string, Record<string, string>>> = {
+  degree: {
+    narrow: {
+      default: '°',
+      'ja-JP': ' 度',
+      'zh-TW': '度',
+      'sl-SI': ' °',
+    },
+  },
+};
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface NumberFormatOptions extends Intl.NumberFormatOptions {
+  /** Overrides default numbering system for the current locale. */
+  numberingSystem?: string;
+}
+
+interface NumberRangeFormatPart extends Intl.NumberFormatPart {
+  source: 'startRange' | 'endRange' | 'shared';
+}
+
+// ============================================
+// CACHE
+// ============================================
+
+const formatterCache = new Map<string, Intl.NumberFormat>();
+
+function getCachedNumberFormatter(
+  locale: string,
+  options: NumberFormatOptions = {}
+): Intl.NumberFormat {
+  let processedLocale = locale;
+  const { numberingSystem } = options;
+
+  if (numberingSystem && !processedLocale.includes('-nu-')) {
+    if (!processedLocale.includes('-u-')) {
+      processedLocale += '-u-';
+    }
+    processedLocale += `-nu-${numberingSystem}`;
+  }
+
+  let processedOptions = options;
+  if (options.style === 'unit' && !supportsUnit) {
+    const { unit, unitDisplay = 'short' } = options;
+    if (!unit) {
+      throw new Error('unit option must be provided with style: "unit"');
+    }
+    if (!UNITS[unit]?.[unitDisplay]) {
+      throw new Error(`Unsupported unit ${unit} with unitDisplay = ${unitDisplay}`);
+    }
+    processedOptions = { ...options, style: 'decimal' };
+  }
+
+  const cacheKey =
+    processedLocale +
+    (processedOptions
+      ? Object.entries(processedOptions)
+          .sort((a, b) => (a[0] < b[0] ? -1 : 1))
+          .join()
+      : '');
+
+  if (formatterCache.has(cacheKey)) {
+    return formatterCache.get(cacheKey)!;
+  }
+
+  const numberFormatter = new Intl.NumberFormat(processedLocale, processedOptions);
+  formatterCache.set(cacheKey, numberFormatter);
+  return numberFormatter;
+}
+
+// ============================================
+// SIGN DISPLAY POLYFILL
+// ============================================
+
+function numberFormatSignDisplayPolyfill(
+  numberFormat: Intl.NumberFormat,
+  signDisplay: string,
+  num: number
+): string {
+  if (signDisplay === 'auto') {
+    return numberFormat.format(num);
+  } else if (signDisplay === 'never') {
+    return numberFormat.format(Math.abs(num));
+  } else {
+    let needsPositiveSign = false;
+    let processedNum = num;
+
+    if (signDisplay === 'always') {
+      needsPositiveSign = num > 0 || Object.is(num, 0);
+    } else if (signDisplay === 'exceptZero') {
+      if (Object.is(num, -0) || Object.is(num, 0)) {
+        processedNum = Math.abs(num);
+      } else {
+        needsPositiveSign = num > 0;
+      }
+    }
+
+    if (needsPositiveSign) {
+      const negative = numberFormat.format(-processedNum);
+      const noSign = numberFormat.format(processedNum);
+      // Ignore RTL/LTR marker characters
+      const minus = negative.replace(noSign, '').replace(/\u200e|\u061C/, '');
+      if ([...minus].length !== 1) {
+        console.warn(
+          'solidaria i18n polyfill for NumberFormat signDisplay: Unsupported case'
+        );
+      }
+      const positive = negative
+        .replace(noSign, '!!!')
+        .replace(minus, '+')
+        .replace('!!!', noSign);
+      return positive;
+    } else {
+      return numberFormat.format(processedNum);
+    }
+  }
+}
+
+// ============================================
+// NUMBER FORMATTER CLASS
+// ============================================
+
+/**
+ * A wrapper around Intl.NumberFormat providing additional options, polyfills, and caching.
+ *
+ * @example
+ * ```ts
+ * const formatter = new NumberFormatter('en-US', {
+ *   style: 'currency',
+ *   currency: 'USD',
+ * });
+ * formatter.format(1234.56); // '$1,234.56'
+ * ```
+ */
+export class NumberFormatter implements Intl.NumberFormat {
+  private numberFormatter: Intl.NumberFormat;
+  private options: NumberFormatOptions;
+
+  constructor(locale: string, options: NumberFormatOptions = {}) {
+    this.numberFormatter = getCachedNumberFormatter(locale, options);
+    this.options = options;
+  }
+
+  /** Formats a number value as a string, according to the locale and options. */
+  format(value: number): string {
+    let res = '';
+
+    if (!supportsSignDisplay && this.options.signDisplay != null) {
+      res = numberFormatSignDisplayPolyfill(
+        this.numberFormatter,
+        this.options.signDisplay,
+        value
+      );
+    } else {
+      res = this.numberFormatter.format(value);
+    }
+
+    if (this.options.style === 'unit' && !supportsUnit) {
+      const { unit, unitDisplay = 'short', locale } = this.resolvedOptions();
+      if (!unit) {
+        return res;
+      }
+      const values = UNITS[unit]?.[unitDisplay];
+      res += values[locale] || values.default;
+    }
+
+    return res;
+  }
+
+  /** Formats a number to an array of parts. */
+  formatToParts(value: number): Intl.NumberFormatPart[] {
+    return this.numberFormatter.formatToParts(value);
+  }
+
+  /** Formats a number range as a string. */
+  formatRange(start: number, end: number): string {
+    if (typeof this.numberFormatter.formatRange === 'function') {
+      return this.numberFormatter.formatRange(start, end);
+    }
+
+    if (end < start) {
+      throw new RangeError('End date must be >= start date');
+    }
+
+    // Fallback for old browsers
+    return `${this.format(start)} – ${this.format(end)}`;
+  }
+
+  /** Formats a number range as an array of parts. */
+  formatRangeToParts(start: number, end: number): NumberRangeFormatPart[] {
+    if (typeof this.numberFormatter.formatRangeToParts === 'function') {
+      return this.numberFormatter.formatRangeToParts(start, end);
+    }
+
+    if (end < start) {
+      throw new RangeError('End date must be >= start date');
+    }
+
+    const startParts = this.numberFormatter.formatToParts(start);
+    const endParts = this.numberFormatter.formatToParts(end);
+    return [
+      ...startParts.map((p) => ({ ...p, source: 'startRange' as const })),
+      { type: 'literal' as const, value: ' – ', source: 'shared' as const },
+      ...endParts.map((p) => ({ ...p, source: 'endRange' as const })),
+    ];
+  }
+
+  /** Returns the resolved formatting options. */
+  resolvedOptions(): Intl.ResolvedNumberFormatOptions {
+    let options = this.numberFormatter.resolvedOptions();
+
+    if (!supportsSignDisplay && this.options.signDisplay != null) {
+      options = { ...options, signDisplay: this.options.signDisplay };
+    }
+
+    if (!supportsUnit && this.options.style === 'unit') {
+      options = {
+        ...options,
+        style: 'unit',
+        unit: this.options.unit,
+        unitDisplay: this.options.unitDisplay,
+      };
+    }
+
+    return options;
+  }
+}

package/src/i18n/createCollator.ts

@@ -0,0 +1,79 @@
+/**
+ * createCollator hook for solidaria
+ *
+ * Provides localized string comparison/collation with caching.
+ *
+ * Port of @react-aria/i18n useCollator.
+ */
+
+import { createMemo } from 'solid-js';
+import { useLocale } from './locale';
+import { createCacheKey } from './utils';
+
+// ============================================
+// CACHE
+// ============================================
+
+const collatorCache = new Map<string, Intl.Collator>();
+
+/**
+ * Gets or creates a cached collator.
+ */
+function getCachedCollator(
+  locale: string,
+  options?: Intl.CollatorOptions
+): Intl.Collator {
+  const cacheKey = createCacheKey(locale, options as Record<string, unknown>);
+
+  if (collatorCache.has(cacheKey)) {
+    return collatorCache.get(cacheKey)!;
+  }
+
+  const collator = new Intl.Collator(locale, options);
+  collatorCache.set(cacheKey, collator);
+  return collator;
+}
+
+// ============================================
+// HOOK
+// ============================================
+
+/**
+ * Provides localized string collation for the current locale.
+ * Useful for sorting strings according to locale-specific rules.
+ *
+ * @example
+ * ```tsx
+ * function SortedList(props: { items: string[] }) {
+ *   const collator = createCollator();
+ *
+ *   const sortedItems = () =>
+ *     [...props.items].sort((a, b) => collator().compare(a, b));
+ *
+ *   return (
+ *     <ul>
+ *       <For each={sortedItems()}>
+ *         {(item) => <li>{item}</li>}
+ *       </For>
+ *     </ul>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Case-insensitive sorting
+ * const collator = createCollator({ sensitivity: 'base' });
+ *
+ * // Numeric sorting
+ * const numericCollator = createCollator({ numeric: true });
+ * // ['a1', 'a10', 'a2'].sort(numericCollator().compare) -> ['a1', 'a2', 'a10']
+ * ```
+ */
+export function createCollator(
+  options?: Intl.CollatorOptions
+): () => Intl.Collator {
+  const locale = useLocale();
+
+  return createMemo(() => getCachedCollator(locale().locale, options));
+}