Button Component

GenerateNU · May 27, 2024 · acc2917 · acc2917
1 parent 6efa5c8
commit acc2917
Show file tree

Hide file tree

Showing 9 changed files with 193 additions and 40 deletions.
diff --git a/frontend/mobile/app/(app)/(tabs)/index.tsx b/frontend/mobile/app/(app)/(tabs)/index.tsx
@@ -1,9 +1,12 @@
+import { Button } from '@/app/(design-system)/Button/Button';
 import { StyleSheet, Text, View } from 'react-native';
 
 const HomePage = () => {
     return (
         <View style={styles.container}>
-            <Text style={styles.title}>Home</Text>
+            <Text style={styles.title}>
+                Home Page
+            </Text>
         </View>
     );
 };
@@ -12,11 +15,11 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         alignItems: 'center',
-        justifyContent: 'center'
+        justifyContent: 'center',
     },
     title: {
         fontSize: 20,
-        fontWeight: 'bold'
+        fontWeight: 'bold',
     },
     separator: {
         marginVertical: 30,

diff --git a/frontend/mobile/app/(design-system)/Box.tsx b/frontend/mobile/app/(design-system)/Box.tsx
@@ -1,9 +1,9 @@
 import React, { PropsWithChildren } from 'react';
-import { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils';
 
 import { BoxProps, createBox } from '@shopify/restyle';
 
 import { Theme } from './theme';
+import { ViewProps } from 'react-native';
 
 type Props = ViewProps & PropsWithChildren & BoxProps<Theme>;
 

diff --git a/frontend/mobile/app/(design-system)/Button/Button.tsx b/frontend/mobile/app/(design-system)/Button/Button.tsx
@@ -0,0 +1,35 @@
+import { BoxProps, VariantProps, createBox, createRestyleComponent, createVariant } from "@shopify/restyle";
+import { Theme } from "../theme";
+import { GestureResponderEvent, TouchableOpacity } from "react-native";
+import { Text } from "../Text/Text";
+import { defaultColor, textColorVariants } from "../Colors";
+
+const buttonVariant = createVariant<Theme, 'buttonVariants'>({
+    themeKey: 'buttonVariants'
+});
+
+type ButtonProps = VariantProps<Theme, 'buttonVariants'> &
+    BoxProps<Theme> & {
+        children?: React.ReactNode;
+        onPress?: (event: GestureResponderEvent) => void;
+        disabled?: boolean;
+        icon?: string;
+    };
+
+const ButtonBase = createRestyleComponent<ButtonProps, Theme>([buttonVariant], TouchableOpacity);
+
+export const Button: React.FC<ButtonProps> = ({ variant, children, onPress, disabled, icon, ...rest }) => {
+    return (
+        <ButtonBase 
+            variant={disabled ? 'disabled' : variant}
+            onPress={disabled ? undefined : onPress}
+            disabled={disabled}
+            {...rest}
+        >
+
+            <Text color={textColorVariants[variant ?? defaultColor]}>
+                {children}
+            </Text>
+        </ButtonBase>
+    )
+}
diff --git a/frontend/mobile/app/(design-system)/Button/ButtonVariants.ts b/frontend/mobile/app/(design-system)/Button/ButtonVariants.ts
@@ -0,0 +1,15 @@
+import { BackgroundColorVariants, defaultColor } from "../Colors";
+
+export const ButtonVariants = {
+    defaults: {
+        flex: '1',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 'l',
+        paddingVertical: 'm',
+        backgroundColor: defaultColor,
+        borderRadius: 8,
+        minWidth: '100%'
+    },
+    ...BackgroundColorVariants
+};
diff --git a/frontend/mobile/app/(design-system)/Colors.ts b/frontend/mobile/app/(design-system)/Colors.ts
@@ -1,3 +1,5 @@
+import { backgroundColor } from "@shopify/restyle";
+
 // TODO: We will have to change these
 export const Colors = {
     darkBlue: '#0C3354',
@@ -8,5 +10,64 @@ export const Colors = {
     purple: '#9226FF',
     red: '#EC2215',
     orange: '#FF7426',
-    yellow: '#FFB626'
+    yellow: '#FFB626',
+    white: "#FFFFFF",
+    black: "#000000",
+    disabled: "#BDBDBD",
 };
+
+export const defaultColor: keyof typeof Colors = 'black';
+
+export const BackgroundColorVariants = {
+    darkBlue: {
+        backgroundColor: 'darkBlue',
+    },
+    darkRed: {
+        backgroundColor: 'darkRed',
+    },
+    green: {
+        backgroundColor: 'green',
+    },
+    blue: {
+        backgroundColor: 'blue',
+    },
+    aqua: {
+        backgroundColor: 'aqua',
+    },
+    purple: {
+        backgroundColor: 'purple',
+    },
+    red: {
+        backgroundColor: 'red',
+    },
+    orange: {
+        backgroundColor: 'orange',
+    },
+    yellow: {
+        backgroundColor: 'yellow',
+    },
+    white: {
+        backgroundColor: 'white',
+    },
+    black: {
+        backgroundColor: 'black',
+    },
+    disabled: {
+        backgroundColor: 'disabled',
+    }
+} as const;
+
+export const textColorVariants = {
+    darkBlue: 'white',
+    darkRed: 'white',
+    green: 'white',
+    blue: 'white',
+    aqua: 'white',
+    purple: 'white',
+    red: 'white',
+    orange: 'white',
+    yellow: 'white',
+    white: 'black',
+    black: 'white',
+    disabled: 'white',
+} as const;
diff --git a/frontend/mobile/app/(design-system)/Tag/TagVariants.ts b/frontend/mobile/app/(design-system)/Tag/TagVariants.ts
@@ -1,32 +1,4 @@
-const TagColorVariants = {
-    darkBlue: {
-        backgroundColor: 'darkBlue'
-    },
-    darkRed: {
-        backgroundColor: 'darkRed'
-    },
-    green: {
-        backgroundColor: 'green'
-    },
-    blue: {
-        backgroundColor: 'blue'
-    },
-    aqua: {
-        backgroundColor: 'aqua'
-    },
-    purple: {
-        backgroundColor: 'purple'
-    },
-    red: {
-        backgroundColor: 'red'
-    },
-    orange: {
-        backgroundColor: 'orange'
-    },
-    yellow: {
-        backgroundColor: 'yellow'
-    }
-} as const;
+import { BackgroundColorVariants, defaultColor } from "../Colors";
 
 export const TagVariants = {
     defaults: {
@@ -35,8 +7,8 @@ export const TagVariants = {
         justifyContent: 'center',
         paddingHorizontal: 'l',
         paddingVertical: 'xs',
-        backgroundColor: 'aqua',
+        backgroundColor: defaultColor,
         borderRadius: 105
     },
-    ...TagColorVariants
+    ...BackgroundColorVariants
 };
diff --git a/frontend/mobile/app/(design-system)/theme.ts b/frontend/mobile/app/(design-system)/theme.ts
@@ -4,12 +4,14 @@ import { Colors } from './Colors';
 import { Spacing } from './Spacing';
 import { TagVariants } from './Tag/TagVariants';
 import { TextVariants } from './Text/TextVariants';
+import { ButtonVariants } from './Button/ButtonVariants';
 
 export const theme = createTheme({
     colors: Colors,
     spacing: Spacing,
     textVariants: TextVariants,
-    tagVariants: TagVariants
+    tagVariants: TagVariants,
+    buttonVariants: ButtonVariants,
 });
 
 export type Theme = typeof theme;
diff --git a/frontend/mobile/package.json b/frontend/mobile/package.json
@@ -15,12 +15,14 @@
         "preset": "jest-expo"
     },
     "dependencies": {
+        "@expo/metro-runtime": "~3.2.1",
         "@expo/vector-icons": "^14.0.2",
         "@generatesac/lib": "^0.0.1",
         "@react-navigation/native": "^6.0.2",
         "@reduxjs/toolkit": "^2.2.5",
         "@shopify/restyle": "^2.4.4",
         "expo": "~51.0.2",
+        "expo-dev-client": "~4.0.14",
         "expo-font": "~12.0.5",
         "expo-linking": "~6.3.1",
         "expo-router": "~3.5.14",
@@ -33,7 +35,7 @@
         "react-dom": "18.2.0",
         "react-native": "0.74.1",
         "react-native-gesture-handler": "^2.16.2",
-        "react-native-reanimated": "~3.11.0",
+        "react-native-reanimated": "^3.11.0",
         "react-native-safe-area-context": "4.10.1",
         "react-native-screens": "3.31.1",
         "react-native-web": "~0.19.10",

diff --git a/frontend/mobile/yarn.lock b/frontend/mobile/yarn.lock
@@ -1226,7 +1226,7 @@
     postcss "~8.4.32"
     resolve-from "^5.0.0"
 
-"@expo/[email protected]":
+"@expo/[email protected]", "@expo/metro-runtime@~3.2.1":
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/@expo/metro-runtime/-/metro-runtime-3.2.1.tgz#bbab2ca9d0c8d256172eb4688123af6be67c7674"
   integrity sha512-L7xNo5SmK+rcuXDm/+VBBImpA7FZsVB+m/rNr3fNl5or+1+yrZe99ViF7LZ8DOoVqAqcb4aCAXvGrP2JNYo1/Q==
@@ -2989,6 +2989,16 @@ ajv-keywords@^5.1.0:
   dependencies:
     fast-deep-equal "^3.1.3"
 
+[email protected]:
+  version "8.11.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.11.0.tgz#977e91dd96ca669f54a11e23e378e33b884a565f"
+  integrity sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.2.2"
+
 ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
@@ -4831,6 +4841,41 @@ expo-constants@~16.0.0:
   dependencies:
     "@expo/config" "~9.0.0-beta.0"
 
+expo-dev-client@~4.0.14:
+  version "4.0.14"
+  resolved "https://registry.yarnpkg.com/expo-dev-client/-/expo-dev-client-4.0.14.tgz#73d2f8b6f173d01f07af3e01cf8d5acdc6e05c01"
+  integrity sha512-s5/FZZdgvoxBGA35QgNet61Dc1jh+8u375uaYkH9pUvfKFXURd9PDDAWvtAnOo+QYg9WwgiHPo7dKeCdN6pOPA==
+  dependencies:
+    expo-dev-launcher "4.0.15"
+    expo-dev-menu "5.0.14"
+    expo-dev-menu-interface "1.8.3"
+    expo-manifests "~0.14.0"
+    expo-updates-interface "~0.16.2"
+
+[email protected]:
+  version "4.0.15"
+  resolved "https://registry.yarnpkg.com/expo-dev-launcher/-/expo-dev-launcher-4.0.15.tgz#cd36f10b7e534e5caa176a5718381ccfa73b0b8c"
+  integrity sha512-avl4NTwFwalZjojFAXvINPgxAlcAxfdwy9PSsAq5KAkl9Vv+Vr8O2gI3nfrPwtqAA0iOIES/EKN0YFCiQuuvvg==
+  dependencies:
+    ajv "8.11.0"
+    expo-dev-menu "5.0.14"
+    expo-manifests "~0.14.0"
+    resolve-from "^5.0.0"
+    semver "^7.6.0"
+
+[email protected]:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/expo-dev-menu-interface/-/expo-dev-menu-interface-1.8.3.tgz#8c1262e29e0124fc5932a129c95b36de56656b20"
+  integrity sha512-QM0LRozeFT5Ek0N7XpV93M+HMdEKRLEOXn0aW5M3uoUlnqC1+PLtF3HMy3k3hMKTTE/kJ1y1Z7akH07T0lunCQ==
+
+[email protected]:
+  version "5.0.14"
+  resolved "https://registry.yarnpkg.com/expo-dev-menu/-/expo-dev-menu-5.0.14.tgz#7d54fc51b42217588cb9c5f2049bcf857d6e0b3d"
+  integrity sha512-zPXBMCyjptn4Aw7D2Z8FEqndED33g1ryChN0nyTA1zHzckDNwnGuLdTWTsNFrqmFqyqjRJgG5xFVJmnsDO8WyQ==
+  dependencies:
+    expo-dev-menu-interface "1.8.3"
+    semver "^7.5.4"
+
 expo-file-system@~17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/expo-file-system/-/expo-file-system-17.0.1.tgz#b9f8af8c1c06ec71d96fd7a0d2567fa9e1c88f15"
@@ -4843,6 +4888,11 @@ expo-font@~12.0.4, expo-font@~12.0.5:
   dependencies:
     fontfaceobserver "^2.1.0"
 
+expo-json-utils@~0.13.0:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/expo-json-utils/-/expo-json-utils-0.13.1.tgz#e49b697198e11c573d346f08ab91c467095934a9"
+  integrity sha512-mlfaSArGVb+oJmUcR22jEONlgPp0wj4iNIHfQ2je9Q8WTOqMc0Ws9tUciz3JdJnhffdHqo/k8fpvf0IRmN5HPA==
+
 expo-keep-awake@~13.0.1:
   version "13.0.1"
   resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-13.0.1.tgz#6c0a0d1fe388fe5a63e2089ade66798eba23f089"
@@ -4856,6 +4906,14 @@ expo-linking@~6.3.1:
     expo-constants "~16.0.0"
     invariant "^2.2.4"
 
+expo-manifests@~0.14.0:
+  version "0.14.3"
+  resolved "https://registry.yarnpkg.com/expo-manifests/-/expo-manifests-0.14.3.tgz#17854c45c8c9ced4a07031ae0838c38ac3115fbc"
+  integrity sha512-L3b5/qocBPiQjbW0cpOHfnqdKZbTJS7sA3mgeDJT+mWga/xYsdpma1EfNmsuvrOzjLGjStr1k1fceM9Bl49aqQ==
+  dependencies:
+    "@expo/config" "~9.0.0"
+    expo-json-utils "~0.13.0"
+
 [email protected]:
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/expo-modules-autolinking/-/expo-modules-autolinking-1.11.1.tgz#4a867f727d9dfde07de8dde14b333a3cbf82ce3c"
@@ -4914,6 +4972,11 @@ expo-system-ui@~3.0.4:
     "@react-native/normalize-colors" "~0.74.83"
     debug "^4.3.2"
 
+expo-updates-interface@~0.16.2:
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/expo-updates-interface/-/expo-updates-interface-0.16.2.tgz#ad1ac2ca8ee5a8cc84052ea3c18a11da64da569b"
+  integrity sha512-929XBU70q5ELxkKADj1xL0UIm3HvhYhNAOZv5DSk7rrKvLo7QDdPyl+JVnwZm9LrkNbH4wuE2rLoKu1KMgZ+9A==
+
 expo-web-browser@~13.0.3:
   version "13.0.3"
   resolved "https://registry.yarnpkg.com/expo-web-browser/-/expo-web-browser-13.0.3.tgz#dceb05dbc187b498ca937b02adf385b0232a4e92"
@@ -8929,7 +8992,7 @@ [email protected]:
     react-fast-compare "^3.2.2"
     shallowequal "^1.1.0"
 
-react-native-reanimated@~3.11.0:
+react-native-reanimated@^3.11.0:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.11.0.tgz#d4265d4e0232623f5958ed60e1686ca884fc3452"
   integrity sha512-BNw/XDgUfs8UhfY1X6IniU8kWpnotWGyt8qmQviaHisTi5lvwnaOdXQKfN1KGONx6ekdFRHRP5EFwLi0UajwKA==