chore: added storybook for checbox component

lib/components/Checkbox/index.tsx

@@ -1,24 +1,25 @@
-import React, { ComponentProps } from "react";
+import React, { ComponentProps, ReactNode } from "react";
 import clsx from "clsx";
 import "./Checkbox.scss";
 
 interface CheckboxProps extends Omit<ComponentProps<"input">, "placeholder"> {
   wrapperClassName?: string;
+  label?: ReactNode;
 }
 
 export const Checkbox = ({
   checked,
-  children,
   className,
   defaultChecked,
+  id = "deriv-checkbox",
+  label,
   wrapperClassName,
   ...rest
 }: CheckboxProps) => {
   return (
     <div className={clsx("deriv-checkbox__wrapper", wrapperClassName)}>
       <input
-        checked={checked}
-        defaultChecked={defaultChecked}
+        id={id}
         className={clsx(
           "deriv-checkbox",
           {
@@ -31,7 +32,9 @@ export const Checkbox = ({
         {...rest}
       />
       <span className="deriv-checkbox__icon"></span>
-      <label className="deriv-checkbox__label">{children}</label>
+      <label className="deriv-checkbox__label" htmlFor={id}>
+        {label}
+      </label>
     </div>
   );
 };

src/stories/Checbox.stories.tsx

@@ -0,0 +1,67 @@
+import { StoryObj, Meta } from "@storybook/react";
+import { Checkbox } from "../../lib/main";
+import { useState } from "react";
+
+const meta = {
+  title: "Components/Checkbox",
+  component: Checkbox,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  args: {
+    checked: false,
+    className: "",
+    label: "Get updates about Deriv products, services and events.",
+    onChange: () => {},
+    wrapperClassName: "",
+  },
+  argTypes: {
+    wrapperClassName: {
+      control: {
+        disable: true,
+      },
+    },
+    className: {
+      control: {
+        disable: true,
+      },
+    },
+    checked: {
+      control: {
+        type: "boolean",
+      },
+    },
+    onChange: {
+      control: {
+        disable: true,
+      },
+    },
+    label: {
+      control: {
+        type: "text",
+      },
+    },
+  },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "Default Checkbox Input",
+  args: {
+    checked: false,
+    onChange: () => {},
+    label: "Get updates about Deriv products, services and events.",
+  },
+  render: (args) => {
+    const [checked, setChecked] = useState(false);
+
+    return (
+      <Checkbox
+        {...args}
+        checked={checked}
+        onChange={() => setChecked(!checked)}
+      />
+    );
+  },
+};