expo-dev-client-components 1.0.0 → 1.1.0

package/src/icons/WarningIcon.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+import { Image } from '../Image';
+import { useCurrentTheme } from '../useExpoTheme';
+
+const lightIcon = require('../../assets/warning-triangle-icon-light.png');
+const icon = require('../../assets/warning-triangle-icon.png');
+
+export function WarningIcon(props: Partial<React.ComponentProps<typeof Image>>) {
+  const theme = useCurrentTheme();
+  const themedIcon = theme === 'dark' ? lightIcon : icon;
+
+  return <Image source={themedIcon} {...props} />;
+}

package/src/icons/XIcon.tsx

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

package/src/icons/index.ts

@@ -1,15 +1,26 @@
+export * from './BranchIcon';
 export * from './CheckIcon';
 export * from './ChevronRightIcon';
+export * from './ClipboardIcon';
+export * from './DebugIcon';
 export * from './ExpoLogoIcon';
+export * from './ExtensionsIcon';
+export * from './ExtensionsFilledIcon';
 export * from './HomeFilledIcon';
 export * from './InfoIcon';
+export * from './InspectElementIcon';
+export * from './LoadingIndicatorIcon';
+export * from './PerformanceIcon';
 export * from './QuestionMarkIcon';
 export * from './RefreshIcon';
+export * from './RunIcon';
+export * from './SettingsFilledIcon';
 export * from './ShakeDeviceIcon';
 export * from './ShowMenuIcon';
-export * from './SettingsFilledIcon';
 export * from './TerminalIcon';
 export * from './ThreeFingerPressIcon';
 export * from './ToolbarOverlayIcon';
+export * from './UpdateIcon';
 export * from './UserIcon';
+export * from './WarningIcon';
 export * from './XIcon';

package/src/theme.ts

@@ -1,71 +1,57 @@
-import { spacing, lightTheme, darkTheme, borderRadius } from '@expo/styleguide-native';
-import { TextStyle } from 'react-native';
+import { spacing, lightTheme, darkTheme, borderRadius, typography } from '@expo/styleguide-native';
+import { TextStyle, Platform, StyleSheet } from 'react-native';
 
