feat: added new plop template

Author: hmarques98

template/plop-templates/CommonScreen.js.hbs

@@ -0,0 +1,44 @@
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/core';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { Box } from 'components/molecules/Box';
+import { Button } from 'components/molecules/Button';
+import { Typography } from 'components/molecules/Typography';
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { CommonStackParamList } from 'screens';
+import { theme } from 'theme';
+
+type {{pascalCase name}}ScreenNavigationProp = StackNavigationProp<
+  CommonStackParamList,
+  '{{pascalCase name}}'
+>;
+
+type {{pascalCase name}}ScreenRouteProp = RouteProp<CommonStackParamList, '{{pascalCase name}}'>;
+
+const {{pascalCase name}}Screen = () => {
+  const navigation = useNavigation<{{pascalCase name}}ScreenNavigationProp>();
+  const route = useRoute<{{pascalCase name}}ScreenRouteProp>();
+
+  return (
+    <SafeAreaView style={styles.safeArea}>
+      <Box alignItems="center" justifyContent="center" flex={1}>
+        <Typography>{{pascalCase name}}</Typography>
+        <Button onPress={() => {
+          navigation.goBack();
+          }}>
+          <Typography>Back {{pascalCase name}}</Typography>
+        </Button>
+      </Box>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: theme.colors.backgroundColor,
+  },
+});
+
+export default {{pascalCase name}}Screen;

template/src/components/molecules/Button/Button.tsx

@@ -1,6 +1,4 @@
-import { WINDOW_DEVICE_HEIGHT, WINDOW_DEVICE_WIDTH } from '@utils/constants';
 import React from 'react';
-import { Dimensions } from 'react-native';
 import styled, { DefaultTheme } from 'styled-components/native';
 import {
   LayoutProps,
@@ -21,8 +19,6 @@ import {
   PositionProps,
   ButtonStyleProps,
   buttonStyle,
-  PaddingProps,
-  padding,
 } from 'styled-system';
 import { theme } from 'theme';
 
@@ -31,13 +27,11 @@ type VariantTypes = 'outlined' | 'rounded' | 'box' | 'disabled';
 interface ButtonProps
   extends LayoutProps,
     ColorProps<typeof theme>,
-    SpaceProps,
-    BordersProps,
-    FlexProps,
+    SpaceProps<typeof theme>,
+    BordersProps<typeof theme>,
     PositionProps,
-    FlexboxProps,
-    ButtonStyleProps<typeof theme>,
-    PaddingProps {
+    FlexboxProps<typeof theme>,
+    ButtonStyleProps {
   children?: React.ReactNode;
   variant?: VariantTypes;
 }
@@ -53,11 +47,13 @@ const variantStyle = (theme: DefaultTheme, disabled: boolean) => {
       },
       outlined: {
         borderColor: 'primary',
-        borderWidth: 1,
+        borderWidth: 'sm',
         borderStyle: 'solid',
       },
       rounded: {
-        borderRadius: 8,
+        borderRadius: 'sm',
+        padding: 'md',
+        backgroundColor: 'primary',
       },
       disabled: {
         backgroundColor: 'black',
@@ -67,25 +63,13 @@ const variantStyle = (theme: DefaultTheme, disabled: boolean) => {
 };
 
 const Button = styled.TouchableOpacity<ButtonProps>`
-  ${compose(
-    color,
-    layout,
-    space,
-    borders,
-    flex,
-    position,
-    flexbox,
-    buttonStyle,
-    padding,
-  )}
-  /* background-color:${({ theme, disabled }) =>
-    disabled ? theme.colors.black : theme.colors.primary} */
+  ${compose(color, layout, space, borders, position, flexbox, buttonStyle)}
+
   ${({ theme, disabled }) => variantStyle(theme, !!disabled)}
 `;
 Button.defaultProps = {
   justifyContent: 'center',
   alignItems: 'center',
-  width: '100%',
   height: 48,
 };
 

template/src/components/molecules/Typography/Typography.tsx

@@ -1,5 +1,3 @@
-import { log } from '@utils/console';
-import React from 'react';
 import { Text } from 'react-native';
 import styled, { DefaultTheme } from 'styled-components/native';
 import {
@@ -15,8 +13,6 @@ import {
   typography,
   color,
   ColorProps,
-  FontFamilyProps,
-  fontFamily,
 } from 'styled-system';
 import { theme } from 'theme';