@dashforge/tw 1.0.0 → 1.1.1

package/eslint.config.mjs

@@ -1,62 +0,0 @@
-import baseConfig from '../../../eslint.config.mjs';
-import reactHooks from 'eslint-plugin-react-hooks';
-
-export default [
-  ...baseConfig,
-  // React Hooks plugin — every component in this package authors
-  // hooks, so the rule set is required for `// eslint-disable-next-line
-  // react-hooks/exhaustive-deps` directives to be valid AND to catch
-  // real rules-of-hooks violations (hook called after early-return).
-  // Scoped here (not at workspace root) to avoid surfacing pre-existing
-  // unrelated bugs in sibling packages that fall outside this sprint's
-  // scope — those should be cleaned up in a dedicated workspace pass.
-  {
-    files: ['**/*.{ts,tsx,js,jsx,cts,mts,cjs,mjs}'],
-    plugins: { 'react-hooks': reactHooks },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-    },
-  },
-  {
-    files: ['**/*.json'],
-    rules: {
-      '@nx/dependency-checks': [
-        'error',
-        {
-          // Non-shipped files: their imports must NOT count toward the
-          // published `dependencies` set. Spec/test files import the
-          // test runner; the build/test config files import build
-          // tooling — all of which belong in `devDependencies`.
-          ignoredFiles: [
-            '{projectRoot}/eslint.config.{js,cjs,mjs,ts,cts,mts}',
-            '{projectRoot}/rollup.config.{js,ts,mjs,mts,cjs,cts}',
-            '{projectRoot}/vite.config.{js,ts,mjs,mts}',
-            '{projectRoot}/vitest.config.{js,ts,mjs,mts}',
-            '{projectRoot}/**/*.spec.{ts,tsx}',
-            '{projectRoot}/**/*.test.{ts,tsx}',
-          ],
-          // tw-tokens (CSS vars + Tailwind preset) and tw-theme
-          // (Provider that injects the runtime vars) are CONSUMER-FACING
-          // peer dependencies: the runtime requires them, but @dashforge/tw
-          // itself never imports them. Declaring them as peers documents
-          // the requirement without triggering the "not used" check.
-          // `tailwindcss` is the same case — a build-time peer (the
-          // consumer's Tailwind compiles the class strings + reads the
-          // `darkMode: 'selector'` config from `dashforgePreset()`); it
-          // is never an `import` site in this package's code.
-          ignoredDependencies: [
-            '@dashforge/tw-tokens',
-            '@dashforge/tw-theme',
-            'tailwindcss',
-          ],
-        },
-      ],
-    },
-    languageOptions: {
-      parser: await import('jsonc-eslint-parser'),
-    },
-  },
-  {
-    ignores: ['**/out-tsc'],
-  },
-];

package/project.json

@@ -1,15 +0,0 @@
-{
-  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
-  "name": "@dashforge/tw",
-  "targets": {
-    "typecheck": {
-      "options": {
-        "command": "tsc --build tsconfig.lib.json --emitDeclarationOnly"
-      }
-    },
-    "build": {
-      "_comment": "typecheck excluded from dependsOn: TS bundler resolver fails when consuming `@dashforge/forms/dist/index.d.ts` (a 1-line `export * from \"./src/index\"` re-export) through nx's composite project chain. `nx run typecheck` separately works; `nx run-many -t test` works (it bundles types via vitest). Re-attach `typecheck` once the publishables' dist d.ts wrappers are switched to inline `export ...` (out of scope F3).",
-      "dependsOn": ["^build"]
-    }
-  }
-}

package/rollup.config.cjs

@@ -1,16 +0,0 @@
-const { withNx } = require('@nx/rollup/with-nx');
-
-module.exports = withNx(
-  {
-    main: './src/index.ts',
-    outputPath: './dist',
-    tsConfig: './tsconfig.lib.json',
-    compiler: 'swc',
-    format: ['esm'],
-  },
-  {
-    // Provide additional rollup configuration here. See: https://rollupjs.org/configuration-options
-    // e.g.
-    // output: { sourcemap: true },
-  }
-);

package/src/components/Accordion/Accordion.test.tsx

