expo-dev-client-components 1.0.0 → 1.1.0

package/src/View.tsx

@@ -1,8 +1,19 @@
-import { lightTheme, darkTheme, shadows, iconSize } from '@expo/styleguide-native';
-import { View as RNView } from 'react-native';
-import { create } from 'react-native-primitives';
+import { lightTheme, darkTheme, shadows } from '@expo/styleguide-native';
+import { View as RNView, StyleSheet } from 'react-native';
 
-import { scale, padding, margin, rounded, bg, bgDark } from './theme';
+import { create } from './create-primitive';
+import {
+  scale,
+  padding,
+  margin,
+  rounded,
+  bg,
+  bgDark,
+  width,
+  height,
+  borderDark,
+  border,
+} from './theme';
 
 export const View = create(RNView, {
   variants: {
@@ -17,6 +28,9 @@ export const View = create(RNView, {
         justifyContent: 'center',
         alignItems: 'center',
       },
+      start: {
+        alignItems: 'flex-start',
+      },
     },
 
     flex: {
@@ -29,10 +43,49 @@ export const View = create(RNView, {
       '0': { flexShrink: 0 },
     },
 
+    grow: {
+      '1': { flexGrow: 1 },
+      '0': { flexGrow: 0 },
+    },
+
     bg,
 
+    opacity: {
+      '1': { opacity: 1 },
+      '0.5': { opacity: 0.5 },
+      '0.75': { opacity: 0.75 },
+      '0': { opacity: 0 },
+    },
+
+    inset: {
+      top: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+      },
+
+      bottom: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+      },
+
+      full: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+      },
+    },
+
     border: {
       default: { borderColor: lightTheme.border.default, borderWidth: 1 },
+      hairline: { borderColor: lightTheme.border.default, borderWidth: StyleSheet.hairlineWidth },
+      warning: { borderColor: lightTheme.border.warning, borderWidth: 1 },
+      error: { borderColor: lightTheme.border.error, borderWidth: 1 },
     },
 
     ...rounded,
@@ -45,23 +98,8 @@ export const View = create(RNView, {
       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 },
-    },
+    width,
+    height,
 
     ...padding,
     ...margin,
@@ -71,9 +109,7 @@ export const View = create(RNView, {
     dark: {
       bg: bgDark,
 
-      border: {
-        default: { borderColor: darkTheme.border.default, borderWidth: 1 },
-      },
+      border: borderDark,
     },
 
     light: {
@@ -90,47 +126,79 @@ export const Row = create(RNView, {
   variants: {
     bg,
 
+    flex: {
+      '1': { flex: 1 },
+      '0': { flex: 0 },
+    },
+
+    shrink: {
+      '1': { flexShrink: 1 },
+      '0': { flexShrink: 0 },
+    },
+
+    grow: {
+      '1': { flexGrow: 1 },
+      '0': { flexGrow: 0 },
+    },
+
     align: {
       center: { alignItems: 'center' },
       start: { alignItems: 'flex-start' },
       end: { alignItems: 'flex-end' },
     },
 
+    justify: {
+      center: { justifyContent: 'center' },
+      start: { justifyContent: 'flex-start' },
+      end: { justifyContent: 'flex-end' },
+      between: { justifyContent: 'space-between' },
+      around: { justifyContent: 'space-around' },
+    },
+
     ...padding,
     ...margin,
+
+    ...rounded,
+
+    border,
   },
 
   selectors: {
     dark: {
       bg: bgDark,
+      border: borderDark,
     },
   },
 });
 
 const Horizontal = create(RNView, {
+  base: {
+    flex: 1,
+  },
   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 },
+      micro: { width: scale.micro, flex: 0 },
+      tiny: { width: scale.tiny, flex: 0 },
+      small: { width: scale.small, flex: 0 },
+      medium: { width: scale.medium, flex: 0 },
+      large: { width: scale.large, flex: 0 },
+      xl: { width: scale.xl, flex: 0 },
     },
   },
 });
 
 const Vertical = create(RNView, {
+  base: {
+    flex: 1,
+  },
   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 },
+      micro: { height: scale.micro, flex: 0 },
+      tiny: { height: scale.tiny, flex: 0 },
+      small: { height: scale.small, flex: 0 },
+      medium: { height: scale.medium, flex: 0 },
+      large: { height: scale.large, flex: 0 },
+      xl: { height: scale.xl, flex: 0 },
     },
   },
 });
