@ankhorage/surface 4.1.0 → 4.2.1

package/src/layout/helpers.ts

@@ -1,205 +0,0 @@
-import type { StyleProp, ViewStyle } from 'react-native';
-
-import { resolveResponsive } from '../core/responsive/resolve';
-import type { Breakpoint, Responsive } from '../core/responsive/types';
-import { resolveToken } from '../theme/resolveToken';
-import type { SurfaceTheme } from '../theme/types';
-
-type SpaceToken = keyof SurfaceTheme['spacing'];
-type RadiusToken = keyof SurfaceTheme['radii'];
-type ColorToken = keyof SurfaceTheme['colors'];
-
-type RadiusValue = number | RadiusToken;
-export type SpaceValue = number | SpaceToken;
-export type ColorValue = string | ColorToken;
-
-export interface BoxStyleProps {
-  p?: Responsive<SpaceValue>;
-  px?: Responsive<SpaceValue>;
-  py?: Responsive<SpaceValue>;
-  pt?: Responsive<SpaceValue>;
-  pb?: Responsive<SpaceValue>;
-  pl?: Responsive<SpaceValue>;
-  pr?: Responsive<SpaceValue>;
-  m?: Responsive<SpaceValue>;
-  mx?: Responsive<SpaceValue>;
-  my?: Responsive<SpaceValue>;
-  mt?: Responsive<SpaceValue>;
-  mb?: Responsive<SpaceValue>;
-  ml?: Responsive<SpaceValue>;
-  mr?: Responsive<SpaceValue>;
-  bg?: Responsive<ColorValue>;
-  radius?: Responsive<RadiusValue>;
-  borderWidth?: Responsive<number>;
-  borderColor?: Responsive<ColorValue>;
-  width?: Responsive<number | string>;
-  height?: Responsive<number | string>;
-  minWidth?: Responsive<number | string>;
-  maxWidth?: Responsive<number | string>;
-  minHeight?: Responsive<number | string>;
-  maxHeight?: Responsive<number | string>;
-  flex?: Responsive<number>;
-  flexGrow?: Responsive<number>;
-  flexShrink?: Responsive<number>;
-  flexBasis?: Responsive<number | string>;
-  alignSelf?: Responsive<ViewStyle['alignSelf']>;
-  position?: Responsive<ViewStyle['position']>;
-  top?: Responsive<number>;
-  bottom?: Responsive<number>;
-  left?: Responsive<number>;
-  right?: Responsive<number>;
-  overflow?: Responsive<ViewStyle['overflow']>;
-  zIndex?: Responsive<number>;
-  opacity?: Responsive<number>;
-  style?: StyleProp<ViewStyle>;
-}
-
-export function resolveSpacing(
-  theme: SurfaceTheme,
-  value: SpaceValue | undefined,
-): number | undefined {
-  if (value === undefined) return undefined;
-  if (typeof value === 'number') return value;
-  return theme.spacing[value as SpaceToken];
-}
-
-function resolveRadius(theme: SurfaceTheme, value: RadiusValue | undefined): number | undefined {
-  if (value === undefined) return undefined;
-  if (typeof value === 'number') return value;
-  return theme.radii[value];
-}
-
-function resolveColor(theme: SurfaceTheme, value: ColorValue | undefined): string | undefined {
-  if (value === undefined) return undefined;
-  if (Object.prototype.hasOwnProperty.call(theme.colors, value)) {
-    return theme.colors[value];
-  }
-  return value as string;
-}
-
-function resolveDimension(
-  theme: SurfaceTheme,
-  value: number | string | undefined,
-): number | string | undefined {
-  if (value === undefined || typeof value === 'number') return value;
-  return resolveToken(theme.spacing, value);
-}
-
-function assignIfDefined<T, K extends keyof T>(target: T, key: K, value: T[K] | undefined) {
-  if (value !== undefined) target[key] = value;
-}
-
-export function resolveBoxStyles(
-  theme: SurfaceTheme,
-  breakpoint: Breakpoint,
-  props: BoxStyleProps,
-): ViewStyle {
-  const styles: ViewStyle = {
-    elevation: 0,
-  };
-
-  const p = resolveSpacing(theme, resolveResponsive(props.p, breakpoint));
-  const px = resolveSpacing(theme, resolveResponsive(props.px, breakpoint));
-  const py = resolveSpacing(theme, resolveResponsive(props.py, breakpoint));
-  const pt = resolveSpacing(theme, resolveResponsive(props.pt, breakpoint));
-  const pb = resolveSpacing(theme, resolveResponsive(props.pb, breakpoint));
-  const pl = resolveSpacing(theme, resolveResponsive(props.pl, breakpoint));
-  const pr = resolveSpacing(theme, resolveResponsive(props.pr, breakpoint));
-  const m = resolveSpacing(theme, resolveResponsive(props.m, breakpoint));
-  const mx = resolveSpacing(theme, resolveResponsive(props.mx, breakpoint));
-  const my = resolveSpacing(theme, resolveResponsive(props.my, breakpoint));
-  const mt = resolveSpacing(theme, resolveResponsive(props.mt, breakpoint));
-  const mb = resolveSpacing(theme, resolveResponsive(props.mb, breakpoint));
-  const ml = resolveSpacing(theme, resolveResponsive(props.ml, breakpoint));
-  const mr = resolveSpacing(theme, resolveResponsive(props.mr, breakpoint));
-
-  assignIfDefined(styles, 'padding', p as ViewStyle['padding']);
-  assignIfDefined(styles, 'paddingHorizontal', px as ViewStyle['paddingHorizontal']);
-  assignIfDefined(styles, 'paddingVertical', py as ViewStyle['paddingVertical']);
-  assignIfDefined(styles, 'paddingTop', pt as ViewStyle['paddingTop']);
-  assignIfDefined(styles, 'paddingBottom', pb as ViewStyle['paddingBottom']);
-  assignIfDefined(styles, 'paddingLeft', pl as ViewStyle['paddingLeft']);
-  assignIfDefined(styles, 'paddingRight', pr as ViewStyle['paddingRight']);
-  assignIfDefined(styles, 'margin', m as ViewStyle['margin']);
-  assignIfDefined(styles, 'marginHorizontal', mx as ViewStyle['marginHorizontal']);
-  assignIfDefined(styles, 'marginVertical', my as ViewStyle['marginVertical']);
-  assignIfDefined(styles, 'marginTop', mt as ViewStyle['marginTop']);
-  assignIfDefined(styles, 'marginBottom', mb as ViewStyle['marginBottom']);
-  assignIfDefined(styles, 'marginLeft', ml as ViewStyle['marginLeft']);
-  assignIfDefined(styles, 'marginRight', mr as ViewStyle['marginRight']);
-
-  assignIfDefined(
-    styles,
-    'backgroundColor',
-    resolveColor(theme, resolveResponsive(props.bg, breakpoint)),
-  );
-  assignIfDefined(
-    styles,
-    'borderRadius',
-    resolveRadius(theme, resolveResponsive(props.radius, breakpoint)) as ViewStyle['borderRadius'],
-  );
-  assignIfDefined(styles, 'borderWidth', resolveResponsive(props.borderWidth, breakpoint));
-  assignIfDefined(
-    styles,
-    'borderColor',
-    resolveColor(theme, resolveResponsive(props.borderColor, breakpoint)),
-  );
-
-  assignIfDefined(
-    styles,
-    'width',
-    resolveDimension(theme, resolveResponsive(props.width, breakpoint)) as ViewStyle['width'],
-  );
-  assignIfDefined(
-    styles,
-    'height',
-    resolveDimension(theme, resolveResponsive(props.height, breakpoint)) as ViewStyle['height'],
-  );
-  assignIfDefined(
-    styles,
-    'minWidth',
-    resolveDimension(theme, resolveResponsive(props.minWidth, breakpoint)) as ViewStyle['minWidth'],
-  );
-  assignIfDefined(
-    styles,
-    'maxWidth',
-    resolveDimension(theme, resolveResponsive(props.maxWidth, breakpoint)) as ViewStyle['maxWidth'],
-  );
-  assignIfDefined(
-    styles,
-    'minHeight',
-    resolveDimension(
-      theme,
-      resolveResponsive(props.minHeight, breakpoint),
-    ) as ViewStyle['minHeight'],
-  );
-  assignIfDefined(
-    styles,
-    'maxHeight',
-    resolveDimension(
-      theme,
-      resolveResponsive(props.maxHeight, breakpoint),
-    ) as ViewStyle['maxHeight'],
-  );
-
-  assignIfDefined(styles, 'flex', resolveResponsive(props.flex, breakpoint));
-  assignIfDefined(styles, 'flexGrow', resolveResponsive(props.flexGrow, breakpoint));
-  assignIfDefined(styles, 'flexShrink', resolveResponsive(props.flexShrink, breakpoint));
-  assignIfDefined(
-    styles,
-    'flexBasis',
-    resolveResponsive(props.flexBasis, breakpoint) as ViewStyle['flexBasis'],
-  );
-  assignIfDefined(styles, 'alignSelf', resolveResponsive(props.alignSelf, breakpoint));
-
-  assignIfDefined(styles, 'position', resolveResponsive(props.position, breakpoint));
-  assignIfDefined(styles, 'top', resolveResponsive(props.top, breakpoint));
-  assignIfDefined(styles, 'bottom', resolveResponsive(props.bottom, breakpoint));
-  assignIfDefined(styles, 'left', resolveResponsive(props.left, breakpoint));
-  assignIfDefined(styles, 'right', resolveResponsive(props.right, breakpoint));
-  assignIfDefined(styles, 'overflow', resolveResponsive(props.overflow, breakpoint));
-  assignIfDefined(styles, 'zIndex', resolveResponsive(props.zIndex, breakpoint));
-  assignIfDefined(styles, 'opacity', resolveResponsive(props.opacity, breakpoint));
-
-  return styles;
-}

