@ankhorage/surface 5.0.1 → 6.0.0

package/src/layout/AppBar.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import { type StyleProp, View, type ViewStyle } from 'react-native';
-import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
-
-import { Box, type BoxProps, Divider } from '../features/layout/public';
-import { useTheme } from '../theme/ThemeContext';
-
-export interface AppBarProps extends Omit<BoxProps, 'children'> {
-  leading?: React.ReactNode;
-  trailing?: React.ReactNode;
-  children?: React.ReactNode;
-  safeAreaTop?: boolean;
-  divider?: boolean;
-  contentStyle?: StyleProp<ViewStyle>;
-}
-
-export function AppBar({
-  leading,
-  trailing,
-  children,
-  safeAreaTop = true,
-  divider = false,
-  contentStyle,
-  bg,
-  style,
-  ...props
-}: AppBarProps) {
-  const { theme } = useTheme();
-  const insets = React.use(SafeAreaInsetsContext);
-  const topInset = safeAreaTop ? (insets?.top ?? 0) : 0;
-  const safeAreaStyle: ViewStyle | undefined =
-    topInset === 0 ? undefined : { paddingTop: topInset };
-
-  return (
-    <Box {...props} bg={bg ?? theme.semantics.surface.default} style={style}>
-      <View style={safeAreaStyle}>
-        <View
-          style={[
-            {
-              minHeight: 56,
-              flexDirection: 'row',
-              alignItems: 'center',
-              paddingHorizontal: theme.spacing.m,
-            },
-            contentStyle,
-          ]}
-        >
-          {leading ? (
-            <View style={{ marginRight: theme.spacing.s, flexShrink: 0 }}>{leading}</View>
-          ) : null}
-          <View style={{ flex: 1, minWidth: 0 }}>{children}</View>
-          {trailing ? (
-            <View style={{ marginLeft: theme.spacing.s, flexShrink: 0 }}>{trailing}</View>
-          ) : null}
-        </View>
-        {divider ? <Divider color={theme.semantics.neutral.divider} thickness={1} /> : null}
-      </View>
-    </Box>
-  );
-}

package/src/layout/Center.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-
-import { Box, type BoxProps } from '../features/layout/public';
-
-export interface CenterProps extends BoxProps {
-  axis?: 'horizontal' | 'vertical' | 'both';
-}
-
-export function Center({ axis = 'both', style, ...props }: CenterProps) {
-  return (
-    <Box
-      {...props}
-      style={[
-        {
-          alignItems: axis === 'both' || axis === 'horizontal' ? 'center' : undefined,
-          justifyContent: axis === 'both' || axis === 'vertical' ? 'center' : undefined,
-        },
-        style,
-      ]}
-    />
-  );
-}

package/src/layout/Inline.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-
-import { Stack, type StackProps } from '../features/layout/public';
-
-export type InlineProps = Omit<StackProps, 'direction'>;
-
-export function Inline({ wrap = 'wrap', align = 'center', ...props }: InlineProps) {
-  return <Stack {...props} align={align} direction="row" wrap={wrap} />;
-}

package/src/layout/ScrollArea.tsx

