expo-dev-client-components 1.0.0

package/src/Button.tsx

@@ -0,0 +1,199 @@
+import { lightTheme, darkTheme, borderRadius, shadows, palette } from '@expo/styleguide-native';
+import * as React from 'react';
+import { Pressable as RNPressable, Text as RNText, Animated, useColorScheme } from 'react-native';
+import { create } from 'react-native-primitives';
+
+import { rounded, margin, padding, text } from './theme';
+
+const AnimatedPressable = Animated.createAnimatedComponent(RNPressable);
+
+const Text = create(RNText, {
+  base: {
+    fontWeight: '400',
+    color: lightTheme.text.default,
+    fontSize: 16,
+  },
+
+  props: {
+    accessibilityRole: 'text',
+  },
+
+  variants: {
+    ...text,
+
+    color: {
+      primary: { color: lightTheme.button.primary.foreground },
+      secondary: { color: lightTheme.button.secondary.foreground },
+      tertiary: { color: lightTheme.button.tertiary.foreground },
+      ghost: { color: lightTheme.button.ghost.foreground },
+      transparent: { color: lightTheme.button.transparent.foreground },
+      default: { color: lightTheme.text.default },
+    },
+  },
+
+  selectors: {
+    dark: {
+      base: {
+        color: darkTheme.text.default,
+      },
+
+      color: {
+        primary: { color: darkTheme.button.primary.foreground },
+        secondary: { color: darkTheme.button.secondary.foreground },
+        tertiary: { color: darkTheme.button.tertiary.foreground },
+        ghost: { color: darkTheme.button.ghost.foreground },
+        transparent: { color: darkTheme.button.transparent.foreground },
+        default: { color: darkTheme.text.default },
+      },
+    },
+  },
+});
+
+const Container = create(AnimatedPressable, {
+  base: {
+    overflow: 'hidden',
+    borderRadius: borderRadius.medium,
+  },
+
+  props: {
+    accessibilityRole: 'button',
+    android_disableSound: true,
+  },
+
+  variants: {
+    bg: {
+      default: { backgroundColor: lightTheme.background.default },
+      primary: { backgroundColor: lightTheme.button.primary.background },
+      secondary: { backgroundColor: lightTheme.button.secondary.background },
+      tertiary: { backgroundColor: lightTheme.button.tertiary.background },
+      ghost: { backgroundColor: lightTheme.button.ghost.background },
+      transparent: { backgroundColor: lightTheme.button.transparent.background },
+      disabled: { backgroundColor: lightTheme.status.default },
+    },
+
+    border: {
+      ghost: { borderColor: lightTheme.button.ghost.border, borderWidth: 1 },
+    },
+
+    shadow: {
+      button: shadows.button,
+    },
+
+    ...rounded,
+    ...padding,
+    ...margin,
+  },
+
+  selectors: {
+    dark: {
+      bg: {
+        default: { backgroundColor: darkTheme.background.default },
+        primary: { backgroundColor: darkTheme.button.primary.background },
+        secondary: { backgroundColor: darkTheme.button.secondary.background },
+        tertiary: { backgroundColor: darkTheme.button.tertiary.background },
+        ghost: { backgroundColor: darkTheme.button.ghost.background },
+        transparent: { backgroundColor: darkTheme.button.transparent.background },
+        disabled: { backgroundColor: darkTheme.status.default },
+      },
+    },
+  },
+});
+
+export const Button = {
+  Container,
+  ScaleOnPressContainer,
+  Text,
+};
+
+type ScalingPressableProps = {
+  minScale?: number;
+};
+
+type NoOptionals<T> = {
+  [P in keyof T]-?: T[P];
+};
+
+type ContainerProps = React.ComponentProps<typeof Container>;
+type ContainerBackgroundColors = NoOptionals<ContainerProps>['bg'];
+
+const lightHighlightColorMap: Record<ContainerBackgroundColors, string> = {
+  disabled: 'transparent',
+  default: lightTheme.background.secondary,
+  primary: lightTheme.background.tertiary,
+  secondary: lightTheme.background.quaternary,
+  tertiary: palette.light.gray[600],
+  ghost: lightTheme.background.tertiary,
+  transparent: lightTheme.background.secondary,
+};
+
+const darkHighlightColorMap: Record<ContainerBackgroundColors, string> = {
+  disabled: 'transparent',
+  default: darkTheme.background.secondary,
+  primary: darkTheme.background.tertiary,
+  secondary: darkTheme.background.quaternary,
+  tertiary: palette.dark.gray[600],
+  ghost: darkTheme.background.tertiary,
+  transparent: darkTheme.background.secondary,
+};
+
+const highlightColorMap = {
+  dark: darkHighlightColorMap,
+  light: lightHighlightColorMap,
+};
+
+function ScaleOnPressContainer({
+  minScale = 0.975,
+  ...props
+}: React.ComponentProps<typeof Container> & ScalingPressableProps) {
+  const theme = useColorScheme();
+  const animatedValue = React.useRef(new Animated.Value(0));
+  const [isPressing, setIsPressing] = React.useState(false);
+
+  const onPressIn = React.useCallback(() => {
+    setIsPressing(true);
+
+    Animated.spring(animatedValue.current, {
+      toValue: 1,
+      stiffness: 1000,
+      damping: 500,
+      mass: 3,
+      overshootClamping: true,
+      useNativeDriver: true,
+    }).start();
+  }, []);
+
+  const onPressOut = React.useCallback(() => {
+    setIsPressing(false);
+    Animated.spring(animatedValue.current, {
+      toValue: 0,
+      stiffness: 1000,
+      damping: 500,
+      mass: 3,
+      overshootClamping: true,
+      useNativeDriver: true,
+    }).start();
+  }, []);
+
+  const scale = animatedValue.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, minScale],
+  });
+
+  const scaleStyle = { transform: [{ scale }] };
+
+  let backgroundColor = 'transparent';
+
+  if (props.bg && isPressing && theme != null) {
+    backgroundColor = highlightColorMap[theme][props.bg];
+  }
+
+  const underlayStyle = {
+    backgroundColor,
+  };
+
+  return (
+    <Container onPressIn={onPressIn} onPressOut={onPressOut} {...props} style={[scaleStyle]}>
+      <Animated.View style={underlayStyle}>{props.children}</Animated.View>
+    </Container>
+  );
+}

