From 9fc32e734b3f49f248b5d3f2abe7129027ae7dad Mon Sep 17 00:00:00 2001 From: Dominic Sherman Date: Thu, 25 Feb 2021 15:48:15 -0800 Subject: [PATCH 1/8] Convert intro and login screens --- template/.eslintrc.js | 3 + template/package.json | 7 +- template/src/App.tsx | 21 ++-- .../src/components/Button/Button.stories.tsx | 4 +- template/src/components/Button/Button.tsx | 106 ++++++------------ .../src/components/Container/Container.tsx | 72 +++--------- template/src/components/Login/Login.tsx | 78 ++++++------- template/src/components/Screen/Screen.tsx | 71 +++++------- template/src/components/Text/Text.tsx | 33 +----- .../src/components/TextInput/TextInput.tsx | 105 ++++++++--------- .../src/screens/IntroScreen/IntroScreen.tsx | 45 +++----- .../src/screens/LoginScreen/LoginScreen.tsx | 32 ++---- .../RegistrationScreen/RegistrationScreen.tsx | 21 ++-- template/src/theme/breakpoints.ts | 4 + template/src/theme/buttonVariants.ts | 28 +++++ template/src/theme/colors.ts | 48 ++++++++ template/src/theme/index.ts | 68 +++++++++++ template/src/theme/spacing.ts | 22 ++++ template/src/theme/textVariants.ts | 20 ++++ template/src/utils/theme-utils/index.ts | 1 + template/src/utils/theme-utils/theme-utils.ts | 56 +++++++++ 21 files changed, 464 insertions(+), 381 deletions(-) create mode 100644 template/src/theme/breakpoints.ts create mode 100644 template/src/theme/buttonVariants.ts create mode 100644 template/src/theme/colors.ts create mode 100644 template/src/theme/index.ts create mode 100644 template/src/theme/spacing.ts create mode 100644 template/src/theme/textVariants.ts create mode 100644 template/src/utils/theme-utils/index.ts create mode 100644 template/src/utils/theme-utils/theme-utils.ts diff --git a/template/.eslintrc.js b/template/.eslintrc.js index 6e1b14f4..adfb3fe0 100644 --- a/template/.eslintrc.js +++ b/template/.eslintrc.js @@ -1,4 +1,7 @@ module.exports = { root: true, extends: ['plugin:echobind/react-native'], + rules: { + 'import/namespace': 0 + } }; diff --git a/template/package.json b/template/package.json index 2b848052..390b5b48 100644 --- a/template/package.json +++ b/template/package.json @@ -36,10 +36,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 +55,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 +73,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", @@ -108,7 +110,6 @@ }, "lint-staged": { "**/*.{ts,tsx}": [ - "yarn lint --fix", "git add" ] } diff --git a/template/src/App.tsx b/template/src/App.tsx index 0c6f66ab..50331252 100644 --- a/template/src/App.tsx +++ b/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 ( - + - - {RENDER_STORYBOOK ? : renderNavigation()} + + + {RENDER_STORYBOOK ? : renderNavigation()} + diff --git a/template/src/components/Button/Button.stories.tsx b/template/src/components/Button/Button.stories.tsx index 4efa571f..dda98c9f 100644 --- a/template/src/components/Button/Button.stories.tsx +++ b/template/src/components/Button/Button.stories.tsx @@ -3,6 +3,4 @@ import React from 'react'; import { Button } from './Button'; -storiesOf('components/Button', module).add('Default', () => ( - - - -   or   - + + +   or   + ); }; diff --git a/template/src/components/Screen/Screen.tsx b/template/src/components/Screen/Screen.tsx index 8e6ada9a..06a587ba 100644 --- a/template/src/components/Screen/Screen.tsx +++ b/template/src/components/Screen/Screen.tsx @@ -1,62 +1,43 @@ -import React, { ReactNode, FC } from 'react'; -import styled from '@emotion/native'; +import React, { FC, ReactNode } from 'react'; +import { StatusBar } from 'react-native'; +import { useDarkMode } from 'react-native-dynamic'; import SafeAreaView from 'react-native-safe-area-view'; -import { color, space, FlexProps, SpaceProps } from 'styled-system'; -import { Container } from '../Container'; - -import { theme } from '../../styles'; -import { colors } from '../../styles'; - -const VerticallyPaddedView = styled.View` - flex: 1; - ${space}; - ${color}; -`; - -const InnerView = styled.View` - flex: 1; - ${space}; -`; +import { Container, ContainerProps } from '../Container'; interface ScreenProps { /** The content to render within the screen */ children?: ReactNode; /** Whether to force the topInset. Use to prevent screen jank on tab screens */ - forceTopInset?: Boolean; + forceTopInset?: boolean; } -type ComponentProps = ScreenProps & FlexProps & SpaceProps; +type ComponentProps = ScreenProps & ContainerProps; export const Screen: FC = ({ - backgroundColor, paddingTop, paddingBottom, forceTopInset, children, ...screenProps -}) => ( - - - - {children} - - - -); - -SafeAreaView.defaultProps = { - bg: colors.white, +}) => { + const isDarkMode = useDarkMode(); + + return ( + <> + + + + + + {children} + + + + + + ); }; - -VerticallyPaddedView.defaultProps = { - pt: theme.space[2], - pb: theme.space[2], -}; - -InnerView.defaultProps = {}; - -Screen.defaultProps = {}; diff --git a/template/src/components/Text/Text.tsx b/template/src/components/Text/Text.tsx index 94004829..b212e53c 100644 --- a/template/src/components/Text/Text.tsx +++ b/template/src/components/Text/Text.tsx @@ -1,32 +1,7 @@ -import styled from '@emotion/native'; -import { - color, - space, - typography, - textStyle, - ColorProps, - SpaceProps, - TextStyleProps, - TypographyProps, -} from 'styled-system'; - -import { colors } from '../../styles'; - -interface TextProps {} - -type ComponentProps = TextProps & ColorProps & SpaceProps & TextStyleProps & TypographyProps; +import { createText } from '@shopify/restyle'; +import { Theme } from '../../theme'; /** - * This is our primitive Text component with styled-system props applied + * Renders a Text component with @shopify/restyle functionality. */ -export const Text = styled.Text` - ${space}; - ${color}; - ${typography}; - ${textStyle}; -`; - -Text.defaultProps = { - color: colors.black, - fontSize: 3, -}; +export const Text = createText(); diff --git a/template/src/components/TextInput/TextInput.tsx b/template/src/components/TextInput/TextInput.tsx index 622fa6fa..eeabe45e 100644 --- a/template/src/components/TextInput/TextInput.tsx +++ b/template/src/components/TextInput/TextInput.tsx @@ -1,59 +1,51 @@ -import React, { FC } from 'react'; -import { TextInputProps as TextInputBaseProps } from 'react-native'; -import styled from '@emotion/native'; import { - borders, - color, - layout, - space, - flex, - typography, - textStyle, + border, BorderProps, - FlexProps, + color, ColorProps, + createRestyleComponent, + layout, LayoutProps, - SpaceProps, - TextStyleProps, + spacing, + SpacingProps, + typography, TypographyProps, -} from 'styled-system'; -import { Icon } from 'react-native-elements'; +} from '@shopify/restyle'; +import React, { FC } from 'react'; +import { + TextInput as ReactNativeTextInput, + TextInputProps as TextInputBaseProps, +} from 'react-native'; + +import { colors } from '../../styles'; +import { Theme } from '../../theme'; import { Container } from '../Container'; import { Text } from '../Text'; -import { colors } from '../../styles'; interface TextInputProps extends TextInputBaseProps { /** An optional header label to render above the input */ topLabel?: string; //** An option icon to be displayed to the left of the input box */ - icon?: Icon; + icon?: JSX.Element; /** - * 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; + * 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; } type ComponentProps = TextInputProps & - ColorProps & - SpaceProps & - TextStyleProps & - TypographyProps & - BorderProps & - LayoutProps & - FlexProps; + SpacingProps & + BorderProps & + ColorProps & + LayoutProps & + TypographyProps & + LayoutProps; -const InputContainer = styled(Container)``; - -const Input = styled.TextInput` - ${flex}; - ${borders}; - ${color}; - ${layout}; - ${space}; - ${textStyle}; - ${typography}; -`; +const Input = createRestyleComponent( + [spacing, border, color, layout, typography, layout], + ReactNativeTextInput +); // NOTE: for layout and dimensioning of TextInput, wrap it in a Container export const TextInput: FC = ({ @@ -61,42 +53,41 @@ export const TextInput: FC = ({ icon, accessibilityLabel, multiline, - borderColor, - borderRadius, + borderColor = 'backgroundSecondary', + borderRadius = 'md', ...inputProps }) => ( - + {topLabel ? ( - + {topLabel} ) : null} - + {icon ? icon : null} - + ); -InputContainer.defaultProps = { - flexDirection: 'row', - bg: colors.white, - borderWidth: 1, - borderColor: colors.black, - minHeight: 40, - paddingLeft: 10, - alignItems: 'center', -}; - TextInput.defaultProps = { - p: 2, + padding: 2, textAlignVertical: 'center', width: '100%', }; diff --git a/template/src/screens/IntroScreen/IntroScreen.tsx b/template/src/screens/IntroScreen/IntroScreen.tsx index d71a3fd1..1fcd8bbc 100644 --- a/template/src/screens/IntroScreen/IntroScreen.tsx +++ b/template/src/screens/IntroScreen/IntroScreen.tsx @@ -1,41 +1,28 @@ import React, { FC } from 'react'; -import { ImageBackground, StatusBar, StyleSheet } from 'react-native'; -import { NavigationScreenProps } from 'react-navigation'; -import styled from '@emotion/native'; import { Button } from '../../components/Button'; +import { Container } from '../../components/Container'; import { Screen } from '../../components/Screen'; import { Text } from '../../components/Text'; -import { Container } from '../../components/Container'; -import { colors } from '../../styles'; -import bgImage from '../../assets/images/background.png'; - -const BackgroundImage = styled(ImageBackground)` - ${StyleSheet.absoluteFillObject}; -`; /** * First screen a logged out user sees, welcoming them to the app. */ -export const IntroScreen: FC = ({ navigation }) => { +export const IntroScreen: FC<{ navigation: any }> = ({ navigation }) => { return ( - - - - - - Welcome to the intro Screen! - - + + ); }; diff --git a/template/src/screens/LoginScreen/LoginScreen.tsx b/template/src/screens/LoginScreen/LoginScreen.tsx index faffaa52..a0285eab 100644 --- a/template/src/screens/LoginScreen/LoginScreen.tsx +++ b/template/src/screens/LoginScreen/LoginScreen.tsx @@ -1,17 +1,10 @@ import React, { FC } from 'react'; -import { Alert, ImageBackground, StatusBar, StyleSheet } from 'react-native'; -import { NavigationScreenProps } from 'react-navigation'; -import styled from '@emotion/native'; +import { Alert } from 'react-native'; import { Login } from '../../components/Login'; import { Screen } from '../../components/Screen'; -import bgImage from '../../assets/images/background.png'; -import { colors } from '../../styles'; -const BackgroundImage = styled(ImageBackground)` - ${StyleSheet.absoluteFillObject}; -`; -export const LoginScreen: FC = ({ navigation }) => { +export const LoginScreen: FC<{ navigation: any }> = ({ navigation }) => { const loginClick = (): void => { navigation.navigate('Intro'); }; @@ -25,21 +18,12 @@ export const LoginScreen: FC = ({ navigation }) => { }; return ( - - + - - - - - + ); }; diff --git a/template/src/screens/RegistrationScreen/RegistrationScreen.tsx b/template/src/screens/RegistrationScreen/RegistrationScreen.tsx index 3b7d47d1..3f95ae86 100644 --- a/template/src/screens/RegistrationScreen/RegistrationScreen.tsx +++ b/template/src/screens/RegistrationScreen/RegistrationScreen.tsx @@ -1,22 +1,20 @@ +import styled from '@emotion/native'; import React, { FC } from 'react'; import { ImageBackground, StatusBar, StyleSheet } from 'react-native'; -import { NavigationScreenProps } from 'react-navigation'; -import styled from '@emotion/native'; +import bgImage from '../../assets/images/background.png'; import { Registration } from '../../components/Registration'; import { Screen } from '../../components/Screen'; -import bgImage from '../../assets/images/background.png'; -import { colors } from '../../styles'; - const BackgroundImage = styled(ImageBackground)` ${StyleSheet.absoluteFillObject}; `; -export const RegistrationScreen: FC = ({ navigation }) => { - const createClick = () => { +export const RegistrationScreen: FC<{ navigation: any }> = ({ navigation }) => { + const createClick = (): void => { navigation.navigate('Intro'); }; + return ( = ({ navigation }) => backgroundColor="rgba(0, 0, 0, 0.20)" barStyle="light-content" /> - - navigation.goBack()} /> + + navigation.goBack()} /> ); diff --git a/template/src/theme/breakpoints.ts b/template/src/theme/breakpoints.ts new file mode 100644 index 00000000..2d6a96f1 --- /dev/null +++ b/template/src/theme/breakpoints.ts @@ -0,0 +1,4 @@ +export const breakpoints = { + phone: 0, + tablet: 768, +}; diff --git a/template/src/theme/buttonVariants.ts b/template/src/theme/buttonVariants.ts new file mode 100644 index 00000000..c90ce99a --- /dev/null +++ b/template/src/theme/buttonVariants.ts @@ -0,0 +1,28 @@ +import { Dimensions } from 'react-native'; + +export const buttonVariants = { + defaults: { + backgroundColor: 'blue', + borderColor: 'transparent', + borderRadius: 'rounded', + borderWidth: 1, + flexDirection: 'row', + justifyContent: 'center', + maxWidth: 335, + paddingVertical: 3, + textStyle: { + color: 'white', + fontWeight: '600', + }, + width: Dimensions.get('window').width - 32, + }, + secondary: { + backgroundColor: 'backgroundSecondary', + borderColor: 'transparent', + textStyle: { + color: 'white', + }, + }, +}; + +export type ButtonVariants = keyof typeof buttonVariants; diff --git a/template/src/theme/colors.ts b/template/src/theme/colors.ts new file mode 100644 index 00000000..545ef4bd --- /dev/null +++ b/template/src/theme/colors.ts @@ -0,0 +1,48 @@ +import { useDarkMode } from 'react-native-dynamic'; + +enum Palette { + black = '#000000', + blackMedium = '#1D1D1D', + blackLight = '#303030', + + blueLight = '#257FA1', + blueDark = '#413E4E', + + grayLight = '#C4C4C4', + grayDark = '#303030', + + white = '#FFFFFF', + transparent = 'transparent', +} + +export const colors = { + black: Palette.black, + transparent: Palette.transparent, + blue: Palette.blueLight, + backgroundPrimary: Palette.white, + backgroundSecondary: Palette.grayLight, + textPrimary: Palette.blackMedium, + textSecondary: Palette.grayLight, + textInputBackground: Palette.white, + white: Palette.white, +}; + +export type ColorTypes = keyof typeof colors; + +export const darkModeColors: { + [key in keyof typeof colors]: Palette; +} = { + ...colors, + blue: Palette.blueDark, + backgroundPrimary: Palette.blackMedium, + backgroundSecondary: Palette.blackLight, + textPrimary: Palette.white, + textSecondary: Palette.blackMedium, + textInputBackground: Palette.blackLight, +}; + +export const useColor = (key: keyof typeof colors): string => { + const isDarkMode = useDarkMode(); + + return isDarkMode ? darkModeColors[key] : colors[key]; +}; diff --git a/template/src/theme/index.ts b/template/src/theme/index.ts new file mode 100644 index 00000000..71a3903e --- /dev/null +++ b/template/src/theme/index.ts @@ -0,0 +1,68 @@ +import { createTheme } from '@shopify/restyle'; +import { buttonVariants } from './buttonVariants'; +import { colors, darkModeColors } from './colors'; +import { textVariants } from './textVariants'; +import { spacing } from './spacing'; +import { breakpoints } from './breakpoints'; + +const theme = { + borderRadii: { + none: 0, + xs: 2, + sm: 4, + md: 8, + lg: 16, + rounded: 50, + }, + breakpoints, + buttonVariants, + colors, + shadowRadii: { + none: 0, + xs: 2, + sm: 4, + md: 8, + lg: 16, + }, + spacing, + textVariants, + navigation: { + colors: { + background: colors.backgroundPrimary, + border: colors.backgroundSecondary, + card: colors.backgroundSecondary, + notification: colors.backgroundSecondary, + primary: colors.white, + text: colors.white, + }, + dark: false, + }, +}; + +export const lightModeTheme = createTheme(theme); + +export const darkModeTheme = createTheme({ + ...theme, + colors: darkModeColors, + navigation: { + colors: { + background: colors.backgroundPrimary, + border: colors.backgroundSecondary, + card: colors.backgroundSecondary, + notification: colors.backgroundSecondary, + primary: colors.white, + text: colors.white, + }, + dark: true, + }, +}); + +export * from './buttonVariants'; +export * from './colors'; +export * from './textVariants'; +export * from './spacing'; +export * from './breakpoints'; + +export type Theme = typeof theme; + +export default theme; diff --git a/template/src/theme/spacing.ts b/template/src/theme/spacing.ts new file mode 100644 index 00000000..e673ef22 --- /dev/null +++ b/template/src/theme/spacing.ts @@ -0,0 +1,22 @@ +const MAX_KEY = 48; +const MULTIPLIER = 4; + +const generateSpacingIncrements = () => { + const spacingKeys = Array.from(Array(MAX_KEY).keys()); + + return spacingKeys.reduce( + (accum, key) => ({ + ...accum, + [key]: key * MULTIPLIER, + }), + {} + ); +}; + +export const spacing: { + [key in number | 'container' | 'px']: number; +} = { + ...generateSpacingIncrements(), + container: 8, + px: 1, +}; diff --git a/template/src/theme/textVariants.ts b/template/src/theme/textVariants.ts new file mode 100644 index 00000000..391ae327 --- /dev/null +++ b/template/src/theme/textVariants.ts @@ -0,0 +1,20 @@ +const baseTextStyles = { + fontFamily: 'Helvetica', + color: 'textPrimary', + fontSize: 16, + lineHeight: 24, +}; + +export const textVariants = { + defaults: baseTextStyles, + regular: {}, + bold: { + fontWeight: 700 + }, + semibold: { + fontWeight: 500 + }, + medium: { + fontWeight: 600 + } +}; diff --git a/template/src/utils/theme-utils/index.ts b/template/src/utils/theme-utils/index.ts new file mode 100644 index 00000000..47d8775d --- /dev/null +++ b/template/src/utils/theme-utils/index.ts @@ -0,0 +1 @@ +export * from './theme-utils'; \ No newline at end of file diff --git a/template/src/utils/theme-utils/theme-utils.ts b/template/src/utils/theme-utils/theme-utils.ts new file mode 100644 index 00000000..784f0062 --- /dev/null +++ b/template/src/utils/theme-utils/theme-utils.ts @@ -0,0 +1,56 @@ +import { ResponsiveValue, SafeVariants, useTheme } from '@shopify/restyle'; + +import { Dimensions } from 'react-native'; +import { Theme, breakpoints } from '../../theme'; + +/** + * Gets the variant value while taking into account responsive values + */ +const getVariantValue = >( + variant?: ResponsiveValue, Theme> +) => { + if (!variant) { + return 'defaults'; + } + + if (typeof variant === 'object') { + const sortedEntries = Object.entries(breakpoints).sort( + (a, b) => b[1] - a[1] + ) as [keyof typeof breakpoints, number][]; + + const width = Dimensions.get('window').width; + + for (let i = 0; i < sortedEntries.length; i++) { + const [key, value] = sortedEntries[i]; + + if (width > value) { + return variant[key] || 'defaults'; + } + } + } + + return variant; +}; + +/** + * Pull a key off of the variant styles + */ +export const useVariantValue = >( + themeKey: T, + key: string, + responsiveVariantValue?: ResponsiveValue< + keyof Omit, + Theme + > +) => { + const theme = useTheme(); + const variant = getVariantValue(responsiveVariantValue); + const variantObject = theme[themeKey]; + const defaultStyles = variantObject.defaults; + const variantStyles = variantObject[variant]; + + return { + ...defaultStyles[key], + ...variantStyles[key], + }; +}; From b7053cfd70b565cf8d6edcef12a8b0d7ed8d500e Mon Sep 17 00:00:00 2001 From: Dominic Sherman Date: Fri, 26 Feb 2021 09:12:10 -0800 Subject: [PATCH 2/8] Clean up registration scrteen --- .../src/components/Container/Container.tsx | 4 +- template/src/components/Login/Login.tsx | 16 +-- .../components/Registration/Registration.tsx | 109 +++++------------- .../src/components/TextInput/TextInput.tsx | 2 + .../RegistrationScreen/RegistrationScreen.tsx | 21 +--- template/src/theme/textVariants.ts | 9 +- 6 files changed, 46 insertions(+), 115 deletions(-) diff --git a/template/src/components/Container/Container.tsx b/template/src/components/Container/Container.tsx index 50a06b77..db137fca 100644 --- a/template/src/components/Container/Container.tsx +++ b/template/src/components/Container/Container.tsx @@ -13,8 +13,6 @@ export type ContainerProps = React.ComponentProps & BoxProps ( +export const CenteredContainer = (props: ContainerProps): React.ReactElement => ( ); diff --git a/template/src/components/Login/Login.tsx b/template/src/components/Login/Login.tsx index 79a9600c..d872217c 100644 --- a/template/src/components/Login/Login.tsx +++ b/template/src/components/Login/Login.tsx @@ -22,31 +22,23 @@ export const Login: FC = ({ loginPress, registrationPress, forgotPasswordPress, - ...props }) => { - const backgroundSecondary = useColor('textSecondary'); + const textSecondary = useColor('textSecondary'); return ( - + Welcome, please sign in. } + icon={} /> } + icon={} /> = ({ createPress, goBack, children, ...props }) => { - return ( - - - goBack()} fullWidth alignItems="flex-start"> - - - - - - - Let's create your{'\n'}account! - - } - marginTop={2} - borderRadius={5} - borderColor={colors.lightGray} - /> +export const Registration: FC = ({ createPress }) => { + const textSecondary = useColor('textSecondary'); - } - marginTop={2} - borderRadius={5} - borderColor={colors.lightGray} - /> - } - marginTop={2} - borderRadius={5} - borderColor={colors.lightGray} - /> - - ); }; diff --git a/template/src/components/TextInput/TextInput.tsx b/template/src/components/TextInput/TextInput.tsx index eeabe45e..549a971b 100644 --- a/template/src/components/TextInput/TextInput.tsx +++ b/template/src/components/TextInput/TextInput.tsx @@ -72,6 +72,7 @@ export const TextInput: FC = ({ flexDirection={'row'} minHeight={40} paddingLeft={3} + width={'100%'} > {icon ? icon : null} = ({ underlineColorAndroid={colors.transparent} multiline={multiline} accessibilityLabel={accessibilityLabel} + width={'100%'} {...inputProps} /> diff --git a/template/src/screens/RegistrationScreen/RegistrationScreen.tsx b/template/src/screens/RegistrationScreen/RegistrationScreen.tsx index 3f95ae86..a0d43151 100644 --- a/template/src/screens/RegistrationScreen/RegistrationScreen.tsx +++ b/template/src/screens/RegistrationScreen/RegistrationScreen.tsx @@ -1,31 +1,16 @@ -import styled from '@emotion/native'; import React, { FC } from 'react'; -import { ImageBackground, StatusBar, StyleSheet } from 'react-native'; -import bgImage from '../../assets/images/background.png'; import { Registration } from '../../components/Registration'; import { Screen } from '../../components/Screen'; -const BackgroundImage = styled(ImageBackground)` - ${StyleSheet.absoluteFillObject}; -`; - export const RegistrationScreen: FC<{ navigation: any }> = ({ navigation }) => { const createClick = (): void => { navigation.navigate('Intro'); }; return ( - - - - navigation.goBack()} /> - - + + + ); }; diff --git a/template/src/theme/textVariants.ts b/template/src/theme/textVariants.ts index 391ae327..ea97f487 100644 --- a/template/src/theme/textVariants.ts +++ b/template/src/theme/textVariants.ts @@ -2,19 +2,18 @@ const baseTextStyles = { fontFamily: 'Helvetica', color: 'textPrimary', fontSize: 16, - lineHeight: 24, }; export const textVariants = { defaults: baseTextStyles, regular: {}, bold: { - fontWeight: 700 + fontWeight: 700, }, semibold: { - fontWeight: 500 + fontWeight: 500, }, medium: { - fontWeight: 600 - } + fontWeight: 600, + }, }; From 7c91286afc353f02ed5395dbd3f9e17f816cdb3f Mon Sep 17 00:00:00 2001 From: Dominic Sherman Date: Fri, 26 Feb 2021 09:53:10 -0800 Subject: [PATCH 3/8] Fix up all the storybook things --- template/.eslintrc.js | 3 +- template/package.json | 1 + .../src/components/Button/Button.stories.tsx | 4 +- template/src/components/Button/Button.tsx | 36 +++------- template/src/components/Button/index.ts | 2 +- .../src/components/Login/Login.stories.tsx | 20 ++---- template/src/components/Login/index.ts | 2 +- .../Registration/Registration.stories.tsx | 2 +- .../components/Registration/Registration.tsx | 10 +-- template/src/components/Registration/index.ts | 2 +- .../src/components/Screen/Screen.stories.tsx | 9 ++- template/src/components/Screen/Screen.tsx | 2 +- template/src/components/Text/Text.stories.tsx | 5 +- .../TextInput/TextInput.stories.tsx | 4 +- .../src/components/TextInput/TextInput.tsx | 2 - template/src/components/TextInput/index.ts | 2 +- .../Touchable/Touchable.stories.tsx | 7 +- .../src/components/Touchable/Touchable.tsx | 66 +++++-------------- template/src/navigation/GuestNav.tsx | 3 - template/src/navigation/MainNav.tsx | 24 ++++--- template/src/navigation/OnboardingNav.tsx | 22 ------- template/src/navigation/createFakeScreen.tsx | 26 +++++--- .../RegistrationScreen/RegistrationScreen.tsx | 2 +- template/src/styles/margins.ts | 2 +- template/src/theme/textVariants.ts | 6 +- template/src/types/AccessibilityRole.ts | 2 +- template/src/utils/theme-utils/index.ts | 2 +- template/src/utils/theme-utils/theme-utils.ts | 12 ++-- template/storybook/stories/index.ts | 1 + template/storybook/storybook.js | 16 ++--- 30 files changed, 115 insertions(+), 182 deletions(-) delete mode 100644 template/src/navigation/OnboardingNav.tsx diff --git a/template/.eslintrc.js b/template/.eslintrc.js index adfb3fe0..45edb5c9 100644 --- a/template/.eslintrc.js +++ b/template/.eslintrc.js @@ -2,6 +2,7 @@ module.exports = { root: true, extends: ['plugin:echobind/react-native'], rules: { - 'import/namespace': 0 + 'import/namespace': 0, + '@typescript-eslint/explicit-function-return-type': 0 } }; diff --git a/template/package.json b/template/package.json index 390b5b48..4476ee2f 100644 --- a/template/package.json +++ b/template/package.json @@ -110,6 +110,7 @@ }, "lint-staged": { "**/*.{ts,tsx}": [ + "yarn lint --fix", "git add" ] } diff --git a/template/src/components/Button/Button.stories.tsx b/template/src/components/Button/Button.stories.tsx index dda98c9f..a7c228fb 100644 --- a/template/src/components/Button/Button.stories.tsx +++ b/template/src/components/Button/Button.stories.tsx @@ -3,4 +3,6 @@ import React from 'react'; import { Button } from './Button'; -storiesOf('components/Button', module).add('Default', () => +)); diff --git a/template/src/components/Button/Button.tsx b/template/src/components/Button/Button.tsx index 19201e9f..9b7eea2b 100644 --- a/template/src/components/Button/Button.tsx +++ b/template/src/components/Button/Button.tsx @@ -1,47 +1,27 @@ -import { - BackgroundColorProps, - createRestyleComponent, - createVariant, - layout, - LayoutProps, - spacing, - SpacingProps, - VariantProps -} from '@shopify/restyle'; -import React, { ReactNode } from 'react'; -import { View, ViewProps, TouchableOpacity, TouchableOpacityProps } from 'react-native'; +import { createRestyleComponent, createVariant, VariantProps } from '@shopify/restyle'; +import React from 'react'; import { Theme } from '../../theme'; import { useVariantValue } from '../../utils/theme-utils/theme-utils'; import { Text } from '../Text'; +import { Touchable, TouchableProps } from '../Touchable'; -type RestyleProps = TouchableOpacityProps & - VariantProps & - LayoutProps & - SpacingProps; - -interface ButtonProps extends RestyleProps { - children: ReactNode; -} +type ButtonProps = TouchableProps & VariantProps; const VariantRestyleComponent = createVariant({ themeKey: 'buttonVariants', }); const ButtonWrapper = createRestyleComponent( - [layout, spacing, VariantRestyleComponent], - TouchableOpacity + [VariantRestyleComponent], + Touchable ); /** - * A button with a simple press animation + * A simple button */ export const Button = ({ children, ...props }: ButtonProps) => { - const textStyle = useVariantValue( - 'buttonVariants', - 'textStyle', - props.variant - ); + const textStyle = useVariantValue('buttonVariants', 'textStyle', props.variant); return ( diff --git a/template/src/components/Button/index.ts b/template/src/components/Button/index.ts index 3d1f3cc3..8b166a86 100644 --- a/template/src/components/Button/index.ts +++ b/template/src/components/Button/index.ts @@ -1 +1 @@ -export * from './Button'; \ No newline at end of file +export * from './Button'; diff --git a/template/src/components/Login/Login.stories.tsx b/template/src/components/Login/Login.stories.tsx index 62212fa8..7aa61f77 100644 --- a/template/src/components/Login/Login.stories.tsx +++ b/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 => {storyFn()}; - -storiesOf('components/Login', module) - .addDecorator(ScreenDecorator) - .add('Default', () => ( - console.log('login pressed')} - forgotPasswordPress={() => console.log('forgot password pressed')} - registrationPress={() => console.log('registration pressed')} - /> - )); +storiesOf('components/Login', module).add('Default', () => ( + console.log('Login pressed!')} + forgotPasswordPress={() => console.log('Forgot password pressed!')} + registrationPress={() => console.log('Registration pressed!')} + /> +)); diff --git a/template/src/components/Login/index.ts b/template/src/components/Login/index.ts index f1d32a23..a10c3a83 100644 --- a/template/src/components/Login/index.ts +++ b/template/src/components/Login/index.ts @@ -1 +1 @@ -export * from './Login'; \ No newline at end of file +export * from './Login'; diff --git a/template/src/components/Registration/Registration.stories.tsx b/template/src/components/Registration/Registration.stories.tsx index acc51dc5..c5fba4ac 100644 --- a/template/src/components/Registration/Registration.stories.tsx +++ b/template/src/components/Registration/Registration.stories.tsx @@ -4,5 +4,5 @@ import React from 'react'; import { Registration } from './Registration'; storiesOf('components/Registration', module).add('Default', () => ( - + console.log('Create account pressed!')} /> )); diff --git a/template/src/components/Registration/Registration.tsx b/template/src/components/Registration/Registration.tsx index e169d70d..bfa5b087 100644 --- a/template/src/components/Registration/Registration.tsx +++ b/template/src/components/Registration/Registration.tsx @@ -1,6 +1,5 @@ import React, { FC } from 'react'; import { Icon } from 'react-native-elements'; -import { BorderProps, ColorProps, FlexProps, SpaceProps } from 'styled-system'; import { useColor } from '../../theme'; import { Button } from '../Button'; @@ -11,12 +10,9 @@ import { TextInput } from '../TextInput'; interface RegistrationProps { /** the callbacks to be invoked onPress */ createPress: () => void; - goBack: () => void; } -type ComponentProps = RegistrationProps & FlexProps & SpaceProps & BorderProps & ColorProps; - -export const Registration: FC = ({ createPress }) => { +export const Registration: FC = ({ createPress }) => { const textSecondary = useColor('textSecondary'); return ( @@ -47,7 +43,3 @@ export const Registration: FC = ({ createPress }) => { ); }; - -Registration.defaultProps = { - createPress: console.log('implement event'), -}; diff --git a/template/src/components/Registration/index.ts b/template/src/components/Registration/index.ts index 19562303..7ba6f602 100644 --- a/template/src/components/Registration/index.ts +++ b/template/src/components/Registration/index.ts @@ -1 +1 @@ -export * from './Registration'; \ No newline at end of file +export * from './Registration'; diff --git a/template/src/components/Screen/Screen.stories.tsx b/template/src/components/Screen/Screen.stories.tsx index a0b6fcc0..11d35588 100644 --- a/template/src/components/Screen/Screen.stories.tsx +++ b/template/src/components/Screen/Screen.stories.tsx @@ -1,8 +1,11 @@ import { storiesOf } from '@storybook/react-native'; import React from 'react'; +import { Text } from '../Text'; import { Screen } from './Screen'; -storiesOf('components/Screen', module) - .add('Default', () => ) - .add('with backgroundColor', () => ); +storiesOf('components/Screen', module).add('Default', () => ( + + {'Content wrapped in a screen'} + +)); diff --git a/template/src/components/Screen/Screen.tsx b/template/src/components/Screen/Screen.tsx index 06a587ba..b4befefe 100644 --- a/template/src/components/Screen/Screen.tsx +++ b/template/src/components/Screen/Screen.tsx @@ -26,7 +26,7 @@ export const Screen: FC = ({ return ( <> - + ) - .add('with text prop', () => ) - .add('with child prop', () => Hello there); +storiesOf('components/Text', module).add('Default', () => Hello world!); diff --git a/template/src/components/TextInput/TextInput.stories.tsx b/template/src/components/TextInput/TextInput.stories.tsx index 0bb17c3c..01fce095 100644 --- a/template/src/components/TextInput/TextInput.stories.tsx +++ b/template/src/components/TextInput/TextInput.stories.tsx @@ -3,4 +3,6 @@ import React from 'react'; import { TextInput } from './TextInput'; -storiesOf('components/TextInput', module).add('Default', () => ); +storiesOf('components/TextInput', module).add('Default', () => ( + +)); diff --git a/template/src/components/TextInput/TextInput.tsx b/template/src/components/TextInput/TextInput.tsx index 549a971b..eeabe45e 100644 --- a/template/src/components/TextInput/TextInput.tsx +++ b/template/src/components/TextInput/TextInput.tsx @@ -72,7 +72,6 @@ export const TextInput: FC = ({ flexDirection={'row'} minHeight={40} paddingLeft={3} - width={'100%'} > {icon ? icon : null} = ({ underlineColorAndroid={colors.transparent} multiline={multiline} accessibilityLabel={accessibilityLabel} - width={'100%'} {...inputProps} /> diff --git a/template/src/components/TextInput/index.ts b/template/src/components/TextInput/index.ts index faecfaa0..a7fcf6f3 100644 --- a/template/src/components/TextInput/index.ts +++ b/template/src/components/TextInput/index.ts @@ -1 +1 @@ -export * from './TextInput'; \ No newline at end of file +export * from './TextInput'; diff --git a/template/src/components/Touchable/Touchable.stories.tsx b/template/src/components/Touchable/Touchable.stories.tsx index cf08cd4d..6a4122aa 100644 --- a/template/src/components/Touchable/Touchable.stories.tsx +++ b/template/src/components/Touchable/Touchable.stories.tsx @@ -1,6 +1,11 @@ import { storiesOf } from '@storybook/react-native'; import React from 'react'; +import { Text } from '../Text'; import { Touchable } from './Touchable'; -storiesOf('components/Touchable', module).add('Default', () => ); +storiesOf('components/Touchable', module).add('Default', () => ( + console.log('Touchable pressed!')}> + {'Touchable'} + +)); diff --git a/template/src/components/Touchable/Touchable.tsx b/template/src/components/Touchable/Touchable.tsx index ce54c402..e39a299a 100644 --- a/template/src/components/Touchable/Touchable.tsx +++ b/template/src/components/Touchable/Touchable.tsx @@ -1,55 +1,25 @@ -import styled from '@emotion/native'; import { - color, - borders, - space, + createRestyleComponent, layout, - flexbox, - BorderProps, - ColorProps, - SpaceProps, - FlexProps, -} from 'styled-system'; + LayoutProps, + spacing, + SpacingProps, +} from '@shopify/restyle'; +import { ReactNode } from 'react'; +import { TouchableOpacity, TouchableOpacityProps } from 'react-native'; -interface TouchableProps { - /** applies "flex: 1" style **/ - fill?: boolean; - /** applies "width: 100%" style **/ - fullWidth?: boolean; - /** centers content both vertically and horizontally **/ - centerContent?: boolean; -} +import { Theme } from '../../theme'; + +type RestyleProps = TouchableOpacityProps & LayoutProps & SpacingProps; -type ComponentProps = TouchableProps & BorderProps & ColorProps & FlexProps & SpaceProps; +export interface TouchableProps extends RestyleProps { + children: ReactNode; +} /** - * This is our primitive TouchableOpacity component with styled-system props applied + * This is our primitive TouchableOpacity component with restyle props applied */ -export const Touchable = styled.TouchableOpacity` - ${space}; - ${color}; - ${borders}; - ${layout}; - ${flexbox}; - - ${props => - props.fill && - ` - flex: 1; - `} - - ${props => - props.fullWidth && - ` - width: 100%; - `} - - ${props => - props.centerContent && - ` - justifyContent: center; - alignItems: center; - `} -`; - -Touchable.defaultProps = {}; +export const Touchable = createRestyleComponent( + [layout, spacing], + TouchableOpacity +); diff --git a/template/src/navigation/GuestNav.tsx b/template/src/navigation/GuestNav.tsx index c54a5c35..33ad3ae3 100644 --- a/template/src/navigation/GuestNav.tsx +++ b/template/src/navigation/GuestNav.tsx @@ -4,13 +4,11 @@ import { createStackNavigator } from '@react-navigation/stack'; import { IntroScreen } from '../screens/IntroScreen'; import { LoginScreen } from '../screens/LoginScreen'; import { RegistrationScreen } from '../screens/RegistrationScreen'; -import { OnboardingNav } from './OnboardingNav'; const Stack = createStackNavigator(); /** * Guest nav typically consists of screens where the user is logged out: - * Onboarding * Registration * Login * Forgot Password @@ -19,7 +17,6 @@ export const GuestNav = (): ReactElement => { return ( - diff --git a/template/src/navigation/MainNav.tsx b/template/src/navigation/MainNav.tsx index 46c7c4c4..539ac69a 100644 --- a/template/src/navigation/MainNav.tsx +++ b/template/src/navigation/MainNav.tsx @@ -1,31 +1,35 @@ -import React, { ReactElement } from 'react'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import React, { ReactElement } from 'react'; import { createFakeScreen } from '../navigation/createFakeScreen'; -import { colors } from '../styles'; +import { useColor } from '../theme'; const Tab = createBottomTabNavigator(); -const TabScreen1 = createFakeScreen('Tab Screen 1', colors.white); -const TabScreen2 = createFakeScreen('Tab Screen 2', colors.gray); -const TabScreen3 = createFakeScreen('Tab Screen 3', colors.orange); +const TabScreen1 = createFakeScreen('Tab Screen 1', 'backgroundPrimary'); +const TabScreen2 = createFakeScreen('Tab Screen 2', 'backgroundSecondary'); +const TabScreen3 = createFakeScreen('Tab Screen 3', 'blue'); /** * Main Nav is main interface of the app, defaults to tabs. */ export const MainNav = (): ReactElement => { + const textColor = useColor('textPrimary'); + const inactiveTintColor = useColor('textSecondary'); + const backgroundColor = useColor('backgroundSecondary'); + return ( { - return ( - - - - - ); -}; diff --git a/template/src/navigation/createFakeScreen.tsx b/template/src/navigation/createFakeScreen.tsx index df8b4146..b8747ed1 100644 --- a/template/src/navigation/createFakeScreen.tsx +++ b/template/src/navigation/createFakeScreen.tsx @@ -1,13 +1,23 @@ import React, { ReactElement } from 'react'; -import { Screen } from '../components/Screen'; import { Container } from '../components/Container'; +import { Screen } from '../components/Screen'; import { Text } from '../components/Text'; -export const createFakeScreen = (screenName, backgroundColor) => (): ReactElement => ( - - - {screenName} - - -); +export const createFakeScreen = (screenName, backgroundColor) => (): ReactElement => { + return ( + + + + {screenName} + + + + ); +}; diff --git a/template/src/screens/RegistrationScreen/RegistrationScreen.tsx b/template/src/screens/RegistrationScreen/RegistrationScreen.tsx index a0d43151..949e0c6c 100644 --- a/template/src/screens/RegistrationScreen/RegistrationScreen.tsx +++ b/template/src/screens/RegistrationScreen/RegistrationScreen.tsx @@ -10,7 +10,7 @@ export const RegistrationScreen: FC<{ navigation: any }> = ({ navigation }) => { return ( - + ); }; diff --git a/template/src/styles/margins.ts b/template/src/styles/margins.ts index 54e0f501..38126acc 100644 --- a/template/src/styles/margins.ts +++ b/template/src/styles/margins.ts @@ -1,5 +1,5 @@ export const margins = { - screenMargin: 20 + screenMargin: 20, }; export const space = [0, 4, 8, 16, 24, 32, 64, 128]; diff --git a/template/src/theme/textVariants.ts b/template/src/theme/textVariants.ts index ea97f487..a3d7f75d 100644 --- a/template/src/theme/textVariants.ts +++ b/template/src/theme/textVariants.ts @@ -8,12 +8,12 @@ export const textVariants = { defaults: baseTextStyles, regular: {}, bold: { - fontWeight: 700, + fontWeight: '700', }, semibold: { - fontWeight: 500, + fontWeight: '500', }, medium: { - fontWeight: 600, + fontWeight: '600', }, }; diff --git a/template/src/types/AccessibilityRole.ts b/template/src/types/AccessibilityRole.ts index fffae482..b2a84d23 100644 --- a/template/src/types/AccessibilityRole.ts +++ b/template/src/types/AccessibilityRole.ts @@ -1,4 +1,4 @@ -/** +/** * Accessbility Role communicates the purpose of a component to the user of an assistive technology, * This tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on. * values pulled from official react native docs diff --git a/template/src/utils/theme-utils/index.ts b/template/src/utils/theme-utils/index.ts index 47d8775d..0c180a5b 100644 --- a/template/src/utils/theme-utils/index.ts +++ b/template/src/utils/theme-utils/index.ts @@ -1 +1 @@ -export * from './theme-utils'; \ No newline at end of file +export * from './theme-utils'; diff --git a/template/src/utils/theme-utils/theme-utils.ts b/template/src/utils/theme-utils/theme-utils.ts index 784f0062..57d1289e 100644 --- a/template/src/utils/theme-utils/theme-utils.ts +++ b/template/src/utils/theme-utils/theme-utils.ts @@ -14,9 +14,10 @@ const getVariantValue = >( } if (typeof variant === 'object') { - const sortedEntries = Object.entries(breakpoints).sort( - (a, b) => b[1] - a[1] - ) as [keyof typeof breakpoints, number][]; + const sortedEntries = Object.entries(breakpoints).sort((a, b) => b[1] - a[1]) as [ + keyof typeof breakpoints, + number + ][]; const width = Dimensions.get('window').width; @@ -38,10 +39,7 @@ const getVariantValue = >( export const useVariantValue = >( themeKey: T, key: string, - responsiveVariantValue?: ResponsiveValue< - keyof Omit, - Theme - > + responsiveVariantValue?: ResponsiveValue, Theme> ) => { const theme = useTheme(); const variant = getVariantValue(responsiveVariantValue); diff --git a/template/storybook/stories/index.ts b/template/storybook/stories/index.ts index 8143a9fb..59361d1c 100644 --- a/template/storybook/stories/index.ts +++ b/template/storybook/stories/index.ts @@ -5,3 +5,4 @@ import '../../src/components/Text/Text.stories'; import '../../src/components/TextInput/TextInput.stories'; import '../../src/components/Touchable/Touchable.stories'; import '../../src/components/Login/Login.stories'; +import '../../src/components/Registration/Registration.stories'; diff --git a/template/storybook/storybook.js b/template/storybook/storybook.js index c6b9be91..b7687c0a 100644 --- a/template/storybook/storybook.js +++ b/template/storybook/storybook.js @@ -1,19 +1,19 @@ +// addons! +import './rn-addons'; + +import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds'; +import { addDecorator, addParameters, configure, getStorybookUI } from '@storybook/react-native'; import React from 'react'; import { AppRegistry } from 'react-native'; -import { addParameters, getStorybookUI, configure, addDecorator } from '@storybook/react-native'; -import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds'; import { name as appName } from '../app.json'; -import { Container } from '../src/components/Container'; - -// addons! -import './rn-addons'; +import { Screen } from '../src/components/Screen'; // adding a centered-view layout! const CenterView = ({ children }) => ( - + {children} - + ); // global decorators! From 56c123bacf39a937e7d4d54119e70213bebabd28 Mon Sep 17 00:00:00 2001 From: Dominic Sherman Date: Fri, 26 Feb 2021 09:55:30 -0800 Subject: [PATCH 4/8] Fix up login page --- template/src/components/Login/Login.tsx | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/template/src/components/Login/Login.tsx b/template/src/components/Login/Login.tsx index d872217c..ababa174 100644 --- a/template/src/components/Login/Login.tsx +++ b/template/src/components/Login/Login.tsx @@ -1,6 +1,5 @@ import React, { FC } from 'react'; import { Icon } from 'react-native-elements'; -import { BorderProps, ColorProps, FlexProps, SpaceProps } from 'styled-system'; import { useColor } from '../../theme'; import { Button } from '../Button'; @@ -16,13 +15,7 @@ interface LoginProps { forgotPasswordPress: () => void; } -type ComponentProps = LoginProps & FlexProps & SpaceProps & BorderProps & ColorProps; - -export const Login: FC = ({ - loginPress, - registrationPress, - forgotPasswordPress, -}) => { +export const Login: FC = ({ loginPress, registrationPress, forgotPasswordPress }) => { const textSecondary = useColor('textSecondary'); return ( @@ -45,10 +38,8 @@ export const Login: FC = ({ onPress={(): void => { forgotPasswordPress(); }} - fullWidth alignItems={'flex-end'} accessibilityLabel="Forgot Password Button" - accessbilityRole="button" > Forgot Password? @@ -94,9 +85,3 @@ export const Login: FC = ({ ); }; - -Login.defaultProps = { - loginPress: console.log('implement login press'), - forgotPasswordPress: console.log('implement forgot password press'), - registrationPress: console.log('implement registration press'), -}; From b4b78c32d72c87a5d957198bfe0e97c1df05d91f Mon Sep 17 00:00:00 2001 From: Dominic Sherman Date: Fri, 26 Feb 2021 10:06:21 -0800 Subject: [PATCH 5/8] Fix TS and add pr verify --- template/.github/pr-verify.yml | 23 +++++++++++++++++++++++ template/package.json | 5 +++-- template/src/utils/trimText/index.ts | 2 +- 3 files changed, 27 insertions(+), 3 deletions(-) create mode 100644 template/.github/pr-verify.yml diff --git a/template/.github/pr-verify.yml b/template/.github/pr-verify.yml new file mode 100644 index 00000000..a1045605 --- /dev/null +++ b/template/.github/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 diff --git a/template/package.json b/template/package.json index 4476ee2f..6dafd475 100644 --- a/template/package.json +++ b/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": "", diff --git a/template/src/utils/trimText/index.ts b/template/src/utils/trimText/index.ts index 9b1f4756..5b707bd6 100644 --- a/template/src/utils/trimText/index.ts +++ b/template/src/utils/trimText/index.ts @@ -1 +1 @@ -export { default } from './trimText'; +export * from './trimText'; From cd721c64ce02a9113c88f9de9c9633d6f36c3e62 Mon Sep 17 00:00:00 2001 From: Dominic Sherman Date: Fri, 26 Feb 2021 10:55:01 -0800 Subject: [PATCH 6/8] Add PR verify for template repo --- .github/pr-verify.yml | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 .github/pr-verify.yml diff --git a/.github/pr-verify.yml b/.github/pr-verify.yml new file mode 100644 index 00000000..6b1e7afa --- /dev/null +++ b/.github/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 From adee6f041a8711251d66762b72094915ba4ce3ba Mon Sep 17 00:00:00 2001 From: Dominic Sherman Date: Fri, 26 Feb 2021 10:56:24 -0800 Subject: [PATCH 7/8] Move into workflows --- .github/{ => workflows}/pr-verify.yml | 0 template/.github/{ => workflows}/pr-verify.yml | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename .github/{ => workflows}/pr-verify.yml (100%) rename template/.github/{ => workflows}/pr-verify.yml (100%) diff --git a/.github/pr-verify.yml b/.github/workflows/pr-verify.yml similarity index 100% rename from .github/pr-verify.yml rename to .github/workflows/pr-verify.yml diff --git a/template/.github/pr-verify.yml b/template/.github/workflows/pr-verify.yml similarity index 100% rename from template/.github/pr-verify.yml rename to template/.github/workflows/pr-verify.yml From 67604ea34972d291d0b4cc1ab784833462c77a58 Mon Sep 17 00:00:00 2001 From: Dominic Sherman Date: Fri, 26 Feb 2021 11:13:34 -0800 Subject: [PATCH 8/8] Color updates --- template/src/components/Screen/Screen.tsx | 2 +- template/src/navigation/MainNav.tsx | 2 +- template/src/theme/colors.ts | 2 ++ 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/template/src/components/Screen/Screen.tsx b/template/src/components/Screen/Screen.tsx index b4befefe..45ca5585 100644 --- a/template/src/components/Screen/Screen.tsx +++ b/template/src/components/Screen/Screen.tsx @@ -25,7 +25,7 @@ export const Screen: FC = ({ return ( <> - + { const textColor = useColor('textPrimary'); const inactiveTintColor = useColor('textSecondary'); - const backgroundColor = useColor('backgroundSecondary'); + const backgroundColor = useColor('backgroundTertiary'); return (