From acc2917018dacaf504fd35993ce02b7816c83635 Mon Sep 17 00:00:00 2001 From: Alder Whiteford Date: Mon, 27 May 2024 14:56:05 -0400 Subject: [PATCH] Button Component --- frontend/mobile/app/(app)/(tabs)/index.tsx | 9 ++- frontend/mobile/app/(design-system)/Box.tsx | 2 +- .../app/(design-system)/Button/Button.tsx | 35 ++++++++++ .../(design-system)/Button/ButtonVariants.ts | 15 +++++ frontend/mobile/app/(design-system)/Colors.ts | 63 ++++++++++++++++- .../app/(design-system)/Tag/TagVariants.ts | 34 +--------- frontend/mobile/app/(design-system)/theme.ts | 4 +- frontend/mobile/package.json | 4 +- frontend/mobile/yarn.lock | 67 ++++++++++++++++++- 9 files changed, 193 insertions(+), 40 deletions(-) create mode 100644 frontend/mobile/app/(design-system)/Button/Button.tsx create mode 100644 frontend/mobile/app/(design-system)/Button/ButtonVariants.ts diff --git a/frontend/mobile/app/(app)/(tabs)/index.tsx b/frontend/mobile/app/(app)/(tabs)/index.tsx index c1e40d376..85e245eda 100644 --- 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 ( - Home + + Home Page + ); }; @@ -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 index 91e823ae8..19b70b6b6 100644 --- 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; diff --git a/frontend/mobile/app/(design-system)/Button/Button.tsx b/frontend/mobile/app/(design-system)/Button/Button.tsx new file mode 100644 index 000000000..5d0611160 --- /dev/null +++ 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({ + themeKey: 'buttonVariants' +}); + +type ButtonProps = VariantProps & + BoxProps & { + children?: React.ReactNode; + onPress?: (event: GestureResponderEvent) => void; + disabled?: boolean; + icon?: string; + }; + +const ButtonBase = createRestyleComponent([buttonVariant], TouchableOpacity); + +export const Button: React.FC = ({ variant, children, onPress, disabled, icon, ...rest }) => { + return ( + + + + {children} + + + ) +} \ No newline at end of file diff --git a/frontend/mobile/app/(design-system)/Button/ButtonVariants.ts b/frontend/mobile/app/(design-system)/Button/ButtonVariants.ts new file mode 100644 index 000000000..213d2296d --- /dev/null +++ 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 +}; \ No newline at end of file diff --git a/frontend/mobile/app/(design-system)/Colors.ts b/frontend/mobile/app/(design-system)/Colors.ts index 9cd099f22..a2ca31ebf 100644 --- 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 index 90871a9e6..908451027 100644 --- 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 index 2a3828ce1..0774eb131 100644 --- 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 index bbc2ed47f..ae413366b 100644 --- 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 index 090acaf77..8ab15b4e8 100644 --- a/frontend/mobile/yarn.lock +++ b/frontend/mobile/yarn.lock @@ -1226,7 +1226,7 @@ postcss "~8.4.32" resolve-from "^5.0.0" -"@expo/metro-runtime@3.2.1": +"@expo/metro-runtime@3.2.1", "@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" +ajv@8.11.0: + 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" + +expo-dev-launcher@4.0.15: + 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" + +expo-dev-menu-interface@1.8.3: + 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== + +expo-dev-menu@5.0.14: + 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" + expo-modules-autolinking@1.11.1: 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 @@ react-native-helmet-async@2.0.4: 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==