expo-dev-client-components 1.0.0

package/src/icons/index.ts

@@ -0,0 +1,15 @@
+export * from './CheckIcon';
+export * from './ChevronRightIcon';
+export * from './ExpoLogoIcon';
+export * from './HomeFilledIcon';
+export * from './InfoIcon';
+export * from './QuestionMarkIcon';
+export * from './RefreshIcon';
+export * from './ShakeDeviceIcon';
+export * from './ShowMenuIcon';
+export * from './SettingsFilledIcon';
+export * from './TerminalIcon';
+export * from './ThreeFingerPressIcon';
+export * from './ToolbarOverlayIcon';
+export * from './UserIcon';
+export * from './XIcon';

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from './icons';
+export * from './Button';
+export * from './Image';
+export * from './Text';
+export * from './theme';
+export * from './View';
+export * from './useExpoTheme';

package/src/theme.ts

@@ -0,0 +1,225 @@
+import { spacing, lightTheme, darkTheme, borderRadius } from '@expo/styleguide-native';
+import { TextStyle } from 'react-native';
+
+export const scale = {
+  micro: spacing[0.5],
+  tiny: spacing[1],
+  small: spacing[3],
+  medium: spacing[4],
+  large: spacing[6],
+  xl: spacing[8],
+};
+
+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 },
+  },
+
+  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 },
+  },
+
+  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 },
+  },
+};
+
+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 },
+  },
+
+  mx: {
+    micro: { marginHorizontal: scale.micro },
+    tiny: { marginHorizontal: scale.tiny },
+    small: { marginHorizontal: scale.small },
+    medium: { marginHorizontal: scale.medium },
+    large: { marginHorizontal: scale.large },
+  },
+
+  my: {
+    micro: { marginHorizontal: scale.micro },
+    tiny: { marginVertical: scale.tiny },
+    small: { marginVertical: scale.small },
+    medium: { marginVertical: scale.medium },
+    large: { marginVertical: scale.large },
+  },
+};
+
+export const rounded = {
+  rounded: {
+    none: { borderRadius: 0 },
+    small: { borderRadius: borderRadius.small },
+    medium: { borderRadius: borderRadius.medium },
+    large: { borderRadius: borderRadius.large },
+    full: { borderRadius: 99999 },
+  },
+
+  roundedTop: {
+    none: { borderTopLeftRadius: 0, borderTopRightRadius: 0 },
+    small: { borderTopLeftRadius: borderRadius.small, borderTopRightRadius: borderRadius.small },
+    medium: {
+      borderTopLeftRadius: borderRadius.medium,
+      borderTopRightRadius: borderRadius.medium,
+    },
+    large: { borderTopLeftRadius: borderRadius.large, borderTopRightRadius: borderRadius.large },
+    full: { borderTopLeftRadius: 9999, borderTopRightRadius: 9999 },
+  },
+
+  roundedBottom: {
+    none: { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 },
+    small: {
+      borderBottomLeftRadius: borderRadius.small,
+      borderBottomRightRadius: borderRadius.small,
+    },
+    medium: {
+      borderBottomLeftRadius: borderRadius.medium,
+      borderBottomRightRadius: borderRadius.medium,
+    },
+    large: {
+      borderBottomLeftRadius: borderRadius.large,
+      borderBottomRightRadius: borderRadius.large,
+    },
+    full: { borderBottomLeftRadius: 9999, borderBottomRightRadius: 9999 },
+  },
+};
+
+export const text = {
+  align: {
+    center: { textAlign: 'center' as TextStyle['textAlign'] },
+  },
+
+  size: {
+    small: {
+      fontSize: 12,
+      lineHeight: 14,
+    },
+    medium: {
+      fontSize: 16,
+      lineHeight: 18,
+    },
+    large: {
+      fontSize: 18,
+      lineHeight: 24,
+    },
+  },
+
+  leading: {
+    large: { lineHeight: 18 },
+  },
+
+  type: {
+    mono: {
+      fontFamily: 'Menlo',
+    },
+  },
+
+  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'] },
+  },
+
+  color: {
+    default: { color: lightTheme.text.default },
+    error: { color: lightTheme.text.error },
+    warning: { color: lightTheme.text.warning },
+    success: { color: lightTheme.text.success },
+    secondary: { color: lightTheme.text.secondary },
+    primary: { color: lightTheme.button.primary.background },
+  },
+};
+
+export const textDark = {
+  base: {
+    color: darkTheme.text.default,
+  },
+
+  color: {
+    default: { color: darkTheme.text.default },
+    error: { color: darkTheme.text.error },
+    warning: { color: darkTheme.text.warning },
+    success: { color: darkTheme.text.success },
+    secondary: { color: darkTheme.text.secondary },
+    primary: { color: darkTheme.button.primary.background },
+  },
+};
+
+export const bg = {
+  none: { backgroundColor: 'transparent' },
+  default: { backgroundColor: lightTheme.background.default },
+  secondary: { backgroundColor: lightTheme.background.secondary },
+  success: { backgroundColor: lightTheme.background.success },
+  warning: { backgroundColor: lightTheme.background.warning },
+  error: { backgroundColor: lightTheme.background.error },
+};
+
+export const bgDark = {
+  default: { backgroundColor: darkTheme.background.default },
+  secondary: { backgroundColor: darkTheme.background.secondary },
+  success: { backgroundColor: darkTheme.background.success },
+  warning: { backgroundColor: darkTheme.background.warning },
+  error: { backgroundColor: darkTheme.background.error },
+};
+
+type NavigationTheme = {
+  dark: boolean;
+  colors: {
+    primary: string;
+    background: string;
+    card: string;
+    text: string;
+    border: string;
+    notification: string;
+  };
+};
+
+export const lightNavigationTheme: NavigationTheme = {
+  dark: false,
+  colors: {
+    primary: lightTheme.button.primary.background,
+    background: lightTheme.background.secondary,
+    card: lightTheme.background.default,
+    text: lightTheme.text.default,
+    border: lightTheme.border.default,
+    notification: lightTheme.highlight.accent,
+  },
+};
+
+export const darkNavigationTheme: NavigationTheme = {
+  dark: true,
+  colors: {
+    primary: darkTheme.button.primary.background,
+    background: darkTheme.background.secondary,
+    card: darkTheme.background.default,
+    text: darkTheme.text.default,
+    border: darkTheme.border.default,
+    notification: darkTheme.highlight.accent,
+  },
+};

package/src/useExpoTheme.ts

@@ -0,0 +1,14 @@
+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;
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+// @generated by expo-module-scripts
+{
+  "extends": "expo-module-scripts/tsconfig.base",
+  "compilerOptions": {
+    "outDir": "./build"
+  },
+  "include": ["./src"],
+  "exclude": ["**/__mocks__/*", "**/__tests__/*"]
+}