package/src/primitives/heading/index.ts

@@ -1,2 +0,0 @@
-export { Heading } from './Heading';
-export type { HeadingLevel, HeadingProps } from './types';

package/src/primitives/heading/resolveHeadingStyle.ts

@@ -1,20 +0,0 @@
-import type { TextStyle } from 'react-native';
-
-import { resolveTextColor } from '../../internal/resolvers/resolveTextColor';
-import { resolveTextStyles } from '../../internal/resolvers/resolveTextStyles';
-import type { SurfaceColor, SurfaceEmphasis } from '../../surfaceColor';
-import type { SurfaceTheme } from '../../theme/types';
-import type { HeadingLevel, HeadingProps } from './types';
-
-export function resolveHeadingTextStyle(
-  theme: SurfaceTheme,
-  level: HeadingLevel,
-  align?: HeadingProps['align'],
-  emphasis: SurfaceEmphasis = 'default',
-  color?: SurfaceColor,
-): TextStyle {
-  return {
-    ...resolveTextStyles(theme, { align, level }),
-    color: resolveTextColor(theme, emphasis, color),
-  };
-}

package/src/primitives/heading/types.ts

@@ -1,17 +0,0 @@
-import type React from 'react';
-
-import type { SurfaceColor, SurfaceEmphasis } from '../../surfaceColor';
-
-export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-
-export interface HeadingProps {
-  text?: string;
-  children?: React.ReactNode;
-  level?: HeadingLevel;
-  align?: 'auto' | 'left' | 'right' | 'center' | 'justify';
-  color?: SurfaceColor;
-  emphasis?: SurfaceEmphasis;
-  numberOfLines?: number;
-  i18nKey?: string;
-  testID?: string;
-}

