create-wakii-stack 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,117 @@
+// Typography tests — Title levels (antd scale) + Text types/marks/copyable + Paragraph.
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Typography, Title, Text, Paragraph } from './index.js';
+
+afterEach(cleanup);
+const { Title: T, Text: X, Paragraph: P } = Typography;
+
+describe('Typography.Title', () => {
+  it.each([
+    [1, 'h1', '38px'],
+    [2, 'h2', '30px'],
+    [3, 'h3', '24px'],
+    [4, 'h4', '20px'],
+    [5, 'h5', '16px'],
+  ] as const)('level %i → tag %s + fontSize %s', (level, tag, size) => {
+    render(<Title level={level}>Tiêu đề</Title>);
+    const el = screen.getByRole('heading', { level });
+    expect(el.tagName).toBe(tag.toUpperCase());
+    expect(el).toHaveStyle({ fontSize: size });
+    // Title-1 bold 700 (backlog 2026-10-18); levels 2–5 giữ semibold 600
+    expect(el).toHaveStyle({ fontWeight: level === 1 ? 700 : 600 });
+  });
+
+  it('mặc định level 1', () => {
+    render(<T>Default</T>);
+    expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();
+  });
+});
+
+describe('Typography.Text', () => {
+  it('type danger → màu đỏ token', () => {
+    render(<X type="danger">Lỗi</X>);
+    expect(screen.getByText('Lỗi')).toHaveStyle({ color: 'var(--st-fail)' });
+  });
+
+  it('strong/code/keyboard/underline/delete xếp lớp đúng', () => {
+    render(
+      <X strong code underline delete keyboard>
+        X
+      </X>,
+    );
+    const el = screen.getByText('X');
+    expect(el.closest('del')).not.toBeNull();
+    expect(el.closest('u')).not.toBeNull();
+    expect(el.closest('code')).not.toBeNull();
+    expect(el.closest('kbd')).not.toBeNull();
+    expect(el.closest('strong')).not.toBeNull();
+  });
+
+  it('copyable → click copy vào clipboard', () => {
+    const write = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(globalThis.navigator, 'clipboard', {
+      value: { writeText: write },
+      configurable: true,
+    });
+    render(<X copyable>wakii</X>);
+    fireEvent.click(screen.getByTitle('Copy'));
+    expect(write).toHaveBeenCalledWith('wakii');
+  });
+});
+
+describe('Typography.Paragraph + composite', () => {
+  it('Paragraph lineHeight 1.6 + type', () => {
+    render(<P type="secondary">mô tả</P>);
+    expect(screen.getByText('mô tả')).toHaveStyle({ color: 'var(--ink2)' });
+  });
+
+  it('Typography.Title/Text/Paragraph truy cập được qua composite', () => {
+    expect(T).toBe(Title);
+    expect(X).toBe(Text);
+    expect(P).toBe(Paragraph);
+  });
+});
+
+describe('Typography — branch phụ', () => {
+  it('Text type success/warning → màu token', () => {
+    render(
+      <>
+        <X type="success">ok</X>
+        <X type="warning">warn</X>
+      </>,
+    );
+    expect(screen.getByText('ok')).toHaveStyle({ color: 'var(--st-done)' });
+    expect(screen.getByText('warn')).toHaveStyle({ color: 'var(--st-doing)' });
+  });
+
+  it('keyboard đơn + composite render null', () => {
+    render(<X keyboard>Ctrl</X>);
+    expect(screen.getByText('Ctrl').closest('kbd')).not.toBeNull();
+    const { container } = render(<Typography />);
+    expect(container.firstElementChild).toBeNull();
+  });
+
+  it('Title style override + Text style merge', () => {
+    render(
+      <>
+        <T level={2} style={{ color: 'red' }}>
+          đỏ
+        </T>
+        <X style={{ letterSpacing: 1 }}>
+          x
+        </X>
+      </>,
+    );
+    expect(screen.getByText('đỏ')).toHaveStyle({ color: 'rgb(255, 0, 0)' });
+    expect(screen.getByText('x')).toHaveStyle({ letterSpacing: '1px' });
+  });
+});
+
+describe('Typography — branch phụ (Tier 5 sweep)', () => {
+  it('Text KHÔNG copyable → click không crash, không icon', () => {
+    render(<X>plain</X>);
+    fireEvent.click(screen.getByText('plain'));
+    expect(screen.queryByText('⧉')).toBeNull();
+  });
+});

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