-export const scale = {
+type SpacingKey = `${keyof typeof spacing}`;
+type DescriptiveScale = 'micro' | 'tiny' | 'small' | 'medium' | 'large' | 'xl';
+type ScaleKey = SpacingKey | DescriptiveScale;
+type Scale = Record<ScaleKey, number>;
+
+export const scale: Scale = {
   micro: spacing[0.5],
   tiny: spacing[1],
   small: spacing[3],
   medium: spacing[4],
   large: spacing[6],
   xl: spacing[8],
+  ...spacing,
 };
 
-export const padding = {
-  padding: {
-    micro: { padding: scale.micro },
-    tiny: { padding: scale.tiny },
-    small: { padding: scale.small },
-    medium: { padding: scale.medium },
-    large: { padding: scale.large },
-    xl: { padding: scale.xl },
-  },
+function fullSpacingScaleForAttributes(attributes: string[]) {
+  const obj: { [scaleKey: string]: any } = {};
 
-  px: {
-    micro: { paddingHorizontal: scale.micro },
-    tiny: { paddingHorizontal: scale.tiny },
-    small: { paddingHorizontal: scale.small },
-    medium: { paddingHorizontal: scale.medium },
-    large: { paddingHorizontal: scale.large },
-    xl: { paddingHorizontal: scale.xl },
-  },
+  Object.keys(scale).forEach((key) => {
+    key = `${key}`;
+    const value: { [attribute: string]: number } = {};
 
-  py: {
-    micro: { paddingVertical: scale.micro },
-    tiny: { paddingVertical: scale.tiny },
-    small: { paddingVertical: scale.small },
-    medium: { paddingVertical: scale.medium },
-    large: { paddingVertical: scale.large },
-    xl: { paddingVertical: scale.xl },
-  },
-};
+    attributes.forEach((attribute) => {
+      value[attribute] = scale[key as ScaleKey];
+    });
 
-export const margin = {
-  margin: {
-    micro: { margin: scale.micro },
-    tiny: { margin: scale.tiny },
-    small: { margin: scale.small },
-    medium: { margin: scale.medium },
-    large: { margin: scale.large },
-    xl: { margin: scale.xl },
-  },
+    obj[key] = value;
+  });
 
-  mx: {
-    micro: { marginHorizontal: scale.micro },
-    tiny: { marginHorizontal: scale.tiny },
-    small: { marginHorizontal: scale.small },
-    medium: { marginHorizontal: scale.medium },
-    large: { marginHorizontal: scale.large },
-  },
+  return obj as Record<SpacingKey | DescriptiveScale, any>;
+}
 
-  my: {
-    micro: { marginHorizontal: scale.micro },
-    tiny: { marginVertical: scale.tiny },
-    small: { marginVertical: scale.small },
-    medium: { marginVertical: scale.medium },
-    large: { marginVertical: scale.large },
-  },
+export const padding = {
+  padding: fullSpacingScaleForAttributes(['padding']),
+  px: fullSpacingScaleForAttributes(['paddingHorizontal']),
+  py: fullSpacingScaleForAttributes(['paddingVertical']),
+  pb: fullSpacingScaleForAttributes(['paddingBottom']),
+  pt: fullSpacingScaleForAttributes(['paddingTop']),
 };
 
+export const margin = {
+  margin: fullSpacingScaleForAttributes(['margin']),
+  mx: fullSpacingScaleForAttributes(['marginHorizontal']),
+  my: fullSpacingScaleForAttributes(['marginVertical']),
+  mb: fullSpacingScaleForAttributes(['marginBottom']),
+  mt: fullSpacingScaleForAttributes(['marginTop']),
+};
+
+export const width = fullSpacingScaleForAttributes(['width']);
+export const height = fullSpacingScaleForAttributes(['height']);
+
 export const rounded = {
   rounded: {
     none: { borderRadius: 0 },
@@ -110,18 +96,9 @@ export const text = {
   },
 
   size: {
-    small: {
-      fontSize: 12,
-      lineHeight: 14,
-    },
-    medium: {
-      fontSize: 16,
-      lineHeight: 18,
-    },
-    large: {
-      fontSize: 18,
-      lineHeight: 24,
-    },
+    small: typography.fontSizes[12],
+    medium: typography.fontSizes[16],
+    large: typography.fontSizes[18],
   },
 
   leading: {
@@ -130,20 +107,38 @@ export const text = {
 
   type: {
     mono: {
-      fontFamily: 'Menlo',
+      fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
     },
+    InterBlack: { fontFamily: 'Inter-Black' },
+    InterBlackItalic: { fontFamily: 'Inter-BlackItalic' },
+    InterBold: { fontFamily: 'Inter-Bold' },
+    InterBoldItalic: { fontFamily: 'Inter-BoldItalic' },
+    InterExtraBold: { fontFamily: 'Inter-ExtraBold' },
+    InterExtraBoldItalic: { fontFamily: 'Inter-ExtraBoldItalic' },
+    InterExtraLight: { fontFamily: 'Inter-ExtraLight' },
+    InterExtraLightItalic: { fontFamily: 'Inter-ExtraLightItalic' },
+    InterRegular: { fontFamily: 'Inter-Regular' },
+    InterItalic: { fontFamily: 'Inter-Italic' },
+    InterLight: { fontFamily: 'Inter-Light' },
+    InterLightItalic: { fontFamily: 'Inter-LightItalic' },
+    InterMedium: { fontFamily: 'Inter-Medium' },
+    InterMediumItalic: { fontFamily: 'Inter-MediumItalic' },
+    InterSemiBold: { fontFamily: 'Inter-SemiBold' },
+    InterSemiBoldItalic: { fontFamily: 'Inter-SemiBoldItalic' },
+    InterThin: { fontFamily: 'Inter-Thin' },
+    InterThinItalic: { fontFamily: 'Inter-ThinItalic' },
   },
 
   weight: {
-    thin: { fontWeight: '100' as TextStyle['fontWeight'] },
-    extralight: { fontWeight: '200' as TextStyle['fontWeight'] },
-    light: { fontWeight: '300' as TextStyle['fontWeight'] },
-    normal: { fontWeight: '400' as TextStyle['fontWeight'] },
-    medium: { fontWeight: '500' as TextStyle['fontWeight'] },
-    semibold: { fontWeight: '600' as TextStyle['fontWeight'] },
-    bold: { fontWeight: '700' as TextStyle['fontWeight'] },
-    extrabold: { fontWeight: '800' as TextStyle['fontWeight'] },
-    black: { fontWeight: '900' as TextStyle['fontWeight'] },
+    thin: { fontFamily: 'Inter-Thin' },
+    extralight: { fontFamily: 'Inter-ExtraLight' },
+    light: { fontFamily: 'Inter-Light' },
+    normal: { fontFamily: 'Inter-Regular' },
+    medium: { fontFamily: 'Inter-Medium' },
+    semibold: { fontFamily: 'Inter-SemiBold' },
+    bold: { fontFamily: 'Inter-Bold' },
+    extrabold: { fontFamily: 'Inter-ExtraBold' },
+    black: { fontFamily: 'Inter-Black' },
   },
 
   color: {
@@ -153,6 +148,7 @@ export const text = {
     success: { color: lightTheme.text.success },
     secondary: { color: lightTheme.text.secondary },
     primary: { color: lightTheme.button.primary.background },
+    link: { color: lightTheme.link.default },
   },
 };
 
@@ -168,6 +164,7 @@ export const textDark = {
     success: { color: darkTheme.text.success },
     secondary: { color: darkTheme.text.secondary },
     primary: { color: darkTheme.button.primary.background },
+    link: { color: darkTheme.link.default },
   },
 };
 
@@ -175,6 +172,7 @@ export const bg = {
   none: { backgroundColor: 'transparent' },
   default: { backgroundColor: lightTheme.background.default },
   secondary: { backgroundColor: lightTheme.background.secondary },
+  overlay: { backgroundColor: lightTheme.background.overlay },
   success: { backgroundColor: lightTheme.background.success },
   warning: { backgroundColor: lightTheme.background.warning },
   error: { backgroundColor: lightTheme.background.error },
@@ -183,6 +181,7 @@ export const bg = {
 export const bgDark = {
   default: { backgroundColor: darkTheme.background.default },
   secondary: { backgroundColor: darkTheme.background.secondary },
+  overlay: { backgroundColor: darkTheme.background.overlay },
   success: { backgroundColor: darkTheme.background.success },
   warning: { backgroundColor: darkTheme.background.warning },
   error: { backgroundColor: darkTheme.background.error },
@@ -204,7 +203,7 @@ export const lightNavigationTheme: NavigationTheme = {
   dark: false,
   colors: {
     primary: lightTheme.button.primary.background,
-    background: lightTheme.background.secondary,
+    background: lightTheme.background.screen,
     card: lightTheme.background.default,
     text: lightTheme.text.default,
     border: lightTheme.border.default,
@@ -215,11 +214,24 @@ export const lightNavigationTheme: NavigationTheme = {
 export const darkNavigationTheme: NavigationTheme = {
   dark: true,
   colors: {
-    primary: darkTheme.button.primary.background,
-    background: darkTheme.background.secondary,
-    card: darkTheme.background.default,
+    primary: darkTheme.link.default,
+    background: darkTheme.background.screen,
+    card: darkTheme.background.screen,
     text: darkTheme.text.default,
     border: darkTheme.border.default,
     notification: darkTheme.highlight.accent,
   },
 };
+
+export const border = {
+  default: { borderColor: lightTheme.border.default, borderWidth: 1 },
+  warning: { borderColor: lightTheme.border.warning, borderWidth: 1 },
+  hairline: { borderColor: lightTheme.border.default, borderWidth: StyleSheet.hairlineWidth },
+};
+
+export const borderDark = {
+  default: { borderColor: darkTheme.border.default, borderWidth: 1 },
+  warning: { borderColor: darkTheme.border.warning, borderWidth: 1 },
+  error: { borderColor: darkTheme.border.error, borderWidth: 1 },
+  hairline: { borderColor: darkTheme.border.default, borderWidth: StyleSheet.hairlineWidth },
+};

package/src/useExpoTheme.tsx

@@ -0,0 +1,50 @@
+import { lightTheme, darkTheme, palette } from '@expo/styleguide-native';
+import * as React from 'react';
+import { useColorScheme } from 'react-native';
+
+export type ThemePreference = 'light' | 'dark' | 'no-preference';
+type Theme = 'light' | 'dark';
+
+const ThemeContext = React.createContext<Theme>('light');
+export const useTheme = () => React.useContext(ThemeContext);
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  themePreference?: ThemePreference;
+};
+
+export function ThemeProvider({ children, themePreference = 'no-preference' }: ThemeProviderProps) {
+  const systemTheme = useColorScheme();
+
+  const theme = React.useMemo(() => {
+    if (themePreference !== 'no-preference') {
+      return themePreference;
+    }
+
+    return systemTheme ?? 'light';
+  }, [themePreference, systemTheme]);
+
+  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
+}
+
+type ExpoTheme = typeof lightTheme;
+
+export function useCurrentTheme(): 'light' | 'dark' {
+  const theme = useTheme();
+  return theme;
+}
+
+export function useExpoTheme(): ExpoTheme {
+  const theme = useTheme();
+
+  if (theme === 'dark') {
+    return darkTheme;
+  }
+
+  return lightTheme;
+}
+
+export function useExpoPalette() {
+  const theme = useTheme();
+  return palette[theme];
+}

package/src/useExpoTheme.ts

@@ -1,14 +0,0 @@
-import { lightTheme, darkTheme } from '@expo/styleguide-native';
-import { useColorScheme } from 'react-native';
-
-type ExpoTheme = typeof lightTheme;
-
-export function useExpoTheme(): ExpoTheme {
-  const colorScheme = useColorScheme();
-
-  if (colorScheme === 'dark') {
-    return darkTheme;
-  }
-
-  return lightTheme;
-}