From 8fcb0f4c11337077ae81be781a13220301849a3b Mon Sep 17 00:00:00 2001
From: CSAP <113345557+ChanatpakornS@users.noreply.github.com>
Date: Wed, 2 Oct 2024 17:16:13 +0700
Subject: [PATCH] Feature/separator (#9)

* chore: add radix-ui/Separator

* feat: separator

---------

Co-authored-by: boomchanotai <boom9387@hotmail.com>
---
 lib/components/Seperator/index.stories.tsx | 71 ++++++++++++++++++++++
 lib/components/Seperator/index.tsx         | 31 ++++++++++
 package.json                               |  1 +
 pnpm-lock.yaml                             |  5 ++
 4 files changed, 108 insertions(+)
 create mode 100644 lib/components/Seperator/index.stories.tsx
 create mode 100644 lib/components/Seperator/index.tsx

diff --git a/lib/components/Seperator/index.stories.tsx b/lib/components/Seperator/index.stories.tsx
new file mode 100644
index 0000000..115228d
--- /dev/null
+++ b/lib/components/Seperator/index.stories.tsx
@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Separator } from '.'
+
+const meta: Meta<typeof Separator> = {
+  title: 'Components/Separator',
+  component: Separator,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+  render: (args) => (
+    <div>
+      <div className='space-y-1'>
+        <h4 className='text-sm font-medium leading-none'>Radix Primitives</h4>
+        <p className='text-sm text-muted-foreground'>
+          An open-source UI component library.
+        </p>
+      </div>
+      <Separator className='my-4' {...args} />
+      <div className='flex h-5 items-center space-x-4 text-sm'>
+        <div>Blog</div>
+        <Separator orientation='vertical' />
+        <div>Docs</div>
+        <Separator orientation='vertical' />
+        <div>Source</div>
+      </div>
+    </div>
+  ),
+}
+
+export const Vertical: Story = {
+  args: {
+    orientation: 'vertical',
+  },
+  render: (args) => (
+    <div>
+      <div className='flex h-5 items-center space-x-4 text-sm'>
+        <div>Blog</div>
+        <Separator {...args} />
+        <div>Docs</div>
+        <Separator {...args} />
+        <div>Source</div>
+      </div>
+    </div>
+  ),
+}
+
+export const Horizontal: Story = {
+  args: {
+    orientation: 'horizontal',
+  },
+  render: (args) => (
+    <div className='space-y-4 text-center'>
+      <div>
+        <p>First Element</p>
+      </div>
+      <Separator {...args} />
+      <div>
+        <p>Second Element</p>
+      </div>
+    </div>
+  ),
+}
diff --git a/lib/components/Seperator/index.tsx b/lib/components/Seperator/index.tsx
new file mode 100644
index 0000000..e276797
--- /dev/null
+++ b/lib/components/Seperator/index.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import * as React from 'react'
+
+import { cn } from '@/utils'
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/package.json b/package.json
index 8c6346d..c0e8fbe 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@radix-ui/react-switch": "^1.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0d4381f..16d87f8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -843,6 +843,9 @@ packages:
       '@types/react-dom':
         optional: true
 
+  chalk@5.3.0:
+    resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
   '@radix-ui/react-radio-group@1.2.1':
     resolution: {integrity: sha512-kdbv54g4vfRjja9DNWPMxKvXblzqbpEC8kspEkZ6dVP7kQksGCn+iZHkcCz2nb00+lPdRvxrqy4WrvvV1cNqrQ==}
     peerDependencies:
@@ -856,6 +859,8 @@ packages:
       '@types/react-dom':
         optional: true
 
+  check-error@1.0.3:
+    resolution: {integrity: sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==}
   '@radix-ui/react-roving-focus@1.1.0':
     resolution: {integrity: sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==}
     peerDependencies: