@ankhorage/surface 0.1.4 → 0.1.6

package/src/layout/helpers.ts

@@ -0,0 +1,208 @@
+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 { AnkhTheme } from '../theme/types';
+
+type SpaceToken = keyof AnkhTheme['spacing'];
+type RadiusToken = keyof AnkhTheme['radii'];
+type ColorToken = keyof AnkhTheme['colors'];
+
+export type SpaceValue = number | SpaceToken;
+export type RadiusValue = number | RadiusToken;
+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: AnkhTheme,
+  value: SpaceValue | undefined,
+): number | undefined {
+  if (value === undefined) return undefined;
+  if (typeof value === 'number') return value;
+  return theme.spacing[value as SpaceToken];
+}
+
+export function resolveRadius(
+  theme: AnkhTheme,
+  value: RadiusValue | undefined,
+): number | undefined {
+  if (value === undefined) return undefined;
+  if (typeof value === 'number') return value;
+  return theme.radii[value];
+}
+
+export function resolveColor(theme: AnkhTheme, value: ColorValue | undefined): string | undefined {
+  if (value === undefined) return undefined;
+  if (Object.prototype.hasOwnProperty.call(theme.colors, value)) {
+    return theme.colors[value as ColorToken];
+  }
+  return value as string;
+}
+
+export function resolveDimension(
+  theme: AnkhTheme,
+  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: AnkhTheme,
+  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/layout/index.ts

@@ -0,0 +1,22 @@
+export type { BoxProps } from './Box';
+export { Box } from './Box';
+export type { CenterProps } from './Center';
+export { Center } from './Center';
+export type { ContainerProps } from './Container';
+export { Container } from './Container';
+export type { DividerProps } from './Divider';
+export { Divider } from './Divider';
+export type { GridProps } from './Grid';
+export { Grid } from './Grid';
+export type { InlineProps } from './Inline';
+export { Inline } from './Inline';
+export type { ShowProps } from './Show';
+export { Show } from './Show';
+export type { SpacerProps } from './Spacer';
+export { Spacer } from './Spacer';
+export type { StackProps } from './Stack';
+export { Stack } from './Stack';
+export type { SurfaceProps, SurfaceVariant } from './Surface';
+export { Surface } from './Surface';
+export type { TemplateProps } from './Template';
+export { Template } from './Template';

package/src/primitives/button-base/ButtonBase.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Platform, Pressable, type PressableStateCallbackType } from 'react-native';
+
+import { useResponsiveRuntime } from '../../core/responsive';
+import {
+  type InteractionState,
+  resolveFocusRingStyles,
+  resolveInteractiveState,
+} from '../../internal/resolvers';
+import { resolveBoxStyles } from '../../layout/helpers';
+import { useTheme } from '../../theme/ThemeContext';
+import type { ButtonBaseProps } from './types';
+
+function getInteractionState(
+  pressableState: PressableStateCallbackType,
+  hovered: boolean,
+  focused: boolean,
+  disabled: boolean,
+): InteractionState {
+  return resolveInteractiveState({
+    pressed: pressableState.pressed,
+    hovered,
+    focused,
+    disabled,
+  });
+}
+
+export function ButtonBase({
+  children,
+  disabled = false,
+  onPress,
+  onLongPress,
+  accessibilityLabel,
+  accessibilityRole = 'button',
+  accessibilityState,
+  style,
+  testID,
+  ...props
+}: ButtonBaseProps) {
+  const { theme } = useTheme();
+  const { breakpoint } = useResponsiveRuntime();
+  const [hovered, setHovered] = React.useState(false);
+  const [focused, setFocused] = React.useState(false);
+  const isWeb = Platform.OS === 'web';
+  const resolvedBoxStyles = resolveBoxStyles(theme, breakpoint, props);
+
+  return (
+    <Pressable
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={accessibilityRole}
+      accessibilityState={{ ...accessibilityState, disabled }}
+      disabled={disabled}
+      onBlur={() => setFocused(false)}
+      onFocus={() => {
+        if (isWeb) {
+          setFocused(true);
+        }
+      }}
+      onHoverIn={isWeb ? () => setHovered(true) : undefined}
+      onHoverOut={isWeb ? () => setHovered(false) : undefined}
+      onLongPress={onLongPress}
+      onPress={onPress}
+      style={(pressableState) => {
+        const state = getInteractionState(pressableState, hovered, focused, disabled);
+
+        return [
+          resolvedBoxStyles,
+          resolveFocusRingStyles(theme.semantics.border.focus, state.focused, isWeb),
+          style,
+        ];
+      }}
+      testID={testID}
+    >
+      {(pressableState) => {
+        const state = getInteractionState(pressableState, hovered, focused, disabled);
+
+        return typeof children === 'function' ? children(state) : children;
+      }}
+    </Pressable>
+  );
+}

