@dashforge/tw 1.0.0 → 1.1.0

package/src/components/Chip/chip.variants.ts

@@ -0,0 +1,173 @@
+import { tv, type VariantProps } from 'tailwind-variants';
+
+/**
+ * Tailwind-variants recipe for `<Chip>` — promoted from the internal
+ * `Table/cells/RenderChip` (Sprint 4.4). The visual treatment is
+ * preserved byte-identical: the same 3 × 7 compound matrix
+ * (variant × color) emitted by RenderChip is now the single source
+ * of truth, consumed by both the public `<Chip>` and (via thin
+ * wrapper) the legacy `RenderChip` internal.
+ *
+ * Slots (only `root` slot used by the public Chip; sub-slots
+ * surfaced via separate inline classes in `Chip.tsx`):
+ *   - `root` — outer chip surface
+ *
+ * Variants axis (3 × 7, plus orthogonal `size`):
+ *   - `color`: 7 intents (`neutral / primary / secondary / success /
+ *     warning / danger / info`)
+ *   - `variant`: `soft` (default) / `solid` / `outline`
+ *   - `size`: `sm` (default) / `md`
+ *
+ * Token-driven: every Tailwind utility resolves through
+ * `dashforgePreset()` → CSS variables. No hardcoded hex.
+ *
+ * `dark:` variants on color palettes (lines 49-77 of legacy
+ * RenderChip, preserved here) are INTENTIONAL — color palettes do not
+ * auto-invert via the CSS-var swap (only the `neutral` palette does),
+ * so the `dark:` shift is a deliberate design choice (darker bg +
+ * lighter text in dark mode for visual cohesion). `dark:` on the
+ * `neutral` row is AVOIDED — that would double-invert.
+ */
+export const chipVariants = tv({
+  base: [
+    'inline-flex items-center gap-1 rounded-full font-medium',
+    'whitespace-nowrap',
+    // Smooth transitions for clickable / selected state changes.
+    'transition-colors',
+    'motion-reduce:transition-none',
+  ],
+  variants: {
+    color: {
+      neutral: '',
+      primary: '',
+      secondary: '',
+      success: '',
+      warning: '',
+      danger: '',
+      info: '',
+    },
+    variant: {
+      soft: '',
+      solid: '',
+      outline: '',
+    },
+    size: {
+      sm: 'h-5 px-2 text-xs',
+      md: 'h-6 px-2.5 text-xs',
+    },
+    /**
+     * Clickable state — adds focus ring + hover transition. Applied
+     * when the chip renders as `<button>` (i.e. `onClick` or
+     * explicit `clickable` is set).
+     */
+    clickable: {
+      true: [
+        'cursor-pointer select-none',
+        'outline-none focus-visible:ring-2 focus-visible:ring-offset-1',
+      ],
+    },
+    /**
+     * Selected state — used on filter chips to indicate active
+     * selection. Visually shifts the chip to a heavier emphasis
+     * (one step up the elevation ladder of its current variant).
+     * Compound rules below apply the actual shift per (variant, color)
+     * cell.
+     */
+    selected: {
+      true: 'ring-2 ring-offset-1',
+    },
+    /** Disabled state for clickable chips. */
+    disabled: {
+      true: 'opacity-50 cursor-not-allowed pointer-events-none',
+    },
+  },
+  compoundVariants: [
+    // ─── soft × color ──────────────────────────────────────────────
+    // Subtle bg + readable text. Neutral row uses NO `dark:` (auto-
+    // inverts via the dashforgePreset CSS-var swap). Color rows KEEP
+    // `dark:` (color palettes don't auto-invert).
+    { variant: 'soft', color: 'neutral',   class: 'bg-neutral-100 text-neutral-700' },
+    { variant: 'soft', color: 'primary',   class: 'bg-primary-100 dark:bg-primary-950 text-primary-700 dark:text-primary-300' },
+    { variant: 'soft', color: 'secondary', class: 'bg-secondary-100 dark:bg-secondary-950 text-secondary-700 dark:text-secondary-300' },
+    { variant: 'soft', color: 'success',   class: 'bg-success-100 dark:bg-success-950 text-success-700 dark:text-success-300' },
+    { variant: 'soft', color: 'warning',   class: 'bg-warning-100 dark:bg-warning-950 text-warning-700 dark:text-warning-300' },
+    { variant: 'soft', color: 'danger',    class: 'bg-danger-100 dark:bg-danger-950 text-danger-700 dark:text-danger-300' },
+    { variant: 'soft', color: 'info',      class: 'bg-info-100 dark:bg-info-950 text-info-700 dark:text-info-300' },
+    // ─── solid × color ─────────────────────────────────────────────
+    // Full bg + contrasting text. Solid neutral uses neutral-700/50
+    // (both on neutral palette → auto-invert together).
+    // `text-white` is deliberately NOT used: white does not auto-invert,
+    // which would flip the contrast in dark mode for the neutral row.
+    { variant: 'solid', color: 'neutral',   class: 'bg-neutral-700 text-neutral-50' },
+    { variant: 'solid', color: 'primary',   class: 'bg-primary-500 text-white' },
+    { variant: 'solid', color: 'secondary', class: 'bg-secondary-500 text-white' },
+    { variant: 'solid', color: 'success',   class: 'bg-success-500 text-white' },
+    { variant: 'solid', color: 'warning',   class: 'bg-warning-500 text-white' },
+    { variant: 'solid', color: 'danger',    class: 'bg-danger-500 text-white' },
+    { variant: 'solid', color: 'info',      class: 'bg-info-500 text-white' },
+    // ─── outline × color ───────────────────────────────────────────
+    // Border + colored text. Outline neutral: both auto-invert via
+    // CSS-var swap. Color rows: `dark:text-*-300` for legibility in
+    // dark mode on a transparent background.
+    { variant: 'outline', color: 'neutral',   class: 'border border-neutral-300 text-neutral-700' },
+    { variant: 'outline', color: 'primary',   class: 'border border-primary-500 text-primary-700 dark:text-primary-300' },
+    { variant: 'outline', color: 'secondary', class: 'border border-secondary-500 text-secondary-700 dark:text-secondary-300' },
+    { variant: 'outline', color: 'success',   class: 'border border-success-500 text-success-700 dark:text-success-300' },
+    { variant: 'outline', color: 'warning',   class: 'border border-warning-500 text-warning-700 dark:text-warning-300' },
+    { variant: 'outline', color: 'danger',    class: 'border border-danger-500 text-danger-700 dark:text-danger-300' },
+    { variant: 'outline', color: 'info',      class: 'border border-info-500 text-info-700 dark:text-info-300' },
+    // ─── clickable × color hover (subtle bg shift) ─────────────────
+    // Hover state on clickable chips. Each (variant, color) hover
+    // emits a one-tier deeper bg tint, working across both modes via
+    // the same auto-invert logic as the base compound.
+    { clickable: true, variant: 'soft',  color: 'neutral',   class: 'hover:bg-neutral-200' },
+    { clickable: true, variant: 'soft',  color: 'primary',   class: 'hover:bg-primary-200 dark:hover:bg-primary-900' },
+    { clickable: true, variant: 'soft',  color: 'secondary', class: 'hover:bg-secondary-200 dark:hover:bg-secondary-900' },
+    { clickable: true, variant: 'soft',  color: 'success',   class: 'hover:bg-success-200 dark:hover:bg-success-900' },
+    { clickable: true, variant: 'soft',  color: 'warning',   class: 'hover:bg-warning-200 dark:hover:bg-warning-900' },
+    { clickable: true, variant: 'soft',  color: 'danger',    class: 'hover:bg-danger-200 dark:hover:bg-danger-900' },
+    { clickable: true, variant: 'soft',  color: 'info',      class: 'hover:bg-info-200 dark:hover:bg-info-900' },
+    // Solid hover → one tone darker
+    { clickable: true, variant: 'solid', color: 'neutral',   class: 'hover:bg-neutral-800' },
+    { clickable: true, variant: 'solid', color: 'primary',   class: 'hover:bg-primary-600' },
+    { clickable: true, variant: 'solid', color: 'secondary', class: 'hover:bg-secondary-600' },
+    { clickable: true, variant: 'solid', color: 'success',   class: 'hover:bg-success-600' },
+    { clickable: true, variant: 'solid', color: 'warning',   class: 'hover:bg-warning-600' },
+    { clickable: true, variant: 'solid', color: 'danger',    class: 'hover:bg-danger-600' },
+    { clickable: true, variant: 'solid', color: 'info',      class: 'hover:bg-info-600' },
+    // Outline hover → tinted bg appears (transparent → light tint)
+    { clickable: true, variant: 'outline', color: 'neutral',   class: 'hover:bg-neutral-100' },
+    { clickable: true, variant: 'outline', color: 'primary',   class: 'hover:bg-primary-50 dark:hover:bg-primary-950' },
+    { clickable: true, variant: 'outline', color: 'secondary', class: 'hover:bg-secondary-50 dark:hover:bg-secondary-950' },
+    { clickable: true, variant: 'outline', color: 'success',   class: 'hover:bg-success-50 dark:hover:bg-success-950' },
+    { clickable: true, variant: 'outline', color: 'warning',   class: 'hover:bg-warning-50 dark:hover:bg-warning-950' },
+    { clickable: true, variant: 'outline', color: 'danger',    class: 'hover:bg-danger-50 dark:hover:bg-danger-950' },
+    { clickable: true, variant: 'outline', color: 'info',      class: 'hover:bg-info-50 dark:hover:bg-info-950' },
+    // ─── selected × color (focus ring tone) ────────────────────────
+    // When selected, the ring color matches the chip's intent.
+    { selected: true, color: 'neutral',   class: 'ring-neutral-400' },
+    { selected: true, color: 'primary',   class: 'ring-primary-500' },
+    { selected: true, color: 'secondary', class: 'ring-secondary-500' },
+    { selected: true, color: 'success',   class: 'ring-success-500' },
+    { selected: true, color: 'warning',   class: 'ring-warning-500' },
+    { selected: true, color: 'danger',    class: 'ring-danger-500' },
+    { selected: true, color: 'info',      class: 'ring-info-500' },
+    // ─── clickable × color (focus ring tone) ───────────────────────
+    // Tab-focused ring tone matches the chip color (same intent as
+    // selected but only when keyboard-focused, via focus-visible).
+    { clickable: true, color: 'neutral',   class: 'focus-visible:ring-neutral-400' },
+    { clickable: true, color: 'primary',   class: 'focus-visible:ring-primary-500' },
+    { clickable: true, color: 'secondary', class: 'focus-visible:ring-secondary-500' },
+    { clickable: true, color: 'success',   class: 'focus-visible:ring-success-500' },
+    { clickable: true, color: 'warning',   class: 'focus-visible:ring-warning-500' },
+    { clickable: true, color: 'danger',    class: 'focus-visible:ring-danger-500' },
+    { clickable: true, color: 'info',      class: 'focus-visible:ring-info-500' },
+  ],
+  defaultVariants: {
+    color: 'neutral',
+    variant: 'soft',
+    size: 'sm',
+  },
+});
+
+export type ChipVariants = VariantProps<typeof chipVariants>;