@@ -142,15 +210,15 @@ export const Spacer = {
 
 export const Divider = create(RNView, {
   base: {
-    borderWidth: 0.5,
-    borderColor: lightTheme.border.default,
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: lightTheme.border.default,
   },
 
   variants: {
     weight: {
-      thin: { borderWidth: 0.5 },
-      normal: { borderWidth: 1 },
-      heavy: { borderWidth: 2 },
+      thin: { height: StyleSheet.hairlineWidth },
+      normal: { height: 1 },
+      heavy: { height: 2 },
     },
 
     ...margin,
@@ -158,7 +226,10 @@ export const Divider = create(RNView, {
 
   selectors: {
     dark: {
-      borderColor: darkTheme.border.default,
+      base: {
+        height: StyleSheet.hairlineWidth,
+        backgroundColor: darkTheme.border.default,
+      },
     },
   },
 });

package/src/create-primitive.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { StyleSheet, ViewStyle, ImageStyle, TextStyle } from 'react-native';
+
+import { useTheme } from './useExpoTheme';
+
+type StyleType = ViewStyle | TextStyle | ImageStyle;
+
+type Options = {
+  base?: StyleType;
+  variants?: VariantMap<StyleType>;
+};
+
+type VariantMap<T> = { [key: string]: { [key: string]: T } };
+
+type Nested<Type> = {
+  [Property in keyof Type]?: keyof Type[Property];
+};
+
+type SelectorMap<Variants> = Partial<{
+  [K in keyof Variants]?: {
+    [T in keyof Variants[K]]?: StyleType;
+  };
+}>;
+
+type Selectors<Variants> = {
+  light?: SelectorMap<Variants>;
+  dark?: SelectorMap<Variants>;
+};
+
+type SelectorProps = {
+  light?: StyleType;
+  dark?: StyleType;
+};
+
+export function create<T, O extends Options>(
+  component: React.ComponentType<T>,
+  config: O & { selectors?: Selectors<O['variants']>; props?: T }
+) {
+  config.selectors = config.selectors ?? {};
+  config.variants = config.variants ?? {};
+
+  const Component = React.forwardRef<
+    T,
+    React.PropsWithChildren<T> & Nested<typeof config['variants']> & { selectors?: SelectorProps }
+  >((props, ref) => {
+    const theme = useTheme();
+
+    const variantStyles = stylesForVariants(props, config.variants);
+    const selectorStyles = stylesForSelectors(props, config.selectors, { theme });
+    const selectorPropsStyles = stylesForSelectorProps(props.selectors, { theme });
+
+    const variantFreeProps: any = { ...props };
+
+    // @ts-ignore
+    // there could be a conflict between the primitive prop and the variant name
+    // for example - variant name "width" and prop "width"
+    // in these cases, favor the variant because it is under the users control (e.g they can update the conflicting name)
+
+    Object.keys(config.variants).forEach((variant) => {
+      delete variantFreeProps[variant];
+    });
+
+    return React.createElement(component, {
+      ...config.props,
+      ...variantFreeProps,
+      style: StyleSheet.flatten([
+        config.base,
+        variantStyles,
+        selectorStyles,
+        selectorPropsStyles,
+        // @ts-ignore
+        props.style || {},
+      ]),
+      ref,
+    });
+  });
+
+  return Component;
+}
+
+function stylesForVariants(props: any, variants: any = {}) {
+  let styles = {};
+
+  for (const key in props) {
+    if (variants[key]) {
+      const value = props[key];
+
+      const styleValue = variants[key][value];
+      if (styleValue) {
+        styles = StyleSheet.flatten(StyleSheet.compose(styles, styleValue));
+      }
+    }
+  }
+
+  return styles;
+}
+
+function stylesForSelectors(props: any, selectors: any = {}, state: any = {}) {
+  const styles: any[] = [];
+
+  if (state.theme != null) {
+    if (selectors[state.theme] != null) {
+      const variants = selectors[state.theme];
+      const variantStyles = stylesForVariants(props, variants);
+
+      if (variants.base != null) {
+        styles.push(variants.base);
+      }
+
+      styles.push(variantStyles);
+    }
+  }
+
+  return StyleSheet.flatten(styles);
+}
+
+function stylesForSelectorProps(selectors: any = {}, state: any = {}) {
+  const styles: any[] = [];
+
+  if (state.theme != null) {
+    if (selectors[state.theme] != null) {
+      const selectorStyles = selectors[state.theme];
+      styles.push(selectorStyles);
+    }
+  }
+
+  return StyleSheet.flatten(styles);
+}

package/src/icons/BranchIcon.tsx

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

package/src/icons/CheckIcon.tsx

@@ -1,9 +1,14 @@
 import * as React from 'react';
 
 import { Image } from '../Image';
+import { useCurrentTheme } from '../useExpoTheme';
 
+const lightIcon = require('../../assets/check-icon-light.png');
 const icon = require('../../assets/check-icon.png');
 
 export function CheckIcon(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/ClipboardIcon.tsx

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

package/src/icons/DebugIcon.tsx

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

package/src/icons/ExtensionsFilledIcon.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+import { Image } from '../Image';
+import { useCurrentTheme } from '../useExpoTheme';
+
+const activeLightIcon = require('../../assets/extensions-filled-active-icon-light.png');
+const activeIcon = require('../../assets/extensions-filled-active-icon.png');
+const inactiveLightIcon = require('../../assets/extensions-filled-inactive-icon-light.png');
+const inactiveIcon = require('../../assets/extensions-filled-inactive-icon.png');
+
+const iconMap = {
+  light: {
+    active: activeIcon,
+    inactive: inactiveIcon,
+  },
+  dark: {
+    active: activeLightIcon,
+    inactive: inactiveLightIcon,
+  },
+};
+
+type TabBarIconProps = Partial<React.ComponentProps<typeof Image>> & {
+  focused?: boolean;
+};
+
+export function ExtensionsFilledIcon(props: TabBarIconProps) {
+  const theme = useCurrentTheme();
+  const themedIcon = iconMap[theme];
+  const icon = props.focused ? themedIcon.active : themedIcon.inactive;
+  return <Image source={icon} {...props} />;
+}

package/src/icons/ExtensionsIcon.tsx

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

package/src/icons/HomeFilledIcon.tsx

@@ -1,15 +1,31 @@
 import * as React from 'react';
 
 import { Image } from '../Image';
+import { useCurrentTheme } from '../useExpoTheme';
 
+const activeLightIcon = require('../../assets/home-filled-active-icon-light.png');
 const activeIcon = require('../../assets/home-filled-active-icon.png');
+const inactiveLightIcon = require('../../assets/home-filled-inactive-icon-light.png');
 const inactiveIcon = require('../../assets/home-filled-inactive-icon.png');
 
+const iconMap = {
+  light: {
+    active: activeIcon,
+    inactive: inactiveIcon,
+  },
+  dark: {
+    active: activeLightIcon,
+    inactive: inactiveLightIcon,
+  },
+};
+
 type TabBarIconProps = Partial<React.ComponentProps<typeof Image>> & {
   focused?: boolean;
 };
 
 export function HomeFilledIcon(props: TabBarIconProps) {
-  const icon = props.focused ? activeIcon : inactiveIcon;
+  const theme = useCurrentTheme();
+  const themedIcon = iconMap[theme];
+  const icon = props.focused ? themedIcon.active : themedIcon.inactive;
   return <Image source={icon} {...props} />;
 }

package/src/icons/InfoIcon.tsx

@@ -1,9 +1,14 @@
 import * as React from 'react';
 
 import { Image } from '../Image';
+import { useCurrentTheme } from '../useExpoTheme';
 
+const lightIcon = require('../../assets/info-icon-light.png');
 const icon = require('../../assets/info-icon.png');
 
 export function InfoIcon(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/InspectElementIcon.tsx

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

package/src/icons/LoadingIndicatorIcon.tsx

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

package/src/icons/PerformanceIcon.tsx

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

package/src/icons/RunIcon.tsx

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

package/src/icons/SettingsFilledIcon.tsx

@@ -1,15 +1,31 @@
 import * as React from 'react';
 
 import { Image } from '../Image';
+import { useCurrentTheme } from '../useExpoTheme';
 
+const activeLightIcon = require('../../assets/settings-filled-active-icon-light.png');
 const activeIcon = require('../../assets/settings-filled-active-icon.png');
+const inactiveLightIcon = require('../../assets/settings-filled-inactive-icon-light.png');
 const inactiveIcon = require('../../assets/settings-filled-inactive-icon.png');
 
+const iconMap = {
+  light: {
+    active: activeIcon,
+    inactive: inactiveIcon,
+  },
+  dark: {
+    active: activeLightIcon,
+    inactive: inactiveLightIcon,
+  },
+};
+
 type TabBarIconProps = Partial<React.ComponentProps<typeof Image>> & {
   focused?: boolean;
 };
 
 export function SettingsFilledIcon(props: TabBarIconProps) {
-  const icon = props.focused ? activeIcon : inactiveIcon;
+  const theme = useCurrentTheme();
+  const themedIcon = iconMap[theme];
+  const icon = props.focused ? themedIcon.active : themedIcon.inactive;
   return <Image source={icon} {...props} />;
 }

package/src/icons/ShakeDeviceIcon.tsx

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

package/src/icons/ShowMenuIcon.tsx

@@ -1,9 +1,14 @@
 import * as React from 'react';
 
 import { Image } from '../Image';
+import { useCurrentTheme } from '../useExpoTheme';
 
+const lightIcon = require('../../assets/show-menu-at-launch-icon-light.png');
 const icon = require('../../assets/show-menu-at-launch-icon.png');
 
 export function ShowMenuIcon(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/ThreeFingerPressIcon.tsx

@@ -1,9 +1,14 @@
 import * as React from 'react';
 
 import { Image } from '../Image';
+import { useCurrentTheme } from '../useExpoTheme';
 
+const lightIcon = require('../../assets/three-finger-long-press-icon-light.png');
 const icon = require('../../assets/three-finger-long-press-icon.png');
 
 export function ThreeFingerPressIcon(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/UpdateIcon.tsx

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

package/src/icons/UserIcon.tsx

@@ -1,9 +1,14 @@
 import * as React from 'react';
 
 import { Image } from '../Image';
+import { useCurrentTheme } from '../useExpoTheme';
 
+const lightIcon = require('../../assets/user-icon-light.png');
 const icon = require('../../assets/user-icon.png');
 
 export function UserIcon(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} />;
 }