create-wakii-stack 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,158 @@
+// field.stories.tsx — Primitives/Field (batch ⑩ worker B): wrapper cơ bản + demo THẬT
+// Input + useForm (react-hook-form) + zodResolver — label/error/hint sống theo validation.
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { Button } from '../button/index.js';
+import { Input, Textarea } from '../input/index.js';
+import { Select } from '../select/index.js';
+import { Field } from './index.js';
+
+const meta = {
+  title: 'Forms/Field',
+  component: Field,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Wrapper label + control + error/hint. Id error/hint suy từ htmlFor ({htmlFor}-error/{htmlFor}-hint) — consumer nối aria-describedby trên input. Error ưu tiên hơn hint.',
+      },
+    },
+  },
+} satisfies Meta<typeof Field>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const CoBan: Story = {
+  name: 'Basic',
+  args: {
+    label: 'Tiêu đề',
+    htmlFor: 'field-title',
+    hint: 'Ngắn gọn, rõ nghĩa',
+    children: <Input id="field-title" placeholder="Vd: Sửa bug login" />,
+  },
+};
+
+export const Required: Story = {
+  name: 'Required marker',
+  args: {
+    label: 'Email',
+    htmlFor: 'field-email',
+    required: true,
+    children: <Input id="field-email" type="email" placeholder="ban@congty.vn" />,
+  },
+};
+
+export const ErrorThayHint: Story = {
+  name: 'Error replaces hint',
+  args: {
+    label: 'Email',
+    htmlFor: 'field-error',
+    error: 'Email không hợp lệ',
+    hint: 'Dùng email công việc',
+    children: <Input id="field-error" invalid aria-invalid aria-describedby="field-error-error" defaultValue="khong-phai-email" />,
+  },
+};
+
+/** WithSelect — Field wraps any control, not just Input (antd Form.Item parity). */
+export const WithSelect: Story = {
+  name: 'With select control',
+  args: {
+    label: 'Region',
+    htmlFor: 'field-region',
+    hint: 'Filter tasks by workspace region',
+    children: (
+      <Select
+        ariaLabel="Region"
+        placeholder="Pick a region…"
+        options={[
+          { label: 'HN — Hà Nội', value: 'hn' },
+          { label: 'SG — Sài Gòn', value: 'sg' },
+          { label: 'DN — Đà Nẵng', value: 'dn' },
+        ]}
+      />
+    ),
+  },
+};
+
+// ── Demo thật: useForm (react-hook-form) + zod — error lấy từ formState ──────────
+
+const schema = z.object({
+  title: z.string().min(3, 'Tiêu đề tối thiểu 3 ký tự'),
+  email: z.string().email('Email không hợp lệ'),
+  note: z.string().max(200, 'Tối đa 200 ký tự'),
+});
+type FormValues = z.infer<typeof schema>;
+
+function ZodFormDemo() {
+  const [submitted, setSubmitted] = useState<FormValues | null>(null);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: { title: '', email: '', note: '' },
+  });
+
+  return (
+    <form className="flex max-w-sm flex-col gap-4" onSubmit={handleSubmit(setSubmitted)} noValidate>
+      <Field label="Tiêu đề" htmlFor="demo-title" required error={errors.title?.message} hint="Ngắn gọn, rõ nghĩa">
+        <Input
+          id="demo-title"
+          invalid={!!errors.title}
+          placeholder="Vd: Sửa bug login"
+          aria-invalid={!!errors.title}
+          aria-describedby={errors.title ? 'demo-title-error' : 'demo-title-hint'}
+          {...register('title')}
+        />
+      </Field>
+      <Field label="Email" htmlFor="demo-email" required error={errors.email?.message}>
+        <Input
+          id="demo-email"
+          type="email"
+          invalid={!!errors.email}
+          placeholder="ban@congty.vn"
+          aria-invalid={!!errors.email}
+          aria-describedby={errors.email ? 'demo-email-error' : undefined}
+          {...register('email')}
+        />
+      </Field>
+      <Field label="Ghi chú" htmlFor="demo-note" error={errors.note?.message} hint="Tuỳ chọn — tối đa 200 ký tự">
+        <Textarea
+          id="demo-note"
+          rows={3}
+          invalid={!!errors.note}
+          aria-describedby={errors.note ? 'demo-note-error' : 'demo-note-hint'}
+          {...register('note')}
+        />
+      </Field>
+      <div className="flex items-center gap-3">
+        <Button type="primary" htmlType="submit">
+          Gửi
+        </Button>
+        {submitted && <span className="text-meta text-st-done">Đã gửi: {JSON.stringify(submitted)}</span>}
+      </div>
+    </form>
+  );
+}
+
+export const ZodForm: Story = {
+  name: 'Real form — useForm + zod',
+  render: () => <ZodFormDemo />,
+};
+
+export const DarkTheme: Story = {
+  name: 'Dark theme',
+  render: () => (
+    <div data-bp-theme="dark" className="w-96 rounded-xl bg-canvas p-4">
+      <Field label="Tiêu đề" htmlFor="field-dark" hint="Ngắn gọn, rõ nghĩa">
+        <Input id="field-dark" placeholder="Vd: Sửa bug login" />
+      </Field>
+    </div>
+  ),
+};

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

