create-wakii-stack 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,179 @@
+// Parity matrix antd→tokens: docs/parity-matrix.md
+// Grid stories — Row/Col 24-col: basic spans, gutter, responsive, justify/align, wrap/nested.
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../button/index';
+import { Col, Row } from './index';
+
+/** CSS-grid layout utility — columns, gap, span as props. */
+const meta = { title: 'Primitives/Grid', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function Box({ label, tall }: { label: string; tall?: boolean }) {
+  return (
+    <div
+      className={`grid place-items-center rounded-lg border border-line bg-s3 text-label text-ink2 ${tall ? 'h-20' : 'h-12'}`}
+    >
+      {label}
+    </div>
+  );
+}
+
+export const Basic: Story = {
+  name: 'Basic — 24-col spans',
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <Row>
+        <Col span={24}>
+          <Box label="span 24" />
+        </Col>
+      </Row>
+      <Row>
+        <Col span={12}>
+          <Box label="span 12" />
+        </Col>
+        <Col span={12}>
+          <Box label="span 12" />
+        </Col>
+      </Row>
+      <Row>
+        <Col span={8}>
+          <Box label="span 8" />
+        </Col>
+        <Col span={8}>
+          <Box label="span 8" />
+        </Col>
+        <Col span={8}>
+          <Box label="span 8" />
+        </Col>
+      </Row>
+      <Row>
+        <Col span={6}>
+          <Box label="span 6" />
+        </Col>
+        <Col span={6}>
+          <Box label="span 6" />
+        </Col>
+        <Col span={6}>
+          <Box label="span 6" />
+        </Col>
+        <Col span={6}>
+          <Box label="span 6" />
+        </Col>
+      </Row>
+    </div>
+  ),
+};
+
+export const Gutter: Story = {
+  name: 'Gutter — number vs [horizontal, vertical]',
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <Row gutter={16}>
+        <Col span={8}>
+          <Box label="gutter 16" />
+        </Col>
+        <Col span={8}>
+          <Box label="gutter 16" />
+        </Col>
+        <Col span={8}>
+          <Box label="gutter 16" />
+        </Col>
+      </Row>
+      <Row gutter={[8, 16]}>
+        <Col span={12}>
+          <Box label="[8, 16] — horizontal 8, vertical 16" />
+        </Col>
+        <Col span={12}>
+          <Box label="[8, 16] — horizontal 8, vertical 16" />
+        </Col>
+        <Col span={12}>
+          <Box label="[8, 16] — horizontal 8, vertical 16" />
+        </Col>
+        <Col span={12}>
+          <Box label="[8, 16] — horizontal 8, vertical 16" />
+        </Col>
+      </Row>
+    </div>
+  ),
+};
+
+export const Responsive: Story = {
+  name: 'Responsive — span → sm → md → lg → xl (resize the preview)',
+  render: () => (
+    <Row gutter={[8, 8]}>
+      <Col span={24} sm={12} md={8} lg={6} xl={4}>
+        <Box label="24 / sm 12 / md 8 / lg 6 / xl 4" />
+      </Col>
+      <Col span={24} sm={12} md={8} lg={6} xl={4}>
+        <Box label="24 / sm 12 / md 8 / lg 6 / xl 4" />
+      </Col>
+      <Col span={24} sm={24} md={8} lg={12} xl={16}>
+        <Box label="24 / sm 24 / md 8 / lg 12 / xl 16" />
+      </Col>
+    </Row>
+  ),
+};
+
+export const JustifyAlign: Story = {
+  name: 'Justify & align — distribution + cross axis',
+  render: () => (
+    <div className="flex flex-col gap-4">
+      {(['start', 'center', 'end', 'space-between'] as const).map((justify) => (
+        <Row key={justify} justify={justify} className="rounded-lg bg-s2 p-2">
+          <Col span={4}>
+            <Box label={justify} />
+          </Col>
+          <Col span={4}>
+            <Box label={justify} />
+          </Col>
+        </Row>
+      ))}
+      <Row align="center" className="rounded-lg bg-s2 p-2">
+        <Col span={6}>
+          <Box label="align center" tall />
+        </Col>
+        <Col span={6}>
+          <Box label="align center" />
+        </Col>
+      </Row>
+    </div>
+  ),
+};
+
+export const WrapAndNested: Story = {
+  name: 'Wrap & nested — col overflow wraps, Row inside Col',
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <Row gutter={[8, 8]}>
+        {Array.from({ length: 5 }, (_, i) => (
+          <Col key={i} span={6}>
+            <Box label={`span 6 #${i + 1} — 5 cols wrap to 2 rows`} />
+          </Col>
+        ))}
+      </Row>
+      <Row gutter={16}>
+        <Col span={12}>
+          <Box label="outer left" />
+          <Row gutter={[8, 8]} className="mt-2">
+            <Col span={12}>
+              <Box label="nested 12" />
+            </Col>
+            <Col span={12}>
+              <Box label="nested 12" />
+            </Col>
+          </Row>
+        </Col>
+        <Col span={12}>
+          <Box label="outer right" />
+          <div className="mt-2 flex gap-2">
+            <Button type="primary" size="small">
+              Action
+            </Button>
+            <Button size="small">Cancel</Button>
+          </div>
+        </Col>
+      </Row>
+    </div>
+  ),
+};

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

