create-wakii-stack 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,66 @@
+// Parity matrix antd→tokens: docs/parity-matrix.md
+// Space stories — directions, sizes (small/middle/large/number), wrap.
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../button/index';
+import { Space } from './index';
+
+/** Spacing wrapper — horizontal/vertical gap between children. */
+const meta = { title: 'Primitives/Space', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function Tri() {
+  return (
+    <>
+      <Button type="primary">A</Button>
+      <Button>B</Button>
+      <Button type="text">C</Button>
+    </>
+  );
+}
+
+export const Directions: Story = {
+  name: 'Directions — horizontal / vertical',
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <Space>
+        <Tri />
+      </Space>
+      <Space direction="vertical" align="start">
+        <Button type="primary">Dọc 1</Button>
+        <Button>Dọc 2</Button>
+      </Space>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  name: 'Sizes — small 8 / middle 16 / large 24 / number',
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <Space size="small">
+        <Tri />
+      </Space>
+      <Space size="middle">
+        <Tri />
+      </Space>
+      <Space size="large">
+        <Tri />
+      </Space>
+      <Space size={40}>
+        <Tri />
+      </Space>
+    </div>
+  ),
+};
+
+export const Wrap: Story = {
+  name: 'Wrap — flex-wrap with many items',
+  render: () => (
+    <Space wrap className="w-96">
+      {Array.from({ length: 10 }, (_, i) => (
+        <Button key={i}>Nút {i + 1}</Button>
+      ))}
+    </Space>
+  ),
+};

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

@@ -0,0 +1,56 @@
+// Space tests — size map + direction + wrap.
+import { cleanup, render } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Space } from './index.js';
+
+afterEach(cleanup);
+
+describe('Space', () => {
+  it.each([
+    ['small', 8],
+    ['middle', 16],
+    ['large', 24],
+  ] as const)('size %s → gap %ipx', (size, px) => {
+    const { container } = render(
+      <Space size={size}>
+        <span>a</span>
+        <span>b</span>
+      </Space>,
+    );
+    expect(container.firstElementChild?.getAttribute('style')).toContain(`gap: ${px}px`);
+  });
+
+  it('size number → gap tuỳ ý; vertical → flex-col', () => {
+    const { container } = render(
+      <Space size={12} direction="vertical">
+        <span>a</span>
+      </Space>,
+    );
+    expect(container.firstElementChild?.getAttribute('style')).toContain('gap: 12px');
+    expect(container.firstElementChild).toHaveClass('flex-col');
+  });
+});
+
+describe('Space — branch phụ', () => {
+  it('vertical + align start; wrap class', () => {
+    const { container } = render(
+      <Space direction="vertical" align="start" wrap>
+        <span>a</span>
+      </Space>,
+    );
+    const el = container.firstElementChild!;
+    expect(el.getAttribute('style')).toContain('align-items: start');
+    expect(el).toHaveClass('flex-col', 'flex-wrap');
+  });
+});
+
+describe('Space — branch phụ (Tier 5 sweep)', () => {
+  it('horizontal → không set align inline (undefined branch)', () => {
+    const { container } = render(
+      <Space size="middle">
+        <span>a</span>
+      </Space>,
+    );
+    expect(container.firstElementChild?.getAttribute('style')).not.toContain('align-items');
+  });
+});

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

