feat(component): add storybook (#5079)

packages/frontend/component/src/ui/divider/divider.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { Divider, type DividerProps } from '.';
+
+export default {
+  title: 'UI/Divider',
+  component: Divider,
+} satisfies Meta<typeof Divider>;
+
+const Template: StoryFn<DividerProps> = args => (
+  <div
+    style={{
+      height: '100px',
+      padding: '0 20px',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }}
+  >
+    <Divider {...args} />
+  </div>
+);
+
+export const Default: StoryFn<DividerProps> = Template.bind(undefined);
+Default.args = {};

packages/frontend/component/src/ui/divider/divider.tsx

@@ -11,19 +11,18 @@ export type DividerProps = PropsWithChildren &
     dividerColor?: string;
   };
 
-const defaultProps = {
-  orientation: 'horizontal',
-  size: 'default',
-};
-
 export const Divider = forwardRef<HTMLDivElement, DividerProps>(
-  (props, ref) => {
-    const { orientation, className, size, dividerColor, style, ...otherProps } =
-      {
-        ...defaultProps,
-        ...props,
-      };
-
+  (
+    {
+      orientation = 'horizontal',
+      size = 'default',
+      dividerColor = 'var(--affine-border-color)',
+      style,
+      className,
+      ...otherProps
+    },
+    ref
+  ) => {
     return (
       <div
         ref={ref}