@@ -0,0 +1,286 @@
+// Grid tests — gutter (margin/padding/rowGap), span width %, justify/align/wrap,
+// responsive mobile-first qua matchMedia mock (kể cả reactive đổi breakpoint).
+import { act, cleanup, render } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Col, Row } from './index.js';
+
+type ChangeListener = (e: { matches: boolean; media: string }) => void;
+const restoreFns: (() => void)[] = [];
+
+/** Mock matchMedia điều khiển được: query nằm trong `active` mới matches; ghi lại
+ *  listener 'change' để test bắn sự kiện mô phỏng viewport đổi breakpoint. */
+function mockMatchMedia(active: string[]) {
+  const listeners = new Map<string, Set<ChangeListener>>();
+  const impl = (query: string) => ({
+    matches: active.includes(query),
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: (_: string, l: ChangeListener) => {
+      if (!listeners.has(query)) listeners.set(query, new Set());
+      listeners.get(query)!.add(l);
+    },
+    removeEventListener: (_: string, l: ChangeListener) => {
+      listeners.get(query)?.delete(l);
+    },
+    dispatchEvent: () => false,
+  });
+  const original = window.matchMedia;
+  window.matchMedia = impl as unknown as typeof window.matchMedia;
+  const restore = () => {
+    window.matchMedia = original;
+  };
+  restoreFns.push(restore);
+  return {
+    flip(query: string, matches: boolean) {
+      if (matches && !active.includes(query)) active.push(query);
+      if (!matches) {
+        const i = active.indexOf(query);
+        if (i >= 0) active.splice(i, 1);
+      }
+      act(() => {
+        listeners.get(query)?.forEach((l) => l({ matches, media: query } as MediaQueryListEvent));
+      });
+    },
+  };
+}
+
+afterEach(() => {
+  cleanup();
+  restoreFns.splice(0).forEach((fn) => fn());
+});
+
+describe('Row', () => {
+  it('gutter number → negative margin nửa gutter (không rowGap)', () => {
+    const { container } = render(
+      <Row gutter={16}>
+        <Col span={12}>a</Col>
+      </Row>,
+    );
+    const row = container.firstElementChild!;
+    expect(row.getAttribute('style')).toContain('margin-left: -8px');
+    expect(row.getAttribute('style')).toContain('margin-right: -8px');
+    expect(row.getAttribute('style')).not.toContain('row-gap');
+    expect(row).toHaveClass('flex', 'flex-wrap'); // wrap mặc định bật như antd
+  });
+
+  it('gutter [8, 24] → margin -4px + rowGap 24; Col nhận padding nửa gutter ngang', () => {
+    const { container } = render(
+      <Row gutter={[8, 24]}>
+        <Col span={12}>a</Col>
+      </Row>,
+    );
+    const row = container.firstElementChild!;
+    expect(row.getAttribute('style')).toContain('margin-left: -4px');
+    expect(row.getAttribute('style')).toContain('row-gap: 24px');
+    const col = row.firstElementChild!;
+    expect(col.getAttribute('style')).toContain('padding-left: 4px');
+    expect(col.getAttribute('style')).toContain('padding-right: 4px');
+  });
+
+  it('không gutter → không margin/padding (branch 0)', () => {
+    const { container } = render(
+      <Row>
+        <Col span={12}>a</Col>
+      </Row>,
+    );
+    const row = container.firstElementChild!;
+    expect(row.getAttribute('style') ?? '').not.toContain('margin');
+    expect(row.firstElementChild!.getAttribute('style') ?? '').not.toContain('padding');
+  });
+
+  it('justify + align → justify-content / align-items inline', () => {
+    const { container } = render(
+      <Row justify="space-between" align="center">
+        <Col span={6}>a</Col>
+        <Col span={6}>b</Col>
+      </Row>,
+    );
+    const style = container.firstElementChild!.getAttribute('style')!;
+    expect(style).toContain('justify-content: space-between');
+    expect(style).toContain('align-items: center');
+  });
+
+  it('không justify/align → style không chứa 2 thuộc tính đó', () => {
+    const { container } = render(
+      <Row>
+        <Col span={6}>a</Col>
+      </Row>,
+    );
+    const style = container.firstElementChild!.getAttribute('style') ?? '';
+    expect(style).not.toContain('justify-content');
+    expect(style).not.toContain('align-items');
+  });
+
+  it('wrap={false} → flex-nowrap thay flex-wrap', () => {
+    const { container } = render(
+      <Row wrap={false}>
+        <Col span={6}>a</Col>
+      </Row>,
+    );
+    expect(container.firstElementChild).toHaveClass('flex-nowrap');
+    expect(container.firstElementChild).not.toHaveClass('flex-wrap');
+  });
+});
+
+describe('Col', () => {
+  it.each([
+    [8, '33.3333'],
+    [12, '50%'],
+    [24, '100%'],
+  ] as const)('span %i → width %s', (span, width) => {
+    const { container } = render(
+      <Row>
+        <Col span={span}>a</Col>
+      </Row>,
+    );
+    expect(container.firstElementChild!.firstElementChild!.getAttribute('style')).toContain(
+      `width: ${width}`,
+    );
+  });
+
+  it('span ngoài 0–24 → clamp (30→100%, âm→0%)', () => {
+    const { container, rerender } = render(
+      <Row>
+        <Col span={30}>a</Col>
+      </Row>,
+    );
+    expect(container.firstElementChild!.firstElementChild!.getAttribute('style')).toContain(
+      'width: 100%',
+    );
+    rerender(
+      <Row>
+        <Col span={-5}>a</Col>
+      </Row>,
+    );
+    expect(container.firstElementChild!.firstElementChild!.getAttribute('style')).toContain(
+      'width: 0%',
+    );
+  });
+
+  it('không span và không responsive → không width (col co theo nội dung)', () => {
+    const { container } = render(
+      <Row>
+        <Col>a</Col>
+      </Row>,
+    );
+    expect(container.firstElementChild!.firstElementChild!.getAttribute('style')).not.toContain(
+      'width',
+    );
+  });
+
+  it('className + children truyền thẳng; className={undefined} không vỡ', () => {
+    const { container } = render(
+      <Row>
+        <Col span={12} className="text-ink2">
+          <span>body</span>
+        </Col>
+      </Row>,
+    );
+    const col = container.firstElementChild!.firstElementChild!;
+    expect(col).toHaveClass('text-ink2');
+    expect(col.textContent).toBe('body');
+  });
+});
+
+describe('Col — responsive qua matchMedia (mobile-first cascade)', () => {
+  it('không breakpoint nào match → dùng span base', () => {
+    mockMatchMedia([]);
+    const { container } = render(
+      <Row>
+        <Col span={24} md={8}>
+          a
+        </Col>
+      </Row>,
+    );
+    expect(container.firstElementChild!.firstElementChild!.getAttribute('style')).toContain(
+      'width: 100%',
+    );
+  });
+
+  it('md match → md thắng span (8/24); bậc cao hơn không match giữ md', () => {
+    mockMatchMedia(['(min-width: 768px)']);
+    const { container } = render(
+      <Row>
+        <Col span={24} md={8} xl={6}>
+          a
+        </Col>
+      </Row>,
+    );
+    expect(container.firstElementChild!.firstElementChild!.getAttribute('style')).toContain(
+      `width: ${(8 / 24) * 100}%`,
+    );
+  });
+
+  it('breakpoint match nhưng không khai báo span bậc đó → kế thừa bậc dưới', () => {
+    mockMatchMedia(['(min-width: 640px)', '(min-width: 768px)', '(min-width: 1024px)', '(min-width: 1280px)']);
+    const { container } = render(
+      <Row>
+        <Col span={12}>a</Col>
+      </Row>,
+    );
+    expect(container.firstElementChild!.firstElementChild!.getAttribute('style')).toContain(
+      'width: 50%',
+    );
+  });
+
+  it('xs ghi đè span ở bậc base; sm match lại thắng xs', () => {
+    const mm = mockMatchMedia([]);
+    const { container, rerender } = render(
+      <Row>
+        <Col span={12} xs={24} sm={6}>
+          a
+        </Col>
+      </Row>,
+    );
+    expect(container.firstElementChild!.firstElementChild!.getAttribute('style')).toContain(
+      'width: 100%',
+    );
+    mm.flip('(min-width: 640px)', true);
+    expect(container.firstElementChild!.firstElementChild!.getAttribute('style')).toContain(
+      'width: 25%',
+    );
+    rerender(
+      <Row>
+        <Col span={12} xs={24} sm={6}>
+          a
+        </Col>
+      </Row>,
+    );
+    expect(container.firstElementChild!.firstElementChild!.getAttribute('style')).toContain(
+      'width: 25%',
+    );
+  });
+
+  it('viewport đổi breakpoint thật (change event) → width đổi reactive', () => {
+    const mm = mockMatchMedia([]);
+    const { container } = render(
+      <Row>
+        <Col span={24} lg={12}>
+          a
+        </Col>
+      </Row>,
+    );
+    const col = () => container.firstElementChild!.firstElementChild!;
+    expect(col().getAttribute('style')).toContain('width: 100%');
+    mm.flip('(min-width: 1024px)', true); // xoay ngang / mở rộng cửa sổ
+    expect(col().getAttribute('style')).toContain('width: 50%');
+    mm.flip('(min-width: 1024px)', false); // thu lại → về span base
+    expect(col().getAttribute('style')).toContain('width: 100%');
+  });
+
+  it('tất cả breakpoint match → bậc cao nhất (xl) thắng', () => {
+    mockMatchMedia(['(min-width: 640px)', '(min-width: 768px)', '(min-width: 1024px)', '(min-width: 1280px)']);
+    const { container } = render(
+      <Row>
+        <Col span={24} sm={12} md={8} lg={6} xl={4}>
+          a
+        </Col>
+      </Row>,
+    );
+    expect(container.firstElementChild!.firstElementChild!.getAttribute('style')).toContain(
+      `width: ${(4 / 24) * 100}%`,
+    );
+  });
+});

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

