create-wakii-stack 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,57 @@
+// Parity matrix antd→tokens: docs/parity-matrix.md
+// Steps stories — Basic / Completed / WithDescription / ManySteps / DarkTheme.
+// Horizontal only — component has no size/vertical prop (don't invent).
+// `current` is fully prop-driven — no internal state, so no controlled story.
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Steps } from './index';
+
+/** Horizontal wizard progress header — done/current/waiting. */
+const meta = { title: 'Navigation/Steps', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const items = [
+  { title: 'Choose type', description: 'Task kind' },
+  { title: 'Fill form', description: 'Title + assignee' },
+  { title: 'Confirm', description: 'Review & create' },
+];
+
+export const Basic: Story = {
+  name: 'Basic — current in the middle',
+  render: () => <Steps items={items} current={1} className="max-w-[560px]" />,
+};
+
+export const Completed: Story = {
+  name: 'Completed — current at the end',
+  render: () => <Steps items={items} current={3} className="max-w-[560px]" />,
+};
+
+export const WithDescription: Story = {
+  name: 'With description + not started',
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <Steps items={items} current={2} className="max-w-[560px]" />
+      <Steps items={items} current={0} className="max-w-[560px]" />
+    </div>
+  ),
+};
+
+export const ManySteps: Story = {
+  name: 'Many steps — 5 items, no description',
+  render: () => (
+    <Steps
+      items={[{ title: 'Draft' }, { title: 'Review' }, { title: 'Approve' }, { title: 'Publish' }, { title: 'Done' }]}
+      current={2}
+      className="max-w-[720px]"
+    />
+  ),
+};
+
+export const DarkTheme: Story = {
+  name: 'Dark theme — accent/border follow tokens',
+  render: () => (
+    <div data-bp-theme="dark" className="max-w-[560px] rounded-xl bg-s2 p-4">
+      <Steps items={items} current={1} />
+    </div>
+  ),
+};

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

@@ -0,0 +1,55 @@
+// Steps tests — done/current/waiting states + description.
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Steps } from './index.js';
+
+afterEach(cleanup);
+
+const ITEMS = [
+  { title: 'Đặt hàng', description: 'Giỏ hàng' },
+  { title: 'Thanh toán' },
+  { title: 'Hoàn tất' },
+];
+
+describe('Steps', () => {
+  it('current=1: step 0 done (tick), step 1 current (số), step 2 waiting', () => {
+    render(<Steps items={ITEMS} current={1} />);
+    // style sweep: tick = Icon SVG (bỏ glyph '✓' text) — assert qua testid + svg bên trong
+    expect(screen.getByTestId('step-done').querySelector('svg')).not.toBeNull();
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText('Đặt hàng')).toBeInTheDocument();
+    expect(screen.getByText('Giỏ hàng')).toBeInTheDocument();
+  });
+
+  it('current cuối → tất cả trước done', () => {
+    render(<Steps items={ITEMS} current={2} />);
+    expect(screen.getAllByTestId('step-done').length).toBe(2);
+  });
+});
+
+describe('Steps — branch phụ', () => {
+  it('current=0 → step đầu current (chưa có tick)', () => {
+    render(<Steps items={ITEMS} current={0} />);
+    expect(screen.queryByTestId('step-done')).toBeNull();
+    expect(screen.getByText('1')).toBeInTheDocument();
+  });
+
+  it('description chỉ render khi truyền (step 2 không description)', () => {
+    render(<Steps items={ITEMS} current={1} />);
+    expect(screen.queryByText(/Thanh toán.*description/)).toBeNull();
+  });
+
+  it('a11y: aria-current="step" đúng li đang current; li khác không có', () => {
+    render(<Steps items={ITEMS} current={1} />);
+    const lis = document.querySelectorAll('ol > li');
+    expect(lis[1]).toHaveAttribute('aria-current', 'step');
+    expect(lis[0]).not.toHaveAttribute('aria-current');
+    expect(lis[2]).not.toHaveAttribute('aria-current');
+  });
+
+  it('edge: current vượt quá số step → tất cả done; current=99 không crash', () => {
+    render(<Steps items={ITEMS} current={99} />);
+    expect(screen.getAllByTestId('step-done').length).toBe(ITEMS.length);
+    expect(document.querySelectorAll('[aria-current="step"]').length).toBe(0);
+  });
+});

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

