sdaia-ui 1.0.1

package/src/components/FiltrationList/FiltrationList.tsx

@@ -0,0 +1,611 @@
+'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>
+    );
+  },
+);