@@ -0,0 +1,104 @@
+// Grid — layout 24-col kiểu antd: <Row gutter={[8, 8]}> + <Col span={12} md={8}>.
+// Mechanic antd: Row flex + negative margin nửa gutter ngang, Col padding nửa gutter;
+// gutter dọc chảy qua rowGap trên Row (cùng hiệu ứng antd, không cần padding-top col).
+// Responsive: resolve mobile-first (xs→xl) qua useMediaQuery (matchMedia) — antd
+// responsiveObserve cũng chạy matchMedia. Breakpoint dùng thang Tailwind v4 đang
+// active trong repo (sm 640 / md 768 / lg 1024 / xl 1280) — tokens.css không có
+// token --screen nên KHÔNG tự chế thang mới.
+import { createContext, useContext, type CSSProperties, type ReactNode } from 'react';
+import { useMediaQuery } from '../../hooks/useMediaQuery.js';
+
+export type GridBreakpoint = 'sm' | 'md' | 'lg' | 'xl';
+
+/** Trùng thang breakpoint mặc định của Tailwind v4 (theme.css). */
+const BREAKPOINTS: Record<GridBreakpoint, number> = { sm: 640, md: 768, lg: 1024, xl: 1280 };
+
+/** Gutter Row đang chảy xuống Col qua context (padding nửa gutter ngang). */
+interface GutterValue {
+  h: number;
+  v: number;
+}
+const GutterContext = createContext<GutterValue>({ h: 0, v: 0 });
+
+export type RowJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+export type RowAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+
+export interface RowProps {
+  /** Khoảng cách giữa col: số (ngang) hoặc [ngang, dọc] px (antd gutter). */
+  gutter?: number | [number, number];
+  /** Phân bố col theo chiều ngang (justify-content). */
+  justify?: RowJustify;
+  /** Căn col theo chiều dọc (align-items). */
+  align?: RowAlign;
+  /** Cho col xuống hàng khi tràn 24 — mặc định bật như antd. */
+  wrap?: boolean;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Row({ gutter, justify, align, wrap = true, children, className }: RowProps) {
+  const [h, v] = Array.isArray(gutter) ? gutter : gutter != null ? [gutter, 0] : [0, 0];
+  return (
+    <GutterContext.Provider value={{ h, v }}>
+      <div
+        className={`flex${wrap ? ' flex-wrap' : ' flex-nowrap'}${className ? ` ${className}` : ''}`}
+        style={{
+          marginLeft: h ? -(h / 2) : undefined,
+          marginRight: h ? -(h / 2) : undefined,
+          rowGap: v || undefined,
+          justifyContent: justify,
+          alignItems: align,
+        }}
+      >
+        {children}
+      </div>
+    </GutterContext.Provider>
+  );
+}
+
+export interface ColProps {
+  /** Chiếm n/24 bề ngang (1–24) — bậc base khi không có breakpoint nào match. */
+  span?: number;
+  /** Span theo breakpoint (mobile-first: bậc match cao nhất thắng, kế thừa bậc dưới — giống antd). */
+  xs?: number;
+  sm?: number;
+  md?: number;
+  lg?: number;
+  xl?: number;
+  children?: ReactNode;
+  className?: string;
+}
+
+/** Clamp span về 0–24 rồi đổi ra width % (flex-basis auto → ăn width). */
+function spanWidth(span: number | undefined): string | undefined {
+  if (span == null) return undefined;
+  const n = Math.min(24, Math.max(0, span));
+  return `${(n / 24) * 100}%`;
+}
+
+export function Col({ span, xs, sm, md, lg, xl, children, className }: ColProps) {
+  const { h } = useContext(GutterContext);
+  const smOn = useMediaQuery(`(min-width: ${BREAKPOINTS.sm}px)`);
+  const mdOn = useMediaQuery(`(min-width: ${BREAKPOINTS.md}px)`);
+  const lgOn = useMediaQuery(`(min-width: ${BREAKPOINTS.lg}px)`);
+  const xlOn = useMediaQuery(`(min-width: ${BREAKPOINTS.xl}px)`);
+  // Cascade mobile-first: bậc cao match thì ghi đè, không match giữ nguyên bậc dưới.
+  let eff: number | undefined = xs ?? span;
+  if (smOn) eff = sm ?? eff;
+  if (mdOn) eff = md ?? eff;
+  if (lgOn) eff = lg ?? eff;
+  if (xlOn) eff = xl ?? eff;
+
+  const style: CSSProperties = { flex: '0 0 auto' };
+  const width = spanWidth(eff);
+  if (width !== undefined) style.width = width;
+  if (h) {
+    style.paddingLeft = h / 2;
+    style.paddingRight = h / 2;
+  }
+  return (
+    <div className={className} style={style}>
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,52 @@
+// icons.stories.tsx — section Primitives/Icons: lưới TẤT CẢ icon + size variants.
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Icon, ICON_NAMES } from './index';
+
+/** Primeicons-based icon set — 48 names, one `<Icon name size>` API. */
+const meta = { title: 'Primitives/Icons', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type S = StoryObj<typeof meta>;
+
+export const AllIcons: S = {
+  name: 'All icons (48)',
+  render: () => (
+    <div className="grid grid-cols-8 gap-2">
+      {ICON_NAMES.map((name) => (
+        <div key={name} className="flex flex-col items-center gap-1 rounded-lg border border-line bg-s2 p-2">
+          <Icon name={name} size={20} className="text-ink" />
+          <span className="text-[10px] text-ink2">{name}</span>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const IconSizes: S = {
+  name: 'Size variants — 12 → 32',
+  render: () => (
+    <div className="flex items-end gap-4">
+      {[12, 14, 16, 20, 24, 32].map((size) => (
+        <div key={size} className="flex flex-col items-center gap-1">
+          <Icon name="settings" size={size} className="text-ink" />
+          <span className="text-meta text-ink3">{size}px</span>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const DarkTheme: S = {
+  name: 'Dark theme',
+  render: () => (
+    <div data-bp-theme="dark" className="rounded-xl bg-canvas p-4">
+      <div className="grid grid-cols-8 gap-2">
+        {ICON_NAMES.map((name) => (
+          <div key={name} className="flex flex-col items-center gap-1 rounded-lg border border-line bg-s2 p-2">
+            <Icon name={name} size={20} className="text-ink" />
+            <span className="text-[10px] text-ink2">{name}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+};

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

@@ -0,0 +1,60 @@
+// Icon tests — render theo name (svg + aria-hidden), size, className merge,
+// fill currentColor, icon lạ → fallback help-circle, smoke cả bộ ICON_NAMES.
+import { cleanup, render } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Icon, ICON_NAMES, type IconName } from './index.js';
+
+afterEach(cleanup);
+
+describe('Icon', () => {
+  it('render theo name — svg tồn tại + viewBox 24 + aria-hidden mặc định true', () => {
+    const { container } = render(<Icon name="search" />);
+    const svg = container.querySelector('svg');
+    expect(svg).not.toBeNull();
+    expect(svg).toHaveAttribute('viewBox', '0 0 24 24');
+    expect(svg).toHaveAttribute('aria-hidden', 'true');
+    expect(svg?.querySelectorAll('path').length).toBeGreaterThan(0);
+  });
+
+  it('aria-hidden=false override được (icon có nghĩa đứng một mình)', () => {
+    const { container } = render(<Icon name="check" aria-hidden={false} />);
+    expect(container.querySelector('svg')).toHaveAttribute('aria-hidden', 'false');
+  });
+
+  it('size prop đổi width/height — default 14', () => {
+    const { container, rerender } = render(<Icon name="check" />);
+    expect(container.querySelector('svg')).toHaveAttribute('width', '14');
+    expect(container.querySelector('svg')).toHaveAttribute('height', '14');
+    rerender(<Icon name="check" size={24} />);
+    expect(container.querySelector('svg')).toHaveAttribute('width', '24');
+    expect(container.querySelector('svg')).toHaveAttribute('height', '24');
+  });
+
+  it('className merge lên svg', () => {
+    const { container } = render(<Icon name="plus" className="text-accent shrink-0" />);
+    expect(container.querySelector('svg')).toHaveClass('text-accent', 'shrink-0');
+  });
+
+  it('fill currentColor — kế thừa màu text cha', () => {
+    const { container } = render(<Icon name="star" />);
+    expect(container.querySelector('svg')).toHaveAttribute('fill', 'currentColor');
+  });
+
+  it('icon lạ (cast runtime) → fallback help-circle, không crash', () => {
+    const bad = render(<Icon name={'khong-ton-tai' as IconName} />);
+    const ref = render(<Icon name="help-circle" />);
+    const badD = bad.container.querySelector('path')!.getAttribute('d');
+    expect(badD).toBeTruthy();
+    expect(ref.container.querySelector('path')!.getAttribute('d')).toBe(badD);
+  });
+
+  it('ICON_NAMES đủ 52 + render được cả bộ (smoke, gồm multi-path như check-circle/users/trash)', () => {
+    expect(ICON_NAMES).toHaveLength(52);
+    for (const name of ICON_NAMES) {
+      const { container, unmount } = render(<Icon name={name} />);
+      const svg = container.querySelector('svg');
+      expect(svg?.querySelectorAll('path').length).toBeGreaterThan(0);
+      unmount();
+    }
+  });
+});