create-wakii-stack 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,91 @@
+// Reveal stories — blocks animate in when they enter the viewport. In the
+// Storybook iframe the first blocks are usually already visible (they animate
+// on load); scroll to the lower blocks to watch the enter transitions.
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Reveal, type RevealDirection } from './index';
+
+// Meta WITHOUT `component` — children is required, CSF would force args on
+// render-only stories (image.stories pattern).
+const meta = { title: 'Theming & Motion/Reveal', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function Panel({ title, body }: { title: string; body: string }) {
+  return (
+    <div className="rounded-xl border border-line bg-s1 p-4">
+      <div className="text-body font-medium text-ink">{title}</div>
+      <div className="mt-1 text-meta text-ink3">{body}</div>
+    </div>
+  );
+}
+
+/** Basic — three panels sliding up as they enter the viewport. */
+export const Basic: Story = {
+  name: 'Basic — slide up on enter',
+  render: () => (
+    <div className="flex max-w-lg flex-col gap-4">
+      <Reveal>
+        <Panel title="First block" body="Reveals as soon as it enters the viewport." />
+      </Reveal>
+      <Reveal>
+        <Panel title="Second block" body="Each Reveal observes itself independently." />
+      </Reveal>
+      <Reveal>
+        <Panel title="Third block" body="Scroll down and back up — once=true keeps it visible." />
+      </Reveal>
+      <div className="h-72 rounded-xl border border-dashed border-line bg-s2" />
+    </div>
+  ),
+};
+
+/** Directions — the four enter directions side by side. */
+export const Directions: Story = {
+  name: 'Directions — up / down / left / right',
+  render: () => (
+    <div className="grid max-w-xl grid-cols-2 gap-4">
+      {(
+        [
+          ['up', 'Drifts in from below'],
+          ['down', 'Drops in from above'],
+          ['left', 'Enters from the left edge'],
+          ['right', 'Enters from the right edge'],
+        ] as [RevealDirection, string][]
+      ).map(([dir, body]) => (
+        <Reveal key={dir} direction={dir}>
+          <Panel title={`direction: ${dir}`} body={body} />
+        </Reveal>
+      ))}
+    </div>
+  ),
+};
+
+/** Stagger — same direction, increasing delay for a cascade. */
+export const Stagger: Story = {
+  name: 'Stagger — delay 0 / 150 / 300 ms',
+  render: () => (
+    <div className="flex max-w-lg flex-col gap-4">
+      {([0, 150, 300] as const).map((delay) => (
+        <Reveal key={delay} delay={delay}>
+          <Panel title={`delay: ${delay} ms`} body="Blocks land one after another." />
+        </Reveal>
+      ))}
+    </div>
+  ),
+};
+
+/** Repeat — once=false re-hides when the block leaves the viewport. */
+export const Repeat: Story = {
+  name: 'Repeat — once=false re-plays on every enter',
+  render: () => (
+    <div className="flex max-w-lg flex-col gap-4">
+      <Reveal once={false}>
+        <Panel
+          title="once={false}"
+          body="Scroll this block out of view, then back — it hides and replays each time (once=true, the default, plays only once)."
+        />
+      </Reveal>
+      <div className="h-72 rounded-xl border border-dashed border-line bg-s2" />
+      <div className="h-72 rounded-xl border border-dashed border-line bg-s2" />
+    </div>
+  ),
+};

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

@@ -0,0 +1,148 @@
+// Reveal tests — IO mock: ẩn ban đầu → intersect thêm class animate có sẵn,
+// once không lặp / once=false ẩn lại, delay ăn vào animationDelay, cleanup
+// disconnect, fallback khi không có IntersectionObserver.
+import { act, cleanup, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { Reveal } from './index.js';
+
+class MockIO {
+  static instances: MockIO[] = [];
+  disconnected = false;
+  constructor(
+    public cb: IntersectionObserverCallback,
+    public options?: IntersectionObserverInit,
+  ) {
+    MockIO.instances.push(this);
+  }
+  observe = vi.fn();
+  unobserve = vi.fn();
+  disconnect = vi.fn(() => {
+    this.disconnected = true;
+  });
+  trigger(isIntersecting: boolean) {
+    // act: setState từ IO callback phải flush vào DOM trước khi assert
+    act(() => {
+      this.cb([{ isIntersecting, target: {} } as IntersectionObserverEntry], this as unknown as IntersectionObserver);
+    });
+  }
+}
+
+beforeEach(() => {
+  MockIO.instances = [];
+  vi.stubGlobal('IntersectionObserver', MockIO);
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+const last = () => MockIO.instances[MockIO.instances.length - 1]!;
+
+describe('Reveal', () => {
+  it('ban đầu ẩn: opacity-0 + chưa có class animate; observe được gọi', () => {
+    render(
+      <Reveal>
+        <div>card</div>
+      </Reveal>,
+    );
+    const box = screen.getByText('card').parentElement!;
+    expect(box).toHaveClass('opacity-0');
+    expect(box.className).not.toContain('bp-');
+    expect(last().observe).toHaveBeenCalledTimes(1);
+  });
+
+  it('intersect → thêm bp-slide-up-in (up), bỏ opacity-0', () => {
+    render(
+      <Reveal>
+        <div>card</div>
+      </Reveal>,
+    );
+    last().trigger(true);
+    const box = screen.getByText('card').parentElement!;
+    expect(box.className).toContain('bp-slide-up-in');
+    expect(box).not.toHaveClass('opacity-0');
+  });
+
+  it('direction right → offset ẩn translateX(12px); vào viewport → bp-fade-in + transition transform', () => {
+    render(
+      <Reveal direction="right">
+        <div>card</div>
+      </Reveal>,
+    );
+    const box = screen.getByText('card').parentElement!;
+    expect(box.style.transform).toBe('translateX(12px)');
+    last().trigger(true);
+    expect(box.className).toContain('bp-fade-in');
+    expect(box.className).not.toContain('slide-up-in');
+    expect(box.style.transform).toBe('none');
+    expect(box.style.transition).toContain('transform');
+  });
+
+  it('direction left/down → đúng dấu offset (left −12px, down −12px theo trục)', () => {
+    const left = render(<Reveal direction="left"><div>a</div></Reveal>);
+    expect((screen.getByText('a').parentElement as HTMLElement).style.transform).toBe('translateX(-12px)');
+    left.unmount();
+    render(<Reveal direction="down"><div>b</div></Reveal>);
+    expect((screen.getByText('b').parentElement as HTMLElement).style.transform).toBe('translateY(-12px)');
+  });
+
+  it('once=true → rời viewport vẫn shown; once=false → ẩn lại', () => {
+    const once = render(
+      <Reveal once>
+        <div>keep</div>
+      </Reveal>,
+    );
+    last().trigger(true);
+    last().trigger(false);
+    expect(screen.getByText('keep').parentElement!.className).toContain('bp-slide-up-in');
+    once.unmount();
+
+    render(
+      <Reveal once={false}>
+        <div>repeat</div>
+      </Reveal>,
+    );
+    last().trigger(true);
+    last().trigger(false);
+    const box = screen.getByText('repeat').parentElement!;
+    expect(box).toHaveClass('opacity-0');
+    expect(box.className).not.toContain('bp-');
+    last().trigger(true);
+    expect(screen.getByText('repeat').parentElement!.className).toContain('bp-slide-up-in');
+  });
+
+  it('delay → animationDelay; hướng không phải up còn delay vào transition', () => {
+    render(
+      <Reveal direction="left" delay={150}>
+        <div>card</div>
+      </Reveal>,
+    );
+    const box = screen.getByText('card').parentElement!;
+    last().trigger(true);
+    expect(box.style.animationDelay).toBe('150ms');
+    expect(box.style.transition).toContain('150ms');
+  });
+
+  it('cleanup: unmount → io.disconnect', () => {
+    const { unmount } = render(
+      <Reveal>
+        <div>card</div>
+      </Reveal>,
+    );
+    const io = last();
+    unmount();
+    expect(io.disconnected).toBe(true);
+  });
+
+  it('không có IntersectionObserver → hiện luôn (fallback không kẹt ẩn)', () => {
+    vi.stubGlobal('IntersectionObserver', undefined);
+    render(
+      <Reveal>
+        <div>fallback</div>
+      </Reveal>,
+    );
+    const box = screen.getByText('fallback').parentElement!;
+    expect(box).not.toHaveClass('opacity-0');
+  });
+});

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

@@ -0,0 +1,104 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- @ts-nocheck CỐ Ý: skin FullCalendar third-party (peer-dep optional, types FC không khớp) — đã duyệt giữ nguyên gate 2026-10-18
+// @ts-nocheck — peer-dep lazy import (engine optional, consumer tự cài — runtime try/catch)
+// Schedule — PEER-DEP pattern: FullCalendar lazy import.
+// Cài: pnpm add @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+
+export interface ScheduleEvent {
+  id: string;
+  title: string;
+  start: string;
+  end?: string;
+}
+
+export interface ScheduleProps {
+  events?: ScheduleEvent[];
+  onEventClick?: (eventId: string) => void;
+  /** Fallback khi FullCalendar chưa cài. */
+  fallback?: ReactNode;
+  /** Chiều cao cố định px — ổn định giữa tháng 5/6 hàng (default 650; 'auto' = theo nội dung). */
+  height?: number | 'auto';
+  className?: string;
+}
+
+/* Override CSS mặc định FullCalendar cho ngày tháng LÂN CẬN (adjacent month):
+ * FC đặt opacity 0.3 trên .fc-daygrid-day-top → số ngày composite ra ~#c5c5c5
+ * trên nền canvas → fail axe color-contrast 1.58:1 (batch ⑪ 2026-10-18).
+ * Reset opacity trên ĐÚNG element (day-top) + token ink2 cho số ngày —
+ * inject MODULE LOAD, specificity .bp-schedule.fc (0,4,0) thắng rule .fc (0,3,0). */
+const FC_A11Y_CSS =
+  '.bp-schedule.fc .fc-day-other{opacity:1}.bp-schedule.fc .fc-day-other .fc-daygrid-day-top{opacity:1}.bp-schedule.fc .fc-day-other .fc-daygrid-day-number{color:var(--ink2,#595959)}';
+
+/* Toolbar + frame skin (backlog polish 2026-10-18 — "FC toolbar skin theo tokens"):
+ * - Nút prev/next/today/view = Button pattern NHỎ (h-8/px-3): bg-s2 + border-line +
+ *   rounded-lg, hover bg-s3, active view = accent, focus ring accent/40, disabled
+ *   bg-disabled/ink4.
+ * - Title = text-h3 (token --fs-h3 15px, coordinator chỉ định) weight 600.
+ * - Frame: header bg-s2 + border-line qua FC CSS vars (--fc-page-bg-color/
+ *   --fc-border-color) — mọi border FC ăn token, dark theme tự theo.
+ * Specificity .bp-schedule.fc (≥0,4,0) thắng rule .fc (0,2–3,0), inject sau FC CSS. */
+const FC_SKIN_CSS = [
+  '.bp-schedule.fc{--fc-page-bg-color:var(--c-s2);--fc-border-color:var(--line);--fc-neutral-bg-color:var(--c-s3);--fc-today-bg-color:color-mix(in srgb,var(--accent) 8%,transparent);border:1px solid var(--line);border-radius:var(--r-3);background:var(--c-s2)}',
+  '.bp-schedule.fc .fc-toolbar.fc-header-toolbar{flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem;padding:.75rem;border-bottom:1px solid var(--line2)}',
+  '.bp-schedule.fc .fc-toolbar-title{font-size:var(--fs-h3,15px);font-weight:600;color:var(--ink)}',
+  '.bp-schedule.fc .fc-button{height:2rem;padding:0 .75rem;background:var(--c-s2);border:1px solid var(--line);border-radius:var(--r-2);color:var(--ink);font-size:var(--fs-label,13px);font-weight:400;box-shadow:none;text-transform:none}',
+  '.bp-schedule.fc .fc-button:hover{background:var(--c-s3);border-color:var(--line2);color:var(--ink)}',
+  '.bp-schedule.fc .fc-button:not(:disabled).fc-button-active,.bp-schedule.fc .fc-button:not(:disabled):active{background:var(--accent);border-color:var(--accent);color:#fff}',
+  '.bp-schedule.fc .fc-button:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 40%,transparent)}',
+  '.bp-schedule.fc .fc-button:disabled{background:var(--bg-disabled);border-color:var(--line);color:var(--ink4)}',
+].join('');
+if (typeof document !== 'undefined' && !document.querySelector('style[data-bp-fc-a11y]')) {
+  const style = document.createElement('style');
+  style.setAttribute('data-bp-fc-a11y', '');
+  style.textContent = FC_A11Y_CSS + FC_SKIN_CSS;
+  document.head.appendChild(style);
+}
+
+// Specifier qua BIẾN — bundler của consumer không phân tích được dynamic import
+// peer này khi build production (peer có thể chưa cài — fallback sẵn).
+const FC_CORE = '@fullcalendar/core';
+const FC_DAYGRID = '@fullcalendar/daygrid';
+const FC_INTERACTION = '@fullcalendar/interaction';
+
+/** Loader mặc định — dynamic import qua biến specifier (xem comment trên). */
+const loadFc = () =>
+  Promise.all([import(FC_CORE), import(FC_DAYGRID), import(FC_INTERACTION)]) as Promise<[any, any, any]>;
+
+/** @internal — test thay loader để giả lập peer chưa cài một cách deterministic. */
+export let __loadFcForTest: typeof loadFc | null = null;
+export function __setLoadFcForTest(loader: typeof loadFc | null): void {
+  __loadFcForTest = loader;
+}
+
+export function Schedule({ events = [], onEventClick, fallback, height = 650, className }: ScheduleProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false; let calendar: { destroy(): void } | null = null;
+    (async () => {
+      try {
+        // Lazy peer-dep imports — @ts-nocheck đầu file lo phần type (deps tuỳ consumer)
+        // specifier qua BIẾN — bundler consumer không phân tích được (peer có thể chưa cài)
+        const [{ Calendar }, dayGridPlugin, interactionPlugin] = await (__loadFcForTest ?? loadFc)();
+        if (cancelled || !ref.current) return;
+        calendar = new Calendar(ref.current, {
+          plugins: [dayGridPlugin.default, interactionPlugin.default],
+          initialView: 'dayGridMonth',
+          events: events.map((e) => ({ id: e.id, title: e.title, start: e.start, end: e.end })),
+          eventClick: (info) => onEventClick?.(info.event.id),
+          // Height cố định (default 650) — tháng 5/6 hàng giữ nguyên khung, không nhảy layout
+          height,
+        });
+        calendar.render();
+      } catch {
+        setFailed(true);
+        console.warn('[ui-kit] @fullcalendar/* chưa cài');
+      }
+    })();
+    return () => { cancelled = true; calendar?.destroy(); };
+  }, [events, onEventClick, height]);
+
+  if (failed) return <>{fallback ?? <p className="p-4 text-body text-ink3">Cài @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction để dùng Schedule.</p>}</>;
+  return <div ref={ref} className={`bp-schedule${className ? ` ${className}` : ''}`} />;
+}

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

@@ -0,0 +1,95 @@
+// Schedule — FC THẬT (devDeps đã cài, KHÔNG mock): render thật dayGridMonth.
+// Tách file khỏi schedule.test.tsx vì vi.mock ở đó hoist cấp file.
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Schedule } from './index.js';
+
+afterEach(cleanup);
+
+const EVENTS = [
+  { id: 't1', title: 'Task Alpha', start: '2026-10-18' },
+  { id: 't2', title: 'Task Beta', start: '2026-10-20' },
+];
+
+describe('Schedule — FullCalendar thật', () => {
+  it('render calendar + event title hiện trong grid', async () => {
+    const { container } = render(<Schedule events={EVENTS} />);
+    await screen.findByText('Task Alpha', {}, { timeout: 5000 });
+    expect(container.querySelector('.bp-schedule.fc')).not.toBeNull();
+    expect(container.querySelector('.fc-daygrid-day-frame')).not.toBeNull();
+    expect(screen.getByText('Task Beta')).toBeInTheDocument();
+  });
+
+  it('className passthrough lên root .bp-schedule', () => {
+    const { container } = render(<Schedule events={EVENTS} className="marker" />);
+    expect(container.querySelector('.bp-schedule')).toHaveClass('marker');
+  });
+
+  it('onEventClick bắn đúng id khi click event', async () => {
+    const onEventClick = vi.fn();
+    const user = userEvent.setup();
+    render(<Schedule events={EVENTS} onEventClick={onEventClick} />);
+    await user.click(await screen.findByText('Task Alpha', {}, { timeout: 5000 }));
+    expect(onEventClick).toHaveBeenCalledWith('t1');
+  });
+
+  it('events rỗng → calendar vẫn render (không event)', async () => {
+    const { container } = render(<Schedule events={[]} />);
+    await waitFor(() => expect(container.querySelector('.fc-daygrid-body')).not.toBeNull(), { timeout: 5000 });
+    expect(container.querySelector('.fc-event')).toBeNull();
+  });
+});
+
+describe('Schedule — skin smoke (FC_SKIN_CSS + height ổn định)', () => {
+  it('skin CSS inject 1 lần với data-bp-fc-a11y + chứa rule token chính', async () => {
+    render(<Schedule events={EVENTS} />);
+    await screen.findByText('Task Alpha', {}, { timeout: 5000 });
+    const style = document.querySelector('style[data-bp-fc-a11y]');
+    expect(style).not.toBeNull();
+    const css = style!.textContent ?? '';
+    expect(css).toContain('.bp-schedule.fc{--fc-page-bg-color:var(--c-s2)');
+    expect(css).toContain('.bp-schedule.fc .fc-toolbar-title{font-size:var(--fs-h3,15px);font-weight:600');
+    expect(css).toContain('.bp-schedule.fc .fc-button{height:2rem');
+    expect(css).toContain('.fc-button:focus-visible');
+    expect(css).toContain('.fc-day-other'); // a11y adjacent-month rule vẫn đi cùng
+    // idempotent — không inject trùng
+    expect(document.querySelectorAll('style[data-bp-fc-a11y]')).toHaveLength(1);
+  });
+
+  it('toolbar render theo skin: title + cụm nút prev/today/next (snapshot class wrapper)', async () => {
+    const { container } = render(<Schedule events={EVENTS} />);
+    await screen.findByText('Task Alpha', {}, { timeout: 5000 });
+    const wrapper = container.querySelector('.bp-schedule.fc')!;
+    // snapshot class wrapper sau skin (FC gắn thêm fc-media-screen/direction-ltr/theme-standard/liquid-hack)
+    expect(wrapper.className).toMatchInlineSnapshot('"bp-schedule fc fc-media-screen fc-direction-ltr fc-theme-standard fc-liquid-hack"');
+    const toolbar = wrapper.querySelector('.fc-toolbar.fc-header-toolbar')!;
+    expect(toolbar).not.toBeNull();
+    expect(wrapper.querySelector('.fc-toolbar-title')!.textContent).not.toBe('');
+    const buttons = Array.from(wrapper.querySelectorAll('.fc-button'));
+    const labels = buttons.map((b) => b.textContent?.trim() ?? '');
+    expect(labels.some((l) => /today/i.test(l))).toBe(true);
+    expect(buttons.length).toBeGreaterThanOrEqual(3); // prev/today/next (+ view group)
+    // prev/next là icon-only → FC v6 gắn accessible name qua `title` ("Previous month")
+    const iconBtn = buttons.find((b) => b.classList.contains('fc-prev-button'));
+    expect(iconBtn?.getAttribute('title') ?? iconBtn?.getAttribute('aria-label')).toBeTruthy();
+  });
+
+  it('height mặc định 650 → inline style trên root; height prop → theo prop', async () => {
+    const { container, unmount } = render(<Schedule events={EVENTS} />);
+    // jsdom (nwsapi) cache kết quả querySelector: '.fc' poll lần đầu trước khi FC gắn class
+    // → cache âm không bao giờ recover (mutation class không invalidate). FC đặt class 'fc'
+    // + inline height trên CHÍNH root element → query '.bp-schedule' + đọc classList/style trực tiếp.
+    const root = () => container.querySelector<HTMLElement>('.bp-schedule');
+    await waitFor(
+      () => {
+        expect(root()?.classList.contains('fc')).toBe(true);
+        expect(root()?.style.height).toBe('650px');
+      },
+      { timeout: 5000 },
+    );
+    unmount();
+    const { container: c2 } = render(<Schedule events={EVENTS} height={520} />);
+    await waitFor(() => expect(c2.querySelector<HTMLElement>('.bp-schedule')?.style.height).toBe('520px'), { timeout: 5000 });
+  });
+});

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

@@ -0,0 +1,61 @@
+// Schedule stories — peer-dep FullCalendar (lazy import).
+// Default (real FC when installed) / Events / StableHeight / CustomFallback.
+// Toolbar + frame are skinned via FC_SKIN_CSS: buttons follow the small Button
+// pattern (h-8, bg-s2, border-line, hover bg-s3, active view = accent), title is
+// text-h3, header bg-s2 with border-line frame via FullCalendar CSS vars.
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Schedule } from './index';
+/** FullCalendar dayGrid month view — heavy, subpath `@wakii/ui-kit/schedule`. */
+const meta = { title: 'Data Display/Schedule', component: Schedule, tags: ['autodocs'] } satisfies Meta<typeof Schedule>;
+export default meta;
+type S = StoryObj<typeof meta>;
+
+const TODAY = new Date();
+const iso = (d: Date) => d.toISOString().slice(0, 10);
+const plus = (n: number) => { const d = new Date(TODAY); d.setDate(d.getDate() + n); return iso(d); };
+
+export const Default: S = {
+  name: 'Default — dayGridMonth (requires @fullcalendar/*)',
+  args: {
+    events: [
+      { id: 'e1', title: 'Sprint review', start: plus(1) },
+      { id: 'e2', title: 'Retro', start: plus(3) },
+    ],
+  },
+};
+
+export const StableHeight: S = {
+  name: 'Stable height — fixed 520px frame (no jump between 5/6-row months)',
+  args: {
+    height: 520,
+    events: [{ id: 'e1', title: 'Sprint review', start: plus(1) }],
+  },
+};
+
+function EventsDemo() {
+  const [clicked, setClicked] = useState<string | null>(null);
+  return (
+    <div className="max-w-3xl">
+      <Schedule
+        events={[
+          { id: 't1', title: 'Task #101', start: plus(0) },
+          { id: 't2', title: 'Task #102', start: plus(2) },
+          { id: 't3', title: 'Task #103', start: plus(2) },
+        ]}
+        onEventClick={setClicked}
+      />
+      <p className="mt-2 text-label text-ink3">Last clicked event id: {clicked ?? '—'}</p>
+    </div>
+  );
+}
+
+export const Events: S = {
+  name: 'Events + onEventClick (click event → readout)',
+  render: () => <EventsDemo />,
+};
+
+export const CustomFallback: S = {
+  name: 'Custom fallback when @fullcalendar/* missing',
+  args: { fallback: <p className="p-4 text-body text-ink3">Schedule needs @fullcalendar/* packages — see ui-kit README.</p> },
+};

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

@@ -0,0 +1,41 @@
+// Schedule peer-dep — test fallback path (mock reject: consumer CHƯA cài).
+// Đường FC THẬT (đã cài trong devDeps) test ở schedule.fc.test.tsx — tách file
+// vì vi.mock hoist cấp file.
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+// Giả lập consumer CHƯA cài peer qua DI loader reject — vi.mock module không
+// bắt được dynamic import với biến specifier (resolve runtime qua vite server).
+import { __setLoadFcForTest } from './index.js';
+beforeEach(() => {
+  __setLoadFcForTest(() => Promise.reject(new Error('not installed')));
+});
+afterEach(() => {
+  __setLoadFcForTest(null);
+});
+import { Schedule } from './index.js';
+afterEach(cleanup);
+
+describe('Schedule — fallback (chưa cài @fullcalendar/*)', () => {
+  it('fallback tuỳ chỉnh render khi import fail', async () => {
+    render(<Schedule fallback={<p>Cài FullCalendar</p>} />);
+    expect(await screen.findByText(/FullCalendar/, {}, { timeout: 3000 })).toBeInTheDocument();
+  });
+
+  it('không truyền fallback → text mặc định hướng dẫn cài', async () => {
+    render(<Schedule />);
+    expect(await screen.findByText(/Cài @fullcalendar\/core/, {}, { timeout: 3000 })).toBeInTheDocument();
+  });
+
+  it('events + onEventClick truyền vào → vẫn fallback, không crash', async () => {
+    const onEventClick = vi.fn();
+    render(
+      <Schedule
+        events={[{ id: 'e1', title: 'X', start: '2026-10-18' }]}
+        onEventClick={onEventClick}
+        fallback={<p>chưa cài</p>}
+      />,
+    );
+    expect(await screen.findByText('chưa cài', {}, { timeout: 3000 })).toBeInTheDocument();
+    expect(onEventClick).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,46 @@
+// ScrollPage — container fullpage scroll-snap kiểu antd/landing page (composite
+// pattern antd: ScrollPage.Section): CSS scroll-snap-type y mandatory — 0 JS
+// scroll-hijack, native momentum giữ nguyên. Chiều cao theo VIEWPORT CỦA
+// CONTAINER: container h-screen; mỗi Section snap-start + min-h-full (100% của
+// container — không hardcode 100vh nên đặt trong panel/layout khác vẫn snap đúng).
+// Tokens-only; keyboard: container focusable (tabIndex 0) → mũi tên cuộn snap
+// như native; Section là <section> có id + aria-label (landmark).
+import type { HTMLAttributes, ReactNode } from 'react';
+import { cx } from '../../utils/dom.js';
+
+export interface ScrollPageProps extends HTMLAttributes<HTMLDivElement> {
+  /** Nội dung — nên gồm toàn `ScrollPage.Section`. */
+  children?: ReactNode;
+}
+
+export interface ScrollPageSectionProps extends HTMLAttributes<HTMLElement> {
+  /** id + aria-label khuyến nghị cho điều hướng/landmark. */
+  children?: ReactNode;
+}
+
+/** Một "trang" full-height — snap về đúng khung khi cuộn. */
+export function ScrollPageSection({ className, children, ...rest }: ScrollPageSectionProps) {
+  return (
+    <section className={cx('flex min-h-full snap-start flex-col items-center justify-center px-6 py-12', className)} {...rest}>
+      {children}
+    </section>
+  );
+}
+
+function ScrollPageRoot({ className, children, ...rest }: ScrollPageProps) {
+  return (
+    <div
+      tabIndex={0}
+      className={cx('h-screen snap-y snap-mandatory overflow-y-auto overflow-x-hidden outline-none focus-visible:ring-2 focus-visible:ring-accent/40', className)}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+/** ScrollPage + ScrollPage.Section — composite component pattern antd. */
+export const ScrollPage = Object.assign(ScrollPageRoot, { Section: ScrollPageSection });
+
+/** Kiểu component composite — barrel khai báo type kèm khi re-export. */
+export type ScrollPageComponent = typeof ScrollPage;