@@ -1,95 +0,0 @@
-// @vitest-environment jsdom
-import * as React from 'react';
-import { describe, it, expect, afterEach } from 'vitest';
-import { render, screen, fireEvent, cleanup } from '@testing-library/react';
-import { Accordion } from './Accordion.js';
-
-void React;
-afterEach(() => cleanup());
-
-const items = [
-  { value: 'one',   header: 'Section one',   content: <p>One body</p> },
-  { value: 'two',   header: 'Section two',   content: <p>Two body</p> },
-  { value: 'three', header: 'Section three', content: <p>Three body</p> },
-];
-
-function regionIsOpen(bodyText: string): boolean {
-  const node = screen.queryByText(bodyText);
-  if (!node) return false;
-  const region = node.closest('[role="region"]');
-  if (!region) return false;
-  // Radix sets `hidden` attr on closed regions in jsdom.
-  return region.getAttribute('hidden') === null && !(region as HTMLElement).hidden;
-}
-
-describe('Accordion — single mode (default)', () => {
-  it('renders all triggers', () => {
-    render(<Accordion items={items} />);
-    expect(screen.queryByText('Section one')).not.toBeNull();
-    expect(screen.queryByText('Section two')).not.toBeNull();
-    expect(screen.queryByText('Section three')).not.toBeNull();
-  });
-
-  it('opens a panel on trigger click', () => {
-    render(<Accordion items={items} />);
-    expect(regionIsOpen('Two body')).toBe(false);
-    fireEvent.click(screen.getByText('Section two'));
-    expect(regionIsOpen('Two body')).toBe(true);
-  });
-
-  it('closes the open panel when clicked again (collapsible default)', () => {
-    render(<Accordion items={items} />);
-    const trigger = screen.getByText('Section two');
-    fireEvent.click(trigger);
-    expect(regionIsOpen('Two body')).toBe(true);
-    fireEvent.click(trigger);
-    expect(regionIsOpen('Two body')).toBe(false);
-  });
-
-  it('respects defaultValue', () => {
-    render(<Accordion items={items} defaultValue="three" />);
-    expect(regionIsOpen('Three body')).toBe(true);
-  });
-
-  it('emits onValueChange', () => {
-    let last: string | null = null;
-    render(<Accordion items={items} onValueChange={(v) => (last = v)} />);
-    fireEvent.click(screen.getByText('Section one'));
-    expect(last).toBe('one');
-  });
-});
-
-describe('Accordion — multiple mode', () => {
-  it('allows multiple panels open simultaneously', () => {
-    render(<Accordion type="multiple" items={items} defaultValue={['one', 'three']} />);
-    expect(regionIsOpen('One body')).toBe(true);
-    expect(regionIsOpen('Three body')).toBe(true);
-  });
-
-  it('emits onValueChange with the updated array', () => {
-    let last: string[] = [];
-    render(
-      <Accordion
-        type="multiple"
-        items={items}
-        defaultValue={['one']}
-        onValueChange={(v) => (last = v)}
-      />
-    );
-    fireEvent.click(screen.getByText('Section two'));
-    expect(last).toEqual(expect.arrayContaining(['one', 'two']));
-  });
-});
-
-describe('Accordion — disabled items', () => {
-  it('does not open a disabled section', () => {
-    const disabledItems = [
-      ...items.slice(0, 2),
-      { ...items[2]!, disabled: true },
-    ];
-    render(<Accordion items={disabledItems} />);
-    const trigger = screen.getByText('Section three');
-    fireEvent.click(trigger);
-    expect(regionIsOpen('Three body')).toBe(false);
-  });
-});

package/src/components/Accordion/Accordion.tsx

