From 0012392fc22a08a275a624776038db92119ff2a9 Mon Sep 17 00:00:00 2001
From: zuramai <saugi.dev@gmail.com>
Date: Mon, 20 Nov 2023 09:36:23 +0700
Subject: [PATCH 1/7] refactor: use autodocs on Alert components

---
 packages/alert/src/index.ts                   |   3 +-
 packages/alert/src/lib/alert.tsx              |  24 +--
 packages/alert/src/stories/Alert.stories.tsx  |  99 ++++++++++++
 packages/alert/src/stories/Types.stories.tsx  | 153 ------------------
 .../alert/src/stories/Variants.stories.tsx    | 139 ----------------
 5 files changed, 113 insertions(+), 305 deletions(-)
 create mode 100644 packages/alert/src/stories/Alert.stories.tsx
 delete mode 100644 packages/alert/src/stories/Types.stories.tsx
 delete mode 100644 packages/alert/src/stories/Variants.stories.tsx

diff --git a/packages/alert/src/index.ts b/packages/alert/src/index.ts
index 8fa0e4b..5b1f651 100644
--- a/packages/alert/src/index.ts
+++ b/packages/alert/src/index.ts
@@ -1,3 +1,4 @@
 import Alert from "./lib/alert";
 
-export default Alert;
+export * from "./lib/alert";
+export default Alert
\ No newline at end of file
diff --git a/packages/alert/src/lib/alert.tsx b/packages/alert/src/lib/alert.tsx
index 45326ef..90418eb 100644
--- a/packages/alert/src/lib/alert.tsx
+++ b/packages/alert/src/lib/alert.tsx
@@ -1,8 +1,8 @@
 import React, { ReactNode, useState } from 'react';
 import { GoInfo, GoXCircle, GoCheckCircle } from 'react-icons/go';
 