package/src/Image.tsx

@@ -0,0 +1,42 @@
+import { borderRadius, iconSize } from '@expo/styleguide-native';
+import { Image as RNImage } from 'react-native';
+import { create } from 'react-native-primitives';
+
+import { scale } from './theme';
+
+export const Image = create(RNImage, {
+  base: {
+    resizeMode: 'cover',
+  },
+
+  variants: {
+    size: {
+      tiny: {
+        height: scale.small,
+        width: scale.small,
+      },
+      small: {
+        height: iconSize.small,
+        width: iconSize.small,
+      },
+
+      large: {
+        height: iconSize.large,
+        width: iconSize.large,
+      },
+
+      xl: {
+        height: scale.xl,
+        width: scale.xl,
+      },
+    },
+
+    rounded: {
+      small: { borderRadius: borderRadius.small },
+      medium: { borderRadius: borderRadius.medium },
+      large: { borderRadius: borderRadius.large },
+      huge: { borderRadius: borderRadius.huge },
+      full: { borderRadius: 99999 },
+    },
+  },
+});

package/src/Text.tsx

@@ -0,0 +1,78 @@
+import { lightTheme } from '@expo/styleguide-native';
+import { Text as RNText, TextInput as RNTextInput } from 'react-native';
+import { create } from 'react-native-primitives';
+
+import { text, textDark } from './theme';
+
+export const Heading = create(RNText, {
+  base: {
+    fontSize: 22,
+    lineHeight: 28,
+    fontWeight: '600',
+    color: lightTheme.text.default,
+  },
+
+  props: {
+    accessibilityRole: 'header',
+  },
+
+  variants: {
+    ...text,
+
+    size: {
+      small: {
+        fontSize: 18,
+        lineHeight: 20,
+      },
+      medium: {
+        fontSize: 22,
+        lineHeight: 28,
+      },
+      large: {
+        fontSize: 28,
+        lineHeight: 32,
+      },
+    },
+  },
+
+  selectors: {
+    dark: textDark,
+  },
+});
+
+export const Text = create(RNText, {
+  base: {
+    fontWeight: 'normal',
+    color: lightTheme.text.default,
+    fontSize: 16,
+  },
+
+  props: {
+    accessibilityRole: 'text',
+  },
+
+  variants: {
+    ...text,
+  },
+
+  selectors: {
+    dark: textDark,
+  },
+});
+
+export const TextInput = create(RNTextInput, {
+  base: {
+    fontWeight: 'normal',
+    color: lightTheme.text.default,
+    fontSize: 16,
+    lineHeight: 18,
+  },
+
+  variants: {
+    ...text,
+  },
+
+  selectors: {
+    dark: textDark,
+  },
+});

package/src/View.tsx

