@cahyo-dimas/freeday 1.7.1 → 1.9.0

package/CHANGELOG.md

@@ -3,6 +3,54 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
 
+## [1.9.0] — 2026-07-28
+Follow-ups to 1.8.0's `FdyTable` (improvement notes #25/#26). Additive — the #25 change **widens** a
+generic bound, so every call site that compiled before still compiles.
+
+### Fixed
+- **`FdyTable` now accepts `interface`-typed rows.** The row generic was constrained to
+  `Record<string, unknown>`, to which a TypeScript `interface` is never assignable (interfaces get no
+  implicit index signature) — so a normally-typed DTO array failed to compile and `FdyTable` was
+  effectively unusable in a strict-TS app. Widened the bound to `object` in both adapters; the row type
+  now **infers** correctly (`cell-*` slots / `renderCell` are properly typed) and no cast is pushed
+  onto consumers. The component never indexes rows directly — all access goes through the
+  already-unconstrained core, which is unchanged.
+
+### Added
+- **`FdyTable` row activation (opt-in).** `rowActivatable` makes rows focusable and emits
+  `row-activate` (Vue) / calls `onRowActivate` (React) on click, or Enter/Space while the row itself is
+  focused — a control inside a cell keeps its own event (the `target !== currentTarget` guard). Adds a
+  `rowClass(row)` hook for per-row state (e.g. a selected row) and a `.fdy-table__row--activatable`
+  class (pointer + `:focus-visible` ring; hover tint is already inherited from the base row rule).
+  Replaces the hand-rolled `<tr tabindex="0" @click @keydown>` + duplicated row CSS consumers were
+  each re-writing.
+
+## [1.8.0] — 2026-07-28
+Release **1.8 — framework-safe data table, modal/drawer wrappers, and a monospace utility**.
+Non-breaking, purely additive. No existing selector, markup, or enhancer changed.
+
+### Added
+- **`FdyTable` (Vue + React) — a controlled data table.** Reads `rows` as the source of truth on
+  every render, so it is safe over a `v-for` / `.map()` bound to reactive data — unlike the
+  `freeday-table.js` enhancer, which snapshots the DOM and corrupts a framework list on the first
+  refetch. Two modes: **client** (component sorts/filters, and paginates when `pageSize` is set,
+  over the full `rows`) and **server** (`page` prop present → `rows` render as given and the
+  headers/filters/pager only emit `update:sort` / `update:filters` / `update:page`). Type-aware
+  column filters (**text / enum / number / date**) in a top-layer popover, sort toggles, and a
+  page-window pager — all over the existing `.fdy-table*` / `.fdy-filter*` / `.fdy-pagination__*`
+  classes. Column options: `sortable`, `filter`, `align`, `mono`, `sortType`, `value`, `options`.
+  Sort/filter/paginate logic lives in a shared, framework-agnostic core (`adapters/core/table-model.js`)
+  covered by `node --test` (`test/table-model.test.mjs`).
+- **`FdyModal` + `FdyDrawer` (Vue + React) — controlled `<dialog>` wrappers.** Reconcile a reactive
+  `open` boolean with the native `<dialog>`'s method-driven open/close: guarded
+  `showModal()`/`close()`, `@cancel`/`onCancel` + `preventDefault` so Esc routes through app state,
+  and backdrop-click via `event.target === dialogEl`. `open` + `close` event/`onClose`, `title`,
+  `size`/`side`, `dismissible` (default true), and `footer`. No new modal CSS.
+- **`.fdy-mono` utility.** Alignment-neutral monospace (data font + tabular figures) for identifier /
+  code / IP / timestamp cells or inline spans — the piece that previously only existed welded into
+  the right-aligned `.fdy-table__num`. `FdyTable` applies it for any `mono: true` column.
+- **`.fdy-drawer__footer`** — a bottom action bar for drawers (mirrors `.fdy-modal__footer`).
+
 ## [1.7.1] — 2026-07-27
 Docs & distribution patch. **No component/code changes** — `dist/`, `src/`, `adapters/`, and
 `tokens/` are byte-identical to 1.7.0.

