♻️ refactor: avoid big conflict on the example page

packages/frontend/src/pages/components/index.tsx

@@ -1,43 +1,19 @@
-import { Avatar, AvatarVariants } from 'components/shared/Avatar';
-import { Badge, BadgeProps } from 'components/shared/Badge';
-import { Button, ButtonOrLinkProps } from 'components/shared/Button';
-import { Calendar } from 'components/shared/Calendar';
-import { Checkbox } from 'components/shared/Checkbox';
-import { PlusIcon } from 'components/shared/CustomIcon';
 import React, { useState } from 'react';
+import { Calendar } from 'components/shared/Calendar';
 import { Value } from 'react-calendar/dist/cjs/shared/types';
-
-const avatarSizes: AvatarVariants['size'][] = [18, 20, 24, 28, 32, 36, 40, 44];
-const avatarVariants: AvatarVariants['type'][] = ['gray', 'orange', 'blue'];
+import {
+  renderCheckbox,
+  renderCheckboxWithDescription,
+} from './renders/checkbox';
+import { avatars, avatarsFallback } from './renders/avatar';
+import { renderBadges } from './renders/badge';
+import { renderButtonIcons, renderButtons } from './renders/button';
+import { renderTabWithBadges, renderTabs } from './renders/tabs';
 
 const Page = () => {
   const [singleDate, setSingleDate] = useState<Value>();
   const [dateRange, setDateRange] = useState<Value>();
 
-  const avatars = avatarSizes.map((size) => {
-    return (
-      <Avatar
-        initials="SY"
-        key={String(size)}
-        size={size}
-        imageSrc="/gray.png"
-      />
-    );
-  });
-
-  const avatarsFallback = avatarVariants.map((color) => {
-    return avatarSizes.map((size) => {
-      return (
-        <Avatar
-          initials="SY"
-          key={`${color}-${size}`}
-          type={color}
-          size={size}
-        />
-      );
-    });
-  });
-
   return (
     <div className="relative h-full min-h-full">
       <div className="flex flex-col items-center justify-center max-w-7xl mx-auto px-20 py-20">
@@ -51,114 +27,36 @@ const Page = () => {
 
         <div className="w-full h border border-gray-200 px-20 my-10" />
 
-        {/* Insert Components here */}
+        {/* Button */}
         <div className="flex flex-col gap-10 items-center justify-between">
           <h1 className="text-2xl font-bold">Button</h1>
           <div className="flex flex-col gap-10">
-            {['primary', 'secondary', 'tertiary', 'danger'].map(
-              (variant, index) => (
-                <div className="flex gap-5 flex-wrap" key={index}>
-                  {['lg', 'md', 'sm', 'xs', 'disabled'].map((size) => (
-                    <Button
-                      leftIcon={<PlusIcon />}
-                      rightIcon={<PlusIcon />}
-                      variant={variant as ButtonOrLinkProps['variant']}
-                      size={
-                        size !== 'disabled'
-                          ? (size as ButtonOrLinkProps['size'])
-                          : 'md'
-                      }
-                      key={`${variant}-${size}`}
-                      disabled={size === 'disabled'}
-                    >
-                      Button
-                    </Button>
-                  ))}
-                </div>
-              ),
-            )}
-            {[
-              'primary',
-              'secondary',
-              'tertiary',
-              'ghost',
-              'danger',
-              'danger-ghost',
-            ].map((variant, index) => (
-              <div className="flex gap-5 flex-wrap" key={index}>
-                {['lg', 'md', 'sm', 'xs', 'disabled'].map((size) => (
-                  <Button
-                    iconOnly
-                    variant={variant as ButtonOrLinkProps['variant']}
-                    size={
-                      size !== 'disabled'
-                        ? (size as ButtonOrLinkProps['size'])
-                        : 'md'
-                    }
-                    key={`${variant}-${size}`}
-                    disabled={size === 'disabled'}
-                  >
-                    <PlusIcon />
-                  </Button>
-                ))}
-              </div>
-            ))}
+            {renderButtons()}
+            {renderButtonIcons()}
           </div>
 
           <div className="w-full h border border-gray-200 px-20 my-10" />
 
+          {/* Badge */}
           <div className="flex flex-col gap-10 items-center justify-between">
             <h1 className="text-2xl font-bold">Badge</h1>
-            <div className="space-y-5">
-              {['primary', 'secondary', 'tertiary', 'inset'].map(
-                (variant, index) => (
-                  <div className="flex gap-5" key={index}>
-                    {['sm', 'xs'].map((size) => (
-                      <Badge
-                        key={size}
-                        variant={variant as BadgeProps['variant']}
-                        size={size as BadgeProps['size']}
-                      >
-                        1
-                      </Badge>
-                    ))}
-                  </div>
-                ),
-              )}
-            </div>
+            <div className="space-y-5">{renderBadges()}</div>
           </div>
 
           <div className="w-full h border border-gray-200 px-20 my-10" />
 
+          {/* Checkbox */}
           <div className="flex flex-col gap-10 items-center justify-between">
             <h1 className="text-2xl font-bold">Checkbox</h1>
+            <div className="flex gap-10 flex-wrap">{renderCheckbox()}</div>
             <div className="flex gap-10 flex-wrap">
-              {Array.from({ length: 5 }).map((_, index) => (
-                <Checkbox
-                  id={`checkbox-${index + 1}`}
-                  key={index}
-                  label={`Label ${index + 1}`}
-                  disabled={index === 2 || index === 4 ? true : false}
-                  checked={index === 4 ? true : undefined}
-                  value={`value-${index + 1}`}
-                />
-              ))}
-            </div>
-            <div className="flex gap-10 flex-wrap">
-              {Array.from({ length: 2 }).map((_, index) => (
-                <Checkbox
-                  id={`checkbox-description-${index + 1}`}
-                  key={index}
-                  label={`Label ${index + 1}`}
-                  description={`Description of the checkbox ${index + 1}`}
-                  value={`value-with-description-${index + 1}`}
-                />
-              ))}
+              {renderCheckboxWithDescription()}
             </div>
           </div>
 
           <div className="w-full h border border-gray-200 px-20 my-10" />
 
+          {/* Calendar */}
           <div className="flex flex-col gap-10 items-center justify-between">
             <h1 className="text-2xl font-bold">Calendar</h1>
             <div className="flex flex-col gap-10">
@@ -185,16 +83,27 @@ const Page = () => {
                 />
               </div>
             </div>
+          </div>
 
-            <div className="w-full h border border-gray-200 px-20 my-10" />
+          <div className="w-full h border border-gray-200 px-20 my-10" />
 
-            {/* Avatar */}
-            <div className="flex flex-col gap-10 items-center justify-between">
-              <h1 className="text-2xl font-bold">Avatar</h1>
-              <div className="flex gap-10 flex-wrap max-w-[522px]">
-                {avatars}
-                {avatarsFallback}
-              </div>
+          {/* Avatar */}
+          <div className="flex flex-col gap-10 items-center justify-between">
+            <h1 className="text-2xl font-bold">Avatar</h1>
+            <div className="flex gap-10 flex-wrap max-w-[522px]">
+              {avatars}
+              {avatarsFallback}
+            </div>
+          </div>
+
+          <div className="w-full h border border-gray-200 px-20 my-10" />
+
+          {/* Tabs */}
+          <div className="flex flex-col gap-10 items-center justify-between">
+            <h1 className="text-2xl font-bold">Tabs</h1>
+            <div className="space-y-10">
+              {renderTabs()}
+              {renderTabWithBadges()}
             </div>
           </div>
         </div>

packages/frontend/src/pages/components/renders/avatar.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Avatar, AvatarVariants } from 'components/shared/Avatar';
+
+const avatarSizes: AvatarVariants['size'][] = [18, 20, 24, 28, 32, 36, 40, 44];
+const avatarVariants: AvatarVariants['type'][] = ['gray', 'orange', 'blue'];
+
+export const avatars = avatarSizes.map((size) => {
+  return (
+    <Avatar initials="SY" key={String(size)} size={size} imageSrc="/gray.png" />
+  );
+});
+
+export const avatarsFallback = avatarVariants.map((color) => {
+  return avatarSizes.map((size) => {
+    return (
+      <Avatar initials="SY" key={`${color}-${size}`} type={color} size={size} />
+    );
+  });
+});

packages/frontend/src/pages/components/renders/badge.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Badge } from 'components/shared/Badge';
+import { BadgeTheme } from 'components/shared/Badge/Badge.theme';
+
+export const renderBadges = () => {
+  return ['primary', 'secondary', 'tertiary', 'inset'].map((variant, index) => (
+    <div className="flex gap-5" key={index}>
+      {['sm', 'xs'].map((size) => (
+        <Badge
+          key={size}
+          variant={variant as BadgeTheme['variant']}
+          size={size as BadgeTheme['size']}
+        >
+          1
+        </Badge>
+      ))}
+    </div>
+  ));
+};

packages/frontend/src/pages/components/renders/button.tsx

@@ -0,0 +1,49 @@
+import { Button, ButtonTheme } from 'components/shared/Button';
+import { PlusIcon } from 'components/shared/CustomIcon';
+import React from 'react';
+
+export const renderButtons = () => {
+  return ['primary', 'secondary', 'tertiary', 'danger'].map(
+    (variant, index) => (
+      <div className="flex gap-5 flex-wrap" key={index}>
+        {['lg', 'md', 'sm', 'xs', 'disabled'].map((size) => (
+          <Button
+            leftIcon={<PlusIcon />}
+            rightIcon={<PlusIcon />}
+            variant={variant as ButtonTheme['variant']}
+            size={size !== 'disabled' ? (size as ButtonTheme['size']) : 'md'}
+            key={`${variant}-${size}`}
+            disabled={size === 'disabled'}
+          >
+            Button
+          </Button>
+        ))}
+      </div>
+    ),
+  );
+};
+
+export const renderButtonIcons = () => {
+  return [
+    'primary',
+    'secondary',
+    'tertiary',
+    'ghost',
+    'danger',
+    'danger-ghost',
+  ].map((variant, index) => (
+    <div className="flex gap-5 flex-wrap" key={index}>
+      {['lg', 'md', 'sm', 'xs', 'disabled'].map((size) => (
+        <Button
+          iconOnly
+          variant={variant as ButtonTheme['variant']}
+          size={size !== 'disabled' ? (size as ButtonTheme['size']) : 'md'}
+          key={`${variant}-${size}`}
+          disabled={size === 'disabled'}
+        >
+          <PlusIcon />
+        </Button>
+      ))}
+    </div>
+  ));
+};

packages/frontend/src/pages/components/renders/checkbox.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Checkbox } from 'components/shared/Checkbox';
+
+export const renderCheckbox = () => {
+  return Array.from({ length: 5 }).map((_, index) => (
+    <Checkbox
+      id={`checkbox-${index + 1}`}
+      key={index}
+      label={`Label ${index + 1}`}
+      disabled={index === 2 || index === 4 ? true : false}
+      checked={index === 4 ? true : undefined}
+      value={`value-${index + 1}`}
+    />
+  ));
+};
+
+export const renderCheckboxWithDescription = () => {
+  return Array.from({ length: 2 }).map((_, index) => (
+    <Checkbox
+      id={`checkbox-description-${index + 1}`}
+      key={index}
+      label={`Label ${index + 1}`}
+      description={`Description of the checkbox ${index + 1}`}
+      value={`value-with-description-${index + 1}`}
+    />
+  ));
+};

packages/frontend/src/pages/components/renders/tabs.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Tabs } from 'components/shared/Tabs';
+import { Badge } from 'components/shared/Badge';
+
+const tabs = Array.from({ length: 8 });
+
+export const renderTabs = () => {
+  return (
+    <Tabs defaultValue="A">
+      <Tabs.List>
+        {tabs.map((_, index) => (
+          <Tabs.Trigger key={index} value={index.toString()}>
+            Tab item {index}
+          </Tabs.Trigger>
+        ))}
+      </Tabs.List>
+    </Tabs>
+  );
+};
+
+export const renderTabWithBadges = () => {
+  return (
+    <Tabs defaultValue="A">
+      <Tabs.List>
+        {tabs.map((_, index) => (
+          <Tabs.Trigger
+            key={index}
+            value={index.toString()}
+            icon={<Badge variant="tertiary">{index}</Badge>}
+          >
+            Tab item
+          </Tabs.Trigger>
+        ))}
+      </Tabs.List>
+    </Tabs>
+  );
+};