From 337914f169e3c8ad2116e509b340c35d8e327bf3 Mon Sep 17 00:00:00 2001
From: SySagar <sysagar07@gmail.com>
Date: Thu, 24 Oct 2024 02:16:04 +0530
Subject: [PATCH] fix(docs): chips

---
 apps/docs/app/ui/IndividialComp.tsx           |  19 ++
 apps/docs/content/docs/(components)/chips.mdx | 207 ++++++++++++++++++
 apps/ui/lib/components/Chip/Chip.tsx          |  39 ++--
 apps/ui/stories/Chip.stories.tsx              |   2 +-
 4 files changed, 249 insertions(+), 18 deletions(-)
 create mode 100644 apps/docs/app/ui/IndividialComp.tsx
 create mode 100644 apps/docs/content/docs/(components)/chips.mdx

diff --git a/apps/docs/app/ui/IndividialComp.tsx b/apps/docs/app/ui/IndividialComp.tsx
new file mode 100644
index 0000000..c158aa1
--- /dev/null
+++ b/apps/docs/app/ui/IndividialComp.tsx
@@ -0,0 +1,19 @@
+'use client';
+import React from 'react';
+import { Chip } from '@groovy-box/ui';
+
+const ChipEle = () => {
+  return (
+    <div className='grv-flex grv-flex-wrap grv-gap-4 grv-p-4'>
+      <Chip clickable onClick={() => alert('Clicked!')}>
+        Clickable
+      </Chip>
+      <Chip onDelete={() => alert('Delete clicked!')}>Deletable</Chip>
+      <Chip href='https://ui.soumyasagar.in' target='_blank'>
+        Link
+      </Chip>
+    </div>
+  );
+};
+
+export { ChipEle };
diff --git a/apps/docs/content/docs/(components)/chips.mdx b/apps/docs/content/docs/(components)/chips.mdx
new file mode 100644
index 0000000..bb5f335
--- /dev/null
+++ b/apps/docs/content/docs/(components)/chips.mdx
@@ -0,0 +1,207 @@
+---
+title: Chip
+description: Various types and configurations of Chip component.
+---
+
+## Default
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Chip, Avatar, AvatarImage, AvatarFallback } from '@/app/ui';
+import ComponenentWrapper from '@/app/ui/ComponenentWrapper';
+import { Star, Mail } from 'lucide-react';
+import { ChipEle } from '@/app/ui/IndividialComp';
+
+<Tabs items={['Preview', 'Code']}>
+  <Tab value='Preview'>
+    <ComponenentWrapper>
+      <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+        <Chip>Default</Chip>
+      </div>
+    </ComponenentWrapper>
+  </Tab>
+
+  <Tab value='Code'>
+    ```tsx
+    import { Chip } from "@groovy-box/ui";
+
+    export function ChipDefault() {
+      return (
+        <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+          <Chip>Default</Chip>
+        </div>
+      );
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+## Variants
+
+<Tabs items={['Preview', 'Code']}>
+  <Tab value='Preview'>
+    <ComponenentWrapper>
+      <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+        <Chip variant="filled">Filled</Chip>
+        <Chip variant="outlined">Outlined</Chip>
+      </div>
+    </ComponenentWrapper>
+  </Tab>
+
+  <Tab value='Code'>
+    ```tsx
+    import { Chip } from "@groovy-box/ui";
+
+    export function ChipVariants() {
+      return (
+        <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+          <Chip variant="filled">Filled</Chip>
+          <Chip variant="outlined">Outlined</Chip>
+        </div>
+      );
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+## Sizes
+
+<Tabs items={['Preview', 'Code']}>
+  <Tab value='Preview'>
+    <ComponenentWrapper>
+      <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+        <Chip size="sm">Small</Chip>
+        <Chip size="md">Medium</Chip>
+        <Chip size="lg">Large</Chip>
+      </div>
+    </ComponenentWrapper>
+  </Tab>
+
+  <Tab value='Code'>
+    ```tsx
+    import { Chip } from "@groovy-box/ui";
+
+    export function ChipSizes() {
+      return (
+        <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+          <Chip size="sm">Small</Chip>
+          <Chip size="md">Medium</Chip>
+          <Chip size="lg">Large</Chip>
+        </div>
+      );
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+## With Icons
+
+<Tabs items={['Preview', 'Code']}>
+  <Tab value='Preview'>
+    <ComponenentWrapper>
+      <div 
+       supressHydrationWarning
+      className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+        <Chip
+         supressHydrationWarning
+          beforeChildren={
+            <Avatar>
+              <AvatarImage
+                src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt="Avatar Image"
+              />
+              <AvatarFallback>AB</AvatarFallback>
+            </Avatar>
+          }
+        >
+          User Chip
+        </Chip>
+        <Chip variant="outlined" afterChildren={<Star className="grv-h-4 grv-w-4" />}>
+          Starred
+        </Chip>
+        <Chip
+          beforeChildren={<Mail className="grv-h-4 grv-w-4" />}
+          afterChildren={
+            <span className="grv-bg-primary-foreground grv-text-primary grv-rounded-full grv-px-2 grv-text-sm">
+              99+
+            </span>
+          }
+        >
+          Inbox
+        </Chip>
+      </div>
+    </ComponenentWrapper>
+  </Tab>
+
+  <Tab value='Code'>
+    ```tsx
+    import { Chip, Avatar, AvatarImage, AvatarFallback } from "@groovy-box/ui";
+    import { Star, Mail } from 'lucide-react';
+
+    export function ChipWithIcons() {
+      return (
+        <div
+         supressHydrationWarning
+         className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+          <Chip
+            beforeChildren={
+              <Avatar>
+                <AvatarImage
+                  src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                  alt="Avatar Image"
+                />
+                <AvatarFallback>AB</AvatarFallback>
+              </Avatar>
+            }
+          >
+            User Chip
+          </Chip>
+          <Chip variant="outlined" afterChildren={<Star className="grv-h-4 grv-w-4" />}>
+            Starred
+          </Chip>
+          <Chip
+            beforeChildren={<Mail className="grv-h-4 grv-w-4" />}
+            afterChildren={
+              <span className="grv-bg-primary-foreground grv-text-primary grv-rounded-full grv-px-2 grv-text-sm">
+                99+
+              </span>
+            }
+          >
+            Inbox
+          </Chip>
+        </div>
+      );
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+## Interactions
+
+<Tabs items={['Preview', 'Code']}>
+  <Tab value='Preview'>
+    <ComponenentWrapper>
+     <ChipEle/>
+    </ComponenentWrapper>
+  </Tab>
+
+  <Tab value='Code'>
+    ```tsx
+    import { Chip } from "@groovy-box/ui";
+
+    export function ChipInteractions() {
+      return (
+        <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+          <Chip clickable onClick={() => alert('Clicked!')}>Clickable</Chip>
+          <Chip onDelete={() => alert('Delete clicked!')}>Deletable</Chip>
+          <Chip href="https://ui.soumyasagar.in" target="_blank">Link</Chip>
+        </div>
+      );
+    }
+    ```
+
+  </Tab>
+</Tabs>
diff --git a/apps/ui/lib/components/Chip/Chip.tsx b/apps/ui/lib/components/Chip/Chip.tsx
index db704ab..9053f0c 100644
--- a/apps/ui/lib/components/Chip/Chip.tsx
+++ b/apps/ui/lib/components/Chip/Chip.tsx
@@ -1,22 +1,22 @@
+'use client';
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { X as CloseIcon } from 'lucide-react';
-import { Text } from '../Typography';
 
 import { cn } from '@utils/utils';
 
 const chipVariants = cva(
-  'grv-inline-flex 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',
+  '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',
-        outlined: 'grv-border-2 grv-border-solid grv-border-accent',
+        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',
-        md: 'grv-h-8 grv-px-4',
-        lg: 'grv-h-10 grv-px-5',
+        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',
@@ -78,12 +78,21 @@ const Chip = React.forwardRef<HTMLDivElement | HTMLAnchorElement, ChipProps>(
     const textColor =
       variant === 'outlined' ? 'grv-text-accent' : 'grv-text-text-primary';
 
+    console.log(size);
+
+    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',
+          'grv-decoration-primary-100 grv-underline-offset-2 grv-flex grv-overflow-hidden ui',
           className
         )}
         {...(href && { href })}
@@ -92,19 +101,17 @@ const Chip = React.forwardRef<HTMLDivElement | HTMLAnchorElement, ChipProps>(
         {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]  grv-overflow-hidden grv-rounded-full grv-object-cover'
+              '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>
         )}
-        <Text variant="label-2" className={textColor}>
-          {children}
-        </Text>
+        <div className={cn(textColor, textSize)}>{children}</div>
         {afterChildren && (
           <div
             className={cn(
-              `grv-flex grv-items-center grv-justify-center ${textColor} grv-ml-2`
+              `grv-flex grv-items-center grv-justify-center ${textColor} grv-ml-2 ui`
             )}
           >
             {afterChildren}
@@ -113,10 +120,8 @@ const Chip = React.forwardRef<HTMLDivElement | HTMLAnchorElement, ChipProps>(
         {onDelete && (
           <div
             className={cn(
-              'grv-ml-2 grv-rounded-full grv-bg-text-primary grv-cursor-pointer  grv-p-[1px] grv-px-[6px] grv-transition-colors grv-text-primary grv-opacity-50 hover:grv-opacity-60'
-              //   variant === 'filled'
-              //     ? 'hover:grv-bg-primary-500 hover:grv-bg-opacity-5'
-              //     : 'hover:grv-bg-primary-500 hover:grv-bg-opacity-5'
+              '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();
diff --git a/apps/ui/stories/Chip.stories.tsx b/apps/ui/stories/Chip.stories.tsx
index da794bf..0148df7 100644
--- a/apps/ui/stories/Chip.stories.tsx
+++ b/apps/ui/stories/Chip.stories.tsx
@@ -33,7 +33,7 @@ const ChipInteractions = () => (
       Clickable
     </Chip>
     <Chip onDelete={() => alert('Delete clicked!')}>Deletable</Chip>
-    <Chip href="https://example.com" target="_blank">
+    <Chip href="https://ui.soumyasagar.in" target="_blank">
       Link
     </Chip>
   </div>