-interface AlertProps {
-  type: 'warning' | 'danger' | 'success' | 'info';
+export interface AlertProps {
+  variant: 'warning' | 'error' | 'success' | 'info';
   icon?: boolean | ReactNode
   title?: string;
   description?: string | ReactNode;
@@ -29,7 +29,7 @@ const classes = {
     link: 'text-green-700 hover:text-green-600',
     dismissBtn: 'bg-green-50 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50',
   },
-  danger: {
+  error: {
     bg: 'bg-red-50',
     text: 'text-red-800',
     description: 'text-red-700',
@@ -45,8 +45,8 @@ const classes = {
   },
 }
 
-const Alert: React.FC<AlertProps> = ({
-  type,
+export const Alert: React.FC<AlertProps> = ({
+  variant,
   title,
   icon,
   description,
@@ -62,12 +62,12 @@ const Alert: React.FC<AlertProps> = ({
       return icon
     }
 
-    switch (type) {
+    switch (variant) {
       case 'warning':
         return (
           <GoInfo className="h-5 w-5 text-yellow-400" aria-hidden="true" />
         );
-      case 'danger':
+      case 'error':
         return (
           <GoXCircle className="h-5 w-5 text-red-400" aria-hidden="true" />
         );
@@ -95,7 +95,7 @@ const Alert: React.FC<AlertProps> = ({
 
   return (
     <div
-      className={`rounded-md p-4 ${classes[type].bg}`}
+      className={`rounded-md p-4 ${classes[variant].bg}`}
     >
       <div className="flex flex-col md:flex-row">
         {icon && (
@@ -105,7 +105,7 @@ const Alert: React.FC<AlertProps> = ({
           
           {title && (
             <h3
-              className={`text-sm font-medium ${classes[type].text}`}
+              className={`text-sm font-medium ${classes[variant].text}`}
             >
               {title}
             </h3>
@@ -117,7 +117,7 @@ const Alert: React.FC<AlertProps> = ({
 
           {description && (
             <div
-              className={`text-sm ${classes[type].description}`}
+              className={`text-sm ${classes[variant].description}`}
             >
               {typeof description === 'string' ? (
                 <p>{description}</p>
@@ -132,7 +132,7 @@ const Alert: React.FC<AlertProps> = ({
           <p className="mt-3 text-sm md:mt-0 md:ml-3">
             <a
               href={link.url}
-              className={`whitespace-nowrap font-medium ${classes[type].link}`}
+              className={`whitespace-nowrap font-medium ${classes[variant].link}`}
             >
               {link.text}
               <span aria-hidden="true"> &rarr;</span>
@@ -145,7 +145,7 @@ const Alert: React.FC<AlertProps> = ({
               <button
                 type="button"
                 onClick={handleDismiss}
-                className={`inline-flex rounded-md p-1.5 ${classes[type].dismissBtn}`}
+                className={`inline-flex rounded-md p-1.5 ${classes[variant].dismissBtn}`}
               >
                 <span className="sr-only">Dismiss</span>
                 <GoXCircle className="h-5 w-5" aria-hidden="true" />
diff --git a/packages/alert/src/stories/Alert.stories.tsx b/packages/alert/src/stories/Alert.stories.tsx
new file mode 100644
index 0000000..4ce2f09
--- /dev/null
+++ b/packages/alert/src/stories/Alert.stories.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import Title from '@bootwind/title';
+import Alert, { AlertProps } from '../index';
+
+export default {
+  tags: ['autodocs'],
+  title: 'Components/Alert',
+  component: Alert,
+  args: {
+    title: "Hi There!",
+    description: 'Welcome back, User!',
+    dismissButton: false,
+  },
+  argTypes: {
+    description: {
+      description: 'The title text',
+      type: "string",
+      control: {
+        type: 'text'
+      }
+    },
+    dismissButton: {
+      description: 'Whether to show dismiss button',
+      type: "boolean",
+      control: {
+        type: 'boolean',
+      }
+    },
+    link: {
+      description: 'Add link to the alert',
+      type: "string",
+      control: {
+        type: 'object',
+      }
+    },
+    icon: {
+      description: 'Alert icon',
+      type: "boolean",
+      control: {
+        type: 'boolean',
+      }
+    },
+    variant: {
+      description: 'The color type of the alert',
+      type: "string",
+      options: ['warning', 'danger', 'success', 'info'],
+      control: {
+        type: 'select',
+      }
+    },
+  },
+} as Meta;
+type Story = StoryObj<AlertProps>;
+
+export const WithTitle: Story = {
+  args: {
+    variant: 'info',
+    title: "With Title",
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam rerum sequi, aperiam nihil harum sapiente veniam rem soluta quasi fugit voluptatem voluptate tempora consectetur vitae dignissimos at ipsum perspiciatis ab!"
+  }
+}
+export const WithoutTitle: Story = {
+  args: {
+    title: "",
+    variant: 'success',
+    description: "Order success"
+  }
+}
+export const DismissButton: Story = {
+  args: {
+    title: "Invalid credentials",
+    variant: 'error',
+    description: "Wrong username or password",
+    dismissButton: true,
+  }
+}
+export const WithIcon: Story = {
+  args: {
+    variant: 'info',
+    description: "A new software update is available. See what’s new in version 2.0.4.",
+    title: "Information",
+    icon: true
+  }
+}
+export const Link: Story = {
+  args: {
+    variant: 'info',
+    description: "A new software update is available. See what’s new in version 2.0.4.",
+    title: "Information",
+    icon: true,
+    
+    link: {
+      url: 'https://google.com',
+      text: 'Open link'
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/alert/src/stories/Types.stories.tsx b/packages/alert/src/stories/Types.stories.tsx
deleted file mode 100644
index ad0d138..0000000
--- a/packages/alert/src/stories/Types.stories.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-
-import Title from '@bootwind/title';
-import Alert from '../index';
-
-export default {
-  title: 'Components/Alert/Types',
-  component: Alert,
-  argTypes: {},
-} as Meta;
-
-export const WithTitle = () => (
-  <>
-
-    <Title
-      title="Alerts"
-      description="The Alerts component in the Bootwind Design System enables you to convey important messages or notifications to users with clarity and style. Customize the alert's appearance, type, and content to effectively communicate information, warnings, or updates, ensuring a seamless and informative user experience in your interface."
-    />
-
-    <div className="mb-5">
-      <Alert
-        type="info"
-        title="With Title"
-        description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam quo totam eius aperiam dolorum."
-      />
-    </div>
-
-    <Alert
-      type="danger"
-      title="There were 2 errors with your submission"
-      description={
-        <ul role="list" className="list-disc space-y-1 pl-5">
-          <li>Your password must be at least 8 characters</li>
-          <li>
-            Your password must include at least one pro wrestling finishing move
-          </li>
-        </ul>
-      }
-    />
-  </>
-
-);
-
-export const WithoutTitle = () => (
-  <>
-    <Title
-      title="Alerts"
-      description="The Alerts component in the Bootwind Design System enables you to convey important messages or notifications to users with clarity and style. Customize the alert's appearance, type, and content to effectively communicate information, warnings, or updates, ensuring a seamless and informative user experience in your interface."
-    />
-
-    <div className="mb-5">
-      <Alert
-        type="success"
-        description="Order success"
-      />
-    </div>
-    <div className="mb-5">
-      <Alert
-        type="danger"
-        description="Failed placing your order"
-      />
-    </div>
-    <div className="mb-5">
-      <Alert
-        type="info"
-        description="Hello World!"
-      />
-    </div>
-    <div className="mb-5">
-      <Alert
-        type="warning"
-        description="You have 2 assignments to do"
-      />
-    </div>
-  </>
-);
-export const DismissLink = () => (
-  <>
-    <Title
-      title="Alerts"
-      description="The Alerts component in the Bootwind Design System enables you to convey important messages or notifications to users with clarity and style. Customize the alert's appearance, type, and content to effectively communicate information, warnings, or updates, ensuring a seamless and informative user experience in your interface."
-    />
-
-    <div className="mb-5">
-      <Alert
-        type="success"
-        dismissButton
-        description="Order success"
-      />
-    </div>
-    <div className="mb-5">
-      <Alert
-        type="danger"
-        dismissButton
-        description="Failed placing your order"
-      />
-    </div>
-    <div className="mb-5">
-      <Alert
-        type="info"
-        dismissButton
-        description="Hello World!"
-      />
-    </div>
-    <div className="mb-5">
-      <Alert
-        type="warning"
-        dismissButton
-        description="You have 2 assignments to do"
-      />
-    </div>
-  </>
-);
-
-export const WithIcon = () => (
-  <>
-    <Title
-      title="Alerts"
-      description="The Alerts component in the Bootwind Design System enables you to convey important messages or notifications to users with clarity and style. Customize the alert's appearance, type, and content to effectively communicate information, warnings, or updates, ensuring a seamless and informative user experience in your interface."
-    />
-
-    <div className="mb-5">
-      <Alert
-        icon={true}
-        description="A new software update is available. See what’s new in version 2.0.4."
-        type="info"
-        title="Information"
-      />
-    </div>
-    <div className="mb-5">
-      <Alert
-        icon={true}
-        type="warning"
-        description="You have 2 uncompleted assignment"
-      />
-    </div>
-    <div className="mb-5">
-      <Alert
-        icon={true}
-        type="success"
-        description="Order success!"
-      />
-    </div>
-    <div className="mb-5">
-      <Alert
-        icon={true}
-        type="danger"
-        description="Invalid credentials"
-      />
-    </div>
-  </>
-);
diff --git a/packages/alert/src/stories/Variants.stories.tsx b/packages/alert/src/stories/Variants.stories.tsx
deleted file mode 100644
index a41ee93..0000000
--- a/packages/alert/src/stories/Variants.stories.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-
-import Title from '@bootwind/title';
-import Alert from '..';
-
-export default {
-  title: 'Components/Alert/Variants',
-  component: Alert,
-  argTypes: {},
-} as Meta;
-
-export const Warning = () => (
-  <>
-
-    <Title
-      title="Alerts"
-      description="The Alerts component in the Bootwind Design System enables you to convey important messages or notifications to users with clarity and style. Customize the alert's appearance, type, and content to effectively communicate information, warnings, or updates, ensuring a seamless and informative user experience in your interface."
-    />
-
-    <Alert
-      type="warning"
-      title="Attention needed"
-      description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam quo totam eius aperiam dolorum."
-    />
-
-  </>
-);
-
-export const Error = () => (
-  <>
-    <Title
-      title="Alerts"
-      description="The Alerts component in the Bootwind Design System enables you to convey important messages or notifications to users with clarity and style. Customize the alert's appearance, type, and content to effectively communicate information, warnings, or updates, ensuring a seamless and informative user experience in your interface."
-    />
-
-
-    <Alert
-      type="danger"
-      title="There were 2 errors with your submission"
-      description={
-        <ul role="list" className="list-disc space-y-1 pl-5">
-          <li>Your password must be at least 8 characters</li>
-          <li>
-            Your password must include at least one pro wrestling finishing move
-          </li>
-        </ul>
-      }
-    />
-  </>
-);
-
-export const Success = () => (
-  <>
-
-    <Title
-      title="Alerts"
-      description="The Alerts component in the Bootwind Design System enables you to convey important messages or notifications to users with clarity and style. Customize the alert's appearance, type, and content to effectively communicate information, warnings, or updates, ensuring a seamless and informative user experience in your interface."
-    />
-
-
-    <Alert
-      type="success"
-      title="Order completed"
-      description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam."
-      actions={
-        <div className="-mx-2 -my-1.5 flex">
-          <button
-            type="button"
-            className="rounded-md bg-green-50 px-2 py-1.5 text-sm font-medium text-green-800 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50"
-          >
-            View status
-          </button>
-          <button
-            type="button"
-            className="ml-3 rounded-md bg-green-50 px-2 py-1.5 text-sm font-medium text-green-800 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50"
-          >
-            Dismiss
-          </button>
-        </div>
-      }
-    />
-  </>
-);
-
-export const Info = () => (
-  <>
-
-    <Title
-      title="Alerts"
-      description="The Alerts component in the Bootwind Design System enables you to convey important messages or notifications to users with clarity and style. Customize the alert's appearance, type, and content to effectively communicate information, warnings, or updates, ensuring a seamless and informative user experience in your interface."
-    />
-
-
-    <Alert
-      type="info"
-      title="A new software update is available. See what’s new in version 2.0.4."
-      link={{ url: '#', text: 'Details' }}
-    />
-  </>
-);
-
-export const WarningWithLink = () => (
-  <>
-
-    <Title
-      title="Alerts"
-      description="The Alerts component in the Bootwind Design System enables you to convey important messages or notifications to users with clarity and style. Customize the alert's appearance, type, and content to effectively communicate information, warnings, or updates, ensuring a seamless and informative user experience in your interface."
-    />
-
-
-    <Alert
-      type="warning"
-      title="You have no credits left."
-      description={
-        <>
-          You have no credits left.{' '}
-          <a
-            href="#"
-            className="font-medium text-yellow-700 underline hover:text-yellow-600"
-          >
-            Upgrade your account to add more credits.
-          </a>
-        </>
-      }
-    />
-  </>
-);
-
-export const SuccessWithDismissButton = () => (
-  <>
-    <Title
-      title="Alerts"
-      description="The Alerts component in the Bootwind Design System enables you to convey important messages or notifications to users with clarity and style. Customize the alert's appearance, type, and content to effectively communicate information, warnings, or updates, ensuring a seamless and informative user experience in your interface."
-    />
-
-    <Alert type="success" title="Successfully uploaded" dismissButton />
-  </>
-);

From 038cc0f5319fb2c4b157b39f7813379a59d01d69 Mon Sep 17 00:00:00 2001
From: zuramai <saugi.dev@gmail.com>
Date: Mon, 20 Nov 2023 10:14:09 +0700
Subject: [PATCH 2/7] refactor: avatar autodocs

---
 .../avatar/src/stories/Avatar.stories.tsx     | 36 +++++++------------
 1 file changed, 13 insertions(+), 23 deletions(-)

diff --git a/packages/avatar/src/stories/Avatar.stories.tsx b/packages/avatar/src/stories/Avatar.stories.tsx
index d077341..09fc88a 100644
--- a/packages/avatar/src/stories/Avatar.stories.tsx
+++ b/packages/avatar/src/stories/Avatar.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { Avatar, AvatarProps } from '../index';
 import Title from '@bootwind/title';
@@ -7,6 +7,7 @@ import Title from '@bootwind/title';
 export default {
   title: 'Components/Avatar',
   component: Avatar,
+  tags: ['autodocs'],
   argTypes: {
     rounded: {
       options: ['none', 'sm', 'md', 'lg', 'full'],
@@ -17,30 +18,19 @@ export default {
       control: { type: 'radio' },
     },
     showPlaceholder: {
+      description: 'Show avatar placeholder if `src` is null',
       control: 'boolean',
     },
   },
 } as Meta;
+type Story = StoryObj<AvatarProps>;
 
-export const Avatars = (args: AvatarProps) => (
-  <>
-    <Title
-      title="Avatars"
-      description="The Avatars component in the Bootwind Design System lets you personalize user profiles and identities with ease and style. Customize the avatar's size, shape, and appearance to create unique and visually appealing representations, enhancing the user experience and adding a touch of personality to your application or website."
-    />
-
-    <div className="flex space-x-4 px-8">
-      <Avatar
-        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-        {...args}
-        alt="User 1"
-      />
-      <Avatar
-        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-        {...args}
-        alt="User 2"
-      />
-      <Avatar showPlaceholder={true} {...args} alt="User 2" />
-    </div>
-  </>
-);
+export const Basic: Story = {
+  args: {
+    rounded: 'full',
+    notificationDot: 'gray',
+    alt: 'User 1 Avatar',
+    showPlaceholder: false,
+    src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+  }
+}
\ No newline at end of file

From d9ee28da85a365378d83b950e695f66292b4c810 Mon Sep 17 00:00:00 2001
From: zuramai <saugi.dev@gmail.com>
Date: Mon, 20 Nov 2023 10:21:57 +0700
Subject: [PATCH 3/7] refactor: use autodocs in badge

---
 packages/badges/src/lib/badges.tsx            |  9 +-
 .../badges/src/stories/Badges.stories.tsx     | 97 +++++++++++--------
 2 files changed, 61 insertions(+), 45 deletions(-)

diff --git a/packages/badges/src/lib/badges.tsx b/packages/badges/src/lib/badges.tsx
index a41244b..91eeb33 100644
--- a/packages/badges/src/lib/badges.tsx
+++ b/packages/badges/src/lib/badges.tsx
@@ -48,9 +48,12 @@ export const Badge: React.FC<BadgeProps> = ({
   withDot = false,
   children,
 }) => {
-  const baseClasses = `inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-medium`;
+  const baseClasses = `inline-flex items-center rounded-md px-2.5 py-0.5 font-medium`;
 
-  const sizeClasses = size === 'large' ? 'text-sm' : '';
+  const sizeClasses = {
+    large: 'text-sm',
+    small: 'text-xs'
+  };
 
   const badgeContent = (
     <>
@@ -78,7 +81,7 @@ export const Badge: React.FC<BadgeProps> = ({
   };
 
   return (
-    <span className={`${baseClasses} ${sizeClasses} ${getVariantClasses()}`}>
+    <span className={`${baseClasses} ${sizeClasses[size]} ${getVariantClasses()}`}>
       {badgeContent}
     </span>
   );
diff --git a/packages/badges/src/stories/Badges.stories.tsx b/packages/badges/src/stories/Badges.stories.tsx
index 07cb29d..7015b82 100644
--- a/packages/badges/src/stories/Badges.stories.tsx
+++ b/packages/badges/src/stories/Badges.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import {  Meta, StoryObj } from '@storybook/react';
 
 import Title from '@bootwind/title';
 import { Badge, BadgeProps } from '../index';
@@ -8,6 +8,10 @@ import { FaRegEnvelope } from 'react-icons/fa6'; // Import ikon dari react-icons
 export default {
   title: 'Components/Badge',
   component: Badge,
+  tags: ['autodocs'],
+  args: {
+    children: 'Badge'
+  },
   argTypes: {
     variant: {
       control: {
@@ -21,63 +25,72 @@ export default {
         options: ['small', 'large'],
       },
     },
+    children: {
+      description: "The badge text",
+      control: {
+        type: 'text'
+      }
+    }
   },
 } as Meta;
 
-const Template: Story<BadgeProps> = args => <>
-  <Title
-    title="Badge"
-    description="The Badge component in the Bootwind Design System is a versatile element that allows you to highlight and label content effectively. Customize the badge's appearance, size, and color to draw attention to specific information, notifications, or status indicators, enhancing the overall clarity and engagement of your interface."
-  />
-  <Badge {...args}> Badge </Badge></>;
+type Story = StoryObj<BadgeProps>;
 
-export const Primary = Template.bind({});
-Primary.args = {
-  variant: 'primary',
-};
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+  }
+}
 
-export const Neutral = Template.bind({});
-Neutral.args = {
-  variant: 'neutral',
-};
+export const Neutral: Story = {
+  args: {
+    variant: 'neutral',
+  }
+}
 
-export const Warning = Template.bind({});
-Warning.args = {
-  variant: 'warning',
-  withDot: true,
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+    withDot: true
+  }
 };
 
-export const Success = Template.bind({});
-Success.args = {
-  variant: 'success',
-};
+export const Success: Story = {
+  args: {
+    variant: 'success',
+  }
+}
 
-export const Error = Template.bind({});
-Error.args = {
-  variant: 'error',
-  withIcon: <span>🚨</span>,
+export const Error: Story = {
+  args: {
+    variant: 'error',
+    withIcon: <span>🚨</span>
+  }
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  variant: 'primary',
-  size: 'large',
+export const Large: Story = {
+  args: {
+    variant: 'primary',
+    size: 'large'
+  }
 };
 
-export const WithIcon = Template.bind({});
-WithIcon.args = {
-  variant: 'primary',
-  withIcon: <span>🌟</span>,
+export const WithIcon: Story = {
+  args: {
+    variant: 'primary',
+    withIcon: <span>🌟</span>
+  }
 };
 
-export const WithDotAndIcon = Template.bind({});
-WithDotAndIcon.args = {
-  variant: 'warning',
-  withDot: true,
-  withIcon: <span>🔔</span>,
+export const WithDotAndIcon: Story = {
+  args: {
+    variant: 'warning',
+    withDot: true,
+    withIcon: <span>🔔</span>,
+  }
 };
 export const AllBadges = () => (
-  <>
+  <div className='flex gap-3'>
     <Badge variant="warning" withIcon={<FaRegEnvelope />}>
       Warning
     </Badge>
@@ -93,5 +106,5 @@ export const AllBadges = () => (
     <Badge variant="success" withIcon={<FaRegEnvelope />}>
       Success
     </Badge>
-  </>
+  </div>
 );

From 9c4e94c7b26d62bd5b2880f4f6cd46d64f02b4f5 Mon Sep 17 00:00:00 2001
From: zuramai <saugi.dev@gmail.com>
Date: Mon, 20 Nov 2023 10:58:38 +0700
Subject: [PATCH 4/7] feat(components): allow breadcrumbs to render breadcrumb
 items as props

---
 packages/breadcrumb/src/lib/breadcrumb.tsx | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/breadcrumb/src/lib/breadcrumb.tsx b/packages/breadcrumb/src/lib/breadcrumb.tsx
index ba7531e..f368258 100644
--- a/packages/breadcrumb/src/lib/breadcrumb.tsx
+++ b/packages/breadcrumb/src/lib/breadcrumb.tsx
@@ -1,14 +1,28 @@
 import React from 'react';
 import { GoChevronRight, GoHome } from 'react-icons/go';
 
-interface BreadcrumbsProps {
-  children: React.ReactNode;
+export interface BreadcrumbsProps {
+  children: React.ReactNode
+  items?: BreadcrumbItemProps[]
 }
 
-export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ children }) => {
+export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ children, items }) => {
   return (
     <nav className="flex" aria-label="Breadcrumb">
       <ol role="list" className="flex items-center space-x-2">
+        {items?.map((item,index) => (
+          <li key={index}>
+            <div className="flex items-center">
+              {index > 0 && (
+                <GoChevronRight
+                  className="mr-2 h-3 w-3 flex-shrink-0 text-gray-500"
+                  aria-hidden="true"
+                />
+              )}
+              <BreadcrumbItem {...item}></BreadcrumbItem>
+            </div>
+          </li>
+        ))}
         {React.Children.map(children, (child, index) => (
           <li key={index}>
             <div className="flex items-center">

From 479c4a10d34db8ef6229d869d26c2d7fa413a8a3 Mon Sep 17 00:00:00 2001
From: zuramai <saugi.dev@gmail.com>
Date: Mon, 20 Nov 2023 10:58:47 +0700
Subject: [PATCH 5/7] refactor: autodocs breadcrumb

---
 .../src/stories/Breadcrumbs.stories.tsx       | 122 +++++++-----------
 1 file changed, 48 insertions(+), 74 deletions(-)

diff --git a/packages/breadcrumb/src/stories/Breadcrumbs.stories.tsx b/packages/breadcrumb/src/stories/Breadcrumbs.stories.tsx
index 0dd9d4c..c971841 100644
--- a/packages/breadcrumb/src/stories/Breadcrumbs.stories.tsx
+++ b/packages/breadcrumb/src/stories/Breadcrumbs.stories.tsx
@@ -1,82 +1,56 @@
 import React from 'react';
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import Title from '@bootwind/title';
-import { Breadcrumbs, BreadcrumbItem } from '../index';
-import { GoHome, GoComment, GoBook, GoFileDirectory } from 'react-icons/go';
+import { Breadcrumbs, BreadcrumbItem, BreadcrumbsProps } from '../index';
+import { GoHome, GoComment, GoBook, GoFileDirectory, GoFile } from 'react-icons/go';
 
 export default {
   title: 'Components/Breadcrumbs',
   component: Breadcrumbs,
-  argTypes: {},
+  tags: ['autodocs'],
+  argTypes: {
+    items: {
+      description: "Breadcrumb items to render",
+      control: {
+        type: 'array'
+      }
+    }
+  }
 } as Meta;
-
-export const TextAndIcon = () => (
-  <>
-    <Title
-      title="Breadcrumbs"
-      description="The Breadcrumbs component in the Bootwind Design System provides users with a clear and intuitive navigation path through your website or application. Customize the appearance, style, and links to create a breadcrumb trail that helps users easily track their location and navigate back to previous pages, enhancing overall usability and user experience."
-    />
-
-    <Breadcrumbs>
-      <BreadcrumbItem icon={<GoHome />} href="/">
-        Home
-      </BreadcrumbItem>
-      <BreadcrumbItem href="/docs" icon={<GoBook />}>
-        Docs
-      </BreadcrumbItem>
-      <BreadcrumbItem href="/docs/components" icon={<GoComment />}>
-        Components
-      </BreadcrumbItem>
-      <BreadcrumbItem
-        href="/docs/components/button"
-        icon={<GoFileDirectory />}
-        isActive
-      >
-        Button
-      </BreadcrumbItem>
-    </Breadcrumbs>
-  </>
-);
-
-export const OnlyText = () => (
-  <>
-    <Title
-      title="Breadcrumbs"
-      description="The Breadcrumbs component in the Bootwind Design System provides users with a clear and intuitive navigation path through your website or application. Customize the appearance, style, and links to create a breadcrumb trail that helps users easily track their location and navigate back to previous pages, enhancing overall usability and user experience."
-    />
-
-    <Breadcrumbs>
-      <BreadcrumbItem href="/">Home</BreadcrumbItem>
-      <BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
-      <BreadcrumbItem href="/docs/components">Components</BreadcrumbItem>
-      <BreadcrumbItem href="/docs/components/button" isActive>
-        Button
-      </BreadcrumbItem>
-    </Breadcrumbs>
-  </>
-);
-
-export const OnlyIcon = () => (
-  <>
-
-    <Title
-      title="Breadcrumbs"
-      description="The Breadcrumbs component in the Bootwind Design System provides users with a clear and intuitive navigation path through your website or application. Customize the appearance, style, and links to create a breadcrumb trail that helps users easily track their location and navigate back to previous pages, enhancing overall usability and user experience."
-    />
-
-    <Breadcrumbs>
-      <BreadcrumbItem href="/" icon={<GoHome />}></BreadcrumbItem>
-      <BreadcrumbItem href="/docs" icon={<GoBook />}></BreadcrumbItem>
-      <BreadcrumbItem
-        href="/docs/components"
-        icon={<GoComment />}
-      ></BreadcrumbItem>
-      <BreadcrumbItem
-        href="/docs/components/button"
-        icon={<GoFileDirectory />}
-        isActive
-      ></BreadcrumbItem>
-    </Breadcrumbs>
-  </>
-);
+type Story = StoryObj<BreadcrumbsProps>;
+
+
+export const TextAndIcon: Story = {
+  args: {
+    items: [
+      { icon: <GoHome />, href: '/docs', children: 'Home'},
+      { icon: <GoBook />, href: '/docs/components', children: 'Docs'},
+      { icon: <GoComment />, href: '/docs/components', children: 'Components'},
+      { icon: <GoFileDirectory />, href: '/docs/components/button', isActive: true, children: 'Button'},
+    ]
+  }
+}
+
+export const OnlyText: Story = {
+  args: {
+    items: [
+      { href: '/docs', children: 'Home'},
+      { href: '/docs/components', children: 'Docs'},
+      { href: '/docs/components', children: 'Components'},
+      { href: '/docs/components/button', isActive: true, children: 'Button'},
+    ]
+  }
+}
+
+
+export const OnlyIcons: Story = {
+  args: {
+    items: [
+      { icon: <GoHome />, href: '/docs' },
+      { icon: <GoBook />, href: '/docs/components' },
+      { icon: <GoComment />, href: '/docs/components' },
+      { icon: <GoFileDirectory />, href: '/docs/components/button', isActive: true },
+    ]
+  }
+}

From 0e323f2aa568f907db297b84bff283a27d0aaf2f Mon Sep 17 00:00:00 2001
From: zuramai <saugi.dev@gmail.com>
Date: Mon, 20 Nov 2023 11:56:37 +0700
Subject: [PATCH 6/7] feat(component): left and right icon in button component

---
 packages/button/src/lib/button.tsx | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/packages/button/src/lib/button.tsx b/packages/button/src/lib/button.tsx
index 7f6ce79..7fd8147 100644
--- a/packages/button/src/lib/button.tsx
+++ b/packages/button/src/lib/button.tsx
@@ -1,28 +1,28 @@
 import React, { ReactElement } from 'react';
 import { ReactNode } from 'react';
 
-type ButtonVariant = 'primary' | 'secondary' | 'ghost';
+type ButtonVariant = 'primary' | 'secondary' | 'text-only';
 type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: ButtonVariant;
   size?: ButtonSize;
-  hasArrow?: boolean;
-  icon?: ReactNode;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
   children?: ReactNode
 }
 
 export const Button = ({
   variant = 'primary',
   size = 'md',
-  hasArrow = false,
-  icon,
+  leftIcon,
+  rightIcon,
   children,
   ...props
 }: ButtonProps) => {
   const baseStyles =
-    'inline-flex items-center rounded-lg border border-transparent font-semibold';
+    'inline-flex items-center rounded-lg border border-transparent font-semibold  disabled:text-[#CED2D6]';
 
   const sizeStyles = {
     sm: 'px-3 py-2 text-sm',
@@ -33,10 +33,15 @@ export const Button = ({
 
   const colorStyles = {
     primary:
-      'bg-primary text-white shadow-sm hover:bg-[#525CD9] hover:outline-none hover:ring-1 hover:ring-gray-200 focus:outline-none focus:ring-4 focus:ring-gray-200',
+      `bg-primary text-white shadow-sm hover:bg-[#525CD9] border border-gray-50
+      enabled:hover:outline-none enabled:hover:ring-1 enabled:hover:ring-gray-200 
+      focus:outline-none focus:ring-4 focus:ring-gray-200
+      disabled:bg-[#F6F7F9] disabled:border-gray-300`,
     secondary:
-      'border border-slate-200 bg-white text-black shadow-sm hover:border-gray-500 hover:bg-[#F6F7F9] focus:outline-none focus:ring-2 focus:ring-gray-300',
-    ghost: 'text-black',
+      `border-slate-300 border text-black shadow-sm 
+      enabled:hover:border-gray-500 enabled:hover:bg-[#F6F7F9]
+      focus:outline-none focus:ring-2 focus:ring-gray-300`,
+    'text-only': 'text-black',
   };
 
   const buttonStyles = `${baseStyles} ${sizeStyles[size]} ${colorStyles[variant]}`;
@@ -44,9 +49,9 @@ export const Button = ({
   return (
     <>
     <button type="button" className={buttonStyles} {...props}>
-      {icon && <span className="mr-2">{icon}</span>}
+      {leftIcon && <span className="mr-2">{leftIcon}</span>}
       {children}
-      {hasArrow && <span className="ml-2">→</span>}
+      {rightIcon && <span className="ml-2">{rightIcon}</span>}
     </button>
     </>
   );

From 3c332e0df6ed3f5170ffc0826c972998c1f3829a Mon Sep 17 00:00:00 2001
From: zuramai <saugi.dev@gmail.com>
Date: Mon, 20 Nov 2023 11:56:43 +0700
Subject: [PATCH 7/7] refactor: button autodocs

---
 .../button/src/stories/Button.stories.tsx     | 131 +++++++++++-------
 1 file changed, 80 insertions(+), 51 deletions(-)

diff --git a/packages/button/src/stories/Button.stories.tsx b/packages/button/src/stories/Button.stories.tsx
index 9d88356..8321100 100644
--- a/packages/button/src/stories/Button.stories.tsx
+++ b/packages/button/src/stories/Button.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
+import { HiOutlineArrowRight } from 'react-icons/hi'
 
 import Title from '@bootwind/title';
 import { Button, ButtonProps } from '../index';
@@ -8,63 +9,91 @@ import { FaRegEnvelope } from 'react-icons/fa6';
 export default {
   title: 'Components/Button',
   component: Button,
+  tags: ['autodocs'],
+  args: {
+    children: "Button"
+  },
   argTypes: {
+    children: {
+      type: 'string',
+      description: "Content of the button",
+      control: {
+        type: 'text',
+      }
+    },
     variant: {
       control: { type: 'radio', options: ['primary', 'secondary', 'ghost'] },
     },
     size: {
       control: { type: 'radio', options: ['sm', 'md', 'lg', 'xl'] },
     },
+    leftIcon: {
+      control: { 
+        mapping: {
+          empty: [],
+        } 
+      },
+    },
+    rightIcon: {
+      control: { 
+        mapping: {
+          empty: [],
+        } 
+      },
+    },
   },
 } as Meta;
+type Story = StoryObj<ButtonProps>;
 
-export const Variants = (args: ButtonProps) => (
-  <>
-    <Title
-      title="Buttons"
-      description="The Forms component in the Bootwind Design System provides a fundamental building block for user input and interaction. Customize form fields, layouts, and validation to create user-friendly and functional forms that seamlessly integrate with your design. Whether you're collecting user data, processing payments, or enabling various interactions, the Forms component ensures a smooth and intuitive experience for users as they engage with your application or website."
-    />
-
-    <div className="flex flex-col space-y-8">
-      <div>
-        <Button variant="primary">Primary</Button>
-      </div>
-      <div>
-        <Button hasArrow={true} variant="primary">
-          Primary with Arrow
-        </Button>
-      </div>
-      <div>
-        <Button icon={<FaRegEnvelope />} hasArrow={true} variant="primary">
-          Primary with Arrow and Icon
-        </Button>
-      </div>
-      <div>
-        <Button variant="secondary">Secondary</Button>
-      </div>
-      <div>
-        <Button variant="ghost">Ghost</Button>
-      </div>
-    </div>
-  </>
-);
-
-export const Sizes = (args: ButtonProps) => (
-  <>
-    <Title
-      title="Buttons"
-      description="The Forms component in the Bootwind Design System provides a fundamental building block for user input and interaction. Customize form fields, layouts, and validation to create user-friendly and functional forms that seamlessly integrate with your design. Whether you're collecting user data, processing payments, or enabling various interactions, the Forms component ensures a smooth and intuitive experience for users as they engage with your application or website."
-    />
-    <div className="flex flex-col space-y-4 mt-8">
-      <div>
-        <Button size="sm">Small</Button>
-      </div>
-      <div>
-        <Button size="md">Medium</Button>
-      </div>
-      <div>
-        <Button size="lg">Large</Button>
-      </div>
-    </div>
-  </>
-);
\ No newline at end of file
+export const Basic: Story = {
+  args: {
+    rightIcon: <HiOutlineArrowRight/>,
+    leftIcon: <FaRegEnvelope />,
+    size: 'lg',
+  }
+}
+export const SizeSmall: Story = {
+  args: {
+    size: 'sm',
+    children: "Small"
+  }
+}
+export const SizeMedium: Story = {
+  args: {
+    size: 'md',
+    children: "Small"
+  }
+}
+export const SizeLarge: Story = {
+  args: {
+    size: 'lg',
+    children: "Small"
+  }
+}
+export const VariantPrimary: Story = {
+  args: {
+    children: "Click Me",
+    rightIcon: <HiOutlineArrowRight/>,
+    leftIcon: <FaRegEnvelope />,
+    variant: 'primary'
+  }
+}
+export const VariantSecondary: Story = {
+  args: {
+    children: "Click Me",
+    rightIcon: <HiOutlineArrowRight/>,
+    leftIcon: <FaRegEnvelope />,
+    variant: 'secondary'
+  }
+}
+export const VariantTextOnly: Story = {
+  args: {
+    children: "Click Me",
+    rightIcon: <HiOutlineArrowRight/>,
+    leftIcon: <FaRegEnvelope />,
+    variant: 'text-only'
+  }
+}
+export const Disabled = (args: ButtonProps) => (
+  <Button {...args} disabled={true} rightIcon={<HiOutlineArrowRight/>} leftIcon={<FaRegEnvelope />}></Button>
+)
\ No newline at end of file