@ankhorage/surface 2.2.1 → 3.0.1

package/src/primitives/icon/PortableIcon.tsx

@@ -0,0 +1,112 @@
+import {
+  FontAwesome,
+  type FontAwesomeIconName,
+} from '@react-native-vector-icons/fontawesome/static';
+import {
+  FontAwesome5,
+  type FontAwesome5BrandIconName,
+  type FontAwesome5RegularIconName,
+  type FontAwesome5SolidIconName,
+} from '@react-native-vector-icons/fontawesome5/static';
+import {
+  FontAwesome6,
+  type FontAwesome6BrandIconName,
+  type FontAwesome6RegularIconName,
+  type FontAwesome6SolidIconName,
+} from '@react-native-vector-icons/fontawesome6/static';
+import { Ionicons, type IoniconsIconName } from '@react-native-vector-icons/ionicons/static';
+import React from 'react';
+import { type StyleProp, type TextStyle } from 'react-native';
+
+export const SUPPORTED_ICON_PROVIDERS = [
+  'Ionicons',
+  'FontAwesome',
+  'FontAwesome5',
+  'FontAwesome6',
+] as const;
+
+export type IconProvider = (typeof SUPPORTED_ICON_PROVIDERS)[number];
+export type IconVariant = 'regular' | 'solid' | 'brand';
+
+export type IconSource =
+  | { name: IoniconsIconName; provider?: 'Ionicons'; variant?: never }
+  | { name: FontAwesomeIconName; provider: 'FontAwesome'; variant?: never }
+  | { name: FontAwesome5RegularIconName; provider: 'FontAwesome5'; variant: 'regular' }
+  | { name: FontAwesome5SolidIconName; provider: 'FontAwesome5'; variant: 'solid' }
+  | { name: FontAwesome5BrandIconName; provider: 'FontAwesome5'; variant: 'brand' }
+  | { name: FontAwesome6RegularIconName; provider: 'FontAwesome6'; variant: 'regular' }
+  | { name: FontAwesome6SolidIconName; provider: 'FontAwesome6'; variant: 'solid' }
+  | { name: FontAwesome6BrandIconName; provider: 'FontAwesome6'; variant: 'brand' };
+
+type PortableIconProps = IconSource & {
+  color: string;
+  size: number;
+  style?: StyleProp<TextStyle>;
+  testID?: string;
+};
+
+type SharedIconProps = Pick<PortableIconProps, 'color' | 'size' | 'style' | 'testID'>;
+
+function assertNever(value: never, configuration: string): never {
+  throw new Error(`Unsupported icon ${configuration}: ${String(value)}`);
+}
+
+function renderFontAwesome5(
+  props: Extract<IconSource, { provider: 'FontAwesome5' }>,
+  sharedProps: SharedIconProps,
+) {
+  const { variant } = props;
+
+  switch (variant) {
+    case 'brand':
+      return <FontAwesome5 {...sharedProps} iconStyle="brand" name={props.name} />;
+    case 'regular':
+      return <FontAwesome5 {...sharedProps} iconStyle="regular" name={props.name} />;
+    case 'solid':
+      return <FontAwesome5 {...sharedProps} iconStyle="solid" name={props.name} />;
+    default:
+      return assertNever(variant, 'FontAwesome5 variant');
+  }
+}
+
+function renderFontAwesome6(
+  props: Extract<IconSource, { provider: 'FontAwesome6' }>,
+  sharedProps: SharedIconProps,
+) {
+  const { variant } = props;
+
+  switch (variant) {
+    case 'brand':
+      return <FontAwesome6 {...sharedProps} iconStyle="brand" name={props.name} />;
+    case 'regular':
+      return <FontAwesome6 {...sharedProps} iconStyle="regular" name={props.name} />;
+    case 'solid':
+      return <FontAwesome6 {...sharedProps} iconStyle="solid" name={props.name} />;
+    default:
+      return assertNever(variant, 'FontAwesome6 variant');
+  }
+}
+
+export function PortableIcon(props: PortableIconProps) {
+  const { provider } = props;
+  const sharedProps = {
+    color: props.color,
+    size: props.size,
+    style: props.style,
+    testID: props.testID,
+  };
+
+  switch (provider) {
+    case undefined:
+    case 'Ionicons':
+      return <Ionicons {...sharedProps} name={props.name} />;
+    case 'FontAwesome':
+      return <FontAwesome {...sharedProps} name={props.name} />;
+    case 'FontAwesome5':
+      return renderFontAwesome5(props, sharedProps);
+    case 'FontAwesome6':
+      return renderFontAwesome6(props, sharedProps);
+    default:
+      return assertNever(provider, 'provider');
+  }
+}

package/src/primitives/icon/PortableIcon.web.test.tsx

@@ -0,0 +1,119 @@
+import { readFileSync } from 'node:fs';
+
+import { describe, expect, mock, test } from 'bun:test';
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import * as ReactNativeWeb from 'react-native-web';
+
+await mock.module('react-native', () => ReactNativeWeb);
+
+const { Icon } = await import('./Icon');
+const { PortableIcon, SUPPORTED_ICON_PROVIDERS } = await import('./PortableIcon');
+
+describe('portable icon rendering', () => {
+  test('renders Ionicons through the public Icon API', () => {
+    const markup = renderToStaticMarkup(<Icon color="#123456" name="home-outline" size={18} />);
+
+    expect(markup).toContain('font-family:Ionicons');
+  });
+
+  test('renders FontAwesome through the public Icon API', () => {
+    const markup = renderToStaticMarkup(
+      <Icon color="#123456" name="github" provider="FontAwesome" size={18} />,
+    );
+
+    expect(markup).toContain('font-family:FontAwesome');
+  });
+
+  test('renders a FontAwesome5 brand icon through its brand font', () => {
+    const markup = renderToStaticMarkup(
+      <Icon color="#123456" name="microsoft" provider="FontAwesome5" size={18} variant="brand" />,
+    );
+
+    expect(markup).toContain('font-family:FontAwesome5Brands-Regular');
+  });
+
+  test('renders a FontAwesome5 solid icon through its solid font', () => {
+    const markup = renderToStaticMarkup(
+      <Icon color="#123456" name="video" provider="FontAwesome5" size={18} variant="solid" />,
+    );
+
+    expect(markup).toContain('font-family:FontAwesome5Free-Solid');
+  });
+
+  test('renders a FontAwesome6 brand icon through its brand font', () => {
+    const markup = renderToStaticMarkup(
+      <Icon color="#123456" name="x-twitter" provider="FontAwesome6" size={18} variant="brand" />,
+    );
+
+    expect(markup).toContain('font-family:FontAwesome6Brands-Regular');
+  });
+});
+
+describe('portable icon contract', () => {
+  test('publishes the intentional provider inventory', () => {
+    expect(SUPPORTED_ICON_PROVIDERS).toEqual([
+      'Ionicons',
+      'FontAwesome',
+      'FontAwesome5',
+      'FontAwesome6',
+    ]);
+  });
+});
+
+describe('portable icon runtime rejection', () => {
+  test('throws for an invalid runtime provider instead of falling back to Ionicons', () => {
+    const props = {
+      color: '#123456',
+      name: 'home-outline',
+      size: 18,
+    } satisfies Parameters<typeof PortableIcon>[0];
+    Object.defineProperty(props, 'provider', { enumerable: true, value: 'UnknownIcons' });
+
+    expect(() => renderToStaticMarkup(<PortableIcon {...props} />)).toThrow(
+      'Unsupported icon provider: UnknownIcons',
+    );
+  });
+
+  test('throws for an invalid runtime FontAwesome5 variant', () => {
+    const props = {
+      color: '#123456',
+      name: 'video',
+      provider: 'FontAwesome5',
+      size: 18,
+      variant: 'solid',
+    } satisfies Parameters<typeof PortableIcon>[0];
+    Object.defineProperty(props, 'variant', { value: 'duotone' });
+
+    expect(() => renderToStaticMarkup(<PortableIcon {...props} />)).toThrow(
+      'Unsupported icon FontAwesome5 variant: duotone',
+    );
+  });
+
+  test('throws for an invalid runtime FontAwesome6 variant', () => {
+    const props = {
+      color: '#123456',
+      name: 'x-twitter',
+      provider: 'FontAwesome6',
+      size: 18,
+      variant: 'brand',
+    } satisfies Parameters<typeof PortableIcon>[0];
+    Object.defineProperty(props, 'variant', { value: 'duotone' });
+
+    expect(() => renderToStaticMarkup(<PortableIcon {...props} />)).toThrow(
+      'Unsupported icon FontAwesome6 variant: duotone',
+    );
+  });
+});
+
+describe('portable icon dependency boundary', () => {
+  test('has no Expo icon dependency or resolver path', () => {
+    const packageSource = readFileSync(new URL('../../../package.json', import.meta.url), 'utf8');
+    const iconSource = readFileSync(new URL('./PortableIcon.tsx', import.meta.url), 'utf8');
+
+    expect(packageSource).not.toContain('@expo/vector-icons');
+    expect(packageSource).not.toContain('expo-font');
+    expect(iconSource).not.toContain('resolveExpoIconComponent');
+    expect(iconSource).not.toContain("from 'expo");
+  });
+});

