@admin-layout/gluestack-ui-mobile 10.0.9-alpha.9 → 10.1.1-alpha.8

package/src/components/ui/textarea/index.web.tsx

@@ -0,0 +1,86 @@
+'use client';
+import React, { forwardRef } from 'react';
+import { createTextarea } from '@gluestack-ui/textarea';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
+import { cssInterop } from 'nativewind';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+const SCOPE = 'TEXTAREA';
+
+const StyledTextarea = forwardRef<HTMLTextAreaElement, any>(
+    ({ onChangeText, onChange, placeholder, placeholderTextColor, ...props }, ref) => {
+        const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+            if (onChange) {
+                onChange(e);
+            }
+            if (onChangeText) {
+                onChangeText(e.target.value);
+            }
+        };
+
+        return (
+            <textarea
+                ref={ref}
+                placeholder={placeholder}
+                onChange={handleChange}
+                style={{
+                    ...props.style,
+                    '::placeholder': {
+                        color: placeholderTextColor,
+                    },
+                }}
+                {...props}
+            />
+        );
+    },
+);
+
+StyledTextarea.displayName = 'StyledTextarea';
+
+const textareaStyle = tva({
+    base: 'px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
+    variants: {
+        size: {
+            sm: 'text-sm min-h-[80px]',
+            md: 'text-base min-h-[100px]',
+            lg: 'text-lg min-h-[120px]',
+        },
+        variant: {
+            outline: 'bg-transparent',
+            filled: 'bg-gray-100',
+            unstyled: '',
+        },
+        state: {
+            error: 'border-red-500 focus:ring-red-500',
+            success: 'border-green-500 focus:ring-green-500',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'outline',
+    },
+});
+
+type ITextareaProps = React.ComponentProps<typeof StyledTextarea> &
+    VariantProps<typeof textareaStyle> & {
+        className?: string;
+        onChangeText?: (text: string) => void;
+        placeholderTextColor?: string;
+    };
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, ITextareaProps>(
+    ({ className, size, variant, state, ...props }, ref) => {
+        return (
+            <StyledTextarea
+                ref={ref}
+                className={textareaStyle({ size, variant, state, class: className })}
+                {...props}
+            />
+        );
+    },
+);
+
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

package/src/components/ui/toast/index.web.tsx

@@ -0,0 +1,132 @@
+'use client';
+import React, { forwardRef, useEffect, useState } from 'react';
+import { createToast } from '@gluestack-ui/toast';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
+import { cssInterop } from 'nativewind';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { createPortal } from 'react-dom';
+
+const SCOPE = 'TOAST';
+
+const toastStyle = tva({
+    base: 'fixed flex items-center p-4 mb-4 rounded-lg shadow-lg transition-all duration-300 ease-in-out',
+    variants: {
+        variant: {
+            solid: 'bg-gray-800 text-white',
+            outline: 'bg-white border border-gray-300',
+            accent: 'border-l-4 border-blue-500 bg-white',
+        },
+        position: {
+            top: 'top-4 left-1/2 -translate-x-1/2',
+            'top-right': 'top-4 right-4',
+            'top-left': 'top-4 left-4',
+            bottom: 'bottom-4 left-1/2 -translate-x-1/2',
+            'bottom-right': 'bottom-4 right-4',
+            'bottom-left': 'bottom-4 left-4',
+        },
+        status: {
+            info: 'bg-blue-500 text-white',
+            success: 'bg-green-500 text-white',
+            warning: 'bg-yellow-500 text-white',
+            error: 'bg-red-500 text-white',
+        },
+    },
+    defaultVariants: {
+        variant: 'solid',
+        position: 'bottom',
+        status: 'info',
+    },
+});
+
+export const ToastTitle = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => (
+    <div ref={ref} className={`font-semibold ${className || ''}`} {...props} />
+));
+
+ToastTitle.displayName = 'ToastTitle';
+
+export const ToastDescription = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
+    ({ className, ...props }, ref) => <div ref={ref} className={`mt-1 ${className || ''}`} {...props} />,
+);
+
+ToastDescription.displayName = 'ToastDescription';
+
+type IToastProps = {
+    id?: string;
+    title?: string;
+    description?: string;
+    duration?: number;
+    onClose?: () => void;
+    isOpen?: boolean;
+    className?: string;
+    variant?: VariantProps<typeof toastStyle>['variant'];
+    position?: VariantProps<typeof toastStyle>['position'];
+    status?: VariantProps<typeof toastStyle>['status'];
+};
+
+const Toast = forwardRef<HTMLDivElement, IToastProps>(
+    (
+        { id, title, description, duration = 5000, onClose, isOpen, className, variant, position, status, ...props },
+        ref,
+    ) => {
+        const [isVisible, setIsVisible] = useState(isOpen);
+        const [isExiting, setIsExiting] = useState(false);
+
+        useEffect(() => {
+            setIsVisible(isOpen);
+            if (isOpen) {
+                const timer = setTimeout(() => {
+                    setIsExiting(true);
+                    setTimeout(() => {
+                        setIsVisible(false);
+                        setIsExiting(false);
+                        if (onClose) onClose();
+                    }, 300);
+                }, duration);
+
+                return () => clearTimeout(timer);
+            }
+        }, [isOpen, duration, onClose]);
+
+        if (!isVisible) return null;
+
+        return createPortal(
+            <div
+                ref={ref}
+                role="alert"
+                aria-live="polite"
+                className={toastStyle({
+                    variant,
+                    position,
+                    status,
+                    class: `${className || ''} ${isExiting ? 'opacity-0' : 'opacity-100'}`,
+                })}
+                {...props}
+            >
+                <div>
+                    {title && <ToastTitle>{title}</ToastTitle>}
+                    {description && <ToastDescription>{description}</ToastDescription>}
+                </div>
+                <button
+                    onClick={() => {
+                        setIsExiting(true);
+                        setTimeout(() => {
+                            setIsVisible(false);
+                            setIsExiting(false);
+                            if (onClose) onClose();
+                        }, 300);
+                    }}
+                    className="ml-4 text-current opacity-70 hover:opacity-100"
+                    aria-label="Close toast"
+                >
+                    ×
+                </button>
+            </div>,
+            document.body,
+        );
+    },
+);
+
+Toast.displayName = 'Toast';
+
+export { Toast };

