create-wakii-stack 0.0.0-stage → 0.1.0

package/stack-template/app/shell/src/pages/HomePage.tsx

@@ -0,0 +1,70 @@
+import { Link } from 'react-router';
+import { isExpired, readClaims, tokenStorage } from '@wakii/fe-shared';
+import { Card, Icon, Reveal } from '@wakii/ui-kit';
+
+/**
+ * Dashboard chào (spec slice mục 4): greeting + quick links 2 remote + demo hints.
+ * Giữ h1 "Trang chủ" (integration test contract). fail@demo.local = fixture saga 4b
+ * (gán task cho user này → assignment FAIL → badge "Gán thất bại", SF-3 demo).
+ */
+export function HomePage() {
+  const token = tokenStorage.getToken();
+  const claims = token && !isExpired(token) ? readClaims(token) : null;
+
+  return (
+    <section className="flex flex-col gap-6">
+      {/* Motion pass tiết chế (mission #8): Reveal stagger section — wrap NGOÀI,
+       * 0 đổi logic; jsdom không IO → Reveal fallback hiện luôn, test không ảnh hưởng. */}
+      <Reveal direction="up">
+        <header className="sh-home__head">
+          <h1 className="m-0 text-h1 font-semibold tracking-[-0.01em]">Trang chủ</h1>
+          <p className="mt-1 text-ink2">
+            Chào {claims?.email ?? 'bạn'} — shell tổng hợp 2 remote (tasks, activity) qua module
+            federation.
+          </p>
+        </header>
+      </Reveal>
+
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(220px,1fr))] gap-4">
+        <Link className="text-inherit no-underline" to="/tasks">
+          <Reveal direction="up" delay={80}>
+            <Card hoverable className="flex h-full flex-col gap-2">
+              <span aria-hidden="true" className="text-accent">
+                <Icon name="check-circle" size={20} />
+              </span>
+              <h2 className="m-0">Tasks</h2>
+              <p className="m-0">Quản lý công việc — tạo, sửa, đổi status, filter.</p>
+            </Card>
+          </Reveal>
+        </Link>
+        <Link className="text-inherit no-underline" to="/activity">
+          <Reveal direction="up" delay={160}>
+            <Card hoverable className="flex h-full flex-col gap-2">
+              <span aria-hidden="true" className="text-accent">
+                <Icon name="clock" size={20} />
+              </span>
+              <h2 className="m-0">Activity</h2>
+              <p className="m-0">Feed sự kiện real-time (Kafka) — mọi thao tác ở Tasks đều phản ánh về đây.</p>
+            </Card>
+          </Reveal>
+        </Link>
+      </div>
+
+      <Reveal direction="up" delay={240}>
+        <Card className="text-label text-ink2">
+          <p className="mb-2 text-meta uppercase tracking-[0.06em] text-ink3">Tài khoản demo</p>
+          <ul className="m-0 flex flex-col gap-1 pl-4">
+            <li>
+              <code className="font-mono text-meta text-ink">alice@demo.local</code> / <code className="font-mono text-meta text-ink">demo-password</code> — tài khoản chính
+            </li>
+            <li>
+              <code className="font-mono text-meta text-ink">fail@demo.local</code> — gán task cho user này để xem saga: badge
+              {" "}
+              <em>“Gán thất bại”</em>
+            </li>
+          </ul>
+        </Card>
+      </Reveal>
+    </section>
+  );
+}

package/stack-template/app/shell/src/pages/LoginPage.tsx

@@ -0,0 +1,217 @@
+import { useMemo, useState, KeyboardEvent, useRef } from 'react';
+import { Navigate, useLocation, useNavigate } from 'react-router';
+import { z } from 'zod';
+import { ApiError, isExpired, tokenStorage } from '@wakii/fe-shared';
+import { Button, Field, Icon, Input, useForm } from '@wakii/ui-kit';
+import { auth } from '../api';
+
+type AuthMode = 'login' | 'register';
+
+const TABS: ReadonlyArray<{ id: AuthMode; label: string }> = [
+  { id: 'login', label: 'Đăng nhập' },
+  { id: 'register', label: 'Đăng ký' },
+];
+
+/* Schema zod tiếng Việt — validation chuyển sang useForm (batch ⑰):
+ * login: chỉ bắt buộc; register: contract auth.yaml — password 8–72 (argon2 limit). */
+const loginSchema = z.object({
+  email: z.string().min(1, 'Email bắt buộc').email('Email không hợp lệ'),
+  password: z.string().min(1, 'Mật khẩu bắt buộc'),
+});
+const registerSchema = z.object({
+  email: z.string().min(1, 'Email bắt buộc').email('Email không hợp lệ'),
+  password: z.string().min(8, 'Mật khẩu cần 8–72 ký tự.').max(72, 'Mật khẩu cần 8–72 ký tự.'),
+  displayName: z.string().min(1, 'Tên hiển thị bắt buộc'),
+});
+
+type AuthFormValues = { email: string; password: string; displayName?: string };
+
+/**
+ * Login + Register (SF-4, VU-63) qua wrapper refresh-client — auth.yaml v2.
+ * Batch ⑰ (VU-53): form chuyển sang useForm + zod + Field/Input/Button ui-kit —
+ * validation FE khai báo bằng schema (mode onSubmit), server error vẫn role=alert
+ * riêng phía trên nút submit. ARIA tabs + roving tabindex giữ nguyên (a11y contract).
+ */
+export function LoginPage() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [mode, setMode] = useState<AuthMode>('login');
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const loginTabRef = useRef<HTMLButtonElement>(null);
+  const registerTabRef = useRef<HTMLButtonElement>(null);
+
+  const schema = useMemo(() => (mode === 'login' ? loginSchema : registerSchema), [mode]);
+  const form = useForm<AuthFormValues>({
+    schema,
+    initialValues: { email: '', password: '', displayName: '' },
+    mode: 'onSubmit',
+  });
+
+  // Đã login (token còn hạn) → về trang chủ
+  const token = tokenStorage.getToken();
+  if (token && !isExpired(token)) {
+    return <Navigate to="/" replace />;
+  }
+
+  function switchMode(next: AuthMode) {
+    setError(null);
+    setMode(next);
+    // xoá FE errors khi đổi mode (schema khác) — giữ nguyên values người dùng đang gõ
+    form.reset({ email: form.values.email, password: form.values.password, displayName: form.values.displayName });
+  }
+
+  // Roving tabindex ARIA tabs: ArrowLeft/Right đổi tab + focus theo selection
+  function handleTablistKeys(e: KeyboardEvent) {
+    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+    e.preventDefault();
+    const next: AuthMode = mode === 'login' ? 'register' : 'login';
+    switchMode(next);
+    (next === 'login' ? loginTabRef : registerTabRef).current?.focus();
+  }
+
+  return (
+    <section className="flex min-h-[calc(100vh-100px)] items-center justify-center">
+      <div className="w-full max-w-[340px] rounded-xl border border-line bg-s2 p-8">
+        <div className="mb-4 flex items-center gap-2.5">
+          <span
+            aria-hidden="true"
+            className="flex size-7 items-center justify-center rounded-2 bg-accent text-white"
+          >
+            <Icon name="menu-bars" size={12} />
+          </span>
+          <span className="text-h1 font-semibold tracking-tight text-ink">Boilerplate</span>
+        </div>
+
+        <div
+          role="tablist"
+          aria-label="Chế độ đăng nhập hoặc đăng ký"
+          className="mb-4 flex gap-1 rounded-pill bg-s3 p-1"
+          onKeyDown={handleTablistKeys}
+        >
+          {TABS.map((tab) => {
+            const selected = mode === tab.id;
+            return (
+              <button
+                key={tab.id}
+                ref={tab.id === 'login' ? loginTabRef : registerTabRef}
+                role="tab"
+                id={`auth-tab-${tab.id}`}
+                aria-selected={selected}
+                aria-controls={`auth-panel-${tab.id}`}
+                tabIndex={selected ? 0 : -1}
+                type="button"
+                onClick={() => switchMode(tab.id)}
+                className={`flex-1 rounded-pill px-3 py-1 text-label transition-colors ${
+                  selected
+                    ? 'bg-s1 font-medium text-ink shadow-sm'
+                    : 'text-ink3 hover:text-ink2'
+                }`}
+              >
+                {tab.label}
+              </button>
+            );
+          })}
+        </div>
+
+        <h1 id={`auth-panel-${mode}`} className="mb-4 text-h2 font-semibold text-ink2">
+          {mode === 'login' ? 'Đăng nhập' : 'Đăng ký'}
+        </h1>
+        <form
+          aria-labelledby={`auth-tab-${mode}`}
+          className="flex flex-col gap-3"
+          onSubmit={form.handleSubmit(async (data) => {
+            setError(null);
+            setSubmitting(true);
+            try {
+              if (mode === 'login') {
+                await auth.login(data.email, data.password);
+              } else {
+                await auth.register(data.email, data.password, data.displayName!);
+              }
+              const from = (location.state as { from?: string } | null)?.from ?? '/';
+              navigate(from, { replace: true });
+            } catch (err) {
+              if (err instanceof ApiError) {
+                if (err.status === 401 && mode === 'login') {
+                  setError('Email hoặc mật khẩu không đúng.');
+                } else if (err.status === 409) {
+                  setError('Email này đã được đăng ký. Chuyển sang tab Đăng nhập để đăng nhập.');
+                } else {
+                  setError(err.message);
+                }
+              } else {
+                setError('Không kết nối được máy chủ đăng nhập.');
+              }
+            } finally {
+              setSubmitting(false);
+            }
+          })}
+        >
+          <Field label="Email" htmlFor="auth-email" error={form.errors.email}>
+            <Input
+              id="auth-email"
+              type="email"
+              name="email"
+              autoComplete="username"
+              value={form.values.email}
+              invalid={!!form.errors.email}
+              onChange={form.handleChange('email')}
+            />
+          </Field>
+          <Field label="Mật khẩu" htmlFor="auth-password" error={form.errors.password}>
+            <Input
+              id="auth-password"
+              type="password"
+              name="password"
+              autoComplete={mode === 'login' ? 'current-password' : 'new-password'}
+              value={form.values.password}
+              invalid={!!form.errors.password}
+              onChange={form.handleChange('password')}
+            />
+          </Field>
+          {mode === 'register' && (
+            <Field
+              label="Tên hiển thị"
+              htmlFor="auth-display-name"
+              error={form.errors.displayName}
+            >
+              <Input
+                id="auth-display-name"
+                type="text"
+                name="displayName"
+                autoComplete="name"
+                value={form.values.displayName}
+                invalid={!!form.errors.displayName}
+                onChange={form.handleChange('displayName')}
+              />
+            </Field>
+          )}
+          {error && (
+            <p
+              role="alert"
+              className="rounded-1 border border-st-fail bg-st-fail/10 px-2.5 py-1.5 text-meta text-st-fail"
+            >
+              {error}
+            </p>
+          )}
+          <Button
+            className="mt-1 w-full"
+            htmlType="submit"
+            loading={submitting}
+            disabled={submitting}
+            block
+          >
+            {mode === 'login' ? 'Đăng nhập' : 'Đăng ký'}
+          </Button>
+        </form>
+        {mode === 'login' && (
+          <p className="mt-4 text-center text-meta text-ink3">
+            Demo: <code>alice@demo.local</code> / <code>demo-password</code> — hoặc đăng ký tài
+            khoản mới ở tab Đăng ký
+          </p>
+        )}
+      </div>
+    </section>
+  );
+}

