create-wakii-stack 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,70 @@
+// CountUp — đếm số ease-out cubic theo rAF (motion-effects W8, 0 deps):
+// render span tabular-nums; `format` tuỳ ý (locale, đơn vị), `onDone` gọi đúng
+// 1 lần khi chạm đích. Đổi `value` giữa chừng → animate tiếp từ số đang hiển thị
+// (latest-ref cho onDone — effect không restart vì callback đổi identity).
+// Depth contract 2026-10-19: đổi giá trị → pulse nhẹ (re-zoom 280ms ease-smooth,
+// tái dùng keyframe bp-zoom-in — không đúc keyframe mới; reduced-motion tắt nhờ
+// block global). Chỉ pulse từ lần ĐỔI thứ 2 trở đi — mount đầu không nhấp nháy.
+import { useEffect, useRef, useState } from 'react';
+
+export interface CountUpProps {
+  /** Giá trị đích. */
+  value: number;
+  /** Thời lượng animation (giây) — mặc định 1.2. */
+  duration?: number;
+  /** Số chữ số thập phân hiển thị (toFixed). */
+  decimals?: number;
+  /** Format hiển thị — nhận số đã làm tròn theo `decimals`. */
+  format?: (n: number) => string;
+  /** Gọi 1 lần khi animation chạm giá trị đích. */
+  onDone?: () => void;
+  className?: string;
+}
+
+export function CountUp({ value, duration = 1.2, decimals = 0, format, onDone, className }: CountUpProps) {
+  const [display, setDisplay] = useState(0);
+  const fromRef = useRef(0);
+  const onDoneRef = useRef(onDone);
+  onDoneRef.current = onDone; // latest-ref — tránh effect restart khi callback đổi identity
+  // Pulse khi giá trị ĐỔI (depth contract) — đếm lần đổi, key restart animation
+  const [changeCount, setChangeCount] = useState(0);
+  const valueRef = useRef(value);
+  useEffect(() => {
+    if (valueRef.current !== value) {
+      valueRef.current = value;
+      setChangeCount((c) => c + 1);
+    }
+  }, [value]);
+
+  useEffect(() => {
+    const from = fromRef.current;
+    const ms = Math.max(0, duration * 1000);
+    let raf = 0;
+    let start: number | null = null;
+    const step = (now: number) => {
+      if (start === null) start = now;
+      const t = ms === 0 ? 1 : Math.min(1, (now - start) / ms);
+      const eased = 1 - Math.pow(1 - t, 3); // ease-out cubic — nhanh đầu, chậm cuối
+      setDisplay(from + (value - from) * eased);
+      if (t < 1) {
+        raf = requestAnimationFrame(step);
+      } else {
+        fromRef.current = value;
+        onDoneRef.current?.();
+      }
+    };
+    raf = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(raf);
+  }, [value, duration]);
+
+  const rounded = Number(display.toFixed(decimals));
+  return (
+    <span
+      key={changeCount}
+      style={changeCount > 0 ? { animation: 'bp-zoom-in 280ms var(--ease-smooth)' } : undefined}
+      className={`tabular-nums inline-block${className ? ` ${className}` : ''}`}
+    >
+      {format ? format(rounded) : rounded.toFixed(decimals)}
+    </span>
+  );
+}

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