package/src/components/ui/tooltip/index.web.tsx

@@ -0,0 +1,155 @@
+'use client';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import { createTooltip } from '@gluestack-ui/tooltip';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
+import { cssInterop } from 'nativewind';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { createPortal } from 'react-dom';
+
+const SCOPE = 'TOOLTIP';
+
+const tooltipStyle = tva({
+    base: 'absolute z-50 px-3 py-2 text-sm text-white bg-gray-900 rounded-md shadow-sm max-w-xs',
+    variants: {
+        placement: {
+            top: 'bottom-full mb-2',
+            bottom: 'top-full mt-2',
+            left: 'right-full mr-2',
+            right: 'left-full ml-2',
+        },
+    },
+    defaultVariants: {
+        placement: 'top',
+    },
+});
+
+type ITooltipProps = {
+    label: string;
+    children: React.ReactElement;
+    placement?: VariantProps<typeof tooltipStyle>['placement'];
+    className?: string;
+    delay?: number;
+    isOpen?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+};
+
+const Tooltip = forwardRef<HTMLDivElement, ITooltipProps>(
+    (
+        { label, children, placement, className, delay = 0, isOpen: controlledIsOpen, onOpen, onClose, ...props },
+        ref,
+    ) => {
+        const [isOpen, setIsOpen] = useState(controlledIsOpen || false);
+        const [position, setPosition] = useState({ top: 0, left: 0 });
+        const triggerRef = useRef<HTMLDivElement>(null);
+        const tooltipRef = useRef<HTMLDivElement>(null);
+        const timeoutRef = useRef<NodeJS.Timeout>();
+
+        const updatePosition = () => {
+            if (triggerRef.current && tooltipRef.current) {
+                const triggerRect = triggerRef.current.getBoundingClientRect();
+                const tooltipRect = tooltipRef.current.getBoundingClientRect();
+                let top = 0;
+                let left = 0;
+
+                switch (placement) {
+                    case 'top':
+                        top = triggerRect.top - tooltipRect.height - 8;
+                        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+                        break;
+                    case 'bottom':
+                        top = triggerRect.bottom + 8;
+                        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+                        break;
+                    case 'left':
+                        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+                        left = triggerRect.left - tooltipRect.width - 8;
+                        break;
+                    case 'right':
+                        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+                        left = triggerRect.right + 8;
+                        break;
+                }
+
+                setPosition({ top, left });
+            }
+        };
+
+        const handleOpen = () => {
+            if (delay) {
+                timeoutRef.current = setTimeout(() => {
+                    setIsOpen(true);
+                    if (onOpen) onOpen();
+                }, delay);
+            } else {
+                setIsOpen(true);
+                if (onOpen) onOpen();
+            }
+        };
+
+        const handleClose = () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            setIsOpen(false);
+            if (onClose) onClose();
+        };
+
+        useEffect(() => {
+            if (controlledIsOpen !== undefined) {
+                setIsOpen(controlledIsOpen);
+            }
+        }, [controlledIsOpen]);
+
+        useEffect(() => {
+            if (isOpen) {
+                updatePosition();
+                window.addEventListener('scroll', updatePosition);
+                window.addEventListener('resize', updatePosition);
+            }
+
+            return () => {
+                window.removeEventListener('scroll', updatePosition);
+                window.removeEventListener('resize', updatePosition);
+            };
+        }, [isOpen]);
+
+        const trigger = React.cloneElement(children, {
+            ref: triggerRef,
+            onMouseEnter: handleOpen,
+            onMouseLeave: handleClose,
+            onFocus: handleOpen,
+            onBlur: handleClose,
+            'aria-describedby': isOpen ? 'tooltip' : undefined,
+        });
+
+        return (
+            <>
+                {trigger}
+                {isOpen &&
+                    createPortal(
+                        <div
+                            ref={tooltipRef}
+                            id="tooltip"
+                            role="tooltip"
+                            className={tooltipStyle({ placement, class: className })}
+                            style={{
+                                position: 'fixed',
+                                top: `${position.top}px`,
+                                left: `${position.left}px`,
+                            }}
+                            {...props}
+                        >
+                            {label}
+                        </div>,
+                        document.body,
+                    )}
+            </>
+        );
+    },
+);
+
+Tooltip.displayName = 'Tooltip';
+
+export { Tooltip };