package/src/primitives/icon/index.ts

@@ -1,2 +1,3 @@
-export type { IconProps, IconProvider } from './Icon';
+export type { IconProps, IconProvider, IconSource, IconVariant } from './Icon';
 export { Icon } from './Icon';
+export { SUPPORTED_ICON_PROVIDERS } from './PortableIcon';

package/src/primitives/image/Image.tsx

@@ -29,12 +29,9 @@ export function Image({
   onError,
 }: ImageProps) {
   const { theme } = useTheme();
-  const [showFallback, setShowFallback] = React.useState(false);
   const primaryKey = React.useMemo(() => getSourceKey(source), [source]);
-
-  React.useEffect(() => {
-    setShowFallback(false);
-  }, [primaryKey]);
+  const [failedPrimaryKey, setFailedPrimaryKey] = React.useState<string | null>(null);
+  const showFallback = primaryKey !== null && failedPrimaryKey === primaryKey;
 
   const normalizedPrimary = normalizeSource(source);
   const normalizedFallback = normalizeSource(fallbackSource);
@@ -56,7 +53,7 @@ export function Image({
         onError?.(event);
 
         if (!showFallback && normalizedFallback) {
-          setShowFallback(true);
+          setFailedPrimaryKey(primaryKey);
         }
       }}
       resizeMode={resolvedResizeMode}

package/src/theme/colorEngine.test.ts

@@ -105,12 +105,12 @@ describe('colorEngine', () => {
 
   it('preserves the primary color at swatch step 500 in light mode', () => {
     const { swatches } = generatePalette(mockConfig, 'light');
-    expect(swatches.primary[500]).toBe(mockConfig.light.primaryColor);
+    expect(String(swatches.primary[500])).toBe(mockConfig.light.primaryColor);
   });
 
   it('preserves the primary color at swatch step 500 in dark mode', () => {
     const { swatches } = generatePalette(mockConfig, 'dark');
-    expect(swatches.primary[500]).toBe(mockConfig.dark.primaryColor);
+    expect(String(swatches.primary[500])).toBe(mockConfig.dark.primaryColor);
   });
 
   it('provides a neutral swatch with neutralKeyColor at step 500', () => {

package/src/webAcceptance.test.tsx

@@ -0,0 +1,84 @@
+import { expect, mock, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import React, { act } from 'react';
+import { renderToString } from 'react-dom/server';
+import * as ReactNativeWeb from 'react-native-web';
+
+await mock.module('react-native', () => ReactNativeWeb);
+
+const scrollContentStyle = { padding: 4 };
+
+const { Container } = await import('./layout/Container');
+const { Grid } = await import('./layout/Grid');
+const { ScrollArea } = await import('./layout/ScrollArea');
+const { Show } = await import('./layout/Show');
+const { ThemeProvider } = await import('./theme/ThemeContext');
+
+function ResponsiveAcceptanceTree() {
+  return (
+    <ThemeProvider>
+      <Container maxWidth={{ base: 640, md: 960 }} px={{ base: 12, md: 24 }} testID="container">
+        <ScrollArea contentContainerStyle={scrollContentStyle} testID="scroll-area">
+          <Grid cols={{ base: 1, md: 2 }} gap={{ base: 8, md: 16 }} testID="grid">
+            <ReactNativeWeb.View testID="grid-first" />
+            <ReactNativeWeb.View testID="grid-second" />
+          </Grid>
+          <Show
+            fallback={<ReactNativeWeb.Text>static-fallback</ReactNativeWeb.Text>}
+            when={{ base: false, md: true }}
+          >
+            <ReactNativeWeb.Text>wide-content</ReactNativeWeb.Text>
+          </Show>
+        </ScrollArea>
+      </Container>
+    </ThemeProvider>
+  );
+}
+
+test('RN Web 0.21 statically renders and hydrates representative responsive primitives', async () => {
+  const markup = renderToString(<ResponsiveAcceptanceTree />);
+
+  expect(markup).toContain('data-testid="container"');
+  expect(markup).toContain('data-testid="scroll-area"');
+  expect(markup).toContain('data-testid="grid"');
+  expect(markup).toContain('static-fallback');
+  expect(markup).not.toContain('wide-content');
+
+  const browserWindow = new Window({ url: 'https://surface.test/' });
+  Object.assign(globalThis, {
+    IS_REACT_ACT_ENVIRONMENT: true,
+    Node: browserWindow.Node,
+    document: browserWindow.document,
+    navigator: browserWindow.navigator,
+    window: browserWindow,
+  });
+  const container = browserWindow.document.createElement('div');
+  container.innerHTML = markup;
+  browserWindow.document.body.append(container);
+  const hydrationErrors: string[] = [];
+  const originalError = console.error;
+  console.error = (...values: unknown[]) => {
+    hydrationErrors.push(values.map(String).join(' '));
+  };
+
+  try {
+    const { hydrateRoot } = await import('react-dom/client');
+    const root = hydrateRoot(container as unknown as Element, <ResponsiveAcceptanceTree />);
+    await act(async () => Promise.resolve());
+
+    expect(container.querySelector('[data-testid="container"]')).not.toBeNull();
+    expect(container.querySelector('[data-testid="scroll-area"]')).not.toBeNull();
+    expect(container.querySelectorAll('[data-testid^="grid-"]')).toHaveLength(2);
+    expect(hydrationErrors).toEqual([]);
+
+    act(() => root.unmount());
+  } finally {
+    console.error = originalError;
+    browserWindow.close();
+    Reflect.deleteProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT');
+    Reflect.deleteProperty(globalThis, 'Node');
+    Reflect.deleteProperty(globalThis, 'document');
+    Reflect.deleteProperty(globalThis, 'navigator');
+    Reflect.deleteProperty(globalThis, 'window');
+  }
+});

package/dist/primitives/icon/resolveExpoIconComponent.d.ts

@@ -1,11 +0,0 @@
-import type React from 'react';
-import { type StyleProp, type TextStyle } from 'react-native';
-export type ExpoIconComponent = React.ElementType<{
-    color?: string;
-    name?: string;
-    size?: number;
-    style?: StyleProp<TextStyle>;
-    testID?: string;
-}>;
-export declare function resolveExpoIconComponent(provider: string): ExpoIconComponent;
-//# sourceMappingURL=resolveExpoIconComponent.d.ts.map

package/dist/primitives/icon/resolveExpoIconComponent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"resolveExpoIconComponent.d.ts","sourceRoot":"","sources":["../../../src/primitives/icon/resolveExpoIconComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AAMH,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,MAAM,GAAG,iBAAiB,CAQ5E"}

package/dist/primitives/icon/resolveExpoIconComponent.js

@@ -1,20 +0,0 @@
-import * as ExpoIcons from '@expo/vector-icons';
-import {} from 'react-native';
-const EXPO_ICON_PROVIDER_ALIASES = {
-    'material-community': 'MaterialCommunityIcons',
-};
-export function resolveExpoIconComponent(provider) {
-    const normalizedProvider = resolveExpoIconProviderName(provider);
-    const candidate = ExpoIcons[normalizedProvider];
-    if (typeof candidate === 'function') {
-        return candidate;
-    }
-    return ExpoIcons.Ionicons;
-}
-function resolveExpoIconProviderName(provider) {
-    const normalizedProvider = provider.trim().toLowerCase();
-    return normalizedProvider in EXPO_ICON_PROVIDER_ALIASES
-        ? EXPO_ICON_PROVIDER_ALIASES[normalizedProvider]
-        : provider;
-}
-//# sourceMappingURL=resolveExpoIconComponent.js.map

package/dist/primitives/icon/resolveExpoIconComponent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"resolveExpoIconComponent.js","sourceRoot":"","sources":["../../../src/primitives/icon/resolveExpoIconComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,oBAAoB,CAAC;AAEhD,OAAO,EAAkC,MAAM,cAAc,CAAC;AAU9D,MAAM,0BAA0B,GAAG;IACjC,oBAAoB,EAAE,wBAAwB;CACtC,CAAC;AAEX,MAAM,UAAU,wBAAwB,CAAC,QAAgB;IACvD,MAAM,kBAAkB,GAAG,2BAA2B,CAAC,QAAQ,CAAC,CAAC;IACjE,MAAM,SAAS,GAAI,SAAqC,CAAC,kBAAkB,CAAC,CAAC;IAC7E,IAAI,OAAO,SAAS,KAAK,UAAU,EAAE,CAAC;QACpC,OAAO,SAA8B,CAAC;IACxC,CAAC;IAED,OAAO,SAAS,CAAC,QAA6B,CAAC;AACjD,CAAC;AAED,SAAS,2BAA2B,CAAC,QAAgB;IACnD,MAAM,kBAAkB,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;IAEzD,OAAO,kBAAkB,IAAI,0BAA0B;QACrD,CAAC,CAAC,0BAA0B,CAAC,kBAA6D,CAAC;QAC3F,CAAC,CAAC,QAAQ,CAAC;AACf,CAAC","sourcesContent":["import * as ExpoIcons from '@expo/vector-icons';\nimport type React from 'react';\nimport { type StyleProp, type TextStyle } from 'react-native';\n\nexport type ExpoIconComponent = React.ElementType<{\n  color?: string;\n  name?: string;\n  size?: number;\n  style?: StyleProp<TextStyle>;\n  testID?: string;\n}>;\n\nconst EXPO_ICON_PROVIDER_ALIASES = {\n  'material-community': 'MaterialCommunityIcons',\n} as const;\n\nexport function resolveExpoIconComponent(provider: string): ExpoIconComponent {\n  const normalizedProvider = resolveExpoIconProviderName(provider);\n  const candidate = (ExpoIcons as Record<string, unknown>)[normalizedProvider];\n  if (typeof candidate === 'function') {\n    return candidate as ExpoIconComponent;\n  }\n\n  return ExpoIcons.Ionicons as ExpoIconComponent;\n}\n\nfunction resolveExpoIconProviderName(provider: string): string {\n  const normalizedProvider = provider.trim().toLowerCase();\n\n  return normalizedProvider in EXPO_ICON_PROVIDER_ALIASES\n    ? EXPO_ICON_PROVIDER_ALIASES[normalizedProvider as keyof typeof EXPO_ICON_PROVIDER_ALIASES]\n    : provider;\n}\n"]}

package/src/primitives/icon/resolveExpoIconComponent.test.ts

@@ -1,45 +0,0 @@
-import { describe, expect, mock, test } from 'bun:test';
-
-const Ionicons = () => null;
-const MaterialIcons = () => null;
-const MaterialCommunityIcons = () => null;
-
-describe('resolveExpoIconComponent', () => {
-  test('returns the requested Expo icon family when it exists', async () => {
-    await mock.module('@expo/vector-icons', () => ({
-      Ionicons,
-      MaterialCommunityIcons,
-      MaterialIcons,
-    }));
-
-    const { resolveExpoIconComponent } = await import('./resolveExpoIconComponent');
-
-    expect(resolveExpoIconComponent('Ionicons')).toBe(Ionicons);
-    expect(resolveExpoIconComponent('MaterialIcons')).toBe(MaterialIcons);
-    expect(resolveExpoIconComponent('MaterialCommunityIcons')).toBe(MaterialCommunityIcons);
-  });
-
-  test('resolves the canonical material-community provider id', async () => {
-    await mock.module('@expo/vector-icons', () => ({
-      Ionicons,
-      MaterialCommunityIcons,
-      MaterialIcons,
-    }));
-
-    const { resolveExpoIconComponent } = await import('./resolveExpoIconComponent');
-
-    expect(resolveExpoIconComponent('material-community')).toBe(MaterialCommunityIcons);
-  });
-
-  test('falls back to Ionicons when the provider is unknown', async () => {
-    await mock.module('@expo/vector-icons', () => ({
-      Ionicons,
-      MaterialCommunityIcons,
-      MaterialIcons,
-    }));
-
-    const { resolveExpoIconComponent } = await import('./resolveExpoIconComponent');
-
-    expect(resolveExpoIconComponent('MissingIconFamily')).toBe(Ionicons);
-  });
-});

package/src/primitives/icon/resolveExpoIconComponent.ts

@@ -1,33 +0,0 @@
-import * as ExpoIcons from '@expo/vector-icons';
-import type React from 'react';
-import { type StyleProp, type TextStyle } from 'react-native';
-
-export type ExpoIconComponent = React.ElementType<{
-  color?: string;
-  name?: string;
-  size?: number;
-  style?: StyleProp<TextStyle>;
-  testID?: string;
-}>;
-
-const EXPO_ICON_PROVIDER_ALIASES = {
-  'material-community': 'MaterialCommunityIcons',
-} as const;
-
-export function resolveExpoIconComponent(provider: string): ExpoIconComponent {
-  const normalizedProvider = resolveExpoIconProviderName(provider);
-  const candidate = (ExpoIcons as Record<string, unknown>)[normalizedProvider];
-  if (typeof candidate === 'function') {
-    return candidate as ExpoIconComponent;
-  }
-
-  return ExpoIcons.Ionicons as ExpoIconComponent;
-}
-
-function resolveExpoIconProviderName(provider: string): string {
-  const normalizedProvider = provider.trim().toLowerCase();
-
-  return normalizedProvider in EXPO_ICON_PROVIDER_ALIASES
-    ? EXPO_ICON_PROVIDER_ALIASES[normalizedProvider as keyof typeof EXPO_ICON_PROVIDER_ALIASES]
-    : provider;
-}