@@ -1,116 +0,0 @@
-import React from 'react';
-import {
-  ScrollView,
-  type ScrollViewProps as ReactNativeScrollViewProps,
-  type StyleProp,
-  type ViewStyle,
-} from 'react-native';
-
-import { useResponsiveRuntime } from '../core/responsive';
-import { useTheme } from '../theme/ThemeContext';
-import type { BoxStyleProps } from '../types/layout';
-import { resolveBoxStyles } from '../utils/resolveBoxStyles';
-
-export interface ScrollAreaProps
-  extends
-    BoxStyleProps,
-    Omit<ReactNativeScrollViewProps, 'children' | 'contentContainerStyle' | 'style'> {
-  children?: React.ReactNode;
-  contentContainerStyle?: StyleProp<ViewStyle>;
-}
-
-export function ScrollArea({
-  children,
-  contentContainerStyle,
-  p,
-  px,
-  py,
-  pt,
-  pb,
-  pl,
-  pr,
-  m,
-  mx,
-  my,
-  mt,
-  mb,
-  ml,
-  mr,
-  bg,
-  radius,
-  borderWidth,
-  borderColor,
-  width,
-  height,
-  minWidth,
-  maxWidth,
-  minHeight,
-  maxHeight,
-  flex,
-  flexGrow,
-  flexShrink,
-  flexBasis,
-  alignSelf,
-  position,
-  top,
-  bottom,
-  left,
-  right,
-  overflow,
-  zIndex,
-  opacity,
-  style,
-  ...scrollProps
-}: ScrollAreaProps) {
-  const { theme } = useTheme();
-  const { breakpoint } = useResponsiveRuntime();
-  const resolved = resolveBoxStyles(theme, breakpoint, {
-    p,
-    px,
-    py,
-    pt,
-    pb,
-    pl,
-    pr,
-    m,
-    mx,
-    my,
-    mt,
-    mb,
-    ml,
-    mr,
-    bg,
-    radius,
-    borderWidth,
-    borderColor,
-    width,
-    height,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight,
-    flex,
-    flexGrow,
-    flexShrink,
-    flexBasis,
-    alignSelf,
-    position,
-    top,
-    bottom,
-    left,
-    right,
-    overflow,
-    zIndex,
-    opacity,
-  });
-
-  return (
-    <ScrollView
-      {...scrollProps}
-      contentContainerStyle={contentContainerStyle}
-      style={[resolved, style]}
-    >
-      {children}
-    </ScrollView>
-  );
-}

package/src/layout/Spacer.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-
-import { Box } from '../features/layout/public';
-import type { SpaceValue } from '../types/layout';
-
-export interface SpacerProps {
-  size?: SpaceValue;
-  axis?: 'horizontal' | 'vertical' | 'both';
-  testID?: string;
-}
-
-export function Spacer({ size = 'm', axis = 'vertical', testID }: SpacerProps) {
-  if (axis === 'horizontal') {
-    return <Box testID={testID} width={size} />;
-  }
-
-  if (axis === 'both') {
-    return <Box testID={testID} height={size} width={size} />;
-  }
-
-  return <Box testID={testID} height={size} />;
-}

package/src/layout/Template.tsx

@@ -1,86 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-
-import {
-  type Breakpoint,
-  resolveResponsive,
-  type Responsive,
-  useResponsiveRuntime,
-} from '../core/responsive';
-import { Box, type BoxProps } from '../features/layout/public';
-import { useTheme } from '../theme/ThemeContext';
-import type { SpaceValue } from '../types/layout';
-import { resolveSpacing } from '../utils/resolveSpacing';
-
-type SlotMap = Record<string, React.ReactNode>;
-type TemplateMap = Partial<Record<Breakpoint, string[][]>>;
-type ColumnsMap = Partial<Record<Breakpoint, number[]>>;
-
-export interface TemplateProps extends Omit<BoxProps, 'children'> {
-  slots: SlotMap;
-  templates: TemplateMap;
-  columns?: ColumnsMap;
-  gap?: Responsive<SpaceValue>;
-  rowGap?: Responsive<SpaceValue>;
-  colGap?: Responsive<SpaceValue>;
-}
-
-function resolveByBreakpointMap<T>(
-  map: Partial<Record<Breakpoint, T>> | undefined,
-  breakpoint: Breakpoint,
-): T | undefined {
-  return resolveResponsive(map, breakpoint);
-}
-
-export function Template({
-  slots,
-  templates,
-  columns,
-  gap = 0,
-  rowGap,
-  colGap,
-  ...props
-}: TemplateProps) {
-  const { theme } = useTheme();
-  const { breakpoint } = useResponsiveRuntime();
-
-  const resolvedTemplate = resolveByBreakpointMap(templates, breakpoint) ?? [];
-  const resolvedColumns = resolveByBreakpointMap(columns, breakpoint);
-  const defaultGap = resolveResponsive(gap, breakpoint) ?? 0;
-  const rowSpacing = Number(
-    resolveSpacing(theme, resolveResponsive(rowGap, breakpoint) ?? defaultGap) ?? 0,
-  );
-  const colSpacing = Number(
-    resolveSpacing(theme, resolveResponsive(colGap, breakpoint) ?? defaultGap) ?? 0,
-  );
-
-  return (
-    <Box {...props}>
-      {resolvedTemplate.map((row, rowIndex) => (
-        <View
-          key={`row-${String(rowIndex)}`}
-          style={{
-            flexDirection: 'row',
-            marginTop: rowIndex === 0 ? 0 : rowSpacing,
-          }}
-        >
-          {row.map((slotId, cellIndex) => {
-            const weight = resolvedColumns?.[cellIndex] ?? 1;
-            const node = slots[slotId];
-            return (
-              <View
-                key={`${slotId}-${String(rowIndex)}-${String(cellIndex)}`}
-                style={{
-                  flex: weight,
-                  marginLeft: cellIndex === 0 ? 0 : colSpacing,
-                }}
-              >
-                {node}
-              </View>
-            );
-          })}
-        </View>
-      ))}
-    </Box>
-  );
-}

