diff --git a/api/_client.ts b/api/_client.ts index ccb304d..0d6667a 100644 --- a/api/_client.ts +++ b/api/_client.ts @@ -1,12 +1,12 @@ import axiosInstance from "./_axiosInstance"; -import { AuthLoginResponse, Pagination, QuestionResponse, UserResponse } from "./types"; +import { AuthLoginResponse, CategoryResponse, Pagination, QuestionResponse, UserResponse } from "./types"; -export const get_questions = async (page: number, test_id?: number, question_id?: number) => { +export const get_questions = async (page: number, test_id?: number, category_id?: number) => { const response = await axiosInstance.get>("/api/questions/", { params: { page, test_id, - question_id + category_id } }) @@ -29,6 +29,14 @@ export const get_current_user = async () => { return response.data; } +export const get_categories = async () => { + const response = await axiosInstance.get<{ + data: CategoryResponse[] + }>("/api/categories/"); + + return response.data; +} + export const post_login = async (email: string, password: string) => { const response = await axiosInstance.post("/api/auth/login/", { email, diff --git a/api/categories.ts b/api/categories.ts new file mode 100644 index 0000000..98259f5 --- /dev/null +++ b/api/categories.ts @@ -0,0 +1,12 @@ +import { useQuery } from "@tanstack/react-query"; +import { get_categories } from "./_client"; + +export const useCategories = () => { + return useQuery({ + queryKey: ['categories'], + queryFn: async () => { + const response = await get_categories(); + return response.data; + } + }); +} \ No newline at end of file diff --git a/api/questions.ts b/api/questions.ts index aa34fed..5381379 100644 --- a/api/questions.ts +++ b/api/questions.ts @@ -4,12 +4,12 @@ import { get_question, get_questions } from "./_client"; interface useQuestionsAttr { page?: number; test_id?: number; - question_id?: number; + category_id?: number; } -export const useQuestions = ({ page = 1, test_id, question_id }: useQuestionsAttr = { }) => { +export const useQuestions = ({ page = 1, test_id, category_id }: useQuestionsAttr = { }) => { return useQuery({ - queryKey: ['questions', page, test_id, question_id], - queryFn: () => get_questions(page, test_id, question_id) + queryKey: ['questions', page, test_id, category_id], + queryFn: () => get_questions(page, test_id, category_id) }) } diff --git a/app/(tabs)/questions.tsx b/app/(tabs)/questions.tsx index 894f341..a2f12e1 100644 --- a/app/(tabs)/questions.tsx +++ b/app/(tabs)/questions.tsx @@ -1,34 +1,66 @@ -import { View } from 'react-native'; +import { ScrollView, View } from "react-native"; -import { useQuestions } from '@/api'; -import Question from '@/components/question'; -import Content from '@/components/ui/content'; -import { ThemedText } from '@/components/ui/themed-text'; -import { router } from 'expo-router'; +import { useQuestions } from "@/api"; +import { QuestionResponse } from "@/api/types"; +import useTaxonomyContext from "@/components/providers/taxonomy-provider/hook"; +import Question from "@/components/question"; +import Content from "@/components/ui/content"; +import CustomSelect from "@/components/ui/custom-select"; +import PaginationList from "@/components/ui/pagination-list"; +import { ThemedText } from "@/components/ui/themed-text"; +import { router } from "expo-router"; +import { useRef, useState } from "react"; export default function QuestionsScreen() { - const { data: questions, isLoading: isLoadingQuestions } = useQuestions(); + const [category, setCategory] = useState(undefined); + const [page, setPage] = useState(1); + const { categories } = useTaxonomyContext(); + const scrollRef = useRef(null); + const { data: questionsPagination, isLoading } = useQuestions({ + page: page, + category_id: category + }); - const questionsLoaded = !isLoadingQuestions && questions && questions.meta.total > 0; + const categoryOptions = categories.map((cat) => { + return { + label: cat.name, + value: String(cat.id), + }; + }); + const handleChangeCategory = (value: string) => { + setPage(1); + if(value === "all") + setCategory(undefined); + else + setCategory(+value); + } return ( - - Questions + + + Questions + - - {questionsLoaded && - questions.data.map((question) => ( - router.push(`/questions/${question.id}`)} - /> - ))} - {isLoadingQuestions && Array.from({ length: 5 }).map((_, i) => ( - - ))} + + - + + + pagination={questionsPagination} + renderItem={(item) => ( + router.push(`/questions/${item.id}`)} /> + )} + skeleton={} + currentPage={page} + setCurrentPage={setPage} + scrollView={scrollRef} + isLoadingPage={isLoading} + /> - ) -} \ No newline at end of file + ); +} diff --git a/app/_layout.tsx b/app/_layout.tsx index d6c46de..321bd59 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -1,50 +1,26 @@ -import { - DarkTheme, - DefaultTheme, - ThemeProvider, -} from "@react-navigation/native"; -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { Stack } from "expo-router"; import { StatusBar } from "expo-status-bar"; import "react-native-reanimated"; -import { useColorScheme } from "@/hooks/use-color-scheme"; -import AuthProvider from "@/components/providers/auth-provider"; -import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider"; +import IndexProvider from "@/components/providers/index-provider"; import "@/global.css"; -import { ToastProvider } from 'react-native-toast-notifications'; export const unstable_settings = { anchor: "(tabs)", }; -const queryClient = new QueryClient(); - export default function RootLayout() { - const colorScheme = useColorScheme(); - const mode = colorScheme === "dark" ? "dark" : "light"; - return ( - - - - - - - - - - - - - - - + + + + + + + ); } diff --git a/components/providers/auth-provider/context.tsx b/components/providers/auth-provider/context.ts similarity index 100% rename from components/providers/auth-provider/context.tsx rename to components/providers/auth-provider/context.ts diff --git a/components/providers/index-provider/index.tsx b/components/providers/index-provider/index.tsx new file mode 100644 index 0000000..836a82f --- /dev/null +++ b/components/providers/index-provider/index.tsx @@ -0,0 +1,46 @@ +import { + DarkTheme, + DefaultTheme, + ThemeProvider, +} from "@react-navigation/native"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import "react-native-reanimated"; + +import AuthProvider from "@/components/providers/auth-provider"; +import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider"; +import "@/global.css"; +import { useColorScheme } from "@/hooks/use-color-scheme"; +import { ReactNode } from "react"; +import { ToastProvider } from "react-native-toast-notifications"; +import TaxonomyProvider from "../taxonomy-provider"; + +interface IndexProviderProps { + children: ReactNode; +} +const queryClient = new QueryClient(); + +const IndexProvider = ({ children }: IndexProviderProps) => { + const colorScheme = useColorScheme(); + const mode = colorScheme === "dark" ? "dark" : "light"; + + return ( + + + + + + + {children} + + + + + + + ); +}; + + +export default IndexProvider; \ No newline at end of file diff --git a/components/providers/taxonomy-provider/context.ts b/components/providers/taxonomy-provider/context.ts new file mode 100644 index 0000000..c4eb013 --- /dev/null +++ b/components/providers/taxonomy-provider/context.ts @@ -0,0 +1,12 @@ +import { CategoryResponse } from "@/api/types"; +import { createContext } from "react"; + +interface TaxonomyContextType { + categories: CategoryResponse[]; +} + +const TaxonomyContext = createContext({ + categories: [] +}); + +export default TaxonomyContext; \ No newline at end of file diff --git a/components/providers/taxonomy-provider/hook.ts b/components/providers/taxonomy-provider/hook.ts new file mode 100644 index 0000000..fd5260e --- /dev/null +++ b/components/providers/taxonomy-provider/hook.ts @@ -0,0 +1,6 @@ +import { useContext } from "react"; +import TaxonomyContext from "./context"; + +const useTaxonomyContext = () => useContext(TaxonomyContext); + +export default useTaxonomyContext; \ No newline at end of file diff --git a/components/providers/taxonomy-provider/index.tsx b/components/providers/taxonomy-provider/index.tsx new file mode 100644 index 0000000..4451599 --- /dev/null +++ b/components/providers/taxonomy-provider/index.tsx @@ -0,0 +1,29 @@ +import { useCategories } from "@/api/categories"; +import { CategoryResponse } from "@/api/types"; +import { ReactNode, useMemo } from "react"; +import TaxonomyContext from "./context"; + +interface TaxonomyProviderProps { + children: ReactNode; +} + +const TaxonomyProvider = ({children}: TaxonomyProviderProps) => { + const { data: categories } = useCategories(); + + const cats = useMemo(() => { + if(categories) + return categories; + + return []; + }, [categories]) + + return ( + + {children} + + ) +} + +export default TaxonomyProvider; \ No newline at end of file diff --git a/components/ui/content.tsx b/components/ui/content.tsx index a6cec6f..06427ca 100644 --- a/components/ui/content.tsx +++ b/components/ui/content.tsx @@ -1,14 +1,20 @@ import { ContentPadding } from "@/constants/theme"; -import { ReactNode } from "react"; -import { ScrollView, StyleSheet } from "react-native"; +import { forwardRef } from "react"; +import { ScrollView, ScrollViewProps, StyleSheet } from "react-native"; -interface ContentProps { - children?: ReactNode +interface ContentProps extends ScrollViewProps { + children?: React.ReactNode; } -const Content = ({ children }: ContentProps) => { - return { children } -} +const Content = forwardRef(({ children, ...rest }, ref) => { + return ( + + {children} + + ); +}); + +Content.displayName = "Content"; const styles = StyleSheet.create({ content: { diff --git a/components/ui/custom-select/index.tsx b/components/ui/custom-select/index.tsx new file mode 100644 index 0000000..cba7a90 --- /dev/null +++ b/components/ui/custom-select/index.tsx @@ -0,0 +1,56 @@ +import { useThemeColor } from "@/hooks/use-theme-color"; +import { FontAwesome5 } from "@expo/vector-icons"; +import { useMemo } from "react"; +import { Select, SelectBackdrop, SelectContent, SelectDragIndicator, SelectDragIndicatorWrapper, SelectInput, SelectItem, SelectPortal, SelectTrigger } from "../select"; + +type SelectOption = { + label: string; + value: string; +} +interface CustomSelectProps { + placeholder?: string; + options: SelectOption[], + noneOption?: SelectOption; + defaultValue?: string; + selectedValue?:string; + onValueChange?: (value: string) => void; +} + +const CustomSelect = ({ + options, + onValueChange, + defaultValue, + selectedValue, + noneOption, + placeholder = "Select option" +}: CustomSelectProps) => { + const optionsComputed = useMemo(() => { + if(noneOption) + return [noneOption, ...options]; + + return options; + }, [options, noneOption]); + const backgroundColor = useThemeColor({ }, "background"); + + return ( + + ) +} + +export default CustomSelect; \ No newline at end of file diff --git a/components/ui/pagination-list/index.tsx b/components/ui/pagination-list/index.tsx new file mode 100644 index 0000000..2116961 --- /dev/null +++ b/components/ui/pagination-list/index.tsx @@ -0,0 +1,86 @@ +import { Pagination } from "@/api/types"; +import { ReactElement, RefObject } from "react"; +import { ScrollView, View } from "react-native"; +import { Button, ButtonText } from "../button"; +import { ThemedText } from "../themed-text"; + +type CustomFlatListProps = { + pagination?: Pagination; + skeleton: ReactElement; + skeletonStartCount?: number; + currentPage: number; + setCurrentPage: (v: number) => void; + isLoadingPage: boolean; + renderItem: (item: T) => ReactElement; + pagesRadius?: number; + dividerHeight?: number; + scrollView?: RefObject; +}; + +const PaginationList = ({ + pagination, + skeleton, + currentPage, + setCurrentPage, + isLoadingPage, + renderItem, + scrollView, + pagesRadius = 3, + skeletonStartCount = 4, + dividerHeight = 16, +}: CustomFlatListProps) => { + const renderSkeleton = () => { + const skeletonCount = pagination + ? pagination.meta.per_page + : skeletonStartCount; + return Array.from({ length: skeletonCount }).map((_, i) => ( + + {skeleton} + + )); + }; + const handlePagePress = (page: number) => { + if (page === currentPage) return; + setCurrentPage(page); + scrollView?.current?.scrollTo({ y: 0, animated: false }); + }; + + if (!pagination || isLoadingPage) return renderSkeleton(); + + return ( + + {pagination.data.map((item, index) => ( + + {renderItem(item)} + + + ))} + {pagination.data.length === 0 && ( + No items found. + )} + + {currentPage > 1 && ( + + )} + + {currentPage !== pagination.meta.last_page && ( + + )} + + + ); +}; + +export default PaginationList; diff --git a/components/ui/select/index.tsx b/components/ui/select/index.tsx new file mode 100644 index 0000000..1bfd5d2 --- /dev/null +++ b/components/ui/select/index.tsx @@ -0,0 +1,277 @@ +'use client'; + +import React from 'react'; +import { tva } from '@gluestack-ui/utils/nativewind-utils'; +import { PrimitiveIcon, UIIcon } from '@gluestack-ui/core/icon/creator'; +import { + withStyleContext, + useStyleContext, +} from '@gluestack-ui/utils/nativewind-utils'; +import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils'; +import { createSelect } from '@gluestack-ui/core/select/creator'; +import { cssInterop } from 'nativewind'; +import { + Actionsheet, + ActionsheetContent, + ActionsheetItem, + ActionsheetItemText, + ActionsheetDragIndicator, + ActionsheetDragIndicatorWrapper, + ActionsheetBackdrop, + ActionsheetScrollView, + ActionsheetVirtualizedList, + ActionsheetFlatList, + ActionsheetSectionList, + ActionsheetSectionHeaderText, +} from './select-actionsheet'; +import { Pressable, View, TextInput } from 'react-native'; + +const SelectTriggerWrapper = React.forwardRef< + React.ComponentRef, + React.ComponentProps +>(function SelectTriggerWrapper({ ...props }, ref) { + return ; +}); + +const selectIconStyle = tva({ + base: 'text-background-500 fill-none', + parentVariants: { + size: { + '2xs': 'h-3 w-3', + 'xs': 'h-3.5 w-3.5', + 'sm': 'h-4 w-4', + 'md': 'h-[18px] w-[18px]', + 'lg': 'h-5 w-5', + 'xl': 'h-6 w-6', + }, + }, +}); + +const selectStyle = tva({ + base: '', +}); + +const selectTriggerStyle = tva({ + base: 'border border-background-300 rounded flex-row items-center overflow-hidden data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:data-[hover=true]:border-background-300', + variants: { + size: { + xl: 'h-12', + lg: 'h-11', + md: 'h-10', + sm: 'h-9', + }, + variant: { + underlined: + 'border-0 border-b rounded-none data-[hover=true]:border-primary-700 data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_-1px_0_0] data-[focus=true]:web:shadow-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700', + outline: + 'data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_0_0_1px] data-[focus=true]:data-[hover=true]:web:shadow-primary-600 data-[invalid=true]:web:shadow-[inset_0_0_0_1px] data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700 data-[invalid=true]:data-[hover=true]:border-error-700', + rounded: + 'rounded-full data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_0_0_1px] data-[focus=true]:web:shadow-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700', + }, + }, +}); + +const selectInputStyle = tva({ + base: 'px-3 placeholder:text-typography-500 web:w-full h-full text-typography-900 pointer-events-none web:outline-none ios:leading-[0px] py-0', + parentVariants: { + size: { + xl: 'text-xl', + lg: 'text-lg', + md: 'text-base', + sm: 'text-sm', + }, + variant: { + underlined: 'px-0', + outline: '', + rounded: 'px-4', + }, + }, +}); + +const UISelect = createSelect( + { + Root: View, + Trigger: withStyleContext(SelectTriggerWrapper), + Input: TextInput, + Icon: UIIcon, + }, + { + Portal: Actionsheet, + Backdrop: ActionsheetBackdrop, + Content: ActionsheetContent, + DragIndicator: ActionsheetDragIndicator, + DragIndicatorWrapper: ActionsheetDragIndicatorWrapper, + Item: ActionsheetItem, + ItemText: ActionsheetItemText, + ScrollView: ActionsheetScrollView, + VirtualizedList: ActionsheetVirtualizedList, + FlatList: ActionsheetFlatList, + SectionList: ActionsheetSectionList, + SectionHeaderText: ActionsheetSectionHeaderText, + } +); + +cssInterop(UISelect, { className: 'style' }); +cssInterop(UISelect.Input, { + className: { target: 'style', nativeStyleToProp: { textAlign: true } }, +}); +cssInterop(SelectTriggerWrapper, { className: 'style' }); + +cssInterop(PrimitiveIcon, { + className: { + target: 'style', + nativeStyleToProp: { + height: true, + width: true, + fill: true, + color: 'classNameColor', + stroke: true, + }, + }, +}); + +type ISelectProps = VariantProps & + React.ComponentProps & { className?: string }; + +const Select = React.forwardRef< + React.ComponentRef, + ISelectProps +>(function Select({ className, ...props }, ref) { + return ( + + ); +}); + +type ISelectTriggerProps = VariantProps & + React.ComponentProps & { className?: string }; + +const SelectTrigger = React.forwardRef< + React.ComponentRef, + ISelectTriggerProps +>(function SelectTrigger( + { className, size = 'md', variant = 'outline', ...props }, + ref +) { + return ( + + ); +}); + +type ISelectInputProps = VariantProps & + React.ComponentProps & { className?: string }; + +const SelectInput = React.forwardRef< + React.ComponentRef, + ISelectInputProps +>(function SelectInput({ className, ...props }, ref) { + const { size: parentSize, variant: parentVariant } = useStyleContext(); + return ( + + ); +}); + +type ISelectIcon = VariantProps & + React.ComponentProps & { className?: string }; + +const SelectIcon = React.forwardRef< + React.ComponentRef, + ISelectIcon +>(function SelectIcon({ className, size, ...props }, ref) { + const { size: parentSize } = useStyleContext(); + if (typeof size === 'number') { + return ( + + ); + } else if ( + //@ts-expect-error : web only + (props?.height !== undefined || props?.width !== undefined) && + size === undefined + ) { + return ( + + ); + } + return ( + + ); +}); + +Select.displayName = 'Select'; +SelectTrigger.displayName = 'SelectTrigger'; +SelectInput.displayName = 'SelectInput'; +SelectIcon.displayName = 'SelectIcon'; + +// Actionsheet Components +const SelectPortal = UISelect.Portal; +const SelectBackdrop = UISelect.Backdrop; +const SelectContent = UISelect.Content; +const SelectDragIndicator = UISelect.DragIndicator; +const SelectDragIndicatorWrapper = UISelect.DragIndicatorWrapper; +const SelectItem = UISelect.Item; +const SelectScrollView = UISelect.ScrollView; +const SelectVirtualizedList = UISelect.VirtualizedList; +const SelectFlatList = UISelect.FlatList; +const SelectSectionList = UISelect.SectionList; +const SelectSectionHeaderText = UISelect.SectionHeaderText; + +export { + Select, + SelectTrigger, + SelectInput, + SelectIcon, + SelectPortal, + SelectBackdrop, + SelectContent, + SelectDragIndicator, + SelectDragIndicatorWrapper, + SelectItem, + SelectScrollView, + SelectVirtualizedList, + SelectFlatList, + SelectSectionList, + SelectSectionHeaderText, +}; diff --git a/components/ui/select/select-actionsheet.tsx b/components/ui/select/select-actionsheet.tsx new file mode 100644 index 0000000..6e0c530 --- /dev/null +++ b/components/ui/select/select-actionsheet.tsx @@ -0,0 +1,562 @@ +'use client'; + +import { H4 } from '@expo/html-elements'; +import { createActionsheet } from '@gluestack-ui/core/actionsheet/creator'; +import { + Pressable, + View, + Text, + ScrollView, + VirtualizedList, + FlatList, + SectionList, + ViewStyle, +} from 'react-native'; +import { PrimitiveIcon, UIIcon } from '@gluestack-ui/core/icon/creator'; +import { tva } from '@gluestack-ui/utils/nativewind-utils'; +import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils'; +import { withStyleContext } from '@gluestack-ui/utils/nativewind-utils'; +import { cssInterop } from 'nativewind'; +import { + Motion, + AnimatePresence, + createMotionAnimatedComponent, + MotionComponentProps, +} from '@legendapp/motion'; + +import React from 'react'; + +type IAnimatedPressableProps = React.ComponentProps & + MotionComponentProps; + +const AnimatedPressable = createMotionAnimatedComponent( + Pressable +) as React.ComponentType; + +type IMotionViewProps = React.ComponentProps & + MotionComponentProps; + +const MotionView = Motion.View as React.ComponentType; + +export const UIActionsheet = createActionsheet({ + Root: View, + Content: withStyleContext(MotionView), + Item: withStyleContext(Pressable), + ItemText: Text, + DragIndicator: View, + IndicatorWrapper: View, + Backdrop: AnimatedPressable, + ScrollView: ScrollView, + VirtualizedList: VirtualizedList, + FlatList: FlatList, + SectionList: SectionList, + SectionHeaderText: H4, + Icon: UIIcon, + AnimatePresence: AnimatePresence, +}); + +cssInterop(UIActionsheet, { className: 'style' }); +cssInterop(UIActionsheet.Content, { className: 'style' }); +cssInterop(UIActionsheet.Item, { className: 'style' }); +cssInterop(UIActionsheet.ItemText, { className: 'style' }); +cssInterop(UIActionsheet.DragIndicator, { className: 'style' }); +cssInterop(UIActionsheet.DragIndicatorWrapper, { className: 'style' }); +cssInterop(UIActionsheet.Backdrop, { className: 'style' }); +cssInterop(UIActionsheet.ScrollView, { + className: 'style', + contentContainerClassName: 'contentContainerStyle', + indicatorClassName: 'indicatorStyle', +}); +cssInterop(UIActionsheet.VirtualizedList, { + className: 'style', + ListFooterComponentClassName: 'ListFooterComponentStyle', + ListHeaderComponentClassName: 'ListHeaderComponentStyle', + contentContainerClassName: 'contentContainerStyle', + indicatorClassName: 'indicatorStyle', +}); +cssInterop(UIActionsheet.FlatList, { + className: 'style', + ListFooterComponentClassName: 'ListFooterComponentStyle', + ListHeaderComponentClassName: 'ListHeaderComponentStyle', + columnWrapperClassName: 'columnWrapperStyle', + contentContainerClassName: 'contentContainerStyle', + indicatorClassName: 'indicatorStyle', +}); +cssInterop(UIActionsheet.SectionList, { className: 'style' }); +cssInterop(UIActionsheet.SectionHeaderText, { className: 'style' }); +cssInterop(PrimitiveIcon, { + className: { + target: 'style', + nativeStyleToProp: { + height: true, + width: true, + fill: true, + color: 'classNameColor', + stroke: true, + }, + }, +}); + +const actionsheetStyle = tva({ base: 'w-full h-full web:pointer-events-none' }); + +const actionsheetContentStyle = tva({ + base: 'items-center rounded-tl-3xl rounded-tr-3xl p-2 bg-background-0 web:pointer-events-auto web:select-none shadow-lg pb-safe', +}); + +const actionsheetItemStyle = tva({ + base: 'w-full flex-row items-center p-3 rounded-sm data-[disabled=true]:opacity-40 data-[disabled=true]:web:pointer-events-auto data-[disabled=true]:web:cursor-not-allowed hover:bg-background-50 active:bg-background-100 data-[focus=true]:bg-background-100 web:data-[focus-visible=true]:bg-background-100 data-[checked=true]:bg-background-100', +}); + +const actionsheetItemTextStyle = tva({ + base: 'text-typography-700 font-normal font-body tracking-md text-left mx-2', + variants: { + isTruncated: { + true: '', + }, + bold: { + true: 'font-bold', + }, + underline: { + true: 'underline', + }, + strikeThrough: { + true: 'line-through', + }, + size: { + '2xs': 'text-2xs', + 'xs': 'text-xs', + 'sm': 'text-sm', + 'md': 'text-base', + 'lg': 'text-lg', + 'xl': 'text-xl', + '2xl': 'text-2xl', + '3xl': 'text-3xl', + '4xl': 'text-4xl', + '5xl': 'text-5xl', + '6xl': 'text-6xl', + }, + }, + defaultVariants: { + size: 'md', + }, +}); + +const actionsheetDragIndicatorStyle = tva({ + base: 'w-16 h-1 bg-background-400 rounded-full', +}); + +const actionsheetDragIndicatorWrapperStyle = tva({ + base: 'w-full py-1 items-center', +}); + +const actionsheetBackdropStyle = tva({ + base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default web:pointer-events-auto', +}); + +const actionsheetScrollViewStyle = tva({ + base: 'w-full h-auto', +}); + +const actionsheetVirtualizedListStyle = tva({ + base: 'w-full h-auto', +}); + +const actionsheetFlatListStyle = tva({ + base: 'w-full h-auto', +}); + +const actionsheetSectionListStyle = tva({ + base: 'w-full h-auto', +}); + +const actionsheetSectionHeaderTextStyle = tva({ + base: 'leading-5 font-bold font-heading my-0 text-typography-500 p-3 uppercase', + variants: { + isTruncated: { + true: '', + }, + bold: { + true: 'font-bold', + }, + underline: { + true: 'underline', + }, + strikeThrough: { + true: 'line-through', + }, + size: { + '5xl': 'text-5xl', + '4xl': 'text-4xl', + '3xl': 'text-3xl', + '2xl': 'text-2xl', + 'xl': 'text-xl', + 'lg': 'text-lg', + 'md': 'text-base', + 'sm': 'text-sm', + 'xs': 'text-xs', + }, + + sub: { + true: 'text-xs', + }, + italic: { + true: 'italic', + }, + highlight: { + true: 'bg-yellow500', + }, + }, + defaultVariants: { + size: 'xs', + }, +}); + +const actionsheetIconStyle = tva({ + base: 'text-typography-900', + variants: { + size: { + '2xs': 'h-3 w-3', + 'xs': 'h-3.5 w-3.5', + 'sm': 'h-4 w-4', + 'md': 'w-4 h-4', + 'lg': 'h-5 w-5', + 'xl': 'h-6 w-6', + }, + }, +}); + +type IActionsheetProps = VariantProps & + React.ComponentProps & { className?: string }; + +type IActionsheetContentProps = VariantProps & + React.ComponentProps & { className?: string }; + +type IActionsheetItemProps = VariantProps & + React.ComponentProps & { className?: string }; + +type IActionsheetItemTextProps = VariantProps & + React.ComponentProps & { className?: string }; + +type IActionsheetDragIndicatorProps = VariantProps< + typeof actionsheetDragIndicatorStyle +> & + React.ComponentProps & { + className?: string; + }; + +type IActionsheetDragIndicatorWrapperProps = VariantProps< + typeof actionsheetDragIndicatorWrapperStyle +> & + React.ComponentProps & { + className?: string; + }; + +type IActionsheetBackdropProps = VariantProps & + React.ComponentProps & { + className?: string; + }; + +type IActionsheetScrollViewProps = VariantProps< + typeof actionsheetScrollViewStyle +> & + React.ComponentProps & { + className?: string; + }; + +type IActionsheetVirtualizedListProps = VariantProps< + typeof actionsheetVirtualizedListStyle +> & + React.ComponentProps & { + className?: string; + }; + +type IActionsheetFlatListProps = VariantProps & + React.ComponentProps & { + className?: string; + }; + +type IActionsheetSectionListProps = VariantProps< + typeof actionsheetSectionListStyle +> & + React.ComponentProps & { + className?: string; + }; + +type IActionsheetSectionHeaderTextProps = VariantProps< + typeof actionsheetSectionHeaderTextStyle +> & + React.ComponentProps & { + className?: string; + }; + +type IActionsheetIconProps = VariantProps & + React.ComponentProps & { + className?: string; + as?: React.ElementType; + }; + +const Actionsheet = React.forwardRef< + React.ComponentRef, + IActionsheetProps +>(function Actionsheet({ className, ...props }, ref) { + return ( + + ); +}); + +const ActionsheetContent = React.forwardRef< + React.ComponentRef, + IActionsheetContentProps & { className?: string } +>(function ActionsheetContent({ className, ...props }, ref) { + return ( + + ); +}); + +const ActionsheetItem = React.forwardRef< + React.ComponentRef, + IActionsheetItemProps +>(function ActionsheetItem({ className, ...props }, ref) { + return ( + + ); +}); + +const ActionsheetItemText = React.forwardRef< + React.ComponentRef, + IActionsheetItemTextProps +>(function ActionsheetItemText( + { className, isTruncated, bold, underline, strikeThrough, size, ...props }, + ref +) { + return ( + + ); +}); + +const ActionsheetDragIndicator = React.forwardRef< + React.ComponentRef, + IActionsheetDragIndicatorProps +>(function ActionsheetDragIndicator({ className, ...props }, ref) { + return ( + + ); +}); + +const ActionsheetDragIndicatorWrapper = React.forwardRef< + React.ComponentRef, + IActionsheetDragIndicatorWrapperProps +>(function ActionsheetDragIndicatorWrapper({ className, ...props }, ref) { + return ( + + ); +}); + +const ActionsheetBackdrop = React.forwardRef< + React.ComponentRef, + IActionsheetBackdropProps +>(function ActionsheetBackdrop({ className, ...props }, ref) { + return ( + + ); +}); + +const ActionsheetScrollView = React.forwardRef< + React.ComponentRef, + IActionsheetScrollViewProps +>(function ActionsheetScrollView({ className, ...props }, ref) { + return ( + + ); +}); + +const ActionsheetVirtualizedList = React.forwardRef< + React.ComponentRef, + IActionsheetVirtualizedListProps +>(function ActionsheetVirtualizedList({ className, ...props }, ref) { + return ( + + ); +}); + +const ActionsheetFlatList = React.forwardRef< + React.ComponentRef, + IActionsheetFlatListProps +>(function ActionsheetFlatList({ className, ...props }, ref) { + return ( + + ); +}); + +const ActionsheetSectionList = React.forwardRef< + React.ComponentRef, + IActionsheetSectionListProps +>(function ActionsheetSectionList({ className, ...props }, ref) { + return ( + + ); +}); + +const ActionsheetSectionHeaderText = React.forwardRef< + React.ComponentRef, + IActionsheetSectionHeaderTextProps +>(function ActionsheetSectionHeaderText( + { + className, + isTruncated, + bold, + underline, + strikeThrough, + size, + sub, + italic, + highlight, + ...props + }, + ref +) { + return ( + + ); +}); + +const ActionsheetIcon = React.forwardRef< + React.ComponentRef, + IActionsheetIconProps +>(function ActionsheetIcon( + { className, as: AsComp, size = 'sm', ...props }, + ref +) { + if (AsComp) { + return ( + + ); + } + return ( + + ); +}); + +export { + Actionsheet, + ActionsheetContent, + ActionsheetItem, + ActionsheetItemText, + ActionsheetDragIndicator, + ActionsheetDragIndicatorWrapper, + ActionsheetBackdrop, + ActionsheetScrollView, + ActionsheetVirtualizedList, + ActionsheetFlatList, + ActionsheetSectionList, + ActionsheetSectionHeaderText, + ActionsheetIcon, +};