chore: added storybook

lib/components/Divider/index.tsx

@@ -1,19 +1,20 @@
 import { CSSProperties } from "react";
-import "./Divider.scss";
 
 type DividerProps = {
-  variant?: "horizontal" | "vertical";
-  color?: CSSProperties["borderColor"];
+  color?: string;
   margin?: CSSProperties["margin"];
+  height?: CSSProperties["height"];
+  className?: HTMLDivElement["className"];
 };
 
 export const Divider = ({
-  variant = "horizontal",
-  color,
+  color = "#d6dadb",
+  height = "1px",
   margin,
+  className,
 }: DividerProps) => (
   <div
-    className={`deriv-divider deriv-divider--${variant}`}
-    style={{ borderColor: color, margin }}
+    style={{ margin, backgroundColor: color, height }}
+    className={className}
   />
 );

src/main.tsx

@@ -1,31 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import { Loader } from '../dist/components/Loader';
-import { Button } from '../dist/components/Button';
-import { Text } from '../dist/components/Text';
-import { Tab, Tabs } from '../dist/components/Tabs';
-import {Dropdown} from '../dist/components/Dropdown';
-import './style.scss'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./style.scss";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <>
-      <Dropdown label='test'  variant='comboBox' list={[
-        {
-          text: 'Option 1',
-          value: 'option1'
-        },
-        {
-          text: 'Option 2',
-          value: 'option2'
-        },
-      ]}
-      dropdownIcon="down"
-      onSelect={(value) => console.log(value)}
-      name='test name'
-      />
-    </>
-
-
-  </React.StrictMode>,
-)
+    <div />
+  </React.StrictMode>
+);

src/stories/Divider.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Divider } from "../../lib/components/Divider";
+
+const meta: Meta<typeof Divider> = {
+  title: "Components/Divider",
+  component: Divider,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  args: {
+    color: "",
+    height: "",
+    margin: "",
+    className: "",
+  },
+  argTypes: {
+    color: { control: { type: "color" } },
+    height: { control: { type: "text" } },
+    margin: { control: { type: "text" } },
+    className: { control: { type: "text" } },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "Divider",
+  render: () => (
+    <div>
+      <span>This is a test text</span>
+      <Divider />
+      <span>This is another test text</span>
+    </div>
+  ),
+};