From bb3e5129562bb4c49bcd6d30adcafc6366a0d8dd Mon Sep 17 00:00:00 2001 From: Anmol Verma Date: Thu, 26 Dec 2024 16:08:04 +0530 Subject: [PATCH 1/4] add react import --- packages/app/components/Avatar/Avatar.tsx | 1 + .../app/components/DialogDemo/DialogDemo.tsx | 1 + .../components/MultistepForm/ProgressBar.tsx | 1 + .../app/components/MultistepForm/Sidebar.tsx | 4 +- .../app/components/RPrimaryButton/index.tsx | 2 +- .../app/components/RSecondaryButton/index.tsx | 2 +- packages/app/components/Redirect/Redirect.tsx | 4 +- .../Suggestion/SuggestionDescription.tsx | 6 +- .../components/Suggestion/SuggestionList.tsx | 17 +- .../app/components/carousel/ScrollButton.tsx | 4 +- packages/app/components/carousel/index.tsx | 4 +- packages/app/components/chat/ActionItem.tsx | 2 +- packages/app/components/hero/index.tsx | 2 +- .../app/components/inventory/Inventory.tsx | 1 + packages/app/components/landing_page/FAQS.tsx | 98 +-- .../landing_page/LandingPageAccordion.tsx | 141 ++-- .../app/components/landing_page/Pricing.tsx | 45 +- .../app/components/landing_page/index.tsx | 615 +++++------------- packages/app/components/layout/Layout.tsx | 4 +- packages/app/components/logo/index.tsx | 8 +- .../Sidebar/ProfileNavigationList.tsx | 11 +- .../components/navigation/Sidebar/SideBar.tsx | 2 +- .../Sidebar/SidebarNavigationList.tsx | 11 +- packages/app/components/newsLetter/index.tsx | 10 +- .../password-reset/PasswordResetAlert.tsx | 1 + packages/app/components/select/index.tsx | 2 +- .../settings/components/inputParts.tsx | 13 +- .../settings/components/layoutParts.tsx | 7 +- packages/app/components/settings/index.tsx | 49 +- packages/app/components/trip/TripCard.tsx | 1 + .../trip/TripCards/TripActivityCard.tsx | 4 +- .../trip/TripCards/TripCardBase.tsx | 12 +- 32 files changed, 442 insertions(+), 643 deletions(-) diff --git a/packages/app/components/Avatar/Avatar.tsx b/packages/app/components/Avatar/Avatar.tsx index 10a1aa0f5..259c4015b 100644 --- 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 index 2d1b65fc0..13f498e22 100644 --- 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 index 100fd4cb6..929a0a94f 100644 --- 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 index 3e714aec8..102ee57a9 100644 --- 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 = ({ data, currentStep }) => { return ( - {/* 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 index 321fadc8e..6e208fb32 100644 --- 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 index 39ed2644a..b85f3bf49 100644 --- 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 index b41139cc4..2707dc080 100644 --- 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 index 98b429436..df619878f 100644 --- 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, { 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 index 137a09258..8fd8e78ba 100644 --- 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([]); + const [itemsList, setItemsList] = useState([]); 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', }} > diff --git a/packages/app/components/carousel/ScrollButton.tsx b/packages/app/components/carousel/ScrollButton.tsx index a8ff689c3..6455fda84 100644 --- a/packages/app/components/carousel/ScrollButton.tsx +++ b/packages/app/components/carousel/ScrollButton.tsx @@ -5,9 +5,9 @@ import { TouchableOpacity, View, StyleProp, - TextStyle, + type TextStyle, + type ViewStyle, TouchableOpacityProps, - ViewStyle, } from 'react-native'; import useCustomStyles from 'app/hooks/useCustomStyles'; import useTheme from 'app/hooks/useTheme'; diff --git a/packages/app/components/carousel/index.tsx b/packages/app/components/carousel/index.tsx index 4c41c92d6..d341848eb 100644 --- a/packages/app/components/carousel/index.tsx +++ b/packages/app/components/carousel/index.tsx @@ -1,9 +1,9 @@ -import React, { useRef, useState, ReactNode } from 'react'; +import React, { useRef, useState, type ReactNode } from 'react'; import { ScrollView, Platform, Dimensions, - NativeScrollEvent, + type NativeScrollEvent, } from 'react-native'; import { RStack } from '@packrat/ui'; import ScrollButton from './ScrollButton'; diff --git a/packages/app/components/chat/ActionItem.tsx b/packages/app/components/chat/ActionItem.tsx index 8ae173aa3..78ed1fdbd 100644 --- a/packages/app/components/chat/ActionItem.tsx +++ b/packages/app/components/chat/ActionItem.tsx @@ -6,7 +6,7 @@ import Animated, { withTiming, FadeIn, } from 'react-native-reanimated'; -import { LucideIcon } from 'lucide-react-native'; +import type { LucideIcon } from 'lucide-react-native'; const AnimatedPressable = Animated.createAnimatedComponent(Pressable); diff --git a/packages/app/components/hero/index.tsx b/packages/app/components/hero/index.tsx index 087046051..65e67004b 100644 --- a/packages/app/components/hero/index.tsx +++ b/packages/app/components/hero/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { RStack, RImage } from '@packrat/ui'; -import { ImageSourcePropType, Platform, View } from 'react-native'; +import { type ImageSourcePropType, Platform, View } from 'react-native'; import { theme } from '../../theme'; import { isObjectEmpty } from '../../utils/isObjectEmpty'; import useCustomStyles from 'app/hooks/useCustomStyles'; diff --git a/packages/app/components/inventory/Inventory.tsx b/packages/app/components/inventory/Inventory.tsx index c4efff3e7..fe4cf9881 100644 --- a/packages/app/components/inventory/Inventory.tsx +++ b/packages/app/components/inventory/Inventory.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { View, Text, TouchableOpacity } from 'react-native'; // import { TableContainer } from '../Table'; diff --git a/packages/app/components/landing_page/FAQS.tsx b/packages/app/components/landing_page/FAQS.tsx index fdb1e16a4..5982647a3 100644 --- a/packages/app/components/landing_page/FAQS.tsx +++ b/packages/app/components/landing_page/FAQS.tsx @@ -6,7 +6,7 @@ import useTheme from 'app/hooks/useTheme'; import useResponsive from 'app/hooks/useResponsive'; import { FaqList } from 'app/constants/FAQS'; import { MaterialCommunityIcons } from '@expo/vector-icons'; -import { useState } from 'react'; +import React, { useState } from 'react'; export const FAQS = () => { const { currentTheme } = useTheme(); @@ -26,10 +26,10 @@ export const FAQS = () => { Frequently Asked Questions - + {FaqList.map((faq, index) => { return ( - + toggleAnswer(index)} style={styles.faqQuestion} @@ -59,8 +59,8 @@ export const FAQS = () => { src={PakRat_FAQS} style={{ backgroundColor: 'transparent', - width: xs || sm || md ? 359 : 650, - height: xs || sm || md ? 250 : 541, + width: xs || sm || md ? 359 : 650, + height: xs || sm || md ? 250 : 541, }} alt="PackRat Frequently Asked Questions" /> @@ -69,47 +69,47 @@ export const FAQS = () => { ); }; -const loadStyles = (currentTheme, xs, sm, md) => StyleSheet.create({ - faqMainContainer: { - flexDirection: xs || sm || md ? 'column' : 'row', - alignItems: 'center', - justifyContent: 'space-evenly', - gap: 10, - width: '100vw', - maxWidth: '100vw', - paddingTop: 20, - paddingBottom: 20, - }, - faqFirstContainer: { - alignItems: 'center', - }, - faqBox: { - width: xs || sm || md ? '100%' : '24vw', - }, - faqMainTitle: { - fontSize: xs || sm || md ? 20 : 26, - textAlign : xs || sm || md ? 'center' : 'auto', - fontWeight: 'bold', - color: currentTheme.colors.textPrimary, - marginBottom: 30, - }, - faqQuestion: { - borderBottomWidth: 1, - borderBottomColor: currentTheme.colors.textPrimary, - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - marginTop: 4, - marginBottom: 4, - marginLeft: xs || sm || md ? 10 : 0, - marginRight: xs || sm || md ? 10 : 0, - gap: xs || sm || md ? 2 : 10, - }, - faqAnswer: { - marginLeft: 0, - width: xs || sm || md ? '100%' : '24vw', - marginLeft: xs || sm || md ? 10 : 0, - marginRight: xs || sm || md ? 10 : 0, - }, - faqSecondContainer: {}, -}); +const loadStyles = (currentTheme, xs, sm, md) => + StyleSheet.create({ + faqMainContainer: { + flexDirection: xs || sm || md ? 'column' : 'row', + alignItems: 'center', + justifyContent: 'space-evenly', + gap: 10, + width: '100vw', + maxWidth: '100vw', + paddingTop: 20, + paddingBottom: 20, + }, + faqFirstContainer: { + alignItems: 'center', + }, + faqBox: { + width: xs || sm || md ? '100%' : '24vw', + }, + faqMainTitle: { + fontSize: xs || sm || md ? 20 : 26, + textAlign: xs || sm || md ? 'center' : 'auto', + fontWeight: 'bold', + color: currentTheme.colors.textPrimary, + marginBottom: 30, + }, + faqQuestion: { + borderBottomWidth: 1, + borderBottomColor: currentTheme.colors.textPrimary, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + marginTop: 4, + marginBottom: 4, + marginLeft: xs || sm || md ? 10 : 0, + marginRight: xs || sm || md ? 10 : 0, + gap: xs || sm || md ? 2 : 10, + }, + faqAnswer: { + width: xs || sm || md ? '100%' : '24vw', + marginLeft: xs || sm || md ? 10 : 0, + marginRight: xs || sm || md ? 10 : 0, + }, + faqSecondContainer: {}, + }); diff --git a/packages/app/components/landing_page/LandingPageAccordion.tsx b/packages/app/components/landing_page/LandingPageAccordion.tsx index 89308a5c2..f90011fc5 100644 --- a/packages/app/components/landing_page/LandingPageAccordion.tsx +++ b/packages/app/components/landing_page/LandingPageAccordion.tsx @@ -7,13 +7,23 @@ import loadStyles from './landingpage.style'; import { FAQ_ITEMS } from './constants'; import useTheme from 'app/hooks/useTheme'; import PackRatPreview from 'app/assets/PackRat Preview.jpg'; -import { useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import useResponsive from 'app/hooks/useResponsive'; import { Platform } from 'react-native'; const RButton: any = OriginalRButton; -export const LandingPageAccordion = ({ title, content, iconName }) => { +interface LandingPageAccordionProps { + title: string; + content: string; + iconName: string; +} + +export const LandingPageAccordion = ({ + title, + content, + iconName, +}: LandingPageAccordionProps) => { const styles = useCustomStyles(loadStyles); const { currentTheme } = useTheme(); const [index, setIndex] = useState(0); @@ -43,72 +53,77 @@ export const LandingPageAccordion = ({ title, content, iconName }) => { }; return ( - { - Platform.OS === 'web' ? ( - - - - - - - - - {data.content} - + + + + - - - - - - + - - ) : ( - - - - - {title} - - - + {data.content} + + + + + - {expanded && ( - - {content} - - )} - - ) - } + + + ) : ( + + + + + {title} + + + + + + {expanded && ( + + {content} + + )} + + )} ); }; diff --git a/packages/app/components/landing_page/Pricing.tsx b/packages/app/components/landing_page/Pricing.tsx index a083bd7b0..3e5926587 100644 --- a/packages/app/components/landing_page/Pricing.tsx +++ b/packages/app/components/landing_page/Pricing.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { RButton, RText } from '@packrat/ui'; import useTheme from 'app/hooks/useTheme'; import useResponsive from 'app/hooks/useResponsive'; @@ -15,13 +16,29 @@ export const Pricing = () => { - + Explore PackRat with Our Free Subscription Plan! - + Get Started with PackRat—Absolutely Free! - + We’re thrilled to offer you our Free Subscription Plan so you can explore and manage your trips with PackRat at no cost! This plan is designed to give you full access to a range of features, making your @@ -29,10 +46,24 @@ export const Pricing = () => { - + Free Access - + $0 @@ -46,9 +77,10 @@ export const Pricing = () => { - {PricingData.freeVersion.map((index) => { + {PricingData.freeVersion.map((index, i) => { return ( { alignItems: 'center', justifyContent: 'center', gap: 20, - }, card: { flex: 1, diff --git a/packages/app/components/landing_page/index.tsx b/packages/app/components/landing_page/index.tsx index b1c2abc24..594537e23 100644 --- a/packages/app/components/landing_page/index.tsx +++ b/packages/app/components/landing_page/index.tsx @@ -1,467 +1,206 @@ import React from 'react'; import { StatusBar } from 'expo-status-bar'; import { Platform, ScrollView, View, Text } from 'react-native'; -import PackRatPreview from 'app/assets/PackRat Preview.jpg'; -import PackRatPreviewLeft from 'app/assets/PackRat Preview_Left.jpg'; -import PackRatPreviewRight from 'app/assets/PackRat Preview_Right.jpg'; -import AppleLink from 'app/assets/applelink.svg'; +import { MaterialCommunityIcons } from '@expo/vector-icons'; import { RButton as OriginalRButton, RText, RStack as OriginalRStack, RH1, - RCard, - RH3, - YStack, RImage, + RLink, } from '@packrat/ui'; - -import useTheme from '../../hooks/useTheme'; -import { MaterialCommunityIcons } from '@expo/vector-icons'; -import { RLink } from '@packrat/ui'; +import PackRatPreview from 'app/assets/PackRat Preview.jpg'; +import PackRatPreviewLeft from 'app/assets/PackRat Preview_Left.jpg'; +import PackRatPreviewRight from 'app/assets/PackRat Preview_Right.jpg'; +import useTheme from 'app/hooks/useTheme'; import useCustomStyles from 'app/hooks/useCustomStyles'; -import { FAQ_ITEMS } from './constants'; -import { LandingPageAccordion } from './LandingPageAccordion'; -import loadStyles from './landingpage.style'; -import { Redirect } from 'app/components/Redirect'; import useResponsive from 'app/hooks/useResponsive'; -import Footer from 'app/components/footer/Footer'; +import loadStyles from './landingpage.style'; +import { LandingPageAccordion } from './LandingPageAccordion'; import { FAQS } from './FAQS'; import { Pricing } from './Pricing'; +import Footer from 'app/components/footer/Footer'; const RButton: any = OriginalRButton; const RStack: any = OriginalRStack; +const AppBadges = ({ currentTheme }: { currentTheme: any }) => ( + + + + + + + + + + + + + + +); + +const BadgeText = ({ + primary, + secondary, + currentTheme, +}: { + primary: string; + secondary: string; + currentTheme: any; +}) => ( + + {primary} + {secondary} + +); + +const badgeStyle = (currentTheme: any) => ({ + width: 160, + height: 45, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + backgroundColor: currentTheme.colors.textPrimary, + borderWidth: 1, + borderColor: currentTheme.colors.cardBorderPrimary, + borderRadius: 8, + paddingHorizontal: 8, +}); + +const badgeTextStyle = { + primary: (currentTheme: any) => ({ + color: currentTheme.colors.background, + fontSize: 14, + fontWeight: 'normal', + position: 'relative', + top: '0.4rem', + }), + secondary: (currentTheme: any) => ({ + color: currentTheme.colors.background, + fontSize: 19, + fontWeight: 'bold', + position: 'relative', + bottom: '0.3rem', + }), +}; + +const FeatureImages = () => ( + + + + + +); + const LandingPage = () => { const { currentTheme } = useTheme(); const styles = useCustomStyles(loadStyles); - const { xs, sm, md, lg, xl, xxl } = useResponsive(); + const { xs, sm, md } = useResponsive(); return ( - {Platform.OS === 'web' ? ( - - - - - - The Ultimate Travel App - - - - PackRat is the ultimate adventure planner designed for those who - love to explore the great outdoors. Plan and organize your trips - with ease, whether it's a weekend camping trip, a day hike, or a - cross-country road trip. - - - {Platform.OS === 'web' && ( - - - - - - - - - - Get it on the - - - App Store - - - - - - - - - - - - Get it on - - - Google Play - - - - - - - )} - - - - - - - - - - Signup - - - - - - - - - - - - - - - - - - Discover how the PackRat app is designed to make your adventures - easier and more enjoyable. - - - With a suite of powerful features tailored specifically for - backpackers, you'll have everything you need right at your - fingertips. From seamless route planning to real-time weather - updates, PackRat ensures you're prepared for every step of your - journey. Dive into the key features below to see how we can help - you elevate your backpacking experience: - - - - - - - - - - - - - - ) : ( - - - {Platform.OS === 'web' ? ( - - PackRat - - ) : ( - - PackRat - - )} - - The Ultimate Travel App - - - - {/* */} - {/* */} - - - PackRat is the ultimate adventure planner designed for those who - love to explore the great outdoors. Plan and organize your trips - with ease, whether it's a weekend camping trip, a day hike, or a - cross-country road trip. - - {Platform.OS === 'web' && ( - - - - - - - Download on the App Store - - - - - - - - Download on Google Play - - - - - - - - Use on Web - - - - )} - - {FAQ_ITEMS.map((item, index) => ( - - ))} - - - - - - Get Started - - - - - {/* */} - - - )} + + + + ); }; +const HeroSection = ({ currentTheme, styles, isSmallScreen }: any) => ( + + + + The Ultimate Travel App + + + PackRat is the ultimate adventure planner designed for those who love to + explore the great outdoors. Plan and organize your trips with ease, + whether it's a weekend camping trip, a day hike, or a cross-country road + trip. + + + + + + + + Signup + + + + + +); + +const SecondaryContent = ({ styles }: { styles: any }) => ( + + + + Discover how the PackRat app is designed to make your adventures easier + and more enjoyable. + + + From seamless route planning to real-time weather updates, PackRat + ensures you're prepared for every step of your journey. + + + + + +