From 5f6d868cfda0effd079313129741ca8620bf2e3e Mon Sep 17 00:00:00 2001 From: Priya Power <49959312+priyapower@users.noreply.github.com> Date: Fri, 4 Oct 2024 16:36:41 -0500 Subject: [PATCH 01/11] Setup for development --- apps/rufferal/src/app/screens/Screens.tsx | 11 +- .../search-dashboard/search-dashboard.tsx | 1 + .../search/search-filters/search-filters.tsx | 183 ++---------------- 3 files changed, 27 insertions(+), 168 deletions(-) diff --git a/apps/rufferal/src/app/screens/Screens.tsx b/apps/rufferal/src/app/screens/Screens.tsx index 44a373f..af5f4b0 100644 --- a/apps/rufferal/src/app/screens/Screens.tsx +++ b/apps/rufferal/src/app/screens/Screens.tsx @@ -26,6 +26,11 @@ export const Screens = observer(() => { {/* ⬇️⬇️⬇️ CURRENT DEVELOPMENT PAGE ⬇️⬇️⬇️ */} + + {/* ⬆️⬆️⬆️ CURRENT DEVELOPMENT PAGE ⬆️⬆️⬆️ */} @@ -38,11 +43,11 @@ export const Screens = observer(() => { - - + /> */} + {/* */} diff --git a/ui/src/components/pages/search/search-dashboard/search-dashboard.tsx b/ui/src/components/pages/search/search-dashboard/search-dashboard.tsx index 7097085..cea21ae 100644 --- a/ui/src/components/pages/search/search-dashboard/search-dashboard.tsx +++ b/ui/src/components/pages/search/search-dashboard/search-dashboard.tsx @@ -20,6 +20,7 @@ export const SearchDashboard = observer( Platform.OS === 'ios' && `pt-${moderateScaleTW(insets.top)}` )} > + {/* BLARG:TODO: update from tailwind config */} {/* HEADER + FILTERS + ALL RESULTS */} -// style={ruffwind``} +import { DashboardNavigation } from '../../../../navigation'; export const SearchFilters = observer(({ navigation }: PageNavigationProps) => { + const insets = useSafeAreaInsets(); + return ( - - - {/* Header and Search */} - - {/* Header */} - -

- - - - in{` `} - - - San Antonio, TX - - - - - - Edit location - - - - - {/* Search */} - - THE STUFF - FILL OUT - - - {/* Navigation */} - - - - - - - Search - - - - - - - - Bookings - - - - - - - - Messages - - - - - - - - Account - - - - - + + {/* BLARG:TODO: update from tailwind config */} + + BLARG: ADD FILTERS + {/* NAVIGATION */} + + ); }); From 46d65dfcdb292452faafd4637f57cfbd5d3bd235 Mon Sep 17 00:00:00 2001 From: Priya Power <49959312+priyapower@users.noreply.github.com> Date: Wed, 9 Oct 2024 15:48:10 -0500 Subject: [PATCH 02/11] Update field size naming --- types/src/ui/fields.ts | 8 +++++++- ui/src/components/atoms/button/button.tsx | 6 +++--- .../atoms/field-input-area/field-input-area.tsx | 8 ++++++-- ui/src/components/atoms/field-input/field-input.tsx | 4 ++-- ui/src/components/atoms/field-select/field-select.tsx | 2 +- ui/src/components/molecules/input-area/input-area.tsx | 2 +- ui/src/components/molecules/input/input.tsx | 2 +- ui/src/components/molecules/select/select.tsx | 4 ++-- .../pages/pets/create/cats/cat-avatar/cat-avatar.tsx | 2 +- .../pages/pets/create/cats/cat-careplan/cat-careplan.tsx | 2 +- .../pages/pets/create/cats/cat-details/cat-details.tsx | 2 +- .../pets/create/cats/cat-personality/cat-personality.tsx | 2 +- .../pages/pets/create/dogs/dog-avatar/dog-avatar.tsx | 2 +- .../pages/pets/create/dogs/dog-careplan/dog-careplan.tsx | 2 +- .../pages/pets/create/dogs/dog-details/dog-details.tsx | 2 +- .../pets/create/dogs/dog-personality/dog-personality.tsx | 2 +- ui/src/components/pages/pets/pet-splash/pet-splash.tsx | 2 +- .../pages/profile/profile-splash/profile-splash.tsx | 2 +- 18 files changed, 33 insertions(+), 23 deletions(-) diff --git a/types/src/ui/fields.ts b/types/src/ui/fields.ts index 5ed2f69..962dd31 100644 --- a/types/src/ui/fields.ts +++ b/types/src/ui/fields.ts @@ -1,4 +1,10 @@ -export type FieldSize = 'standard' | 'standard-short' | 'small' | 'small-short'; +export type FieldSize = + | 'extra-small' + | 'small' + | 'medium' + | 'default' + | 'large' + | 'extra-large'; export type FieldState = 'default' | 'errored' | 'disabled'; diff --git a/ui/src/components/atoms/button/button.tsx b/ui/src/components/atoms/button/button.tsx index 8e146e7..c00f751 100644 --- a/ui/src/components/atoms/button/button.tsx +++ b/ui/src/components/atoms/button/button.tsx @@ -21,7 +21,7 @@ export const Button = ({ loading, onPress, rounded = true, - size = 'standard', + size = 'default', state = 'default', text = 'Continue', iconRight, @@ -38,14 +38,14 @@ export const Button = ({ let loadingColor = 'white'; switch (size) { - case 'standard-short': + case 'medium': height = `h-${moderateScaleTW(36)}`; fontStyles = 'font-bodyBold text-b3'; break; case 'small': width = `w-${horizontalScaleTW(150)}`; break; - case 'small-short': + case 'extra-small': width = `w-${horizontalScaleTW(150)}`; height = `h-${moderateScaleTW(36)}`; fontStyles = 'font-bodyBold text-b3'; diff --git a/ui/src/components/atoms/field-input-area/field-input-area.tsx b/ui/src/components/atoms/field-input-area/field-input-area.tsx index ecec2dd..a6e5446 100644 --- a/ui/src/components/atoms/field-input-area/field-input-area.tsx +++ b/ui/src/components/atoms/field-input-area/field-input-area.tsx @@ -1,6 +1,10 @@ import { ruffwind } from '@rufferal/tailwind'; import { FieldInputProps } from '@rufferal/types'; -import { GLOBAL_ICON_SIZE_SMALL, horizontalScaleTW, moderateScaleTW } from '@rufferal/utils'; +import { + GLOBAL_ICON_SIZE_SMALL, + horizontalScaleTW, + moderateScaleTW, +} from '@rufferal/utils'; import { Image } from 'expo-image'; import { Platform, TextInput, View } from 'react-native'; @@ -8,7 +12,7 @@ export const FieldInputArea = ({ onChange, onSubmit, placeholder, - size = 'standard', + size = 'default', state = 'default', value, ...inputProps diff --git a/ui/src/components/atoms/field-input/field-input.tsx b/ui/src/components/atoms/field-input/field-input.tsx index d509032..cdc83e2 100644 --- a/ui/src/components/atoms/field-input/field-input.tsx +++ b/ui/src/components/atoms/field-input/field-input.tsx @@ -12,13 +12,13 @@ export const FieldInput = ({ onChange, onSubmit, placeholder, - size = 'standard', + size = 'default', state = 'default', value, ...inputProps }: FieldInputProps) => { const isMobile = Platform.OS === 'ios' || Platform.OS === 'android'; - + let width = `w-full`; switch (size) { case 'small': diff --git a/ui/src/components/atoms/field-select/field-select.tsx b/ui/src/components/atoms/field-select/field-select.tsx index bd24067..aa39498 100644 --- a/ui/src/components/atoms/field-select/field-select.tsx +++ b/ui/src/components/atoms/field-select/field-select.tsx @@ -28,7 +28,7 @@ export const FieldSelect = ({ onChange, placeholder = 'Select...', searchField, - size = 'standard', + size = 'default', state = 'default', valueField, value, diff --git a/ui/src/components/molecules/input-area/input-area.tsx b/ui/src/components/molecules/input-area/input-area.tsx index de999ba..a991d3e 100644 --- a/ui/src/components/molecules/input-area/input-area.tsx +++ b/ui/src/components/molecules/input-area/input-area.tsx @@ -16,7 +16,7 @@ export const InputArea = ({ label, maxCharacters = 250, onChange, - size = 'standard', + size = 'default', ...inputProps }: InputAreaProps) => { let state: FieldState = 'default'; diff --git a/ui/src/components/molecules/input/input.tsx b/ui/src/components/molecules/input/input.tsx index 1a45407..cdabe51 100644 --- a/ui/src/components/molecules/input/input.tsx +++ b/ui/src/components/molecules/input/input.tsx @@ -8,7 +8,7 @@ export const Input = ({ disabled = false, errorMessage, label, - size = 'standard', + size = 'default', ...inputProps }: InputProps) => { let state: FieldState = 'default'; diff --git a/ui/src/components/molecules/select/select.tsx b/ui/src/components/molecules/select/select.tsx index 2fa4f22..e8eef65 100644 --- a/ui/src/components/molecules/select/select.tsx +++ b/ui/src/components/molecules/select/select.tsx @@ -10,7 +10,7 @@ export const Select = ({ errorMessage, label, other, - size = 'standard', + size = 'default', ...selectProps }: SelectProps) => { let state: FieldState = 'default'; @@ -23,7 +23,7 @@ export const Select = ({ // Handle optional "Other" option if (other && Object.keys(other).length > 0) { - const filteredOthers = data.filter(item => item.id !== 'other'); + const filteredOthers = data.filter((item) => item.id !== 'other'); filteredOthers.push({ id: 'other', label: other.label, diff --git a/ui/src/components/pages/pets/create/cats/cat-avatar/cat-avatar.tsx b/ui/src/components/pages/pets/create/cats/cat-avatar/cat-avatar.tsx index 9a54901..91ac691 100644 --- a/ui/src/components/pages/pets/create/cats/cat-avatar/cat-avatar.tsx +++ b/ui/src/components/pages/pets/create/cats/cat-avatar/cat-avatar.tsx @@ -112,7 +112,7 @@ export const CatAvatar = observer(({ navigation }: PageNavigationProps) => {