@dashforge/tw 1.0.0 → 1.1.1

package/src/components/Table/cells/RenderButton.tsx

@@ -1,23 +0,0 @@
-import type { MouseEvent, ReactNode } from 'react';
-import { Button } from '../../Button/Button.js';
-import type { ButtonProps } from '../../Button/button.types.js';
-
-export interface RenderButtonProps
-  extends Pick<ButtonProps, 'variant' | 'color' | 'size' | 'disabled' | 'access'> {
-  label: ReactNode;
-  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-}
-
-/**
- * Inline button cell renderer. Thin wrapper over `<Button>` with
- * the size narrowed to `sm` by default (table density expects compact
- * controls).
- */
-export function RenderButton(props: RenderButtonProps) {
-  const { label, onClick, variant = 'ghost', size = 'sm', ...rest } = props;
-  return (
-    <Button variant={variant} size={size} onClick={onClick} {...rest}>
-      {label}
-    </Button>
-  );
-}

package/src/components/Table/cells/RenderChip.tsx

@@ -1,100 +0,0 @@
-import type { ReactNode } from 'react';
-import { tv, type VariantProps } from 'tailwind-variants';
-import { cn } from '../../../utils/cn.js';
-
-/**
- * Internal mini-chip used by the cell renderer library. Not exported
- * from `@dashforge/tw` as a standalone component (per Sprint 4.1
- * scope decision — a standalone `<Chip>` may ship in Sprint 5 if
- * demand emerges).
- *
- * Variants:
- *  - `color`: 7 intents (neutral / primary / success / warning /
- *    danger / info / secondary)
- *  - `variant`: `soft` (default) / `solid` / `outline`
- *  - `size`: `sm` / `md`
- */
-const chipVariants = tv({
-  base: [
-    'inline-flex items-center gap-1 rounded-full font-medium',
-    'whitespace-nowrap',
-  ],
-  variants: {
-    color: {
-      neutral: '',
-      primary: '',
-      success: '',
-      warning: '',
-      danger: '',
-      info: '',
-      secondary: '',
-    },
-    variant: {
-      soft: '',
-      solid: '',
-      outline: '',
-    },
-    size: {
-      sm: 'h-5 px-2 text-xs',
-      md: 'h-6 px-2.5 text-xs',
-    },
-  },
-  compoundVariants: [
-    // soft = subtle bg + dark text.
-    // Neutral row uses NO `dark:` variants — the dashforgePreset()
-    // CSS-var swap auto-inverts the neutral palette already.
-    // Color rows below KEEP `dark:` variants because color palettes
-    // don't auto-invert: the `dark:` shift is an intentional design
-    // choice (darker bg + lighter text in dark mode for visual cohesion).
-    { 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: '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' },
-    { variant: 'soft', color: 'secondary', class: 'bg-secondary-100 dark:bg-secondary-950 text-secondary-700 dark:text-secondary-300' },
-    // solid = full bg + contrasting text.
-    // solid neutral: both `bg-neutral-700` and `text-neutral-50` sit
-    // on the neutral palette, so they auto-invert together via the
-    // CSS-var swap — bg/text contrast is preserved in BOTH modes.
-    // (`text-white` is deliberately NOT used here: white does not
-    // auto-invert, which would flip the contrast in dark mode.)
-    { variant: 'solid', color: 'neutral',   class: 'bg-neutral-700 text-neutral-50' },
-    { variant: 'solid', color: 'primary',   class: 'bg-primary-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' },
-    { variant: 'solid', color: 'secondary', class: 'bg-secondary-500 text-white' },
-    // outline = border + colored text
-    // outline neutral: both border + text auto-invert via CSS-var swap.
-    { 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: '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' },
-    { variant: 'outline', color: 'secondary', class: 'border border-secondary-500 text-secondary-700 dark:text-secondary-300' },
-  ],
-  defaultVariants: {
-    color: 'neutral',
-    variant: 'soft',
-    size: 'sm',
-  },
-});
-
-type ChipVariants = VariantProps<typeof chipVariants>;
-
-export interface RenderChipProps extends ChipVariants {
-  children: ReactNode;
-  className?: string;
-}
-
-export function RenderChip(props: RenderChipProps) {
-  const { children, color, variant, size, className } = props;
-  return (
-    <span className={cn(chipVariants({ color, variant, size }), className)}>
-      {children}
-    </span>
-  );
-}

