Feature/accordion (#16)

* feat: accordion component

* fix: accordion storybook

* Feature/Slider (#13)

* feat: add slider component

* feat: add args in slider storybook

* Feature/alert-dialog (#14)

* feat: add AlertDialog component

* feat: upgrade storybook

---------

Co-authored-by: boomchanotai <[email protected]>

* feat: hover card component & storybook (#15)

* fix: lock file

---------

Co-authored-by: phongit.kha <[email protected]>
Co-authored-by: boomchanotai <[email protected]>

lib/components/Accordion/index.stories.tsx

@@ -0,0 +1,84 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '.'
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'radio',
+      options: ['single', 'multiple'],
+    },
+    items: {
+      control: 'object',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Accordion>
+
+const AccordionTest = ({
+  items,
+  type = 'single',
+}: {
+  items: { title: string; content: string }[]
+  type?: 'single' | 'multiple'
+}) => (
+  <Accordion type={type} className='w-full'>
+    {items.map((item, index) => (
+      <AccordionItem key={index} value={`item-${index + 1}`}>
+        <AccordionTrigger>{item.title}</AccordionTrigger>
+        <AccordionContent>{item.content}</AccordionContent>
+      </AccordionItem>
+    ))}
+  </Accordion>
+)
+
+export const SingleAccordion: Story = {
+  args: {
+    type: 'single',
+    items: [
+      {
+        title: 'Is it accessible?',
+        content: 'Yes. It adheres to the WAI-ARIA design pattern.',
+      },
+      {
+        title: 'Is it styled?',
+        content:
+          "Yes. It comes with default styles that matches the other components' aesthetic.",
+      },
+      {
+        title: 'Is it animated?',
+        content:
+          "Yes. It's animated by default, but you can disable it if you prefer.",
+      },
+    ],
+  },
+  render: (args) => <AccordionTest type={args.type} items={args.items} />,
+}
+
+export const MultipleAccordion: Story = {
+  args: {
+    type: 'multiple',
+    items: [
+      {
+        title: 'Is it accessible?',
+        content: 'Yes. It adheres to the WAI-ARIA design pattern.',
+      },
+      {
+        title: 'Is it styled?',
+        content:
+          "Yes. It comes with default styles that matches the other components' aesthetic.",
+      },
+      {
+        title: 'Is it animated?',
+        content:
+          "Yes. It's animated by default, but you can disable it if you prefer.",
+      },
+    ],
+  },
+  render: (args) => <AccordionTest {...args} />,
+}

lib/components/Accordion/index.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDown } from 'lucide-react'
+import * as React from 'react'
+
+import { cn } from '@/utils'
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn('border-b', className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = 'AccordionItem'
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className='flex'>
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className='size-4 shrink-0 transition-transform duration-200' />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className='overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down'
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package.json

@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-collapsible": "^1.1.1",