@@ -0,0 +1,154 @@
+// date-picker.stories.tsx — Forms/DatePicker: single (behavior cũ) + batch ⑧
+// worker C: Range (2 input from/to + hover preview), Time (showTime + OK),
+// LocaleEN (DateLocaleProvider context + prop locale="en").
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DatePicker } from './index';
+import { DateLocaleProvider } from './locale';
+import { TimePicker } from '../time-picker/index';
+import { Icon } from '../icons/index';
+
+const meta = { title: 'Forms/DatePicker', component: DatePicker, tags: ['autodocs'] } satisfies Meta<typeof DatePicker>;
+export default meta;
+type S = StoryObj<typeof meta>;
+
+const pad = (n: number) => n.toString().padStart(2, '0');
+const fmt = (d: Date) => `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()}`;
+
+export const Basic: S = { args: { placeholder: 'Pick a date…' } };
+
+/** PrefixIcon — calendar glyph before the value (antd prefix). */
+export const PrefixIcon: S = {
+  name: 'Prefix icon — calendar glyph',
+  args: { placeholder: 'Due date…', prefix: <Icon name="calendar" size={14} /> },
+};
+
+/** Controlled — useState demo: picked date shown below. */
+export const Controlled: S = {
+  render: () => <ControlledDemo />,
+};
+
+/** Disabled — trigger locked. */
+export const Disabled: S = { args: { disabled: true, placeholder: 'Disabled' } };
+
+/** DisabledRange — both from/to inputs locked (antd RangePicker disabled). */
+export const DisabledRange: S = {
+  name: 'Disabled range — locked from/to',
+  args: { range: true as const, disabled: true },
+};
+
+function RangeDemo() {
+  const [range, setRange] = useState<[Date, Date] | undefined>();
+  return (
+    <div className="grid w-[320px] gap-3">
+      <DatePicker range onChange={setRange} />
+      <p className="text-meta text-ink3">
+        {range ? `${fmt(range[0])} → ${fmt(range[1])}` : 'Mở panel → click ngày bắt đầu → hover xem preview → click ngày kết thúc'}
+      </p>
+    </div>
+  );
+}
+
+export const DatePickerRange: S = {
+  name: 'Range — from → to, hover preview',
+  render: () => <RangeDemo />,
+};
+
+function TimeDemo() {
+  const [d, setD] = useState<Date | undefined>();
+  return (
+    <div className="grid w-[380px] gap-3">
+      <DatePicker showTime onChange={setD} />
+      <p className="text-meta text-ink3">
+        {d ? `Đã chọn: ${fmt(d)} ${pad(d.getHours())}:${pad(d.getMinutes())}` : 'Chọn ngày → chỉnh giờ cột phải → OK để đóng'}
+      </p>
+    </div>
+  );
+}
+
+export const DatePickerTime: S = {
+  name: 'With time — showTime + OK confirm',
+  render: () => <TimeDemo />,
+};
+
+export const LocaleEN: S = {
+  name: 'Locale EN — DateLocaleProvider + locale prop',
+  render: () => (
+    <div className="grid w-[380px] gap-4">
+      <DateLocaleProvider locale="en">
+        <DatePicker />
+        <TimePicker />
+      </DateLocaleProvider>
+      <DatePicker locale="en" />
+    </div>
+  ),
+};
+
+/** PlaceholderContrast — empty vs filled trigger side by side: placeholder now uses
+ * `text-ink` (readable), panel opens with `min-w-[300px]` and roomier footer
+ * buttons ("Today" px-3 py-1.5, OK synced). */
+export const PlaceholderContrast: S = {
+  name: 'Placeholder contrast + polished footer',
+  render: () => (
+    <div className="grid max-w-[320px] gap-3">
+      <DatePicker placeholder="Pick a date…" />
+      <DatePicker value={new Date(2026, 9, 18)} placeholder="Pick a date…" />
+      <p className="m-0 text-meta text-ink3">
+        Empty trigger shows the placeholder at full ink contrast; open either to see the
+        wider panel and the bigger "Today" button.
+      </p>
+    </div>
+  ),
+};
+
+function ControlledDemo() {
+  const [d, setD] = useState<Date | undefined>();
+  return (
+    <div className="grid max-w-[320px] gap-3">
+      <DatePicker value={d} onChange={(x) => setD(x)} placeholder="Pick a date…" />
+      <p className="m-0 font-mono text-meta text-ink3">value: <strong className="text-ink">{d ? d.toLocaleDateString('vi-VN') : '—'}</strong></p>
+    </div>
+  );
+}
+
+export const DarkTheme: S = {
+  name: 'DarkTheme — single + range + time',
+  render: () => (
+    <div data-bp-theme="dark" className="grid w-96 gap-3 rounded-xl bg-canvas p-4">
+      <DatePicker />
+      <DatePicker range />
+      <TimePicker />
+    </div>
+  ),
+};
+
+/* ── Real-world cases (mission #13 — real-world stories sweep) ── */
+
+// Local wrapper — appointment booking: date + time → live summary line.
+function BookingDatetimeInner() {
+  const [date, setDate] = useState<Date | undefined>(undefined);
+  const [time, setTime] = useState<Date | undefined>(undefined);
+  const booked = date && time;
+  const summary = booked
+    ? `Appointment: ${date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })} at ${time.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false })}`
+    : 'Pick a date and a time to book your appointment.';
+
+  return (
+    <div className="flex w-96 max-w-full flex-col gap-4 rounded-xl border border-line bg-s1 p-4">
+      <div className="flex flex-col gap-1">
+        <span className="text-label text-ink2">Date</span>
+        <DatePicker value={date} onChange={setDate} placeholder="Pick a date" />
+      </div>
+      <div className="flex flex-col gap-1">
+        <span className="text-label text-ink2">Time</span>
+        <TimePicker value={time} onChange={setTime} placeholder="Pick a time" />
+      </div>
+      <p className={`m-0 border-t border-line pt-3 text-body ${booked ? 'text-ink' : 'text-ink3'}`}>{summary}</p>
+    </div>
+  );
+}
+
+export const BookingDatetime: S = {
+  name: 'BookingDatetime — appointment: date + time → live summary',
+  render: () => <BookingDatetimeInner />,
+};

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

