Add @shopify/restyle

.github/workflows/pr-verify.yml

@@ -0,0 +1,24 @@
+name: PR Verify
+
+on:
+  push:
+    branches-ignore:
+      - 'master'
+      - 'main'
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v1
+    - name: PR Verify
+      uses: actions/setup-node@v1
+      with:
+        node-version: 10.16.0
+    - name: Verify lint, TS, and tests
+      run: |
+        cd template
+        yarn
+        yarn ci

template/.eslintrc.js

@@ -1,4 +1,8 @@
 module.exports = {
   root: true,
   extends: ['plugin:echobind/react-native'],
+  rules: {
+    'import/namespace': 0,
+    '@typescript-eslint/explicit-function-return-type': 0
+  }
 };

template/.github/workflows/pr-verify.yml

@@ -0,0 +1,23 @@
+name: PR Verify
+
+on:
+  push:
+    branches-ignore:
+      - 'master'
+      - 'main'
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v1
+    - name: PR Verify
+      uses: actions/setup-node@v1
+      with:
+        node-version: 10.16.0
+    - name: Verify lint, TS, and tests
+      run: |
+        yarn
+        yarn ci

template/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "start": "react-native start --reset-cache",
     "test": "jest",
-    "test:ci": "jest",
+    "ci": "yarn lint && yarn ts-check && yarn test",
     "test:watch": "jest --changedSince=master --watch",
     "lint": "eslint . --ext .ts,.tsx",
     "g:component": "hygen component new --name",
@@ -24,7 +24,8 @@
     "e2e:ios-debug": "detox build -c ios.sim.debug && detox test -c ios.sim.debug --cleanup",
     "e2e:ios": "detox build -c ios.sim.release && detox test -c ios.sim.release --cleanup",
     "e2e:android-debug": "detox build -c android.emu.debug && detox test -c android.emu.debug -l trace --cleanup",
-    "e2e:android": "detox build -c android.emu.release && detox test -c android.emu.release -l trace --cleanup"
+    "e2e:android": "detox build -c android.emu.release && detox test -c android.emu.release -l trace --cleanup",
+    "ts-check": "yarn tsc --skipLibCheck"
   },
   "keywords": [],
   "author": "",
@@ -36,10 +37,12 @@
     "@react-navigation/bottom-tabs": "^5.6.1",
     "@react-navigation/native": "^5.6.1",
     "@react-navigation/stack": "^5.6.2",
+    "@shopify/restyle": "^1.4.0",
     "emotion-theming": "^10.0.19",
     "react": "16.13.1",
     "react-native": "0.63.2",
     "react-native-bootsplash": "^3.1.2",
+    "react-native-dynamic": "^1.0.0",
     "react-native-elements": "^1.2.7",
     "react-native-gesture-handler": "^1.6.1",
     "react-native-reanimated": "^1.9.0",
@@ -53,8 +56,6 @@
     "@babel/core": "^7.8.4",
     "@babel/runtime": "^7.8.4",
     "@react-native-community/eslint-config": "^1.1.0",
-    "metro-react-native-babel-preset": "^0.59.0",
-    "react-test-renderer": "16.13.1",
     "@storybook/addon-ondevice-backgrounds": "^5.2.5",
     "@storybook/addons": "^5.2.5",
     "@storybook/react-native": "^5.3.0-rc.1",
@@ -73,8 +74,10 @@
     "hygen": "^2.0.4",
     "jest": "^25.1.0",
     "lint-staged": "^10.0.0-beta.3",
+    "metro-react-native-babel-preset": "^0.59.0",
     "prettier": "^1.19.1",
     "react-native-flipper": "^0.73.0",
+    "react-test-renderer": "16.13.1",
     "solidarity": "^2.3.1",
     "ts-jest": "^23.10.5",
     "typescript": "^3.2.2",

template/src/App.tsx

@@ -1,19 +1,24 @@
+import { NavigationContainer } from '@react-navigation/native';
+import { ThemeProvider as ShopifyThemeProvider } from '@shopify/restyle';
+import { ThemeProvider } from 'emotion-theming';
 import React, { ReactElement, useEffect } from 'react';
 import RNBootSplash from 'react-native-bootsplash';