package/src/components/Table/cells/RenderText.tsx

@@ -1,37 +0,0 @@
-import type { ReactNode } from 'react';
-import { cn } from '../../../utils/cn.js';
-
-export interface RenderTextProps {
-  value: ReactNode;
-  /** Truncate to one line with ellipsis on overflow. @default false */
-  truncate?: boolean;
-  /** Secondary text color (less prominent). @default false */
-  muted?: boolean;
-  /** Extra class merged via `tailwind-merge`. */
-  className?: string;
-}
-
-/**
- * Plain text cell renderer. Wraps the value in a `<span>` and
- * optionally truncates on overflow. Use this for the most common
- * case: render a single string value.
- *
- * The Table component does NOT use this by default for plain
- * string columns — it just renders `{value}` directly. Use
- * `RenderText` when you need the truncate / muted styling.
- */
-export function RenderText(props: RenderTextProps) {
-  const { value, truncate, muted, className } = props;
-  return (
-    <span
-      className={cn(
-        truncate && 'block max-w-full truncate',
-        // Neutral palette auto-inverts via dashforgePreset() CSS-var swap.
-        muted && 'text-neutral-500',
-        className,
-      )}
-    >
-      {value}
-    </span>
-  );
-}

package/src/components/Table/cells/RenderTwoLine.tsx

@@ -1,34 +0,0 @@
-import type { ReactNode } from 'react';
-import { cn } from '../../../utils/cn.js';
-
-export interface RenderTwoLineProps {
-  primary: ReactNode;
-  secondary: ReactNode;
-  className?: string;
-}
-
-/**
- * Two-line cell renderer: a bold primary line stacked above a muted
- * secondary line. Useful for `Name + email`, `Title + ID`, etc.
- *
- * Replaces the MUI-side `RenderTwoLineCell` without the magic-number
- * vertical-align fudges (`mt: 0.8 / 0.2`) — flexbox handles the
- * vertical layout cleanly.
- *
- * Dashforge identity rule: text colors auto-invert via the
- * `dashforgePreset()` CSS-variable swap. No `dark:` variants needed
- * on neutral palette.
- */
-export function RenderTwoLine(props: RenderTwoLineProps) {
-  const { primary, secondary, className } = props;
-  return (
-    <div className={cn('flex flex-col leading-tight', className)}>
-      <span className="font-medium text-neutral-900">
-        {primary}
-      </span>
-      <span className="text-xs text-neutral-500 mt-0.5">
-        {secondary}
-      </span>
-    </div>
-  );
-}

package/src/components/Table/cells/RowActionsMenu.tsx

