♻️ refactor: rename tags to tag

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>;

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,

packages/frontend/src/components/shared/Tag/index.ts

@@ -0,0 +1,2 @@
+export * from './Tag';
+export * from './Tag.theme';

packages/frontend/src/components/shared/Tags/index.ts

@@ -1,2 +0,0 @@
-export * from './Tags';
-export * from './Tags.theme';

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>

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>