package/src/primitives/button-base/index.ts

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

package/src/primitives/button-base/types.ts

@@ -0,0 +1,16 @@
+import type React from 'react';
+import type { AccessibilityRole, AccessibilityState, GestureResponderEvent } from 'react-native';
+
+import type { InteractionState } from '../../internal/resolvers/resolveInteractiveState';
+import type { BoxProps } from '../../layout';
+
+export interface ButtonBaseProps extends Omit<BoxProps, 'children' | 'pointerEvents'> {
+  children?: React.ReactNode | ((state: InteractionState) => React.ReactNode);
+  disabled?: boolean;
+  onPress?: ((event: GestureResponderEvent) => void) | undefined;
+  onLongPress?: ((event: GestureResponderEvent) => void) | undefined;
+  accessibilityLabel?: string;
+  accessibilityRole?: AccessibilityRole;
+  accessibilityState?: AccessibilityState;
+  testID?: string;
+}

package/src/primitives/heading/Heading.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { useTranslationContext } from '../../context/TranslationContext';
+import { useTheme } from '../../theme/ThemeContext';
+import { resolveHeadingTextStyle } from './resolveHeadingStyle';
+import type { HeadingProps } from './types';
+
+function resolveHeadingContent({
+  text,
+  children,
+  i18nKey,
+  translate,
+}: {
+  text: HeadingProps['text'];
+  children: HeadingProps['children'];
+  i18nKey: HeadingProps['i18nKey'];
+  translate: (key: string) => string;
+}) {
+  let content = text ?? children;
+  if (!i18nKey) {
+    return content;
+  }
+
+  try {
+    const translated = translate(i18nKey);
+    if (translated && translated !== i18nKey) {
+      content = translated;
+    }
+  } catch (error) {
+    console.warn('[Heading] Translation error:', error);
+  }
+
+  return content;
+}
+
+export const Heading: React.FC<HeadingProps> = ({
+  text,
+  children,
+  level = 2,
+  align,
+  numberOfLines,
+  i18nKey,
+  testID,
+}) => {
+  const { theme } = useTheme();
+  const { t } = useTranslationContext();
+  const content = resolveHeadingContent({ text, children, i18nKey, translate: t });
+
+  return (
+    <Text
+      accessibilityRole="header"
+      testID={testID}
+      numberOfLines={numberOfLines}
+      style={resolveHeadingTextStyle(theme, level, align)}
+    >
+      {content}
+    </Text>
+  );
+};

package/src/primitives/heading/index.ts

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

package/src/primitives/heading/resolveHeadingStyle.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'bun:test';
+
+import { createTheme } from '../../theme/createTheme';
+import { resolveHeadingTextStyle } from './resolveHeadingStyle';
+
+describe('resolveHeadingTextStyle', () => {
+  it('maps heading levels to theme-driven typography tokens', () => {
+    const theme = createTheme();
+    const style = resolveHeadingTextStyle(theme, 4, 'center');
+
+    expect(style.fontSize).toBe(18);
+    expect(style.lineHeight).toBe(24);
+    expect(style.fontWeight).toBe('600');
+    expect(style.color).toBe(theme.colors.text);
+    expect(style.textAlign).toBe('center');
+  });
+
+  it('uses the themed font family when one is configured', () => {
+    const theme = createTheme(undefined, 'light', 'space grotesk');
+    const style = resolveHeadingTextStyle(theme, 1);
+
+    expect(style.fontFamily).toBe('SpaceGrotesk_700Regular');
+  });
+
+  it('shares the default content tone with the text primitive', () => {
+    const theme = createTheme();
+    const style = resolveHeadingTextStyle(theme, 2);
+
+    expect(style.color).toBe(theme.semantics.content.default);
+  });
+});

