fix(Divider): support v4 (#434)

src/Divider/Divider.stories.tsx

@@ -4,13 +4,14 @@ import { StoryFn as Story, Meta } from '@storybook/react'
 import Divider, { DividerProps } from '.'
 import Card from '../Card'
 
-export default {
+const meta: Meta<DividerProps> = {
   title: 'Layout/Divider',
   component: Divider,
   args: {
     children: 'OR',
   },
-} as Meta
+}
+export default meta
 
 export const Default: Story<DividerProps> = ({ children, ...args }) => {
   return (
@@ -77,3 +78,107 @@ export const Responsive: Story<DividerProps> = ({ children, ...args }) => {
 Responsive.args = {
   responsive: true,
 }
+
+export const Colors: Story<DividerProps> = ({ children, color, ...args }) => {
+  return (
+    <div className="flex flex-col w-full">
+      <Divider {...args}>Default</Divider>
+      <Divider {...args} color="neutral">
+        Neutral
+      </Divider>
+      <Divider {...args} color="primary">
+        Primary
+      </Divider>
+      <Divider {...args} color="secondary">
+        Secondary
+      </Divider>
+      <Divider {...args} color="accent">
+        Accent
+      </Divider>
+      <Divider {...args} color="success">
+        Success
+      </Divider>
+      <Divider {...args} color="warning">
+        Warning
+      </Divider>
+      <Divider {...args} color="info">
+        Info
+      </Divider>
+      <Divider {...args} color="error">
+        Error
+      </Divider>
+    </div>
+  )
+}
+Colors.argTypes = {
+  children: {
+    control: false,
+  },
+  color: {
+    control: false,
+  },
+}
+
+export const DifferentPositions: Story<DividerProps> = ({
+  children,
+  start,
+  end,
+  ...args
+}) => {
+  return (
+    <div className="flex flex-col w-full">
+      <Divider {...args} start={true}>
+        Start
+      </Divider>
+      <Divider {...args}>Default</Divider>
+      <Divider {...args} end={true}>
+        End
+      </Divider>
+    </div>
+  )
+}
+DifferentPositions.argTypes = {
+  children: {
+    control: false,
+  },
+  start: {
+    control: false,
+  },
+  end: {
+    control: false,
+  },
+}
+
+export const DifferentPositionsHorizontal: Story<DividerProps> = ({
+  children,
+  start,
+  end,
+  ...args
+}) => {
+  return (
+    <div className="flex w-full justify-center h-52">
+      <Divider {...args} start={true}>
+        Start
+      </Divider>
+      <Divider {...args}>Default</Divider>
+      <Divider {...args} end={true}>
+        End
+      </Divider>
+    </div>
+  )
+}
+DifferentPositionsHorizontal.argTypes = {
+  children: {
+    control: false,
+  },
+  start: {
+    control: false,
+  },
+  end: {
+    control: false,
+  },
+}
+
+DifferentPositionsHorizontal.args = {
+  horizontal: true,
+}

src/Divider/Divider.tsx

@@ -1,40 +1,67 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import clsx from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
-import { IComponentBaseProps } from '../types'
+import { IComponentBaseProps, ComponentColor } from '../types'
 
-export type DividerProps = React.HTMLAttributes<HTMLDivElement> &
+export type DividerProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> &
   IComponentBaseProps & {
     vertical?: boolean
     horizontal?: boolean
     responsive?: boolean
+    start?: boolean
+    end?: boolean
+    color?: Exclude<ComponentColor, 'ghost'>
   }
 
-const Divider = ({
-  children,
-  vertical,
-  horizontal,
-  responsive,
-  dataTheme,
-  className,
-  ...props
-}: DividerProps): JSX.Element => {
-  const classes = twMerge(
-    'divider',
-    className,
-    clsx({
-      'divider-vertical': vertical,
-      'divider-horizontal': horizontal,
-      'lg:divider-horizontal': responsive,
-    })
-  )
+const Divider = forwardRef<HTMLDivElement, DividerProps>(
+  (
+    {
+      children,
+      vertical,
+      horizontal,
+      responsive,
+      color,
+      start,
+      end,
+      dataTheme,
+      className,
+      ...props
+    },
+    ref
+  ): JSX.Element => {
+    const classes = twMerge(
+      'divider',
+      className,
+      clsx({
+        'divider-vertical': vertical,
+        'divider-horizontal': horizontal,
+        'lg:divider-horizontal': responsive,
+        'divider-neutral': color === 'neutral',
+        'divider-primary': color === 'primary',
+        'divider-secondary': color === 'secondary',
+        'divider-accent': color === 'accent',
+        'divider-warning': color === 'warning',
+        'divider-info': color === 'info',
+        'divider-error': color === 'error',
+        'divider-start': start,
+        'divider-end': end,
+      })
+    )
 
-  return (
-    <div role="separator" {...props} data-theme={dataTheme} className={classes}>
-      {children}
-    </div>
-  )
-}
+    return (
+      <div
+        role="separator"
+        {...props}
+        data-theme={dataTheme}
+        className={classes}
+        ref={ref}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+Divider.displayName = 'Divider'
 
 export default Divider