create-wakii-stack 0.0.0-stage → 0.1.1

package/stack-template/app/ui-kit/src/ui/table/table-advanced.stories.tsx

@@ -0,0 +1,91 @@
+// Table advanced stories — fixed header (scroll.y) · summary row · sorting 3-state.
+// Separate file from table.stories.tsx (unique Storybook title), same data style.
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Table } from './index';
+
+interface Row { id: string; title: string; status: 'todo' | 'doing' | 'done'; point: number }
+
+const DATA: Row[] = Array.from({ length: 28 }, (_, i) => ({
+  id: String(i + 1),
+  title: `Task ${i + 1}`,
+  status: (['todo', 'doing', 'done'] as const)[i % 3],
+  point: ((i * 7) % 13) + 1,
+}));
+
+const COLS = [
+  { key: 'title', title: 'Title', sortable: true },
+  { key: 'status', title: 'Status', sortable: true },
+  { key: 'point', title: 'Points', dataType: 'number' as const, align: 'right' as const, sortable: true },
+];
+
+const meta = {
+  title: 'Data Display/Table Advanced',
+  tags: ['autodocs'],
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+/** FixedHeader — scroll={{ y: 280 }}: wrapper max-height, thead sticks while rows scroll under it. */
+export const FixedHeader: Story = {
+  render: () => (
+    <div className="w-[560px]">
+      <Table columns={COLS} dataSource={DATA} rowKey="id" scroll={{ y: 280 }} striped />
+    </div>
+  ),
+};
+
+/** SummaryRow — antd-style footer: totals computed from the CURRENT page data; sticks to the bottom under scroll.y. */
+export const SummaryRow: Story = {
+  render: () => (
+    <div className="w-[560px]">
+      <Table
+        columns={COLS}
+        dataSource={DATA}
+        rowKey="id"
+        paginator
+        pageSize={8}
+        scroll={{ y: 300 }}
+        summary={(page) => {
+          const total = page.reduce((s, r) => s + r.point, 0);
+          const done = page.filter((r) => r.status === 'done').length;
+          return (
+            <div className="flex items-center justify-between text-label text-ink2">
+              <span>{page.length} tasks on page · {done} done</span>
+              <span className="text-ink">Total points: {total}</span>
+            </div>
+          );
+        }}
+      />
+    </div>
+  ),
+};
+
+/** SortStates — click a header: asc → desc → none (3-state cycle); aria-sort mirrors the state. */
+export const SortStates: Story = {
+  render: () => (
+    <div className="w-[560px]">
+      <p className="mb-2 text-label text-ink3">
+        Click “Title” / “Points” — cycle ascending → descending → none (check aria-sort in devtools).
+      </p>
+      <Table columns={COLS} dataSource={DATA.slice(0, 8)} rowKey="id" />
+    </div>
+  ),
+};
+
+/** AllTogether — fixed header + summary + sorting + expandable on one grid. */
+export const AllTogether: Story = {
+  render: () => (
+    <div className="w-[640px]">
+      <Table
+        columns={COLS}
+        dataSource={DATA}
+        rowKey="id"
+        scroll={{ y: 320 }}
+        striped
+        expandable={{ expandedRowRender: (r) => <p className="text-label text-ink2">Details for {r.title} — P{r.point}, {r.status}</p> }}
+        summary={(page) => <span className="text-label text-ink2">Σ {page.reduce((s, r) => s + r.point, 0)} points on {page.length} rows</span>}
+      />
+    </div>
+  ),
+};

package/stack-template/app/ui-kit/src/ui/table/table-advanced.test.tsx

@@ -0,0 +1,188 @@
+// Table advanced tests — 3 nhóm: fixed header (scroll.y) · summary row · sorting
+// 3-state + aria-sort. Bổ sung quanh hành vi có sẵn, không đụng test cũ.
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Table } from './index.js';
+
+afterEach(cleanup);
+
+interface Row { id: string; title: string; point: number }
+const ROWS: Row[] = [
+  { id: '1', title: 'Alpha', point: 3 },
+  { id: '2', title: 'Beta', point: 8 },
+  { id: '3', title: 'Gamma', point: 5 },
+];
+const COLS = [
+  { key: 'title', title: 'Title', sortable: true },
+  { key: 'point', title: 'Point', dataType: 'number' as const, sortable: true, align: 'right' as const },
+];
+
+describe('Table — fixed header (scroll.y)', () => {
+  it('scroll={{ y: 240 }} → wrapper max-height 240px + overflow-auto', () => {
+    const { container } = render(<Table columns={COLS} dataSource={ROWS} rowKey="id" scroll={{ y: 240 }} />);
+    const wrapper = container.querySelector('div.overflow-auto')!;
+    expect(wrapper).toHaveStyle({ maxHeight: '240px' });
+    expect(wrapper.className).toContain('overflow-auto');
+  });
+
+  it('thead th có class sticky (fixed header) — hàng header dính khi cuộn', () => {
+    const { container } = render(<Table columns={COLS} dataSource={ROWS} rowKey="id" scroll={{ y: 120 }} />);
+    const ths = container.querySelectorAll('thead th');
+    expect(ths.length).toBeGreaterThan(0);
+    ths.forEach((th) => expect(th.className).toContain('sticky'));
+  });
+
+  it('scrollHeight (API cũ) vẫn hoạt động → max-height; scroll.y ưu tiên khi cả hai có', () => {
+    const { container, rerender } = render(
+      <Table columns={COLS} dataSource={ROWS} rowKey="id" scrollHeight={100} />,
+    );
+    expect(container.querySelector('div.overflow-auto')).toHaveStyle({ maxHeight: '100px' });
+    rerender(<Table columns={COLS} dataSource={ROWS} rowKey="id" scrollHeight={100} scroll={{ y: 300 }} />);
+    expect(container.querySelector('div.overflow-auto')).toHaveStyle({ maxHeight: '300px' });
+  });
+
+  it('filterPlacement="row" + scroll.y → filter row sticky ngay dưới header (style top đo được)', () => {
+    const { container } = render(
+      <Table
+        columns={[{ key: 'title', title: 'Title', filterable: true }, ...COLS.slice(1)]}
+        dataSource={ROWS}
+        rowKey="id"
+        scroll={{ y: 200 }}
+        filterPlacement="row"
+      />,
+    );
+    const filterTh = container.querySelectorAll('thead tr')[1]!.querySelector('th')!;
+    expect(filterTh.className).toContain('sticky');
+    expect(filterTh.style.top).toBeDefined(); // jsdom offsetHeight = 0 → top '0px', real browser đo đúng
+  });
+});
+
+describe('Table — summary row', () => {
+  it('summary nhận toàn bộ data (đã sort) và render trong <tfoot>', () => {
+    const seen: Row[][] = [];
+    render(
+      <Table
+        columns={COLS}
+        dataSource={ROWS}
+        rowKey="id"
+        summary={(data) => {
+          seen.push(data);
+          return <span>Total: {data.reduce((s, r) => s + r.point, 0)}</span>;
+        }}
+      />,
+    );
+    expect(seen[0]).toHaveLength(3);
+    expect(screen.getByText('Total: 16')).toBeInTheDocument();
+    expect(screen.getByText('Total: 16').closest('tfoot')).not.toBeNull();
+  });
+
+  it('tfoot td sticky bottom-0 + bg-s3 + colSpan đủ (cột + selection)', () => {
+    const { container } = render(
+      <Table
+        columns={COLS}
+        dataSource={ROWS}
+        rowKey="id"
+        selectionMode="checkbox"
+        summary={() => <span>Σ</span>}
+      />,
+    );
+    const td = container.querySelector('tfoot td')!;
+    expect(td.className).toContain('sticky');
+    expect(td.className).toContain('bottom-0');
+    expect(td.className).toContain('bg-s3');
+    expect(td).toHaveAttribute('colspan', '3'); // 2 cột + 1 selection
+  });
+
+  it('paginator: sang trang 2 → summary nhận đúng data TRANG HIỆN TẠI', async () => {
+    const big: Row[] = Array.from({ length: 4 }, (_, i) => ({ id: String(i + 1), title: `T${i + 1}`, point: i + 1 }));
+    const seen: Row[][] = [];
+    const user = userEvent.setup();
+    render(
+      <Table
+        columns={COLS}
+        dataSource={big}
+        rowKey="id"
+        paginator
+        pageSize={2}
+        summary={(data) => {
+          seen.push([...data]);
+          return <span>Page total: {data.reduce((s, r) => s + r.point, 0)}</span>;
+        }}
+      />,
+    );
+    expect(seen.at(-1)!.map((r) => r.id)).toEqual(['1', '2']);
+    // next page
+    await user.click(screen.getAllByRole('button', { name: /2|›|Next/ }).at(-1)!);
+    expect(seen.at(-1)!.map((r) => r.id)).toEqual(['3', '4']);
+  });
+
+  it('loading → KHÔNG render tfoot summary (skeleton thay)', () => {
+    const { container } = render(
+      <Table columns={COLS} dataSource={ROWS} rowKey="id" loading summary={() => <span>Σ</span>} />,
+    );
+    expect(container.querySelector('tfoot')).toBeNull();
+    expect(screen.queryByText('Σ')).toBeNull();
+  });
+});
+
+describe('Table — sorting 3-state + aria-sort', () => {
+  function headerButton(name: string) {
+    return screen.getByText(name).closest('button')!;
+  }
+
+  it('aria-sort: asc → ascending, desc → descending, none → bỏ attr', async () => {
+    const th = () => headerButton('Title').closest('th')!;
+    const user = userEvent.setup();
+    render(<Table columns={COLS} dataSource={ROWS} rowKey="id" />);
+    await user.click(headerButton('Title'));
+    expect(th()).toHaveAttribute('aria-sort', 'ascending');
+    await user.click(headerButton('Title'));
+    expect(th()).toHaveAttribute('aria-sort', 'descending');
+    await user.click(headerButton('Title'));
+    expect(th()).not.toHaveAttribute('aria-sort');
+  });
+
+  it('desc thật sự đảo thứ tự (point desc → 8, 5, 3)', async () => {
+    const user = userEvent.setup();
+    render(<Table columns={COLS} dataSource={ROWS} rowKey="id" />);
+    await user.click(headerButton('Point')); // asc: 3,5,8
+    await user.click(headerButton('Point')); // desc: 8,5,3
+    const firstCells = screen.getAllByRole('row')
+      .map((r) => r.querySelector('td')?.textContent)
+      .filter((t) => t && ['Alpha', 'Beta', 'Gamma'].includes(t));
+    expect(firstCells).toEqual(['Beta', 'Gamma', 'Alpha']);
+  });
+
+  it('click lần 3 (none) → thứ tự về gốc như dataSource + indicator về ⇅', async () => {
+    const user = userEvent.setup();
+    render(<Table columns={COLS} dataSource={ROWS} rowKey="id" />);
+    await user.click(headerButton('Point'));
+    await user.click(headerButton('Point'));
+    await user.click(headerButton('Point'));
+    const rows = screen.getAllByRole('row')
+      .map((r) => r.querySelector('td')?.textContent)
+      .filter((t) => t && ['Alpha', 'Beta', 'Gamma'].includes(t));
+    expect(rows).toEqual(['Alpha', 'Beta', 'Gamma']); // gốc
+    const btn = headerButton('Point');
+    expect(btn.textContent).toContain('⇅'); // indicator none
+  });
+
+  it('sort không phá summary — summary vẫn nhận data theo sort hiện tại', async () => {
+    const seen: string[][] = [];
+    const user = userEvent.setup();
+    render(
+      <Table
+        columns={COLS}
+        dataSource={ROWS}
+        rowKey="id"
+        summary={(d) => {
+          seen.push(d.map((r) => r.id));
+          return null;
+        }}
+      />,
+    );
+    await user.click(headerButton('Point'));
+    expect(seen.at(-1)).toEqual(['1', '3', '2']); // asc point: 3,5,8
+  });
+});