@@ -0,0 +1,87 @@
+// Switch — antd 44×22 (small 36×16) nâng cấp iOS/MUI-grade (batch ⑳ 2026-10-18):
+// checked = gradient accent→accent-hi + inner shadow; unchecked = bg-ink/25
+// (dark-safe — hết rgba đen cứng); handle trắng shadow 2 lớp, spring translate
+// + pop scale .9→1 lúc toggle (keyframe bp-switch-pop INJECT module-load — scope
+// src/ui/switch/* không đụng tailwind.css; prefers-reduced-motion tự tắt nhờ
+// block global trong tailwind.css); children cross-fade 150ms; focus ring đồng
+// bộ Button (ring-accent/40 offset-2); disabled phẳng (không shadow handle).
+import { useState, type ReactNode } from 'react';
+
+if (typeof document !== 'undefined' && !document.querySelector('style[data-bp-switch-pop]')) {
+  const style = document.createElement('style');
+  style.setAttribute('data-bp-switch-pop', '');
+  style.textContent = '@keyframes bp-switch-pop{from{transform:scale(.9)}to{transform:scale(1)}}';
+  document.head.appendChild(style);
+}
+
+export interface SwitchProps {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  size?: 'default' | 'small';
+  /** Nhãn trong switch (checked) — antd checkedChildren/unCheckedChildren. */
+  checkedChildren?: ReactNode;
+  unCheckedChildren?: ReactNode;
+  'aria-label'?: string;
+  className?: string;
+}
+
+export function Switch({
+  checked = false,
+  onChange,
+  disabled = false,
+  size = 'default',
+  checkedChildren,
+  unCheckedChildren,
+  className,
+  ...rest
+}: SwitchProps) {
+  const [popping, setPopping] = useState(false);
+
+  const track = size === 'small' ? 'h-5 w-9' : 'h-6 w-11';
+  const knob = size === 'small' ? 'size-3.5' : 'size-[18px]';
+  const translate = checked
+    ? size === 'small'
+      ? 'translate-x-[14px]'
+      : 'translate-x-[22px]'
+    : 'translate-x-[2px]';
+
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => {
+        onChange?.(!checked);
+        setPopping(true);
+      }}
+      {...rest}
+      className={`group relative inline-flex shrink-0 items-center overflow-hidden rounded-pill border-none outline-none transition-colors duration-200 ease-[var(--ease-smooth)] focus-visible:ring-2 focus-visible:ring-accent/40 ${
+        disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+      } ${track} ${checked ? '' : 'bg-ink/25'}${className ? ` ${className}` : ''}`}
+    >
+      {/* Gradient layer — opacity transition cho màu mượt (gradient không transition được trực tiếp) */}
+      <span
+        aria-hidden="true"
+        className={`absolute inset-0 rounded-pill bg-gradient-to-r from-accent to-accent-hi shadow-[inset_0_1px_3px_rgba(0,0,0,0.12)] transition-opacity duration-200 ease-[var(--ease-smooth)] ${
+          checked ? 'opacity-100' : 'opacity-0'
+        }`}
+      />
+      <span
+        onAnimationEnd={() => setPopping(false)}
+        className={`absolute left-0 z-10 grid place-items-center rounded-pill bg-white text-[10px] text-ink2 transition-transform duration-200 ease-[cubic-bezier(0.34,1.56,0.64,1)] group-active:scale-105 ${knob} ${translate} ${
+          disabled ? '' : 'shadow-[0_2px_4px_rgba(0,0,0,0.12),0_0_1px_rgba(0,0,0,0.08)]'
+        } ${popping ? 'animate-[bp-switch-pop_200ms_var(--ease-enter)]' : ''}`}
+      >
+        {/* Cross-fade + slide nhẹ 150ms khi đổi state (remount theo key) */}
+        <span
+          key={checked ? 'on' : 'off'}
+          className={`inline-flex items-center animate-[bp-slide-up-in_150ms_var(--ease-enter)]`}
+        >
+          {checked ? checkedChildren : unCheckedChildren}
+        </span>
+      </span>
+    </button>
+  );
+}

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