@@ -0,0 +1,39 @@
+// Upload — hidden input[type=file] + trigger button + danh sách file (tên + size KB/MB + × remove),
+// spec batch ③ worker B (VU-53). Status per file nội bộ: beforeUpload false → không add;
+// Promise → 'uploading' (Progress) → 'done'/'error'. UploadDropzone (kéo-thả) chia sẻ props/logic
+// qua upload-core; Logic chọn file nằm ở useUploadController (upload-core.tsx).
+import { Button } from '../button/index';
+import { Icon } from '../icons/index.js';
+import { UploadFileList, useUploadController, type UploadProps } from './upload-core.js';
+
+export { UploadDropzone } from './upload-dropzone.js';
+export type { UploadItem, UploadProps, UploadStatus } from './upload-core.js';
+
+const TRIGGER_ICON = <Icon name="upload" size={14} />;
+
+export function Upload(props: UploadProps) {
+  const { accept, multiple, disabled, showList = true, className, children } = props;
+  const { inputRef, openDialog, items, removeItem, onInputChange } = useUploadController(props);
+
+  return (
+    <div className={className}>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        disabled={disabled}
+        className="hidden"
+        onChange={onInputChange}
+        aria-hidden="true"
+        tabIndex={-1}
+      />
+      {children ?? (
+        <Button type="default" disabled={disabled} onClick={openDialog} icon={TRIGGER_ICON}>
+          Chọn tệp
+        </Button>
+      )}
+      {showList && <UploadFileList items={items} onRemove={removeItem} />}
+    </div>
+  );
+}

package/stack-template/app/ui-kit/src/ui/upload/upload-core.tsx