@@ -0,0 +1,32 @@
+// SpeedDial — FAB + radiating actions (antd lite).
+import { useState, type ReactNode } from 'react';
+
+export interface SpeedDialAction { key: string; icon: ReactNode; label: string; onClick?: () => void }
+
+export interface SpeedDialProps {
+  /** FAB icon. */
+  icon: ReactNode;
+  actions: SpeedDialAction[];
+  className?: string;
+}
+
+export function SpeedDial({ icon, actions, className }: SpeedDialProps) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className={`fixed bottom-6 right-6 z-[var(--z-toast)] flex flex-col items-center gap-2${className ? ` ${className}` : ''}`}>
+      {open && actions.map((action, i) => (
+        <button key={action.key} type="button" aria-label={action.label}
+          onClick={() => { action.onClick?.(); setOpen(false); }}
+          className="grid size-9 cursor-pointer place-items-center rounded-pill border border-line bg-s2 text-body text-ink2 shadow-[var(--shadow-lift)] transition-all hover:text-accent"
+          style={{ animation: `bp-slide-up-in 150ms cubic-bezier(0.16,1,0.3,1) ${(actions.length - 1 - i) * 40}ms both` }}>
+          {action.icon}
+        </button>
+      ))}
+      <button type="button" aria-label="Thao tác" aria-expanded={open}
+        onClick={() => setOpen((o) => !o)}
+        className={`grid size-12 cursor-pointer place-items-center rounded-pill border-none bg-accent text-xl text-white shadow-[var(--shadow-pop)] transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ${open ? 'rotate-45' : ''}`}>
+        {icon}
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SpeedDial } from './index';
+// Không set component (icon/actions required → story buộc args) — render-only stories.
+/** FAB that radiates quick actions on open. */
+const meta = { title: 'Navigation/SpeedDial', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type S = StoryObj<typeof meta>;
+export const Basic: S = {
+  name: 'Basic — FAB + radiating actions',
+  render: () => (
+    <SpeedDial
+      icon="+"
+      actions={[
+        { key: 'a', icon: '📝', label: 'Create' },
+        { key: 'b', icon: '📁', label: 'Browse' },
+      ]}
+    />
+  ),
+};
+
+export const FixedPosition: S = {
+  name: 'Fixed — bottom-right of the viewport',
+  render: () => (
+    <div className="relative h-64 rounded-xl border border-line bg-s2">
+      <SpeedDial
+        icon="+"
+        actions={[
+          { key: 'new', icon: '📝', label: 'New task' },
+          { key: 'folder', icon: '📁', label: 'New folder' },
+        ]}
+      />
+    </div>
+  ),
+};

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

@@ -0,0 +1,34 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { SpeedDial } from './index.js';
+afterEach(cleanup);
+
+describe('SpeedDial', () => {
+  it('FAB đóng mặc định; click mở actions; action click → callback + đóng', async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <SpeedDial icon="+" actions={[{ key: 'a', icon: 'A', label: 'Action A', onClick }]} />
+    );
+    expect(screen.queryByLabelText('Action A')).toBeNull();
+    await user.click(screen.getByRole('button', { name: 'Thao tác' }));
+    expect(screen.getByLabelText('Action A')).toBeInTheDocument();
+    await user.click(screen.getByLabelText('Action A'));
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(screen.queryByLabelText('Action A')).toBeNull();
+  });
+});
+
+describe('SpeedDial — FAB state', () => {
+  it('aria-expanded flip + FAB xoay 45deg khi mở', async () => {
+    const user = userEvent.setup();
+    render(<SpeedDial icon="+" actions={[{ key: 'a', icon: 'A', label: 'Action A' }]} />);
+    const fab = screen.getByRole('button', { name: 'Thao tác' });
+    expect(fab).toHaveAttribute('aria-expanded', 'false');
+    expect(fab.className).not.toContain('rotate-45');
+    await user.click(fab);
+    expect(fab).toHaveAttribute('aria-expanded', 'true');
+    expect(fab.className).toContain('rotate-45');
+  });
+});

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