@@ -0,0 +1,202 @@
+import { lightTheme, darkTheme, shadows, iconSize } from '@expo/styleguide-native';
+import { View as RNView } from 'react-native';
+import { create } from 'react-native-primitives';
+
+import { scale, padding, margin, rounded, bg, bgDark } from './theme';
+
+export const View = create(RNView, {
+  variants: {
+    overflow: {
+      hidden: {
+        overflow: 'hidden',
+      },
+    },
+
+    align: {
+      centered: {
+        justifyContent: 'center',
+        alignItems: 'center',
+      },
+    },
+
+    flex: {
+      '1': { flex: 1 },
+      '0': { flex: 0 },
+    },
+
+    shrink: {
+      '1': { flexShrink: 1 },
+      '0': { flexShrink: 0 },
+    },
+
+    bg,
+
+    border: {
+      default: { borderColor: lightTheme.border.default, borderWidth: 1 },
+    },
+
+    ...rounded,
+
+    shadow: {
+      micro: shadows.micro,
+      tiny: shadows.tiny,
+      small: shadows.small,
+      medium: shadows.medium,
+      button: shadows.button,
+    },
+
+    width: {
+      micro: { width: iconSize.micro },
+      tiny: { width: iconSize.tiny },
+      small: { width: iconSize.small },
+      medium: { width: iconSize.regular },
+      large: { width: iconSize.large },
+      xl: { width: scale.xl },
+    },
+
+    height: {
+      micro: { height: iconSize.micro },
+      tiny: { height: iconSize.tiny },
+      small: { height: iconSize.small },
+      medium: { height: iconSize.regular },
+      large: { height: iconSize.large },
+      xl: { height: scale.xl },
+    },
+
+    ...padding,
+    ...margin,
+  },
+
+  selectors: {
+    dark: {
+      bg: bgDark,
+
+      border: {
+        default: { borderColor: darkTheme.border.default, borderWidth: 1 },
+      },
+    },
+
+    light: {
+      bg: {},
+    },
+  },
+});
+
+export const Row = create(RNView, {
+  base: {
+    flexDirection: 'row',
+  },
+
+  variants: {
+    bg,
+
+    align: {
+      center: { alignItems: 'center' },
+      start: { alignItems: 'flex-start' },
+      end: { alignItems: 'flex-end' },
+    },
+
+    ...padding,
+    ...margin,
+  },
+
+  selectors: {
+    dark: {
+      bg: bgDark,
+    },
+  },
+});
+
+const Horizontal = create(RNView, {
+  variants: {
+    size: {
+      flex: { flex: 1 },
+      micro: { width: scale.micro },
+      tiny: { width: scale.tiny },
+      small: { width: scale.small },
+      medium: { width: scale.medium },
+      large: { width: scale.large },
+      xl: { width: scale.xl },
+    },
+  },
+});
+
+const Vertical = create(RNView, {
+  variants: {
+    size: {
+      flex: { flex: 1 },
+      micro: { height: scale.micro },
+      tiny: { height: scale.tiny },
+      small: { height: scale.small },
+      medium: { height: scale.medium },
+      large: { height: scale.large },
+      xl: { height: scale.xl },
+    },
+  },
+});
+
+export const Spacer = {
+  Vertical,
+  Horizontal,
+};
+
+export const Divider = create(RNView, {
+  base: {
+    borderWidth: 0.5,
+    borderColor: lightTheme.border.default,
+  },
+
+  variants: {
+    weight: {
+      thin: { borderWidth: 0.5 },
+      normal: { borderWidth: 1 },
+      heavy: { borderWidth: 2 },
+    },
+
+    ...margin,
+  },
+
+  selectors: {
+    dark: {
+      borderColor: darkTheme.border.default,
+    },
+  },
+});
+
+export const StatusIndicator = create(RNView, {
+  base: {
+    backgroundColor: lightTheme.status.default,
+    borderRadius: 9999,
+  },
+
+  variants: {
+    status: {
+      info: { backgroundColor: lightTheme.status.info },
+      success: { backgroundColor: lightTheme.status.success },
+      warning: { backgroundColor: lightTheme.status.warning },
+      error: { backgroundColor: lightTheme.status.error },
+      default: { backgroundColor: lightTheme.status.default },
+    },
+
+    size: {
+      small: {
+        width: scale.small,
+        height: scale.small,
+      },
+      medium: {
+        width: scale.medium,
+        height: scale.medium,
+      },
+    },
+  },
+
+  selectors: {
+    dark: {
+      info: { backgroundColor: darkTheme.status.info },
+      success: { backgroundColor: darkTheme.status.success },
+      warning: { backgroundColor: darkTheme.status.warning },
+      error: { backgroundColor: darkTheme.status.error },
+      default: { backgroundColor: darkTheme.status.default },
+    },
+  },
+});