package/src/primitives/icon/Icon.tsx

@@ -1,34 +0,0 @@
-import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
-
-import { resolveToken } from '../../theme/resolveToken';
-import { useTheme } from '../../theme/ThemeContext';
-import type { SurfaceTheme } from '../../theme/types';
-import { type FontIconSource, PortableIcon, type SvgIconSource } from './PortableIcon';
-
-export type {
-  FontIconSource,
-  IconProvider,
-  IconSource,
-  IconVariant,
-  SvgIconSource,
-} from './PortableIcon';
-
-interface IconPresentationProps {
-  size?: keyof SurfaceTheme['spacing'] | number;
-  color?: keyof SurfaceTheme['colors'] | string;
-  testID?: string;
-}
-
-export type IconProps =
-  | (FontIconSource & IconPresentationProps & { style?: StyleProp<TextStyle> })
-  | (SvgIconSource & IconPresentationProps & { style?: StyleProp<ViewStyle> });
-
-export function Icon(props: IconProps) {
-  const { theme } = useTheme();
-  const size = props.size ?? 'm';
-  const color = props.color ?? 'text';
-  const resolvedSize = typeof size === 'number' ? size : resolveToken(theme.spacing, size);
-  const resolvedColor = resolveToken(theme.colors, color);
-
-  return <PortableIcon {...props} color={resolvedColor} size={resolvedSize} />;
-}

