sdaia-ui 1.0.1 → 1.0.2

package/src/components/FiltrationList/FiltrationList.tsx

@@ -1,611 +0,0 @@
-'use client';
-
-import { forwardRef, useId } from 'react';
-import { cn } from '../../lib/cn';
-import type {
-  FiltrationListProps,
-  FiltrationSectionConfig,
-  FiltrationRowItem,
-} from './FiltrationList.types';
-import { FiltrationItem } from '../FiltrationItem';
-import {
-  PANEL_ROOT,
-  SECTION_WRAPPER,
-  SECTION_LABEL,
-  SEARCH_INPUT_WRAP,
-  SEARCH_INPUT,
-  SEARCH_ICON_COLOR,
-  ITEM_LIST,
-  SHOW_MORE_BTN,
-  CHIP_WRAP,
-  CHIP_PILL,
-  CHIP_LABEL,
-  CHIP_ICON,
-  RANGE_ROW,
-  RANGE_LABEL,
-  RANGE_TRACK_WRAP,
-  RANGE_TRACK_BG,
-  RANGE_TRACK_FILL,
-  RANGE_INPUT,
-  AMOUNT_ROW,
-  AMOUNT_COL,
-  AMOUNT_FIELD_LABEL,
-  AMOUNT_INPUT_WRAP,
-  AMOUNT_FIELD,
-  AMOUNT_DIVIDER,
-  AMOUNT_CURRENCY_BTN,
-  DATE_INPUT_WRAP,
-  DATE_INPUT,
-  DATE_ICON_COLOR,
-  CUSTOM_SLOT,
-  ACTIONS_ROW,
-  APPLY_BTN,
-  CLEAR_BTN,
-} from './FiltrationList.variants';
-
-/* ─────────────────────────────────────────────────────────────── */
-/* Inline SVG icons                                                */
-/* All use width="100%" height="100%" — size controlled by wrapper */
-/* ─────────────────────────────────────────────────────────────── */
-
-/** Microphone icon — Figma mic-01 (20×20 viewport). */
-function MicIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="100%"
-      height="100%"
-      viewBox="0 0 20 20"
-      fill="none"
-      aria-hidden="true"
-      className={className}
-    >
-      <path
-        d="M10 1.667A2.5 2.5 0 0 0 7.5 4.167v5a2.5 2.5 0 0 0 5 0v-5A2.5 2.5 0 0 0 10 1.667Z"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M15.833 9.167a5.833 5.833 0 0 1-11.666 0M10 15v3.333"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-/** Chevron-down icon — Figma arrow-down-01 (16×16 viewport). */
-function ChevronDownIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="100%"
-      height="100%"
-      viewBox="0 0 16 16"
-      fill="none"
-      aria-hidden="true"
-      className={className}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M3.646 5.646a.5.5 0 0 1 .708 0L8 9.293l3.646-3.647a.5.5 0 1 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
-
-/** Info / alert-circle icon — Figma alert-circle (16×16 viewport). */
-function InfoCircleIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="100%"
-      height="100%"
-      viewBox="0 0 16 16"
-      fill="none"
-      aria-hidden="true"
-      className={className}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM.5 8a7.5 7.5 0 1 1 15 0A7.5 7.5 0 0 1 .5 8Zm7-2.5a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0v-4A.75.75 0 0 1 7.5 5.5Zm1 -1.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
-
-/* ─────────────────────────────────────────────────────────────── */
-/* Section sub-renderers                                           */
-/* ─────────────────────────────────────────────────────────────── */
-
-/** Shared label + children wrapper for every section. */
-function SectionWrapper({
-  label,
-  children,
-}: {
-  label: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div data-slot="filtration-section" className={SECTION_WRAPPER}>
-      <p data-slot="filtration-section-label" className={SECTION_LABEL} dir="auto">
-        {label}
-      </p>
-      {children}
-    </div>
-  );
-}
-
-/** Renders a shared list of FiltrationItem rows. */
-function ItemList({
-  items,
-  type,
-  name,
-  onItemChange,
-}: {
-  items: FiltrationRowItem[];
-  type: 'checkbox' | 'select' | 'radio';
-  name?: string;
-  onItemChange?: (id: string, selected: boolean) => void;
-}) {
-  return (
-    <div data-slot="filtration-item-list" className={ITEM_LIST}>
-      {items.map((item) => (
-        <FiltrationItem
-          key={item.id}
-          type={type}
-          label={item.label}
-          selected={item.selected}
-          disabled={item.disabled}
-          name={name}
-          onSelectedChange={(v) => onItemChange?.(item.id, v)}
-        />
-      ))}
-    </div>
-  );
-}
-
-/* ─────────────────────────────────────────────────────────────── */
-/* Range slider sub-component                                      */
-/* ─────────────────────────────────────────────────────────────── */
-
-function RangeSlider({
-  min,
-  max,
-  value,
-  step = 1,
-  onChange,
-  formatValue,
-}: {
-  min: number;
-  max: number;
-  value: [number, number];
-  step?: number;
-  onChange?: (v: [number, number]) => void;
-  formatValue?: (v: number) => string;
-}) {
-  const [low, high] = value;
-  const range = max - min;
-
-  // Percentages for the fill track
-  const lowPct = range === 0 ? 0 : ((low - min) / range) * 100;
-  const highPct = range === 0 ? 100 : ((high - min) / range) * 100;
-
-  const fmt = formatValue ?? String;
-
-  const handleLow = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const v = Math.min(Number(e.target.value), high - step);
-    onChange?.([v, high]);
-  };
-
-  const handleHigh = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const v = Math.max(Number(e.target.value), low + step);
-    onChange?.([low, v]);
-  };
-
-  return (
-    <div data-slot="range-slider" className={RANGE_ROW}>
-      {/* Min value label */}
-      <span className={RANGE_LABEL}>{fmt(low)}</span>
-
-      {/* Track + thumb inputs */}
-      <div className={RANGE_TRACK_WRAP}>
-        {/* Background track */}
-        <div className={RANGE_TRACK_BG} />
-
-        {/* Active fill between thumbs */}
-        <div
-          className={RANGE_TRACK_FILL}
-          style={{ left: `${lowPct}%`, right: `${100 - highPct}%` }}
-        />
-
-        {/* Low thumb */}
-        <input
-          type="range"
-          min={min}
-          max={max}
-          step={step}
-          value={low}
-          onChange={handleLow}
-          className={RANGE_INPUT}
-          aria-label="Minimum value"
-          aria-valuemin={min}
-          aria-valuemax={max}
-          aria-valuenow={low}
-        />
-
-        {/* High thumb */}
-        <input
-          type="range"
-          min={min}
-          max={max}
-          step={step}
-          value={high}
-          onChange={handleHigh}
-          className={RANGE_INPUT}
-          aria-label="Maximum value"
-          aria-valuemin={min}
-          aria-valuemax={max}
-          aria-valuenow={high}
-        />
-      </div>
-
-      {/* Max value label */}
-      <span className={cn(RANGE_LABEL, 'text-end')}>{fmt(high)}</span>
-    </div>
-  );
-}
-
-/* ─────────────────────────────────────────────────────────────── */
-/* Amount (min / max currency) sub-component                       */
-/* ─────────────────────────────────────────────────────────────── */
-
-function AmountField({
-  fieldLabel,
-  value,
-  onChange,
-  currency,
-  inputId,
-}: {
-  fieldLabel: string;
-  value?: string;
-  onChange?: (v: string) => void;
-  currency: string;
-  inputId: string;
-}) {
-  return (
-    <div className={AMOUNT_COL}>
-      <label htmlFor={inputId} className={AMOUNT_FIELD_LABEL}>
-        {fieldLabel}
-      </label>
-      <div className={AMOUNT_INPUT_WRAP}>
-        {/* Number input */}
-        <input
-          id={inputId}
-          type="text"
-          inputMode="decimal"
-          value={value ?? ''}
-          onChange={(e) => onChange?.(e.target.value)}
-          placeholder="0.00"
-          className={AMOUNT_FIELD}
-        />
-
-        {/* Divider */}
-        <div className={AMOUNT_DIVIDER} aria-hidden="true" />
-
-        {/* Currency badge */}
-        <div className={AMOUNT_CURRENCY_BTN} aria-label={`Currency: ${currency}`}>
-          <span>{currency}</span>
-          <span className="size-icon-sm shrink-0">
-            <ChevronDownIcon />
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/* ─────────────────────────────────────────────────────────────── */
-/* Section renderer (dispatches to section-specific markup)        */
-/* ─────────────────────────────────────────────────────────────── */
-
-function renderSection(section: FiltrationSectionConfig, baseId: string, index: number) {
-  const key = `${baseId}-section-${index}`;
-
-  switch (section.type) {
-    /* ── Search ─────────────────────────────────────────────── */
-    case 'search':
-      return (
-        <SectionWrapper key={key} label={section.label}>
-          <div className={SEARCH_INPUT_WRAP}>
-            <input
-              type="search"
-              placeholder={section.placeholder ?? 'Search'}
-              value={section.value ?? ''}
-              onChange={(e) => section.onChange?.(e.target.value)}
-              className={SEARCH_INPUT}
-              aria-label={section.label}
-            />
-            <span className={SEARCH_ICON_COLOR}>
-              <MicIcon />
-            </span>
-          </div>
-        </SectionWrapper>
-      );
-
-    /* ── Checkbox ───────────────────────────────────────────── */
-    case 'checkbox':
-      return (
-        <SectionWrapper key={key} label={section.label}>
-          <ItemList
-            items={section.items}
-            type="checkbox"
-            onItemChange={section.onItemChange}
-          />
-          {section.showMoreLabel && (
-            <button
-              type="button"
-              className={SHOW_MORE_BTN}
-              onClick={section.onShowMore}
-            >
-              <span>{section.showMoreLabel}</span>
-              <span className="size-icon-sm shrink-0">
-                <ChevronDownIcon />
-              </span>
-            </button>
-          )}
-        </SectionWrapper>
-      );
-
-    /* ── Select ─────────────────────────────────────────────── */
-    case 'select':
-      return (
-        <SectionWrapper key={key} label={section.label}>
-          <ItemList
-            items={section.items}
-            type="select"
-            onItemChange={section.onItemChange}
-          />
-        </SectionWrapper>
-      );
-
-    /* ── Radio ──────────────────────────────────────────────── */
-    case 'radio':
-      return (
-        <SectionWrapper key={key} label={section.label}>
-          {/*
-           * Render items manually (not via ItemList) so we can attach a
-           * click handler on the already-selected row.
-           *
-           * HTML `<input type="radio">` never fires onChange when the radio
-           * is already checked. We intercept click events that bubble from
-           * the native input up to the FiltrationItem wrapper div, and if
-           * the item was already selected we call onChange(undefined) to
-           * deselect it.
-           */}
-          <div data-slot="filtration-item-list" className={ITEM_LIST}>
-            {section.items.map((item) => {
-              const isSelected = item.id === section.value;
-              return (
-                <FiltrationItem
-                  key={item.id}
-                  type="radio"
-                  label={item.label}
-                  selected={isSelected}
-                  disabled={item.disabled}
-                  name={section.name ?? `${baseId}-radio-${index}`}
-                  onSelectedChange={(checked) => {
-                    if (checked) section.onChange?.(item.id);
-                  }}
-                  // Clicking the already-selected radio doesn't fire onChange
-                  // on the native input. Intercept the click that bubbles to
-                  // the wrapper and treat it as a deselect signal.
-                  onClick={
-                    isSelected && !item.disabled
-                      ? () => section.onChange?.(undefined)
-                      : undefined
-                  }
-                />
-              );
-            })}
-          </div>
-        </SectionWrapper>
-      );
-
-    /* ── Chip ───────────────────────────────────────────────── */
-    case 'chip':
-      return (
-        <SectionWrapper key={key} label={section.label}>
-          <div className={CHIP_WRAP}>
-            {section.items.map((chip) => (
-              <button
-                key={chip.id}
-                type="button"
-                className={CHIP_PILL}
-                onClick={chip.onRemove}
-                aria-label={chip.label}
-              >
-                <span className={CHIP_ICON}>
-                  <InfoCircleIcon />
-                </span>
-                <span className={CHIP_LABEL}>{chip.label}</span>
-                <span className={CHIP_ICON}>
-                  <InfoCircleIcon />
-                </span>
-              </button>
-            ))}
-          </div>
-        </SectionWrapper>
-      );
-
-    /* ── Range slider ───────────────────────────────────────── */
-    case 'range':
-      return (
-        <SectionWrapper key={key} label={section.label}>
-          <RangeSlider
-            min={section.min}
-            max={section.max}
-            value={section.value}
-            step={section.step}
-            onChange={section.onChange}
-            formatValue={section.formatValue}
-          />
-        </SectionWrapper>
-      );
-
-    /* ── Amount (min / max currency) ────────────────────────── */
-    case 'amount': {
-      const minId = `${baseId}-amount-min-${index}`;
-      const maxId = `${baseId}-amount-max-${index}`;
-      return (
-        <SectionWrapper key={key} label={section.label}>
-          <div className={AMOUNT_ROW}>
-            <AmountField
-              fieldLabel={section.minLabel ?? 'Min'}
-              value={section.minValue}
-              onChange={section.onMinChange}
-              currency={section.currency ?? 'SAR'}
-              inputId={minId}
-            />
-            <AmountField
-              fieldLabel={section.maxLabel ?? 'Max'}
-              value={section.maxValue}
-              onChange={section.onMaxChange}
-              currency={section.currency ?? 'SAR'}
-              inputId={maxId}
-            />
-          </div>
-        </SectionWrapper>
-      );
-    }
-
-    /* ── Date ───────────────────────────────────────────────── */
-    case 'date':
-      return (
-        <SectionWrapper key={key} label={section.label}>
-          <div className={DATE_INPUT_WRAP}>
-            <input
-              type="text"
-              placeholder={section.placeholder ?? 'DD/MM/YY'}
-              value={section.value ?? ''}
-              onChange={(e) => section.onChange?.(e.target.value)}
-              className={DATE_INPUT}
-              aria-label={section.label}
-            />
-            <span className={DATE_ICON_COLOR}>
-              <ChevronDownIcon />
-            </span>
-          </div>
-        </SectionWrapper>
-      );
-
-    /* ── Custom slot ────────────────────────────────────────── */
-    case 'custom':
-      return (
-        <SectionWrapper key={key} label={section.label}>
-          <div className={CUSTOM_SLOT}>{section.children}</div>
-        </SectionWrapper>
-      );
-
-    default:
-      return null;
-  }
-}
-
-/* ─────────────────────────────────────────────────────────────── */
-/* FiltrationList — root component                                 */
-/* ─────────────────────────────────────────────────────────────── */
-
-/**
- * FiltrationList — a scrollable filter panel that composes any combination
- * of filter section types.
- *
- * Each section is configured via the `sections` prop — an ordered array of
- * discriminated-union objects. Supported types:
- *
- *   `'search'`   — search input with microphone affordance
- *   `'checkbox'` — multi-select checkbox list, optional "Show N more" toggle
- *   `'select'`   — single-select list with trailing checkmarks
- *   `'radio'`    — single-select radio group (mutually exclusive)
- *   `'chip'`     — wrapping row of pill-shaped filter tags
- *   `'range'`    — dual-handle range slider with formatted end labels
- *   `'amount'`   — min / max numeric inputs with a currency dropdown suffix
- *   `'date'`     — date text input with calendar affordance
- *   `'custom'`   — arbitrary ReactNode rendered inside a labelled section
- *
- * The footer shows "Apply Filters (N)" and "Clear" action buttons.
- * Use `showActions={false}` to hide the footer.
- *
- * RTL:
- *   Pass `rtl` to set `dir="rtl"` on the root, OR let a parent element
- *   carry `dir="rtl"` — all flex layouts mirror automatically.
- *
- * Figma source: node 5273:79626 (Filtration List)
- */
-export const FiltrationList = forwardRef<HTMLDivElement, FiltrationListProps>(
-  function FiltrationList(
-    {
-      sections = [],
-      showActions = true,
-      applyLabel = 'Apply Filters',
-      activeFilterCount,
-      clearLabel = 'Clear',
-      onApply,
-      onClear,
-      rtl = false,
-      className,
-      ...rest
-    },
-    ref,
-  ) {
-    const baseId = useId();
-
-    const applyText =
-      activeFilterCount != null && activeFilterCount > 0
-        ? `${applyLabel} (${activeFilterCount})`
-        : applyLabel;
-
-    return (
-      <div
-        ref={ref}
-        data-slot="filtration-list"
-        dir={rtl ? 'rtl' : undefined}
-        className={cn(PANEL_ROOT, className)}
-        {...rest}
-      >
-        {/* ── Sections ─────────────────────────────────────── */}
-        {sections.map((section, i) => renderSection(section, baseId, i))}
-
-        {/* ── Actions footer ────────────────────────────────── */}
-        {showActions && (
-          <div data-slot="filtration-actions" className={ACTIONS_ROW}>
-            <button
-              type="button"
-              data-slot="filtration-apply-btn"
-              className={APPLY_BTN}
-              onClick={onApply}
-            >
-              {applyText}
-            </button>
-            <button
-              type="button"
-              data-slot="filtration-clear-btn"
-              className={CLEAR_BTN}
-              onClick={onClear}
-            >
-              {clearLabel}
-            </button>
-          </div>
-        )}
-      </div>
-    );
-  },
-);