package/src/icons/CheckIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import { Image } from '../Image';
+
+const icon = require('../../assets/check-icon.png');
+
+export function CheckIcon(props: Partial<React.ComponentProps<typeof Image>>) {
+  return <Image source={icon} {...props} />;
+}

package/src/icons/ChevronRightIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import { Image } from '../Image';
+
+const icon = require('../../assets/chevron-right-icon.png');
+
+export function ChevronRightIcon(props: Partial<React.ComponentProps<typeof Image>>) {
+  return <Image source={icon} {...props} />;
+}

package/src/icons/ExpoLogoIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import { Image } from '../Image';
+
+const icon = require('../../assets/logo-icon.png');
+
+export function ExpoLogoIcon(props: Partial<React.ComponentProps<typeof Image>>) {
+  return <Image {...props} source={icon} />;
+}

package/src/icons/HomeFilledIcon.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import { Image } from '../Image';
+
+const activeIcon = require('../../assets/home-filled-active-icon.png');
+const inactiveIcon = require('../../assets/home-filled-inactive-icon.png');
+
+type TabBarIconProps = Partial<React.ComponentProps<typeof Image>> & {
+  focused?: boolean;
+};
+
+export function HomeFilledIcon(props: TabBarIconProps) {
+  const icon = props.focused ? activeIcon : inactiveIcon;
+  return <Image source={icon} {...props} />;
+}

package/src/icons/InfoIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import { Image } from '../Image';
+
+const icon = require('../../assets/info-icon.png');
+
+export function InfoIcon(props: Partial<React.ComponentProps<typeof Image>>) {
+  return <Image source={icon} {...props} />;
+}

package/src/icons/QuestionMarkIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import { Image } from '../Image';
+
+const icon = require('../../assets/question-mark-icon.png');
+
+export function QuestionMarkIcon(props: Partial<React.ComponentProps<typeof Image>>) {
+  return <Image source={icon} {...props} />;
+}

package/src/icons/RefreshIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import { Image } from '../Image';
+
+const icon = require('../../assets/refresh-icon.png');
+
+export function RefreshIcon(props: Partial<React.ComponentProps<typeof Image>>) {
+  return <Image source={icon} {...props} />;
+}

package/src/icons/SettingsFilledIcon.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import { Image } from '../Image';
+
+const activeIcon = require('../../assets/settings-filled-active-icon.png');
+const inactiveIcon = require('../../assets/settings-filled-inactive-icon.png');
+
+type TabBarIconProps = Partial<React.ComponentProps<typeof Image>> & {
+  focused?: boolean;
+};
+
+export function SettingsFilledIcon(props: TabBarIconProps) {
+  const icon = props.focused ? activeIcon : inactiveIcon;
+  return <Image source={icon} {...props} />;
+}

package/src/icons/ShakeDeviceIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import { Image } from '../Image';
+
+const icon = require('../../assets/shake-device-icon.png');
+
+export function ShakeDeviceIcon(props: Partial<React.ComponentProps<typeof Image>>) {
+  return <Image {...props} source={icon} />;
+}

package/src/icons/ShowMenuIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import { Image } from '../Image';
+
+const icon = require('../../assets/show-menu-at-launch-icon.png');
+
+export function ShowMenuIcon(props: Partial<React.ComponentProps<typeof Image>>) {
+  return <Image source={icon} {...props} />;
+}

package/src/icons/TerminalIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import { Image } from '../Image';
+
+const icon = require('../../assets/terminal-icon.png');
+
+export function TerminalIcon(props: Partial<React.ComponentProps<typeof Image>>) {
+  return <Image source={icon} {...props} />;
+}

package/src/icons/ThreeFingerPressIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import { Image } from '../Image';
+
+const icon = require('../../assets/three-finger-long-press-icon.png');
+
+export function ThreeFingerPressIcon(props: Partial<React.ComponentProps<typeof Image>>) {
+  return <Image source={icon} {...props} />;
+}

package/src/icons/ToolbarOverlayIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import { Image } from '../Image';
+
+const icon = require('../../assets/toolbar-overlay-icon.png');
+
+export function ToolbarOverlayIcon(props: Partial<React.ComponentProps<typeof Image>>) {
+  return <Image source={icon} {...props} />;
+}

package/src/icons/UserIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import { Image } from '../Image';
+
+const icon = require('../../assets/user-icon.png');
+
+export function UserIcon(props: Partial<React.ComponentProps<typeof Image>>) {
+  return <Image source={icon} {...props} />;
+}

package/src/icons/XIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import { Image } from '../Image';
+
+const icon = require('../../assets/x-icon.png');
+
+export function XIcon(props: Partial<React.ComponentProps<typeof Image>>) {
+  return <Image source={icon} {...props} />;
+}