+import { useDarkMode } from 'react-native-dynamic';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { NavigationContainer } from '@react-navigation/native';
-import { ThemeProvider } from 'emotion-theming';
 
 import Storybook from '../storybook';
 import { AppNav } from './navigation/AppNav';
 import { GuestNav } from './navigation/GuestNav';
-
-import { theme } from './styles';
+import { theme as emotionTheme } from './styles';
+import { darkModeTheme, lightModeTheme } from './theme';
 
 // NOTE: Change this boolean to true to render the Storybook view for development!
 const RENDER_STORYBOOK = false;
 
 const App = (): ReactElement | null => {
+  const isDarkMode = useDarkMode();
+  const theme = isDarkMode ? darkModeTheme : lightModeTheme;
+
   // hide the splashscreen on mount
   useEffect(() => {
     RNBootSplash.hide({ fade: true });
@@ -27,10 +32,12 @@ const App = (): ReactElement | null => {
   };
 
   return (
-    <NavigationContainer>
+    <NavigationContainer theme={theme.navigation}>
       <SafeAreaProvider>
-        <ThemeProvider theme={theme}>
-          {RENDER_STORYBOOK ? <Storybook /> : renderNavigation()}
+        <ThemeProvider theme={emotionTheme}>
+          <ShopifyThemeProvider theme={theme}>
+            {RENDER_STORYBOOK ? <Storybook /> : renderNavigation()}
+          </ShopifyThemeProvider>
         </ThemeProvider>
       </SafeAreaProvider>
     </NavigationContainer>

template/src/components/Button/Button.stories.tsx

@@ -4,5 +4,5 @@ import React from 'react';
 import { Button } from './Button';
 
 storiesOf('components/Button', module).add('Default', () => (
-  <Button label="Button" />
+  <Button onPress={() => console.log('Button pressed!')}>{'Hello World'}</Button>
 ));

template/src/components/Button/Button.tsx

@@ -1,83 +1,31 @@
-import React, { FC } from 'react';
-import { ActivityIndicator } from 'react-native';
-import {
-  backgroundColor,
-  BorderProps,
-  ColorProps,
-  SpaceProps,
-  FlexProps,
-  LayoutProps,
-} from 'styled-system';
+import { createRestyleComponent, createVariant, VariantProps } from '@shopify/restyle';
+import React from 'react';
 
-import { Container } from '../Container';
+import { Theme } from '../../theme';
+import { useVariantValue } from '../../utils/theme-utils/theme-utils';
 import { Text } from '../Text';
-import { Touchable } from '../Touchable';
-import { colors } from '../../styles';
-import { AccessbilityRole } from '../../types/AccessibilityRole';
+import { Touchable, TouchableProps } from '../Touchable';
 
-interface ButtonProps {
-  /**
-  * Overrides the text that's read by the screen reader when the user interacts with the element. By default, the
-  * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
-  */
-  accessibilityLabel: string;
-  /** Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on.  */
-  accessbilityRole?: AccessbilityRole;
-  /** disabled button state */
-  disabled?: boolean;
-  /** loading button state */
-  loading?: boolean;
-  /** the text label of the button */
-  label: string;
-  /** the callback to be invoked onPress */
-  onPress: () => void;
-}
+type ButtonProps = TouchableProps & VariantProps<Theme, 'buttonVariants'>;
 
-type ComponentProps = ButtonProps & BorderProps & ColorProps & SpaceProps & FlexProps & LayoutProps;
+const VariantRestyleComponent = createVariant({
+  themeKey: 'buttonVariants',
+});
+
+const ButtonWrapper = createRestyleComponent<ButtonProps, Theme>(
+  [VariantRestyleComponent],
+  Touchable
+);
 
 /**
- * notes:
- * - restricting inner text style from being directly configurable to avoid style prop conflicts
- * - if button is disabled it will not render a touchableOpacity at all
+ * A simple button
  */
-export const Button: FC<ComponentProps> = ({
-  accessibilityLabel,
-  label,
-  onPress,
-  disabled,
-  loading,
-  color: componentColor,
-  ...props
-}) => {
-  const ButtonContainer = disabled ? Container : Touchable;
-  const onPressAction = loading ? null : onPress;
+export const Button = ({ children, ...props }: ButtonProps) => {
+  const textStyle = useVariantValue('buttonVariants', 'textStyle', props.variant);
 
   return (
-    <ButtonContainer
-      centerContent
-      bg={disabled ? colors.disabled : backgroundColor}
-      borderRadius={40}
-      height={50}
-      width={0.6}
-      accessibilityLabel={accessibilityLabel}
-      onPress={onPressAction}
-      disabled={disabled}
-      {...props}
-    >
-      {loading ? (
-        <ActivityIndicator />
-      ) : (
-        <Text color={disabled ? colors.gray : componentColor} fontWeight="bold" fontSize={2}>
-          {label}
-        </Text>
-      )}
-    </ButtonContainer>
+    <ButtonWrapper {...props}>
+      <Text {...textStyle}>{children}</Text>
+    </ButtonWrapper>
   );
 };
-
-Button.defaultProps = {
-  disabled: false,
-  borderColor: colors.transparent,
-  borderWidth: 1,
-  backgroundColor: colors.orange,
-};

template/src/components/Button/index.ts

@@ -1 +1 @@
-export * from './Button';
+export * from './Button';

template/src/components/Container/Container.tsx

@@ -1,64 +1,18 @@
-import {
-  BorderProps,
-  borders,
-  color,
-  ColorProps,
-  flexbox,
-  FlexProps,
-  layout,
-  space,
-  SpaceProps,
-} from 'styled-system';
-import styled from '@emotion/native';
+import { BoxProps, createBox } from '@shopify/restyle';
+import React from 'react';
 
-import { margins } from '../../styles';
+import { Theme } from '../../theme';
 
-interface ContainerProps {
-  /** applies "flex: 1" style */
-  fill?: boolean;
-  /** applies "width: 100%" style */
-  fullWidth?: boolean;
-  /** centers content both vertically and horizontally */
-  centerContent?: boolean;
-  /**
-   * applies default horizontal screen margins.
-   * decoupled from Screen component to make layout-building more flexible.
-   */
-  screenMargins?: boolean;
-}
+/**
+ * Renders a View with @shopify/restyle functionality.
+ */
+export const Container = createBox<Theme>();
 
-type ComponentProps = ContainerProps & BorderProps & ColorProps & FlexProps & SpaceProps;
+export type ContainerProps = React.ComponentProps<typeof Container> & BoxProps<Theme>;
 
 /**
- * This is our primitive View component with styled-system props applied
+ * Renders a container with children that are horizontally and vertically centered.
  */
-export const Container = styled.View<ComponentProps>`
-  ${space};
-  ${color};
-  ${borders};
-  ${layout};
-  ${flexbox};
-  ${props =>
-    props.fill &&
-    `
-      flex: 1;
-    `}
-  ${props =>
-    props.fullWidth &&
-    `
-      width: 100%;
-    `}
-  ${props =>
-    props.centerContent &&
-    `
-      justifyContent: center;
-      alignItems: center;
-    `}
-  ${props =>
-    props.screenMargins &&
-    `
-      paddingHorizontal: ${margins.screenMargin};
-    `}
-`;
-
-Container.defaultProps = {};
+export const CenteredContainer = (props: ContainerProps): React.ReactElement => (
+  <Container alignItems="center" justifyContent="center" {...props} />
+);

template/src/components/Login/Login.stories.tsx

@@ -2,17 +2,11 @@ import { storiesOf } from '@storybook/react-native';
 import React from 'react';
 
 import { Login } from './Login';
-import { Screen } from '../Screen';
-import { colors } from '../../styles';
 
-const ScreenDecorator = storyFn => <Screen padding={10}>{storyFn()}</Screen>;
-
-storiesOf('components/Login', module)
-  .addDecorator(ScreenDecorator)
-  .add('Default', () => (
-    <Login
-      loginPress={() => console.log('login pressed')}
-      forgotPasswordPress={() => console.log('forgot password pressed')}
-      registrationPress={() => console.log('registration pressed')}
-    />
-  ));
+storiesOf('components/Login', module).add('Default', () => (
+  <Login
+    loginPress={() => console.log('Login pressed!')}
+    forgotPasswordPress={() => console.log('Forgot password pressed!')}
+    registrationPress={() => console.log('Registration pressed!')}
+  />
+));