package/stack-template/app/shell/src/remote-urls.ts

@@ -0,0 +1,18 @@
+// F1 (review VU-53 follow-up): retry BUG-2 (mf-bootstrap registerRemotes force) phải
+// re-register remoteEntry với ĐÚNG url webpack đã đăng ký lúc build — không phải fallback
+// '/remotes/<name>/remoteEntry.js' (sai trong dev-native shell :3000 — devServer chỉ proxy
+// /api/*, không serve /remotes/* → fetch 404 → sticky-rejection được thay bằng
+// wrong-URL rejection, retry hỏng vĩnh viễn).
+// Cơ chế = thiết kế SF-5 trong docstring fe-shared (host inject __REMOTE_URLS__ lúc
+// bootstrap) — trước đây host CHƯA implement. Pattern giống __API_BASE_URL__:
+// DefinePlugin inject env build-time (REMOTE_TASKS_URL/REMOTE_ACTIVITY_URL — cùng nguồn
+// với remotes config trong rspack.config.mjs) → nạp vào global trước khi render.
+
+/** Nạp URL remote build-time vào `__REMOTE_URLS__` — gọi MỘT LẦN ở entry host
+ * (bootstrap.tsx) TRƯỚC khi mount App (trước mọi loadRemote/retry). */
+export function registerBuildtimeRemoteUrls(): void {
+  (globalThis as Record<string, unknown>)['__REMOTE_URLS__'] = {
+    tasks: __REMOTE_TASKS_URL__,
+    activity: __REMOTE_ACTIVITY_URL__,
+  };
+}

