@dashforge/tw 1.1.0 → 1.1.1

package/src/components/Switch/Switch.test.tsx

@@ -1,131 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect, vi } from 'vitest';
-import { render, fireEvent } from '@testing-library/react';
-import { RbacProvider } from '@dashforge/rbac';
-import type { RbacPolicy, Subject } from '@dashforge/rbac';
-import { DashFormProvider } from '@dashforge/forms';
-import { Switch } from './Switch.js';
-
-const READ_ONLY: RbacPolicy = {
-  roles: [
-    {
-      name: 'viewer',
-      permissions: [{ resource: 'doc', action: 'update', effect: 'deny' }],
-    },
-  ],
-};
-const viewer: Subject = { id: 'v', roles: ['viewer'] };
-
-function withForm(children: React.ReactNode, defaultValues: Record<string, unknown> = {}) {
-  return <DashFormProvider defaultValues={defaultValues}>{children}</DashFormProvider>;
-}
-
-describe('Switch — standalone', () => {
-  it('renders the Radix root with role="switch"', () => {
-    const { getByRole } = render(<Switch name="notif" label="Notifications" />);
-    expect(getByRole('switch')).toBeTruthy();
-  });
-
-  it('label is associated with the control via htmlFor', () => {
-    const { getByText, getByRole } = render(<Switch name="x" label="On" />);
-    const label = getByText('On') as HTMLLabelElement;
-    const ctrl = getByRole('switch');
-    expect(label.htmlFor).toBe(ctrl.id);
-  });
-
-  it('fires onCheckedChange', () => {
-    const fn = vi.fn();
-    const { getByRole } = render(<Switch name="x" onCheckedChange={fn} />);
-    fireEvent.click(getByRole('switch'));
-    expect(fn).toHaveBeenCalledWith(true);
-  });
-
-  it('respects defaultChecked when uncontrolled', () => {
-    const { getByRole } = render(<Switch name="x" defaultChecked label="X" />);
-    expect(getByRole('switch').getAttribute('data-state')).toBe('checked');
-  });
-
-  it('thumb sits in unchecked position by default', () => {
-    const { container } = render(<Switch name="x" label="X" />);
-    const thumb = container.querySelector('[data-state]')?.children[0];
-    expect(thumb?.className).toContain('data-[state=unchecked]:translate-x-0');
-  });
-
-  it('size variants change control + thumb dimensions', () => {
-    const { container, rerender } = render(<Switch name="x" size="sm" label="X" />);
-    expect(container.querySelector('button[role="switch"]')?.className).toContain('h-4');
-    rerender(<Switch name="x" size="lg" label="X" />);
-    expect(container.querySelector('button[role="switch"]')?.className).toContain('h-7');
-  });
-
-  it('shows danger styling on error=true', () => {
-    const { container } = render(<Switch name="x" error label="X" helperText="bad" />);
-    const ctrl = container.querySelector('button[role="switch"]');
-    expect(ctrl?.className).toContain('bg-danger-200');
-  });
-});
-
-describe('Switch — override (sx + slotProps)', () => {
-  it('sx applies to root', () => {
-    const { container } = render(<Switch name="x" sx="ml-8" />);
-    expect((container.firstChild as HTMLElement).className).toContain('ml-8');
-  });
-
-  it('slotProps.thumb decorates the thumb', () => {
-    const { container } = render(
-      <Switch name="x" slotProps={{ thumb: { className: 'ring-2 ring-purple-500' } }} />
-    );
-    const thumb = container.querySelector('button[role="switch"]')?.children[0];
-    expect(thumb?.className).toContain('ring-purple-500');
-  });
-});
-
-describe('Switch — RBAC', () => {
-  it('hides when access denies with onUnauthorized=hide', () => {
-    const { queryByRole } = render(
-      <RbacProvider policy={READ_ONLY} subject={viewer}>
-        <Switch
-          name="x"
-          label="X"
-          access={{ resource: 'doc', action: 'update', onUnauthorized: 'hide' }}
-        />
-      </RbacProvider>
-    );
-    expect(queryByRole('switch')).toBeNull();
-  });
-
-  it('disables when access denies with onUnauthorized=disable', () => {
-    const { getByRole } = render(
-      <RbacProvider policy={READ_ONLY} subject={viewer}>
-        <Switch
-          name="x"
-          label="X"
-          access={{ resource: 'doc', action: 'update', onUnauthorized: 'disable' }}
-        />
-      </RbacProvider>
-    );
-    expect((getByRole('switch') as HTMLButtonElement).disabled).toBe(true);
-  });
-});
-
-describe('Switch — DashFormProvider integration', () => {
-  it('renders inside DashFormProvider', () => {
-    const { getByRole } = render(withForm(<Switch name="newsletter" label="Subscribe" />));
-    expect(getByRole('switch')).toBeTruthy();
-  });
-
-  it('flips state on click (bridge.setValue + onChange)', () => {
-    const { getByRole } = render(withForm(<Switch name="x" />, { x: false }));
-    const sw = getByRole('switch');
-    expect(sw.getAttribute('data-state')).toBe('unchecked');
-    fireEvent.click(sw);
-    expect(sw.getAttribute('data-state')).toBe('checked');
-  });
-
-  it('respects explicit `checked` (controlled wins over bridge)', () => {
-    const { getByRole } = render(
-      withForm(<Switch name="x" checked />, { x: false })
-    );
-    expect(getByRole('switch').getAttribute('data-state')).toBe('checked');
-  });
-});

