Merge branch 'development' into upgrade_expo

andrew-bierman · Dec 29, 2024 · 6a9f223 · 6a9f223
2 parents 9671d96 + 3444ffd
commit 6a9f223
Show file tree

Hide file tree

Showing 46 changed files with 378 additions and 277 deletions.
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/_layout.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/_layout.tsx
@@ -2,13 +2,16 @@ import { DrawerToggleButton } from '@react-navigation/drawer';
 import { useRouterSettings } from 'app/hooks/router';
 import { Stack } from 'expo-router';
 import React from 'react';
-
+import useTheme from 'app/hooks/useTheme';
 export default function StackLayout() {
   const { layoutStackScreenOptionsHeaderSettings } = useRouterSettings();
+  const { currentTheme } = useTheme();
   return (
     <Stack
       screenOptions={{
-        headerRight: () => <DrawerToggleButton />,
+        headerRight: () => (
+          <DrawerToggleButton tintColor={currentTheme.colors.text} />
+        ),
         ...layoutStackScreenOptionsHeaderSettings,
         headerBlurEffect: 'systemChromeMaterial',
       }}

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx
@@ -34,9 +34,9 @@ export default function AboutRoute() {
             backgroundColor: currentTheme.colors.background,
           },
           headerTitleStyle: {
-            fontSize: 24,
+            fontSize: 20,
           },
-          headerTintColor: currentTheme.colors.tertiaryBlue,
+          headerTintColor: currentTheme.colors.text,
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/maps/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/maps/index.tsx
@@ -2,13 +2,15 @@ import { DrawerToggleButton } from '@react-navigation/drawer';
 import useTheme from 'app/hooks/useTheme';
 import { OfflineMapsScreen } from 'app/modules/map/screens/OfflineMapsScreen';
 import { Stack } from 'expo-router';
+import { placesAutocompleteSearchAtom } from 'app/components/PlacesAutocomplete/usePlacesAutoComplete';
+import { useAtom } from 'jotai';
 import Head from 'expo-router/head';
 import React from 'react';
 import { Platform } from 'react-native';
 
 export default function MapsScreen() {
   const { currentTheme } = useTheme();
-
+  const [searchQuery, setSearchQuery] = useAtom(placesAutocompleteSearchAtom);
   return (
     <>
       {Platform.OS === 'web' && (
@@ -23,14 +25,20 @@ export default function MapsScreen() {
           headerRight: ({ tintColor }) => (
             <DrawerToggleButton tintColor={tintColor} />
           ),
-
+          headerSearchBarOptions: {
+            placeholder: 'Search maps',
+            hideWhenScrolling: false,
+            headerIconColor: currentTheme.colors.text,
+            inputType: 'text',
+            onChangeText: (e) => setSearchQuery(e.nativeEvent.text),
+          },
           headerStyle: {
             backgroundColor: currentTheme.colors.background,
           },
           headerTitleStyle: {
-            fontSize: 24,
+            fontSize: 20,
           },
-          headerTintColor: currentTheme.colors.tertiaryBlue,
+          headerTintColor: currentTheme.colors.text,
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/products/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/products/index.tsx
@@ -1,14 +1,16 @@
 import { DrawerToggleButton } from '@react-navigation/drawer';
 import useTheme from 'app/hooks/useTheme';
 import { ProductsScreen } from 'app/modules/item';
+import { placesAutocompleteSearchAtom } from 'app/components/PlacesAutocomplete/usePlacesAutoComplete';
+import { useAtom } from 'jotai';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
 import React from 'react';
 import { Platform } from 'react-native';
 
 export default function ProductsPage() {
   const { currentTheme } = useTheme();
-
+  const [searchQuery, setSearchQuery] = useAtom(placesAutocompleteSearchAtom);
   return (
     <>
       {Platform.OS === 'web' && (
@@ -23,14 +25,21 @@ export default function ProductsPage() {
           headerRight: ({ tintColor }) => (
             <DrawerToggleButton tintColor={tintColor} />
           ),
+          headerSearchBarOptions: {
+            placeholder: 'Search products',
+            headerIconColor: currentTheme.colors.text,
+            hideWhenScrolling: false,
+            inputType: 'text',
+            onChangeText: (e) => setSearchQuery(e.nativeEvent.text),
+          },
 
           headerStyle: {
             backgroundColor: currentTheme.colors.background,
           },
           headerTitleStyle: {
-            fontSize: 24,
+            fontSize: 20,
           },
-          headerTintColor: currentTheme.colors.tertiaryBlue,
+          headerTintColor: currentTheme.colors.text,
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx
@@ -1,10 +1,15 @@
 import React from 'react';
 import { FeedScreen } from 'app/modules/feed';
+import { placesAutocompleteSearchAtom } from 'app/components/PlacesAutocomplete/usePlacesAutoComplete';
+import { useAtom } from 'jotai';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
-
+import useTheme from 'app/hooks/useTheme';
 export default function FeedNav() {
+  const { currentTheme } = useTheme();
+  const [searchQuery, setSearchQuery] = useAtom(placesAutocompleteSearchAtom);
+
   return (
     <>
       {Platform.OS === 'web' && (
@@ -16,6 +21,13 @@ export default function FeedNav() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Trips',
+          headerSearchBarOptions: {
+            placeholder: 'Search trips',
+            headerIconColor: currentTheme.colors.text,
+            hideWhenScrolling: false,
+            inputType: 'text',
+            onChangeText: (e) => setSearchQuery(e.nativeEvent.text),
+          },
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/feed/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/feed/index.tsx
@@ -26,11 +26,13 @@ export default function FeedNav() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Feed',
-          headerRight: ({ tintColor }) => (
-            <DrawerToggleButton tintColor={tintColor} />
+          headerRight: () => (
+            <DrawerToggleButton tintColor={currentTheme.colors.text} />
           ),
           headerSearchBarOptions: {
             placeholder: 'Search',
+            headerIconColor: currentTheme.colors.text,
+
             hideWhenScrolling: false,
             inputType: 'text',
             onChangeText: (e) => setSearchQuery(e.nativeEvent.text),

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/index/_layout.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/index/_layout.tsx
@@ -2,13 +2,16 @@ import { DrawerToggleButton } from '@react-navigation/drawer';
 import { useRouterSettings } from 'app/hooks/router';
 import { Stack } from 'expo-router';
 import React from 'react';
-
+import useTheme from 'app/hooks/useTheme';
 export default function StackLayout() {
   const { layoutStackScreenOptionsHeaderSettings } = useRouterSettings();
+  const { currentTheme } = useTheme();
   return (
     <Stack
       screenOptions={{
-        headerRight: () => <DrawerToggleButton />,
+        headerRight: () => (
+          <DrawerToggleButton tintColor={currentTheme.colors.text} />
+        ),
         ...layoutStackScreenOptionsHeaderSettings,
         headerBlurEffect: 'systemChromeMaterial',
       }}

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/index/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/index/index.tsx
@@ -36,12 +36,6 @@ export default function HomeScreen() {
       <Stack.Screen
         options={{
           title: 'Home',
-          headerSearchBarOptions: {
-            placeholder: 'Search by park, city, or trail',
-            hideWhenScrolling: false,
-            inputType: 'text',
-            onChangeText: (e) => setSearchQuery(e.nativeEvent.text),
-          },
         }}
       />
       {connectionStatus === 'connected' && (

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/packs/_layout.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/packs/_layout.tsx
@@ -2,13 +2,16 @@ import { DrawerToggleButton } from '@react-navigation/drawer';
 import { useRouterSettings } from 'app/hooks/router';
 import { Stack } from 'expo-router';
 import React from 'react';
-
+import useTheme from 'app/hooks/useTheme';
 export default function StackLayout() {
+  const { currentTheme } = useTheme();
   const { layoutStackScreenOptionsHeaderSettings } = useRouterSettings();
   return (
     <Stack
       screenOptions={{
-        headerRight: () => <DrawerToggleButton />,
+        headerRight: () => (
+          <DrawerToggleButton tintColor={currentTheme.colors.text} />
+        ),
         ...layoutStackScreenOptionsHeaderSettings,
         headerBlurEffect: 'systemChromeMaterial',
       }}

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/packs/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/packs/index.tsx
@@ -1,13 +1,16 @@
 import { DrawerToggleButton } from '@react-navigation/drawer';
+import { placesAutocompleteSearchAtom } from 'app/components/PlacesAutocomplete/usePlacesAutoComplete';
 import useTheme from 'app/hooks/useTheme';
 import { FeedScreen } from 'app/modules/feed';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
+import { useAtom } from 'jotai';
 import React from 'react';
 import { Platform } from 'react-native';
 
 export default function Packs() {
   const { currentTheme } = useTheme();
+  const [searchQuery, setSearchQuery] = useAtom(placesAutocompleteSearchAtom);
 
   return (
     <>
@@ -20,6 +23,14 @@ export default function Packs() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Packs',
+          headerSearchBarOptions: {
+            placeholder: 'Search packs',
+            headerIconColor: currentTheme.colors.text,
+            hideWhenScrolling: false,
+            inputType: 'text',
+            onChangeText: (e) => setSearchQuery(e.nativeEvent.text),
+          },
+
           headerRight: ({ tintColor }) => (
             <DrawerToggleButton tintColor={tintColor} />
           ),

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/profile/_layout.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/profile/_layout.tsx
@@ -2,12 +2,16 @@ import { DrawerToggleButton } from '@react-navigation/drawer';
 import { useRouterSettings } from 'app/hooks/router';
 import { Stack } from 'expo-router';
 import React from 'react';
+import useTheme from 'app/hooks/useTheme';
 
 export default function StackLayout() {
+  const { currentTheme } = useTheme();
   return (
     <Stack
       screenOptions={{
-        headerRight: () => <DrawerToggleButton />,
+        headerRight: () => (
+          <DrawerToggleButton tintColor={currentTheme.colors.text} />
+        ),
         headerBlurEffect: 'systemChromeMaterial',
         title: 'Profile',
       }}

diff --git a/packages/app/components/Avatar/Avatar.tsx b/packages/app/components/Avatar/Avatar.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { RImage } from '@packrat/ui';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 export interface AvatarProps {

diff --git a/packages/app/components/DialogDemo/DialogDemo.tsx b/packages/app/components/DialogDemo/DialogDemo.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import {
   Button as OriginalButton,

diff --git a/packages/app/components/MultistepForm/ProgressBar.tsx b/packages/app/components/MultistepForm/ProgressBar.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { Svg, Line, Circle } from 'react-native-svg';
 import { View } from 'react-native';

diff --git a/packages/app/components/MultistepForm/Sidebar.tsx b/packages/app/components/MultistepForm/Sidebar.tsx
@@ -1,8 +1,9 @@
+import React from 'react';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { View, Text } from 'react-native';
 
 interface SidebarProps {
-  data: { title?: string; subtext?: string }[];
+  data: Array<{ title?: string; subtext?: string }>;
   currentStep: number;
 }
 
@@ -15,7 +16,6 @@ export const Sidebar: React.FC<SidebarProps> = ({ data, currentStep }) => {
 
   return (
     <View style={styles.sidebar}>
-      {/* Display your data here */}
       {displayData.map((currentData, index) => {
         if (!currentData) return null;
         const { title, subtext } = currentData;

diff --git a/packages/app/components/RPrimaryButton/index.tsx b/packages/app/components/RPrimaryButton/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { styled, Button, ButtonProps } from 'tamagui';
+import { styled, Button, type ButtonProps } from 'tamagui';
 
 interface RPrimaryButtonProps extends ButtonProps {
   label: string;

diff --git a/packages/app/components/RSecondaryButton/index.tsx b/packages/app/components/RSecondaryButton/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { styled, Button, ButtonProps } from 'tamagui';
+import { styled, Button, type ButtonProps } from 'tamagui';
 import useTheme from 'app/hooks/useTheme';
 
 interface RSecondaryButtonProps extends ButtonProps {

diff --git a/packages/app/components/Redirect/Redirect.tsx b/packages/app/components/Redirect/Redirect.tsx
@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 import { useRouter } from 'app/hooks/router';
 
-type RedirectProps = {
+interface RedirectProps {
   to: string;
-};
+}
 
 export const Redirect = ({ to }: RedirectProps) => {
   const router = useRouter();

diff --git a/packages/app/components/Suggestion/SuggestionDescription.tsx b/packages/app/components/Suggestion/SuggestionDescription.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { FlatList } from 'react-native';
 import { AnimatePresence, Text, Theme, View, styled } from 'tamagui';
 
@@ -11,10 +11,10 @@ const List = styled(FlatList<Message>, {
 
 const getMessages = (data: Message[]) => data;
 
-type Message = {
+interface Message {
   role: 'user' | 'ai';
   content: string;
-};
+}
 
 const renderItem = ({
   item: message,

diff --git a/packages/app/components/Suggestion/SuggestionList.tsx b/packages/app/components/Suggestion/SuggestionList.tsx
@@ -10,7 +10,7 @@ interface Category {
   name: string;
 }
 
-interface Item {
+interface SuggestionItem {
   id: string;
   name: string;
   ownerId: string;
@@ -21,12 +21,12 @@ interface Item {
 }
 
 interface SuggestionListProps {
-  suggestion: { Items: Item[] } | null;
+  suggestion: { Items: SuggestionItem[] } | null;
   onAddItem: (itemId: string) => void;
 }
 
 export function SuggestionList({ suggestion, onAddItem }: SuggestionListProps) {
-  const [itemsList, setItemsList] = useState<Item[]>([]);
+  const [itemsList, setItemsList] = useState<SuggestionItem[]>([]);
   const { isDark } = useTheme();
 
   useEffect(() => {
@@ -51,7 +51,7 @@ export function SuggestionList({ suggestion, onAddItem }: SuggestionListProps) {
         style={{
           minWidth: 300,
           height: '100%',
-          overflow: 'auto',
+          overflow: 'scroll',
         }}
       >
         {itemsList.map((item, i) => (
@@ -67,7 +67,12 @@ export function SuggestionList({ suggestion, onAddItem }: SuggestionListProps) {
 
 SuggestionList.fileName = 'List';
 
-function Item({ item, onAddItem }) {
+interface ItemProps {
+  item: SuggestionItem;
+  onAddItem: (itemId: string) => void;
+}
+
+function Item({ item, onAddItem }: ItemProps) {
   const { addPackItem, isLoading } = useAddPackItem();
 
   const handleAddItem = (item) => {
@@ -89,7 +94,7 @@ function Item({ item, onAddItem }) {
         style={{
           borderRadius: 5,
           flexDirection: 'row',
-          aligItems: 'center',
+          alignItems: 'center',
         }}
       >
         <View style={{ flexDirection: 'column', justifyContent: 'center' }}>