@@ -0,0 +1,68 @@
+// Tests Field — label/error/hint render + id nối aria-describedby đúng (spec batch ⑩ worker B).
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Input } from '../input/index.js';
+import { Field } from './index.js';
+
+afterEach(cleanup);
+
+describe('Field', () => {
+  it('render label htmlFor + children — label nối được control', () => {
+    render(
+      <Field label="Tiêu đề" htmlFor="task-title">
+        <Input id="task-title" />
+      </Field>,
+    );
+
+    expect(screen.getByText('Tiêu đề')).toHaveAttribute('for', 'task-title');
+    expect(screen.getByLabelText('Tiêu đề')).toBeInTheDocument(); // htmlFor ↔ id khớp
+  });
+
+  it('required → dấu * aria-hidden trên label', () => {
+    render(
+      <Field label="Email" htmlFor="f-email" required>
+        <Input id="f-email" />
+      </Field>,
+    );
+
+    const star = screen.getByText('*');
+    expect(star).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('error → p role=alert id {htmlFor}-error; nối describedby đúng; ưu tiên hơn hint', () => {
+    render(
+      <Field label="Email" htmlFor="f-email" error="Email không hợp lệ" hint="Dùng email công việc">
+        <Input id="f-email" invalid aria-invalid aria-describedby="f-email-error" />
+      </Field>,
+    );
+
+    const error = screen.getByRole('alert');
+    expect(error).toHaveTextContent('Email không hợp lệ');
+    expect(error).toHaveAttribute('id', 'f-email-error');
+    expect(screen.queryByText('Dùng email công việc')).toBeNull(); // error thay hint
+    expect(screen.getByLabelText('Email')).toHaveAttribute('aria-describedby', 'f-email-error');
+  });
+
+  it('hint → p id {htmlFor}-hint khi không có error', () => {
+    render(
+      <Field label="Email" htmlFor="f-email" hint="Dùng email công việc">
+        <Input id="f-email" aria-describedby="f-email-hint" />
+      </Field>,
+    );
+
+    const hint = screen.getByText('Dùng email công việc');
+    expect(hint).toHaveAttribute('id', 'f-email-hint');
+    expect(hint).not.toHaveAttribute('role', 'alert');
+    expect(screen.getByLabelText('Email')).toHaveAttribute('aria-describedby', 'f-email-hint');
+  });
+
+  it('không htmlFor → error/hint render nhưng không có id', () => {
+    render(
+      <Field label="Ghi chú" error="Bắt buộc nhập">
+        <Input />
+      </Field>,
+    );
+
+    expect(screen.getByRole('alert')).not.toHaveAttribute('id');
+  });
+});

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

@@ -0,0 +1,48 @@
+// Field — wrapper label + control + error/hint cho form (batch ⑩ worker B, VU-53).
+// error (text-st-fail, role=alert) ưu tiên hơn hint; id error/hint suy từ htmlFor
+// (`{htmlFor}-error` / `{htmlFor}-hint`) để consumer nối aria-describedby trên input.
+import type { ReactNode } from 'react';
+
+export interface FieldProps {
+  label?: string;
+  htmlFor?: string;
+  /** Message lỗi — hiển thị thay hint, id `{htmlFor}-error`. */
+  error?: string;
+  /** Gợi ý — chỉ hiện khi KHÔNG có error, id `{htmlFor}-hint`. */
+  hint?: string;
+  /** Dấu * trên label (aria-hidden) — báo hiệu bắt buộc. */
+  required?: boolean;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function Field({ label, htmlFor, error, hint, required, children, className }: FieldProps) {
+  const errorId = error && htmlFor ? `${htmlFor}-error` : undefined;
+  const hintId = !error && hint && htmlFor ? `${htmlFor}-hint` : undefined;
+  return (
+    // error xuất hiện → wrapper shake 1 lần (bp-shake 400ms; replay chỉ khi error
+    // được gỡ rồi mới hiện lại — animation gắn theo class)
+    <div className={`${error ? 'animate-[bp-shake_400ms_var(--ease-toggle)]' : ''}${className ? ` ${className}` : ''}`}>
+      {label && (
+        <label htmlFor={htmlFor} className="mb-1 block text-label font-medium text-ink">
+          {label}
+          {required && (
+            <span className="ml-0.5 text-st-fail" aria-hidden="true">
+              *
+            </span>
+          )}
+        </label>
+      )}
+      {children}
+      {error ? (
+        <p id={errorId} role="alert" className="mt-1 text-meta text-st-fail">
+          {error}
+        </p>
+      ) : hint ? (
+        <p id={hintId} className="mt-1 text-meta text-ink3">
+          {hint}
+        </p>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,49 @@
+// Fieldset stories — legend panel, toggleable collapse (grid-rows clip).
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Fieldset } from './index';
+
+/** Legend panel — bordered frame with the legend riding the border. */
+const meta = { title: 'Primitives/Fieldset', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Basic — legend + content, static frame. */
+export const Basic: Story = {
+  render: () => (
+    <Fieldset legend="Shipping details" className="max-w-md">
+      <p className="m-0">221B Baker Street, London — deliver before 6 PM.</p>
+    </Fieldset>
+  ),
+};
+
+/** Toggleable — click the legend to collapse / expand (grid-rows 0fr↔1fr animation). */
+export const Toggleable: Story = {
+  render: () => (
+    <Fieldset legend="Advanced options" toggleable className="max-w-md">
+      <p className="m-0">
+        Retry policy: 3 attempts with exponential backoff, then the event parks in the DLQ for manual inspection.
+      </p>
+    </Fieldset>
+  ),
+};
+
+/** DefaultCollapsed — starts folded; legend click unfolds. */
+export const DefaultCollapsed: Story = {
+  name: 'DefaultCollapsed — starts folded',
+  render: () => (
+    <Fieldset legend="Archived tasks" toggleable defaultCollapsed className="max-w-md">
+      <p className="m-0">12 archived tasks — unfold to browse.</p>
+    </Fieldset>
+  ),
+};
+
+/** DarkTheme — border + legend backdrop follow tokens. */
+export const DarkTheme: Story = {
+  render: () => (
+    <div data-bp-theme="dark" className="p-2">
+      <Fieldset legend="Session" toggleable className="max-w-md">
+        <p className="m-0">Token refresh every 15 minutes via auth-svc.</p>
+      </Fieldset>
+    </div>
+  ),
+};

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

@@ -0,0 +1,88 @@
+// Fieldset tests — legend + children, toggleable gập/mở (grid-rows 0fr), controlled,
+// defaultCollapsed, non-toggleable không có nút.
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Fieldset } from './index.js';
+
+afterEach(cleanup);
+
+describe('Fieldset', () => {
+  it('render legend + children', () => {
+    render(
+      <Fieldset legend="Thông tin">
+        <p>Nội dung bên trong</p>
+      </Fieldset>,
+    );
+    expect(screen.getByText('Thông tin')).toBeInTheDocument();
+    expect(screen.getByText('Nội dung bên trong')).toBeInTheDocument();
+  });
+
+  it('toggleable: click legend → gập (grid-template-rows 0fr + aria-expanded=false); click nữa → mở; onToggle báo', async () => {
+    const onToggle = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <Fieldset legend="Thông tin" toggleable onToggle={onToggle}>
+        <p>Nội dung</p>
+      </Fieldset>,
+    );
+    const header = screen.getByRole('button', { name: /Thông tin/ });
+    expect(header).toHaveAttribute('aria-expanded', 'true');
+    await user.click(header);
+    expect(onToggle).toHaveBeenCalledWith(true);
+    expect(header).toHaveAttribute('aria-expanded', 'false');
+    expect(header).toHaveAttribute('aria-controls');
+    const clip = document.getElementById(header.getAttribute('aria-controls')!)!;
+    expect(clip.style.gridTemplateRows).toBe('0fr');
+    await user.click(header);
+    expect(onToggle).toHaveBeenLastCalledWith(false);
+    expect(clip.style.gridTemplateRows).toBe('1fr');
+  });
+
+  it('controlled collapsed=true → gập sẵn, click vẫn onToggle (consumer giữ state)', async () => {
+    const onToggle = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <Fieldset legend="Cài đặt" toggleable collapsed onToggle={onToggle}>
+        <p>Ẩn</p>
+      </Fieldset>,
+    );
+    const header = screen.getByRole('button', { name: /Cài đặt/ });
+    expect(header).toHaveAttribute('aria-expanded', 'false');
+    await user.click(header);
+    expect(onToggle).toHaveBeenCalledWith(false);
+  });
+
+  it('defaultCollapsed → gập sẵn (uncontrolled), click mở', async () => {
+    const user = userEvent.setup();
+    render(
+      <Fieldset legend="Tuỳ chọn" toggleable defaultCollapsed>
+        <p>Bị gập ban đầu</p>
+      </Fieldset>,
+    );
+    const header = screen.getByRole('button', { name: /Tuỳ chọn/ });
+    expect(header).toHaveAttribute('aria-expanded', 'false');
+    await user.click(header);
+    expect(header).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('không toggleable → legend không phải nút, không aria-expanded', () => {
+    render(<Fieldset legend="Chỉ đọc">nội dung</Fieldset>);
+    expect(screen.queryByRole('button', { name: /Chỉ đọc/ })).toBeNull();
+  });
+
+  it('Enter/Space trên legend toggleable → gập/mở (a11y keyboard)', async () => {
+    const user = userEvent.setup();
+    render(
+      <Fieldset legend="Bàn phím" toggleable>
+        <p>nội dung</p>
+      </Fieldset>,
+    );
+    const header = screen.getByRole('button', { name: /Bàn phím/ });
+    header.focus();
+    await user.keyboard('{Enter}');
+    expect(header).toHaveAttribute('aria-expanded', 'false');
+    await user.keyboard(' ');
+    expect(header).toHaveAttribute('aria-expanded', 'true');
+  });
+});

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

@@ -0,0 +1,62 @@
+// Fieldset — panel có legend (PrimeReact lite): viền + legend lợn trên viền,
+// toggleable gập/mở bằng grid-rows 0fr↔1fr (3 lớp: grid wrapper → overflow-hidden → content).
+import { useId, useState, type ReactNode } from 'react';
+import { Icon } from '../icons/index.js';
+
+export interface FieldsetProps {
+  /** Tiêu đề panel — text hoặc ReactNode. */
+  legend?: ReactNode;
+  /** Cho phép bấm legend để gập/mở. */
+  toggleable?: boolean;
+  /** Controlled gập; không truyền → uncontrolled (defaultCollapsed). */
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  /** Báo trạng thái gập khi toggle. */
+  onToggle?: (collapsed: boolean) => void;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function Fieldset({ legend, toggleable = false, collapsed, defaultCollapsed = false, onToggle, children, className }: FieldsetProps) {
+  const [inner, setInner] = useState(defaultCollapsed);
+  const isCollapsed = collapsed ?? inner;
+  const contentId = useId();
+
+  function toggle() {
+    if (!toggleable) return;
+    const next = !isCollapsed;
+    if (collapsed === undefined) setInner(next);
+    onToggle?.(next);
+  }
+
+  const header = (
+    <span
+      className={`absolute -top-2.5 left-3 flex items-center gap-1 bg-canvas px-2 text-label font-medium text-ink2${
+        toggleable ? ' cursor-pointer select-none' : ''
+      }`}
+      onClick={toggle}
+      aria-expanded={toggleable ? !isCollapsed : undefined}
+      aria-controls={toggleable ? contentId : undefined}
+      role={toggleable ? 'button' : undefined}
+      tabIndex={toggleable ? 0 : undefined}
+      onKeyDown={toggleable ? (e) => (e.key === 'Enter' || e.key === ' ') && (e.preventDefault(), toggle()) : undefined}
+    >
+      {toggleable && (
+        <Icon name="chevron-down" size={12} className={`text-ink3 transition-transform duration-200 ${isCollapsed ? '-rotate-90' : ''}`} aria-hidden={true} />
+      )}
+      {legend}
+    </span>
+  );
+
+  return (
+    <fieldset className={`relative rounded-xl border border-line bg-s1 p-0 m-0${className ? ` ${className}` : ''}`}>
+      {header}
+      {/* 3-tier clip: grid rows 0fr↔1fr → overflow-hidden → content padding */}
+      <div id={contentId} className="grid transition-[grid-template-rows] duration-200 ease-[var(--ease-enter)]" style={{ gridTemplateRows: isCollapsed ? '0fr' : '1fr' }} aria-hidden={isCollapsed || undefined}>
+        <div className="overflow-hidden min-h-0">
+          <div className="p-4 text-body text-ink">{children}</div>
+        </div>
+      </div>
+    </fieldset>
+  );
+}

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

@@ -0,0 +1,96 @@
+// Parity matrix antd→tokens: docs/parity-matrix.md
+// Flex stories — direction, gap scale, justify/align, wrap (antd v5 Flex parity).
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../button/index';
+import { Flex } from './index';
+
+/** Flexbox layout utility — direction, gap, align, justify as props. */
+const meta = { title: 'Primitives/Flex', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function Box({ label }: { label: string }) {
+  return (
+    <div className="grid h-10 place-items-center rounded-lg border border-line bg-s3 px-3 text-label text-ink2">
+      {label}
+    </div>
+  );
+}
+
+export const Basic: Story = {
+  name: 'Basic — horizontal with default gap',
+  render: () => (
+    <Flex>
+      <Button type="primary">Primary</Button>
+      <Button>Default</Button>
+      <Button type="text">Text</Button>
+      <Box label="box" />
+    </Flex>
+  ),
+};
+
+export const Vertical: Story = {
+  name: 'Vertical — column layout',
+  render: () => (
+    <Flex vertical>
+      <Box label="Item 1" />
+      <Box label="Item 2" />
+      <Box label="Item 3" />
+    </Flex>
+  ),
+};
+
+export const GapSizes: Story = {
+  name: 'Gap — small 8 / middle 16 / large 24 / number',
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <Flex gap="small">
+        <Box label="small 8" />
+        <Box label="small 8" />
+      </Flex>
+      <Flex gap="middle">
+        <Box label="middle 16" />
+        <Box label="middle 16" />
+      </Flex>
+      <Flex gap="large">
+        <Box label="large 24" />
+        <Box label="large 24" />
+      </Flex>
+      <Flex gap={48}>
+        <Box label="number 48" />
+        <Box label="number 48" />
+      </Flex>
+    </div>
+  ),
+};
+
+export const JustifyAlign: Story = {
+  name: 'Justify & align — distribution + cross axis',
+  render: () => (
+    <div className="flex flex-col gap-4">
+      {(['start', 'center', 'end', 'space-between', 'space-around'] as const).map((justify) => (
+        <Flex key={justify} justify={justify} className="rounded-lg bg-s2 p-2">
+          <Box label={justify} />
+          <Box label={justify} />
+        </Flex>
+      ))}
+      <Flex align="center" className="rounded-lg bg-s2 p-2">
+        <Box label="align center" />
+        <div className="grid h-16 place-items-center rounded-lg border border-line bg-accent/10 px-3 text-label text-ink2">tall</div>
+      </Flex>
+    </div>
+  ),
+};
+
+export const Wrap: Story = {
+  name: 'Wrap — items flow to the next line',
+  render: () => (
+    <Flex wrap className="w-96">
+      {Array.from({ length: 8 }, (_, i) => (
+        <Button key={i} size="small">
+          Button {i + 1}
+        </Button>
+      ))}
+    </Flex>
+  ),
+};

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

@@ -0,0 +1,79 @@
+// Flex tests — direction, gap (thang Space + number), justify/align, wrap.
+import { cleanup, render } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Flex } from './index.js';
+
+afterEach(cleanup);
+
+describe('Flex', () => {
+  it('mặc định: hàng ngang + gap small 8px, không wrap', () => {
+    const { container } = render(
+      <Flex>
+        <span>a</span>
+        <span>b</span>
+      </Flex>,
+    );
+    const el = container.firstElementChild!;
+    expect(el).toHaveClass('flex', 'flex-row');
+    expect(el).not.toHaveClass('flex-col', 'flex-wrap');
+    expect(el.getAttribute('style')).toContain('gap: 8px');
+  });
+
+  it.each([
+    ['small', 8],
+    ['middle', 16],
+    ['large', 24],
+  ] as const)('gap %s → gap %ipx', (gap, px) => {
+    const { container } = render(
+      <Flex gap={gap}>
+        <span>a</span>
+      </Flex>,
+    );
+    expect(container.firstElementChild!.getAttribute('style')).toContain(`gap: ${px}px`);
+  });
+
+  it('gap number → px tuỳ ý; vertical → flex-col', () => {
+    const { container } = render(
+      <Flex vertical gap={12}>
+        <span>a</span>
+      </Flex>,
+    );
+    const el = container.firstElementChild!;
+    expect(el.getAttribute('style')).toContain('gap: 12px');
+    expect(el).toHaveClass('flex-col');
+    expect(el).not.toHaveClass('flex-row');
+  });
+
+  it('justify + align → justify-content / align-items inline', () => {
+    const { container } = render(
+      <Flex justify="space-between" align="baseline">
+        <span>a</span>
+        <span>b</span>
+      </Flex>,
+    );
+    const style = container.firstElementChild!.getAttribute('style')!;
+    expect(style).toContain('justify-content: space-between');
+    expect(style).toContain('align-items: baseline');
+  });
+
+  it('không justify/align → style không chứa 2 thuộc tính đó', () => {
+    const { container } = render(
+      <Flex>
+        <span>a</span>
+      </Flex>,
+    );
+    const style = container.firstElementChild!.getAttribute('style')!;
+    expect(style).not.toContain('justify-content');
+    expect(style).not.toContain('align-items');
+  });
+
+  it('wrap → flex-wrap; className merge vào cuối', () => {
+    const { container } = render(
+      <Flex wrap className="text-ink2">
+        <span>a</span>
+      </Flex>,
+    );
+    const el = container.firstElementChild!;
+    expect(el).toHaveClass('flex-wrap', 'text-ink2');
+  });
+});