create-wakii-stack 0.0.0-stage → 0.1.1

package/stack-template/app/admin/src/layout/AdminLayout.tsx

@@ -0,0 +1,212 @@
+// AdminLayout — shell app admin (batch ⑦): Sidebar ui-kit (collapsible) + Menu đa cấp
+// + Header (Input search, bell + Badge, avatar Dropdown đăng xuất giả, dark toggle
+// qua data-bp-theme + useLocalStorage persist). Route transition: key pathname →
+// bp-fade-in mỗi lần đổi trang (motion identity — chỉ animate transform/opacity).
+import { useEffect, useState } from 'react';
+import { Outlet, useLocation, useNavigate } from 'react-router';
+import {
+  Avatar,
+  Badge,
+  Dropdown,
+  Icon,
+  Input,
+  Menu,
+  Sidebar,
+  Switch,
+  message,
+  useLocalStorage,
+  type MenuItemData,
+} from '@wakii/ui-kit';
+
+/* Badge count đè GÓC icon (absolute) — không chiếm layout, không tràn rìa khi
+ * sidebar compact (fix ⑥-3): size-4, text-[9px], ring nền surface tách viền. */
+function IconWithCount({ name, count }: { name: 'home' | 'users' | 'star' | 'settings'; count: number }) {
+  return (
+    <span className="relative inline-flex">
+      <Icon name={name} size={16} />
+      <span
+        aria-hidden="true"
+        className="absolute -right-1.5 -top-1.5 grid size-4 place-items-center rounded-pill bg-st-fail text-[9px] font-bold leading-none text-white ring-2 ring-s2"
+      >
+        {count}
+      </span>
+    </span>
+  );
+}
+
+const MENU_MAIN: MenuItemData[] = [
+  { key: '/', label: 'Dashboard', icon: <IconWithCount name="home" count={7} /> },
+  {
+    key: 'group-manage',
+    label: 'Quản lý',
+    icon: <Icon name="users" size={16} />,
+    children: [
+      { key: '/users', label: 'Users', icon: <Icon name="user" size={14} /> },
+      { key: '/upload', label: 'Upload files', icon: <Icon name="upload" size={14} /> },
+    ],
+  },
+  {
+    key: 'group-demo',
+    label: 'Demo',
+    icon: <Icon name="star" size={16} />,
+    children: [
+      { key: '/demo/hooks', label: 'Hooks', icon: <Icon name="copy" size={14} /> },
+      { key: '/demo/components', label: 'Components', icon: <Icon name="menu-bars" size={14} /> },
+    ],
+  },
+];
+
+const MENU_SECONDARY: MenuItemData[] = [{ key: '/settings', label: 'Cài đặt', icon: <Icon name="settings" size={16} /> }];
+
+// MoonIcon/SunIcon — SVG stroke tự vẽ là NGOẠI LỆ được ghi: bộ primeicons 50 của
+// ui-kit không có moon/sun (rule 9 cấm tự vẽ khi có Icon thay thế — ở đây không có).
+function MoonIcon() {
+  return (
+    <svg viewBox="0 0 24 24" width={14} height={14} fill="none" stroke="currentColor" strokeWidth={2} aria-hidden="true">
+      <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function SunIcon() {
+  return (
+    <svg viewBox="0 0 24 24" width={14} height={14} fill="none" stroke="currentColor" strokeWidth={2} aria-hidden="true">
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function Header({ dark, onToggleDark }: { dark: boolean; onToggleDark: () => void }) {
+  const navigate = useNavigate();
+  const [query, setQuery] = useState('');
+
+  return (
+    <header className="sticky top-0 z-[var(--z-dropdown)] flex h-14 items-center gap-3 border-b border-line bg-s1 px-4 md:px-6">
+      <label className="hidden min-w-0 flex-1 sm:block">
+        <Input
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Tìm kiếm…"
+          aria-label="Tìm kiếm toàn cục"
+          prefix={<Icon name="search" size={14} />}
+        />
+      </label>
+      <div className="ml-auto flex items-center gap-4">
+        <button
+          type="button"
+          aria-label="Thông báo (3 mới)"
+          className="relative cursor-pointer rounded-lg border-none bg-transparent p-1.5 text-ink2 hover:bg-s3"
+        >
+          <Icon name="bell" size={18} />
+          <span className="absolute -right-1 -top-1">
+            <Badge variant="failed">3</Badge>
+          </span>
+        </button>
+        <button
+          type="button"
+          onClick={onToggleDark}
+          aria-label={dark ? 'Tắt dark mode' : 'Bật dark mode'}
+          className="cursor-pointer rounded-lg border-none bg-transparent p-1.5 text-ink2 hover:bg-s3"
+        >
+          {dark ? <SunIcon /> : <MoonIcon />}
+        </button>
+        <Dropdown
+          trigger={
+            <button type="button" className="flex cursor-pointer items-center gap-2 rounded-pill border-none bg-transparent p-1 pr-2 hover:bg-s3">
+              <Avatar size={28}>AL</Avatar>
+              <span className="hidden text-body text-ink md:inline">Alice</span>
+              <Icon name="chevron-down" size={12} className="text-ink3" />
+            </button>
+          }
+          items={[
+            { key: 'profile', label: 'Hồ sơ' },
+            { key: 'settings', label: 'Cài đặt' },
+            { key: 'logout', label: 'Đăng xuất', danger: true },
+          ]}
+          onItemClick={(key) => {
+            if (key === 'settings') navigate('/settings');
+            if (key === 'profile') message.info('Hồ sơ (demo)');
+            if (key === 'logout') message.error('Đăng xuất (demo — chưa nối auth)');
+          }}
+        />
+      </div>
+    </header>
+  );
+}
+
+// Dropdown được import từ barrel ở đầu file
+
+export function AdminLayout() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [theme, setTheme] = useLocalStorage<'light' | 'dark'>('admin-theme', 'light');
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+
+  // Dark theme qua data-bp-theme (ui-kit dark.css override theo attr này)
+  useEffect(() => {
+    document.documentElement.setAttribute('data-bp-theme', theme);
+    return () => document.documentElement.removeAttribute('data-bp-theme');
+  }, [theme]);
+
+  return (
+    <div className="flex min-h-screen bg-canvas">
+      <Sidebar
+        ariaLabel="Sidebar admin"
+        brand={
+          sidebarCollapsed ? (
+            /* Compact: chỉ logo W, căn giữa ngang (fix ⑥-1 — hết tràn chữ). */
+            <div className="flex w-full justify-center">
+              <span className="grid size-7 shrink-0 place-items-center rounded-lg bg-accent text-label font-bold text-white">W</span>
+            </div>
+          ) : (
+            <div className="flex items-center gap-2 px-1">
+              <span className="grid size-7 shrink-0 place-items-center rounded-lg bg-accent text-label font-bold text-white">W</span>
+              <span className="whitespace-nowrap text-body font-semibold text-ink">Wakii Admin</span>
+            </div>
+          )
+        }
+        footer={
+          <div className={`flex items-center gap-2 px-2${sidebarCollapsed ? ' justify-center' : ''}`}>
+            <Switch
+              size="small"
+              checked={theme === 'dark'}
+              onChange={(checked) => setTheme(checked ? 'dark' : 'light')}
+              aria-label="Dark mode"
+            />
+            {!sidebarCollapsed && <span className="whitespace-nowrap text-meta text-ink3">Dark mode</span>}
+          </div>
+        }
+        onToggle={setSidebarCollapsed}
+      >
+        <Menu
+          items={MENU_MAIN}
+          mode="vertical"
+          selectedKey={location.pathname}
+          onSelect={(key) => {
+            if (key.startsWith('/')) navigate(key);
+          }}
+        />
+        {/* Divider mảnh tách nhóm chính/phụ — đều nhịp dọc cả expanded lẫn compact (fix ⑥-5). */}
+        <div role="separator" className="my-2 border-t border-line" />
+        <Menu
+          items={MENU_SECONDARY}
+          mode="vertical"
+          selectedKey={location.pathname}
+          onSelect={(key) => {
+            if (key.startsWith('/')) navigate(key);
+          }}
+        />
+      </Sidebar>
+      <div className="flex min-w-0 flex-1 flex-col">
+        <Header dark={theme === 'dark'} onToggleDark={() => setTheme(theme === 'dark' ? 'light' : 'dark')} />
+        <main
+          key={location.pathname}
+          className="min-w-0 flex-1 animate-[bp-fade-in_var(--motion-base)_var(--ease-enter)] p-4 md:p-6"
+        >
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}

package/stack-template/app/admin/src/main.tsx

@@ -0,0 +1,17 @@
+// Entry — app admin (batch ⑦). CSS: tokens + dark theme (import TƯỜNG MINH SAU tokens —
+// dark block phải đứng sau :root để thắng specificity ngang; @import nội bộ tokens.css
+// đứng TRƯỚC :root nên bị light override — bug toggle không ăn, fix 2026-10-18) + base
+// (reset) + tailwind utilities. 1 lần ở root.
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import '@wakii/ui-kit/styles/tokens.css';
+import '@wakii/ui-kit/styles/themes/dark.css';
+import '@wakii/ui-kit/styles/base.css';
+import './styles.css';
+import { App } from './App.js';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/stack-template/app/admin/src/pages/ComponentsDemo.tsx

@@ -0,0 +1,138 @@
+// ComponentsDemo — gallery nhanh các primitives: Button/Badge/Tag/Alert/Progress/
+// message/controls (batch ⑦). Còn lại xem Storybook :6006.
+// Grid gallery qua Row/Col (24-col: 1 cột mobile / 2 cột ≥md / 3 cột ≥xl) — app-fit part 2.
+import { useState } from 'react';
+import {
+  Alert,
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  Checkbox,
+  Col,
+  Icon,
+  Progress,
+  RadioGroup,
+  Row,
+  Switch,
+  Tag,
+  message,
+} from '@wakii/ui-kit';
+
+export function ComponentsDemo() {
+  const [switchOn, setSwitchOn] = useState(true);
+  const [digest, setDigest] = useState('daily');
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div>
+        <h1 className="m-0 text-h1 font-semibold text-ink">Components</h1>
+        <p className="mt-1 mb-0 text-body text-ink2">
+          Gallery nhanh — full variants + docs sống tại Storybook :6006.
+        </p>
+      </div>
+
+      <Row gutter={[16, 16]}>
+        <Col xs={24} md={12} xl={8}>
+          <Card title="Buttons" className="h-full">
+            <div className="flex flex-wrap items-center gap-2">
+              <Button type="primary">Primary</Button>
+              <Button>Default</Button>
+              <Button type="text">Text</Button>
+              <Button danger>Danger</Button>
+              <Button type="primary" loading>
+                Loading
+              </Button>
+              <Button disabled>Disabled</Button>
+            </div>
+          </Card>
+        </Col>
+
+        <Col xs={24} md={12} xl={8}>
+          <Card title="Badge — 9 variants" className="h-full">
+            <div className="flex flex-wrap gap-2">
+              {(['todo', 'doing', 'done', 'failed', 'created', 'updated', 'assigned', 'deleted', 'assignmentFailed'] as const).map(
+                (variant) => (
+                  <Badge key={variant} variant={variant}>
+                    {variant}
+                  </Badge>
+                ),
+              )}
+            </div>
+          </Card>
+        </Col>
+
+        <Col xs={24} md={12} xl={8}>
+          <Card title="Tag — closable" className="h-full">
+            <div className="flex flex-wrap gap-2">
+              <Tag closable onClose={() => message.info('Đóng tag (demo)')}>
+                react
+              </Tag>
+              <Tag closable onClose={() => message.info('Đóng tag (demo)')}>
+                module-federation
+              </Tag>
+              <Tag icon={<Icon name="check" size={10} />}>kafka</Tag>
+            </div>
+          </Card>
+        </Col>
+
+        <Col xs={24} md={12} xl={8}>
+          <Card title="Alert — 4 types" className="h-full">
+            <div className="flex flex-col gap-2">
+              <Alert type="success" message="Đã lưu thay đổi" />
+              <Alert type="warning" message="Sắp vượt quota storage" />
+              <Alert type="error" message="Saga thất bại — xem DLQ" />
+            </div>
+          </Card>
+        </Col>
+
+        <Col xs={24} md={12} xl={8}>
+          <Card title="Progress + Avatar" className="h-full">
+            <div className="flex flex-col gap-3">
+              <Progress percent={40} />
+              <Progress percent={72} />
+              <Progress percent={100} status="success" />
+              <Progress percent={30} status="exception" />
+              <div className="flex items-center gap-2">
+                <Avatar>AL</Avatar>
+                <Avatar src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect width='32' height='32' fill='%231677ff'/%3E%3C/svg%3E" alt="Avatar demo" />
+                <span className="text-meta text-ink3">Avatar init + src</span>
+              </div>
+            </div>
+          </Card>
+        </Col>
+
+        <Col xs={24} md={12} xl={8}>
+          <Card title="Controls + message" className="h-full">
+            <div className="flex flex-col gap-3">
+              <label className="flex items-center gap-2 text-body text-ink">
+                <Checkbox defaultChecked onChange={() => message.success('Checkbox (demo)')} />
+                Nhận email thông báo
+              </label>
+              <div className="flex items-center gap-2 text-body text-ink">
+                <Switch checked={switchOn} onChange={setSwitchOn} aria-label="Chế độ thử nghiệm" />
+                Chế độ thử nghiệm
+              </div>
+              <RadioGroup
+                value={digest}
+                onChange={setDigest}
+                options={[
+                  { label: 'Hàng ngày', value: 'daily' },
+                  { label: 'Hàng tuần', value: 'weekly' },
+                ]}
+              />
+              <div className="flex gap-2">
+                <Button size="small" onClick={() => message.success('Thành công!')}>
+                  success
+                </Button>
+                <Button size="small" onClick={() => message.error('Thất bại!')}>
+                  error
+                </Button>
+              </div>
+            </div>
+          </Card>
+        </Col>
+      </Row>
+    </div>
+  );
+}

package/stack-template/app/admin/src/pages/Dashboard.tsx

@@ -0,0 +1,182 @@
+// Dashboard — MỘT THỂ THỐNG NHẤT (vision-audit coordinator 2026-10-18).
+// ANCHOR = chart card: Card (bg-s2 + border-line + rounded-xl + body p-6, header
+// title + extra phải). Mọi khối theo anchor đó:
+// - Stat cards: cùng Card, nội dung icon size-10 (accent/10) + label text-ink2 +
+//   số text-2xl font-semibold + delta pill nhỏ thống nhất (không Statistic/Tag rời rạc)
+// - Nhịp dọc: MỘT scale gap-6 giữa mọi hàng (hết mt-4/mt-6 lẫn lộn)
+// - Cột phải: Timeline + EmptyState stacked flex-1 — hai card CAO ĐỀU
+// - Headers: chart + timeline cùng pattern title trái + Tag phải
+// Grid responsive 1/2/4 cột stats; chart 3/5 + phải 2/5 trên xl.
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Button, Card, Chart, Col, EmptyState, Icon, Row, Tag, Timeline, message } from '@wakii/ui-kit';
+
+const STATS = [
+  { title: 'Người dùng', value: '1.284', tag: '+12%', icon: 'users' as const },
+  { title: 'Tasks đang mở', value: '316', tag: '+5%', icon: 'check-circle' as const },
+  { title: 'File upload', value: '89', tag: '+23%', icon: 'upload' as const },
+  { title: 'Uptime', value: '99,98%', tag: 'SLA', icon: 'info-circle' as const },
+];
+
+// Shape FLAT chuẩn kit (labels/datasets top-level — Chart component wrap `data`
+// khi đẩy vào chart.js; fix 2026-10-24: component giờ hiểu cả flat lẫn nested,
+// consumer chuẩn hoá về flat theo type khai báo — hết cast `as unknown`).
+const CHART_CONFIG_BASE = {
+  type: 'line' as const,
+  labels: ['T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN'],
+  datasets: [
+    {
+      label: 'Tasks',
+      data: [12, 19, 8, 22, 30, 25, 18],
+      tension: 0.35,
+      fill: true,
+    },
+    {
+      label: 'Uploads',
+      data: [4, 7, 3, 9, 12, 8, 6],
+      tension: 0.35,
+      fill: true,
+    },
+  ],
+  // animation:false — render đồng bộ lúc constructor, không phụ thuộc rAF (headless/tab
+  // background vẫn vẽ đúng frame đầu)
+  options: { responsive: true, maintainAspectRatio: false, animation: false },
+};
+
+// Màu chart — probe token theo theme scope (port pattern app/ui-kit/src/templates/
+// dashboard.stories.tsx: canvas không hiểu var(--), đọc computed style qua span ẩn,
+// fallback hex y nguyên template). Bổ sung MutationObserver trên <html data-bp-theme>:
+// AdminLayout toggle dark KHÔNG remount trang — đổi theme là chart re-resolve ngay.
+const FALLBACK_COLORS = { accent: '#1677ff', done: '#52c41a' };
+
+function useChartColors() {
+  const probeRef = useRef<HTMLSpanElement>(null);
+  const [colors, setColors] = useState(FALLBACK_COLORS);
+  useLayoutEffect(() => {
+    const read = () => {
+      const cs = probeRef.current ? getComputedStyle(probeRef.current) : null;
+      if (!cs) return;
+      setColors({
+        accent: cs.getPropertyValue('--accent').trim() || FALLBACK_COLORS.accent,
+        done: cs.getPropertyValue('--st-done').trim() || FALLBACK_COLORS.done,
+      });
+    };
+    read();
+    const observer = new MutationObserver(read);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-bp-theme'] });
+    return () => observer.disconnect();
+  }, []);
+  return { probeRef, colors };
+}
+
+const HAS_CHART_DATA = CHART_CONFIG_BASE.datasets.some((dataset) => dataset.data.length > 0);
+
+export function Dashboard() {
+  // Màu chart theo theme — probe + re-resolve khi dark toggle (xem useChartColors)
+  const { probeRef, colors } = useChartColors();
+  // Dataset màu theo token theme (probe span ẩn + MutationObserver dark toggle)
+  const CHART_CONFIG = useMemo(
+    () => ({
+      ...CHART_CONFIG_BASE,
+      datasets: CHART_CONFIG_BASE.datasets.map((ds, i) => {
+        const color = i === 0 ? colors.accent : colors.done;
+        // Fill giữ alpha 12% như bản cũ — color-mix trên token (canvas không support
+        // color-mix thì chỉ bỏ fill, line vẫn vẽ đúng màu token)
+        return { ...ds, borderColor: color, backgroundColor: `color-mix(in srgb, ${color} 12%, transparent)` };
+      }),
+    }),
+    [colors],
+  );
+  return (
+    <div className="flex flex-col gap-6">
+      {/* Probe đọc token trong đúng theme scope (dark toggle cascade tới đây) */}
+      <span ref={probeRef} aria-hidden="true" className="hidden" />
+      <div className="flex items-center justify-between">
+        <h1 className="m-0 text-h1 font-semibold text-ink">Dashboard</h1>
+        <Button icon={<Icon name="refresh" size={12} />}>Làm mới</Button>
+      </div>
+
+      {/* 4 stat cards — cùng anchor Card; icon + label + số + delta pill đồng bộ.
+          Grid KPI rows qua Row/Col (24-col: 1 cột mobile / 2 cột ≥sm / 4 cột ≥xl). */}
+      <Row gutter={[24, 24]}>
+        {STATS.map((stat) => (
+          <Col key={stat.title} xs={24} sm={12} xl={6}>
+            <Card hoverable className="h-full">
+              <div className="flex items-center gap-3">
+                <span
+                  aria-hidden="true"
+                  className="grid size-10 shrink-0 place-items-center rounded-lg bg-accent/10 text-accent"
+                >
+                  <Icon name={stat.icon} size={18} />
+                </span>
+                <div className="min-w-0 flex-1">
+                  <div className="text-body text-ink2">{stat.title}</div>
+                  <div className="mt-0.5 flex items-center gap-2">
+                    <span className="text-2xl font-semibold leading-tight text-ink">{stat.value}</span>
+                    <span className="rounded-pill bg-st-done/10 px-1.5 py-0.5 text-[10px] font-medium leading-none text-st-done">
+                      {stat.tag}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </Col>
+        ))}
+      </Row>
+
+      {/* Chart (3/5 trái) + cột phải 2/5: Timeline trên + EmptyState dưới — flex-1
+          mỗi card = CAO ĐỀU (grid rows fr/fr tương đương) */}
+      <div className="grid grid-cols-1 gap-6 xl:grid-cols-5">
+        <Card title="Hoạt động 7 ngày" extra={<Tag>Tuần này</Tag>} className="xl:col-span-3">
+          {HAS_CHART_DATA ? (
+            <div className="h-64">
+              <Chart config={CHART_CONFIG} height={256} />
+            </div>
+          ) : (
+            <EmptyState title="Chưa có dữ liệu" description="Chưa có hoạt động nào trong 7 ngày qua." />
+          )}
+        </Card>
+        <div className="flex flex-col gap-6 xl:col-span-2">
+          <Card title="Timeline hoạt động" extra={<Tag>real-time</Tag>} className="flex-1">
+            <Timeline
+              items={[
+                {
+                  key: 't1',
+                  children: 'Alice Nguyen tạo task "Sửa bug login"',
+                  label: '10 phút trước',
+                },
+                {
+                  key: 't2',
+                  color: 'var(--st-done)',
+                  children: 'Bot sync Kafka — 24 events đã xử lý',
+                  label: '1 giờ trước',
+                },
+                {
+                  key: 't3',
+                  children: 'Bob Tran upload 3 file vào "Báo cáo Q4"',
+                  label: '3 giờ trước',
+                },
+                {
+                  key: 't4',
+                  color: 'var(--st-fail)',
+                  children: 'Saga gán task thất bại — DLQ có message mới',
+                  label: 'Hôm qua',
+                },
+              ]}
+            />
+          </Card>
+          <Card className="flex-1">
+            <EmptyState
+              title="Chưa có báo cáo tuần"
+              description="Báo cáo sẽ tự sinh vào mỗi sáng thứ Hai, hoặc tạo ngay bây giờ."
+              action={
+                <Button type="primary" onClick={() => message.info('Tạo báo cáo (demo)')}>
+                  Tạo báo cáo
+                </Button>
+              }
+            />
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}