From 55848b1dd161aa2628259fa1497c04d85f8e7f40 Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Thu, 22 Feb 2024 22:46:10 +0700
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20rename=20tags?=
 =?UTF-8?q?=20to=20tag?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{Tags/Tags.theme.ts => Tag/Tag.theme.ts}  |  4 +--
 .../shared/{Tags/Tags.tsx => Tag/Tag.tsx}     | 27 +++++--------------
 .../src/components/shared/Tag/index.ts        |  2 ++
 .../src/components/shared/Tags/index.ts       |  2 --
 .../frontend/src/pages/components/index.tsx   | 10 +++----
 .../src/pages/components/renders/tags.tsx     | 22 +++++++--------
 6 files changed, 26 insertions(+), 41 deletions(-)
 rename packages/frontend/src/components/shared/{Tags/Tags.theme.ts => Tag/Tag.theme.ts} (95%)
 rename packages/frontend/src/components/shared/{Tags/Tags.tsx => Tag/Tag.tsx} (66%)
 create mode 100644 packages/frontend/src/components/shared/Tag/index.ts
 delete mode 100644 packages/frontend/src/components/shared/Tags/index.ts

diff --git a/packages/frontend/src/components/shared/Tags/Tags.theme.ts b/packages/frontend/src/components/shared/Tag/Tag.theme.ts
similarity index 95%
rename from packages/frontend/src/components/shared/Tags/Tags.theme.ts
rename to packages/frontend/src/components/shared/Tag/Tag.theme.ts
index 299f31ea..086b59b3 100644
--- a/packages/frontend/src/components/shared/Tags/Tags.theme.ts
+++ b/packages/frontend/src/components/shared/Tag/Tag.theme.ts
@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 import type { VariantProps } from 'tailwind-variants';
 