@@ -0,0 +1,123 @@
+// Switch stories — Basic / Small / WithLabels (ON-OFF cross-fade) / Disabled / DarkTheme.
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Slider } from '../slider/index';
+import { Switch } from './index';
+
+/** Instant on/off toggle — `role=switch` + `aria-checked` built in. */
+const meta = { title: 'Forms/Switch', component: Switch, tags: ['autodocs'] } satisfies Meta<typeof Switch>;
+export default meta;
+type S = StoryObj<typeof meta>;
+
+function Toggle({ initial = false }: { initial?: boolean }) {
+  const [on, setOn] = useState(initial);
+  return <Switch checked={on} onChange={setOn} aria-label="Toggle demo" />;
+}
+
+export const Basic: S = {
+  name: 'Basic — gradient + spring pop',
+  render: () => <Toggle />,
+};
+
+export const Small: S = {
+  name: 'Small 36×16',
+  render: () => (
+    <div className="flex items-center gap-3">
+      <Switch size="small" aria-label="Small 1" />
+      <Switch size="small" checked aria-label="Small 2" />
+    </div>
+  ),
+};
+
+function WithLabelsDemo() {
+  const [on, setOn] = useState(true);
+  return (
+    <div className="flex items-center gap-3">
+      <Switch checked={on} onChange={setOn} checkedChildren="ON" unCheckedChildren="OFF" aria-label="With labels" />
+      <span className="text-meta text-ink2">{on ? 'On' : 'Off'}</span>
+    </div>
+  );
+}
+
+export const WithLabels: S = {
+  name: 'WithLabels — ON/OFF cross-fade 150ms',
+  render: () => <WithLabelsDemo />,
+};
+
+export const Disabled: S = {
+  name: 'Disabled — flat, no handle shadow',
+  render: () => (
+    <div className="flex items-center gap-3">
+      <Switch disabled aria-label="Disabled off" />
+      <Switch disabled checked aria-label="Disabled on" />
+    </div>
+  ),
+};
+
+function ControlledDemo() {
+  const [on, setOn] = useState(true);
+  return (
+    <div className="grid max-w-[320px] gap-3">
+      <Switch checked={on} onChange={setOn} />
+      <p className="m-0 font-mono text-meta text-ink3">checked: <strong className="text-ink">{String(on)}</strong></p>
+    </div>
+  );
+}
+
+/** Controlled — useState demo: flip updates state. */
+export const Controlled: S = {
+  render: () => <ControlledDemo />,
+};
+
+export const DarkTheme: S = {
+  name: 'Dark theme',
+  /* Soft bg-s2 card (dark = muted gray) like a real card surface — not a harsh
+   * near-black box on the light canvas (user feedback). */
+  render: () => (
+    <div data-bp-theme="dark" className="inline-flex items-center gap-4 rounded-xl bg-s2 p-4">
+      <Switch checked aria-label="Dark 1" />
+      <Switch aria-label="Dark 2" />
+      <Switch checked size="small" aria-label="Dark 3" />
+    </div>
+  ),
+};
+
+
+/* ── Real-world cases (mission #13 — real-world stories sweep) ── */
+
+// Local wrapper — settings page: notification switches + volume slider.
+function SettingsPanelInner() {
+  const [emailNotif, setEmailNotif] = useState(true);
+  const [autoUpdate, setAutoUpdate] = useState(false);
+  const [volume, setVolume] = useState(40);
+  return (
+    <div className="flex w-96 max-w-full flex-col gap-5 rounded-xl border border-line bg-s1 p-4">
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex flex-col">
+          <span className="text-body text-ink">Email notifications</span>
+          <span className="text-meta text-ink3">Weekly digest and security alerts</span>
+        </div>
+        <Switch checked={emailNotif} onChange={setEmailNotif} aria-label="Email notifications" />
+      </div>
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex flex-col">
+          <span className="text-body text-ink">Auto-update apps</span>
+          <span className="text-meta text-ink3">Install updates without asking</span>
+        </div>
+        <Switch checked={autoUpdate} onChange={setAutoUpdate} aria-label="Auto-update apps" />
+      </div>
+      <div className="flex flex-col gap-2 border-t border-line pt-4">
+        <div className="flex items-center justify-between">
+          <span className="text-body text-ink">Volume</span>
+          <span className="text-meta tabular-nums text-ink2">{volume}%</span>
+        </div>
+        <Slider value={volume} onChange={setVolume} min={0} max={100} ariaLabel="Volume" />
+      </div>
+    </div>
+  );
+}
+
+export const SettingsPanel: S = {
+  name: 'SettingsPanel — settings page: toggles + volume slider',
+  render: () => <SettingsPanelInner />,
+};

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