package/src/layout/index.ts

@@ -1,14 +0,0 @@
-export type { AppBarProps } from './AppBar';
-export { AppBar } from './AppBar';
-export type { CenterProps } from './Center';
-export { Center } from './Center';
-export type { InlineProps } from './Inline';
-export { Inline } from './Inline';
-export type { ScrollAreaProps } from './ScrollArea';
-export { ScrollArea } from './ScrollArea';
-export type { ShowProps } from './Show';
-export { Show } from './Show';
-export type { SpacerProps } from './Spacer';
-export { Spacer } from './Spacer';
-export type { TemplateProps } from './Template';
-export { Template } from './Template';

package/src/utils/resolveBoxStyles.test.ts

@@ -1,54 +0,0 @@
-import { describe, expect, test } from 'bun:test';
-
-import type { SurfaceTheme } from '../theme/types';
-import { resolveBoxStyles } from './resolveBoxStyles';
-
-const mockTheme = {
-  spacing: { s: 4, m: 8, l: 16 },
-  radii: { m: 8 },
-  colors: { primary: '#007AFF', surface: '#FFFFFF' },
-} as unknown as SurfaceTheme;
-
-describe('resolveBoxStyles', () => {
-  test('resolves padding and margins correctly', () => {
-    const styles = resolveBoxStyles(mockTheme, 'base', { p: 's', m: 8 });
-    expect(styles.padding).toBe(4);
-    expect(styles.margin).toBe(8);
-  });
-
-  test('resolves responsive properties', () => {
-    const props = { p: { base: 's', lg: 'l' } } as const;
-    expect(resolveBoxStyles(mockTheme, 'base', props).padding).toBe(4);
-    expect(resolveBoxStyles(mockTheme, 'lg', props).padding).toBe(16);
-  });
-
-  test('resolves colors and border styles', () => {
-    const styles = resolveBoxStyles(mockTheme, 'base', {
-      bg: 'primary',
-      radius: 'm',
-      borderWidth: 1,
-      borderColor: 'surface',
-    });
-    expect(styles.backgroundColor).toBe('#007AFF');
-    expect(styles.borderRadius).toBe(8);
-    expect(styles.borderWidth).toBe(1);
-    expect(styles.borderColor).toBe('#FFFFFF');
-  });
-
-  test('resolves spacing tokens for dimension props and preserves raw strings', () => {
-    const styles = resolveBoxStyles(mockTheme, 'base', {
-      width: 'm',
-      minHeight: 'l',
-      maxWidth: '50%',
-    });
-    expect(styles.width).toBe(8);
-    expect(styles.minHeight).toBe(16);
-    expect(styles.maxWidth).toBe('50%');
-  });
-
-  test('handles undefined props gracefully', () => {
-    const styles = resolveBoxStyles(mockTheme, 'base', {});
-    expect(styles.padding).toBeUndefined();
-    expect(styles.margin).toBeUndefined();
-  });
-});