create-wakii-stack 0.0.0-stage → 0.1.0

package/stack-template/app/ui-kit/src/ui/bottom-navigation/bottom-navigation.test.tsx

@@ -0,0 +1,68 @@
+// BottomNavigation tests — render items, pick + onChange, controlled value,
+// hideOnScroll xuống/up, không listener khi tắt hideOnScroll.
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { BottomNavigation } from './index.js';
+import { Icon } from '../icons/index.js';
+
+afterEach(cleanup);
+
+const ITEMS = [
+  { key: 'home', label: 'Trang chủ', icon: <Icon name="home" size={16} /> },
+  { key: 'search', label: 'Tìm', icon: <Icon name="search" size={16} /> },
+  { key: 'user', label: 'Tôi', icon: <Icon name="user" size={16} /> },
+];
+
+describe('BottomNavigation', () => {
+  it('render đủ items — label hiển thị, nav có aria-label', () => {
+    render(<BottomNavigation items={ITEMS} ariaLabel="Điều hướng chính" />);
+    expect(screen.getByRole('navigation', { name: 'Điều hướng chính' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /Trang chủ/ })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /Tôi/ })).toBeInTheDocument();
+  });
+
+  it('uncontrolled: click mục → aria-selected=true + onChange(key)', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<BottomNavigation items={ITEMS} onChange={onChange} />);
+    await user.click(screen.getByRole('tab', { name: /Tìm/ }));
+    expect(onChange).toHaveBeenCalledWith('search');
+    expect(screen.getByRole('tab', { name: /Tìm/ })).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('controlled value → aria-selected theo prop, không cần click', () => {
+    render(<BottomNavigation items={ITEMS} value="user" />);
+    expect(screen.getByRole('tab', { name: /Tôi/ })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('tab', { name: /Trang chủ/ })).toHaveAttribute('aria-selected', 'false');
+  });
+
+  it('hideOnScroll: cuộn xuống >40px → ẩn (translate-y-full); cuộn lên → hiện lại', () => {
+    let y = 0;
+    vi.spyOn(window, 'scrollY', 'get').mockImplementation(() => y);
+    render(<BottomNavigation items={ITEMS} hideOnScroll />);
+    const nav = screen.getByRole('navigation');
+    expect(nav.className).not.toContain('translate-y-full');
+    y = 120;
+    fireEvent.scroll(window);
+    expect(nav.className).toContain('translate-y-full');
+    y = 80;
+    fireEvent.scroll(window);
+    expect(nav.className).not.toContain('translate-y-full');
+  });
+
+  it('hideOnScroll=false (mặc định): cuộn không thêm translate-y-full', () => {
+    let y = 0;
+    vi.spyOn(window, 'scrollY', 'get').mockImplementation(() => y);
+    render(<BottomNavigation items={ITEMS} />);
+    y = 200;
+    fireEvent.scroll(window);
+    expect(screen.getByRole('navigation').className).not.toContain('translate-y-full');
+  });
+
+  it('nút active dùng text-accent; nút thường text-ink3', () => {
+    render(<BottomNavigation items={ITEMS} value="home" />);
+    expect(screen.getByRole('tab', { name: /Trang chủ/ }).className).toContain('text-accent');
+    expect(screen.getByRole('tab', { name: /Tìm/ }).className).toContain('text-ink3');
+  });
+});

package/stack-template/app/ui-kit/src/ui/bottom-navigation/index.tsx