@@ -0,0 +1,74 @@
+// Spinner — 3 variants chọn được (motion identity — user chọn style):
+// ring (mặc định, viền quay) · dots (3 chấm pulse) · bars (4 vạch scaleY).
+// Mỗi variant đủ size sm/md/lg + màu accent/muted/inverse qua text-*
+// (border-current/bg-current kế màu). Label = aria-label BẮT BUỘC.
+import type { ReactNode } from 'react';
+
+export interface SpinnerProps {
+  /** aria-label BẮT BUỘC — màn đọc cần biết busy của cái gì. */
+  label: string;
+  /** ring (mặc định) / dots / bars. */
+  variant?: 'ring' | 'dots' | 'bars';
+  /** small / default / large. */
+  size?: 'small' | 'default' | 'large';
+  /** Màu: accent (mặc định) / muted (ink3) / inverse (trắng — trên nền tối). */
+  color?: 'accent' | 'muted' | 'inverse';
+  className?: string;
+}
+
+const SIZE: Record<string, string> = {
+  small: 'size-3',
+  default: 'size-3.5',
+  large: 'size-5',
+};
+
+const COLOR: Record<string, string> = {
+  accent: 'text-accent',
+  muted: 'text-ink3',
+  inverse: 'text-white',
+};
+
+export function Spinner({ label, variant = 'ring', size = 'default', color = 'accent', className }: SpinnerProps) {
+  const colorCls = COLOR[color];
+  const box = SIZE[size];
+  let node: ReactNode;
+
+  if (variant === 'dots') {
+    node = (
+      <span className="inline-flex items-center gap-[0.2em]">
+        {[0, 1, 2].map((i) => (
+          <span
+            key={i}
+            style={{ animationDelay: `${i * 140}ms` }}
+            className={`size-[0.3em] animate-[bp-dots_1.2s_ease-in-out_infinite] rounded-pill bg-current ${colorCls}`}
+          />
+        ))}
+      </span>
+    );
+  } else if (variant === 'bars') {
+    const barH = size === 'small' ? 'h-[0.5em]' : size === 'large' ? 'h-[1em]' : 'h-[0.8em]';
+    node = (
+      <span className="inline-flex items-center gap-[2px]" style={{ height: '1em' }}>
+        {[0, 1, 2, 3].map((i) => (
+          <span
+            key={i}
+            style={{ animationDelay: `${i * 120}ms` }}
+            className={`w-[0.15em] animate-[bp-bars_1s_ease-in-out_infinite] rounded-pill bg-current origin-bottom ${barH} ${colorCls}`}
+          />
+        ))}
+      </span>
+    );
+  } else {
+    node = (
+      <span
+        className={`inline-block animate-spin rounded-pill border-2 border-current border-t-transparent ${box} ${colorCls}`}
+      />
+    );
+  }
+
+  return (
+    <span role="status" aria-label={label} className={`inline-flex items-center ${colorCls}${className ? ` ${className}` : ''}`}>
+      {node}
+    </span>
+  );
+}

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

@@ -0,0 +1,64 @@
+// Parity matrix antd→tokens: docs/parity-matrix.md
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Spinner } from './index';
+
+/** Inline busy indicator — ring/dots/bars, label is the accessible name. */
+const meta = {
+  title: 'Feedback/Spinner',
+  component: Spinner,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Spinner>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+type R = StoryObj;
+
+// label is the REQUIRED aria-label (role="status" — screen readers need to know what is busy)
+export const Default: Story = { name: 'Default — ring, accent', args: { label: 'Updating task' } };
+
+export const Variants: R = {
+  name: 'Variants — ring / dots / bars',
+  render: () => (
+    <div className="flex items-center gap-6">
+      <Spinner label="ring spinner" variant="ring" />
+      <Spinner label="dots spinner" variant="dots" />
+      <Spinner label="bars spinner" variant="bars" />
+    </div>
+  ),
+};
+
+export const Sizes: R = {
+  name: 'Sizes — small / default / large',
+  render: () => (
+    <div className="flex items-center gap-6">
+      <Spinner label="small spinner" size="small" />
+      <Spinner label="default spinner" size="default" />
+      <Spinner label="large spinner" size="large" />
+    </div>
+  ),
+};
+
+export const Colors: R = {
+  name: 'Colors — accent / muted / inverse',
+  render: () => (
+    <div className="flex items-center gap-6">
+      <Spinner label="accent spinner" color="accent" />
+      <Spinner label="muted spinner" color="muted" />
+      <div className="rounded-lg bg-ink p-3">
+        <Spinner label="inverse spinner" color="inverse" />
+      </div>
+    </div>
+  ),
+};
+
+export const DarkTheme: R = {
+  name: 'DarkTheme — accent/muted dark values',
+  render: () => (
+    <div data-bp-theme="dark" className="p-4">
+      <div className="flex items-center gap-6">
+        <Spinner label="dark accent spinner" />
+        <Spinner label="dark muted spinner" color="muted" />
+      </div>
+    </div>
+  ),
+};

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

@@ -0,0 +1,66 @@
+// Tests Spinner — hand-off §3.
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Spinner } from './index.js';
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('Spinner (hand-off §3 — 3 variants, motion identity)', () => {
+  it('ring mặc định → animate-spin + màu accent', () => {
+    render(<Spinner label="Đang cập nhật task" />);
+    const el = screen.getByLabelText('Đang cập nhật task');
+    expect(el).toHaveClass('text-accent');
+    expect(el.firstElementChild).toHaveClass('animate-spin');
+  });
+
+
+
+  it('màu muted/inverse → text token riêng', () => {
+    const { rerender } = render(<Spinner label="m" color="muted" />);
+    expect(screen.getByLabelText('m')).toHaveClass('text-ink3');
+    rerender(<Spinner label="i" color="inverse" />);
+    expect(screen.getByLabelText('i')).toHaveClass('text-white');
+  });
+
+  it('dots → 3 chấm pulse stagger', () => {
+    render(<Spinner label="d" variant="dots" />);
+    expect(screen.getByLabelText('d').querySelectorAll('span.animate-\\[bp-dots_1\\.2s_ease-in-out_infinite\\]').length).toBe(3);
+  });
+
+  it('bars → 4 vạch scaleY', () => {
+    render(<Spinner label="b" variant="bars" />);
+    expect(screen.getByLabelText('b').querySelectorAll('span.animate-\\[bp-bars_1s_ease-in-out_infinite\\]').length).toBe(4);
+  });
+});
+
+describe('Spinner — size (Tier 1.5)', () => {
+  it.each([
+    ['small', 'size-3'],
+    ['default', 'size-3.5'],
+    ['large', 'size-5'],
+  ] as const)('size %s → ring span class %s', (size, cls) => {
+    render(<Spinner label={`s-${size}`} size={size} />);
+    expect(screen.getByLabelText(`s-${size}`).querySelector('span')).toHaveClass(cls);
+  });
+});
+
+describe('Spinner — branch phụ', () => {
+  it('role=status + aria-label bắt buộc (a11y contract)', () => {
+    render(<Spinner label="Đang tải bảng" />);
+    expect(screen.getByRole('status')).toHaveAttribute('aria-label', 'Đang tải bảng');
+  });
+
+  it('ring dùng currentColor (border-current + border-t-transparent)', () => {
+    render(<Spinner label="r" />);
+    const ring = screen.getByLabelText('r').querySelector('span')!;
+    expect(ring.className).toContain('border-current');
+    expect(ring.className).toContain('border-t-transparent');
+  });
+
+  it('className passthrough', () => {
+    render(<Spinner label="c" className="my-2" />);
+    expect(screen.getByLabelText('c')).toHaveClass('my-2');
+  });
+});

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