package/stack-template/app/shell/tests/a11y.test.tsx

@@ -0,0 +1,53 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router';
+import { afterEach, describe, expect, it } from 'vitest';
+import { AppRoutes } from '../src/App';
+
+// A11y baseline (spec slice mục 6 — CÓ TEST): skip link + route focus management.
+
+afterEach(() => {
+  cleanup();
+  window.localStorage.clear();
+});
+
+describe('a11y baseline', () => {
+  it('có skip link trỏ tới #main-content', () => {
+    render(
+      <MemoryRouter initialEntries={['/']}>
+        <AppRoutes />
+      </MemoryRouter>,
+    );
+    const skipLink = screen.getByRole('link', { name: 'Tới nội dung chính' });
+    expect(skipLink).toHaveAttribute('href', '#main-content');
+  });
+
+  it('main content tồn tại với id khớp skip link', () => {
+    render(
+      <MemoryRouter initialEntries={['/']}>
+        <AppRoutes />
+      </MemoryRouter>,
+    );
+    expect(document.getElementById('main-content')).toBeInTheDocument();
+  });
+
+  it('đổi route → focus chuyển vào main content (route focus management)', async () => {
+    const user = userEvent.setup();
+    render(
+      <MemoryRouter initialEntries={['/']}>
+        <AppRoutes />
+      </MemoryRouter>,
+    );
+    // Login fixture user trước (route /tasks RequireAuth) — set token thẳng localStorage
+    window.localStorage.setItem('bp.jwt', makeFakeToken());
+    const tasksLink = screen.getByRole('link', { name: 'Tasks' });
+    await user.click(tasksLink);
+    await expect.poll(() => document.activeElement?.id, { timeout: 2000 }).toBe('main-content');
+  });
+});
+
+/** JWT fake đủ 3 segment để readClaims decode (test-only — không qua BE). */
+function makeFakeToken(): string {
+  const b64 = (o: object) => btoa(JSON.stringify(o)).replace(/=+$/, '');
+  return `${b64({ alg: 'HS256' })}.${b64({ sub: 'u1', email: 't@t', roles: [], exp: Math.floor(Date.now() / 1000) + 3600 })}.sig`;
+}

package/stack-template/app/shell/tests/api-timeout.test.ts

@@ -0,0 +1,43 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { timeoutFetch } from '../src/api';
+
+// Meta-test cho P1 review: login call PHẢI có timeout (AbortController) —
+// không có thì nút "Đang đăng nhập…" treo vô hạn khi gateway chết.
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe('timeoutFetch', () => {
+  it('đính signal vào fetch call', async () => {
+    const fetchMock = vi.fn().mockResolvedValue(new Response('{}', { status: 200 }));
+    const f = timeoutFetch(1000, fetchMock);
+    await f('http://x/api/auth/login', { method: 'POST' });
+    const init = fetchMock.mock.calls[0][1];
+    expect(init.signal).toBeInstanceOf(AbortSignal);
+  });
+
+  it('hết hạn 15s → abort signal (fake timers)', async () => {
+    vi.useFakeTimers();
+    const fetchMock = vi.fn(
+      (_input: RequestInfo | URL, init?: RequestInit) =>
+        new Promise((_resolve, reject) => {
+          init?.signal?.addEventListener('abort', () =>
+            reject(new Error('aborted')),
+          );
+        }),
+    );
+    const f = timeoutFetch(15_000, fetchMock as unknown as typeof fetch);
+    const p = f('http://x/api/auth/login', { method: 'POST' });
+    vi.advanceTimersByTime(15_000);
+    await expect(p).rejects.toThrow('aborted');
+  });
+
+  it('caller có signal sẵn → không override', async () => {
+    const fetchMock = vi.fn().mockResolvedValue(new Response('{}', { status: 200 }));
+    const f = timeoutFetch(1000, fetchMock);
+    const mySignal = AbortSignal.abort();
+    await f('http://x/', { signal: mySignal });
+    expect(fetchMock.mock.calls[0][1].signal).toBe(mySignal);
+  });
+});

