@dashforge/tw 1.0.0 → 1.1.1

package/src/components/Container/container.types.ts

@@ -1,45 +0,0 @@
-import type { ElementType, HTMLAttributes } from 'react';
-import type { ContainerVariants } from './container.variants.js';
-
-/**
- * Props for `<Container>` — page-level centered max-width wrapper.
- *
- * Use at the page-root level (or section-root) to constrain content
- * width and apply the canonical responsive horizontal padding ramp.
- * Compose Stack/Grid INSIDE Container for the actual layout work.
- *
- * Native attribute overrides:
- *   • `className` omitted in favour of `sx` (utility string, merged
- *     via tailwind-merge — same convention as Box/Stack/Grid/Typography).
- */
-export interface ContainerProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'className'>,
-          Pick<ContainerVariants, 'size' | 'px' | 'centerContent'> {
-  /**
-   * Override the rendered HTML tag. Defaults to `'div'`. Use
-   * `as="main"` for the primary content region of a page,
-   * `as="section"` for a named section, `as="article"` for a
-   * self-contained article shell.
-   *
-   * Ignored when `asChild` is true.
-   */
-  as?: ElementType;
-
-  /**
-   * Render via Radix `Slot` — the Container styles paint onto the
-   * single React child instead of wrapping it. Useful for letting a
-   * router `<main>` element receive the Container chrome without
-   * adding an intermediate `<div>` in the tree.
-   *
-   * Mutually exclusive with `as` (when both are passed, `asChild` wins).
-   */
-  asChild?: boolean;
-
-  /**
-   * Utility classes appended to the variant chain. Resolved via
-   * `tailwind-merge` so the consumer's classes always win over the
-   * variant defaults — useful for one-off vertical padding (`sx="py-8"`),
-   * custom max-width (`sx="max-w-3xl"`), etc.
-   */
-  sx?: string;
-}

package/src/components/Container/container.variants.ts

@@ -1,81 +0,0 @@
-import { tv, type VariantProps } from 'tailwind-variants';
-
-/**
- * `containerVariants` — centered max-width wrapper for page layouts.
- *
- * Architectural role:
- *
- *   Every web app has the same pattern at the page-root level: a div
- *   that's `mx-auto`, capped at some `max-w-*`, with responsive
- *   horizontal padding. Without Container, every page rewrites:
- *
- *     <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
- *
- *   Container collapses that into one typed prop set, with size names
- *   that mirror Tailwind's breakpoint vocabulary so the muscle memory
- *   carries over (`size="lg"` ↔ `max-w-screen-lg`).
- *
- * Size axis — maps to Tailwind's `max-w-screen-*` aliases:
- *   • sm     → max-w-screen-sm     (640px)
- *   • md     → max-w-screen-md     (768px)
- *   • lg     → max-w-screen-lg     (1024px) — most common doc/content cap
- *   • xl     → max-w-screen-xl     (1280px) — default; comfortable for full apps
- *   • 2xl    → max-w-screen-2xl    (1536px) — wide dashboards
- *   • fluid  → no max-width at all (full bleed, padding still applies)
- *
- * Padding axis (`px`):
- *   • true (default) — responsive horizontal padding (px-4 sm:px-6 lg:px-8)
- *     The canonical Tailwind responsive padding ramp. Designed to keep
- *     edges from kissing the viewport on mobile and breathing more on
- *     larger screens.
- *   • false — no padding. Use when the consumer wants full bleed AND
- *     handles edge padding inside (e.g. a hero section with its own
- *     internal spacing scale).
- *
- * Center content axis (`centerContent`):
- *   • true  — turns the Container into a flex column with items-center
- *     so the page content stacks centered horizontally. Common for
- *     marketing pages, sign-in flows, "single artifact" layouts.
- *   • false (default) — children flow normally (block stacking).
- */
-export const containerVariants = tv({
-  base: 'mx-auto w-full',
-
-  variants: {
-    size: {
-      sm:    'max-w-screen-sm',
-      md:    'max-w-screen-md',
-      lg:    'max-w-screen-lg',
-      xl:    'max-w-screen-xl',
-      '2xl': 'max-w-screen-2xl',
-      fluid: '',
-    },
-
-    /*
-     * Responsive padding ramp. `false` skips it entirely so the
-     * consumer can supply custom padding via `sx` when needed.
-     */
-    px: {
-      true:  'px-4 sm:px-6 lg:px-8',
-      false: '',
-    },
-
-    /*
-     * Stacks children centered. Mutually compatible with all sizes —
-     * a fluid container with centerContent is the canonical "marketing
-     * hero" layout.
-     */
-    centerContent: {
-      true:  'flex flex-col items-center',
-      false: '',
-    },
-  },
-
-  defaultVariants: {
-    size: 'xl',
-    px: true,
-    centerContent: false,
-  },
-});
-
-export type ContainerVariants = VariantProps<typeof containerVariants>;

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