@@ -0,0 +1,155 @@
+// SplitButton — MỘT <button> duy nhất (user: "chỉ nên dùng 1 button thôi"):
+// label + chevron cùng nằm trong MỘT phần tử nút — không thể "lộ chỗ nối" vì
+// không có chỗ nối. Chevron là span vùng-click riêng (stopPropagation) mở menu;
+// bấm phần còn lại = action chính. Keyboard: Enter/Space = action chính,
+// ArrowDown = mở menu + focus item đầu. Menu/click-away/ESC/a11y giữ từ batch trước.
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import type { ButtonSize, ButtonType } from '../button/index';
+import { Icon } from '../icons/index.js';
+import { useClickAway } from '../../hooks/useClickAway.js';
+import { useKeyPress } from '../../hooks/useKeyPress.js';
+
+export interface SplitButtonItem {
+  key: string;
+  label: string;
+  icon?: ReactNode;
+  danger?: boolean;
+  /** Render thành đường phân cách (border-t) thay vì item bấm được. */
+  separator?: boolean;
+}
+
+export interface SplitButtonProps {
+  label: string;
+  type?: ButtonType;
+  danger?: boolean;
+  /** antd size — đồng bộ Button: small h-8 / middle h-9 (mặc định) / large h-10. */
+  size?: ButtonSize;
+  items: SplitButtonItem[];
+  onClick?: () => void;
+  onItemClick?: (key: string) => void;
+  className?: string;
+}
+
+/** Chiều cao đồng步 Button; chevron zone thêm px bên phải bên trong CÙNG nút. */
+const SIZE: Record<ButtonSize, string> = {
+  small: 'h-8 px-3 text-label',
+  middle: 'h-9 px-4 text-body',
+  large: 'h-10 px-5 text-body',
+};
+
+const ITEM_NORMAL =
+  'flex w-full cursor-pointer items-center gap-2 rounded-lg border-none bg-transparent px-3 py-1.5 text-left text-body text-ink transition-colors hover:bg-s3';
+const ITEM_DANGER =
+  'flex w-full cursor-pointer items-center gap-2 rounded-lg border-none bg-transparent px-3 py-1.5 text-left text-body text-st-fail transition-colors hover:bg-st-fail/12';
+
+export function SplitButton({
+  label,
+  type = 'primary',
+  danger,
+  size = 'middle',
+  items,
+  onClick,
+  onItemClick,
+  className,
+}: SplitButtonProps) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useClickAway<HTMLSpanElement>(() => setOpen(false));
+  const menuRef = useRef<HTMLUListElement>(null);
+  const focusFirstOnOpen = useRef(false);
+
+  // ESC đóng menu (setState no-op khi đóng).
+  useKeyPress('Escape', () => setOpen(false));
+
+  // Mở bằng keyboard (ArrowDown) → focus item đầu tiên.
+  useEffect(() => {
+    if (open && focusFirstOnOpen.current) {
+      menuRef.current?.querySelector<HTMLButtonElement>('button[role="menuitem"]')?.focus();
+      focusFirstOnOpen.current = false;
+    }
+  }, [open]);
+
+  const solid = type === 'primary';
+  const shellBorder = solid
+    ? danger
+      ? 'border-st-fail'
+      : 'border-accent'
+    : type === 'text'
+      ? 'border-transparent'
+      : 'border-line';
+  const mainCls = solid
+    ? danger
+      ? 'bg-st-fail text-white hover:bg-st-fail/85'
+      : 'bg-accent text-white hover:bg-accent-hi'
+    : type === 'text'
+      ? danger
+        ? 'bg-transparent text-st-fail hover:bg-st-fail/12'
+        : 'bg-transparent text-ink hover:bg-s3'
+      : 'bg-s2 text-ink hover:bg-s3';
+
+  return (
+    <span ref={containerRef} className={`relative inline-flex${className ? ` ${className}` : ''}`}>
+      <button
+        type="button"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={() => onClick?.()}
+        onKeyDown={(e) => {
+          if (e.key === 'ArrowDown' && !open) {
+            e.preventDefault();
+            focusFirstOnOpen.current = true;
+            setOpen(true);
+          }
+        }}
+        className={`inline-flex cursor-pointer items-center justify-center gap-1 rounded-lg border ${shellBorder} ${SIZE[size]} ${mainCls} border-0 font-medium tracking-[0.01em] outline-none transition-all duration-150 hover:-translate-y-px hover:shadow-[var(--shadow-lift)] active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-accent/40 `}
+      >
+        {label}
+        {/* Vùng chevron: span click riêng BÊN TRONG nút — stopPropagation để không
+            chạy action chính. Feedback hover chỉ icon (scale), nền nút không đổi. */}
+        <span
+          data-chevron
+          aria-hidden="true"
+          onClick={(e) => {
+            e.stopPropagation();
+            setOpen((o) => !o);
+          }}
+          className="ml-1.5 flex -mr-1.5 cursor-pointer items-center self-stretch py-1 pl-1.5"
+        >
+          <Icon name="chevron-down" size={16} className={`transition-transform duration-200 ${open ? 'rotate-180' : ''}`} />
+        </span>
+      </button>
+      {open && (
+        <ul
+          ref={menuRef}
+          role="menu"
+          aria-label={label}
+          className="absolute left-0 top-full z-[var(--z-dropdown)] m-0 mt-1 min-w-[140px] list-none origin-top-left rounded-lg border border-line bg-s2 p-1 shadow-[var(--shadow-pop)] animate-[bp-zoom-in_var(--motion-fast)_var(--ease-enter)]"
+        >
+          {items.map((item) =>
+            item.separator ? (
+              <li key={item.key} role="none" className="my-1 border-t border-line" />
+            ) : (
+              <li key={item.key} role="none">
+                <button
+                  type="button"
+                  role="menuitem"
+                  onClick={() => {
+                    onItemClick?.(item.key);
+                    setOpen(false);
+                  }}
+                  className={item.danger ? ITEM_DANGER : ITEM_NORMAL}
+                >
+                  {item.icon && (
+                    <span aria-hidden="true" className="flex size-4 shrink-0 items-center justify-center">
+                      {item.icon}
+                    </span>
+                  )}
+                  {item.label}
+                </button>
+              </li>
+            ),
+          )}
+        </ul>
+      )}
+    </span>
+  );
+}