create-wakii-stack 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,90 @@
+// Progress tests — width %, status colors, showInfo, aria attrs, clamp bounds, className.
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Progress } from './index.js';
+
+afterEach(cleanup);
+
+const barOf = (container: HTMLElement) =>
+  container.querySelector('[role="progressbar"] > div') as HTMLElement;
+
+describe('Progress', () => {
+  it('percent → bar width + aria-valuenow + info text', () => {
+    render(<Progress percent={42} />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '42');
+    expect(screen.getByText('42%')).toBeInTheDocument();
+  });
+
+  it('aria-valuemin/max = 0/100', () => {
+    render(<Progress percent={50} />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuemin', '0');
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuemax', '100');
+  });
+
+  it('100% → màu success; exception → đỏ', () => {
+    const { rerender } = render(<Progress percent={100} />);
+    expect(screen.getByText('100%')).toHaveClass('text-ink');
+    rerender(<Progress percent={30} status="exception" />);
+    expect(screen.getByText('30%')).toHaveClass('text-st-fail');
+  });
+
+  it('showInfo=false → ẩn %', () => {
+    render(<Progress percent={50} showInfo={false} />);
+    expect(screen.queryByText('50%')).toBeNull();
+  });
+
+  it('status success tường minh → bar xanh (dù <100%)', () => {
+    const { container } = render(<Progress percent={80} status="success" />);
+    expect(barOf(container).style.background).toBe('var(--st-done)');
+  });
+
+  it('bar màu accent mặc định', () => {
+    const { container } = render(<Progress percent={25} />);
+    expect(barOf(container).style.background).toBe('var(--accent)');
+  });
+
+  it('edge clamp: âm → 0, >100 → 100 (aria + width + text)', () => {
+    const { rerender, container } = render(<Progress percent={-5} />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '0');
+    expect(barOf(container).style.width).toBe('0%');
+    rerender(<Progress percent={150} />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '100');
+    expect(screen.getByText('100%')).toBeInTheDocument();
+    expect(barOf(container).style.width).toBe('100%');
+  });
+
+  it('bar width theo percent + màu exception trên bar', () => {
+    const { container } = render(<Progress percent={75} status="exception" />);
+    expect(barOf(container).style.width).toBe('75%');
+    expect(barOf(container).style.background).toBe('var(--st-fail)');
+  });
+
+  it('transition 200ms theo style matrix (không quá 200ms)', () => {
+    const { container } = render(<Progress percent={10} />);
+    expect(barOf(container).className).toContain('duration-200');
+  });
+
+  it('className passthrough', () => {
+    render(<Progress percent={10} className="w-40" />);
+    expect(screen.getByRole('progressbar').parentElement).toHaveClass('w-40');
+  });
+});
+
+describe('Progress — indeterminate (motion waves)', () => {
+  it('indeterminate → không aria-valuenow, ẩn % text, bar chạy vô hạn w-2/5', () => {
+    render(<Progress indeterminate />);
+    const bar = screen.getByRole('progressbar');
+    expect(bar).not.toHaveAttribute('aria-valuenow');
+    expect(screen.queryByText(/%/)).toBeNull();
+    const fill = bar.firstElementChild as HTMLElement;
+    expect(fill.className).toContain('animate-[bp-indeterminate_1.4s_ease-in-out_infinite]');
+    expect(fill.className).toContain('motion-reduce:animate-none');
+    expect(fill.style.width).toBe(''); // width do class, không inline (khác determinate)
+  });
+
+  it('determinate vẫn giữ aria-valuenow + % (không hồi quy)', () => {
+    render(<Progress percent={60} />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '60');
+    expect(screen.getByText('60%')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,88 @@
+// QRCode — antd parity (docs/parity-matrix.md Gap P1): SVG QR cho link thanh toán
+// / chia sẻ. Thuật toán: qrcode-generator v1.4.4 (MIT, Kazuhiko Arase) vendored
+// single-file không deps runtime — xem `qrcode-generator.vendor.ts`. Render SVG
+// (sắc nét mọi size, không canvas blur). errorLevel L/M/Q/H (mặc định M như antd).
+// Màu mặc định tokens-only: fg = var(--ink), bg = var(--c-s1) — tự cascade dark.
+// Icon giữa (antd excavate mode — R10): `icon?: ReactNode` → khung nền punch-out
+// (absolute, cùng màu bgColor) đè vùng trung tâm + icon flex center; matrix GIỮ
+// NGUYÊN (scanner đọc vòng ngoài nhờ error correction) — khi có icon mà user không
+// truyền errorLevel thì tự nâng lên **H** (~30% sửa lỗi, đủ bù che khuất như antd).
+// A11y: role="img" + aria-label theo value; SVG không dùng id/defs → không thể
+// trùng id khi 2 QR cùng trang (lỗi phổ biến của QR svg dùng gradient/clipPath).
+import { useMemo, type ReactNode } from 'react';
+import { makeQrMatrix, matrixToPath, type QrErrorLevel } from './qrcode-core.js';
+
+export interface QRCodeProps {
+  /** Nội dung mã hoá (URL, token thanh toán…). */
+  value: string;
+  /** Kích thước cạnh (px) — mặc định 160 như antd. */
+  size?: number;
+  /** Mức sửa lỗi — L ≈7% · M ≈15% (default) · Q ≈25% · H ≈30%. Có `icon` mà không
+   * truyền → tự nâng H (excavate giữa cần nhiều dư thừa hơn). */
+  errorLevel?: QrErrorLevel;
+  /** Màu nền (CSS color/token) — mặc định var(--c-s1). */
+  bgColor?: string;
+  /** Màu module (CSS color/token) — mặc định var(--ink). */
+  fgColor?: string;
+  /** Icon giữa kiểu antd (excavate mode) — khung nền punch-out + node flex center.
+   * Khuyên dùng icon đơn giản ≥24px (logo/Icon bộ kit). Decorative: aria-hidden. */
+  icon?: ReactNode;
+  /** aria-label override — mặc định `QR code for <value>`. */
+  title?: string;
+  className?: string;
+}
+
+const QUIET_ZONE = 2; // module viền trắng quanh mã (đủ để scanner tách khỏi nền)
+
+export function QRCode({
+  value,
+  size = 160,
+  errorLevel,
+  bgColor = 'var(--c-s1)',
+  fgColor = 'var(--ink)',
+  icon,
+  title,
+  className,
+}: QRCodeProps) {
+  // icon mà không truyền level → H (antd excavate parity); có level → respect user
+  const level: QrErrorLevel = icon && errorLevel === undefined ? 'H' : errorLevel ?? 'M';
+  const { path, count } = useMemo(
+    () => {
+      const m = makeQrMatrix(value, level);
+      return { path: matrixToPath(m), count: m.count };
+    },
+    [value, level],
+  );
+  const side = count + QUIET_ZONE * 2;
+
+  return (
+    <span
+      className={`relative inline-block${className ? ` ${className}` : ''}`}
+      style={{ width: size, height: size }}
+    >
+      <svg
+        role="img"
+        aria-label={title ?? `QR code for ${value}`}
+        width={size}
+        height={size}
+        viewBox={`0 0 ${side} ${side}`}
+        style={{ display: 'block' }}
+      >
+        <rect width={side} height={side} fill={bgColor} />
+        {/* shape-rendering crispEdges — module không răng cưa half-pixel */}
+        <path d={path} fill={fgColor} transform={`translate(${QUIET_ZONE} ${QUIET_ZONE})`} shapeRendering="crispEdges" />
+      </svg>
+      {icon && (
+        // Punch-out khung giữa: nền = bgColor (đồng bộ " excavate"), ~1/4 cạnh,
+        // radius nhẹ, icon nằm bên trong — decorative (aria-hidden).
+        <span
+          aria-hidden="true"
+          className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center overflow-hidden rounded-md p-[4%]"
+          style={{ width: '25%', height: '25%', background: bgColor, color: fgColor }}
+        >
+          {icon}
+        </span>
+      )}
+    </span>
+  );
+}

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

@@ -0,0 +1,109 @@
+// QRCode stories — antd parity (docs/parity-matrix.md Gap P1).
+// Matrix: basic · with-size · error-levels · value-change demo · dark theme (tokens).
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { Icon, QRCode } from '../../index';
+
+const meta = {
+  title: 'Data Display/QRCode',
+  component: QRCode,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'number' },
+    errorLevel: { control: 'select', options: ['L', 'M', 'Q', 'H'] },
+    value: { control: 'text' },
+  },
+} satisfies Meta<typeof QRCode>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Basic — default size 160, errorLevel M, token colors (fg ink / bg s1). */
+export const Basic: Story = {
+  args: { value: 'https://demo.local/tasks/42' },
+};
+
+/** WithSize — 64 / 96 / 160 / 240 px on one row. */
+export const WithSize: Story = {
+  args: { value: 'https://demo.local' },
+  render: () => (
+    <div className="flex flex-wrap items-end gap-6">
+      {[64, 96, 160, 240].map((s) => (
+        <figure key={s} className="grid gap-2">
+          <QRCode value="https://demo.local" size={s} />
+          <figcaption className="text-center text-label text-ink3">{s}px</figcaption>
+        </figure>
+      ))}
+    </div>
+  ),
+};
+
+/** ErrorLevels — same value encoded at L / M / Q / H (higher level = denser matrix). */
+export const ErrorLevels: Story = {
+  args: { value: 'https://demo.local' },
+  render: () => (
+    <div className="flex flex-wrap items-end gap-6">
+      {(['L', 'M', 'Q', 'H'] as const).map((lvl) => (
+        <figure key={lvl} className="grid gap-2">
+          <QRCode value="https://demo.local" errorLevel={lvl} size={120} />
+          <figcaption className="text-center text-label text-ink3">
+            level {lvl}
+          </figcaption>
+        </figure>
+      ))}
+    </div>
+  ),
+};
+
+/** ValueChange — type any text (Vietnamese included); the matrix re-encodes live. */
+export const ValueChange: Story = {
+  args: { value: 'https://demo.local' },
+  render: () => <ValueChangeDemo />,
+};
+
+function ValueChangeDemo() {
+  const [value, setValue] = useState('https://demo.local/pay/abc?amount=250000');
+  return (
+    <div className="flex items-start gap-6">
+      <QRCode value={value} size={180} />
+      <label className="grid gap-2 text-label text-ink2">
+        Encoded value
+        <textarea
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          rows={3}
+          className="w-72 rounded-lg border border-line bg-s2 px-3 py-2 text-body text-ink outline-none focus:border-accent-hi"
+        />
+        <span className="text-ink3">{value.length} chars → auto version pick</span>
+      </label>
+    </div>
+  );
+}
+
+/** WithIcon — antd excavate mode: white punch-out frame + centered icon; error level auto-raises to H (or pass your own). */
+export const WithIcon: Story = {
+  args: { value: 'https://demo.local' },
+  render: () => (
+    <div className="flex flex-wrap items-end gap-6">
+      <figure className="grid gap-2">
+        <QRCode value="https://demo.local/pay/abc" size={140} icon={<Icon name="star" size={22} className="text-ink" />} />
+        <figcaption className="text-center text-label text-ink3">auto level H</figcaption>
+      </figure>
+      <figure className="grid gap-2">
+        <QRCode value="https://demo.local/pay/abc" size={140} errorLevel="Q" icon={<span className="text-body font-bold">₫</span>} />
+        <figcaption className="text-center text-label text-ink3">explicit level Q</figcaption>
+      </figure>
+    </div>
+  ),
+};
+
+/** CustomColors — override via props (defaults are tokens: ink on s1). */
+export const CustomColors: Story = {
+  args: { value: 'https://demo.local' },
+  render: () => (
+    <div className="flex flex-wrap gap-6">
+      <QRCode value="https://demo.local" bgColor="var(--accent)" fgColor="var(--c-s1)" size={120} />
+      <QRCode value="https://demo.local" bgColor="var(--ink)" fgColor="var(--c-s1)" size={120} />
+    </div>
+  ),
+};

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

@@ -0,0 +1,155 @@
+// QRCode tests — core matrix (cấu trúc spec QR: finder/timing/deterministic +
+// UTF-8) và component SVG (render theo value, size, errorLevel, aria, không id).
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { QRCode } from './index.js';
+import { makeQrMatrix, matrixToPath } from './qrcode-core.js';
+
+afterEach(cleanup);
+
+describe('QRCode — core matrix (spec QR)', () => {
+  it("'A' level M → version 1 (21×21), finder patterns ở 3 góc", () => {
+    const m = makeQrMatrix('A', 'M');
+    expect(m.count).toBe(21); // 4×1 + 17
+    // finder = viền 7×7 đậm tại top-left, top-right, bottom-left
+    for (const [r, c] of [[0, 0], [0, 20], [20, 0]] as const) {
+      expect(m.isDark(r, c)).toBe(true);
+    }
+    // separator ngay ngoài finder phải SÁNG
+    expect(m.isDark(7, 7)).toBe(false);
+    expect(m.isDark(7, 13)).toBe(false);
+  });
+
+  it('timing pattern row/col 6 đậm–sáng xen kẽ', () => {
+    const m = makeQrMatrix('https://demo.local/tasks', 'Q');
+    for (let c = 8; c < m.count - 8; c += 2) {
+      expect(m.isDark(6, c)).toBe(true);
+      expect(m.isDark(6, c + 1)).toBe(false);
+    }
+    for (let r = 8; r < m.count - 8; r += 2) {
+      expect(m.isDark(r, 6)).toBe(true);
+      expect(m.isDark(r + 1, 6)).toBe(false);
+    }
+  });
+
+  it('deterministic: cùng value + level → cùng matrix; khác level → khác mật độ EC', () => {
+    const a = matrixToPath(makeQrMatrix('hello', 'L'));
+    const b = matrixToPath(makeQrMatrix('hello', 'L'));
+    expect(a).toBe(b);
+    // H sửa lỗi nhiều hơn → data giãn ra, matrix nhiều module khác L (không assert
+    // chiều, chỉ assert khác nhau — bảo vệ regress đổi nhầm level mapping)
+    expect(matrixToPath(makeQrMatrix('hello', 'H'))).not.toBe(a);
+  });
+
+  it('UTF-8: text tiếng Việt có dấu mã hoá được (không crash, khác ASCII)', () => {
+    const m = makeQrMatrix('Thanh toán đơn hàng #123', 'M');
+    expect(m.count).toBeGreaterThan(21);
+    expect(matrixToPath(m)).toMatch(/^M\d+ \d+h1v1h-1z/);
+  });
+});
+
+describe('QRCode — component SVG', () => {
+  it('render svg với data: role=img + aria-label theo value + path module đậm', () => {
+    render(<QRCode value="https://demo.local/pay/abc" />);
+    const svg = screen.getByRole('img', { name: 'QR code for https://demo.local/pay/abc' });
+    expect(svg.tagName).toBe('svg');
+    const path = svg.querySelector('path')!;
+    expect(path.getAttribute('d')!.length).toBeGreaterThan(100); // nhiều module đậm
+  });
+
+  it('value đổi → matrix đổi (path d khác)', () => {
+    const { rerender } = render(<QRCode value="first-value" />);
+    const d1 = screen.getByRole('img').querySelector('path')!.getAttribute('d');
+    rerender(<QRCode value="second-value" />);
+    const d2 = screen.getByRole('img').querySelector('path')!.getAttribute('d');
+    expect(d1).not.toBe(d2);
+  });
+
+  it('size prop reflect vào width/height svg', () => {
+    const { rerender } = render(<QRCode value="s" size={96} />);
+    let svg = screen.getByRole('img');
+    expect(svg).toHaveAttribute('width', '96');
+    expect(svg).toHaveAttribute('height', '96');
+    rerender(<QRCode value="s" size={240} />);
+    svg = screen.getByRole('img');
+    expect(svg).toHaveAttribute('width', '240');
+  });
+
+  it('errorLevel L/M/Q/H đều nhận (render không lỗi, deterministic theo level)', () => {
+    for (const level of ['L', 'M', 'Q', 'H'] as const) {
+      const { unmount } = render(<QRCode value={`level-${level}`} errorLevel={level} />);
+      expect(screen.getByRole('img', { name: `QR code for level-${level}` })).toBeInTheDocument();
+      unmount();
+    }
+  });
+
+  it('aria unique theo value; SVG không sinh id → 2 instance không đụng id', () => {
+    render(
+      <div>
+        <QRCode value="alpha" />
+        <QRCode value="beta" />
+      </div>,
+    );
+    expect(screen.getByRole('img', { name: 'QR code for alpha' })).toBeInTheDocument();
+    expect(screen.getByRole('img', { name: 'QR code for beta' })).toBeInTheDocument();
+    const ids = document.querySelectorAll('[id]');
+    expect(ids).toHaveLength(0); // không id → không thể trùng
+  });
+
+  it('tokens màu mặc định: bg var(--c-s1), fg var(--ink); override được qua props', () => {
+    const { rerender } = render(<QRCode value="c" />);
+    let svg = screen.getByRole('img');
+    expect(svg.querySelector('rect')!.getAttribute('fill')).toBe('var(--c-s1)');
+    expect(svg.querySelector('path')!.getAttribute('fill')).toBe('var(--ink)');
+    rerender(<QRCode value="c" bgColor="#fff" fgColor="#000" />);
+    svg = screen.getByRole('img');
+    expect(svg.querySelector('rect')!.getAttribute('fill')).toBe('#fff');
+    expect(svg.querySelector('path')!.getAttribute('fill')).toBe('#000');
+  });
+
+  it('title override aria-label', () => {
+    render(<QRCode value="x" title="Mã thanh toán" />);
+    expect(screen.getByRole('img', { name: 'Mã thanh toán' })).toBeInTheDocument();
+  });
+});
+
+describe('QRCode — icon giữa (antd excavate mode, R10)', () => {
+  it('icon render trong khung punch-out giữa, role=img vẫn đúng aria', () => {
+    render(<QRCode value="https://demo.local/pay" icon={<span data-testid="logo">★</span>} />);
+    const svg = screen.getByRole('img', { name: 'QR code for https://demo.local/pay' });
+    const frame = svg.parentElement!.querySelector('span[aria-hidden="true"]')!;
+    expect(frame).toBeInTheDocument();
+    expect(frame.querySelector('[data-testid="logo"]')).not.toBeNull();
+  });
+
+  it('khung trắng punch-out: nền = bgColor, ~1/4 cạnh, absolute giữa', () => {
+    render(<QRCode value="frame" bgColor="var(--c-s1)" icon={<span>x</span>} />);
+    const svg = screen.getByRole('img');
+    const box = svg.parentElement!.querySelector('span[aria-hidden="true"]') as HTMLElement;
+    expect(box.style.background).toBe('var(--c-s1)');
+    expect(box.style.width).toBe('25%');
+    expect(box.className).toContain('absolute');
+    expect(box.className).toContain('rounded-md');
+  });
+
+  it('icon + không truyền errorLevel → matrix == level H (vendor generator verify)', () => {
+    render(<QRCode value="verify-h" icon={<span>logo</span>} />);
+    const withIcon = screen.getByRole('img').querySelector('path')!.getAttribute('d');
+    const expectedH = matrixToPath(makeQrMatrix('verify-h', 'H'));
+    expect(withIcon).toBe(expectedH); // H đúng chuẩn vendor — đủ EC bù che khuất
+  });
+
+  it('errorLevel user truyền vẫn được respect (icon + Q → matrix Q)', () => {
+    render(<QRCode value="verify-q" errorLevel="Q" icon={<span>logo</span>} />);
+    const d = screen.getByRole('img').querySelector('path')!.getAttribute('d');
+    expect(d).toBe(matrixToPath(makeQrMatrix('verify-q', 'Q')));
+    expect(d).not.toBe(matrixToPath(makeQrMatrix('verify-q', 'H')));
+  });
+
+  it('không icon → giữ hành vi cũ (M mặc định, không có punch-out)', () => {
+    render(<QRCode value="plain" />);
+    const d = screen.getByRole('img').querySelector('path')!.getAttribute('d');
+    expect(d).toBe(matrixToPath(makeQrMatrix('plain', 'M')));
+    expect(screen.getByRole('img').parentElement!.querySelector('span[aria-hidden="true"]')).toBeNull();
+  });
+});

package/stack-template/app/ui-kit/src/ui/qr-code/qrcode-core.ts

@@ -0,0 +1,56 @@
+// QRCode core — wrapper typed quanh qrcode-generator vendored (MIT, xem
+// `qrcode-generator.vendor.ts`). Auto version (typeNumber 0 → 1..40), byte mode
+// UTF-8 (wire stringToBytes sang funcs['UTF-8'] — text Việt/emoji không vỡ),
+// best-mask chọn tự động trong lib. Không deps runtime khác.
+import { qrcode } from './qrcode-generator.vendor.js';
+
+// Vendor là JS var-based — TS chỉ suy ra `(t, lvl) => {}`. Khai báo surface thật
+// để consumer type-checked (casting qua unknown — biên duy nhất chạm code vendored).
+interface QrInstance {
+  addData(data: string, mode?: string): void;
+  make(): void;
+  getModuleCount(): number;
+  isDark(row: number, col: number): boolean;
+}
+interface QrFactory {
+  (typeNumber: number, errorCorrectionLevel: string): QrInstance;
+  stringToBytes: (s: string) => number[];
+  stringToBytesFuncs: Record<string, (s: string) => number[]>;
+}
+const qrcodeFn = qrcode as unknown as QrFactory;
+
+// UTF-8 multibyte cho byte mode (default của lib chỉ charCodeAt & 0xff — mất dấu)
+qrcodeFn.stringToBytes = qrcodeFn.stringToBytesFuncs['UTF-8'];
+
+export type QrErrorLevel = 'L' | 'M' | 'Q' | 'H';
+
+/** Ma trận module của 1 QR — count×count, isDark(row, col). */
+export interface QrMatrix {
+  count: number;
+  isDark: (row: number, col: number) => boolean;
+}
+
+const LEVELS: QrErrorLevel[] = ['L', 'M', 'Q', 'H'];
+
+/** Sinh ma trận QR cho text — ném Error nếu value vượt capacity v40-L (~2953 bytes UTF-8). */
+export function makeQrMatrix(value: string, level: QrErrorLevel = 'M'): QrMatrix {
+  const lvl = LEVELS.includes(level) ? level : 'M';
+  const qr = qrcodeFn(0, lvl); // 0 = auto version
+  qr.addData(value, 'Byte');
+  qr.make();
+  return {
+    count: qr.getModuleCount(),
+    isDark: (row, col) => qr.isDark(row, col),
+  };
+}
+
+/** Path data SVG (mỗi module đậm = 1 ô vuông unit) — fill 1 lần, sắc nét mọi size. */
+export function matrixToPath(m: QrMatrix): string {
+  let d = '';
+  for (let r = 0; r < m.count; r++) {
+    for (let c = 0; c < m.count; c++) {
+      if (m.isDark(r, c)) d += `M${c} ${r}h1v1h-1z`;
+    }
+  }
+  return d;
+}