@@ -0,0 +1,204 @@
+// upload-core — logic + types dùng chung Upload & UploadDropzone (batch ③ worker B, VU-53):
+// useUploadController (hidden input, openDialog, hàng đợi file nội bộ có status per file),
+// UploadFileList (tên + size KB/MB + × remove). Tách riêng để index ↔ dropzone không import chéo.
+// Status per file: beforeUpload false → chặn; Promise → 'uploading' (Progress ticker display-only)
+// → resolve true 'done' / resolve false gỡ dòng / reject 'error'.
+import { useEffect, useRef, useState, type ChangeEvent, type ReactNode } from 'react';
+import { Icon } from '../icons/index.js';
+import { Progress } from '../progress/index';
+
+export type UploadStatus = 'uploading' | 'done' | 'error';
+
+export interface UploadItem {
+  id: string;
+  file: File;
+  status: UploadStatus;
+  /** 0–100 — đang upload async, UploadFileList render Progress. */
+  progress?: number;
+}
+
+export interface UploadProps {
+  /** attr accept của input file, vd '.pdf,image/*'. */
+  accept?: string;
+  multiple?: boolean;
+  disabled?: boolean;
+  /** Giới hạn tổng số file giữ lại — phần thừa bị chặn. */
+  maxCount?: number;
+  /** false (đồng bộ) → chặn file; Promise resolve false → chặn; resolve true → done; reject → error. */
+  beforeUpload?: (file: File, files: File[]) => boolean | Promise<boolean>;
+  /** Danh sách file hiện có vừa đổi (add/remove). */
+  onChange?: (files: File[]) => void;
+  onRemove?: (file: File) => void;
+  /** Ẩn/hiện danh sách file — mặc định true. */
+  showList?: boolean;
+  className?: string;
+  /** Trigger tuỳ chỉnh thay button mặc định (dropzone dùng children thay hint). */
+  children?: ReactNode;
+}
+
+/** 100 → '100 B', 2048 → '2.0 KB', 1.5MB → '1.5 MB'. */
+// eslint-disable-next-line react-refresh/only-export-components
+export function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  const kb = bytes / 1024;
+  if (kb < 1024) return `${kb.toFixed(1)} KB`;
+  return `${(kb / 1024).toFixed(1)} MB`;
+}
+
+let uid = 0;
+const nextId = () => `upload-${++uid}`;
+
+/** Máy chọn file dùng chung: input ref + openDialog + hàng đợi items + beforeUpload/maxCount. */
+// eslint-disable-next-line react-refresh/only-export-components
+export function useUploadController(props: UploadProps) {
+  const { disabled, multiple, maxCount, beforeUpload, onChange, onRemove } = props;
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [items, setItemsState] = useState<UploadItem[]>([]);
+  // Mirror đồng bộ — beforeUpload async cần đọc danh sách mới nhất giữa các tick
+  const itemsRef = useRef<UploadItem[]>([]);
+  const timersRef = useRef(new Map<string, ReturnType<typeof setInterval>>());
+
+  // Callback qua ref — handler luôn gọi bản mới nhất, không stale closure
+  const beforeUploadRef = useRef(beforeUpload);
+  const onChangeRef = useRef(onChange);
+  const onRemoveRef = useRef(onRemove);
+  useEffect(() => {
+    beforeUploadRef.current = beforeUpload;
+    onChangeRef.current = onChange;
+    onRemoveRef.current = onRemove;
+  });
+
+  // unmount → dọn ticker progress
+  useEffect(() => {
+    const timers = timersRef.current;
+    return () => {
+      timers.forEach((timer) => clearInterval(timer));
+      timers.clear();
+    };
+  }, []);
+
+  const patch = (next: UploadItem[]) => {
+    itemsRef.current = next;
+    setItemsState(next);
+  };
+
+  const emitChange = (list: UploadItem[]) => {
+    onChangeRef.current?.(list.map((item) => item.file));
+  };
+
+  const clearTimer = (id: string) => {
+    const timer = timersRef.current.get(id);
+    if (timer) {
+      clearInterval(timer);
+      timersRef.current.delete(id);
+    }
+  };
+
+  // Nhánh async của handleFiles — đã có sẵn Promise từ beforeUpload
+  const trackPromise = async (file: File, pending: Promise<boolean>) => {
+    const id = nextId();
+    patch([...itemsRef.current, { id, file, status: 'uploading', progress: 0 }]);
+    emitChange(itemsRef.current);
+    // Ticker giả progress (display-only) — kết quả thật do Promise quyết định
+    const timer = setInterval(() => {
+      patch(
+        itemsRef.current.map((item) =>
+          item.id === id ? { ...item, progress: Math.min(90, (item.progress ?? 0) + 7) } : item,
+        ),
+      );
+    }, 150);
+    timersRef.current.set(id, timer);
+    try {
+      const ok = await pending;
+      clearTimer(id);
+      if (!ok) {
+        // resolve false → chặn: gỡ dòng 'uploading'
+        patch(itemsRef.current.filter((item) => item.id !== id));
+        emitChange(itemsRef.current);
+        return;
+      }
+      patch(itemsRef.current.map((item) => (item.id === id ? { ...item, status: 'done', progress: 100 } : item)));
+    } catch {
+      clearTimer(id);
+      patch(itemsRef.current.map((item) => (item.id === id ? { ...item, status: 'error' } : item)));
+    }
+  };
+
+  const handleFiles = (incoming: File[]) => {
+    if (disabled) return; // disabled → bỏ qua cả input change lẫn drop
+    // multiple=false → chỉ file đầu; maxCount chặn phần thừa trên tổng đang giữ
+    const candidates = multiple ? incoming : incoming.slice(0, 1);
+    let added = 0;
+    for (const file of candidates) {
+      if (maxCount != null && itemsRef.current.length >= maxCount) break;
+      const result = beforeUploadRef.current?.(file, itemsRef.current.map((item) => item.file));
+      if (result === false) continue; // chặn — không add
+      if (result instanceof Promise) {
+        void trackPromise(file, result);
+        continue;
+      }
+      patch([...itemsRef.current, { id: nextId(), file, status: 'done' }]);
+      added++;
+    }
+    if (added > 0) emitChange(itemsRef.current); // 1 batch chọn file → 1 onChange
+  };
+
+  const openDialog = () => {
+    if (disabled) return; // disabled → không mở dialog
+    inputRef.current?.click();
+  };
+
+  const removeItem = (item: UploadItem) => {
+    patch(itemsRef.current.filter((it) => it.id !== item.id));
+    onRemoveRef.current?.(item.file);
+    emitChange(itemsRef.current);
+  };
+
+  const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    handleFiles(Array.from(event.target.files ?? []));
+    event.target.value = ''; // cho phép chọn lại cùng 1 file
+  };
+
+  return { inputRef, openDialog, items, removeItem, handleFiles, onInputChange };
+}
+
+/** Danh sách file: tên + size + Progress (đang upload) / ✓ (done) / Lỗi (error) + × remove. */
+export function UploadFileList({
+  items,
+  onRemove,
+}: {
+  items: UploadItem[];
+  onRemove: (item: UploadItem) => void;
+}) {
+  if (items.length === 0) return null;
+  return (
+    <ul className="mt-2 flex list-none flex-col gap-1 p-0">
+      {items.map((item) => (
+        <li
+          key={item.id}
+          className="flex items-center gap-2 rounded-lg border border-line bg-s2 px-3 py-2 text-body text-ink"
+        >
+          <span className="shrink-0 text-ink3" aria-hidden="true">
+            <Icon name="file" size={16} />
+          </span>
+          <span className="min-w-0 flex-1 truncate">{item.file.name}</span>
+          <span className="shrink-0 text-meta text-ink3">{formatSize(item.file.size)}</span>
+          {item.status === 'uploading' && item.progress != null && (
+            <Progress percent={item.progress} showInfo={false} className="w-24 shrink-0" />
+          )}
+          {item.status === 'done' && <span className="shrink-0 text-meta text-st-done"><Icon name="check" size={12} /></span>}
+          {item.status === 'error' && <span className="shrink-0 text-meta text-st-fail">Lỗi</span>}
+          <button
+            type="button"
+            aria-label={`Xoá ${item.file.name}`}
+            className="shrink-0 cursor-pointer rounded-1 border-0 bg-transparent p-1 text-ink3 hover:text-st-fail"
+            onClick={() => onRemove(item)}
+          >
+            <Icon name="times" size={12} />
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}

package/stack-template/app/ui-kit/src/ui/upload/upload-dropzone.tsx

@@ -0,0 +1,79 @@
+// UploadDropzone — biến thể kéo-thả của Upload (export từ index): border-dashed rounded-lg +
+// icon upload + hint 'Kéo thả hoặc click để chọn'. dragenter/dragover → border-accent + bg tint
+// (state class); dragleave/drop → thường. Drop đọc e.dataTransfer.files; click mở dialog;
+// role=button + tabIndex — Enter/Space mở dialog, aria-disabled khi disabled.
+// Chia sẻ props + controller với Upload qua upload-core.
+import { useState, type DragEvent, type KeyboardEvent } from 'react';
+import { Icon } from '../icons/index.js';
+import { UploadFileList, useUploadController, type UploadProps } from './upload-core.js';
+
+const BASE =
+  'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-line bg-s2 px-6 py-8 text-center text-ink transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent';
+// dragenter/dragover — viền + nền tint accent (bg-accent/8 theo pattern sidebar bg-accent/20)
+const HIGHLIGHT = 'border-accent bg-accent/8 text-accent';
+const DISABLED = 'cursor-not-allowed opacity-60';
+
+export function UploadDropzone(props: UploadProps) {
+  const { accept, multiple, disabled, showList = true, className, children } = props;
+  const { inputRef, openDialog, items, removeItem, handleFiles, onInputChange } = useUploadController(props);
+  const [dragging, setDragging] = useState(false);
+
+  const onDrop = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    setDragging(false);
+    handleFiles(Array.from(event.dataTransfer?.files ?? [])); // handleFiles tự guard disabled
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+    event.preventDefault();
+    openDialog();
+  };
+
+  return (
+    <div className={className}>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        disabled={disabled}
+        className="hidden"
+        onChange={onInputChange}
+        aria-hidden="true"
+        tabIndex={-1}
+      />
+      <div
+        role="button"
+        tabIndex={disabled ? -1 : 0}
+        aria-disabled={disabled || undefined}
+        className={`${BASE}${disabled ? ` ${DISABLED}` : dragging ? ` ${HIGHLIGHT}` : ''}`}
+        onClick={openDialog}
+        onKeyDown={onKeyDown}
+        onDragEnter={(event) => {
+          event.preventDefault();
+          setDragging(true);
+        }}
+        onDragOver={(event) => {
+          event.preventDefault();
+          setDragging(true);
+        }}
+        onDragLeave={(event) => {
+          event.preventDefault();
+          setDragging(false);
+        }}
+        onDrop={onDrop}
+      >
+        {children ?? (
+          <>
+            <span className="text-ink3" aria-hidden="true">
+              <Icon name="upload" size={28} />
+            </span>
+            <span className="text-body">Kéo thả hoặc click để chọn</span>
+          </>
+        )}
+      </div>
+      {showList && <UploadFileList items={items} onRemove={removeItem} />}
+    </div>
+  );
+}

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

@@ -0,0 +1,67 @@
+// upload.stories.tsx — Forms/Upload (batch ③ worker B): Upload cơ bản, file status
+// done/error qua beforeUpload Promise, Dropzone thường/disabled/maxCount.
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Upload, UploadDropzone } from './index.js';
+
+/** File upload — button and dropzone variants with per-file status (done/error). */
+const meta = {
+  title: 'Forms/Upload',
+  component: Upload,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Hidden input + trigger + danh sách file (tên + size + × remove). beforeUpload: false → chặn; Promise → uploading (Progress) → done/error. UploadDropzone: kéo-thả + click + keyboard (Enter/Space), dragEnter highlight.',
+      },
+    },
+  },
+} satisfies Meta<typeof Upload>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const UploadCoBan: Story = {
+  name: 'Basic upload',
+  render: () => <Upload multiple accept=".pdf,.png,.jpg,.docx" />,
+};
+
+export const UploadFileStatus: Story = {
+  name: 'File status — done / error',
+  render: () => (
+    <Upload
+      multiple
+      // file thường → uploading (Progress chạy) → done sau 1.2s; .exe → reject → error
+      beforeUpload={(file) =>
+        file.name.endsWith('.exe')
+          ? Promise.reject(new Error('Đuôi .exe bị chặn'))
+          : new Promise<boolean>((resolve) => setTimeout(() => resolve(true), 1200))
+      }
+    />
+  ),
+};
+
+export const DropzoneCoBan: Story = {
+  name: 'Dropzone — basic',
+  render: () => <UploadDropzone multiple />,
+};
+
+export const DropzoneDisabled: Story = {
+  name: 'Dropzone — disabled',
+  render: () => <UploadDropzone disabled />,
+};
+
+export const DropzoneMaxCount: Story = {
+  name: 'Dropzone — maxCount 3',
+  render: () => <UploadDropzone multiple maxCount={3} />,
+};
+
+export const DarkTheme: Story = {
+  name: 'Dark theme',
+  render: () => (
+    <div data-bp-theme="dark" className="grid gap-4 rounded-xl bg-canvas p-4">
+      <Upload multiple accept=".pdf,.png,.jpg,.docx" />
+      <UploadDropzone multiple />
+    </div>
+  ),
+};