package/src/primitives/icon/index.ts

@@ -1,10 +0,0 @@
-export type {
-  FontIconSource,
-  IconProps,
-  IconProvider,
-  IconSource,
-  IconVariant,
-  SvgIconSource,
-} from './Icon';
-export { Icon } from './Icon';
-export { SUPPORTED_ICON_PROVIDERS } from './PortableIcon';

package/src/primitives/image/Image.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import { Image as RNImage } from 'react-native';
-
-import { useTheme } from '../../theme/ThemeContext';
-import {
-  getSourceKey,
-  normalizeSource,
-  resolveAccessibilityLabel,
-  resolveAlt,
-  resolveImageStyle,
-  resolveRenderedSource,
-  resolveResizeMode,
-} from './resolveImageProps';
-import type { ImageProps } from './types';
-
-export function Image({
-  source,
-  fallbackSource,
-  alt,
-  accessibilityLabel,
-  width,
-  height,
-  aspectRatio,
-  fit,
-  resizeMode,
-  radius,
-  style,
-  testID,
-  onError,
-}: ImageProps) {
-  const { theme } = useTheme();
-  const primaryKey = React.useMemo(() => getSourceKey(source), [source]);
-  const [failedPrimaryKey, setFailedPrimaryKey] = React.useState<string | null>(null);
-  const showFallback = primaryKey !== null && failedPrimaryKey === primaryKey;
-
-  const normalizedPrimary = normalizeSource(source);
-  const normalizedFallback = normalizeSource(fallbackSource);
-  const resolvedSource = resolveRenderedSource(normalizedPrimary, normalizedFallback, showFallback);
-
-  if (!resolvedSource) return null;
-
-  const resolvedResizeMode = resolveResizeMode(fit, resizeMode);
-  const resolvedAccessibilityLabel = resolveAccessibilityLabel(alt, accessibilityLabel);
-  const resolvedAlt = resolveAlt(alt, accessibilityLabel);
-  const resolvedStyle = resolveImageStyle(theme, { width, height, aspectRatio, radius });
-
-  return (
-    <RNImage
-      accessibilityLabel={resolvedAccessibilityLabel}
-      accessibilityRole="image"
-      alt={resolvedAlt}
-      onError={(event) => {
-        onError?.(event);
-
-        if (!showFallback && normalizedFallback) {
-          setFailedPrimaryKey(primaryKey);
-        }
-      }}
-      resizeMode={resolvedResizeMode}
-      source={resolvedSource}
-      style={[resolvedStyle, style]}
-      testID={testID}
-    />
-  );
-}

package/src/primitives/image/index.ts

@@ -1,2 +0,0 @@
-export { Image } from './Image';
-export type { ImageFit, ImageProps, SurfaceImageSource } from './types';

package/src/primitives/image/resolveImageProps.ts