@@ -0,0 +1,82 @@
+// BottomNavigation — thanh điều hướng dưới mobile (MUI lite): fixed bottom,
+// active accent + bp-switch-pop, tuỳ chọn hideOnScroll (ẩn khi cuộn xuống).
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+
+export interface BottomNavItem {
+  /** Khóa duy nhất của mục (dùng làm value). */
+  key: string;
+  /** Nhãn dưới icon. */
+  label: string;
+  /** Icon từ bộ primeicons (<Icon name size>). */
+  icon: ReactNode;
+}
+
+export interface BottomNavigationProps {
+  items: BottomNavItem[];
+  /** Controlled mục đang chọn; không truyền → uncontrolled (defaultValue). */
+  value?: string;
+  defaultValue?: string;
+  onChange?: (key: string) => void;
+  /** Ẩn thanh khi cuộn xuống, hiện lại khi cuộn lên. */
+  hideOnScroll?: boolean;
+  /** aria-label cho nav (khuyến nghị đặt tên màn hình). */
+  ariaLabel?: string;
+  className?: string;
+}
+
+export function BottomNavigation({ items, value, defaultValue, onChange, hideOnScroll = false, ariaLabel, className }: BottomNavigationProps) {
+  const [inner, setInner] = useState<string | undefined>(defaultValue);
+  const active = value ?? inner;
+  const [hidden, setHidden] = useState(false);
+  const lastY = useRef(0);
+
+  useEffect(() => {
+    if (!hideOnScroll) return;
+    lastY.current = window.scrollY;
+    const onScroll = () => {
+      const y = window.scrollY;
+      setHidden(y > lastY.current && y > 40);
+      lastY.current = y;
+    };
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, [hideOnScroll]);
+
+  function pick(key: string) {
+    if (value === undefined) setInner(key);
+    onChange?.(key);
+  }
+
+  return (
+    <nav
+      aria-label={ariaLabel}
+      className={`fixed inset-x-0 bottom-0 z-[var(--z-modal)] border-t border-line bg-s1 pb-[env(safe-area-inset-bottom)] transition-transform duration-200 ease-[var(--ease-enter)]${
+        hideOnScroll && hidden ? ' translate-y-full' : ''
+      }${className ? ` ${className}` : ''}`}
+    >
+      <ul role="tablist" className="m-0 flex list-none items-stretch justify-around p-0">
+        {items.map((item) => {
+          const selected = item.key === active;
+          return (
+            <li key={item.key} role="presentation" className="flex-1">
+              <button
+                type="button"
+                role="tab"
+                aria-selected={selected}
+                onClick={() => pick(item.key)}
+                className={`flex w-full cursor-pointer flex-col items-center gap-0.5 border-none bg-transparent px-2 pb-2 pt-2 text-meta transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ${
+                  selected ? 'text-accent' : 'text-ink3 hover:text-ink2'
+                }`}
+              >
+                <span className={selected ? 'animate-[bp-switch-pop_var(--motion-fast)_var(--ease-enter)]' : ''} aria-hidden={false}>
+                  {item.icon}
+                </span>
+                {item.label}
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}

package/stack-template/app/ui-kit/src/ui/branch-fill.test.tsx

@@ -0,0 +1,245 @@
+// Branch-fill sweep — phủ các nhánh className-passthrough + path behavior còn thiếu
+// (coverage branches ≥ 90 — Tier 3/4/5 sweep 2026-10-17). Mỗi test = 1-2 nhánh nhỏ.
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Avatar } from './avatar/index.js';
+import { Breadcrumb } from './breadcrumb/index.js';
+import { Button } from './button/index.js';
+import { Collapse } from './collapse/index.js';
+import { Divider } from './divider/index.js';
+import { Drawer } from './drawer/index.js';
+import { Dropdown } from './dropdown/index.js';
+import { Input, Textarea } from './input/index.js';
+import { InputNumber } from './input-number/index.js';
+import { Pagination } from './pagination/index.js';
+import { Progress } from './progress/index.js';
+import { Result } from './result/index.js';
+import { Segmented } from './segmented/index.js';
+import { Space } from './space/index.js';
+import { Steps } from './steps/index.js';
+import { Table } from './table/index.js';
+import { Tag } from './tag/index.js';
+import { Tooltip } from './tooltip/index.js';
+import { Typography } from './typography/index.js';
+import { Radio, RadioGroup } from './radio/index.js';
+
+afterEach(cleanup);
+
+const P = 'marker';
+
+describe('className passthrough sweep', () => {
+  it('Avatar', () => {
+    render(<Avatar className={P}>A</Avatar>);
+    expect(screen.getByText('A').parentElement).toHaveClass(P);
+  });
+  it('Breadcrumb', () => {
+    const { container } = render(<Breadcrumb items={[{ title: 'X' }]} className={P} />);
+    expect(container.firstElementChild).toHaveClass(P);
+  });
+  it('Collapse', () => {
+    const { container } = render(
+      <Collapse className={P} items={[{ key: 'k', label: 'L', children: <span>c</span> }]} />,
+    );
+    expect(container.firstElementChild).toHaveClass(P);
+  });
+  it('Divider', () => {
+    const { container } = render(<Divider className={P} dashed />);
+    expect(container.firstElementChild).toHaveClass(P);
+  });
+  it('Drawer (title ReactNode → không aria-label string)', () => {
+    render(
+      <Drawer open title={<b>T</b>} className={P}>
+        c
+      </Drawer>,
+    );
+    expect(screen.getByRole('dialog')).not.toHaveAttribute('aria-label');
+  });
+  it('Dropdown', () => {
+    render(
+      <Dropdown
+        className={P}
+        trigger={<button>Menu</button>}
+        items={[{ key: 'a', label: 'A' }]}
+      />,
+    );
+    expect(document.querySelector(`.${P}`)).not.toBeNull();
+  });
+  it('InputNumber', () => {
+    const { container } = render(<InputNumber ariaLabel="n" className={P} />);
+    expect(container.firstElementChild).toHaveClass(P);
+  });
+  it('Pagination', () => {
+    const { container } = render(
+      <Pagination current={1} pageSize={10} total={10} className={P} onChange={vi.fn()} />,
+    );
+    expect(container.firstElementChild).toHaveClass(P);
+  });
+  it('Progress', () => {
+    const { container } = render(<Progress percent={10} className={P} />);
+    expect(container.firstElementChild).toHaveClass(P);
+  });
+  it('Radio + RadioGroup', () => {
+    const { container } = render(
+      <RadioGroup
+        className={P}
+        value="a"
+        onChange={vi.fn()}
+        options={[
+          { label: 'A', value: 'a' },
+          { label: 'B', value: 'b' },
+        ]}
+      />,
+    );
+    expect(container.firstElementChild).toHaveClass(P);
+    render(<Radio className={P}>r</Radio>);
+    expect(screen.getByText('r')).toHaveClass(P);
+  });
+  it('Result', () => {
+    const { container } = render(<Result className={P} title="r" />);
+    expect(container.firstElementChild).toHaveClass(P);
+  });
+  it('Segmented', () => {
+    const { container } = render(
+      <Segmented options={[{ label: 'A', value: 'a' }]} value="a" className={P} onChange={vi.fn()} />,
+    );
+    expect(container.firstElementChild).toHaveClass(P);
+  });
+  it('Space', () => {
+    const { container } = render(
+      <Space className={P}>
+        <span>s</span>
+      </Space>,
+    );
+    expect(container.firstElementChild).toHaveClass(P);
+  });
+  it('Steps', () => {
+    const { container } = render(<Steps items={[{ title: 'S' }]} current={0} className={P} />);
+    expect(container.firstElementChild).toHaveClass(P);
+  });
+  it('Tag', () => {
+    render(<Tag className={P}>t</Tag>);
+    expect(screen.getByText('t')).toHaveClass(P);
+  });
+  it('Tooltip', () => {
+    render(
+      <Tooltip title="tip" className={P}>
+        <button>tt</button>
+      </Tooltip>,
+    );
+    expect(document.querySelector(`.${P}`)).not.toBeNull();
+  });
+  it('Typography Title/Text/Paragraph', () => {
+    render(
+      <>
+        <Typography.Title className={P}>t</Typography.Title>
+        <Typography.Text className={P}>x</Typography.Text>
+        <Typography.Paragraph className={P}>p</Typography.Paragraph>
+      </>,
+    );
+    expect(screen.getByText('t')).toHaveClass(P);
+    expect(screen.getByText('x')).toHaveClass(P);
+    expect(screen.getByText('p')).toHaveClass(P);
+  });
+});
+
+describe('behavior path sweep', () => {
+  it('Button htmlType default → type=button (không submit trong form)', () => {
+    const { container } = render(<Button>bt</Button>);
+    expect(container.querySelector('button')).toHaveAttribute('type', 'button');
+  });
+
+  it('InputNumber: blur rỗng → null; bump từ rỗng → base 0 + step', () => {
+    const onChange = vi.fn();
+    render(<InputNumber ariaLabel="in" min={0} step={5} onChange={onChange} />);
+    const input = screen.getByLabelText('in');
+    // gõ giá trị rồi xoá: '3' → onChange(3); '' → onChange(null) (commit chặn raw rỗng)
+    fireEvent.change(input, { target: { value: '3' } });
+    expect(onChange).toHaveBeenCalledWith(3);
+    fireEvent.change(input, { target: { value: '' } });
+    expect(onChange).toHaveBeenLastCalledWith(null);
+    // bump từ rỗng → base 0 + step 5
+    fireEvent.click(screen.getByRole('button', { name: 'Tăng' }));
+    expect(onChange).toHaveBeenLastCalledWith(5);
+  });
+
+  it('Input affix + invalid ring đỏ; Textarea showCount không maxLength → không đếm', () => {
+    const { rerender } = render(
+      <Input aria-label="aff" prefix="$" invalid value="5" readOnly />,
+    );
+    expect(screen.getByLabelText('aff').closest('span')).toHaveClass('border-st-fail');
+    rerender(<Textarea aria-label="ta" showCount value="abc" />);
+    expect(screen.queryByText(/\d\/\d+/)).toBeNull();
+  });
+
+  it('Table: className + scrollHeight string + paginator trống range "0"', () => {
+    const { container } = render(
+      <Table
+        className={P}
+        columns={[{ key: 't', title: 'T' }]}
+        dataSource={[]}
+        rowKey="id"
+        paginator
+        scrollHeight="20rem"
+      />,
+    );
+    const root = container.firstElementChild as HTMLElement;
+    expect(root).toHaveClass(P);
+    const wrapper = root.firstElementChild as HTMLElement;
+    expect(wrapper.style.maxHeight).toBe('20rem');
+    expect(container.querySelector('.text-label.text-ink3')).toHaveTextContent('0 / 0');
+  });
+
+  it('Table: column width + sortable=false header không button', () => {
+    render(
+      <Table
+        columns={[
+          { key: 'w', title: 'W', width: '30%', sortable: false },
+        ]}
+        dataSource={[{ id: '1', w: 'x' }]}
+        rowKey="id"
+      />,
+    );
+    expect(screen.getByText('W').closest('th')).toHaveStyle({ width: '30%' });
+    expect(screen.queryByRole('button', { name: /W/ })).toBeNull();
+  });
+
+
+  it('Table: loading + selection → skeleton có cột checkbox', () => {
+    const { container } = render(
+      <Table
+        columns={[{ key: 't', title: 'T' }]}
+        dataSource={[]}
+        rowKey="id"
+        loading
+        selectionMode="checkbox"
+      />,
+    );
+    expect(container.querySelectorAll('.h-4').length).toBeGreaterThan(0); // text skeleton (Table dùng variant text)
+  });
+
+  it('Radio đơn không children — vẫn render input', () => {
+    render(<Radio checked onChange={vi.fn()} />);
+    expect(screen.getByRole('radio')).toBeChecked();
+  });
+
+  it('Collapse không defaultActiveKeys + items rỗng → không panel', () => {
+    const { container } = render(<Collapse items={[]} className={P} />);
+    expect(container.firstElementChild).toHaveClass(P);
+  });
+
+  it('Typography.Text non-string children + copyable → copy String()', async () => {
+    const write = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(globalThis.navigator, 'clipboard', {
+      value: { writeText: write },
+      configurable: true,
+    });
+    render(
+      <Typography.Text copyable>
+        <span>node</span>
+      </Typography.Text>,
+    );
+    fireEvent.click(screen.getByTitle('Copy'));
+    expect(write).toHaveBeenCalledWith('node');
+    cleanup();
+  });
+});

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

@@ -0,0 +1,103 @@
+// Breadcrumb stories — items + href, last item renders as plain text.
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Breadcrumb } from './index';
+import { Icon } from '../icons/index';
+import { Segmented } from '../segmented/index';
+
+/** Hierarchy trail of links to the current page. */
+const meta = { title: 'Navigation/Breadcrumb', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  name: 'Basic — hrefs + last item plain',
+  render: () => (
+    <Breadcrumb
+      items={[
+        { title: 'Home', href: '#' },
+        { title: 'Projects', href: '#' },
+        { title: 'Task #42 detail' },
+      ]}
+    />
+  ),
+};
+
+export const WithIcons: Story = {
+  name: 'WithIcons — icons inside titles',
+  render: () => (
+    <Breadcrumb
+      items={[
+        {
+          title: (
+            <span className="flex items-center gap-1">
+              <Icon name="home" size={14} /> Home
+            </span>
+          ),
+          href: '#',
+        },
+        {
+          title: (
+            <span className="flex items-center gap-1">
+              <Icon name="check-circle" size={14} /> Workspace
+            </span>
+          ),
+          href: '#',
+        },
+        {
+          title: (
+            <span className="flex items-center gap-1">
+              <Icon name="calendar" size={14} /> Sprint 12
+            </span>
+          ),
+        },
+      ]}
+    />
+  ),
+};
+
+// ── Real-world usage (2026-10-25): list-page header with view switcher ──
+
+/** PageHeader — the classic list-page header: breadcrumb trail
+ * ("Bảng điều khiển / Dự án / <name>"), title + meta, and a Segmented view switcher
+ * (Table / List / Calendar). Swap the placeholder panel for the real view. */
+export const PageHeader: Story = {
+  name: 'Page header — breadcrumb + title + Segmented view switcher',
+  render: () => <PageHeaderDemo />,
+};
+
+function PageHeaderDemo() {
+  const [view, setView] = useState('table');
+  return (
+    <div className="flex w-full max-w-2xl flex-col gap-4">
+      <Breadcrumb
+        items={[
+          { title: 'Bảng điều khiển', href: '#' },
+          { title: 'Dự án', href: '#' },
+          { title: 'Aurora redesign' },
+        ]}
+      />
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div>
+          <h1 className="m-0 text-h2 font-semibold text-ink">{'Aurora redesign'}</h1>
+          <span className="text-meta text-ink3">{'24 tasks · 6 members · due Nov 14'}</span>
+        </div>
+        <Segmented
+          ariaLabel="Chế độ xem"
+          value={view}
+          onChange={setView}
+          options={[
+            { label: 'Bảng', value: 'table' },
+            { label: 'Danh sách', value: 'list' },
+            { label: 'Lịch', value: 'calendar' },
+          ]}
+        />
+      </div>
+      <div className="rounded-lg border border-line bg-s2 p-6 text-center text-meta text-ink3">
+        {'View: '}
+        <span className="font-medium text-ink">{view}</span>
+        {' — swap in the real table / list / calendar here.'}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,49 @@
+// Breadcrumb tests — items + separator + last plain + href link.
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Breadcrumb } from './index.js';
+
+afterEach(cleanup);
+
+describe('Breadcrumb', () => {
+  it('href → link; cuối → plain text không link; separator /', () => {
+    render(
+      <Breadcrumb
+        items={[
+          { title: 'Trang chủ', href: '/' },
+          { title: 'Tasks', href: '/tasks' },
+          { title: 'Task A' },
+        ]}
+      />,
+    );
+    expect(screen.getByRole('link', { name: 'Trang chủ' })).toHaveAttribute('href', '/');
+    expect(screen.getByText('Task A').tagName).toBe('SPAN');
+    expect(screen.getAllByText('/').length).toBe(2);
+  });
+});
+
+describe('Breadcrumb — branch phụ', () => {
+  it('item giữa KHÔNG href → plain span (không link)', () => {
+    render(
+      <Breadcrumb
+        items={[
+          { title: 'A', href: '/a' },
+          { title: 'B' },
+          { title: 'C', href: '/c' },
+          { title: 'D — hiện tại' },
+        ]}
+      />,
+    );
+    expect(screen.getByText('B').tagName).toBe('SPAN');
+    expect(screen.getByRole('link', { name: 'C' })).toBeInTheDocument();
+    expect(screen.getByText('D — hiện tại').tagName).toBe('SPAN');
+  });
+});
+
+describe('Breadcrumb — branch phụ (Tier 5 sweep)', () => {
+  it('separator aria-hidden giữa items', () => {
+    render(<Breadcrumb items={[{ title: 'A' }, { title: 'B' }]} />);
+    const sep = screen.getAllByText('/');
+    sep.forEach((s) => expect(s).toHaveAttribute('aria-hidden', 'true'));
+  });
+});

package/stack-template/app/ui-kit/src/ui/breadcrumb/index.tsx

@@ -0,0 +1,37 @@
+// Breadcrumb — nav phân cấp: items title + href tùy chọn; item cuối = hiện tại
+// (plain text, không link); separator '/'.
+import type { ReactNode } from 'react';
+
+export interface BreadcrumbItem {
+  title: ReactNode;
+  href?: string;
+}
+
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  className?: string;
+}
+
+export function Breadcrumb({ items, className }: BreadcrumbProps) {
+  return (
+    <nav aria-label="Breadcrumb" className={`text-body text-ink3${className ? ` ${className}` : ''}`}>
+      <ol className="m-0 flex list-none items-center gap-2 p-0">
+        {items.map((item, i) => {
+          const isLast = i === items.length - 1;
+          return (
+            <li key={i} className="flex items-center gap-2">
+              {isLast || !item.href ? (
+                <span className={isLast ? 'text-ink' : ''}>{item.title}</span>
+              ) : (
+                <a href={item.href} className="rounded-sm text-ink2 no-underline transition-colors hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40">
+                  {item.title}
+                </a>
+              )}
+              {!isLast && <span aria-hidden="true">/</span>}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

package/stack-template/app/ui-kit/src/ui/busy-box/busy-box.stories.tsx

@@ -0,0 +1,30 @@
+// Parity matrix antd→tokens: docs/parity-matrix.md
+// BusyBox stories — busy/idle toggle.
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../button/index';
+import { BusyBox } from './index';
+
+/** Compact busy indicator — spinner + label in one line. */
+const meta = { title: 'Primitives/BusyBox', component: BusyBox, tags: ['autodocs'] } satisfies Meta<typeof BusyBox>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function Demo() {
+  const [busy, setBusy] = useState(true);
+  return (
+    <div style={{ maxWidth: 480 }}>
+      <Button onClick={() => setBusy((b) => !b)}>Toggle busy</Button>
+      <div style={{ marginTop: 16 }}>
+        <BusyBox busy={busy} variant="row" count={3}>
+          <p>Nội dung đã tải — không skeleton.</p>
+        </BusyBox>
+      </div>
+    </div>
+  );
+}
+
+export const Toggle: Story = {
+  args: { busy: true, children: 'x' },
+  render: () => <Demo />,
+};

package/stack-template/app/ui-kit/src/ui/busy-box/busy-box.test.tsx

@@ -0,0 +1,29 @@
+// BusyBox tests — busy/idle switch + variant passthrough.
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { BusyBox } from './index.js';
+
+afterEach(cleanup);
+
+describe('BusyBox', () => {
+  it('busy=true → Skeleton thay content (aria-busy)', () => {
+    const { container } = render(
+      <BusyBox busy variant="card" count={2}>
+        <p>content</p>
+      </BusyBox>,
+    );
+    expect(screen.queryByText('content')).toBeNull();
+    expect(container.querySelector('[aria-busy="true"]')).not.toBeNull();
+    expect(container.querySelectorAll('.rounded-xl')).toHaveLength(2);
+  });
+
+  it('busy=false → content render, không skeleton', () => {
+    render(
+      <BusyBox busy={false}>
+        <p>content</p>
+      </BusyBox>,
+    );
+    expect(screen.getByText('content')).toBeInTheDocument();
+    expect(document.querySelector('[aria-busy="true"]')).toBeNull();
+  });
+});

package/stack-template/app/ui-kit/src/ui/busy-box/index.tsx

@@ -0,0 +1,25 @@
+// BusyBox — wrapper busy pattern (antd Spin-style, P1 roadmap leftovers):
+// busy=true → Skeleton (variant/count) thay nội dung; busy=false → render con.
+// Gọn hơn map thủ công loading → Skeleton lặp ở mọi page (TasksPage/ActivityPage cũ).
+import type { ReactNode } from 'react';
+import { Skeleton } from '../skeleton/index';
+
+export interface BusyBoxProps {
+  busy: boolean;
+  children: ReactNode;
+  /** Skeleton variant khi busy (mặc định row). */
+  variant?: 'text' | 'row' | 'card';
+  count?: number;
+  className?: string;
+}
+
+export function BusyBox({ busy, children, variant = 'row', count = 1, className }: BusyBoxProps) {
+  if (busy) {
+    return (
+      <div aria-busy="true" className={className}>
+        <Skeleton variant={variant} count={count} />
+      </div>
+    );
+  }
+  return <div className={className}>{children}</div>;
+}