@@ -1,147 +0,0 @@
-import { useState, type ReactNode } from 'react';
-import type { AccessRequirement } from '@dashforge/rbac';
-import { Popover } from '../../Popover/Popover.js';
-import { useAccessState } from '../../../hooks/useAccessState.js';
-import { cn } from '../../../utils/cn.js';
-
-/**
- * Single action definition for `<RowActionsMenu>`.
- *
- * `access` (optional) gates the action via RBAC:
- *  - `onUnauthorized: 'hide'`     → action not rendered
- *  - `onUnauthorized: 'disable'`  → action visible, disabled
- *  - `onUnauthorized: 'readonly'` → action visible, disabled
- */
-export interface TableRowAction<T> {
-  label: ReactNode;
-  onClick: (row: T) => void;
-  icon?: ReactNode;
-  color?: 'default' | 'danger' | 'warning';
-  disabled?: boolean;
-  access?: AccessRequirement;
-}
-
-export interface RowActionsMenuProps<T> {
-  row: T;
-  actions: TableRowAction<T>[];
-  /** Custom trigger element. Defaults to a ⋮ icon button. */
-  trigger?: ReactNode;
-  /** Aria-label for the default trigger. */
-  ariaLabel?: string;
-}
-
-/**
- * 3-dot row actions menu. Renders a trigger button that opens a
- * Popover (Sprint 3 component) with a list of action menu items.
- *
- * Replaces the MUI-side `RowActions.tsx` (IconButton + Menu) with
- * the TW equivalents. Per-action RBAC honored: hidden actions are
- * filtered out, disabled actions render disabled.
- */
-export function RowActionsMenu<T>(props: RowActionsMenuProps<T>) {
-  const { row, actions, trigger, ariaLabel = 'Row actions' } = props;
-  const [open, setOpen] = useState(false);
-
-  // Filter actions by RBAC (hidden actions removed entirely)
-  const visibleActions = actions.filter((action) => {
-    if (!action.access) return true;
-    return action.access.onUnauthorized !== 'hide';
-  });
-
-  if (visibleActions.length === 0) return null;
-
-  return (
-    <Popover
-      open={open}
-      onOpenChange={setOpen}
-      side="bottom"
-      align="end"
-      content={
-        <ul className="flex flex-col gap-0.5 min-w-[140px]" role="menu">
-          {visibleActions.map((action, idx) => (
-            <RowActionMenuItem
-              key={idx}
-              action={action}
-              row={row}
-              onClose={() => setOpen(false)}
-            />
-          ))}
-        </ul>
-      }
-    >
-      {trigger ?? (
-        <button
-          type="button"
-          aria-label={ariaLabel}
-          aria-haspopup="menu"
-          aria-expanded={open}
-          className={cn(
-            'inline-flex items-center justify-center h-8 w-8 rounded-md',
-            // Neutral palette auto-inverts via the dashforgePreset()
-            // CSS-var swap — no `dark:` variant needed.
-            'text-neutral-500 hover:text-neutral-900',
-            'hover:bg-neutral-100',
-            'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
-            'transition-colors motion-reduce:transition-none',
-          )}
-        >
-          <svg
-            width="1em"
-            height="1em"
-            viewBox="0 0 16 16"
-            fill="currentColor"
-            aria-hidden="true"
-          >
-            <circle cx="8" cy="3"  r="1.4" />
-            <circle cx="8" cy="8"  r="1.4" />
-            <circle cx="8" cy="13" r="1.4" />
-          </svg>
-        </button>
-      )}
-    </Popover>
-  );
-}
-
-function RowActionMenuItem<T>(props: {
-  action: TableRowAction<T>;
-  row: T;
-  onClose: () => void;
-}) {
-  const { action, row, onClose } = props;
-  const accessState = useAccessState(action.access);
-  const isDisabled = action.disabled || accessState.disabled || accessState.readonly;
-
-  return (
-    <li role="none">
-      <button
-        type="button"
-        role="menuitem"
-        disabled={isDisabled}
-        onClick={() => {
-          onClose();
-          action.onClick(row);
-        }}
-        className={cn(
-          'flex items-center gap-2 w-full text-left',
-          'px-3 py-1.5 rounded-md text-sm',
-          // Neutral palette auto-inverts; danger/warning are color
-          // palettes (no auto-invert) so they keep their `dark:` shift
-          // intentionally — design choice, not a bug.
-          'hover:bg-neutral-100',
-          'focus:outline-none focus-visible:bg-neutral-100',
-          'transition-colors motion-reduce:transition-none',
-          'disabled:opacity-50 disabled:pointer-events-none',
-          action.color === 'danger' && 'text-danger-700 dark:text-danger-300',
-          action.color === 'warning' && 'text-warning-700 dark:text-warning-300',
-        )}
-      >
-        {action.icon && (
-          <span className="inline-flex shrink-0" aria-hidden="true">
-            {action.icon}
-          </span>
-        )}
-        <span>{action.label}</span>
-      </button>
-    </li>
-  );
-}

package/src/components/Table/cells/cells.test.tsx

