@dashforge/tw 1.0.0 → 1.1.1

package/src/components/Skeleton/skeleton.variants.ts

@@ -1,87 +0,0 @@
-import { tv, type VariantProps } from 'tailwind-variants';
-
-/**
- * `<Skeleton>` variant recipe.
- *
- * Slots:
- *  - `root` — single element (atomic component)
- *
- * Variant axes:
- *  - `variant` (`text` | `rectangle` | `circle`) — shape / radius
- *  - `animation` (`pulse` | `wave` | `none`) — how the placeholder
- *    "breathes" while data loads. Always gated on
- *    `prefers-reduced-motion` (no exception — animations are
- *    purely cosmetic).
- *
- * Implementation notes:
- *
- *  - `pulse` uses Tailwind's built-in `animate-pulse` (opacity
- *    1.0 ↔ 0.5 over 2s, ease-in-out infinite).
- *  - `wave` overlays a moving gradient. Implemented with a
- *    `relative` container + an `::after` pseudo-element via a
- *    Tailwind arbitrary-value class. The gradient slides
- *    horizontally over the surface, mimicking the MUI Skeleton
- *    "wave" look.
- *  - Color uses neutral-200 (light) and neutral-800 (dark) for
- *    the base, picked up automatically by the dashforge preset's
- *    CSS-variable layer.
- *
- * Accessibility: the root has `aria-hidden="true"` (set on the JSX
- * side, not here). Screen readers skip the skeleton entirely;
- * the surrounding component is responsible for announcing
- * loading state via `aria-busy` or `aria-live` if needed.
- */
-export const skeletonVariants = tv({
-  slots: {
-    root: [
-      'block',
-      // Neutral palette auto-inverts via CSS-var swap (no `dark:`).
-      'bg-neutral-200',
-      'motion-reduce:animate-none',
-    ],
-  },
-  variants: {
-    variant: {
-      text: {
-        root: 'rounded h-[1em] w-full',
-      },
-      rectangle: {
-        root: 'rounded-md w-full h-[100px]',
-      },
-      circle: {
-        root: 'rounded-full w-10 h-10',
-      },
-    },
-    animation: {
-      pulse: {
-        root: 'animate-pulse',
-      },
-      wave: {
-        root: [
-          'relative overflow-hidden',
-          // The wave is rendered via an arbitrary-value ::after
-          // pseudo-element with a moving linear gradient. Tailwind
-          // doesn't ship a `wave` keyframe; we use the built-in
-          // `animate-pulse` as a fallback if a consumer needs to
-          // override. The gradient stop direction works in both
-          // light and dark mode (white shimmer in light, lighter
-          // overlay in dark).
-          'after:absolute after:inset-0',
-          'after:bg-gradient-to-r after:from-transparent after:via-white/40 after:to-transparent',
-          'dark:after:via-white/10',
-          'after:animate-pulse',
-          'after:motion-reduce:animate-none',
-        ],
-      },
-      none: {
-        root: '',
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'text',
-    animation: 'pulse',
-  },
-});
-
-export type SkeletonVariants = VariantProps<typeof skeletonVariants>;

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

@@ -1,144 +0,0 @@
-// @vitest-environment jsdom
-/**
- * Performance + re-render budget tests for `<SnackbarProvider>`.
- *
- * Guardrails:
- *
- *  1. Mount cost stays tiny — provider lives near app root.
- *  2. Enqueueing N snackbars in quick succession is O(N) total work,
- *     NOT O(N²) at the React level.
- *  3. Provider re-renders ONLY when the visible set changes — children
- *     subtree is untouched per enqueue.
- *  4. `api` object identity is stable across provider re-renders so
- *     consumers can put `enqueue` in `useEffect` deps safely.
- */
-import * as React from 'react';
-import { describe, it, expect, afterEach } from 'vitest';
-import {
-  render,
-  screen,
-  fireEvent,
-  cleanup,
-  act,
-} from '@testing-library/react';
-import { SnackbarProvider, useSnackbar } from './Snackbar.js';
-
-void React;
-afterEach(() => cleanup());
-
-describe('<SnackbarProvider> performance', () => {
-  it('mounts in under 200ms with empty children (cold-start safe budget)', () => {
-    const t0 = performance.now();
-    render(
-      <SnackbarProvider>
-        <div />
-      </SnackbarProvider>
-    );
-    const t1 = performance.now();
-    // Generous bound for cold-start under workspace-wide test runs;
-    // warm path is sub-10ms.
-    expect(t1 - t0).toBeLessThan(200);
-  });
-
-  it('enqueues 50 snackbars (cap=50) under 200ms', () => {
-    function Adder() {
-      const { enqueue } = useSnackbar();
-      return (
-        <button
-          data-testid="a"
-          onClick={() => {
-            for (let i = 0; i < 50; i++) {
-              enqueue({ message: `msg-${i}`, autoHideMs: 0 });
-            }
-          }}
-        >
-          add
-        </button>
-      );
-    }
-    render(
-      <SnackbarProvider maxVisible={50}>
-        <Adder />
-      </SnackbarProvider>
-    );
-    const t0 = performance.now();
-    act(() => {
-      fireEvent.click(screen.getByTestId('a'));
-    });
-    const t1 = performance.now();
-    expect(t1 - t0).toBeLessThan(200);
-  });
-});
-
-describe('<SnackbarProvider> re-render budget', () => {
-  it('children subtree does NOT re-render on enqueue', () => {
-    const childCount = { count: 0 };
-    const Child = () => {
-      childCount.count++;
-      return <div data-testid="child" />;
-    };
-    function Adder() {
-      const { enqueue } = useSnackbar();
-      return (
-        <button
-          data-testid="a"
-          onClick={() => enqueue({ message: 'hi', autoHideMs: 0 })}
-        >
-          add
-        </button>
-      );
-    }
-    render(
-      <SnackbarProvider>
-        <Child />
-        <Adder />
-      </SnackbarProvider>
-    );
-    const baseline = childCount.count;
-    act(() => {
-      fireEvent.click(screen.getByTestId('a'));
-      fireEvent.click(screen.getByTestId('a'));
-      fireEvent.click(screen.getByTestId('a'));
-    });
-    // The provider RE-renders on each enqueue (state change), which
-    // re-renders its direct children — Child is one of them, so it
-    // re-renders too. The contract is "no MORE than one re-render
-    // PER enqueue". Three enqueues ⇒ ≤ 3 extra child renders.
-    expect(childCount.count - baseline).toBeLessThanOrEqual(3);
-  });
-
-  it('useSnackbar() returns a STABLE api identity across re-renders', () => {
-    const captured: Array<unknown> = [];
-    function Capture() {
-      const api = useSnackbar();
-      captured.push(api);
-      return null;
-    }
-    const Outer = ({ x }: { x: number }) => (
-      <SnackbarProvider>
-        <div data-x={x} />
-        <Capture />
-      </SnackbarProvider>
-    );
-    const { rerender } = render(<Outer x={1} />);
-    rerender(<Outer x={2} />);
-    rerender(<Outer x={3} />);
-    expect(captured.length).toBeGreaterThanOrEqual(3);
-    expect(captured[0]).toBe(captured[1]);
-    expect(captured[1]).toBe(captured[2]);
-  });
-
-  it('renders at most 2 times on mount (provider wrapper)', () => {
-    let count = 0;
-    const Counted = (p: React.ComponentProps<typeof SnackbarProvider>) => {
-      count++;
-      return <SnackbarProvider {...p} />;
-    };
-    render(
-      <Counted>
-        <div />
-      </Counted>
-    );
-    expect(count).toBeLessThanOrEqual(2);
-  });
-});

package/src/components/Snackbar/Snackbar.test.tsx

@@ -1,327 +0,0 @@
-// @vitest-environment jsdom
-import * as React from 'react';
-import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
-import {
-  render,
-  screen,
-  fireEvent,
-  cleanup,
-  act,
-} from '@testing-library/react';
-import { SnackbarProvider, useSnackbar } from './Snackbar.js';
-
-void React;
-afterEach(() => cleanup());
-beforeEach(() => {
-  vi.useRealTimers();
-});
-
-/**
- * Test trigger — exposes a button per snackbar call. Each click
- * dispatches with the given options.
- */
-function Trigger({
-  options,
-  testid = 'trigger',
-}: {
-  options: Parameters<ReturnType<typeof useSnackbar>['enqueue']>[0];
-  testid?: string;
-}) {
-  const { enqueue } = useSnackbar();
-  return (
-    <button data-testid={testid} onClick={() => enqueue(options)}>
-      enqueue
-    </button>
-  );
-}
-
-describe('<SnackbarProvider> + useSnackbar()', () => {
-  describe('basic enqueue + render', () => {
-    it('renders nothing initially', () => {
-      render(
-        <SnackbarProvider>
-          <div />
-        </SnackbarProvider>
-      );
-      expect(screen.queryByRole('region', { name: 'Notifications' })).toBeTruthy();
-      expect(screen.queryByText(/./)).toBeNull();
-    });
-
-    it('shows a snackbar when enqueue() is called', () => {
-      render(
-        <SnackbarProvider>
-          <Trigger options={{ message: 'Saved!' }} />
-        </SnackbarProvider>
-      );
-      act(() => {
-        fireEvent.click(screen.getByTestId('trigger'));
-      });
-      expect(screen.getByText('Saved!')).toBeTruthy();
-    });
-
-    it('renders the close button by default', () => {
-      render(
-        <SnackbarProvider>
-          <Trigger options={{ message: 'Saved!' }} />
-        </SnackbarProvider>
-      );
-      act(() => {
-        fireEvent.click(screen.getByTestId('trigger'));
-      });
-      expect(
-        screen.getByRole('button', { name: 'Dismiss notification' })
-      ).toBeTruthy();
-    });
-
-    it('hides the close button when showClose=false', () => {
-      render(
-        <SnackbarProvider>
-          <Trigger options={{ message: 'No close', showClose: false }} />
-        </SnackbarProvider>
-      );
-      act(() => {
-        fireEvent.click(screen.getByTestId('trigger'));
-      });
-      expect(
-        screen.queryByRole('button', { name: 'Dismiss notification' })
-      ).toBeNull();
-    });
-  });
-
-  describe('dismiss', () => {
-    it('removes the snackbar on close-button click', () => {
-      render(
-        <SnackbarProvider>
-          <Trigger options={{ message: 'Saved!', autoHideMs: 0 }} />
-        </SnackbarProvider>
-      );
-      act(() => {
-        fireEvent.click(screen.getByTestId('trigger'));
-      });
-      expect(screen.getByText('Saved!')).toBeTruthy();
-      act(() => {
-        fireEvent.click(
-          screen.getByRole('button', { name: 'Dismiss notification' })
-        );
-      });
-      expect(screen.queryByText('Saved!')).toBeNull();
-    });
-
-    it('dismissAll() clears every visible snackbar', () => {
-      function MultiTrigger() {
-        const { enqueue, dismissAll } = useSnackbar();
-        return (
-          <>
-            <button
-              data-testid="add1"
-              onClick={() => enqueue({ message: 'A', autoHideMs: 0 })}
-            >
-              add A
-            </button>
-            <button
-              data-testid="add2"
-              onClick={() => enqueue({ message: 'B', autoHideMs: 0 })}
-            >
-              add B
-            </button>
-            <button data-testid="clear" onClick={() => dismissAll()}>
-              clear
-            </button>
-          </>
-        );
-      }
-      render(
-        <SnackbarProvider>
-          <MultiTrigger />
-        </SnackbarProvider>
-      );
-      act(() => {
-        fireEvent.click(screen.getByTestId('add1'));
-        fireEvent.click(screen.getByTestId('add2'));
-      });
-      expect(screen.getByText('A')).toBeTruthy();
-      expect(screen.getByText('B')).toBeTruthy();
-      act(() => {
-        fireEvent.click(screen.getByTestId('clear'));
-      });
-      expect(screen.queryByText('A')).toBeNull();
-      expect(screen.queryByText('B')).toBeNull();
-    });
-  });
-
-  describe('auto-dismiss', () => {
-    it('auto-dismisses after autoHideMs', () => {
-      vi.useFakeTimers();
-      render(
-        <SnackbarProvider>
-          <Trigger options={{ message: 'Auto', autoHideMs: 1000 }} />
-        </SnackbarProvider>
-      );
-      act(() => {
-        fireEvent.click(screen.getByTestId('trigger'));
-      });
-      expect(screen.getByText('Auto')).toBeTruthy();
-      act(() => {
-        vi.advanceTimersByTime(1100);
-      });
-      expect(screen.queryByText('Auto')).toBeNull();
-    });
-
-    it('does NOT auto-dismiss when autoHideMs is 0', () => {
-      vi.useFakeTimers();
-      render(
-        <SnackbarProvider>
-          <Trigger options={{ message: 'Sticky', autoHideMs: 0 }} />
-        </SnackbarProvider>
-      );
-      act(() => {
-        fireEvent.click(screen.getByTestId('trigger'));
-      });
-      act(() => {
-        vi.advanceTimersByTime(60_000);
-      });
-      expect(screen.getByText('Sticky')).toBeTruthy();
-    });
-  });
-
-  describe('action button', () => {
-    it('invokes the action callback and dismisses the snackbar', () => {
-      const action = vi.fn();
-      render(
-        <SnackbarProvider>
-          <Trigger
-            options={{
-              message: 'Undo?',
-              autoHideMs: 0,
-              action: { label: 'Undo', onClick: action },
-            }}
-          />
-        </SnackbarProvider>
-      );
-      act(() => {
-        fireEvent.click(screen.getByTestId('trigger'));
-      });
-      act(() => {
-        fireEvent.click(screen.getByRole('button', { name: 'Undo' }));
-      });
-      expect(action).toHaveBeenCalledOnce();
-      expect(screen.queryByText('Undo?')).toBeNull();
-    });
-  });
-
-  describe('de-dup (same id)', () => {
-    it('replaces an existing snackbar instead of stacking when ids match', () => {
-      function TwoCallsSameId() {
-        const { enqueue } = useSnackbar();
-        return (
-          <button
-            data-testid="t"
-            onClick={() => {
-              enqueue({ id: 'saved', message: 'Saved v1', autoHideMs: 0 });
-              enqueue({ id: 'saved', message: 'Saved v2', autoHideMs: 0 });
-            }}
-          >
-            twice
-          </button>
-        );
-      }
-      render(
-        <SnackbarProvider>
-          <TwoCallsSameId />
-        </SnackbarProvider>
-      );
-      act(() => {
-        fireEvent.click(screen.getByTestId('t'));
-      });
-      // Only v2 should be visible.
-      expect(screen.queryByText('Saved v1')).toBeNull();
-      expect(screen.getByText('Saved v2')).toBeTruthy();
-    });
-  });
-
-  describe('maxVisible queueing', () => {
-    it('caps the visible count and promotes queued items on dismiss', () => {
-      vi.useFakeTimers();
-      function AddMany() {
-        const { enqueue, dismiss } = useSnackbar();
-        return (
-          <>
-            <button
-              data-testid="add-all"
-              onClick={() => {
-                enqueue({ id: 'a', message: 'A', autoHideMs: 0 });
-                enqueue({ id: 'b', message: 'B', autoHideMs: 0 });
-                enqueue({ id: 'c', message: 'C', autoHideMs: 0 });
-              }}
-            >
-              all
-            </button>
-            <button
-              data-testid="kill-a"
-              onClick={() => dismiss('a')}
-            >
-              kill A
-            </button>
-          </>
-        );
-      }
-      render(
-        <SnackbarProvider maxVisible={2}>
-          <AddMany />
-        </SnackbarProvider>
-      );
-      act(() => {
-        fireEvent.click(screen.getByTestId('add-all'));
-      });
-      expect(screen.getByText('A')).toBeTruthy();
-      expect(screen.getByText('B')).toBeTruthy();
-      expect(screen.queryByText('C')).toBeNull(); // queued
-      act(() => {
-        fireEvent.click(screen.getByTestId('kill-a'));
-      });
-      expect(screen.queryByText('A')).toBeNull();
-      expect(screen.getByText('B')).toBeTruthy();
-      expect(screen.getByText('C')).toBeTruthy(); // promoted
-    });
-  });
-
-  describe('useSnackbar() outside provider', () => {
-    it('throws a helpful error', () => {
-      const Lone = () => {
-        useSnackbar();
-        return null;
-      };
-      const spy = vi.spyOn(console, 'error').mockImplementation(() => undefined);
-      expect(() => render(<Lone />)).toThrow(/useSnackbar/);
-      spy.mockRestore();
-    });
-  });
-
-  describe('a11y wiring', () => {
-    it('renders an aria-live="polite" region with label "Notifications"', () => {
-      render(
-        <SnackbarProvider>
-          <div />
-        </SnackbarProvider>
-      );
-      const region = screen.getByRole('region', { name: 'Notifications' });
-      expect(region.getAttribute('aria-live')).toBe('polite');
-    });
-  });
-
-  describe('severity rendering', () => {
-    (['info', 'success', 'warning', 'danger'] as const).forEach((sev) => {
-      it(`renders the ${sev} glyph`, () => {
-        render(
-          <SnackbarProvider>
-            <Trigger options={{ message: sev, severity: sev }} />
-          </SnackbarProvider>
-        );
-        act(() => {
-          fireEvent.click(screen.getByTestId('trigger'));
-        });
-        expect(screen.getByText(sev)).toBeTruthy();
-      });
-    });
-  });
-});