@@ -1,114 +0,0 @@
-// @vitest-environment jsdom
-/**
- * Performance guardrails for `<DataGrid>` (virtualized).
- *
- * The whole point of DataGrid is O(window) rendering: mounting 10k or
- * 100k rows must cost roughly the same as mounting a few hundred,
- * because only the visible window (+ overscan + 2 spacer `<tr>`) is
- * ever in the DOM. These tests pin that invariant — a regression that
- * accidentally mounts the full dataset (e.g. a broken `renderedRows`
- * slice) blows the DOM-node-count assertion immediately.
- *
- * Budgets are deliberately generous — order-of-magnitude regressions,
- * not micro-jitter.
- */
-import * as React from 'react';
-import { describe, it, expect, afterEach, beforeAll } from 'vitest';
-import { render, cleanup } from '@testing-library/react';
-import { DataGrid } from './DataGrid.js';
-import type { TableColumn } from '../Table/table.types.js';
-
-void React;
-afterEach(() => cleanup());
-
-beforeAll(() => {
-  // jsdom ships neither ResizeObserver nor IntersectionObserver — the
-  // virtualizer + Radix popovers need them.
-  if (typeof globalThis.ResizeObserver === 'undefined') {
-    (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver =
-      class {
-        observe() {}
-        unobserve() {}
-        disconnect() {}
-      };
-  }
-});
-
-interface Row {
-  id: string;
-  name: string;
-  email: string;
-  age: number;
-}
-
-const COLS: TableColumn<Row>[] = [
-  { field: 'name', header: 'Name', sortable: true },
-  { field: 'email', header: 'Email' },
-  { field: 'age', header: 'Age', sortable: true },
-];
-
-function makeRows(n: number): Row[] {
-  return Array.from({ length: n }).map((_, i) => ({
-    id: `r${i}`,
-    name: `User ${i}`,
-    email: `user${i}@example.com`,
-    age: 20 + (i % 50),
-  }));
-}
-
-describe('<DataGrid> virtualization performance', () => {
-  it('mounts 10 000 rows under 500ms (render cost is O(window))', () => {
-    const rows = makeRows(10_000);
-    const t0 = performance.now();
-    render(
-      <DataGrid
-        rows={rows}
-        cols={COLS}
-        getRowId={(r) => r.id}
-        rowHeight={40}
-        height="400px"
-      />,
-    );
-    const t1 = performance.now();
-    expect(t1 - t0).toBeLessThan(500);
-  });
-
-  it('mounts only the visible window in the DOM, NOT the full dataset', () => {
-    const rows = makeRows(10_000);
-    const { container } = render(
-      <DataGrid
-        rows={rows}
-        cols={COLS}
-        getRowId={(r) => r.id}
-        rowHeight={40}
-        height="400px"
-      />,
-    );
-    // Virtualized: visible window + overscan + up to 2 spacer rows —
-    // a few dozen `<tr>`, far below the 10 000 total.
-    const trCount = container.querySelectorAll('tbody tr').length;
-    expect(trCount).toBeGreaterThan(0);
-    expect(trCount).toBeLessThan(100);
-  });
-
-  it('mounts 100 000 rows within the same generous budget (virtualized)', () => {
-    const rows = makeRows(100_000);
-    const t0 = performance.now();
-    const { container } = render(
-      <DataGrid
-        rows={rows}
-        cols={COLS}
-        getRowId={(r) => r.id}
-        rowHeight={40}
-        height="400px"
-      />,
-    );
-    const t1 = performance.now();
-    // 10× the rows — the RENDER stays windowed, so the cost must not
-    // scale with the dataset. Generous absolute bound (not a ratio,
-    // to stay non-flaky under CI jitter).
-    expect(t1 - t0).toBeLessThan(800);
-    // And the DOM still holds only the window.
-    expect(container.querySelectorAll('tbody tr').length).toBeLessThan(100);
-  });
-});