storybook changes

db.json

@@ -11,12 +11,6 @@
       "title": "helloxxsxsxsxsxsxsxsxsxsxsxsxsxssssssssssssssssssssxssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss",
       "isCompleted": false,
       "id": 2
-    },
-    {
-      "sId": 1,
-      "title": "hi",
-      "isCompleted": true,
-      "id": 3
     }
   ]
 }
\ No newline at end of file

src/components/base/checkbox/checkbox.stories.js

@@ -3,7 +3,9 @@ import Checkbox from ".";
 export default {
   title: "Base/Checkbox",
   component: Checkbox,
-  argTypes: { onChange: { action: "checked" } },
+  argTypes: {
+    onChange: { action: "onChange" },
+  },
 };
 export const checkbox = {
   isCompleted: false,

src/components/base/checkbox/index.js

 import "./checkbox.css";
 
-function Checkbox({ ...props }) {
+function Checkbox({ isCompleted, onChange, ...props }) {
+  const handleChange = () => {
+    isCompleted = !isCompleted;
+    onChange(isCompleted ? "checked" : "unchecked");
+  };
   return (
     <div className="checkbox-bg">
-      <input type="checkbox" name="checkbox" {...props} />
+      <input
+        type="checkbox"
+        name="checkbox"
+        onChange={handleChange}
+        {...props}
+      />
     </div>
   );
 }

src/components/top-level/form/form.stories.js

@@ -3,7 +3,7 @@ import Form from ".";
 export default {
   title: "Top-Level/Form",
   component: Form,
-  argTypes: { onSubmit: { action: "Submit" } },
+  argTypes: { onSubmit: { action: "onSubmit" } },
 };
 export const form = {};
 // const Template = (args) => <Form {...args} />;

src/components/top-level/task/index.js

@@ -17,10 +17,9 @@ function Task({ id, title, isCompleted, onDelete, onChange, onEdit }) {
     }
     return false;
   };
-  const handleChange = (e) => {
-    e.preventDefault();
+  const handleChange = () => {
     isCompleted = !isCompleted;
-    onChange({ id, isCompleted: isCompleted ? "checked" : "unchecked" });
+    onChange({ id, isCompleted: isCompleted ? true : false });
   };
 
   const handleContent = (e) => {