@astryxdesign/core 0.6.3-canary.f22695a → 0.6.3

package/src/Icon/IconDefaultSizeContext.ts

@@ -1,23 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file IconDefaultSizeContext.ts
- * @input Uses React context and an optional Icon size prop
- * @output Supplies a component-owned default size to descendant Icon instances
- * @position Internal Icon sizing context; consumed by Icon and icon-slot owners
- */
-
-import {createContext, use} from 'react';
-import type {IconSize} from './IconSize.stylex';
-
-const IconDefaultSizeContext = createContext<IconSize | null>(null);
-IconDefaultSizeContext.displayName = 'IconDefaultSizeContext';
-
-export const IconDefaultSizeProvider = IconDefaultSizeContext.Provider;
-
-export function useIconSize(size: IconSize | undefined): IconSize {
-  const contextualSize = use(IconDefaultSizeContext);
-  return size ?? contextualSize ?? 'md';
-}

package/src/Icon/IconSize.stylex.ts

@@ -1,70 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file IconSize.stylex.ts
- * @input Defines the Icon size scale
- * @output Exports shared Icon size types and StyleX styles
- * @position Internal Icon sizing source; consumed by Icon and icon-slot owners
- */
-
-import * as stylex from '@stylexjs/stylex';
-
-/**
- * Icon sizes are expressed in `rem` so they scale with the root font-size.
- * Values are the px-equivalents at a 16px root: 12, 16, 20, and 24px.
- */
-const iconSizeValues = {
-  xsm: '0.75rem',
-  sm: '1rem',
-  md: '1.25rem',
-  lg: '1.5rem',
-} as const;
-
-export type IconSize = keyof typeof iconSizeValues;
-
-/** Size styles for direct SVG icon components. */
-export const iconSizeStyles = stylex.create({
-  xsm: {
-    width: iconSizeValues.xsm,
-    height: iconSizeValues.xsm,
-  },
-  sm: {
-    width: iconSizeValues.sm,
-    height: iconSizeValues.sm,
-  },
-  md: {
-    width: iconSizeValues.md,
-    height: iconSizeValues.md,
-  },
-  lg: {
-    width: iconSizeValues.lg,
-    height: iconSizeValues.lg,
-  },
-});
-
-/**
- * Size styles for icon boxes and string-based registry icons. `fontSize`
- * keeps 1em-based icons in step with the box.
- */
-export const iconBoxSizeStyles = stylex.create({
-  xsm: {
-    width: iconSizeValues.xsm,
-    height: iconSizeValues.xsm,
-    fontSize: iconSizeValues.xsm,
-  },
-  sm: {
-    width: iconSizeValues.sm,
-    height: iconSizeValues.sm,
-    fontSize: iconSizeValues.sm,
-  },
-  md: {
-    width: iconSizeValues.md,
-    height: iconSizeValues.md,
-    fontSize: iconSizeValues.md,
-  },
-  lg: {
-    width: iconSizeValues.lg,
-    height: iconSizeValues.lg,
-    fontSize: iconSizeValues.lg,
-  },
-});

package/src/Link/__tests__/Link.navigation.a11y.chromium.spec.ts