@@ -1,247 +0,0 @@
-// @vitest-environment jsdom
-/**
- * Unit tests for the Table cell renderer library — `RenderText`,
- * `RenderTwoLine`, `RenderChip`, `RenderButton`, `RowActionsMenu`.
- *
- * Sprint 6 P4 — these shipped in Sprint 4.1 with only integration
- * coverage (via Table/DataGrid tests). This file exercises them
- * directly, including the RBAC + edge-case branches.
- */
-import * as React from 'react';
-import { describe, it, expect, afterEach, beforeAll, vi } from 'vitest';
-import { render, screen, fireEvent, cleanup } from '@testing-library/react';
-import { RenderText } from './RenderText.js';
-import { RenderTwoLine } from './RenderTwoLine.js';
-import { RenderChip } from './RenderChip.js';
-import { RenderButton } from './RenderButton.js';
-import { RowActionsMenu } from './RowActionsMenu.js';
-
-void React;
-afterEach(() => cleanup());
-
-beforeAll(() => {
-  if (typeof globalThis.ResizeObserver === 'undefined') {
-    (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver =
-      class {
-        observe() {}
-        unobserve() {}
-        disconnect() {}
-      };
-  }
-});
-
-describe('RenderText', () => {
-  it('renders the value in a span', () => {
-    render(<RenderText value="hello" />);
-    expect(screen.getByText('hello').tagName).toBe('SPAN');
-  });
-
-  it('applies the truncate class when truncate is set', () => {
-    render(<RenderText value="long text" truncate />);
-    expect(screen.getByText('long text').className).toContain('truncate');
-  });
-
-  it('applies the muted neutral color when muted is set', () => {
-    render(<RenderText value="dim" muted />);
-    expect(screen.getByText('dim').className).toContain('text-neutral-500');
-  });
-
-  it('merges a custom className', () => {
-    render(<RenderText value="x" className="custom-cls" />);
-    expect(screen.getByText('x').className).toContain('custom-cls');
-  });
-
-  it('renders nothing extra when no flags are set', () => {
-    render(<RenderText value="plain" />);
-    const el = screen.getByText('plain');
-    expect(el.className).not.toContain('truncate');
-    expect(el.className).not.toContain('text-neutral-500');
-  });
-});
-
-describe('RenderTwoLine', () => {
-  it('renders both primary and secondary text', () => {
-    render(<RenderTwoLine primary="Jane Doe" secondary="jane@example.com" />);
-    expect(screen.getByText('Jane Doe')).not.toBeNull();
-    expect(screen.getByText('jane@example.com')).not.toBeNull();
-  });
-
-  it('primary is font-medium, secondary is muted + smaller', () => {
-    render(<RenderTwoLine primary="P" secondary="S" />);
-    expect(screen.getByText('P').className).toContain('font-medium');
-    expect(screen.getByText('S').className).toContain('text-neutral-500');
-  });
-
-  it('merges a custom className on the wrapper', () => {
-    const { container } = render(
-      <RenderTwoLine primary="P" secondary="S" className="twoline-cls" />,
-    );
-    expect(container.firstElementChild?.className).toContain('twoline-cls');
-  });
-});
-
-describe('RenderChip', () => {
-  it('renders children', () => {
-    render(<RenderChip>active</RenderChip>);
-    expect(screen.getByText('active')).not.toBeNull();
-  });
-
-  it('defaults to soft + neutral + sm', () => {
-    render(<RenderChip>x</RenderChip>);
-    // soft neutral → bg-neutral-100
-    expect(screen.getByText('x').className).toContain('bg-neutral-100');
-  });
-
-  it.each(['primary', 'success', 'warning', 'danger', 'info', 'secondary'] as const)(
-    'renders soft variant for the %s intent',
-    (color) => {
-      render(<RenderChip color={color}>{color}</RenderChip>);
-      expect(screen.getByText(color).className).toContain(`bg-${color}-100`);
-    },
-  );
-
-  it('renders the solid variant', () => {
-    render(
-      <RenderChip variant="solid" color="primary">
-        solid
-      </RenderChip>,
-    );
-    expect(screen.getByText('solid').className).toContain('bg-primary-500');
-  });
-
-  it('renders the outline variant', () => {
-    render(
-      <RenderChip variant="outline" color="danger">
-        outline
-      </RenderChip>,
-    );
-    expect(screen.getByText('outline').className).toContain('border-danger-500');
-  });
-
-  it('renders the md size', () => {
-    render(
-      <RenderChip size="md">md</RenderChip>,
-    );
-    expect(screen.getByText('md').className).toContain('h-6');
-  });
-
-  it('merges a custom className', () => {
-    render(<RenderChip className="chip-cls">x</RenderChip>);
-    expect(screen.getByText('x').className).toContain('chip-cls');
-  });
-});
-
-describe('RenderButton', () => {
-  it('renders the label inside a button', () => {
-    render(<RenderButton label="Edit" />);
-    expect(screen.getByRole('button', { name: 'Edit' })).not.toBeNull();
-  });
-
-  it('fires onClick when clicked', () => {
-    const onClick = vi.fn();
-    render(<RenderButton label="Go" onClick={onClick} />);
-    fireEvent.click(screen.getByRole('button', { name: 'Go' }));
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('honors the disabled prop', () => {
-    const onClick = vi.fn();
-    render(<RenderButton label="Nope" onClick={onClick} disabled />);
-    const btn = screen.getByRole('button', { name: 'Nope' }) as HTMLButtonElement;
-    expect(btn.disabled).toBe(true);
-    fireEvent.click(btn);
-    expect(onClick).not.toHaveBeenCalled();
-  });
-});
-
-describe('RowActionsMenu', () => {
-  interface Row {
-    id: string;
-  }
-  const row: Row = { id: 'r1' };
-
-  it('renders the default 3-dot trigger', () => {
-    render(
-      <RowActionsMenu
-        row={row}
-        actions={[{ label: 'Edit', onClick: () => {} }]}
-      />,
-    );
-    expect(screen.getByRole('button', { name: 'Row actions' })).not.toBeNull();
-  });
-
-  it('returns null when there are no visible actions', () => {
-    const { container } = render(
-      <RowActionsMenu row={row} actions={[]} />,
-    );
-    expect(container.innerHTML).toBe('');
-  });
-
-  it('opens the menu and renders the action items', () => {
-    render(
-      <RowActionsMenu
-        row={row}
-        actions={[
-          { label: 'Edit', onClick: () => {} },
-          { label: 'Delete', onClick: () => {}, color: 'danger' },
-        ]}
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Row actions' }));
-    expect(screen.getByRole('menuitem', { name: 'Edit' })).not.toBeNull();
-    expect(screen.getByRole('menuitem', { name: 'Delete' })).not.toBeNull();
-  });
-
-  it('invokes the action onClick with the row', () => {
-    const onClick = vi.fn();
-    render(
-      <RowActionsMenu row={row} actions={[{ label: 'Edit', onClick }]} />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Row actions' }));
-    fireEvent.click(screen.getByRole('menuitem', { name: 'Edit' }));
-    expect(onClick).toHaveBeenCalledWith(row);
-  });
-
-  it('filters out actions whose RBAC says hide', () => {
-    render(
-      <RowActionsMenu
-        row={row}
-        actions={[
-          { label: 'Edit', onClick: () => {} },
-          {
-            label: 'SecretDelete',
-            onClick: () => {},
-            access: { onUnauthorized: 'hide' },
-          },
-        ]}
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Row actions' }));
-    expect(screen.queryByRole('menuitem', { name: 'Edit' })).not.toBeNull();
-    expect(screen.queryByRole('menuitem', { name: 'SecretDelete' })).toBeNull();
-  });
-
-  it('renders a disabled action item when action.disabled is set', () => {
-    render(
-      <RowActionsMenu
-        row={row}
-        actions={[{ label: 'Edit', onClick: () => {}, disabled: true }]}
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Row actions' }));
-    const item = screen.getByRole('menuitem', { name: 'Edit' }) as HTMLButtonElement;
-    expect(item.disabled).toBe(true);
-  });
-
-  it('uses a custom trigger when provided', () => {
-    render(
-      <RowActionsMenu
-        row={row}
-        actions={[{ label: 'Edit', onClick: () => {} }]}
-        trigger={<button type="button">custom-trigger</button>}
-      />,
-    );
-    expect(screen.getByRole('button', { name: 'custom-trigger' })).not.toBeNull();
-    expect(screen.queryByRole('button', { name: 'Row actions' })).toBeNull();
-  });
-});

package/src/components/Table/cells/index.ts

@@ -1,14 +0,0 @@
-export { RenderText } from './RenderText.js';
-export type { RenderTextProps } from './RenderText.js';
-
-export { RenderTwoLine } from './RenderTwoLine.js';
-export type { RenderTwoLineProps } from './RenderTwoLine.js';
-
-export { RenderChip } from './RenderChip.js';
-export type { RenderChipProps } from './RenderChip.js';
-
-export { RenderButton } from './RenderButton.js';
-export type { RenderButtonProps } from './RenderButton.js';
-
-export { RowActionsMenu } from './RowActionsMenu.js';
-export type { RowActionsMenuProps, TableRowAction } from './RowActionsMenu.js';