@@ -1,97 +0,0 @@
-import * as RadixAccordion from '@radix-ui/react-accordion';
-import { cn } from '../../utils/cn.js';
-import { accordionVariants } from './accordion.variants.js';
-import type {
-  AccordionProps,
-  AccordionItem,
-  AccordionSlotProps,
-} from './accordion.types.js';
-
-/**
- * Dashforge TW `<Accordion>` — collapsible section list.
- *
- * Built on `@radix-ui/react-accordion`:
- *  - APG accordion pattern: `role="region"` on content, header
- *    button with `aria-expanded` and `aria-controls` linked to
- *    the panel.
- *  - Keyboard support: Space / Enter toggle, ArrowDown / ArrowUp
- *    move focus between triggers, Home / End to extremes.
- *  - Two modes:
- *    - `type="single"` — at most one section open at a time;
- *      `collapsible` allows clicking the open section to close it
- *      (default true).
- *    - `type="multiple"` — multiple sections open simultaneously.
- *
- * The trigger renders a chevron that flips 180° via CSS
- * (`data-state=open` selector) — no React state, no JS animation.
- */
-export function Accordion(props: AccordionProps) {
-  const v = accordionVariants();
-  const { items, sx, slotProps } = props;
-
-  const renderItems = (items: AccordionItem[], slotProps?: AccordionSlotProps) =>
-    items.map((item) => (
-      <RadixAccordion.Item
-        key={item.value}
-        value={item.value}
-        disabled={item.disabled}
-        className={cn(v.item(), slotProps?.item?.className)}
-      >
-        <RadixAccordion.Header
-          className={cn(v.header(), slotProps?.header?.className)}
-        >
-          <RadixAccordion.Trigger
-            className={cn(v.trigger(), slotProps?.trigger?.className)}
-          >
-            {item.header}
-            <svg
-              className={cn(v.chevron(), slotProps?.chevron?.className)}
-              width="1em"
-              height="1em"
-              viewBox="0 0 16 16"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              aria-hidden="true"
-            >
-              <path d="M4 6l4 4 4-4" />
-            </svg>
-          </RadixAccordion.Trigger>
-        </RadixAccordion.Header>
-        <RadixAccordion.Content
-          className={cn(v.content(), slotProps?.content?.className)}
-        >
-          <div className="pb-3 pt-0">{item.content}</div>
-        </RadixAccordion.Content>
-      </RadixAccordion.Item>
-    ));
-
-  if (props.type === 'multiple') {
-    return (
-      <RadixAccordion.Root
-        type="multiple"
-        value={props.value}
-        defaultValue={props.defaultValue}
-        onValueChange={props.onValueChange}
-        className={cn(v.root(), sx, slotProps?.root?.className)}
-      >
-        {renderItems(items, slotProps)}
-      </RadixAccordion.Root>
-    );
-  }
-
-  return (
-    <RadixAccordion.Root
-      type="single"
-      collapsible={props.collapsible ?? true}
-      value={props.value}
-      defaultValue={props.defaultValue}
-      onValueChange={props.onValueChange}
-      className={cn(v.root(), sx, slotProps?.root?.className)}
-    >
-      {renderItems(items, slotProps)}
-    </RadixAccordion.Root>
-  );
-}

package/src/components/Accordion/accordion.types.ts

@@ -1,66 +0,0 @@
-import type { ReactNode } from 'react';
-
-export interface AccordionSlotProps {
-  root?: { className?: string };
-  item?: { className?: string };
-  header?: { className?: string };
-  trigger?: { className?: string };
-  content?: { className?: string };
-  chevron?: { className?: string };
-}
-
-/**
- * Single accordion section — paired `{ value, header, content }`.
- * The `value` is the canonical id (used in `value` / `defaultValue`
- * to control which sections are expanded).
- */
-export interface AccordionItem {
-  value: string;
-  /** Trigger label (clickable to expand / collapse). */
-  header: ReactNode;
-  /** Section body, revealed when this item is expanded. */
-  content: ReactNode;
-  /** Per-item disabled flag. */
-  disabled?: boolean;
-}
-
-interface AccordionBaseProps {
-  items: AccordionItem[];
-  /** Root className shortcut. */
-  sx?: string;
-  /** Per-slot overrides. */
-  slotProps?: AccordionSlotProps;
-}
-
-/**
- * Single-mode props — at most one section open at a time.
- * `collapsible: true` (default) lets the user close the open
- * section by clicking it again.
- */
-export interface AccordionSingleProps extends AccordionBaseProps {
-  type?: 'single';
-  value?: string;
-  defaultValue?: string;
-  onValueChange?: (value: string) => void;
-  /** @default true */
-  collapsible?: boolean;
-}
-
-/**
- * Multiple-mode props — any number of sections open simultaneously.
- */
-export interface AccordionMultipleProps extends AccordionBaseProps {
-  type: 'multiple';
-  value?: string[];
-  defaultValue?: string[];
-  onValueChange?: (value: string[]) => void;
-}
-
-/**
- * Props for `<Accordion>`.
- *
- * Built on `@radix-ui/react-accordion`. Discriminated by `type`:
- *  - `type="single"` (default) — `value` is `string`.
- *  - `type="multiple"` — `value` is `string[]`.
- */
-export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;