@@ -1,261 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Link.navigation.a11y.chromium.spec.ts
- * @input Built Storybook navigation fixture and real Chromium activation
- * @output Blocked-scheme and accepted-navigation evidence across every sink
- * @position Browser proof for the shared navigation-destination contract
- */
-
-import {expect, test, type Page} from '@playwright/test';
-import {
-  DEFAULT_STORYBOOK_DIR,
-  serveStorybook,
-  type StaticServer,
-} from '@astryxdesign/a11y-spec/storybook';
-
-let storybook: StaticServer;
-const storyId = 'core-link-navigation--destinations';
-
-test.beforeAll(async () => {
-  storybook = await serveStorybook(
-    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
-  );
-});
-test.afterAll(async () => {
-  await storybook?.close();
-});
-
-async function mount(page: Page, href: string) {
-  await page.goto(
-    `${storybook.origin}/iframe.html?id=${storyId}&viewMode=story`,
-  );
-  await expect(page.getByTestId('navigation-fixture')).toBeVisible();
-  await page.evaluate(
-    ({storyId, href}) => {
-      const channel = (
-        window as unknown as {
-          __STORYBOOK_ADDONS_CHANNEL__: {
-            emit: (event: string, payload: unknown) => void;
-          };
-        }
-      ).__STORYBOOK_ADDONS_CHANNEL__;
-      channel.emit('updateStoryArgs', {storyId, updatedArgs: {href}});
-    },
-    {storyId, href},
-  );
-  await expect(page.getByTestId('navigation-fixture')).toHaveAttribute(
-    'data-destination',
-    href,
-  );
-}
-
-const blocked = [
-  'javascript:window.__navigationExecuted=true',
-  'vbscript:MsgBox(1)',
-  'data:text/html,<script>window.__navigationExecuted=true</script>',
-  ' \u0000JaVa\tsCrIpT:window.__navigationExecuted=true',
-];
-
-for (const href of blocked) {
-  test(`rejected ${JSON.stringify(href)} is inert across native, router, Markdown, and imperative paths`, async ({
-    page,
-    context,
-  }) => {
-    await mount(page, href);
-    const originalUrl = page.url();
-    await page.evaluate(() => {
-      (
-        window as unknown as {__navigationExecuted: boolean}
-      ).__navigationExecuted = false;
-    });
-    const pagesBefore = context.pages().length;
-    for (const id of [
-      'native',
-      'provider',
-      'as',
-      'structured',
-      'citation',
-      'download',
-    ]) {
-      const target = page.getByTestId(id);
-      await expect(target).not.toHaveAttribute('href');
-      await expect(target).not.toHaveAttribute('data-router');
-      await target.click();
-      await target.click({button: 'middle'});
-    }
-    await expect(page.getByTestId('markdown').locator('a')).toHaveCount(0);
-    await expect(page.getByTestId('delegated').locator('a[href]')).toHaveCount(
-      0,
-    );
-    for (const id of ['imperative', 'imperative-blank', 'delegated']) {
-      const target =
-        id === 'delegated'
-          ? page.getByText('Delegated card surface', {exact: true})
-          : page.getByTestId(id);
-      await target.click();
-      await target.click({modifiers: ['Control']});
-      await target.click({modifiers: ['Meta']});
-      await target.click({button: 'middle'});
-    }
-    // Drain browser activation tasks before checking that no sink fired.
-    await page.evaluate(
-      async () =>
-        new Promise<void>(resolve =>
-          requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
-        ),
-    );
-    expect(page.url()).toBe(originalUrl);
-    expect(context.pages()).toHaveLength(pagesBefore);
-    expect(
-      await page.evaluate(
-        () =>
-          (window as unknown as {__navigationExecuted: boolean})
-            .__navigationExecuted,
-      ),
-    ).toBe(false);
-  });
-}
-
-test('ordinary schemes keep native attributes, custom routing, and downloads', async ({
-  page,
-}) => {
-  for (const href of [
-    '#fragment',
-    '/relative',
-    'https://example.com/docs',
-    'http://example.com/docs',
-    'mailto:a@example.com',
-    'tel:+1234567890',
-    'custom:document',
-    'data:text/plain,download',
-  ]) {
-    await mount(page, href);
-    for (const id of [
-      'native',
-      'provider',
-      'as',
-      'structured',
-      'citation',
-      'download',
-    ]) {
-      await expect(page.getByTestId(id)).toHaveAttribute('href', href);
-    }
-    for (const id of ['provider', 'as', 'structured']) {
-      await expect(page.getByTestId(id)).toHaveAttribute('data-router', 'true');
-    }
-    await expect(page.getByTestId('download')).toHaveAttribute(
-      'download',
-      'note.txt',
-    );
-    await expect(page.getByTestId('markdown').locator('a')).toHaveAttribute(
-      'href',
-      href,
-    );
-  }
-});
-
-for (const id of [
-  'native',
-  'provider',
-  'as',
-  'structured',
-  'imperative',
-  'delegated',
-]) {
-  test(`${id} retains real same-tab navigation`, async ({page}) => {
-    const href = '/navigation-destination?source=' + id;
-    await page.route('**/navigation-destination?*', async route =>
-      route.fulfill({
-        contentType: 'text/html',
-        body: '<h1>Destination reached</h1>',
-      }),
-    );
-    await mount(page, href);
-    const target =
-      id === 'delegated'
-        ? page.getByText('Delegated card surface', {exact: true})
-        : page.getByTestId(id);
-    await target.click();
-    await expect(page).toHaveURL(`${storybook.origin}${href}`);
-    await expect(
-      page.getByRole('heading', {name: 'Destination reached'}),
-    ).toBeVisible();
-  });
-}
-
-for (const activation of ['blank', 'control', 'meta', 'middle'] as const) {
-  test(`imperative ${activation} retains real new-tab navigation`, async ({
-    page,
-    context,
-  }) => {
-    const href = `${storybook.origin}/navigation-destination?source=${activation}`;
-    await context.route('**/navigation-destination?*', async route =>
-      route.fulfill({
-        contentType: 'text/html',
-        body: '<h1>Destination reached</h1>',
-      }),
-    );
-    await mount(page, href);
-    const originalUrl = page.url();
-    const opened = context.waitForEvent('page');
-    await page
-      .getByTestId(activation === 'blank' ? 'imperative-blank' : 'imperative')
-      .click({
-        button: activation === 'middle' ? 'middle' : 'left',
-        modifiers:
-          activation === 'control'
-            ? ['Control']
-            : activation === 'meta'
-              ? ['Meta']
-              : [],
-      });
-    const popup = await opened;
-    await expect(popup).toHaveURL(href);
-    await expect(
-      popup.getByRole('heading', {name: 'Destination reached'}),
-    ).toBeVisible();
-    expect(page.url()).toBe(originalUrl);
-    await popup.close();
-  });
-}
-
-test('native anchors retain real downloads and same-document fragments', async ({
-  page,
-}) => {
-  await mount(page, 'data:text/plain,download');
-  const downloadEvent = page.waitForEvent('download');
-  await page.getByTestId('download').click();
-  const download = await downloadEvent;
-  expect(download.suggestedFilename()).toBe('note.txt');
-  expect(await download.failure()).toBeNull();
-  await mount(page, '#destination');
-  await page.getByTestId('native').click();
-  await expect(page).toHaveURL(/#destination$/);
-});
-
-test('native anchors retain real middle-click and external target navigation', async ({
-  page,
-  context,
-}) => {
-  const href = 'https://example.com/navigation-destination';
-  await context.route(href, async route =>
-    route.fulfill({
-      contentType: 'text/html',
-      body: '<h1>External destination</h1>',
-    }),
-  );
-  for (const id of ['native', 'citation']) {
-    await mount(page, href);
-    const opened = context.waitForEvent('page');
-    await page
-      .getByTestId(id)
-      .click({button: id === 'native' ? 'middle' : 'left'});
-    const popup = await opened;
-    await expect(popup).toHaveURL(href);
-    await expect(
-      popup.getByRole('heading', {name: 'External destination'}),
-    ).toBeVisible();
-    await popup.close();
-  }
-});

package/src/Markdown/Markdown.renderBoundary.test.tsx

@@ -1,72 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Markdown.renderBoundary.test.tsx
- * @input Uses vitest, @testing-library/react, Markdown with a mocked parser
- * @output Tests for the render-side navigation check in Markdown
- * @position Testing; the parser already rejects blocked destinations, so
- *   these tests bypass it and hand the renderer a pre-parsed link node.
- *   That pins the render boundary on its own: it must apply the shared
- *   navigation rule (utils/safeUrl.ts) even when a link node arrives with a
- *   destination the parser never saw.
- */
-
-import {afterEach, describe, expect, it, vi} from 'vitest';
-import {cleanup, render} from '@testing-library/react';
-import {Markdown} from './Markdown';
-import type * as Parser from './parser';
-import type {MarkdownAstBlockContent} from './ast';
-
-const parsed: {blocks: MarkdownAstBlockContent[]} = {blocks: []};
-
-vi.mock('./parser', async importOriginal => {
-  const actual = await importOriginal<typeof Parser>();
-  return {
-    ...actual,
-    parseMarkdownAst: () => ({type: 'root', children: parsed.blocks}),
-  };
-});
-
-function linkParagraph(url: string): MarkdownAstBlockContent[] {
-  return [
-    {
-      type: 'paragraph',
-      children: [{type: 'link', url, children: [{type: 'text', value: 'go'}]}],
-    },
-  ];
-}
-
-afterEach(() => {
-  cleanup();
-});
-
-describe('Markdown render boundary — link destinations', () => {
-  it('renders an accepted pre-parsed destination as a link', () => {
-    parsed.blocks = linkParagraph('data:image/png;base64,iVBORw0KGgo=');
-    const {container} = render(<Markdown>{'ignored'}</Markdown>);
-    expect(container.querySelector('a')?.getAttribute('href')).toBe(
-      'data:image/png;base64,iVBORw0KGgo=',
-    );
-  });
-
-  it.each([
-    'javascript:alert(1)',
-    'vbscript:MsgBox(1)',
-    'data:text/html,<script>alert(1)</script>',
-    'java\nscript:alert(1)',
-  ])('renders a blocked pre-parsed destination %s as text', href => {
-    parsed.blocks = linkParagraph(href);
-    const {container} = render(<Markdown>{'ignored'}</Markdown>);
-    expect(container.querySelector('a')).toBeNull();
-    expect(container.textContent).toContain('go');
-  });
-
-  it('does not hand a blocked destination to a custom link renderer', () => {
-    parsed.blocks = linkParagraph('javascript:alert(1)');
-    const link = vi.fn(({children}: {href: string; children?: unknown}) => (
-      <a data-custom>{children as never}</a>
-    ));
-    render(<Markdown components={{link}}>{'ignored'}</Markdown>);
-    expect(link).not.toHaveBeenCalled();
-  });
-});

package/src/Timer/Timer.doc.mjs

@@ -1,183 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('@astryxdesign/cli/authoring').ComponentAnatomyElement[]} */
-const anatomy = [
-  {
-    name: 'Elapsed time',
-    required: true,
-    description:
-      'Semantic time element containing a standardized elapsed duration.',
-  },
-];
-
-/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
-export const docs = {
-  name: 'Timer',
-  displayName: 'Timer',
-  category: 'Content',
-  keywords: [
-    'timer',
-    'elapsed',
-    'duration',
-    'seconds',
-    'minutes',
-    'hours',
-    'stopwatch',
-    'waiting',
-    'loading',
-    'processing',
-  ],
-  props: [
-    {
-      name: 'startTime',
-      type: 'number',
-      description:
-        "Unix time in milliseconds when the measured operation began. Omit it to start from this Timer's mount.",
-    },
-    {
-      name: 'format',
-      type: "'elapsed' | 'clock'",
-      description:
-        'Standard duration representation. Elapsed uses compact units and drops seconds after one hour; clock uses m:ss or h:mm:ss.',
-      default: "'elapsed'",
-    },
-    {
-      name: 'type',
-      type: "'body' | 'large' | 'label' | 'supporting' | 'code' | 'display-1' | 'display-2' | 'display-3' | 'inherit'",
-      description:
-        'Semantic text type. Uses the same typography behavior as Timestamp.',
-      default: "'supporting'",
-    },
-    {
-      name: 'size',
-      type: "'4xs' | '3xs' | '2xs' | 'xsm' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'",
-      description: 'Explicit font size override. Overrides the size from type.',
-    },
-    {
-      name: 'color',
-      type: "'primary' | 'secondary' | 'disabled' | 'placeholder' | 'accent' | 'inherit'",
-      description: 'Text color.',
-      default: "'secondary'",
-    },
-    {
-      name: 'weight',
-      type: "'normal' | 'medium' | 'semibold' | 'bold'",
-      description: 'Font weight override.',
-    },
-    {
-      name: 'xstyle',
-      type: 'StyleXStyles',
-      description:
-        'StyleX styles for the Text wrapper. Must be a stylex.create() value.',
-    },
-    {
-      name: 'className',
-      type: 'string',
-      description:
-        'CSS class name for the Text wrapper. Prefer xstyle for styling.',
-    },
-    {
-      name: 'style',
-      type: 'CSSProperties',
-      description:
-        'Inline styles for the Text wrapper. Prefer xstyle for styling.',
-    },
-  ],
-  examples: [
-    {
-      label: 'Elapsed duration',
-      code: '<Timer />',
-    },
-    {
-      label: 'Stopwatch clock',
-      code: '<Timer format="clock" />',
-    },
-    {
-      label: 'Operation that started before mount',
-      code: '<Timer startTime={operationStartedAt} />',
-    },
-    {
-      label: 'Match surrounding text',
-      code: `<Text>
-  Processing for <Timer type="inherit" color="inherit" />
-</Text>`,
-    },
-    {
-      label: 'Prominent elapsed time',
-      code: '<Timer type="body" size="lg" color="primary" weight="semibold" />',
-    },
-  ],
-  theming: {
-    targets: [{className: 'astryx-timer'}],
-  },
-  usage: {
-    anatomy,
-    description:
-      'Displays a standardized elapsed duration for active work without scheduling a React render on every tick. Elapsed format updates by second below one hour and by minute after one hour; clock format remains second-precise.',
-    bestPractices: [
-      {
-        guidance: true,
-        description:
-          'Use elapsed for compact duration text that may span seconds, minutes, or hours.',
-      },
-      {
-        guidance: true,
-        description:
-          'Use clock for stopwatch-like surfaces where seconds remain meaningful after an hour.',
-      },
-      {
-        guidance: true,
-        description:
-          'Pass startTime when the operation began before Timer mounted so the display reflects the complete wait.',
-      },
-      {
-        guidance: false,
-        description:
-          'Do not use Timer for dates, time zones, or relative calendar language; use Timestamp instead.',
-      },
-      {
-        guidance: false,
-        description:
-          'Do not add aria-live unless hearing an announcement every tick is appropriate for the specific task.',
-      },
-    ],
-  },
-};
-
-/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
-export const docsDense = {
-  description:
-    'Standardized elapsed or stopwatch duration with clock-derived, non-rendering DOM updates.',
-  propDescriptions: {
-    startTime:
-      "operation start as Unix milliseconds; omit to count from Timer's mount",
-    format: 'elapsed compact units or clock stopwatch notation',
-    type: 'semantic text type; defaults to supporting like Timestamp',
-    size: 'explicit font size override',
-    color: 'text color; defaults to secondary like Timestamp',
-    weight: 'font weight override',
-    xstyle: 'StyleX styles for the Text wrapper',
-    className: 'CSS class for the Text wrapper',
-    style: 'inline styles for the Text wrapper',
-  },
-  usage: {
-    anatomy,
-    description:
-      'Use for active-operation elapsed time when periodic React renders would add avoidable work.',
-    bestPractices: [
-      {
-        guidance: true,
-        description:
-          'Use elapsed for compact durations and clock for stopwatch UI.',
-      },
-      {
-        guidance: true,
-        description: 'Pass startTime for work that began before mount.',
-      },
-      {
-        guidance: false,
-        description: 'Use Timestamp for dates and relative calendar language.',
-      },
-    ],
-  },
-};