Merge pull request #79 from SySagar/dev

chore: framer motion for animation
SySagar · Jan 12, 2025 · 8e07806 · 8e07806
2 parents 3892c2c + 7484577
commit 8e07806
Show file tree

Hide file tree

Showing 9 changed files with 903 additions and 880 deletions.
diff --git a/.changeset/dirty-roses-happen.md b/.changeset/dirty-roses-happen.md
@@ -0,0 +1,5 @@
+---
+'@groovy-box/ui': patch
+---
+
+framer-motion animation
diff --git a/apps/ui/lib/components/Button/index.tsx b/apps/ui/lib/components/Button/index.tsx
@@ -5,52 +5,52 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@utils/utils';
 
 const buttonVariants = cva(
-    'grv-inline-flex grv-items-center grv-justify-center grv-whitespace-nowrap grv-rounded-md grv-text-sm grv-font-medium grv-ring-offset-background grv-transition-colors focus-visible:grv-outline-none focus-visible:grv-ring-2 focus-visible:grv-ring-ring focus-visible:grv-ring-offset-2 disabled:grv-pointer-events-none disabled:grv-opacity-50',
-    {
-        variants: {
-            variant: {
-                default:
-                    'grv-bg-primary-700 grv-text-text-primary hover:grv-bg-primary-500 grv-border-none',
-                destructive:
-                    'grv-bg-error-900 grv-text-text-primary hover:grv-bg-error-700 grv-border-none grv-outline-0 grv-shadow-none',
-                outline:
-                    ' grv-border-none hover:grv-bg-bgopacity grv-text-accent  grv-bg-primary-100/0 grv-outline grv-font-medium grv-outline-2 grv-outline-primary-500 grv-shadow-none',
-                secondary:
-                    'grv-bg-secondary-700 grv-text-text-primary hover:grv-bg-secondary-500  grv-border-none grv-outline-0 grv-shadow-none',
-                link: 'grv-text-accent grv-underline-offset-4 hover:grv-underline grv-bg-primary-100/0 grv-font-medium grv-border-none hover:grv-cursor-pointer p-0 m-0',
-            },
-            size: {
-                default: 'grv-h-10 grv-px-4 grv-py-2',
-                sm: 'grv-h-9 grv-rounded-md grv-px-3',
-                lg: 'grv-h-11 grv-rounded-md grv-px-8',
-                icon: 'grv-h-10 grv-w-10',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-            size: 'default',
-        },
-    }
+  'grv-inline-flex grv-items-center grv-justify-center grv-whitespace-nowrap grv-rounded-md grv-text-sm grv-font-medium grv-ring-offset-background grv-transition-colors focus-visible:grv-outline-none focus-visible:grv-ring-2 focus-visible:grv-ring-ring focus-visible:grv-ring-offset-2 disabled:grv-pointer-events-none disabled:grv-opacity-50',
+  {
+    variants: {
+      variant: {
+        default:
+          'grv-bg-primary-700 grv-text-text-primary hover:grv-bg-primary-500 grv-border-none',
+        destructive:
+          'grv-bg-error-900 grv-text-text-primary hover:grv-bg-error-700 grv-border-none grv-outline-0 grv-shadow-none',
+        outline:
+          ' grv-border-none hover:grv-bg-bgopacity grv-text-accent  grv-bg-primary-100/0 grv-outline grv-font-medium grv-outline-2 grv-outline-primary-500 grv-shadow-none',
+        secondary:
+          'grv-bg-secondary-700 grv-text-text-primary hover:grv-bg-secondary-500  grv-border-none grv-outline-0 grv-shadow-none',
+        link: 'grv-text-accent grv-underline-offset-4 hover:grv-underline grv-bg-primary-100/0 grv-font-medium grv-border-none hover:grv-cursor-pointer p-0 m-0',
+      },
+      size: {
+        default: 'grv-h-10 grv-px-4 grv-py-2',
+        sm: 'grv-h-9 grv-rounded-md grv-px-3',
+        lg: 'grv-h-11 grv-rounded-md grv-px-8',
+        icon: 'grv-h-10 grv-w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
 );
 
 export interface ButtonProps
-    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-    asChild?: boolean;
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-    ({ className, variant, size, asChild = false, ...props }, ref) => {
-        const Comp = asChild ? Slot : 'button';
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
 
-        return (
-            <Comp
-                className={cn(buttonVariants({ variant, size, className }))}
-                ref={ref}
-                {...props}
-            />
-        );
-    }
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
 );
 Button.displayName = 'Button';
 

diff --git a/apps/ui/lib/components/Chip/Chip.tsx b/apps/ui/lib/components/Chip/Chip.tsx
@@ -6,132 +6,131 @@ import { X as CloseIcon } from 'lucide-react';
 import { cn } from '@utils/utils';
 
 const chipVariants = cva(
-    'grv-inline-flex ui grv-items-center grv-rounded-full grv-text-sm grv-font-medium grv-transition-colors focus:grv-outline-none focus:grv-ring-2 grv-ring-ring grv-ring-offset-2',
-    {
-        variants: {
-            variant: {
-                filled: 'grv-bg-primary-500 ui',
-                outlined: 'grv-border-2 grv-border-solid grv-border-accent ui',
-            },
-            size: {
-                sm: 'grv-h-6 grv-px-3 ui',
-                md: 'grv-h-8 grv-px-4 ui',
-                lg: 'grv-h-10 grv-px-5 ui',
-            },
-            clickable: {
-                true: 'grv-cursor-pointer',
-                false: '',
-            },
-        },
-        defaultVariants: {
-            variant: 'filled',
-            size: 'md',
-            clickable: false,
-        },
-    }
+  'grv-inline-flex ui grv-items-center grv-rounded-full grv-text-sm grv-font-medium grv-transition-colors focus:grv-outline-none focus:grv-ring-2 grv-ring-ring grv-ring-offset-2',
+  {
+    variants: {
+      variant: {
+        filled: 'grv-bg-primary-500 ui',
+        outlined: 'grv-border-2 grv-border-solid grv-border-accent ui',
+      },
+      size: {
+        sm: 'grv-h-6 grv-px-3 ui',
+        md: 'grv-h-8 grv-px-4 ui',
+        lg: 'grv-h-10 grv-px-5 ui',
+      },
+      clickable: {
+        true: 'grv-cursor-pointer',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'filled',
+      size: 'md',
+      clickable: false,
+    },
+  }
 );
 
 export interface ChipDivProps
-    extends React.HTMLAttributes<HTMLDivElement>,
+  extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof chipVariants> {
-    onDelete?: () => void;
-    as?: React.ElementType;
-    href?: never;
-    beforeChildren?: React.ReactNode;
-    afterChildren?: React.ReactNode;
+  onDelete?: () => void;
+  as?: React.ElementType;
+  href?: never;
+  beforeChildren?: React.ReactNode;
+  afterChildren?: React.ReactNode;
 }
 
 export interface ChipAnchorProps
-    extends React.HTMLAttributes<HTMLAnchorElement>,
+  extends React.HTMLAttributes<HTMLAnchorElement>,
     VariantProps<typeof chipVariants> {
-    onDelete?: () => void;
-    href?: string;
-    target?: string;
-    as?: React.ElementType;
-    beforeChildren?: React.ReactNode;
-    afterChildren?: React.ReactNode;
+  onDelete?: () => void;
+  href?: string;
+  target?: string;
+  as?: React.ElementType;
+  beforeChildren?: React.ReactNode;
+  afterChildren?: React.ReactNode;
 }
 
 export type ChipProps = ChipAnchorProps | ChipDivProps;
 
 const Chip = React.forwardRef<HTMLDivElement | HTMLAnchorElement, ChipProps>(
-    (
-        {
-            className,
-            variant,
-            size,
-            clickable,
-            onDelete,
-            href,
-            as,
-            beforeChildren,
-            afterChildren,
-            children,
-            ...props
-        },
-        ref
-    ) => {
-        const Component = as || (href ? 'a' : 'div');
-        const isClickable = Boolean(clickable || href || props.onClick);
-
-        const textColor =
-            variant === 'outlined' ? 'grv-text-accent' : 'grv-text-text-primary';
+  (
+    {
+      className,
+      variant,
+      size,
+      clickable,
+      onDelete,
+      href,
+      as,
+      beforeChildren,
+      afterChildren,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const Component = as || (href ? 'a' : 'div');
+    const isClickable = Boolean(clickable || href || props.onClick);
 
+    const textColor =
+      variant === 'outlined' ? 'grv-text-accent' : 'grv-text-text-primary';
 
-        const textSize =
-            size === 'sm'
-                ? 'grv-text-[10px]'
-                : size === 'md'
-                    ? 'grv-text-[12px]'
-                    : 'grv-text-[14px]';
+    const textSize =
+      size === 'sm'
+        ? 'grv-text-[10px]'
+        : size === 'md'
+          ? 'grv-text-[12px]'
+          : 'grv-text-[14px]';
 
-        return (
-            <Component
-                ref={ref}
-                className={cn(
-                    chipVariants({ variant, size, clickable: isClickable }),
-                    'grv-decoration-primary-100 grv-underline-offset-2 grv-flex grv-overflow-hidden ui',
-                    className
-                )}
-                {...(href && { href })}
-                {...props}
-            >
-                {beforeChildren && (
-                    <div
-                        className={cn(
-                            'grv-flex grv-items-center grv-justify-center grv-text-text-primary grv-mr-2 grv-w-[20px] grv-h-[20px] ui grv-overflow-hidden grv-rounded-full grv-object-cover'
-                        )}
-                    >
-                        {beforeChildren}
-                    </div>
-                )}
-                <div className={cn(textColor, textSize)}>{children}</div>
-                {afterChildren && (
-                    <div
-                        className={cn(
-                            `grv-flex grv-items-center grv-justify-center ${textColor} grv-ml-2 ui`
-                        )}
-                    >
-                        {afterChildren}
-                    </div>
-                )}
-                {onDelete && (
-                    <div
-                        className={cn(
-                            'grv-ml-2 grv-rounded-full grv-bg-text-primary grv-cursor-pointer  grv-py-[4px] grv-px-[4px] grv-transition-colors grv-text-primary grv-opacity-50 hover:grv-opacity-60',
-                            textSize
-                        )}
-                        onClick={(e) => {
-                            e.stopPropagation();
-                            onDelete();
-                        }}
-                    >
-                        <CloseIcon className={cn('grv-h-[10px] grv-w-[10px]')} />
-                    </div>
-                )}
-            </Component>
-        );
-    }
+    return (
+      <Component
+        ref={ref}
+        className={cn(
+          chipVariants({ variant, size, clickable: isClickable }),
+          'grv-decoration-primary-100 grv-underline-offset-2 grv-flex grv-overflow-hidden ui',
+          className
+        )}
+        {...(href && { href })}
+        {...props}
+      >
+        {beforeChildren && (
+          <div
+            className={cn(
+              'grv-flex grv-items-center grv-justify-center grv-text-text-primary grv-mr-2 grv-w-[20px] grv-h-[20px] ui grv-overflow-hidden grv-rounded-full grv-object-cover'
+            )}
+          >
+            {beforeChildren}
+          </div>
+        )}
+        <div className={cn(textColor, textSize)}>{children}</div>
+        {afterChildren && (
+          <div
+            className={cn(
+              `grv-flex grv-items-center grv-justify-center ${textColor} grv-ml-2 ui`
+            )}
+          >
+            {afterChildren}
+          </div>
+        )}
+        {onDelete && (
+          <div
+            className={cn(
+              'grv-ml-2 grv-rounded-full grv-bg-text-primary grv-cursor-pointer  grv-py-[4px] grv-px-[4px] grv-transition-colors grv-text-primary grv-opacity-50 hover:grv-opacity-60',
+              textSize
+            )}
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete();
+            }}
+          >
+            <CloseIcon className={cn('grv-h-[10px] grv-w-[10px]')} />
+          </div>
+        )}
+      </Component>
+    );
+  }
 );
 
 Chip.displayName = 'Chip';