From 05916b959c76e32d571cdae0e1c1e8986811be99 Mon Sep 17 00:00:00 2001 From: Andrii Solianyk Date: Mon, 5 May 2025 08:57:02 +0200 Subject: [PATCH] fix --- ArtisanConnect/components/ui/input/index.tsx | 217 +++++++ ArtisanConnect/components/ui/select/index.tsx | 277 +++++++++ .../ui/select/select-actionsheet.tsx | 562 ++++++++++++++++++ .../components/ui/textarea/index.tsx | 93 +++ 4 files changed, 1149 insertions(+) create mode 100644 ArtisanConnect/components/ui/input/index.tsx create mode 100644 ArtisanConnect/components/ui/select/index.tsx create mode 100644 ArtisanConnect/components/ui/select/select-actionsheet.tsx create mode 100644 ArtisanConnect/components/ui/textarea/index.tsx diff --git a/ArtisanConnect/components/ui/input/index.tsx b/ArtisanConnect/components/ui/input/index.tsx new file mode 100644 index 0000000..60fdf0d --- /dev/null +++ b/ArtisanConnect/components/ui/input/index.tsx @@ -0,0 +1,217 @@ +'use client'; +import React from 'react'; +import { createInput } from '@gluestack-ui/input'; +import { View, Pressable, TextInput } from 'react-native'; +import { tva } from '@gluestack-ui/nativewind-utils/tva'; +import { + withStyleContext, + useStyleContext, +} from '@gluestack-ui/nativewind-utils/withStyleContext'; +import { cssInterop } from 'nativewind'; +import type { VariantProps } from '@gluestack-ui/nativewind-utils'; +import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon'; + +const SCOPE = 'INPUT'; + +const UIInput = createInput({ + Root: withStyleContext(View, SCOPE), + Icon: UIIcon, + Slot: Pressable, + Input: TextInput, +}); + +cssInterop(PrimitiveIcon, { + className: { + target: 'style', + nativeStyleToProp: { + height: true, + width: true, + fill: true, + color: 'classNameColor', + stroke: true, + }, + }, +}); + +const inputStyle = tva({ + base: 'border-background-300 flex-row overflow-hidden content-center data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[focus=true]:hover:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:hover:border-background-300 items-center', + + variants: { + size: { + xl: 'h-12', + lg: 'h-11', + md: 'h-10', + sm: 'h-9', + }, + + variant: { + underlined: + 'rounded-none border-b data-[invalid=true]:border-b-2 data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700', + + outline: + 'rounded border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-indicator-primary data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-indicator-error data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-indicator-error data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-indicator-error', + + rounded: + 'rounded-full border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-indicator-primary data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-indicator-error data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-indicator-error data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-indicator-error', + }, + }, +}); + +const inputIconStyle = tva({ + base: 'justify-center items-center text-typography-400 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 inputSlotStyle = tva({ + base: 'justify-center items-center web:disabled:cursor-not-allowed', +}); + +const inputFieldStyle = tva({ + base: 'flex-1 text-typography-900 py-0 px-3 placeholder:text-typography-500 h-full ios:leading-[0px] web:cursor-text web:data-[disabled=true]:cursor-not-allowed', + + parentVariants: { + variant: { + underlined: 'web:outline-0 web:outline-none px-0', + outline: 'web:outline-0 web:outline-none', + rounded: 'web:outline-0 web:outline-none px-4', + }, + + 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', + }, + }, +}); + +type IInputProps = React.ComponentProps & + VariantProps & { className?: string }; +const Input = React.forwardRef, IInputProps>( + function Input( + { className, variant = 'outline', size = 'md', ...props }, + ref + ) { + return ( + + ); + } +); + +type IInputIconProps = React.ComponentProps & + VariantProps & { + className?: string; + height?: number; + width?: number; + }; + +const InputIcon = React.forwardRef< + React.ComponentRef, + IInputIconProps +>(function InputIcon({ className, size, ...props }, ref) { + const { size: parentSize } = useStyleContext(SCOPE); + + if (typeof size === 'number') { + return ( + + ); + } else if ( + (props.height !== undefined || props.width !== undefined) && + size === undefined + ) { + return ( + + ); + } + return ( + + ); +}); + +type IInputSlotProps = React.ComponentProps & + VariantProps & { className?: string }; + +const InputSlot = React.forwardRef< + React.ComponentRef, + IInputSlotProps +>(function InputSlot({ className, ...props }, ref) { + return ( + + ); +}); + +type IInputFieldProps = React.ComponentProps & + VariantProps & { className?: string }; + +const InputField = React.forwardRef< + React.ComponentRef, + IInputFieldProps +>(function InputField({ className, ...props }, ref) { + const { variant: parentVariant, size: parentSize } = useStyleContext(SCOPE); + + return ( + + ); +}); + +Input.displayName = 'Input'; +InputIcon.displayName = 'InputIcon'; +InputSlot.displayName = 'InputSlot'; +InputField.displayName = 'InputField'; + +export { Input, InputField, InputIcon, InputSlot }; diff --git a/ArtisanConnect/components/ui/select/index.tsx b/ArtisanConnect/components/ui/select/index.tsx new file mode 100644 index 0000000..fb1270c --- /dev/null +++ b/ArtisanConnect/components/ui/select/index.tsx @@ -0,0 +1,277 @@ +'use client'; + +import React from 'react'; +import { tva } from '@gluestack-ui/nativewind-utils/tva'; +import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon'; +import { + withStyleContext, + useStyleContext, +} from '@gluestack-ui/nativewind-utils/withStyleContext'; +import type { VariantProps } from '@gluestack-ui/nativewind-utils'; +import { createSelect } from '@gluestack-ui/select'; +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: 'py-auto px-3 placeholder:text-typography-500 web:w-full h-full text-typography-900 pointer-events-none web:outline-none ios:leading-[0px]', + 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/ArtisanConnect/components/ui/select/select-actionsheet.tsx b/ArtisanConnect/components/ui/select/select-actionsheet.tsx new file mode 100644 index 0000000..e92ebcf --- /dev/null +++ b/ArtisanConnect/components/ui/select/select-actionsheet.tsx @@ -0,0 +1,562 @@ +'use client'; + +import { H4 } from '@expo/html-elements'; +import { createActionsheet } from '@gluestack-ui/actionsheet'; +import { + Pressable, + View, + Text, + ScrollView, + VirtualizedList, + FlatList, + SectionList, + ViewStyle, +} from 'react-native'; +import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon'; +import { tva } from '@gluestack-ui/nativewind-utils/tva'; +import type { VariantProps } from '@gluestack-ui/nativewind-utils'; +import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext'; +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', +}); + +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, +}; diff --git a/ArtisanConnect/components/ui/textarea/index.tsx b/ArtisanConnect/components/ui/textarea/index.tsx new file mode 100644 index 0000000..ec406f9 --- /dev/null +++ b/ArtisanConnect/components/ui/textarea/index.tsx @@ -0,0 +1,93 @@ +'use client'; +import React from 'react'; +import { createTextarea } from '@gluestack-ui/textarea'; +import { View, TextInput } from 'react-native'; +import { tva } from '@gluestack-ui/nativewind-utils/tva'; +import { + withStyleContext, + useStyleContext, +} from '@gluestack-ui/nativewind-utils/withStyleContext'; +import type { VariantProps } from '@gluestack-ui/nativewind-utils'; + +const SCOPE = 'TEXTAREA'; +const UITextarea = createTextarea({ + Root: withStyleContext(View, SCOPE), + Input: TextInput, +}); + +const textareaStyle = tva({ + base: 'w-full h-[100px] border border-background-300 rounded data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[focus=true]:data-[hover=true]:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:bg-background-50 data-[disabled=true]:data-[hover=true]:border-background-300', + + variants: { + variant: { + default: + 'data-[focus=true]:border-primary-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-indicator-primary data-[invalid=true]:border-error-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-indicator-error data-[invalid=true]:data-[hover=true]:border-error-700 data-[invalid=true]:data-[focus=true]:data-[hover=true]:border-primary-700 data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-1 data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-inset data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-indicator-primary data-[invalid=true]:data-[disabled=true]:data-[hover=true]:border-error-700 data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-1 data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-inset data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-indicator-error ', + }, + size: { + sm: '', + md: '', + lg: '', + xl: '', + }, + }, +}); + +const textareaInputStyle = tva({ + base: 'p-2 web:outline-0 web:outline-none flex-1 color-typography-900 align-text-top placeholder:text-typography-500 web:cursor-text web:data-[disabled=true]:cursor-not-allowed', + parentVariants: { + size: { + sm: 'text-sm', + md: 'text-base', + lg: 'text-lg', + xl: 'text-xl', + }, + }, +}); + +type ITextareaProps = React.ComponentProps & + VariantProps; + +const Textarea = React.forwardRef< + React.ComponentRef, + ITextareaProps +>(function Textarea( + { className, variant = 'default', size = 'md', ...props }, + ref +) { + return ( + + ); +}); + +type ITextareaInputProps = React.ComponentProps & + VariantProps; + +const TextareaInput = React.forwardRef< + React.ComponentRef, + ITextareaInputProps +>(function TextareaInput({ className, ...props }, ref) { + const { size: parentSize } = useStyleContext(SCOPE); + + return ( + + ); +}); + +Textarea.displayName = 'Textarea'; +TextareaInput.displayName = 'TextareaInput'; + +export { Textarea, TextareaInput };