@admin-layout/gluestack-ui-mobile 11.0.1-alpha.0 → 11.0.3-alpha.0

package/src/components/ui/drawer/index.tsx

@@ -0,0 +1,311 @@
+'use client';
+import React from 'react';
+import { createModal as createDrawer } from '@gluestack-ui/modal';
+import { Pressable, View, ScrollView, Dimensions } from 'react-native';
+import { Motion, AnimatePresence, createMotionAnimatedComponent } from '@legendapp/motion';
+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';
+
+const AnimatedPressable = createMotionAnimatedComponent(Pressable);
+const SCOPE = 'MODAL';
+const screenWidth = Dimensions.get('window').width;
+const screenHeight = Dimensions.get('window').height;
+const sizes: { [key: string]: number } = {
+    sm: 0.25,
+    md: 0.5,
+    lg: 0.75,
+    full: 1,
+};
+
+const UIDrawer = createDrawer({
+    Root: withStyleContext(View, SCOPE),
+    Backdrop: AnimatedPressable,
+    Content: Motion.View,
+    Body: ScrollView,
+    CloseButton: Pressable,
+    Footer: View,
+    Header: View,
+    AnimatePresence: AnimatePresence,
+});
+
+cssInterop(AnimatedPressable, { className: 'style' });
+cssInterop(Motion.View, { className: 'style' });
+
+const drawerStyle = tva({
+    base: 'w-full h-full web:pointer-events-none relative',
+    variants: {
+        size: {
+            sm: '',
+            md: '',
+            lg: '',
+            full: '',
+        },
+        anchor: {
+            left: 'items-start',
+            right: 'items-end',
+            top: 'justify-start',
+            bottom: 'justify-end',
+        },
+    },
+});
+
+const drawerBackdropStyle = tva({
+    base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default',
+});
+
+const drawerContentStyle = tva({
+    base: 'bg-background-0 overflow-scroll border-outline-100 p-6 absolute',
+    parentVariants: {
+        size: {
+            sm: 'w-1/4',
+            md: 'w-1/2',
+            lg: 'w-3/4',
+            full: 'w-full',
+        },
+        anchor: {
+            left: 'h-full border-r',
+            right: 'h-full border-l',
+            top: 'w-full border-b',
+            bottom: 'w-full border-t',
+        },
+    },
+    parentCompoundVariants: [
+        {
+            anchor: 'top',
+            size: 'sm',
+            class: 'h-1/4',
+        },
+        {
+            anchor: 'top',
+            size: 'md',
+            class: 'h-1/2',
+        },
+        {
+            anchor: 'top',
+            size: 'lg',
+            class: 'h-3/4',
+        },
+        {
+            anchor: 'top',
+            size: 'full',
+            class: 'h-full',
+        },
+        {
+            anchor: 'bottom',
+            size: 'sm',
+            class: 'h-1/4',
+        },
+        {
+            anchor: 'bottom',
+            size: 'md',
+            class: 'h-1/2',
+        },
+        {
+            anchor: 'bottom',
+            size: 'lg',
+            class: 'h-3/4',
+        },
+        {
+            anchor: 'bottom',
+            size: 'full',
+            class: 'h-full',
+        },
+    ],
+});
+
+const drawerCloseButtonStyle = tva({
+    base: 'z-10 rounded data-[focus-visible=true]:web:bg-background-100 web:outline-0 cursor-pointer',
+});
+
+const drawerHeaderStyle = tva({
+    base: 'justify-between items-center flex-row',
+});
+
+const drawerBodyStyle = tva({
+    base: 'mt-4 mb-6 shrink-0',
+});
+
+const drawerFooterStyle = tva({
+    base: 'flex-row justify-end items-center',
+});
+
+type IDrawerProps = React.ComponentProps<typeof UIDrawer> & VariantProps<typeof drawerStyle> & { className?: string };
+
+type IDrawerBackdropProps = React.ComponentProps<typeof UIDrawer.Backdrop> &
+    VariantProps<typeof drawerBackdropStyle> & { className?: string };
+
+type IDrawerContentProps = React.ComponentProps<typeof UIDrawer.Content> &
+    VariantProps<typeof drawerContentStyle> & { className?: string };
+
+type IDrawerHeaderProps = React.ComponentProps<typeof UIDrawer.Header> &
+    VariantProps<typeof drawerHeaderStyle> & { className?: string };
+
+type IDrawerBodyProps = React.ComponentProps<typeof UIDrawer.Body> &
+    VariantProps<typeof drawerBodyStyle> & { className?: string };
+
+type IDrawerFooterProps = React.ComponentProps<typeof UIDrawer.Footer> &
+    VariantProps<typeof drawerFooterStyle> & { className?: string };
+
+type IDrawerCloseButtonProps = React.ComponentProps<typeof UIDrawer.CloseButton> &
+    VariantProps<typeof drawerCloseButtonStyle> & { className?: string };
+
+const CustomDrawer = React.forwardRef<React.ElementRef<typeof UIDrawer>, IDrawerProps>(
+    ({ className, size = 'sm', anchor = 'left', ...props }, ref) => {
+        return (
+            <UIDrawer
+                ref={ref}
+                {...props}
+                pointerEvents="box-none"
+                className={drawerStyle({ size, anchor, class: className })}
+                context={{ size, anchor }}
+            />
+        );
+    },
+);
+
+const DrawerBackdrop = React.forwardRef<React.ElementRef<typeof UIDrawer.Backdrop>, IDrawerBackdropProps>(
+    ({ className, ...props }, ref) => {
+        return (
+            <UIDrawer.Backdrop
+                ref={ref}
+                initial={{
+                    opacity: 0,
+                }}
+                animate={{
+                    opacity: 0.5,
+                }}
+                exit={{
+                    opacity: 0,
+                }}
+                transition={{
+                    type: 'spring',
+                    damping: 18,
+                    stiffness: 250,
+                    opacity: {
+                        type: 'timing',
+                        duration: 250,
+                    },
+                }}
+                {...props}
+                className={drawerBackdropStyle({
+                    class: className,
+                })}
+            />
+        );
+    },
+);
+
+const DrawerContent = React.forwardRef<React.ElementRef<typeof UIDrawer.Content>, IDrawerContentProps>(
+    ({ className, ...props }, ref) => {
+        const { size: parentSize, anchor: parentAnchor } = useStyleContext(SCOPE);
+
+        const drawerHeight = screenHeight * (sizes[parentSize] || sizes.md);
+        const drawerWidth = screenWidth * (sizes[parentSize] || sizes.md);
+
+        const isHorizontal = parentAnchor === 'left' || parentAnchor === 'right';
+
+        const initialObj = isHorizontal
+            ? { x: parentAnchor === 'left' ? -drawerWidth : drawerWidth }
+            : { y: parentAnchor === 'top' ? -drawerHeight : drawerHeight };
+
+        const animateObj = isHorizontal ? { x: 0 } : { y: 0 };
+
+        const exitObj = isHorizontal
+            ? { x: parentAnchor === 'left' ? -drawerWidth : drawerWidth }
+            : { y: parentAnchor === 'top' ? -drawerHeight : drawerHeight };
+
+        const customClass = isHorizontal
+            ? `top-0 ${parentAnchor === 'left' ? 'left-0' : 'right-0'}`
+            : `left-0 ${parentAnchor === 'top' ? 'top-0' : 'bottom-0'}`;
+
+        return (
+            <UIDrawer.Content
+                ref={ref}
+                initial={initialObj}
+                animate={animateObj}
+                exit={exitObj}
+                transition={{
+                    type: 'timing',
+                    duration: 300,
+                }}
+                {...props}
+                className={drawerContentStyle({
+                    parentVariants: {
+                        size: parentSize,
+                        anchor: parentAnchor,
+                    },
+                    class: `${className} ${customClass}`,
+                })}
+                pointerEvents="auto"
+            />
+        );
+    },
+);
+
+const DrawerHeader = React.forwardRef<React.ElementRef<typeof UIDrawer.Header>, IDrawerHeaderProps>(
+    ({ className, ...props }, ref) => {
+        return (
+            <UIDrawer.Header
+                ref={ref}
+                {...props}
+                className={drawerHeaderStyle({
+                    class: className,
+                })}
+            />
+        );
+    },
+);
+
+const DrawerBody = React.forwardRef<React.ElementRef<typeof UIDrawer.Body>, IDrawerBodyProps>(
+    ({ className, ...props }, ref) => {
+        return (
+            <UIDrawer.Body
+                ref={ref}
+                {...props}
+                className={drawerBodyStyle({
+                    class: className,
+                })}
+            />
+        );
+    },
+);
+
+const DrawerFooter = React.forwardRef<React.ElementRef<typeof UIDrawer.Footer>, IDrawerFooterProps>(
+    ({ className, ...props }, ref) => {
+        return (
+            <UIDrawer.Footer
+                ref={ref}
+                {...props}
+                className={drawerFooterStyle({
+                    class: className,
+                })}
+            />
+        );
+    },
+);
+
+const DrawerCloseButton = React.forwardRef<React.ElementRef<typeof UIDrawer.CloseButton>, IDrawerCloseButtonProps>(
+    ({ className, ...props }, ref) => {
+        return (
+            <UIDrawer.CloseButton
+                ref={ref}
+                {...props}
+                className={drawerCloseButtonStyle({
+                    class: className,
+                })}
+            />
+        );
+    },
+);
+
+CustomDrawer.displayName = 'Drawer';
+DrawerBackdrop.displayName = 'DrawerBackdrop';
+DrawerContent.displayName = 'DrawerContent';
+DrawerHeader.displayName = 'DrawerHeader';
+DrawerBody.displayName = 'DrawerBody';
+DrawerFooter.displayName = 'DrawerFooter';
+DrawerCloseButton.displayName = 'DrawerCloseButton';
+
+export { CustomDrawer, DrawerBackdrop, DrawerContent, DrawerCloseButton, DrawerHeader, DrawerBody, DrawerFooter };

