@astryxdesign/core 0.1.4-canary.37c19d3 → 0.1.4-canary.39ffd21

package/dist/utils/color.js

@@ -1,150 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file color.ts
- * @input CSS color strings (hex, rgb()/rgba(), a small set of named colors)
- * @output Shared color parsing/formatting primitives used across the design system
- * @position Package utility; backs theme token resolution, HCT color math, and chart rendering
- *
- * A single home for the color parsers that were previously duplicated across
- * the theme layer, charts, and lab. Consumers get one well-tested definition of
- * "parse this color" rather than several subtly different regexes.
- */
-
-/** A color decomposed into 0-255 RGB channels and a 0-1 alpha. */
-
-/** The named colors the design system relies on in token expressions. */
-const NAMED_COLORS = {
-  transparent: {
-    r: 0,
-    g: 0,
-    b: 0,
-    a: 0
-  },
-  black: {
-    r: 0,
-    g: 0,
-    b: 0,
-    a: 1
-  },
-  white: {
-    r: 255,
-    g: 255,
-    b: 255,
-    a: 1
-  }
-};
-const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
-
-/** Expand a shorthand hex body (`rgb`/`rgba`) to its full form (`rrggbb`/`rrggbbaa`). */
-function expandShorthand(body) {
-  return body.split('').map(c => c + c).join('');
-}
-
-/**
- * Parse a hex color into {@link RGBA}. Accepts `#rgb`, `#rgba`, `#rrggbb`, and
- * `#rrggbbaa`, with or without the leading `#`. Returns null for anything else.
- */
-export function parseHex(hex) {
-  if (typeof hex !== 'string') {
-    return null;
-  }
-  const body = hex.trim().replace(/^#/, '');
-  const normalized = body.length === 3 || body.length === 4 ? expandShorthand(body) : body;
-  if (normalized.length !== 6 && normalized.length !== 8 || !/^[0-9a-fA-F]+$/.test(normalized)) {
-    return null;
-  }
-  return {
-    r: parseInt(normalized.slice(0, 2), 16),
-    g: parseInt(normalized.slice(2, 4), 16),
-    b: parseInt(normalized.slice(4, 6), 16),
-    a: normalized.length === 8 ? parseInt(normalized.slice(6, 8), 16) / 255 : 1
-  };
-}
-
-/**
- * Parse an `rgb()`/`rgba()` color into {@link RGBA}. Accepts comma- or
- * space-separated channels, an optional `/ alpha`, and percentage channels.
- */
-export function parseRgb(value) {
-  const open = value.indexOf('(');
-  if (open === -1 || !value.trim().endsWith(')')) {
-    return null;
-  }
-  const body = value.slice(open + 1, value.lastIndexOf(')')).replace(/\//g, ' ');
-  const parts = body.split(/[\s,]+/).map(p => p.trim()).filter(Boolean);
-  if (parts.length < 3) {
-    return null;
-  }
-  const channel = p => {
-    const n = p.endsWith('%') ? parseFloat(p) / 100 * 255 : parseFloat(p);
-    return clamp(n, 0, 255);
-  };
-  const r = channel(parts[0]);
-  const g = channel(parts[1]);
-  const b = channel(parts[2]);
-  if ([r, g, b].some(Number.isNaN)) {
-    return null;
-  }
-  let a = 1;
-  if (parts.length >= 4) {
-    const raw = parts[3];
-    a = raw.endsWith('%') ? parseFloat(raw) / 100 : parseFloat(raw);
-    if (Number.isNaN(a)) {
-      return null;
-    }
-    a = clamp(a, 0, 1);
-  }
-  return {
-    r,
-    g,
-    b,
-    a
-  };
-}
-
-/**
- * Parse a concrete CSS color string into {@link RGBA}. Supports hex,
- * `rgb()`/`rgba()`, and the named colors used in token expressions. Returns
- * null for anything it can't evaluate (e.g. `var()`, `oklch()`, unknown names)
- * so callers can preserve the original expression rather than guessing.
- */
-export function parseColor(value) {
-  const trimmed = value.trim();
-  const named = NAMED_COLORS[trimmed.toLowerCase()];
-  if (named) {
-    return {
-      ...named
-    };
-  }
-  if (trimmed.startsWith('#')) {
-    return parseHex(trimmed);
-  }
-  if (/^rgba?\(/i.test(trimmed)) {
-    return parseRgb(trimmed);
-  }
-  return null;
-}
-
-/** Format RGB channels (0-255) as an uppercase `#RRGGBB` string. */
-export function formatHex(r, g, b) {
-  const channel = c => clamp(Math.round(c), 0, 255).toString(16).padStart(2, '0').toUpperCase();
-  return `#${channel(r)}${channel(g)}${channel(b)}`;
-}
-
-/**
- * Serialize {@link RGBA} to a compact, JS-usable CSS color: `#RRGGBB` when
- * fully opaque, otherwise `rgba(r, g, b, a)`.
- */
-export function formatColor({
-  r,
-  g,
-  b,
-  a
-}) {
-  if (a >= 1) {
-    return formatHex(r, g, b);
-  }
-  const round = n => clamp(Math.round(n), 0, 255);
-  return `rgba(${round(r)}, ${round(g)}, ${round(b)}, ${parseFloat(a.toFixed(4))})`;
-}

package/src/Resizable/ResizeHandle.test.tsx

@@ -1,180 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file ResizeHandle.test.tsx
- * @input Uses vitest, @testing-library/react, useResizable, ResizeHandle
- * @output Unit tests for ResizeHandle keyboard operability and ARIA state
- * @position Testing; validates ResizeHandle.tsx implementation
- *
- * SYNC: When ResizeHandle.tsx changes, update tests to match new behavior
- *
- * These tests guard the WAI-ARIA window-splitter keyboard contract: the
- * keydown handler must live on the focusable `role="separator"` element.
- * Keyboard resizing is pure state math in useResizable (no layout
- * measurement), so the observable effect asserted here is aria-valuenow,
- * which is bound to the region's `_size`.
- */
-
-import {describe, it, expect, vi} from 'vitest';
-import {render, screen, fireEvent, act} from '@testing-library/react';
-import {ResizeHandle} from './ResizeHandle';
-import type {ResizeHandleProps} from './ResizeHandle';
-import {useResizable} from './useResizable';
-import type {UseResizableSingleConfig} from './useResizable';
-
-const KEYBOARD_STEP = 10;
-const KEYBOARD_LARGE_STEP = 50;
-
-function Harness({
-  config,
-  handleProps,
-}: {
-  config?: UseResizableSingleConfig;
-  handleProps?: Partial<ResizeHandleProps>;
-}) {
-  const region = useResizable(
-    config ?? {defaultSize: 200, minSizePx: 100, maxSizePx: 400},
-  );
-  return (
-    <ResizeHandle resizable={region.props} label="Resize" {...handleProps} />
-  );
-}
-
-function getSeparator(): HTMLElement {
-  return screen.getByRole('separator');
-}
-
-describe('ResizeHandle', () => {
-  // --- ARIA wiring ---
-
-  it('exposes the region size and bounds via ARIA', () => {
-    render(<Harness />);
-    const separator = getSeparator();
-    expect(separator).toHaveAttribute('aria-valuenow', '200');
-    expect(separator).toHaveAttribute('aria-valuemin', '100');
-    expect(separator).toHaveAttribute('aria-valuemax', '400');
-    // Horizontal layout splits along the vertical axis.
-    expect(separator).toHaveAttribute('aria-orientation', 'vertical');
-    expect(separator).toHaveAttribute('aria-label', 'Resize');
-  });
-
-  it('makes the separator focusable', () => {
-    render(<Harness />);
-    const separator = getSeparator();
-    expect(separator).toHaveAttribute('tabindex', '0');
-    act(() => separator.focus());
-    expect(separator).toHaveFocus();
-  });
-
-  // --- Keyboard resizing (the fix: handler lives on the focused separator) ---
-
-  it('grows the panel by a step on ArrowRight', () => {
-    render(<Harness />);
-    const separator = getSeparator();
-    act(() => separator.focus());
-    fireEvent.keyDown(separator, {key: 'ArrowRight'});
-    expect(separator).toHaveAttribute(
-      'aria-valuenow',
-      String(200 + KEYBOARD_STEP),
-    );
-  });
-
-  it('shrinks the panel by a step on ArrowLeft', () => {
-    render(<Harness />);
-    const separator = getSeparator();
-    act(() => separator.focus());
-    fireEvent.keyDown(separator, {key: 'ArrowLeft'});
-    expect(separator).toHaveAttribute(
-      'aria-valuenow',
-      String(200 - KEYBOARD_STEP),
-    );
-  });
-
-  it('uses the large step when Shift is held', () => {
-    render(<Harness />);
-    const separator = getSeparator();
-    act(() => separator.focus());
-    fireEvent.keyDown(separator, {key: 'ArrowRight', shiftKey: true});
-    expect(separator).toHaveAttribute(
-      'aria-valuenow',
-      String(200 + KEYBOARD_LARGE_STEP),
-    );
-  });
-
-  it('jumps to the minimum on Home', () => {
-    render(<Harness />);
-    const separator = getSeparator();
-    act(() => separator.focus());
-    fireEvent.keyDown(separator, {key: 'Home'});
-    expect(separator).toHaveAttribute('aria-valuenow', '100');
-  });
-
-  it('jumps to the maximum on End', () => {
-    render(<Harness />);
-    const separator = getSeparator();
-    act(() => separator.focus());
-    fireEvent.keyDown(separator, {key: 'End'});
-    expect(separator).toHaveAttribute('aria-valuenow', '400');
-  });
-
-  it('resizes along the block axis for a vertical handle', () => {
-    render(
-      <Harness
-        config={{defaultSize: 200, minSizePx: 100, maxSizePx: 400}}
-        handleProps={{direction: 'vertical'}}
-      />,
-    );
-    const separator = getSeparator();
-    expect(separator).toHaveAttribute('aria-orientation', 'horizontal');
-    act(() => separator.focus());
-    fireEvent.keyDown(separator, {key: 'ArrowDown'});
-    expect(separator).toHaveAttribute(
-      'aria-valuenow',
-      String(200 + KEYBOARD_STEP),
-    );
-    fireEvent.keyDown(separator, {key: 'ArrowUp'});
-    expect(separator).toHaveAttribute('aria-valuenow', '200');
-  });
-
-  it('collapses on Enter when the region is collapsible', () => {
-    render(
-      <Harness
-        config={{
-          defaultSize: 200,
-          minSizePx: 100,
-          maxSizePx: 400,
-          collapsible: true,
-        }}
-      />,
-    );
-    const separator = getSeparator();
-    act(() => separator.focus());
-    fireEvent.keyDown(separator, {key: 'Enter'});
-    expect(separator).toHaveAttribute('aria-valuenow', '0');
-  });
-
-  // --- Disabled guard ---
-
-  it('ignores keyboard input when disabled', () => {
-    render(<Harness handleProps={{isDisabled: true}} />);
-    const separator = getSeparator();
-    expect(separator).toHaveAttribute('tabindex', '-1');
-    fireEvent.keyDown(separator, {key: 'ArrowRight'});
-    expect(separator).toHaveAttribute('aria-valuenow', '200');
-  });
-
-  // --- Prop composition (ordering choice: handler sits after {...props}) ---
-
-  it('runs a consumer onKeyDown alongside keyboard resizing', () => {
-    const onKeyDown = vi.fn();
-    render(<Harness handleProps={{onKeyDown}} />);
-    const separator = getSeparator();
-    act(() => separator.focus());
-    fireEvent.keyDown(separator, {key: 'ArrowRight'});
-    expect(onKeyDown).toHaveBeenCalledTimes(1);
-    expect(separator).toHaveAttribute(
-      'aria-valuenow',
-      String(200 + KEYBOARD_STEP),
-    );
-  });
-});

package/src/__tests__/TestIcon.tsx

@@ -1,26 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file TestIcon.tsx
- * @input Standard SVG props
- * @output A minimal SVG React component for tests
- * @position Test fixture; a stand-in external SVG icon for Icon component-mode tests
- *
- * A trivial SVG component used by tests that need to pass a custom SVG icon to
- * `Icon` (component mode) or component `*Icon` props. It forwards all standard
- * SVG props and its ref so tests exercising prop/ref forwarding behave the same
- * as a real third-party icon component.
- */
-
-import React, {type SVGProps} from 'react';
-
-export function TestIcon({
-  ref,
-  ...props
-}: SVGProps<SVGSVGElement> & {ref?: React.Ref<SVGSVGElement>}) {
-  return (
-    <svg ref={ref} viewBox="0 0 24 24" {...props}>
-      <path d="M4 4h16v16H4z" />
-    </svg>
-  );
-}

package/src/docPropReferences.test.ts

@@ -1,178 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/* eslint-disable @typescript-eslint/no-require-imports */
-/**
- * @file Guards doc prose against docs/source prop mismatches (#3360).
- *
- * Scans every {Name}.doc.mjs for prose phrases like "the foo prop on Bar"
- * and verifies the referenced prop is documented on the referenced
- * component. Doc prose is LLM training signal: a reference to a prop that
- * doesn't exist steers codegen toward hallucinated APIs (#3360 shipped a
- * bullet pointing at a nonexistent CodeBlock syntaxTheme prop).
- *
- * A reference to a missing prop is allowed only when the same string
- * explicitly negates it ("no such prop exists" / "does not exist"), the
- * corrective-bullet pattern used to counter known hallucinations.
- */
-
-import {describe, it, expect} from 'vitest';
-import {readdirSync} from 'node:fs';
-import {join, relative} from 'node:path';
-
-const SRC_DIR = __dirname;
-
-type DocModule = {
-  docs?: {
-    name?: string;
-    props?: {name: string}[];
-    components?: {name?: string; props?: {name: string}[]}[];
-  };
-};
-
-/**
- * Props intentionally omitted from doc props[]: PropDoc in docs-types.ts
- * says to skip internal/styling props, so prose may reference them even
- * though no doc lists them.
- */
-const UNIVERSAL_PROPS = new Set([
-  'xstyle',
-  'className',
-  'style',
-  'ref',
-  'data-testid',
-]);
-
-/**
- * Matches prose like "the foo prop on Bar", "foo prop of Bar", and
- * conjunction targets: "foo prop on Bar or Baz". Group 1 is the prop
- * (camelCase, lowercase first letter), group 2 the component name list.
- */
-const PROP_REF_PATTERN =
-  /\b([a-z][A-Za-z0-9]*) prop (?:on|of) (?:the )?([A-Z][A-Za-z0-9]*(?:(?:,(?: and| or)?| and| or) [A-Z][A-Za-z0-9]*)*)/g;
-
-/** A same-string negation marks the reference as a deliberate counter-signal. */
-const NEGATION_PATTERN = /no such prop|does not exist|doesn't exist/i;
-
-function findDocFiles(dir: string): string[] {
-  const files: string[] = [];
-  for (const entry of readdirSync(dir, {withFileTypes: true})) {
-    const full = join(dir, entry.name);
-    if (entry.isDirectory()) {
-      files.push(...findDocFiles(full));
-    } else if (entry.name.endsWith('.doc.mjs')) {
-      files.push(full);
-    }
-  }
-  return files;
-}
-
-/** Collect every string value reachable from a doc module export. */
-function collectStrings(value: unknown, out: string[]): void {
-  if (typeof value === 'string') {
-    out.push(value);
-  } else if (Array.isArray(value)) {
-    for (const item of value) {
-      collectStrings(item, out);
-    }
-  } else if (value && typeof value === 'object') {
-    for (const item of Object.values(value)) {
-      collectStrings(item, out);
-    }
-  }
-}
-
-const docFiles = findDocFiles(SRC_DIR);
-
-// Component name → documented prop names, from every doc file's props[]
-// (single and sub-component docs) and inline components[] entries.
-const documentedProps = new Map<string, Set<string>>();
-for (const file of docFiles) {
-  const mod = require(file) as DocModule;
-  const docs = mod.docs;
-  if (!docs) {
-    continue;
-  }
-  const entries = [
-    {name: docs.name, props: docs.props},
-    ...(docs.components || []),
-  ];
-  for (const {name, props} of entries) {
-    if (!name || !Array.isArray(props)) {
-      continue;
-    }
-    const set = documentedProps.get(name) || new Set<string>();
-    for (const prop of props) {
-      set.add(prop.name);
-    }
-    documentedProps.set(name, set);
-  }
-}
-
-interface Violation {
-  file: string;
-  component: string;
-  prop: string;
-  excerpt: string;
-}
-
-function findViolations(): Violation[] {
-  const violations: Violation[] = [];
-  for (const file of docFiles) {
-    const strings: string[] = [];
-    collectStrings(require(file), strings);
-    for (const text of strings) {
-      let match;
-      while ((match = PROP_REF_PATTERN.exec(text)) !== null) {
-        const [, prop, componentList] = match;
-        if (UNIVERSAL_PROPS.has(prop) || NEGATION_PATTERN.test(text)) {
-          continue;
-        }
-        for (const component of componentList.split(
-          /,(?: and| or)?| and | or /,
-        )) {
-          const name = component.trim();
-          if (!name) {
-            continue;
-          }
-          const known = documentedProps.get(name);
-          if (known && !known.has(prop)) {
-            violations.push({
-              file: relative(SRC_DIR, file),
-              component: name,
-              prop,
-              excerpt: text.slice(
-                Math.max(0, match.index - 40),
-                match.index + match[0].length + 20,
-              ),
-            });
-          }
-        }
-      }
-    }
-  }
-  return violations;
-}
-
-describe('doc prose prop references', () => {
-  it('sanity: discovers doc files and documented components', () => {
-    expect(docFiles.length).toBeGreaterThan(0);
-    expect(documentedProps.size).toBeGreaterThan(0);
-  });
-
-  it('every "X prop on Y" reference names a documented prop of Y', () => {
-    const violations = findViolations();
-    expect(
-      violations,
-      violations
-        .map(
-          v =>
-            `${v.file} references prop "${v.prop}" on ${v.component}, ` +
-            `which does not document it (…${v.excerpt}…). Either the prop ` +
-            `doesn't exist (fix the prose; negate with "no such prop ` +
-            `exists" if countering a known hallucination) or it exists in ` +
-            `source but is missing from the component's doc props[] (add it).`,
-        )
-        .join('\n'),
-    ).toEqual([]);
-  });
-});

package/src/utils/color.test.ts

@@ -1,133 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-import {describe, expect, it} from 'vitest';
-import {parseHex, parseRgb, parseColor, formatHex, formatColor} from './color';
-
-describe('parseHex', () => {
-  it('parses #rrggbb', () => {
-    expect(parseHex('#0064E0')).toEqual({r: 0, g: 100, b: 224, a: 1});
-  });
-
-  it('parses without a leading #', () => {
-    expect(parseHex('0064E0')).toEqual({r: 0, g: 100, b: 224, a: 1});
-  });
-
-  it('expands #rgb shorthand', () => {
-    expect(parseHex('#abc')).toEqual({r: 0xaa, g: 0xbb, b: 0xcc, a: 1});
-  });
-
-  it('parses #rrggbbaa alpha', () => {
-    expect(parseHex('#00000080')).toEqual({r: 0, g: 0, b: 0, a: 128 / 255});
-  });
-
-  it('expands #rgba shorthand alpha', () => {
-    expect(parseHex('#f008')).toEqual({
-      r: 0xff,
-      g: 0,
-      b: 0,
-      a: 0x88 / 255,
-    });
-  });
-
-  it('returns null for non-hex input', () => {
-    expect(parseHex('rgb(0,0,0)')).toBeNull();
-    expect(parseHex('#12')).toBeNull();
-    expect(parseHex('#zzzzzz')).toBeNull();
-    // @ts-expect-error runtime guard for non-string input
-    expect(parseHex(null)).toBeNull();
-  });
-});
-
-describe('parseRgb', () => {
-  it('parses comma-separated rgb()', () => {
-    expect(parseRgb('rgb(0, 100, 224)')).toEqual({
-      r: 0,
-      g: 100,
-      b: 224,
-      a: 1,
-    });
-  });
-
-  it('parses rgba() with alpha', () => {
-    expect(parseRgb('rgba(0, 0, 0, 0.5)')).toEqual({r: 0, g: 0, b: 0, a: 0.5});
-  });
-
-  it('parses space-separated with slash alpha', () => {
-    expect(parseRgb('rgb(0 100 224 / 0.25)')).toEqual({
-      r: 0,
-      g: 100,
-      b: 224,
-      a: 0.25,
-    });
-  });
-
-  it('parses percentage channels', () => {
-    expect(parseRgb('rgb(100%, 0%, 0%)')).toEqual({
-      r: 255,
-      g: 0,
-      b: 0,
-      a: 1,
-    });
-  });
-
-  it('clamps alpha and channels into range', () => {
-    expect(parseRgb('rgba(300, -20, 10, 2)')).toEqual({
-      r: 255,
-      g: 0,
-      b: 10,
-      a: 1,
-    });
-  });
-
-  it('returns null when it cannot parse', () => {
-    expect(parseRgb('rgb(0, 0)')).toBeNull();
-    expect(parseRgb('#000000')).toBeNull();
-  });
-});
-
-describe('parseColor', () => {
-  it('routes hex and rgb strings to the right parser', () => {
-    expect(parseColor('#FFFFFF')).toEqual({r: 255, g: 255, b: 255, a: 1});
-    expect(parseColor('rgb(1, 2, 3)')).toEqual({r: 1, g: 2, b: 3, a: 1});
-  });
-
-  it('resolves the named colors used in token expressions', () => {
-    expect(parseColor('transparent')).toEqual({r: 0, g: 0, b: 0, a: 0});
-    expect(parseColor('BLACK')).toEqual({r: 0, g: 0, b: 0, a: 1});
-    expect(parseColor('white')).toEqual({r: 255, g: 255, b: 255, a: 1});
-  });
-
-  it('returns null for unsupported colors so callers can preserve them', () => {
-    expect(parseColor('var(--color-accent)')).toBeNull();
-    expect(parseColor('oklch(0.5 0.1 200)')).toBeNull();
-    expect(parseColor('rebeccapurple')).toBeNull();
-  });
-});
-
-describe('formatHex', () => {
-  it('formats channels as uppercase #RRGGBB', () => {
-    expect(formatHex(0, 100, 224)).toBe('#0064E0');
-  });
-
-  it('rounds and clamps out-of-range channels', () => {
-    expect(formatHex(-5, 300, 127.6)).toBe('#00FF80');
-  });
-});
-
-describe('formatColor', () => {
-  it('formats opaque colors as hex', () => {
-    expect(formatColor({r: 0, g: 100, b: 224, a: 1})).toBe('#0064E0');
-  });
-
-  it('formats translucent colors as rgba()', () => {
-    expect(formatColor({r: 0, g: 100, b: 224, a: 0.2})).toBe(
-      'rgba(0, 100, 224, 0.2)',
-    );
-  });
-
-  it('round-trips through parseColor', () => {
-    const parsed = parseColor('rgba(10, 20, 30, 0.5)');
-    expect(parsed).not.toBeNull();
-    expect(formatColor(parsed!)).toBe('rgba(10, 20, 30, 0.5)');
-  });
-});