package/src/components/DataGrid/visibility/ColumnVisibilityMenu.tsx

@@ -120,7 +120,7 @@ export function ColumnVisibilityTrigger<T extends object>(
               {labels.columnsTitle}
             </span>
           </div>
-          <ul className="flex flex-col gap-0.5 max-h-72 overflow-auto">
+          <ul className="flex flex-col gap-0.5 max-h-72 overflow-auto list-none pl-0 m-0">
             {hideableCols.map((col) => {
               const field = col.field as string;
               const hidden = hiddenColumns.includes(field);

package/src/components/IconButton/IconButton.test.tsx

@@ -0,0 +1,367 @@
+// @vitest-environment jsdom
+import * as React from 'react';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { RbacProvider } from '@dashforge/rbac';
+import type { RbacPolicy, Subject } from '@dashforge/rbac';
+import { IconButton } from './IconButton.js';
+
+void React;
+afterEach(() => cleanup());
+
+/**
+ * `<IconButton>` unit tests. Covers:
+ *   - icon rendering, required aria-label, base layout primitives
+ *   - variant × color × size matrix (5 variants × 5 colors × 3 sizes)
+ *     — sampled, not exhaustive (the full matrix is covered by
+ *     `<Button>`'s tests since IconButton reuses `buttonVariants`)
+ *   - square geometry via SIZE_OVERRIDES + aspect-square
+ *   - asChild polymorphism via Radix Slot
+ *   - loading state (spinner + aria-busy + disabled)
+ *   - disabled state (explicit + access.disabled + access.readonly)
+ *   - access RBAC: hide / disable
+ *   - click handler firing semantics
+ */
+
+const TestIcon = () => (
+  <svg data-testid="test-icon" width={20} height={20} viewBox="0 0 20 20">
+    <circle cx="10" cy="10" r="8" />
+  </svg>
+);
+
+const FULL_ACCESS_POLICY: RbacPolicy = {
+  roles: [
+    {
+      name: 'admin',
+      permissions: [{ resource: '*', action: '*', effect: 'allow' }],
+    },
+  ],
+};
+const NO_ACCESS_POLICY: RbacPolicy = {
+  roles: [
+    { name: 'guest', permissions: [] },
+  ],
+};
+const adminSubject: Subject = { id: 'a', roles: ['admin'] };
+const guestSubject: Subject = { id: 'g', roles: ['guest'] };
+
+describe('<IconButton>', () => {
+  describe('rendering', () => {
+    it('renders the icon child', () => {
+      render(
+        <IconButton aria-label="x">
+          <TestIcon />
+        </IconButton>
+      );
+      expect(screen.getByTestId('test-icon')).toBeTruthy();
+    });
+
+    it('applies the aria-label to the button element', () => {
+      render(
+        <IconButton aria-label="Open settings">
+          <TestIcon />
+        </IconButton>
+      );
+      expect(screen.getByRole('button', { name: /open settings/i })).toBeTruthy();
+    });
+
+    it('renders as type="button" by default', () => {
+      render(
+        <IconButton aria-label="x">
+          <TestIcon />
+        </IconButton>
+      );
+      const btn = screen.getByRole('button') as HTMLButtonElement;
+      expect(btn.type).toBe('button');
+    });
+
+    it('respects an explicit type prop', () => {
+      render(
+        <IconButton aria-label="x" type="submit">
+          <TestIcon />
+        </IconButton>
+      );
+      const btn = screen.getByRole('button') as HTMLButtonElement;
+      expect(btn.type).toBe('submit');
+    });
+  });
+
+  describe('layout primitives — square geometry', () => {
+    it('always applies aspect-square + inline-flex (layout base)', () => {
+      const { container } = render(
+        <IconButton aria-label="x">
+          <TestIcon />
+        </IconButton>
+      );
+      const btn = container.querySelector('button')!;
+      expect(btn.className).toContain('aspect-square');
+      expect(btn.className).toContain('inline-flex');
+      expect(btn.className).toContain('items-center');
+      expect(btn.className).toContain('justify-center');
+    });
+
+    it('applies SIZE_OVERRIDES (w-N + px-0) for sm', () => {
+      const { container } = render(
+        <IconButton aria-label="x" size="sm">
+          <TestIcon />
+        </IconButton>
+      );
+      const btn = container.querySelector('button')!;
+      expect(btn.className).toContain('w-8');
+      expect(btn.className).toContain('px-0');
+    });
+
+    it('applies SIZE_OVERRIDES for md (default)', () => {
+      const { container } = render(
+        <IconButton aria-label="x">
+          <TestIcon />
+        </IconButton>
+      );
+      const btn = container.querySelector('button')!;
+      expect(btn.className).toContain('w-10');
+    });
+
+    it('applies SIZE_OVERRIDES for lg', () => {
+      const { container } = render(
+        <IconButton aria-label="x" size="lg">
+          <TestIcon />
+        </IconButton>
+      );
+      const btn = container.querySelector('button')!;
+      expect(btn.className).toContain('w-12');
+    });
+  });
+
+  describe('variant × color (inherits buttonVariants)', () => {
+    it('renders solid + primary (token-driven, no hardcoded hex)', () => {
+      const { container } = render(
+        <IconButton aria-label="x" variant="solid" color="primary">
+          <TestIcon />
+        </IconButton>
+      );
+      const btn = container.querySelector('button')!;
+      expect(btn.className).toContain('bg-primary-500');
+      expect(btn.className).not.toMatch(/#[0-9a-fA-F]{3,8}/);
+      expect(btn.className).not.toMatch(/\bdark:/);
+    });
+
+    it('renders outline + danger (border color comes through)', () => {
+      const { container } = render(
+        <IconButton aria-label="x" variant="outline" color="danger">
+          <TestIcon />
+        </IconButton>
+      );
+      const btn = container.querySelector('button')!;
+      expect(btn.className).toContain('border');
+      expect(btn.className).toContain('danger');
+    });
+
+    it('ghost variant uses bg-transparent', () => {
+      const { container } = render(
+        <IconButton aria-label="x" variant="ghost">
+          <TestIcon />
+        </IconButton>
+      );
+      const btn = container.querySelector('button')!;
+      expect(btn.className).toContain('bg-transparent');
+    });
+  });
+
+  describe('asChild polymorphism', () => {
+    it('renders the child via Radix Slot when asChild=true', () => {
+      const { container } = render(
+        <IconButton asChild aria-label="Open">
+          <a href="/open" data-testid="anchor-child">
+            <TestIcon />
+          </a>
+        </IconButton>
+      );
+      // Should be an <a>, not a <button>
+      const anchor = container.querySelector('a[data-testid="anchor-child"]');
+      expect(anchor).toBeTruthy();
+      expect(container.querySelector('button')).toBeNull();
+      // Anchor carries the IconButton className
+      expect(anchor!.className).toContain('aspect-square');
+    });
+  });
+
+  describe('loading state', () => {
+    it('swaps the icon with a spinner', () => {
+      const { container } = render(
+        <IconButton aria-label="x" loading>
+          <TestIcon />
+        </IconButton>
+      );
+      // Icon child gone, replaced by Spinner (animate-spin is on the
+      // Spinner's outer <span> wrapper now, since Sprint 4.4 refactor
+      // delegated to the public <Spinner> component).
+      expect(screen.queryByTestId('test-icon')).toBeNull();
+      const spinner = container.querySelector('[class*="animate-spin"]');
+      expect(spinner).toBeTruthy();
+    });
+
+    it('sets aria-busy=true while loading', () => {
+      render(
+        <IconButton aria-label="x" loading>
+          <TestIcon />
+        </IconButton>
+      );
+      const btn = screen.getByRole('button');
+      expect(btn.getAttribute('aria-busy')).toBe('true');
+    });
+
+    it('is disabled while loading', () => {
+      render(
+        <IconButton aria-label="x" loading>
+          <TestIcon />
+        </IconButton>
+      );
+      const btn = screen.getByRole('button') as HTMLButtonElement;
+      expect(btn.disabled).toBe(true);
+    });
+  });
+
+  describe('disabled state', () => {
+    it('respects the explicit disabled prop', () => {
+      render(
+        <IconButton aria-label="x" disabled>
+          <TestIcon />
+        </IconButton>
+      );
+      const btn = screen.getByRole('button') as HTMLButtonElement;
+      expect(btn.disabled).toBe(true);
+    });
+
+    it('does not fire onClick when disabled', () => {
+      const onClick = vi.fn();
+      render(
+        <IconButton aria-label="x" disabled onClick={onClick}>
+          <TestIcon />
+        </IconButton>
+      );
+      fireEvent.click(screen.getByRole('button'));
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('access RBAC integration', () => {
+    it('hides the button when access.onUnauthorized=hide and subject lacks permission', () => {
+      const { container } = render(
+        <RbacProvider policy={NO_ACCESS_POLICY} subject={guestSubject}>
+          <IconButton
+            aria-label="x"
+            access={{
+              resource: 'article',
+              action: 'publish',
+              onUnauthorized: 'hide',
+            }}
+          >
+            <TestIcon />
+          </IconButton>
+        </RbacProvider>
+      );
+      expect(container.querySelector('button')).toBeNull();
+    });
+
+    it('disables the button when access.onUnauthorized=disable and subject lacks permission', () => {
+      render(
+        <RbacProvider policy={NO_ACCESS_POLICY} subject={guestSubject}>
+          <IconButton
+            aria-label="x"
+            access={{
+              resource: 'article',
+              action: 'publish',
+              onUnauthorized: 'disable',
+            }}
+          >
+            <TestIcon />
+          </IconButton>
+        </RbacProvider>
+      );
+      const btn = screen.getByRole('button') as HTMLButtonElement;
+      expect(btn.disabled).toBe(true);
+    });
+
+    it('renders normally for an admin subject', () => {
+      render(
+        <RbacProvider policy={FULL_ACCESS_POLICY} subject={adminSubject}>
+          <IconButton
+            aria-label="x"
+            access={{
+              resource: 'article',
+              action: 'publish',
+              onUnauthorized: 'hide',
+            }}
+          >
+            <TestIcon />
+          </IconButton>
+        </RbacProvider>
+      );
+      expect(screen.getByRole('button')).toBeTruthy();
+    });
+  });
+
+  describe('click handler', () => {
+    it('fires onClick when clicked', () => {
+      const onClick = vi.fn();
+      render(
+        <IconButton aria-label="x" onClick={onClick}>
+          <TestIcon />
+        </IconButton>
+      );
+      fireEvent.click(screen.getByRole('button'));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('visibleWhen (engine-reactive, Sprint 4.4)', () => {
+    it('renders when visibleWhen returns true', () => {
+      const { container } = render(
+        <IconButton aria-label="x" visibleWhen={() => true}>
+          <TestIcon />
+        </IconButton>
+      );
+      expect(container.firstChild).toBeTruthy();
+    });
+
+    it('returns null when visibleWhen returns false', () => {
+      const { container } = render(
+        <IconButton aria-label="x" visibleWhen={() => false}>
+          <TestIcon />
+        </IconButton>
+      );
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('renders normally when visibleWhen is omitted', () => {
+      const { container } = render(
+        <IconButton aria-label="x">
+          <TestIcon />
+        </IconButton>
+      );
+      expect(container.firstChild).toBeTruthy();
+    });
+  });
+
+  describe('overrides — sx + className', () => {
+    it('appends sx to the root className', () => {
+      const { container } = render(
+        <IconButton aria-label="x" sx="ring-2 ring-purple-500">
+          <TestIcon />
+        </IconButton>
+      );
+      const btn = container.querySelector('button')!;
+      expect(btn.className).toContain('ring-purple-500');
+    });
+
+    it('appends className to the root', () => {
+      const { container } = render(
+        <IconButton aria-label="x" className="my-custom-icon-btn">
+          <TestIcon />
+        </IconButton>
+      );
+      const btn = container.querySelector('button')!;
+      expect(btn.className).toContain('my-custom-icon-btn');
+    });
+  });
+});