package/stack-template/app/shell/tests/integration.test.tsx

@@ -0,0 +1,93 @@
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router';
+import { tokenStorage } from '@wakii/fe-shared';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { AppRoutes } from '../src/App';
+
+// Integration cross-cutting (plan T6): login → nav → remote-down fallback.
+// SF-4: login đi qua wrapper refresh-client → mock TẦNG fetch (timeoutFetch bind
+// lazy nên vi.stubGlobal có hiệu lực) thay vì mock module api; loadRemoteModule
+// vẫn mock (remote down) — không mạng, không remote thật.
+const loadRemoteModuleMock = vi.hoisted(() => vi.fn());
+vi.mock('@wakii/fe-shared', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@wakii/fe-shared')>();
+  return { ...actual, loadRemoteModule: loadRemoteModuleMock };
+});
+
+const FAKE_TOKEN = `.${btoa(JSON.stringify({ sub: 'u1', email: 'alice@demo.local', roles: ['admin'], exp: Math.floor(Date.now() / 1000) + 3600 }))}.sig`;
+
+function stubLoginFetch() {
+  return vi.fn((input: RequestInfo | URL, init?: RequestInit) => {
+    const body = init?.body ? JSON.parse(String(init.body)) : null;
+    if (String(input) === '/api/auth/login' && body?.email === 'alice@demo.local') {
+      return Promise.resolve(
+        new Response(
+          JSON.stringify({
+            user: { id: 'u1', email: 'alice@demo.local', displayName: 'Alice', roles: ['admin'] },
+            accessToken: FAKE_TOKEN,
+            refreshToken: 'rt-1',
+          }),
+          { status: 200, headers: { 'Content-Type': 'application/json' } },
+        ),
+      );
+    }
+    return Promise.resolve(new Response(JSON.stringify({ error: { code: 'NOT_FOUND', message: 'x', requestId: null, details: null } }), { status: 404 }));
+  });
+}
+
+afterEach(() => {
+  cleanup();
+  // tokenStorage giữ memoryToken module-level — clearToken xoá CẢ memory + localStorage
+  // (chỉ clear localStorage là leak token giữa các test → RequireAuth nhìn thấy auth cũ)
+  tokenStorage.clearToken();
+  loadRemoteModuleMock.mockReset();
+  vi.unstubAllGlobals();
+});
+
+describe('integration: login → nav → remote-down fallback', () => {
+  it('login xong thấy email trên nav; vào /tasks remote down → fallback, app không crash', async () => {
+    const user = userEvent.setup();
+    vi.stubGlobal('fetch', stubLoginFetch());
+    loadRemoteModuleMock.mockRejectedValue(new Error('Remote "tasks" load failed'));
+
+    render(
+      <MemoryRouter initialEntries={['/login']}>
+        <AppRoutes />
+      </MemoryRouter>,
+    );
+
+    // 1) login
+    await user.type(screen.getByLabelText('Email'), 'alice@demo.local');
+    await user.type(screen.getByLabelText('Mật khẩu'), 'demo-password');
+    await user.click(screen.getByRole('button', { name: 'Đăng nhập' }));
+
+    // 2) về trang chủ, nav hiện email từ JWT claims
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: 'Trang chủ' })).toBeInTheDocument();
+    });
+    expect(screen.getByTestId('nav-user')).toHaveTextContent('alice@demo.local');
+
+    // 3) nav sang /tasks — remote down → error boundary fallback (không trắng trang)
+    await user.click(screen.getByRole('link', { name: 'Tasks' }));
+    const alert = await screen.findByRole('alert');
+    expect(alert).toHaveTextContent('Không tải được phần tasks');
+    expect(screen.getByRole('button', { name: 'Thử lại' })).toBeInTheDocument();
+
+    // 4) app vẫn sống — nav hoạt động trở lại /activity cũng fallback tương tự
+    await user.click(screen.getByRole('link', { name: 'Activity' }));
+    const alert2 = await screen.findByRole('alert');
+    expect(alert2).toHaveTextContent('Không tải được phần activity');
+  });
+
+  it('chưa login vào /tasks → redirect /login', async () => {
+    render(
+      <MemoryRouter initialEntries={['/tasks']}>
+        <AppRoutes />
+      </MemoryRouter>,
+    );
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: 'Đăng nhập' })).toBeInTheDocument();
+    });
+  });
+});