package/src/components/Switch/Switch.tsx

@@ -1,158 +0,0 @@
-import { useContext, useEffect, useId, useRef } from 'react';
-import * as RadixSwitch from '@radix-ui/react-switch';
-import { DashFormContext, useEngineVisibility } from '@dashforge/ui-core';
-import type { DashFormBridge, FieldRegistration } from '@dashforge/ui-core';
-import { useDashFieldMeta } from '@dashforge/forms';
-import { cn } from '../../utils/cn.js';
-import { useAccessState } from '../../hooks/useAccessState.js';
-import { resolveValidationState } from '../_shared/resolveValidationState.js';
-import { switchVariants } from './switch.variants.js';
-import type { SwitchProps } from './switch.types.js';
-
-/**
- * Dashforge TW Switch — bridge-integrated toggle.
- *
- * Implementation mirrors `<Checkbox>` (same 8-step bridge integration
- * pattern, same StrictMode-safe unregister, same controlled-vs-
- * uncontrolled Radix props logic) — the only differences are:
- *
- *  - Renders Radix `Switch.Root` + `Switch.Thumb` instead of `Checkbox`.
- *  - No indicator icon (the thumb position is the visual state).
- *  - Variants drive both control track dimensions AND the thumb
- *    translate-x distance so the knob lands flush at each end.
- */
-export function Switch(props: SwitchProps) {
-  const {
-    name,
-    rules,
-    visibleWhen,
-    label,
-    helperText,
-    error,
-    access,
-    size,
-    disabled,
-    checked,
-    defaultChecked,
-    onCheckedChange,
-    sx,
-    slotProps,
-  } = props;
-
-  const bridge = useContext(DashFormContext) as DashFormBridge | null;
-  const isVisible = useEngineVisibility(bridge?.engine, visibleWhen);
-  // Reactive snapshot — see Checkbox.tsx for the same rationale.
-  const fieldMeta = useDashFieldMeta(name);
-  const accessState = useAccessState(access);
-
-  const controlId = useId();
-
-  // StrictMode-safe unregister-on-unmount
-  const unregisterRef = useRef({ bridge, name });
-  unregisterRef.current = { bridge, name };
-  const isMountedRef = useRef(false);
-   
-  useEffect(() => {
-    isMountedRef.current = true;
-    return () => {
-      isMountedRef.current = false;
-      const { bridge: cap, name: capName } = unregisterRef.current;
-      queueMicrotask(() => {
-        if (!isMountedRef.current) cap?.unregister?.(capName);
-      });
-    };
-  }, []);
-
-  if (!isVisible) return null;
-  if (!accessState.visible) return null;
-
-  const effectiveDisabled =
-    Boolean(disabled) || accessState.disabled || accessState.readonly;
-
-  const isFormMode = Boolean(bridge?.register);
-
-  let resolvedChecked = checked ?? defaultChecked ?? false;
-  let resolvedError = error;
-  let resolvedHelperText: typeof helperText = helperText;
-  let registration: FieldRegistration | null = null;
-
-  if (isFormMode && bridge) {
-    registration = bridge.register(name, rules);
-    const validation = resolveValidationState(name, bridge, error, helperText);
-    resolvedError = validation.error;
-    resolvedHelperText = validation.helperText;
-    resolvedChecked =
-      checked !== undefined ? checked : Boolean(fieldMeta.value);
-  }
-
-  const handleCheckedChange = (next: boolean) => {
-    if (isFormMode && bridge) {
-      bridge.setValue?.(name, next);
-      const syntheticEvent = {
-        target: { name, checked: next, value: next },
-        type: 'change',
-      };
-      void registration?.onChange?.(syntheticEvent);
-    }
-    onCheckedChange?.(next);
-  };
-
-  const handleBlur = () => {
-    if (!isFormMode || !bridge) return;
-    const currentChecked = bridge.getValue(name) === true;
-    const syntheticEvent = {
-      target: { name, checked: currentChecked, value: currentChecked },
-      type: 'blur',
-    };
-    registration?.onBlur?.(syntheticEvent);
-  };
-
-  const v = switchVariants({ size, error: resolvedError });
-
-  // Controlled vs uncontrolled (same logic as Checkbox).
-  const radixStateProps: { checked?: boolean; defaultChecked?: boolean } = isFormMode
-    ? { checked: resolvedChecked }
-    : checked !== undefined
-      ? { checked }
-      : { defaultChecked: defaultChecked ?? false };
-
-  return (
-    <div className={cn(v.root(), sx, slotProps?.root?.className)}>
-      <RadixSwitch.Root
-        id={controlId}
-        name={name}
-        {...radixStateProps}
-        disabled={effectiveDisabled}
-        onCheckedChange={handleCheckedChange}
-        onBlur={handleBlur}
-        ref={registration?.ref as React.Ref<HTMLButtonElement> | undefined}
-        className={cn(v.control(), slotProps?.control?.className)}
-      >
-        <RadixSwitch.Thumb className={cn(v.thumb(), slotProps?.thumb?.className)} />
-      </RadixSwitch.Root>
-
-      <div className="flex flex-col">
-        {label && (
-          <label
-            htmlFor={controlId}
-            className={cn(v.label(), slotProps?.label?.className)}
-          >
-            {label}
-          </label>
-        )}
-        {resolvedHelperText && (
-          <p
-            className={cn(
-              resolvedError ? v.errorText() : v.helperText(),
-              resolvedError
-                ? slotProps?.errorText?.className
-                : slotProps?.helperText?.className
-            )}
-          >
-            {resolvedHelperText}
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/Switch/switch.types.ts

@@ -1,36 +0,0 @@
-import type { ReactNode } from 'react';
-import type { AccessRequirement } from '@dashforge/rbac';
-import type { Engine } from '@dashforge/ui-core';
-import type { SwitchVariants } from './switch.variants.js';
-
-export interface SwitchSlotProps {
-  root?: { className?: string };
-  control?: { className?: string };
-  thumb?: { className?: string };
-  label?: { className?: string };
-  helperText?: { className?: string };
-  errorText?: { className?: string };
-}
-
-/**
- * Props for the Dashforge TW `<Switch>` component.
- *
- * Mirrors the bridge contract of `@dashforge/ui/Switch` (MUI). Same
- * `name` / `rules` / `visibleWhen` / `access` semantics, same
- * validation gating. Renders through Radix `Switch.Root` + `Switch.Thumb`.
- */
-export interface SwitchProps extends Pick<SwitchVariants, 'size'> {
-  name: string;
-  label?: ReactNode;
-  rules?: unknown;
-  visibleWhen?: (engine: Engine) => boolean;
-  checked?: boolean;
-  defaultChecked?: boolean;
-  disabled?: boolean;
-  helperText?: ReactNode;
-  error?: boolean;
-  access?: AccessRequirement;
-  sx?: string;
-  slotProps?: SwitchSlotProps;
-  onCheckedChange?: (checked: boolean) => void;
-}

package/src/components/Switch/switch.variants.ts

@@ -1,70 +0,0 @@
-import { tv, type VariantProps } from 'tailwind-variants';
-
-/**
- * Tailwind-variants recipe for `<Switch>` with slots.
- *
- * Slots:
- *   - `root`       — outer flex wrapper (control + label)
- *   - `control`    — the visible track (Radix `Switch.Root`)
- *   - `thumb`      — the moving knob (Radix `Switch.Thumb`); animated
- *                    via translate-x on data-state="checked"
- *   - `label`      — text next to the control
- *   - `helperText` / `errorText` — informational lines below
- */
-export const switchVariants = tv({
-  slots: {
-    root: 'inline-flex items-start gap-3',
-    control: [
-      'relative inline-flex shrink-0 cursor-pointer items-center',
-      'rounded-full border-2 border-transparent',
-      'transition-colors',
-      'bg-neutral-300',
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-primary-500',
-      'data-[state=checked]:bg-primary-500',
-      'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
-    ],
-    thumb: [
-      'pointer-events-none inline-block rounded-full bg-white shadow ring-0',
-      // Slide animation gated on `prefers-reduced-motion: no-preference`
-      // (WCAG 2.3.3). The thumb still moves between positions instantly
-      // for users who request reduced motion — the data-state change
-      // applies the translate-x rule unconditionally, only the smooth
-      // transition between the two is suppressed.
-      'transition-transform motion-reduce:transition-none',
-      'data-[state=unchecked]:translate-x-0',
-    ],
-    label: 'select-none cursor-pointer text-neutral-900',
-    helperText: 'text-sm text-neutral-600 mt-1',
-    errorText: 'text-sm text-danger-600 mt-1',
-  },
-  variants: {
-    size: {
-      sm: {
-        control: 'h-4 w-7',
-        thumb: 'h-3 w-3 data-[state=checked]:translate-x-3',
-        label: 'text-sm',
-      },
-      md: {
-        control: 'h-6 w-11',
-        thumb: 'h-5 w-5 data-[state=checked]:translate-x-5',
-        label: 'text-base',
-      },
-      lg: {
-        control: 'h-7 w-14',
-        thumb: 'h-6 w-6 data-[state=checked]:translate-x-7',
-        label: 'text-lg',
-      },
-    },
-    error: {
-      true: {
-        control: 'bg-danger-200 data-[state=checked]:bg-danger-500 focus-visible:ring-danger-500',
-      },
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-    error: false,
-  },
-});
-
-export type SwitchVariants = VariantProps<typeof switchVariants>;

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

@@ -1,81 +0,0 @@
-// @vitest-environment jsdom
-/**
- * Performance guardrails for `<Table>` (non-virtualized).
- *
- * Table renders EVERY row in the DOM — its design ceiling is ~500
- * rows (past that, the consumer should switch to `<DataGrid>`). These
- * tests pin the mount cost at that ceiling so a regression in the
- * render path (e.g. an accidental O(n²) in the sort / search pipeline)
- * surfaces in CI.
- *
- * Budgets are deliberately generous — they catch order-of-magnitude
- * regressions under a cold workspace-wide test run, not micro-jitter.
- */
-import * as React from 'react';
-import { describe, it, expect, afterEach } from 'vitest';
-import { render, cleanup } from '@testing-library/react';
-import { Table } from './Table.js';
-import type { TableColumn } from './table.types.js';
-
-void React;
-afterEach(() => cleanup());
-
-interface Row {
-  id: string;
-  name: string;
-  email: string;
-  age: number;
-  city: string;
-}
-
-const COLS: TableColumn<Row>[] = [
-  { field: 'name', header: 'Name', sortable: true, searchable: true },
-  { field: 'email', header: 'Email', searchable: true },
-  { field: 'age', header: 'Age', sortable: true },
-  { field: 'city', header: 'City' },
-];
-
-function makeRows(n: number): Row[] {
-  const cities = ['Roma', 'Milano', 'Berlin'];
-  return Array.from({ length: n }).map((_, i) => ({
-    id: `r${i}`,
-    name: `User ${i}`,
-    email: `user${i}@example.com`,
-    age: 20 + (i % 50),
-    city: cities[i % 3] as string,
-  }));
-}
-
-describe('<Table> performance', () => {
-  it("mounts 500 rows (Table's row-count ceiling) under 800ms", () => {
-    const rows = makeRows(500);
-    const t0 = performance.now();
-    render(<Table rows={rows} cols={COLS} getRowId={(r) => r.id} />);
-    const t1 = performance.now();
-    expect(t1 - t0).toBeLessThan(800);
-  });
-
-  it('renders every row in the DOM (non-virtualized contract)', () => {
-    const rows = makeRows(500);
-    const { container } = render(
-      <Table rows={rows} cols={COLS} getRowId={(r) => r.id} />,
-    );
-    // Non-virtualized: all 500 data rows are mounted.
-    expect(container.querySelectorAll('tbody tr').length).toBe(500);
-  });
-
-  it('applies a default sort over 500 rows within the mount budget', () => {
-    const rows = makeRows(500);
-    const t0 = performance.now();
-    render(
-      <Table
-        rows={rows}
-        cols={COLS}
-        getRowId={(r) => r.id}
-        defaultSortModel={[{ field: 'name', direction: 'asc' }]}
-      />,
-    );
-    const t1 = performance.now();
-    expect(t1 - t0).toBeLessThan(800);
-  });
-});