package/src/components/Accordion/accordion.variants.ts

@@ -1,32 +0,0 @@
-import { tv, type VariantProps } from 'tailwind-variants';
-
-export const accordionVariants = tv({
-  slots: {
-    root: 'w-full',
-    // Neutral palette auto-inverts via the dashforgePreset() CSS-var
-    // swap — no `dark:` variant needed (would double-invert).
-    item: 'border-b border-neutral-200',
-    header: 'flex',
-    trigger: [
-      'flex flex-1 items-center justify-between py-3 text-left',
-      'text-sm font-medium text-neutral-900',
-      'transition-all hover:underline',
-      'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:rounded',
-      '[&[data-state=open]>svg]:rotate-180',
-      'disabled:opacity-50 disabled:pointer-events-none',
-      'motion-reduce:transition-none',
-    ],
-    content: [
-      'overflow-hidden text-sm text-neutral-700',
-      'data-[state=open]:animate-accordion-down',
-      'data-[state=closed]:animate-accordion-up',
-      'motion-reduce:animate-none',
-    ],
-    chevron: [
-      'h-4 w-4 shrink-0 text-neutral-500 transition-transform duration-200',
-      'motion-reduce:transition-none motion-reduce:duration-0',
-    ],
-  },
-});
-
-export type AccordionVariants = VariantProps<typeof accordionVariants>;

package/src/components/AppShell/AppShell.test.tsx