package/stack-template/app/ui-kit/src/ui/table/table-expandable.stories.tsx

@@ -0,0 +1,91 @@
+// Table expandable stories — antd `expandable` API (docs/parity-matrix.md Gap P0).
+// Separate file from table.stories.tsx (unique Storybook title): Basic ·
+// DefaultExpanded · RowExpandable=false · combined with selection + pagination.
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Table } from './index';
+
+interface Row { id: string; title: string; status: 'todo' | 'doing' | 'done'; priority: number }
+
+const DATA: Row[] = Array.from({ length: 8 }, (_, i) => ({
+  id: String(i + 1),
+  title: `Task ${i + 1}`,
+  status: (['todo', 'doing', 'done'] as const)[i % 3],
+  priority: (i % 4) + 1,
+}));
+
+const COLS = [
+  { key: 'title', title: 'Title', sortable: true },
+  { key: 'status', title: 'Status' },
+  { key: 'priority', title: 'Priority', dataType: 'number' as const, align: 'right' as const },
+];
+
+const detail = (r: Row) => (
+  <div className="text-label text-ink2">
+    <p className="font-medium text-ink">Details for {r.title}</p>
+    <p className="mt-1">Status: {r.status} · Priority: P{r.priority} · Assignee: alice@demo.local</p>
+  </div>
+);
+
+const meta = {
+  // Bare meta (title + tags) như table.stories.tsx — Table generic, stories
+  // render-driven; khai báo `component` ở đây buộc args required cho từng story.
+  title: 'Data Display/Table Expandable',
+  tags: ['autodocs'],
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Basic — expander column is auto-injected; chevron-down rotates 90° when open. */
+export const Basic: Story = {
+  render: () => (
+    <Table
+      columns={COLS}
+      dataSource={DATA.slice(0, 5)}
+      rowKey="id"
+      expandable={{ expandedRowRender: detail }}
+    />
+  ),
+};
+
+/** DefaultExpandedRowKeys — rows start open (uncontrolled initial state). */
+export const DefaultExpanded: Story = {
+  render: () => (
+    <Table
+      columns={COLS}
+      dataSource={DATA.slice(0, 5)}
+      rowKey="id"
+      expandable={{ expandedRowRender: detail, defaultExpandedRowKeys: ['1', '3'] }}
+    />
+  ),
+};
+
+/** RowExpandable=false — the guarded row shows no chevron at all. */
+export const RowExpandableFalse: Story = {
+  render: () => (
+    <Table
+      columns={COLS}
+      dataSource={DATA.slice(0, 5)}
+      rowKey="id"
+      expandable={{
+        expandedRowRender: detail,
+        rowExpandable: (r) => r.status !== 'done',
+      }}
+    />
+  ),
+};
+
+/** Composed — expandable rows keep working with checkbox selection + pagination. */
+export const WithSelectionAndPagination: Story = {
+  render: () => (
+    <Table
+      columns={COLS}
+      dataSource={DATA}
+      rowKey="id"
+      paginator
+      pageSize={4}
+      selectionMode="checkbox"
+      expandable={{ expandedRowRender: detail }}
+    />
+  ),
+};

package/stack-template/app/ui-kit/src/ui/table/table-expandable.test.tsx

@@ -0,0 +1,143 @@
+// Table expandable tests — antd `expandable` config (Gap P0): cột expander tự
+// inject (chevron-down xoay 90 khi mở), expandedRowRender colspan đầy,
+// defaultExpandedRowKeys mở sẵn, rowExpandable=false → không nút.
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Table } from './index.js';
+
+afterEach(cleanup);
+
+interface Row { id: string; title: string; point: number }
+const ROWS: Row[] = [
+  { id: '1', title: 'Setup repo', point: 3 },
+  { id: '2', title: 'Add CI', point: 5 },
+  { id: '3', title: 'Ship demo', point: 8 },
+];
+const COLS = [
+  { key: 'title', title: 'Title' },
+  { key: 'point', title: 'Point', align: 'right' as const },
+];
+
+describe('Table — expandable (antd API)', () => {
+  it('expandable không cần cột expander thủ công → cột chevron tự inject (aria-expanded=false)', () => {
+    render(
+      <Table
+        columns={COLS}
+        dataSource={ROWS}
+        rowKey="id"
+        expandable={{ expandedRowRender: (r) => <p>Detail {r.id}</p> }}
+      />,
+    );
+    const buttons = screen.getAllByRole('button', { name: 'Mở rộng dòng' });
+    expect(buttons).toHaveLength(3);
+    buttons.forEach((b) => expect(b).toHaveAttribute('aria-expanded', 'false'));
+    // Animation 0fr↔1fr: row thu là có trong DOM nhưng bọc aria-hidden (0fr clip)
+    const hidden = screen.getByText('Detail 1').closest('[aria-hidden="true"]');
+    expect(hidden).not.toBeNull();
+  });
+
+  it('click chevron → aria-expanded=true + expandedRowRender hiện; click lần nữa → thu lại', async () => {
+    render(
+      <Table
+        columns={COLS}
+        dataSource={ROWS}
+        rowKey="id"
+        expandable={{ expandedRowRender: (r) => <p>Detail {r.title}</p> }}
+      />,
+    );
+    const btn = screen.getAllByRole('button', { name: 'Mở rộng dòng' })[1];
+    await userEvent.setup().click(btn);
+    expect(btn).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('Detail Add CI')).toBeInTheDocument();
+    await userEvent.setup().click(btn);
+    expect(btn).toHaveAttribute('aria-expanded', 'false');
+    // thu lại → vẫn trong DOM nhưng aria-hidden (grid 0fr) — animation 2 chiều
+    expect(screen.getByText('Detail Add CI').closest('[aria-hidden="true"]')).not.toBeNull();
+  });
+
+  it('chevron-down + xoay 90 khi mở (class rotate-90)', async () => {
+    render(
+      <Table
+        columns={COLS}
+        dataSource={ROWS}
+        rowKey="id"
+        expandable={{ expandedRowRender: (r) => <p>{r.id}</p> }}
+      />,
+    );
+    const btn = screen.getAllByRole('button', { name: 'Mở rộng dòng' })[0];
+    const icon = btn.querySelector('svg')!;
+    // chevron-down của bộ primeicons — path phẩy xuống (khác chevron-right của legacy rowExpansion)
+    expect(btn.textContent).not.toContain('▸');
+    expect(btn.querySelector('span')).toHaveClass('transition-transform');
+    expect(btn.querySelector('span')).not.toHaveClass('rotate-90');
+    await userEvent.setup().click(btn);
+    expect(btn.querySelector('span')).toHaveClass('rotate-90');
+    expect(icon).toBeInTheDocument();
+  });
+
+  it('row con colspan đầy (số cột + cột expander)', async () => {
+    render(
+      <Table
+        columns={COLS}
+        dataSource={ROWS}
+        rowKey="id"
+        expandable={{ expandedRowRender: (r) => <p>Detail {r.id}</p> }}
+      />,
+    );
+    await userEvent.setup().click(screen.getAllByRole('button', { name: 'Mở rộng dòng' })[0]);
+    const expandedTd = screen.getByText('Detail 1').closest('td')!;
+    expect(expandedTd).toHaveAttribute('colspan', '3'); // 2 cột dữ liệu + 1 expander
+  });
+
+  it('defaultExpandedRowKeys → row mở sẵn lúc mount', () => {
+    render(
+      <Table
+        columns={COLS}
+        dataSource={ROWS}
+        rowKey="id"
+        expandable={{
+          expandedRowRender: (r) => <p>Detail {r.id}</p>,
+          defaultExpandedRowKeys: ['2'],
+        }}
+      />,
+    );
+    expect(screen.getByText('Detail 2')).toBeInTheDocument();
+    // row 1 thu (0fr aria-hidden) — row 2 mở (không aria-hidden)
+    expect(screen.getByText('Detail 1').closest('[aria-hidden="true"]')).not.toBeNull();
+    expect(screen.getAllByRole('button', { name: 'Mở rộng dòng' })[1]).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('rowExpandable=false → không render nút expand cho row đó, các row khác bình thường', async () => {
+    render(
+      <Table
+        columns={COLS}
+        dataSource={ROWS}
+        rowKey="id"
+        expandable={{
+          expandedRowRender: (r) => <p>Detail {r.id}</p>,
+          rowExpandable: (r) => r.id !== '2',
+        }}
+      />,
+    );
+    const buttons = screen.getAllByRole('button', { name: 'Mở rộng dòng' });
+    expect(buttons).toHaveLength(2); // row 2 không có nút
+    await userEvent.setup().click(buttons[0]);
+    expect(screen.getByText('Detail 1')).toBeInTheDocument();
+  });
+
+  it('expandable + onExpandedRowRender index param được truyền đúng (render theo index)', async () => {
+    const renderSpy = vi.fn((r: Row, i: number) => <p>#{i} {r.title}</p>);
+    render(
+      <Table
+        columns={COLS}
+        dataSource={ROWS}
+        rowKey="id"
+        expandable={{ expandedRowRender: renderSpy }}
+      />,
+    );
+    await userEvent.setup().click(screen.getAllByRole('button', { name: 'Mở rộng dòng' })[2]);
+    expect(renderSpy).toHaveBeenCalledWith(ROWS[2], 2);
+    expect(screen.getByText('#2 Ship demo')).toBeInTheDocument();
+  });
+});