package/src/components/ui/fab/index.tsx

@@ -0,0 +1,190 @@
+'use client';
+import React from 'react';
+import { createFab } from '@gluestack-ui/fab';
+import { Pressable, Text } 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 = 'FAB';
+const Root = withStyleContext(Pressable, SCOPE);
+const UIFab = createFab({
+    Root: Root,
+    Label: Text,
+    Icon: UIIcon,
+});
+
+cssInterop(PrimitiveIcon, {
+    className: {
+        target: 'style',
+        nativeStyleToProp: {
+            height: true,
+            width: true,
+            fill: true,
+            color: 'classNameColor',
+            stroke: true,
+        },
+    },
+});
+
+const fabStyle = tva({
+    base: 'group/fab bg-primary-500 rounded-full z-20 p-4 flex-row items-center justify-center absolute hover:bg-primary-600 active:bg-primary-700 disabled:opacity-40 disabled:pointer-events-all disabled:cursor-not-allowed data-[focus=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[focus-visible=true]:web:ring-indicator-info shadow-hard-2',
+    variants: {
+        size: {
+            sm: 'px-2.5 py-2.5',
+            md: 'px-3 py-3',
+            lg: 'px-4 py-4',
+        },
+        placement: {
+            'top right': 'top-4 right-4',
+            'top left': 'top-4 left-4',
+            'bottom right': 'bottom-4 right-4',
+            'bottom left': 'bottom-4 left-4',
+            'top center': 'top-4 self-center',
+            'bottom center': 'bottom-4 self-center',
+        },
+    },
+});
+
+const fabLabelStyle = tva({
+    base: 'text-typography-50 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',
+        },
+        sub: {
+            true: 'text-xs',
+        },
+        italic: {
+            true: 'italic',
+        },
+        highlight: {
+            true: 'bg-yellow-500',
+        },
+    },
+    parentVariants: {
+        size: {
+            sm: 'text-sm',
+            md: 'text-base',
+            lg: 'text-lg',
+        },
+    },
+});
+
+const fabIconStyle = tva({
+    base: 'text-typography-50 fill-none',
+    variants: {
+        size: {
+            '2xs': 'h-3 w-3',
+            xs: 'h-3.5 w-3.5',
+            sm: 'h-4 w-4',
+            md: 'w-[18px] h-[18px]',
+            lg: 'h-5 w-5',
+            xl: 'h-6 w-6',
+        },
+    },
+});
+
+type IFabProps = Omit<React.ComponentPropsWithoutRef<typeof UIFab>, 'context'> & VariantProps<typeof fabStyle>;
+
+const Fab = React.forwardRef<React.ElementRef<typeof UIFab>, IFabProps>(
+    ({ size = 'md', placement = 'bottom right', className, ...props }, ref) => {
+        return (
+            <UIFab
+                ref={ref}
+                {...props}
+                className={fabStyle({ size, placement, class: className })}
+                context={{ size }}
+            />
+        );
+    },
+);
+
+type IFabLabelProps = React.ComponentPropsWithoutRef<typeof UIFab.Label> & VariantProps<typeof fabLabelStyle>;
+
+const FabLabel = React.forwardRef<React.ElementRef<typeof UIFab.Label>, IFabLabelProps>(
+    (
+        { size, isTruncated = false, bold = false, underline = false, strikeThrough = false, className, ...props },
+        ref,
+    ) => {
+        const { size: parentSize } = useStyleContext(SCOPE);
+        return (
+            <UIFab.Label
+                ref={ref}
+                {...props}
+                className={fabLabelStyle({
+                    parentVariants: {
+                        size: parentSize,
+                    },
+                    size,
+                    isTruncated,
+                    bold,
+                    underline,
+                    strikeThrough,
+                    class: className,
+                })}
+            />
+        );
+    },
+);
+
+type IFabIconProps = React.ComponentPropsWithoutRef<typeof UIFab.Icon> &
+    VariantProps<typeof fabIconStyle> & {
+        height?: number;
+        width?: number;
+    };
+
+const FabIcon = React.forwardRef<React.ElementRef<typeof UIFab.Icon>, IFabIconProps>(
+    ({ size, className, ...props }, ref) => {
+        const { size: parentSize } = useStyleContext(SCOPE);
+
+        if (typeof size === 'number') {
+            return <UIFab.Icon ref={ref} {...props} className={fabIconStyle({ class: className })} size={size} />;
+        } else if ((props.height !== undefined || props.width !== undefined) && size === undefined) {
+            return <UIFab.Icon ref={ref} {...props} className={fabIconStyle({ class: className })} />;
+        }
+        return (
+            <UIFab.Icon
+                ref={ref}
+                {...props}
+                className={fabIconStyle({
+                    parentVariants: {
+                        size: parentSize,
+                    },
+                    size,
+                    class: className,
+                })}
+            />
+        );
+    },
+);
+
+Fab.displayName = 'Fab';
+FabLabel.displayName = 'FabLabel';
+FabIcon.displayName = 'FabIcon';
+
+export { Fab, FabLabel, FabIcon };

package/src/components/ui/flat-list/index.tsx

@@ -0,0 +1,2 @@
+'use client';
+export { FlatList } from 'react-native';