@@ -1,223 +0,0 @@
-// @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 { AppShell } from './AppShell.js';
-
-void React;
-afterEach(() => cleanup());
-
-describe('<AppShell>', () => {
-  describe('rendering', () => {
-    it('renders main landmark with children', () => {
-      render(
-        <AppShell>
-          <p>page</p>
-        </AppShell>
-      );
-      const main = screen.getByRole('main');
-      expect(main.textContent).toBe('page');
-    });
-
-    it('renders header slot', () => {
-      render(
-        <AppShell header={<div data-testid="hdr">H</div>}>
-          <p>page</p>
-        </AppShell>
-      );
-      expect(screen.getByTestId('hdr')).toBeTruthy();
-    });
-
-    it('renders footer slot', () => {
-      render(
-        <AppShell footer={<div data-testid="ftr">F</div>}>
-          <p>page</p>
-        </AppShell>
-      );
-      expect(screen.getByTestId('ftr')).toBeTruthy();
-    });
-
-    it('renders nav slot (twice — desktop inline + mobile drawer)', () => {
-      const { container } = render(
-        <AppShell nav={<div data-testid="nav">N</div>}>
-          <p>page</p>
-        </AppShell>
-      );
-      // Both copies are in the DOM; the mobile one is hidden via CSS.
-      expect(container.querySelectorAll('[data-testid="nav"]')).toHaveLength(2);
-    });
-
-    it('does NOT render the nav-side asides when nav is omitted', () => {
-      const { container } = render(
-        <AppShell>
-          <p>page</p>
-        </AppShell>
-      );
-      // Only the <main> remains inside the body row.
-      expect(container.querySelectorAll('aside')).toHaveLength(0);
-    });
-  });
-
-  describe('mobile drawer', () => {
-    it('renders the mobile aside with aria-hidden=true by default', () => {
-      const { container } = render(
-        <AppShell nav={<div>N</div>}>
-          <p>page</p>
-        </AppShell>
-      );
-      const mobile = container.querySelectorAll('aside')[1];
-      expect(mobile.getAttribute('aria-hidden')).toBe('true');
-    });
-
-    it('exposes the mobile aside (aria-hidden=false) when navOpen', () => {
-      const { container } = render(
-        <AppShell nav={<div>N</div>} navOpen onNavOpenChange={vi.fn()}>
-          <p>page</p>
-        </AppShell>
-      );
-      const mobile = container.querySelectorAll('aside')[1];
-      expect(mobile.getAttribute('aria-hidden')).toBe('false');
-    });
-
-    it('fires onNavOpenChange(false) when the backdrop is clicked', () => {
-      const cb = vi.fn();
-      render(
-        <AppShell nav={<div>N</div>} navOpen onNavOpenChange={cb}>
-          <p>page</p>
-        </AppShell>
-      );
-      fireEvent.click(screen.getByTestId('appshell-backdrop'));
-      expect(cb).toHaveBeenCalledWith(false);
-    });
-
-    it('fires onNavOpenChange(false) when Escape is pressed', () => {
-      const cb = vi.fn();
-      render(
-        <AppShell nav={<div>N</div>} navOpen onNavOpenChange={cb}>
-          <p>page</p>
-        </AppShell>
-      );
-      fireEvent.keyDown(document, { key: 'Escape' });
-      expect(cb).toHaveBeenCalledWith(false);
-    });
-
-    it('does NOT fire Escape callback when drawer is closed', () => {
-      const cb = vi.fn();
-      render(
-        <AppShell nav={<div>N</div>} onNavOpenChange={cb}>
-          <p>page</p>
-        </AppShell>
-      );
-      fireEvent.keyDown(document, { key: 'Escape' });
-      expect(cb).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('body scroll lock', () => {
-    it('locks body overflow while navOpen is true', () => {
-      const { rerender, unmount } = render(
-        <AppShell nav={<div>N</div>} navOpen>
-          <p>page</p>
-        </AppShell>
-      );
-      expect(document.body.style.overflow).toBe('hidden');
-      rerender(
-        <AppShell nav={<div>N</div>}>
-          <p>page</p>
-        </AppShell>
-      );
-      expect(document.body.style.overflow).not.toBe('hidden');
-      unmount();
-    });
-
-    it('restores body overflow on unmount even if still open', () => {
-      const { unmount } = render(
-        <AppShell nav={<div>N</div>} navOpen>
-          <p>page</p>
-        </AppShell>
-      );
-      expect(document.body.style.overflow).toBe('hidden');
-      unmount();
-      expect(document.body.style.overflow).not.toBe('hidden');
-    });
-  });
-});
-
-describe('<AppShell> performance', () => {
-  it('mounts under 30ms with all slots filled', () => {
-    const t0 = performance.now();
-    render(
-      <AppShell
-        header={<div>H</div>}
-        nav={<div>N</div>}
-        footer={<div>F</div>}
-      >
-        <p>page</p>
-      </AppShell>
-    );
-    const t1 = performance.now();
-    expect(t1 - t0).toBeLessThan(30);
-  });
-
-  it('renders at most 2 times on mount', () => {
-    let count = 0;
-    const Counted = (p: React.ComponentProps<typeof AppShell>) => {
-      count++;
-      return <AppShell {...p} />;
-    };
-    render(
-      <Counted nav={<div>N</div>}>
-        <p>page</p>
-      </Counted>
-    );
-    expect(count).toBeLessThanOrEqual(2);
-  });
-
-  it('toggling navOpen costs ≤ 1 extra render on the wrapper', () => {
-    let count = 0;
-    const Counted = (p: React.ComponentProps<typeof AppShell>) => {
-      count++;
-      return <AppShell {...p} />;
-    };
-    const { rerender } = render(
-      <Counted nav={<div>N</div>} navOpen={false}>
-        <p>page</p>
-      </Counted>
-    );
-    const baseline = count;
-    rerender(
-      <Counted nav={<div>N</div>} navOpen={true}>
-        <p>page</p>
-      </Counted>
-    );
-    expect(count - baseline).toBeLessThanOrEqual(2);
-  });
-
-  it('does NOT re-render an unrelated sibling on navOpen toggle', () => {
-    const sibCount = { count: 0 };
-    const Sibling = () => {
-      sibCount.count++;
-      return null;
-    };
-    const Tree = ({ open }: { open: boolean }) => (
-      <div>
-        <AppShell nav={<div>N</div>} navOpen={open}>
-          <p>page</p>
-        </AppShell>
-        <Sibling />
-      </div>
-    );
-    const { rerender } = render(<Tree open={false} />);
-    const before = sibCount.count;
-    rerender(<Tree open={true} />);
-    rerender(<Tree open={false} />);
-    // Each parent re-render triggers the sibling once. 2 parent
-    // rerenders ⇒ ≤ 2 extra sibling renders (tolerance +1).
-    expect(sibCount.count - before).toBeLessThanOrEqual(3);
-  });
-});