create-wakii-stack 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,137 @@
+// MegaMenu stories — hover or click a root item to open the multi-column panel.
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Icon } from '../icons/index.js';
+import { MegaMenu, type MegaMenuItem } from './index';
+
+const meta = { title: 'Navigation/MegaMenu', component: MegaMenu, tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+const PROJECTS: MegaMenuItem = {
+  key: 'projects',
+  label: 'Projects',
+  children: [
+    {
+      key: 'work',
+      label: 'Workspaces',
+      items: [
+        { key: 'tasks', label: 'Tasks board' },
+        { key: 'activity', label: 'Activity feed' },
+        { key: 'timesheet', label: 'Timesheet' },
+      ],
+    },
+    {
+      key: 'insights',
+      label: 'Insights',
+      items: [
+        { key: 'charts', label: 'Charts' },
+        { key: 'reports', label: 'Reports' },
+      ],
+    },
+    {
+      key: 'admin',
+      label: 'Administration',
+      items: [
+        { key: 'members', label: 'Members' },
+        { key: 'webhooks', label: 'Webhooks' },
+        { key: 'audit', label: 'Audit log' },
+      ],
+    },
+  ],
+};
+
+/** Basic — hover or click "Projects" for a 3-column panel; ESC / outside click / leaf click close it. */
+export const Basic: Story = {
+  render: () => (
+    <MegaMenu
+      items={[
+        PROJECTS,
+        { key: 'docs', label: 'Docs', onClick: () => window.console.log('docs') },
+        { key: 'about', label: 'About', onClick: () => window.console.log('about') },
+      ]}
+    />
+  ),
+};
+
+/** WithIcons — root items and leaves carry icons from the kit set. */
+export const WithIcons: Story = {
+  render: () => (
+    <MegaMenu
+      items={[
+        {
+          key: 'workspace',
+          label: 'Workspace',
+          icon: <Icon name="home" size={14} className="mr-1.5 inline-block text-accent" />,
+          children: [
+            {
+              key: 'build',
+              label: 'Build',
+              items: [
+                { key: 'board', label: 'Board', icon: <Icon name="menu-bars" size={14} className="text-ink3" /> },
+                { key: 'calendar', label: 'Calendar', icon: <Icon name="calendar" size={14} className="text-ink3" /> },
+                { key: 'clock', label: 'Time tracking', icon: <Icon name="clock" size={14} className="text-ink3" /> },
+              ],
+            },
+            {
+              key: 'people',
+              label: 'People',
+              items: [
+                { key: 'users', label: 'Members', icon: <Icon name="users" size={14} className="text-ink3" /> },
+                { key: 'bell', label: 'Notifications', icon: <Icon name="bell" size={14} className="text-ink3" /> },
+              ],
+            },
+          ],
+        },
+        { key: 'help', label: 'Help', onClick: () => window.console.log('help') },
+      ]}
+    />
+  ),
+};
+
+/** DangerItems — destructive leaves render red (hover keeps the fail tint). */
+export const DangerItems: Story = {
+  render: () => (
+    <MegaMenu
+      items={[
+        {
+          key: 'project',
+          label: 'Project X',
+          children: [
+            {
+              key: 'manage',
+              label: 'Manage',
+              items: [
+                { key: 'rename', label: 'Rename…' },
+                { key: 'archive', label: 'Archive' },
+                { key: 'delete', label: 'Delete project', danger: true },
+              ],
+            },
+          ],
+        },
+      ]}
+    />
+  ),
+};
+
+/** FlatBar — roots without children behave as plain links (no panel, role menu never rendered). */
+export const FlatBar: Story = {
+  render: () => (
+    <MegaMenu
+      items={[
+        { key: 'overview', label: 'Overview', onClick: () => window.console.log('overview') },
+        { key: 'board', label: 'Board', onClick: () => window.console.log('board') },
+        { key: 'activity', label: 'Activity', onClick: () => window.console.log('activity') },
+      ]}
+    />
+  ),
+};
+
+/** DarkTheme — panel + bar trên dark canvas (tokens cascade, không code riêng cho dark). */
+export const DarkTheme: Story = {
+  name: 'Dark theme — bar + panel on dark canvas',
+  render: () => (
+    <div data-bp-theme="dark" className="w-full rounded-xl bg-canvas p-4">
+      <MegaMenu items={[PROJECTS]} className="rounded-lg" />
+    </div>
+  ),
+};

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

@@ -0,0 +1,130 @@
+// MegaMenu tests — hover/click mở, ESC/click-outside/mouseLeave đóng, role
+// menu/menuitem, panel multi-column (grid-template-columns theo số group).
+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 { MegaMenu, type MegaMenuItem } from './index.js';
+
+afterEach(cleanup);
+
+const ITEMS: MegaMenuItem[] = [
+  {
+    key: 'product',
+    label: 'Sản phẩm',
+    children: [
+      {
+        key: 'dev',
+        label: 'Phát triển',
+        items: [
+          { key: 'tasks', label: 'Tasks', onClick: vi.fn() },
+          { key: 'activity', label: 'Activity' },
+        ],
+      },
+      {
+        key: 'ops',
+        label: 'Vận hành',
+        items: [{ key: 'monitor', label: 'Monitor' }],
+      },
+    ],
+  },
+  { key: 'about', label: 'Giới thiệu', onClick: vi.fn() },
+];
+
+describe('MegaMenu — mở/đóng', () => {
+  it('render bar + root items; chưa có panel', () => {
+    render(<MegaMenu items={ITEMS} />);
+    expect(screen.getByRole('button', { name: 'Sản phẩm' })).toBeInTheDocument();
+    expect(screen.queryByText('Phát triển')).toBeNull();
+  });
+
+  it('hover root có children → panel mở; mouseLeave → đóng', async () => {
+    const user = userEvent.setup();
+    render(<MegaMenu items={ITEMS} />);
+    await user.hover(screen.getByRole('button', { name: 'Sản phẩm' }));
+    expect(screen.getByText('Phát triển')).toBeInTheDocument();
+    fireEvent.mouseLeave(screen.getByRole('button', { name: 'Sản phẩm' }));
+    expect(screen.queryByText('Phát triển')).toBeNull();
+  });
+
+  it('click root mở panel (đóng nhường ESC/leave/leaf); click leaf → onClick + đóng', () => {
+    const onLeaf = vi.fn();
+    render(
+      <MegaMenu
+        items={[
+          {
+            key: 'p',
+            label: 'Sản phẩm',
+            children: [{ key: 'g', label: 'Nhóm', items: [{ key: 'l', label: 'Leaf', onClick: onLeaf }] }],
+          },
+        ]}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Sản phẩm' }));
+    expect(screen.getByText('Nhóm')).toBeInTheDocument();
+    // fireEvent (không user-event): synthetic pointer-move của user-event phát
+    // mouseout với relatedTarget ngoài wrapper → panel đóng trước click (giới
+    // hạn tool test; browser thật relatedTarget=panel → giữ mở đúng).
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Leaf' }));
+    expect(onLeaf).toHaveBeenCalledTimes(1);
+    expect(screen.queryByText('Nhóm')).toBeNull();
+  });
+
+  it('ESC → panel đóng + trả focus về trigger', async () => {
+    const user = userEvent.setup();
+    render(<MegaMenu items={ITEMS} />);
+    const trigger = screen.getByRole('button', { name: 'Sản phẩm' });
+    await user.click(trigger);
+    expect(screen.getByRole('menu')).toBeInTheDocument();
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(screen.queryByRole('menu')).toBeNull();
+    expect(trigger).toHaveFocus();
+  });
+
+  it('root lá (không children) → click onClick trực tiếp, không có panel/menu', async () => {
+    const onAbout = vi.fn();
+    const user = userEvent.setup();
+    render(<MegaMenu items={[{ key: 'about', label: 'Giới thiệu', onClick: onAbout }]} />);
+    await user.click(screen.getByRole('button', { name: 'Giới thiệu' }));
+    expect(onAbout).toHaveBeenCalledTimes(1);
+    expect(screen.queryByRole('menu')).toBeNull();
+  });
+});
+
+describe('MegaMenu — panel + a11y', () => {
+  it('panel multi-column: grid-template-columns repeat(2, …) với 2 group', async () => {
+    const user = userEvent.setup();
+    render(<MegaMenu items={ITEMS} />);
+    await user.hover(screen.getByRole('button', { name: 'Sản phẩm' }));
+    const panel = screen.getByRole('menu');
+    expect(panel.style.gridTemplateColumns).toBe('repeat(2, minmax(10rem, 1fr))');
+    expect(screen.getByText('Vận hành')).toBeInTheDocument(); // cột 2
+  });
+
+  it('trigger aria-haspopup + aria-expanded; leaf role=menuitem', async () => {
+    const user = userEvent.setup();
+    render(<MegaMenu items={ITEMS} />);
+    const trigger = screen.getByRole('button', { name: 'Sản phẩm' });
+    expect(trigger).toHaveAttribute('aria-haspopup', 'menu');
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    await user.hover(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getAllByRole('menuitem')).toHaveLength(3); // 2 + 1 leaf
+  });
+
+  it('leaf danger → text-st-fail', async () => {
+    const user = userEvent.setup();
+    render(
+      <MegaMenu
+        items={[
+          {
+            key: 'p',
+            label: 'Sản phẩm',
+            children: [{ key: 'g', label: 'Nhóm', items: [{ key: 'del', label: 'Xoá dự án', danger: true }] }],
+          },
+        ]}
+      />,
+    );
+    await user.hover(screen.getByRole('button', { name: 'Sản phẩm' }));
+    expect(screen.getByRole('menuitem', { name: 'Xoá dự án' }).className).toContain('text-st-fail');
+  });
+});

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

@@ -0,0 +1,76 @@
+// Mention — @autocomplete trong textarea (lite: trigger @ + suggestion list).
+import { useRef, useState } from 'react';
+
+export interface MentionProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  suggestions?: string[];
+  placeholder?: string;
+  className?: string;
+}
+
+export function Mention({ value: valueProp, onChange, suggestions = [], placeholder, className }: MentionProps) {
+  const [internal, setInternal] = useState('');
+  const value = valueProp ?? internal;
+  const [mentionQuery, setMentionQuery] = useState<string | null>(null);
+  const [mentionStart, setMentionStart] = useState(0);
+  // Keyboard nav suggestion list (↑↓ + Enter/Esc) — focus giữ trong textarea.
+  const [activeIdx, setActiveIdx] = useState(0);
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  const matches = mentionQuery !== null
+    ? suggestions.filter((s) => s.toLowerCase().includes(mentionQuery.toLowerCase())).slice(0, 5)
+    : [];
+
+  function detectMention(text: string, pos: number) {
+    const before = text.slice(0, pos);
+    const match = before.match(/@(\w*)$/);
+    if (match) { setMentionStart(pos - match[0].length); setMentionQuery(match[1]); }
+    else setMentionQuery(null);
+  }
+
+  function selectMention(name: string) {
+    if (!ref.current) return;
+    const before = value.slice(0, mentionStart);
+    const after = value.slice(ref.current.selectionStart);
+    const next = `${before}@${name} ${after}`;
+    setInternal(next); onChange?.(next); setMentionQuery(null);
+    ref.current.focus();
+  }
+
+  return (
+    <div className={`relative${className ? ` ${className}` : ''}`}>
+      <textarea
+        ref={ref} value={value} placeholder={placeholder}
+        className="w-full rounded-lg border border-line bg-s3 p-3 text-body text-ink placeholder:text-ink4 shadow-[var(--ele-1)] transition-[background-color,border-color,box-shadow] duration-200 ease-[var(--ease-smooth)] focus:border-accent-hi focus:bg-s1 focus:shadow-[var(--ele-2)] focus:ring-[3px] focus:ring-accent/40 focus:outline-none"
+        onChange={(e) => { setInternal(e.target.value); onChange?.(e.target.value); detectMention(e.target.value, e.target.selectionStart); setActiveIdx(0); }}
+        onKeyDown={(e) => {
+          if (mentionQuery !== null && matches.length > 0) {
+            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+              e.preventDefault();
+              const dir = e.key === 'ArrowDown' ? 1 : -1;
+              setActiveIdx((i) => (i + dir + matches.length) % matches.length);
+            } else if (e.key === 'Enter') {
+              e.preventDefault();
+              selectMention(matches[activeIdx]);
+            } else if (e.key === 'Escape') {
+              setMentionQuery(null);
+            }
+          }
+        }}
+      />
+      {mentionQuery !== null && matches.length > 0 && (
+        <ul role="listbox" aria-label="Gợi ý mention" className="absolute z-[var(--z-popover)] m-0 origin-bottom list-none rounded-xl border border-line bg-s2 bg-[image:var(--wash)] p-1 shadow-[var(--shadow-pop),var(--ele-3)] animate-[bp-zoom-in_var(--motion-fast)_var(--ease-enter)]" style={{ bottom: '100%', left: 0 }}>
+          {matches.map((s, i) => (
+            <li key={s}>
+              <button type="button" role="option" aria-selected={i === activeIdx}
+                style={{ animationDelay: `${Math.min(i, 12) * 30}ms` }}
+                className={`w-full cursor-pointer rounded-lg border-none bg-transparent px-3 py-1.5 text-left text-body text-ink transition-colors duration-200 ease-[var(--ease-smooth)] animate-[bp-slide-up-in_240ms_var(--ease-smooth)_backwards] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ${i === activeIdx ? 'bg-s3' : 'hover:bg-accent/5'}`}
+                onClick={() => selectMention(s)}>@{s}</button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,44 @@
+// Mention stories — type @ to trigger the suggestion list, pick inserts "@Name ".
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Mention } from './index';
+
+const meta = { title: 'Forms/Mention', component: Mention, tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+const PEOPLE = ['An', 'Binh', 'Chi', 'Dung'];
+
+/** Basic — type @ → suggestions → click/keyboard to pick. */
+export const Basic: Story = {
+  render: () => <Mention suggestions={PEOPLE} placeholder="Type @ to mention…" className="w-96" />,
+};
+
+/** Controlled — useState demo: value shown under the textarea. */
+export const Controlled: Story = {
+  render: () => <MentionControlledDemo />,
+};
+
+/** DarkTheme — textarea + open suggestion list on dark canvas. */
+export const DarkTheme: Story = {
+  render: () => (
+    <div data-bp-theme="dark" className="w-96 rounded-xl bg-canvas p-4">
+      <Mention suggestions={PEOPLE.slice(0, 3)} placeholder="Type @ to mention…" />
+    </div>
+  ),
+};
+
+/** Empty — suggestions=[] → no dropdown even after @. */
+export const Empty: Story = {
+  args: { suggestions: [], placeholder: 'No one to mention…', className: 'w-96' },
+};
+
+function MentionControlledDemo() {
+  const [v, setV] = useState('');
+  return (
+    <div className="w-96">
+      <Mention value={v} onChange={setV} suggestions={PEOPLE} placeholder="Type @ to mention…" />
+      <p className="mt-2 font-mono text-meta text-ink3">value: <strong className="text-ink">{v || '—'}</strong></p>
+    </div>
+  );
+}

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

@@ -0,0 +1,87 @@
+// Mention tests — gõ @ → dropdown gợi ý, query lọc, chọn → chèn "@Name " +
+// onChange + đóng; không @ / không match → không dropdown.
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Mention } from './index.js';
+
+const PEOPLE = ['An', 'Binh', 'Chi'];
+
+afterEach(cleanup);
+
+describe('Mention', () => {
+  it('gõ @ → dropdown hiện gợi ý; không @ → không dropdown', async () => {
+    const user = userEvent.setup();
+    render(<Mention suggestions={PEOPLE} />);
+    const textarea = screen.getByRole('textbox');
+    await user.type(textarea, 'hello');
+    expect(screen.queryByText('@An')).toBeNull();
+    await user.type(textarea, ' @');
+    expect(screen.getByText('@An')).toBeInTheDocument();
+    expect(screen.getByText('@Binh')).toBeInTheDocument();
+    expect(screen.getByText('@Chi')).toBeInTheDocument();
+  });
+
+  it('query sau @ lọc gợi ý', async () => {
+    const user = userEvent.setup();
+    render(<Mention suggestions={PEOPLE} />);
+    await user.type(screen.getByRole('textbox'), 'hey @c');
+    expect(screen.getByText('@Chi')).toBeInTheDocument();
+    expect(screen.queryByText('@An')).toBeNull();
+  });
+
+  it('chọn mention → chèn "@Name " vào value + onChange + dropdown đóng', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Mention suggestions={PEOPLE} onChange={onChange} />);
+    const textarea = screen.getByRole('textbox');
+    await user.type(textarea, 'hi @');
+    await user.click(screen.getByText('@An'));
+    expect(onChange).toHaveBeenLastCalledWith('hi @An ');
+    expect(textarea).toHaveValue('hi @An ');
+    expect(screen.queryByText('@Binh')).toBeNull();
+  });
+
+  it('chèn mention vào text có sẵn — splice đúng vị trí @, bỏ query chưa hoàn tất', async () => {
+    const user = userEvent.setup();
+    render(<Mention suggestions={PEOPLE} />);
+    const textarea = screen.getByRole('textbox');
+    await user.type(textarea, 'x @an');
+    expect(screen.getByText('@An')).toBeInTheDocument();
+    await user.click(screen.getByText('@An'));
+    expect(textarea).toHaveValue('x @An ');
+    expect(screen.queryByText('@Binh')).toBeNull();
+  });
+
+  it('@ không khớp ai → không dropdown', async () => {
+    const user = userEvent.setup();
+    render(<Mention suggestions={PEOPLE} />);
+    await user.type(screen.getByRole('textbox'), '@zzz');
+    expect(screen.queryByText('@An')).toBeNull();
+  });
+});
+
+describe('Mention — keyboard nav (audit fix)', () => {
+  it('ArrowDown + Enter → chọn gợi ý đang active (không xuống dòng)', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Mention suggestions={PEOPLE} onChange={onChange} />);
+    const textarea = screen.getByRole('textbox');
+    await user.type(textarea, 'hi @');
+    await user.keyboard('{ArrowDown}'); // active 0 → 1 = Binh
+    expect(screen.getByText('@Binh')).toHaveClass('bg-s3');
+    await user.keyboard('{Enter}');
+    expect(onChange).toHaveBeenLastCalledWith('hi @Binh ');
+    expect(screen.queryByText('@An')).toBeNull(); // dropdown đóng
+  });
+
+  it('Escape đóng dropdown', async () => {
+    const user = userEvent.setup();
+    render(<Mention suggestions={PEOPLE} />);
+    const textarea = screen.getByRole('textbox');
+    await user.type(textarea, '@');
+    expect(screen.getByText('@An')).toBeInTheDocument();
+    await user.keyboard('{Escape}');
+    expect(screen.queryByText('@An')).toBeNull();
+  });
+});