@@ -0,0 +1,221 @@
+import { cleanup, render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { DatePicker } from './index.js';
+afterEach(cleanup);
+describe('DatePicker', () => {
+  it('click trigger → calendar mở; chọn ngày → onChange', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<DatePicker onChange={onChange} />);
+    await user.click(screen.getByLabelText('Chọn ngày'));
+    expect(screen.getByRole('grid')).toBeInTheDocument();
+    fireEvent.click(screen.getByText('15'));
+    expect(onChange).toHaveBeenCalled();
+  });
+  it('placeholder khi không value', () => {
+    render(<DatePicker placeholder="Chọn ngày…" />);
+    expect(screen.getByText('Chọn ngày…')).toBeInTheDocument();
+  });
+});
+
+describe('DatePicker — range (batch ⑧ worker C)', () => {
+  const NOW = new Date(2026, 9, 15); // 15/10/2026
+
+  it('2 input from/to render; chọn from → to → onChange nhận [start, end]', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<DatePicker range now={NOW} onChange={onChange} />);
+    expect(screen.getByLabelText('Từ ngày')).toBeInTheDocument();
+    expect(screen.getByLabelText('Đến ngày')).toBeInTheDocument();
+
+    await user.click(screen.getByLabelText('Từ ngày'));
+    fireEvent.click(screen.getByText('10')); // start
+    fireEvent.click(screen.getByText('20')); // end → hoàn thành
+    expect(onChange).toHaveBeenCalledWith([new Date(2026, 9, 10), new Date(2026, 9, 20)]);
+  });
+
+  it('hover preview: sau khi chọn start, hover ngày giữa → ô trong khoảng bg-accent/10 (như antd RangePicker)', async () => {
+    const user = userEvent.setup();
+    render(<DatePicker range now={NOW} />);
+    await user.click(screen.getByLabelText('Từ ngày'));
+    fireEvent.click(screen.getByText('10')); // start → phase 'to'
+    fireEvent.mouseEnter(screen.getByLabelText(new Date(2026, 9, 18).toDateString()));
+    const mid = screen.getByLabelText(new Date(2026, 9, 15).toDateString());
+    expect(mid).toHaveClass('bg-accent/10');
+    const outside = screen.getByLabelText(new Date(2026, 9, 25).toDateString());
+    expect(outside).not.toHaveClass('bg-accent/10');
+  });
+
+  it('chọn lùi (end < start) → swap: onChange vẫn [min, max]', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<DatePicker range now={NOW} onChange={onChange} />);
+    await user.click(screen.getByLabelText('Từ ngày'));
+    fireEvent.click(screen.getByText('20'));
+    fireEvent.click(screen.getByText('10'));
+    expect(onChange).toHaveBeenCalledWith([new Date(2026, 9, 10), new Date(2026, 9, 20)]);
+  });
+
+  it('single mode giữ behavior cũ: click 1 ngày → onChange + đóng panel', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<DatePicker now={NOW} onChange={onChange} />);
+    await user.click(screen.getByLabelText('Chọn ngày'));
+    fireEvent.click(screen.getByText('12'));
+    expect(onChange).toHaveBeenCalledWith(new Date(2026, 9, 12));
+    expect(screen.queryByRole('grid')).not.toBeInTheDocument();
+  });
+});
+
+describe('DatePicker — showTime (batch ⑧ worker C)', () => {
+  const NOW = new Date(2026, 9, 15);
+
+  it('cột giờ bên phải panel; chọn ngày + tăng giờ → giá trị mang theo giờ; OK đóng panel', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<DatePicker showTime now={NOW} onChange={onChange} />);
+    await user.click(screen.getByLabelText('Chọn ngày'));
+    fireEvent.click(screen.getByText('15'));
+    // panel KHÔNG tự đóng khi showTime — chờ OK
+    expect(screen.getByRole('grid')).toBeInTheDocument();
+    fireEvent.click(screen.getByLabelText('Tăng giờ')); // 00 → 01
+    // spinner đổi → onChange phát ngay giá trị compose (15/10 01:00)
+    expect(onChange).toHaveBeenLastCalledWith(new Date(2026, 9, 15, 1, 0));
+    fireEvent.click(screen.getByRole('button', { name: 'OK' }));
+    expect(screen.queryByRole('grid')).not.toBeInTheDocument();
+  });
+
+  it('không showTime: không có nút OK', async () => {
+    const user = userEvent.setup();
+    render(<DatePicker now={NOW} />);
+    await user.click(screen.getByLabelText('Chọn ngày'));
+    expect(screen.queryByRole('button', { name: 'OK' })).not.toBeInTheDocument();
+  });
+});
+
+describe('DatePicker — locale (batch ⑧ worker C)', () => {
+  const NOW = new Date(2026, 9, 15);
+
+  it('locale="en" → label tháng + aria nav tiếng Anh', async () => {
+    const user = userEvent.setup();
+    render(<DatePicker locale="en" now={NOW} />);
+    await user.click(screen.getByLabelText('Pick date'));
+    expect(screen.getByText(/October 2026/)).toBeInTheDocument();
+    expect(screen.getByLabelText('Previous month')).toBeInTheDocument();
+  });
+
+  it('default vi — trigger + tháng tiếng Việt', async () => {
+    render(<DatePicker now={NOW} />);
+    expect(screen.getByLabelText('Chọn ngày')).toBeInTheDocument();
+  });
+
+  it('nút "Hôm nay" → onChange hôm nay (label theo locale)', async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<DatePicker now={NOW} onChange={onChange} />);
+    await user.click(screen.getByLabelText('Chọn ngày'));
+    fireEvent.click(screen.getByText('Hôm nay'));
+    expect(onChange).toHaveBeenCalledWith(new Date(2026, 9, 15));
+  });
+});
+
+describe('DatePicker — polish (placeholder contrast / panel min-w / footer buttons)', () => {
+  it('placeholder khi rỗng → text-ink (contrast fix, không còn ink4/ink2)', () => {
+    render(<DatePicker placeholder="Chọn ngày…" />);
+    const trigger = screen.getByRole('button', { name: /Chọn ngày/ });
+    const span = trigger.querySelector('span')!;
+    expect(span).toHaveClass('text-ink');
+    expect(span).not.toHaveClass('text-ink4');
+    expect(span).not.toHaveClass('text-ink2');
+  });
+
+  it('panel có min-w-[300px] (nhãn tháng/năm không bị chật)', async () => {
+    const user = userEvent.setup();
+    render(<DatePicker />);
+    await user.click(screen.getByRole('button', { name: /Chọn ngày|Hôm nay/ }));
+    const panel = document.body.querySelector('[class*="min-w-[300px]"]');
+    expect(panel).not.toBeNull();
+  });
+
+  it('nút "Hôm nay" px-3 py-1.5 (to hơn, vẫn ghost accent)', async () => {
+    const user = userEvent.setup();
+    render(<DatePicker />);
+    await user.click(screen.getByRole('button', { name: /Chọn ngày|Hôm nay/ }));
+    const btn = screen.getByText('Hôm nay');
+    expect(btn).toHaveClass('px-3', 'py-1.5');
+  });
+});
+
+describe('DatePicker — responsive 375 (bugfix PO: popover tràn viewport / che trigger)', () => {
+  const NOW = new Date(2026, 9, 15);
+
+  function setViewport(w: number, h: number) {
+    Object.defineProperty(window, 'innerWidth', { value: w, configurable: true });
+    Object.defineProperty(window, 'innerHeight', { value: h, configurable: true });
+  }
+  function mockTriggerRect(rect: { left: number; top: number; right: number; bottom: number }) {
+    return vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({
+      x: rect.left,
+      y: rect.top,
+      width: rect.right - rect.left,
+      height: rect.bottom - rect.top,
+      ...rect,
+      toJSON: () => rect,
+    } as DOMRect);
+  }
+  function positionedWrapper(): HTMLElement {
+    // panel min-w nằm trong wrapper định vị (left/top/bottom inline style)
+    const panel = document.body.querySelector('[class*="min-w-[300px]"]') as HTMLElement;
+    expect(panel).not.toBeNull();
+    return panel.parentElement!;
+  }
+
+  it('viewport 375 + trigger sát phải → cạnh phải panel bị clamp vào trong viewport (margin 8)', async () => {
+    setViewport(375, 667);
+    const spy = mockTriggerRect({ left: 300, top: 168, right: 340, bottom: 200 });
+    const user = userEvent.setup();
+    render(<DatePicker now={NOW} />);
+    await user.click(screen.getByLabelText('Chọn ngày'));
+    // panel chưa đo được (jsdom 0) → fallback min-w 300: left = 375 − 8 − 300 = 67
+    expect(parseFloat(positionedWrapper().style.left)).toBe(67);
+    spy.mockRestore();
+  });
+
+  it('trigger ở trái → giữ bottom-start (left = rect.left), không clamp ngược', async () => {
+    setViewport(375, 667);
+    const spy = mockTriggerRect({ left: 40, top: 168, right: 220, bottom: 200 });
+    const user = userEvent.setup();
+    render(<DatePicker now={NOW} />);
+    await user.click(screen.getByLabelText('Chọn ngày'));
+    expect(parseFloat(positionedWrapper().style.left)).toBe(40);
+    spy.mockRestore();
+  });
+
+  it('trigger sát đáy viewport → panel flip lên trên (bottom thay top — không che trigger)', async () => {
+    setViewport(375, 667);
+    const spy = mockTriggerRect({ left: 40, top: 500, right: 220, bottom: 532 });
+    const user = userEvent.setup();
+    render(<DatePicker now={NOW} />);
+    await user.click(screen.getByLabelText('Chọn ngày'));
+    const pos = positionedWrapper().style;
+    expect(pos.bottom).toBe('171px'); // innerHeight − rect.top + 4 = 667 − 500 + 4
+    expect(pos.top).toBe('');
+    spy.mockRestore();
+  });
+
+  it('panel max-w-[calc(100vw-16px)] + showTime flex-wrap + cột giờ min-w-0 (co được ở 375)', async () => {
+    setViewport(375, 667);
+    const spy = mockTriggerRect({ left: 8, top: 100, right: 200, bottom: 132 });
+    const user = userEvent.setup();
+    render(<DatePicker showTime now={NOW} />);
+    await user.click(screen.getByLabelText('Chọn ngày'));
+    const panel = document.body.querySelector('[class*="min-w-[300px]"]') as HTMLElement;
+    expect(panel.className).toContain('max-w-[calc(100vw-16px)]');
+    const row = panel.querySelector('[class*="flex-wrap"]');
+    expect(row).not.toBeNull();
+    const timeCol = screen.getByLabelText('Tăng giờ').closest('[class*="min-w-0"]');
+    expect(timeCol).not.toBeNull();
+    spy.mockRestore();
+  });
+});