@@ -0,0 +1,98 @@
+// Switch tests — toggle, role=switch, aria-checked, size, children, disabled.
+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 { Switch } from './index.js';
+
+afterEach(cleanup);
+
+describe('Switch', () => {
+  it('role=switch + aria-checked; click toggle onChange', async () => {
+    const onChange = vi.fn();
+    render(<Switch checked={false} onChange={onChange} aria-label="Bật" />);
+    const sw = screen.getByRole('switch', { name: 'Bật' });
+    expect(sw).toHaveAttribute('aria-checked', 'false');
+    await userEvent.setup().click(sw);
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it('checked hiển thị children checked', () => {
+    render(<Switch checked checkedChildren="Bật" unCheckedChildren="Tắt" />);
+    expect(screen.getByText('Bật')).toBeInTheDocument();
+  });
+
+  it('size small + disabled', () => {
+    render(<Switch size="small" disabled onChange={vi.fn()} aria-label="s" />);
+    expect(screen.getByRole('switch', { name: 's' })).toBeDisabled();
+  });
+});
+
+describe('Switch — branch phụ (knob children unchecked)', () => {
+  it('unchecked hiển thị unCheckedChildren', () => {
+    render(<Switch checked={false} unCheckedChildren="Tắt" />);
+    expect(screen.getByText('Tắt')).toBeInTheDocument();
+  });
+});
+
+describe('Switch — branch phụ (Tier 5 sweep)', () => {
+  it('size default checkedChildren/unCheckedChildren render theo state', async () => {
+    const { rerender } = render(<Switch checked unCheckedChildren="Tắt" checkedChildren="Bật" />);
+    expect(screen.getByText('Bật')).toBeInTheDocument();
+    rerender(<Switch checked={false} unCheckedChildren="Tắt" checkedChildren="Bật" />);
+    expect(screen.getByText('Tắt')).toBeInTheDocument();
+  });
+});
+
+describe('Switch — batch ⑳ redesign (iOS/MUI-grade)', () => {
+  it('dark-safe: unchecked bg-ink/25, KHÔNG còn rgba(0,0,0 cứng', () => {
+    render(<Switch aria-label="ds" />);
+    const sw = screen.getByRole('switch', { name: 'ds' });
+    expect(sw.className).toContain('bg-ink/25');
+    expect(sw.className).not.toContain('rgba(0,0,0');
+    // gradient layer luôn tồn tại, checked mới opacity-100
+    const grad = sw.querySelector('span.bg-gradient-to-r')!;
+    expect(grad).not.toBeNull();
+    expect(grad.className).toContain('opacity-0');
+  });
+
+  it('checked → gradient layer opacity-100 (accent→accent-hi)', () => {
+    render(<Switch checked aria-label="gr" />);
+    const grad = screen.getByRole('switch', { name: 'gr' }).querySelector('span.bg-gradient-to-r')!;
+    expect(grad).not.toBeNull();
+    expect(grad.className).toContain('opacity-100');
+    expect(grad.className).toContain('from-accent');
+    expect(grad.className).toContain('to-accent-hi');
+  });
+
+  it('pop animation class xuất hiện sau click (bp-switch-pop)', () => {
+    render(<Switch onChange={vi.fn()} aria-label="pop" />);
+    const sw = screen.getByRole('switch', { name: 'pop' });
+    const handle = () => sw.querySelector('span.z-10')!.className;
+    expect(handle()).not.toContain('bp-switch-pop');
+    fireEvent.click(sw);
+    expect(handle()).toContain('bp-switch-pop');
+  });
+
+  it('handle: spring class + group-active:scale-105 + shadow 2 lớp (disabled thì phẳng)', () => {
+    const { rerender } = render(<Switch aria-label="hd" />);
+    const handleOf = () => screen.getByRole('switch', { name: 'hd' }).querySelector('span.z-10')!;
+    let hd = handleOf();
+    expect(hd.className).toContain('group-active:scale-105');
+    expect(hd.className).toContain('ease-[cubic-bezier(0.34,1.56,0.64,1)]');
+    expect(hd.className).toContain('shadow-[');
+    rerender(<Switch aria-label="hd" disabled />);
+    hd = handleOf();
+    expect(hd.className).not.toContain('shadow-[');
+    expect(screen.getByRole('switch', { name: 'hd' }).className).toContain('opacity-50');
+  });
+
+  it('focus-visible ring đồng bộ Button (ring-2 ring-accent/40 offset-2)', () => {
+    render(<Switch aria-label="fv" />);
+    const sw = screen.getByRole('switch', { name: 'fv' });
+    expect(sw.className).toContain('focus-visible:ring-2');
+    expect(sw.className).toContain('focus-visible:ring-accent/40');
+    // KHÔNG ring-offset — khe trắng quanh track tạo cảm giác viền đôi (feedback user ảnh)
+    expect(sw.className).not.toContain('ring-offset');
+    expect(sw.className).not.toContain('focus-visible:outline');
+  });
+});

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

@@ -0,0 +1,33 @@
+// TabMenu — tab-style navigation (links + buttons).
+import type { ReactNode } from 'react';
+
+export interface TabMenuItem { key: string; label: ReactNode; href?: string }
+
+export interface TabMenuProps {
+  model: TabMenuItem[];
+  activeKey?: string;
+  onTabChange?: (key: string) => void;
+  className?: string;
+}
+
+export function TabMenu({ model, activeKey, onTabChange, className }: TabMenuProps) {
+  return (
+    <nav className={`flex gap-1 border-b border-line2${className ? ` ${className}` : ''}`}>
+      {model.map((item) => {
+        const isActive = item.key === activeKey;
+        if (item.href) {
+          return <a key={item.key} href={item.href} aria-current={isActive ? 'page' : undefined}
+            className={`px-4 py-2.5 text-body no-underline transition-colors ${isActive ? 'border-b-2 border-accent font-semibold text-accent' : 'border-b-2 border-transparent text-ink2 hover:text-accent'}`}>
+            {item.label}
+          </a>;
+        }
+        return (
+          <button key={item.key} type="button" aria-current={isActive ? 'page' : undefined} onClick={() => onTabChange?.(item.key)}
+            className={`cursor-pointer border-none bg-transparent px-4 py-2.5 text-body transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ${isActive ? 'border-b-2 border-accent font-semibold text-accent' : 'border-b-2 border-transparent text-ink2 hover:text-accent'}`}>
+            {item.label}
+          </button>
+        );
+      })}
+    </nav>
+  );
+}

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

@@ -0,0 +1,49 @@
+// TabMenu stories — controlled activeKey + link variant.
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { TabMenu } from './index';
+
+/** Tab-style navigation — links or panels by activeKey. */
+const meta = { title: 'Navigation/TabMenu', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function ControlledDemo() {
+  const [tab, setTab] = useState('all');
+  return (
+    <div className="w-[480px]">
+      <TabMenu
+        model={[
+          { key: 'all', label: 'All' },
+          { key: 'doing', label: 'In progress' },
+          { key: 'done', label: 'Done' },
+        ]}
+        activeKey={tab}
+        onTabChange={setTab}
+      />
+      <div className="p-4 text-body text-ink2">
+        {tab === 'all' && 'All tasks.'}
+        {tab === 'doing' && 'Tasks in progress.'}
+        {tab === 'done' && 'Completed tasks.'}
+      </div>
+    </div>
+  );
+}
+
+export const Controlled: Story = {
+  name: 'Controlled — activeKey + panel swap',
+  render: () => <ControlledDemo />,
+};
+
+export const Links: Story = {
+  name: 'Links — href items (active by key)',
+  render: () => (
+    <TabMenu
+      model={[
+        { key: 'docs', label: 'Docs', href: '#' },
+        { key: 'api', label: 'API', href: '#' },
+      ]}
+      activeKey="api"
+    />
+  ),
+};

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

@@ -0,0 +1,50 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { TabMenu } from './index.js';
+afterEach(cleanup);
+describe('TabMenu', () => {
+  it('activeKey + click onChange + href link', async () => {
+    const onTabChange = vi.fn();
+    const user = userEvent.setup();
+    render(<TabMenu activeKey="b" onTabChange={onTabChange}
+      model={[{ key: 'a', label: 'Home', href: '/' }, { key: 'b', label: 'Tasks' }]} />);
+    expect(screen.getByRole('link', { name: 'Home' })).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Tasks' }));
+    expect(onTabChange).toHaveBeenCalledWith('b');
+  });
+});
+
+describe('TabMenu — controlled + links', () => {
+  it('onTabChange bắn key khi bấm tab khác', async () => {
+    const onTabChange = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <TabMenu
+        model={[
+          { key: 'all', label: 'All' },
+          { key: 'doing', label: 'In progress' },
+        ]}
+        activeKey="all"
+        onTabChange={onTabChange}
+      />,
+    );
+    await user.click(screen.getByRole('button', { name: 'In progress' }));
+    expect(onTabChange).toHaveBeenCalledWith('doing');
+  });
+
+  it('href item → render <a> (không button)', () => {
+    render(
+      <TabMenu
+        model={[
+          { key: 'docs', label: 'Docs', href: '#' },
+          { key: 'api', label: 'API', href: '#' },
+        ]}
+        activeKey="api"
+      />,
+    );
+    const link = screen.getByRole('link', { name: 'API' });
+    expect(link).toHaveAttribute('href', '#');
+    expect(link).toHaveAttribute('aria-current', 'page');
+  });
+});