package/src/components/ui/view/index.web.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import React from 'react';
+
+export const View = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ children, style, ...props }, ref) => {
+        return (
+            <div ref={ref} style={style} {...props}>
+                {children}
+            </div>
+        );
+    },
+);
+
+View.displayName = 'View';

package/src/components/ui/virtualized-list/index.web.tsx

@@ -0,0 +1,84 @@
+'use client';
+import React, { forwardRef } from 'react';
+import { FixedSizeList, ListChildComponentProps } from 'react-window';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
+import { cssInterop } from 'nativewind';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+const virtualizedListStyle = tva({
+    base: 'overflow-auto',
+    variants: {
+        horizontal: {
+            true: 'flex-row',
+            false: 'flex-col',
+        },
+    },
+    defaultVariants: {
+        horizontal: false,
+    },
+});
+
+interface VirtualizedListProps<T> {
+    data: ReadonlyArray<T>;
+    renderItem: ({ item, index }: { item: T; index: number }) => React.ReactElement;
+    itemSize: number;
+    horizontal?: boolean;
+    className?: string;
+    height: number;
+    width: number;
+    overscanCount?: number;
+}
+
+interface ItemData<T> {
+    data: ReadonlyArray<T>;
+    renderItem: ({ item, index }: { item: T; index: number }) => React.ReactElement;
+}
+
+function VirtualizedListComponent<T>(
+    {
+        data,
+        renderItem,
+        itemSize,
+        horizontal = false,
+        className,
+        height,
+        width,
+        overscanCount = 2,
+        ...props
+    }: VirtualizedListProps<T>,
+    ref: React.Ref<FixedSizeList>,
+) {
+    const itemData: ItemData<T> = {
+        data,
+        renderItem,
+    };
+
+    const Row = ({ index, style }: ListChildComponentProps) => {
+        const item = data[index];
+        return <div style={style}>{renderItem({ item, index })}</div>;
+    };
+
+    return (
+        <FixedSizeList
+            outerRef={ref}
+            className={virtualizedListStyle({ horizontal, class: className })}
+            height={height}
+            width={width}
+            itemCount={data.length}
+            itemSize={itemSize}
+            layout={horizontal ? 'horizontal' : 'vertical'}
+            overscanCount={overscanCount}
+            itemData={itemData}
+            {...props}
+        >
+            {Row}
+        </FixedSizeList>
+    );
+}
+
+const VirtualizedList = React.forwardRef(VirtualizedListComponent) as <T>(
+    props: VirtualizedListProps<T> & { ref?: React.Ref<FixedSizeList> },
+) => React.ReactElement;
+
+export { VirtualizedList };