-export const tagsTheme = tv(
+export const tagTheme = tv(
   {
     slots: {
       wrapper: ['flex', 'gap-1.5', 'rounded-lg', 'border'],
@@ -90,4 +90,4 @@ export const tagsTheme = tv(
   },
 );
 
-export type TagsTheme = VariantProps<typeof tagsTheme>;
+export type TagTheme = VariantProps<typeof tagTheme>;
diff --git a/packages/frontend/src/components/shared/Tags/Tags.tsx b/packages/frontend/src/components/shared/Tag/Tag.tsx
similarity index 66%
rename from packages/frontend/src/components/shared/Tags/Tags.tsx
rename to packages/frontend/src/components/shared/Tag/Tag.tsx
index 9cdb1231..2d10012a 100644
--- a/packages/frontend/src/components/shared/Tags/Tags.tsx
+++ b/packages/frontend/src/components/shared/Tag/Tag.tsx
@@ -3,11 +3,11 @@ import React, {
   type ComponentPropsWithoutRef,
   useMemo,
 } from 'react';
-import { TagsTheme, tagsTheme } from './Tags.theme';
+import { tagTheme, type TagTheme } from './Tag.theme';
 import { cloneIcon } from 'utils/cloneIcon';
 
-type TagsProps = ComponentPropsWithoutRef<'div'> &
-  TagsTheme & {
+type TagProps = ComponentPropsWithoutRef<'div'> &
+  TagTheme & {
     /**
      * The optional left icon element for a component.
      * @type {ReactNode}
@@ -18,36 +18,21 @@ type TagsProps = ComponentPropsWithoutRef<'div'> &
      * @type {ReactNode}
      */
     rightIcon?: ReactNode;
-    /**
-     * The optional type of the tags component.
-     * @type {TagsTheme['type']}
-     **/
-    type?: TagsTheme['type'];
-    /**
-     * The optional style of the tags component.
-     * @type {TagsTheme['style']}
-     */
-    style?: TagsTheme['style'];
-    /**
-     * The optional size of the tags component.
-     * @type {TagsTheme['size']}
-     */
-    size?: TagsTheme['size'];
   };
 
-export const Tags = ({
+export const Tag = ({
   children,
   leftIcon,
   rightIcon,
   type = 'attention',
   style = 'default',
   size = 'sm',
-}: TagsProps) => {
+}: TagProps) => {
   const {
     wrapper: wrapperCls,
     icon: iconCls,
     label: labelCls,
-  } = tagsTheme({
+  } = tagTheme({
     type,
     style,
     size,
diff --git a/packages/frontend/src/components/shared/Tag/index.ts b/packages/frontend/src/components/shared/Tag/index.ts
new file mode 100644
index 00000000..e889934c
--- /dev/null
+++ b/packages/frontend/src/components/shared/Tag/index.ts
@@ -0,0 +1,2 @@
+export * from './Tag';
+export * from './Tag.theme';
diff --git a/packages/frontend/src/components/shared/Tags/index.ts b/packages/frontend/src/components/shared/Tags/index.ts
deleted file mode 100644
index de1af198..00000000
--- a/packages/frontend/src/components/shared/Tags/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './Tags';
-export * from './Tags.theme';
diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx
index 2da8cc9e..b3dc6406 100644
--- a/packages/frontend/src/pages/components/index.tsx
+++ b/packages/frontend/src/pages/components/index.tsx
@@ -23,7 +23,7 @@ import {
   renderInlineNotifications,
 } from './renders/inlineNotifications';
 import { renderInputs } from './renders/input';
-import { renderDefaultTags, renderMinimalTags } from './renders/tags';
+import { renderDefaultTag, renderMinimalTag } from './renders/Tag';
 
 const Page = () => {
   const [singleDate, setSingleDate] = useState<Value>();
@@ -42,13 +42,13 @@ const Page = () => {
 
         <div className="w-full h border border-gray-200 px-20 my-10" />
 
-        {/* Tags */}
+        {/* Tag */}
         <div className="flex flex-col gap-10 items-center justify-between">
           <div className="flex flex-col gap-10 items-center justify-between">
-            <h1 className="text-2xl font-bold">Tags</h1>
+            <h1 className="text-2xl font-bold">Tag</h1>
             <div className="flex flex-col gap-10 items-center justify-center">
-              {renderDefaultTags()}
-              {renderMinimalTags()}
+              {renderDefaultTag()}
+              {renderMinimalTag()}
             </div>
           </div>
         </div>
diff --git a/packages/frontend/src/pages/components/renders/tags.tsx b/packages/frontend/src/pages/components/renders/tags.tsx
index 760b7313..f01c526b 100644
--- a/packages/frontend/src/pages/components/renders/tags.tsx
+++ b/packages/frontend/src/pages/components/renders/tags.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import { Tags } from 'components/shared/Tags';
+import { Tag } from 'components/shared/Tag';
 import { PlusIcon } from 'components/shared/CustomIcon';
 
-export const renderDefaultTags = () =>
+export const renderDefaultTag = () =>
   (['default'] as const).map((style) => (
     <div key={style} className="flex gap-4 items-center">
       {(
         ['attention', 'negative', 'positive', 'emphasized', 'neutral'] as const
       ).map((type) => (
         <div key={type} className="flex flex-col gap-4">
-          <Tags
+          <Tag
             leftIcon={<PlusIcon />}
             rightIcon={<PlusIcon />}
             style={style}
@@ -17,8 +17,8 @@ export const renderDefaultTags = () =>
             size="sm"
           >
             Label
-          </Tags>
-          <Tags
+          </Tag>
+          <Tag
             leftIcon={<PlusIcon />}
             rightIcon={<PlusIcon />}
             size="xs"
@@ -26,20 +26,20 @@ export const renderDefaultTags = () =>
             type={type}
           >
             Label
-          </Tags>
+          </Tag>
         </div>
       ))}
     </div>
   ));
 
-export const renderMinimalTags = () =>
+export const renderMinimalTag = () =>
   (['minimal'] as const).map((style) => (
     <div key={style} className="flex gap-4 items-center">
       {(
         ['attention', 'negative', 'positive', 'emphasized', 'neutral'] as const
       ).map((type) => (
         <div key={type} className="flex flex-col gap-4">
-          <Tags
+          <Tag
             leftIcon={<PlusIcon />}
             rightIcon={<PlusIcon />}
             style={style}
@@ -47,8 +47,8 @@ export const renderMinimalTags = () =>
             size="sm"
           >
             Label
-          </Tags>
-          <Tags
+          </Tag>
+          <Tag
             leftIcon={<PlusIcon />}
             rightIcon={<PlusIcon />}
             size="xs"
@@ -56,7 +56,7 @@ export const renderMinimalTags = () =>
             type={type}
           >
             Label
-          </Tags>
+          </Tag>
         </div>
       ))}
     </div>