Improved Storybooks and added tag link in navigation

.czrc

@@ -13,10 +13,10 @@
       "name": "plugin:              anything Plugin specific"
     },
     {
-      "value": "stroybook",
-      "name": "stroybook:           anything Stroybook specific"
+      "value": "storybook",
+      "name": "storybook:           anything Storybook specific"
     }
   ],
   "scopesSearchValue": true,
   "allowCustomScopes": false
-}
+}

apps/docs/components/Examples/integrations/combobox.tsx

@@ -142,7 +142,10 @@ function Combobox() {
               </Button>
             )}
           </div>
-          <PopoverContent className="!p-0" style={{ width: contentwidth }}>
+          <PopoverContent
+            className="!max-w-full !p-0"
+            style={{ width: contentwidth }}
+          >
             <Command shouldFilter={false}>
               <CommandList>
                 <CommandGroup>

apps/docs/components/Examples/tag.tsx

@@ -3,14 +3,14 @@ import { Tag } from "@rafty/ui";
 export const tag_examples = {
   "tag:usage": <Tag>Tag text</Tag>,
   "tag:sizes": (
-    <div>
+    <div className="space-y-2">
       <Tag size="sm">Tag text</Tag>
       <Tag size="md">Tag text</Tag>
       <Tag size="lg">Tag text</Tag>
     </div>
   ),
   "tag:colorschema": (
-    <div>
+    <div className="space-y-2">
       <Tag colorScheme="primary">Tag text</Tag>
       <Tag colorScheme="success">Tag text</Tag>
       <Tag colorScheme="warning">Tag text</Tag>

apps/docs/lib/navigation.ts

@@ -147,6 +147,10 @@ export const navigation = [
         title: "Tag Field",
         href: "/docs/components/tag-field",
       },
+      {
+        title: "Tag",
+        href: "/docs/components/tag",
+      },
       {
         title: "Text",
         href: "/docs/components/text",

apps/storybook/src/accordion.stories.tsx

@@ -12,6 +12,7 @@ const meta: Meta<typeof Accordion> = {
   args: {
     variant: "solid",
     size: "md",
+    isBarebone: false,
   },
   argTypes: {
     variant: {
@@ -30,14 +31,112 @@ export default meta;
 type Story = StoryObj<typeof Accordion>;
 
 export const Default: Story = {
-  render: ({ variant, size }) => (
+  render: ({ variant, size, isBarebone }) => (
     <div className="w-[640px] rounded-md border p-4 dark:border-zinc-700">
       <Accordion
         size={size}
         variant={variant}
+        isBarebone={isBarebone}
         type="single"
         defaultValue="1"
         collapsible
+      >
+        <AccordionItem value="1">
+          <AccordionTrigger>
+            <span className="flex-1 text-left">Section 1 title</span>
+          </AccordionTrigger>
+          <AccordionContent data-cy="content">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="3">
+          <AccordionTrigger>Section 2 title</AccordionTrigger>
+          <AccordionContent>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam.
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  ),
+};
+
+export const SingleType: Story = {
+  render: ({ variant, size, isBarebone }) => (
+    <div className="w-[640px] rounded-md border p-4 dark:border-zinc-700">
+      <Accordion
+        size={size}
+        variant={variant}
+        isBarebone={isBarebone}
+        type="single"
+        collapsible
+      >
+        <AccordionItem value="1">
+          <AccordionTrigger>
+            <span className="flex-1 text-left">Section 1 title</span>
+          </AccordionTrigger>
+          <AccordionContent data-cy="content">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="3">
+          <AccordionTrigger>Section 2 title</AccordionTrigger>
+          <AccordionContent>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam.
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  ),
+};
+
+export const MultipleType: Story = {
+  render: ({ variant, size, isBarebone }) => (
+    <div className="w-[640px] rounded-md border p-4 dark:border-zinc-700">
+      <Accordion
+        size={size}
+        variant={variant}
+        isBarebone={isBarebone}
+        type="multiple"
+      >
+        <AccordionItem value="1">
+          <AccordionTrigger>
+            <span className="flex-1 text-left">Section 1 title</span>
+          </AccordionTrigger>
+          <AccordionContent data-cy="content">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="3">
+          <AccordionTrigger>Section 2 title</AccordionTrigger>
+          <AccordionContent>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam.
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  ),
+};
+
+export const OpenClose: Story = {
+  render: ({ variant, size, isBarebone }) => (
+    <div className="w-[640px] rounded-md border p-4 dark:border-zinc-700">
+      <Accordion
+        size={size}
+        variant={variant}
+        isBarebone={isBarebone}
+        type="multiple"
       >
         <AccordionItem value="1">
           <AccordionTrigger>

apps/storybook/src/alert.stories.tsx

@@ -12,12 +12,18 @@ const meta: Meta<typeof Alert> = {
   args: {
     status: "info",
     size: "md",
+    variant: "simple",
+    isBarebone: false,
   },
   argTypes: {
     status: {
       control: "select",
       options: ["error", "warning", "info", "success"],
     },
+    variant: {
+      control: "select",
+      options: ["simple", "solid", "left-accent", "top-accent"],
+    },
     size: {
       control: "select",
       options: ["sm", "md", "lg"],
@@ -28,62 +34,34 @@ const meta: Meta<typeof Alert> = {
 export default meta;
 type Story = StoryObj<typeof Alert>;
 
-export const Variants: Story = {
-  render: ({ status, size }) => (
-    <div className="grid w-full max-w-6xl grid-cols-2 gap-10">
-      <div className="flex flex-col gap-4">
-        <p className="dark:text-white">Simple Variant</p>
-        <Alert size={size} status={status}>
-          <AlertIcon />
-          <AlertTitle id="title">Title</AlertTitle>
-          <AlertDescription>Description</AlertDescription>
-        </Alert>
-      </div>
-      <div className="flex flex-col gap-4">
-        <p className="dark:text-white">Solid Variant</p>
-        <Alert variant="solid" size={size} status={status}>
-          <AlertIcon />
-          <AlertTitle>Title</AlertTitle>
-          <AlertDescription>Description</AlertDescription>
-        </Alert>
-      </div>
-      <div className="flex flex-col gap-4">
-        <p className="dark:text-white">left-accent Variant</p>
-        <Alert variant="left-accent" size={size} status={status}>
-          <AlertIcon />
-          <AlertTitle>Title</AlertTitle>
-          <AlertDescription>Description</AlertDescription>
-        </Alert>
-      </div>
-      <div className="flex flex-col gap-4">
-        <p className="dark:text-white">top-accent Variant</p>
-        <Alert variant="top-accent" size={size} status={status}>
-          <AlertIcon />
-          <AlertTitle>Title</AlertTitle>
-          <AlertDescription>Description</AlertDescription>
-        </Alert>
-      </div>
-    </div>
+export const Default: Story = {
+  render: ({ status, size, variant, isBarebone }) => (
+    <Alert
+      size={size}
+      status={status}
+      variant={variant}
+      isBarebone={isBarebone}
+    >
+      <AlertIcon />
+      <AlertTitle id="title">Title</AlertTitle>
+      <AlertDescription>Description</AlertDescription>
+    </Alert>
   ),
 };
-export const AlertWithAction: Story = {
-  args: { variant: "simple" },
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["simple", "solid", "left-accent", "top-accent"],
-    },
-  },
 
-  render: ({ status, size, variant }) => (
-    <div className="flex w-full max-w-3xl flex-col gap-4">
-      <Alert variant={variant} size={size} status={status}>
-        <AlertIcon />
-        <AlertTitle>Title</AlertTitle>
-        <AlertDescription>Description</AlertDescription>
-        <div className="flex-1" />
-        <Button>Action</Button>
-      </Alert>
-    </div>
+export const WithAction: Story = {
+  render: ({ status, size, variant, isBarebone }) => (
+    <Alert
+      variant={variant}
+      size={size}
+      status={status}
+      isBarebone={isBarebone}
+    >
+      <AlertIcon />
+      <AlertTitle>Title</AlertTitle>
+      <AlertDescription>Description</AlertDescription>
+      <div className="flex-1" />
+      <Button>Action</Button>
+    </Alert>
   ),
 };

apps/storybook/src/alertdialog.stories.tsx

@@ -20,20 +20,22 @@ const meta: Meta<typeof AlertDialog> = {
   argTypes: {
     size: {
       control: "select",
-      options: ["sm", "md", "lg"],
+      options: ["sm", "md", "lg", "xl"],
     },
-    isBarebone: {},
   },
 };
 export default meta;
+
 type Story = StoryObj<typeof AlertDialog>;
 
 export const Default: Story = {
   render: ({ size, isBarebone }) => (
     <AlertDialog size={size} isBarebone={isBarebone}>
-      <AlertDialogTrigger>Open</AlertDialogTrigger>
+      <AlertDialogTrigger variant="solid" colorScheme="error">
+        Delete
+      </AlertDialogTrigger>
       <AlertDialogOverlay />
-      <AlertDialogContent data-cy="dialogcontent">
+      <AlertDialogContent>
         <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
         <AlertDialogDescription>
           This action cannot be undone. This will permanently delete your

apps/storybook/src/badge.stories.tsx

@@ -23,10 +23,5 @@ export default meta;
 type Story = StoryObj<typeof Badge>;
 
 export const Default: Story = {
-  render: ({ status, size }) => (
-    <div className="flex items-center gap-1.5">
-      <Badge size={size} status={status} />
-      <p className="font-medium leading-snug dark:text-white">Badge</p>
-    </div>
-  ),
+  render: ({ status, size }) => <Badge size={size} status={status} />,
 };