package/src/primitives/heading/resolveHeadingStyle.ts

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

package/src/primitives/heading/types.ts

@@ -0,0 +1,13 @@
+import type React from 'react';
+
+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';
+  numberOfLines?: number;
+  i18nKey?: string;
+  testID?: string;
+}

package/src/primitives/icon/Icon.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { type StyleProp, type TextStyle } from 'react-native';
+
+import { resolveToken } from '../../theme/resolveToken';
+import { useTheme } from '../../theme/ThemeContext';
+import type { AnkhTheme } from '../../theme/types';
+import { resolveExpoIconComponent } from './resolveExpoIconComponent';
+
+export type IconProvider = string;
+
+export interface IconProps {
+  name: string;
+  provider?: IconProvider;
+  size?: keyof AnkhTheme['spacing'] | number;
+  color?: keyof AnkhTheme['colors'] | string;
+  style?: StyleProp<TextStyle>;
+  testID?: string;
+}
+
+export function Icon({
+  name,
+  provider = 'Ionicons',
+  size = 'm',
+  color = 'text',
+  style,
+  testID,
+}: IconProps) {
+  const { theme } = useTheme();
+  const IconComponent = resolveExpoIconComponent(provider);
+  const resolvedSize = typeof size === 'number' ? size : resolveToken(theme.spacing, size);
+  const resolvedColor = resolveToken(theme.colors, color);
+
+  return React.createElement(IconComponent, {
+    color: resolvedColor,
+    name,
+    size: resolvedSize,
+    style,
+    testID,
+  });
+}

package/src/primitives/icon/index.ts

@@ -0,0 +1,2 @@
+export type { IconProps, IconProvider } from './Icon';
+export { Icon } from './Icon';

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

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

package/src/primitives/icon/resolveExpoIconComponent.ts

@@ -0,0 +1,20 @@
+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;
+}>;
+
+export function resolveExpoIconComponent(provider: string): ExpoIconComponent {
+  const candidate = (ExpoIcons as Record<string, unknown>)[provider];
+  if (typeof candidate === 'function') {
+    return candidate as ExpoIconComponent;
+  }
+
+  return ExpoIcons.Ionicons as ExpoIconComponent;
+}

package/src/primitives/text/Text.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Text as ReactNativeText } from 'react-native';
+
+import { useTranslationContext } from '../../context/TranslationContext';
+import { resolveTextColor, resolveTextStyles } from '../../internal/resolvers';
+import { useTheme } from '../../theme/ThemeContext';
+import type { TextProps } from './types';
+
+function resolveTextContent(
+  children: TextProps['children'],
+  i18nKey: TextProps['i18nKey'],
+  translate: (key: string) => string,
+) {
+  if (children !== undefined) {
+    return children;
+  }
+
+  if (!i18nKey) {
+    return null;
+  }
+
+  try {
+    const translated = translate(i18nKey);
+    return translated && translated !== i18nKey ? translated : i18nKey;
+  } catch (error) {
+    console.warn('[Text] Translation error:', error);
+    return i18nKey;
+  }
+}
+
+export function Text({
+  children,
+  i18nKey,
+  variant = 'body',
+  tone = 'default',
+  color,
+  align,
+  weight,
+  italic = false,
+  numberOfLines,
+  testID,
+}: TextProps) {
+  const { theme } = useTheme();
+  const { t } = useTranslationContext();
+  const content = resolveTextContent(children, i18nKey, t);
+
+  return (
+    <ReactNativeText
+      numberOfLines={numberOfLines}
+      testID={testID}
+      style={[
+        resolveTextStyles(theme, {
+          align,
+          italic,
+          variant,
+          weight,
+        }),
+        {
+          color: resolveTextColor(theme, tone, color),
+        },
+      ]}
+    >
+      {content}
+    </ReactNativeText>
+  );
+}

package/src/primitives/text/index.ts

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

package/src/primitives/text/types.ts

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