@@ -1,92 +0,0 @@
-import type { ImageResizeMode, ImageSourcePropType } from 'react-native';
-import type { ImageStyle } from 'react-native';
-
-import { resolveToken } from '../../theme/resolveToken';
-import type { SurfaceTheme } from '../../theme/types';
-import type { ImageProps, SurfaceImageSource } from './types';
-
-export function normalizeSource(
-  source: SurfaceImageSource | null | undefined,
-): ImageSourcePropType | undefined {
-  if (source === null || source === undefined) return undefined;
-  if (typeof source === 'string') return { uri: source };
-  return source;
-}
-
-export function resolveRenderedSource(
-  normalizedPrimary: ImageSourcePropType | undefined,
-  normalizedFallback: ImageSourcePropType | undefined,
-  showFallback: boolean,
-): ImageSourcePropType | undefined {
-  if (showFallback || !normalizedPrimary) return normalizedFallback;
-  return normalizedPrimary;
-}
-
-function getUriFromSource(source: ImageSourcePropType): string | undefined {
-  if (Array.isArray(source)) {
-    const [first] = source;
-    return first?.uri;
-  }
-
-  if (typeof source === 'number') return undefined;
-  return source.uri;
-}
-
-export function getSourceKey(source: SurfaceImageSource | null | undefined): string | null {
-  if (source === null || source === undefined) return null;
-  if (typeof source === 'string') return `uri:${source}`;
-  if (typeof source === 'number') return `asset:${source}`;
-  if (Array.isArray(source)) {
-    const parts = source
-      .map((item) => item.uri)
-      .filter((value): value is string => typeof value === 'string');
-    return `uri-set:${parts.join('|')}`;
-  }
-
-  const uri = getUriFromSource(source);
-  if (uri) return `uri:${uri}`;
-
-  try {
-    return `src:${JSON.stringify(source)}`;
-  } catch {
-    return 'src:unknown';
-  }
-}
-
-export function resolveResizeMode(
-  fit: ImageProps['fit'],
-  resizeMode: ImageProps['resizeMode'],
-): ImageResizeMode {
-  return fit ?? resizeMode ?? 'cover';
-}
-
-export function resolveAccessibilityLabel(
-  alt: ImageProps['alt'],
-  accessibilityLabel: ImageProps['accessibilityLabel'],
-): string | undefined {
-  return accessibilityLabel ?? alt;
-}
-
-export function resolveAlt(
-  alt: ImageProps['alt'],
-  accessibilityLabel: ImageProps['accessibilityLabel'],
-): string | undefined {
-  return alt ?? accessibilityLabel;
-}
-
-export function resolveImageStyle(
-  theme: SurfaceTheme,
-  props: Pick<ImageProps, 'width' | 'height' | 'aspectRatio' | 'radius'>,
-): ImageStyle {
-  const width = resolveToken(theme.spacing, props.width);
-  const height = resolveToken(theme.spacing, props.height);
-  const borderRadius = resolveToken(theme.radii, props.radius);
-
-  return {
-    width,
-    height,
-    aspectRatio: props.aspectRatio,
-    borderRadius,
-    overflow: borderRadius !== undefined ? 'hidden' : undefined,
-  };
-}

package/src/primitives/text/index.ts

@@ -1,2 +0,0 @@
-export { Text } from './Text';
-export type { TextProps } from './types';

package/src/primitives/text/types.ts

@@ -1,18 +0,0 @@
-import type React from 'react';
-import type { TextStyle } from 'react-native';
-
-import type { TextVariant, TextWeight } from '../../internal/resolvers/resolveTextStyles';
-import type { SurfaceColor, SurfaceEmphasis } from '../../surfaceColor';
-
-export interface TextProps {
-  children?: React.ReactNode;
-  i18nKey?: string;
-  variant?: TextVariant;
-  emphasis?: SurfaceEmphasis;
-  color?: SurfaceColor;
-  align?: TextStyle['textAlign'];
-  weight?: TextWeight;
-  italic?: boolean;
-  numberOfLines?: number;
-  testID?: string;
-}