package/README.id.md

@@ -5,7 +5,7 @@
 > **Lebih banyak _free day_ buat dev — UI kit-nya sudah siap pakai.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v1.7.1-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.7.1)
+[![Release](https://img.shields.io/badge/release-v1.9.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.9.0)
 
 UI KIT yang token-driven & framework-agnostic — satu sumber kebenaran untuk warna, tipografi,
 spasi, dan komponen. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/README.md

@@ -5,7 +5,7 @@
 > **More free days for devs — the UI kit is ready to use.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v1.7.1-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.7.1)
+[![Release](https://img.shields.io/badge/release-v1.9.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.9.0)
 
 A token-driven, framework-agnostic UI kit — one source of truth for color, typography,
 spacing, and components. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/adapters/core/table-model.d.ts

@@ -0,0 +1,78 @@
+// Types for the framework-agnostic table model (adapters/core/table-model.js).
+// Shared by FdyTable in both the Vue and React adapters.
+
+export type FdySortDir = 'asc' | 'desc';
+
+/** Which column is sorted and in what direction. */
+export interface FdySortState {
+  key: string;
+  dir: FdySortDir;
+}
+
+/** A column's comparator type — how its values are ordered when sorting. */
+export type FdyColumnType = 'text' | 'number' | 'date';
+
+/** Cell alignment. Maps to `text-align` on the header and body cells. */
+export type FdyColumnAlign = 'left' | 'right' | 'center';
+
+/** The kind of column filter to offer (a funnel popover in the header). */
+export type FdyColumnFilterType = 'text' | 'enum' | 'number' | 'date';
+
+/** One column definition. `T` is the row type. */
+export interface FdyTableColumn<T> {
+  /** Row property key; also the default cell accessor and the filter/sort identity. */
+  key: string;
+  /** Header label. */
+  label: string;
+  /** Show a sort toggle in the header. */
+  sortable?: boolean;
+  /** Offer a column filter of this type. */
+  filter?: FdyColumnFilterType;
+  /** Cell alignment (default left). */
+  align?: FdyColumnAlign;
+  /** Render cells in the monospace data font (`.fdy-mono`). */
+  mono?: boolean;
+  /** Override the comparator type; defaults to one derived from `filter`, else 'text'. */
+  sortType?: FdyColumnType;
+  /** Custom value accessor; defaults to `row[key]`. Used for sort, filter, and default cell text. */
+  value?: (row: T) => unknown;
+  /** Explicit options for an enum filter; defaults to the distinct values in the current rows.
+   *  Provide this in server-paged mode, where the rows on screen are only one page. */
+  options?: ReadonlyArray<string>;
+}
+
+/** The active filter for a single column. */
+export type FdyColumnFilter =
+  | { type: 'text'; text: string }
+  | { type: 'enum'; values: readonly string[] }
+  | { type: 'number'; min: number | null; max: number | null }
+  | { type: 'date'; from: string | null; to: string | null };
+
+/** Column-key → active filter. */
+export type FdyFilterMap = Record<string, FdyColumnFilter>;
+
+/** Server-driven pagination state (0-based page index). */
+export interface FdyPageState {
+  index: number;
+  size: number;
+  total: number;
+}
+
+export function cellValue<T>(row: T, column: FdyTableColumn<T>): unknown;
+export function cellText<T>(row: T, column: FdyTableColumn<T>): string;
+export function columnSortType<T>(column: FdyTableColumn<T>): FdyColumnType;
+export function compareBy(type: FdyColumnType, a: unknown, b: unknown): number;
+export function isFilterActive(filter: FdyColumnFilter | undefined): boolean;
+export function filterRows<T>(
+  rows: readonly T[],
+  columns: ReadonlyArray<FdyTableColumn<T>>,
+  filters: FdyFilterMap,
+): T[];
+export function sortRows<T>(
+  rows: readonly T[],
+  columns: ReadonlyArray<FdyTableColumn<T>>,
+  sort: FdySortState | null,
+): T[];
+export function paginate<T>(rows: readonly T[], pageIndex: number, pageSize: number): T[];
+export function distinctValues<T>(rows: readonly T[], column: FdyTableColumn<T>): string[];
+export function pageWindow(current: number, totalPages: number): Array<number | 'ellipsis'>;

package/adapters/core/table-model.js

@@ -0,0 +1,156 @@
+// Freeday — framework-agnostic table model (pure functions, zero dependencies).
+//
+// The sort / filter / paginate logic shared by adapters/vue/components/FdyTable.vue and
+// adapters/react/components/FdyTable.tsx. Kept here — plain ESM with a .d.ts sidecar — so the
+// two adapters can't drift and so the logic is unit-testable under `node --test`
+// (test/table-model.test.mjs) without a framework runtime. Every function is pure: inputs are
+// never mutated (rows are sliced before sorting), so it is safe to call on each render.
+//
+// Types live in table-model.d.ts. FdyTableColumn<T> = { key, label, sortable?, filter?, align?,
+// mono?, sortType?, value? }. A column's cell value is `col.value(row)` when given, else row[key].
+
+/** @param {unknown} v @returns {number} numeric value, tolerant of formatted strings ("Rp 1.000"); non-numeric -> 0 */
+function toNumber(v) {
+  if (typeof v === 'number') return Number.isFinite(v) ? v : 0;
+  const n = parseFloat(String(v == null ? '' : v).replace(/[^\d.-]/g, ''));
+  return Number.isNaN(n) ? 0 : n;
+}
+
+/** @param {unknown} v @returns {number} epoch ms; unparseable -> 0 */
+function toTime(v) {
+  if (v instanceof Date) return Number.isNaN(v.getTime()) ? 0 : v.getTime();
+  const t = Date.parse(String(v == null ? '' : v));
+  return Number.isNaN(t) ? 0 : t;
+}
+
+/** @param {unknown} v @returns {string} ISO calendar day (yyyy-mm-dd) — lexicographically comparable */
+function dateOnly(v) {
+  if (v instanceof Date) return Number.isNaN(v.getTime()) ? '' : v.toISOString().slice(0, 10);
+  return String(v == null ? '' : v).slice(0, 10);
+}
+
+/** Raw cell value for a column: the column accessor if present, else row[key]. */
+export function cellValue(row, column) {
+  return typeof column.value === 'function' ? column.value(row) : row[column.key];
+}
+
+/** Cell value as trimmed display text (null/undefined -> ''). */
+export function cellText(row, column) {
+  const v = cellValue(row, column);
+  return v === null || v === undefined ? '' : String(v).trim();
+}
+
+/** Effective comparator type for a column: explicit sortType, else derived from its filter type. */
+export function columnSortType(column) {
+  if (column.sortType) return column.sortType;
+  if (column.filter === 'number') return 'number';
+  if (column.filter === 'date') return 'date';
+  return 'text';
+}
+
+/** Ascending comparison of two raw cell values under a comparator type. */
+export function compareBy(type, a, b) {
+  if (type === 'number') return toNumber(a) - toNumber(b);
+  if (type === 'date') return toTime(a) - toTime(b);
+  return String(a == null ? '' : a).localeCompare(String(b == null ? '' : b), undefined, {
+    numeric: true,
+    sensitivity: 'base',
+  });
+}
+
+/** True when a filter would actually narrow the rows (i.e. worth applying / showing as active). */
+export function isFilterActive(filter) {
+  if (!filter) return false;
+  switch (filter.type) {
+    case 'text':
+      return filter.text.trim() !== '';
+    case 'enum':
+      return filter.values.length > 0;
+    case 'number':
+      return filter.min !== null || filter.max !== null;
+    case 'date':
+      return filter.from !== null || filter.to !== null;
+    default:
+      return false;
+  }
+}
+
+function rowPassesFilter(row, column, filter) {
+  switch (filter.type) {
+    case 'text': {
+      const needle = filter.text.trim().toLowerCase();
+      return needle === '' || cellText(row, column).toLowerCase().includes(needle);
+    }
+    case 'enum':
+      return filter.values.length === 0 || filter.values.includes(cellText(row, column));
+    case 'number': {
+      const v = toNumber(cellValue(row, column));
+      if (filter.min !== null && v < filter.min) return false;
+      if (filter.max !== null && v > filter.max) return false;
+      return true;
+    }
+    case 'date': {
+      const day = dateOnly(cellValue(row, column));
+      if (filter.from !== null && day < filter.from) return false;
+      if (filter.to !== null && day > filter.to) return false;
+      return true;
+    }
+    default:
+      return true;
+  }
+}
+
+/** Rows passing every active column filter (logical AND). Input is never mutated. */
+export function filterRows(rows, columns, filters) {
+  const active = columns
+    .map((col) => ({ col, filter: filters[col.key] }))
+    .filter((e) => isFilterActive(e.filter));
+  if (active.length === 0) return rows.slice();
+  return rows.filter((row) => active.every((e) => rowPassesFilter(row, e.col, e.filter)));
+}
+
+/** Rows sorted by the given sort state. Stable-enough via a sliced copy; input is never mutated. */
+export function sortRows(rows, columns, sort) {
+  if (!sort) return rows.slice();
+  const column = columns.find((c) => c.key === sort.key);
+  if (!column) return rows.slice();
+  const type = columnSortType(column);
+  const factor = sort.dir === 'desc' ? -1 : 1;
+  return rows
+    .slice()
+    .sort((a, b) => compareBy(type, cellValue(a, column), cellValue(b, column)) * factor);
+}
+
+/** Page slice (0-based page index). A non-positive size returns all rows. */
+export function paginate(rows, pageIndex, pageSize) {
+  if (!pageSize || pageSize <= 0) return rows.slice();
+  const start = pageIndex * pageSize;
+  return rows.slice(start, start + pageSize);
+}
+
+/** Distinct non-empty cell texts for a column, naturally sorted — the source for an enum filter. */
+export function distinctValues(rows, column) {
+  const seen = new Set();
+  const out = [];
+  for (const row of rows) {
+    const v = cellText(row, column);
+    if (v && !seen.has(v)) {
+      seen.add(v);
+      out.push(v);
+    }
+  }
+  return out.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
+}
+
+/**
+ * Page-number window for a pager: first and last page always shown, current ±1, "ellipsis"
+ * gaps between. `current` and the returned page numbers are 1-based.
+ */
+export function pageWindow(current, totalPages) {
+  const out = [];
+  for (let p = 1; p <= totalPages; p++) {
+    if (p === 1 || p === totalPages || (p >= current - 1 && p <= current + 1)) out.push(p);
+    else if (out[out.length - 1] !== 'ellipsis') out.push('ellipsis');
+  }
+  return out;
+}

package/adapters/react/components/FdyDrawer.tsx

@@ -0,0 +1,59 @@
+import type { JSX, ReactNode } from 'react';
+import { useEffect, useId, useRef } from 'react';
+
+// A controlled React wrapper over freeday's `.fdy-drawer` native <dialog> side panel
+// (src/components/drawer.css). React port of adapters/vue/components/FdyDrawer.vue — the same
+// controlled glue as FdyModal (guarded showModal()/close(), onCancel + preventDefault so Esc routes
+// through app state, backdrop-click via `event.target === dialogEl`) applied to a drawer that anchors
+// left (default) or right. Native <dialog> supplies the focus trap, focus restore, top-layer stacking
+// and inert background; `dismissible` (default true) gates Esc + backdrop dismissal.
+
+export interface FdyDrawerProps {
+  open: boolean;
+  title: ReactNode;
+  onClose: () => void;
+  side?: 'left' | 'right';
+  dismissible?: boolean;
+  footer?: ReactNode;
+  children?: ReactNode;
+}
+
+export function FdyDrawer(props: FdyDrawerProps): JSX.Element {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const titleId: string = `${useId()}-title`;
+  const dismissible: boolean = props.dismissible !== false;
+  const drawerClass: string = props.side === 'right' ? 'fdy-drawer fdy-drawer--right' : 'fdy-drawer';
+
+  useEffect((): void => {
+    const el: HTMLDialogElement | null = dialogRef.current;
+    if (el === null) return;
+    if (props.open && !el.open) el.showModal();
+    else if (!props.open && el.open) el.close();
+  }, [props.open]);
+
+  return (
+    <dialog
+      ref={dialogRef}
+      className={drawerClass}
+      aria-labelledby={titleId}
+      onCancel={(e): void => {
+        e.preventDefault();
+        if (dismissible) props.onClose();
+      }}
+      onClick={(e): void => {
+        if (dismissible && e.target === dialogRef.current) props.onClose();
+      }}
+    >
+      <div className="fdy-drawer__header">
+        <h3 id={titleId} className="fdy-drawer__title">{props.title}</h3>
+        {dismissible && (
+          <button className="fdy-drawer__close" type="button" aria-label="Close" onClick={props.onClose}>&times;</button>
+        )}
+      </div>
+
+      <div className="fdy-drawer__body">{props.children}</div>
+
+      {props.footer !== undefined && <div className="fdy-drawer__footer">{props.footer}</div>}
+    </dialog>
+  );
+}

package/adapters/react/components/FdyModal.tsx

@@ -0,0 +1,63 @@
+import type { JSX, ReactNode } from 'react';
+import { useEffect, useId, useRef } from 'react';
+
+// A controlled React wrapper over freeday's `.fdy-modal` native <dialog> (src/components/modal.css).
+// React port of adapters/vue/components/FdyModal.vue: reconciles the reactive `open` boolean with a
+// DOM element whose open/close is a method call — showModal()/close() guarded against the
+// already-open/closed cases (showModal() on an open dialog throws), onCancel + preventDefault so Esc
+// routes through app state instead of closing the DOM behind its back, and backdrop-click detection
+// via `event.target === dialogEl`. Native <dialog> already gives the focus trap, focus restore,
+// top-layer stacking and inert background. `dismissible` (default true) gates Esc + backdrop.
+
+export interface FdyModalProps {
+  open: boolean;
+  title: ReactNode;
+  onClose: () => void;
+  size?: 'sm' | 'md' | 'lg' | 'wide';
+  dismissible?: boolean;
+  footer?: ReactNode;
+  children?: ReactNode;
+}
+
+export function FdyModal(props: FdyModalProps): JSX.Element {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const titleId: string = `${useId()}-title`;
+  const dismissible: boolean = props.dismissible !== false;
+  const modalClass: string = props.size !== undefined ? `fdy-modal fdy-modal--${props.size}` : 'fdy-modal';
+
+  // Reconcile `open` with the dialog's method-driven state (runs on mount and whenever open changes).
+  // showModal() on an already-open dialog throws, so guard both directions.
+  useEffect((): void => {
+    const el: HTMLDialogElement | null = dialogRef.current;
+    if (el === null) return;
+    if (props.open && !el.open) el.showModal();
+    else if (!props.open && el.open) el.close();
+  }, [props.open]);
+
+  return (
+    <dialog
+      ref={dialogRef}
+      className={modalClass}
+      aria-labelledby={titleId}
+      onCancel={(e): void => {
+        e.preventDefault(); // stop the native close; app state stays the single source of truth
+        if (dismissible) props.onClose();
+      }}
+      onClick={(e): void => {
+        // The ::backdrop is not a separate element — target === the dialog box means a backdrop click.
+        if (dismissible && e.target === dialogRef.current) props.onClose();
+      }}
+    >
+      <div className="fdy-modal__header">
+        <h3 id={titleId} className="fdy-modal__title">{props.title}</h3>
+        {dismissible && (
+          <button className="fdy-modal__close" type="button" aria-label="Close" onClick={props.onClose}>&times;</button>
+        )}
+      </div>
+
+      <div className="fdy-modal__body">{props.children}</div>
+
+      {props.footer !== undefined && <div className="fdy-modal__footer">{props.footer}</div>}
+    </dialog>
+  );
+}