Changes in the code

Types/todoTypes.ts

-
-export interface TodoListItems {
+export type TodoListItems = {
     id: number;
     task: string;
     isCompleted: boolean;
 }
-
-export interface ItemMethods {
-    onDelete: (id: number) => void;
-    updateTask: (id: number, task: string, isCompleted: boolean) => void;
-}
\ No newline at end of file

components/Top-Level/Form/form.module.css

@@ -3,7 +3,7 @@
     padding: 17px;
     width: 100%;
     flex-wrap: wrap;
-    gap: 15px;
+    gap: 10px;
     background-color: white;
 }
 
@@ -13,9 +13,6 @@
     flex: 1;
 }
 
-.inputWrapper>input {
-    width: 100%;
-}
 
 .buttonWrapper>button {
     min-width: 100%;

components/Top-Level/Form/form.stories.tsx

 import { Meta, StoryObj } from "@storybook/react";
 import FormComponent from "./FormComponent";
-import { fn } from "@storybook/test";
 const meta: Meta<typeof FormComponent> = {
     title: "Top-Level",
     component: FormComponent,
+    argTypes: {
+        onPost: { action: "onPost" }
+    }
 }
 
 export default meta;
@@ -11,7 +13,5 @@ export default meta;
 type story = StoryObj<typeof meta>
 
 export const Form: story = {
-    args: {
-        onPost: fn()
-    }
+
 }
\ No newline at end of file

components/Top-Level/Item/Item.tsx

@@ -4,17 +4,19 @@ import styles from './item.module.css'
 import Input from '@/components/base/input/Input';
 import closeIcon from '@/public/icons/red-x-10333.svg';
 import Image from 'next/image';
-import { ItemMethods } from '@/Types/todoTypes';
+import { TodoListItems } from '@/Types/todoTypes';
 
 
-interface ItemProps extends ItemMethods {
-    id: number;
-    task: string;
-    isCompleted: boolean;
+interface ItemProps {
+    data: TodoListItems
+    onDelete: (id: number) => void;
+    updateTask: (id: number, task: string, isCompleted: boolean) => void;
 }
 
-const Item: React.FC<ItemProps> = ({ task, isCompleted, onDelete, updateTask, id }) => {
-    const [isChecked, setisChecked] = useState(isCompleted)
+const Item: React.FC<ItemProps> = ({ onDelete, updateTask, data }) => {
+    const { id, task, isCompleted } = data;
+    const [isChecked, setisChecked] = useState(isCompleted);
+
     useEffect(() => {
         setisChecked(isCompleted)
     }, [isCompleted])
@@ -22,22 +24,21 @@ const Item: React.FC<ItemProps> = ({ task, isCompleted, onDelete, updateTask, id
     const handleChange = async () => {
         await updateTask(id, task, !isCompleted)
         setisChecked(!isChecked)
-
     }
 
     const handleItem = (e: React.ChangeEvent<HTMLInputElement>) => {
-        updateTask(id, e.target.value, isCompleted)
+        updateTask?.(id, e.target.value, isCompleted)
     }
 
     const handleClose = () => {
-        onDelete(id)
+        onDelete?.(id)
     }
 
     return (
         <div className={styles.item}>
             <input type='checkbox' checked={isChecked} onChange={handleChange} className={styles.checkbox} />
             <Input id="Todo-input" placeholder='Enter item...' defaultValue={task} onBlur={handleItem} style={{
-                textDecoration: isChecked ? 'line-through' : 'none'
+                textDecoration: isChecked ? 'line-through' : ''
             }} />
             <div className={styles.actions} onClick={handleClose} >
                 <Image src={closeIcon} alt="" width={22} height={22} className={styles.closeIcon} />

components/Top-Level/Item/item.module.css

@@ -23,6 +23,10 @@
     font-size: 18px;
 }
 
+.item>div>input:focus {
+    border: none;
+}
+
 .actions {
     margin-left: auto;
     min-width: 1.3rem;

components/Top-Level/Item/item.stories.tsx

 import { Meta, StoryObj } from "@storybook/react";
 import Item from "./Item";
-import { fn } from "@storybook/test";
 const meta: Meta<typeof Item> = {
     title: "Top-Level",
     component: Item,
-
+    argTypes: {
+        onDelete: { action: "onDelete" },
+        updateTask: { action: "onEdit" },
+    },
 }
 
 export default meta;
@@ -12,13 +14,14 @@ export default meta;
 type story = StoryObj<typeof meta>
 export const Item_: story = {
     args: {
+        data: {
             id: 1,
             isCompleted: true,
-        task: 'Buy groceries',
-        onDelete: fn(),
-        updateTask: fn()
+            task: 'Buy groceries'
+        }
     },
 }
 
 
 
+

components/base/Button/Button.stories.tsx

@@ -4,7 +4,7 @@ import Button from './Button';
 const meta: Meta<typeof Button> = {
   title: 'Basic/Button',
   component: Button,
-  tags: ['autodocs']
+  tags: ['autodocs'],
 };
 
 export default meta;
@@ -13,7 +13,7 @@ type Story = StoryObj<typeof meta>;
 
 const Template = () => {
   return (
-    <div >
+    <div>
       <h6 className="mb-2 font-semibold">Size</h6>
       <div className="flex gap-5 mb-4 flex-wrap items-center">
         <Button size="sm">

components/base/Heading/Heading.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import Heading from "./Heading";
 
 const meta: Meta<typeof Heading> = {
-    title: "Basic/Header",
+    title: "Basic",
     component: Heading,
 }
 

components/base/input/Input.stories.tsx

 import { Meta, StoryObj } from "@storybook/react";
 import Input from "./Input";
-import { fn } from "@storybook/test";
 import React from "react";
 
 const meta: Meta<typeof Input> = {
     title: "Basic",
     component: Input,
+    argTypes: {
+        onChange: {
+            action: 'onChange'
+        }
+    }
 }
 export default meta
 
@@ -14,7 +18,6 @@ type story = StoryObj<typeof meta>;
 export const Input_: story = {
     args: {
         placeholder: 'Enter the value...',
-        onChange: fn(),
     },
     render: (args) => {
         return <React.Fragment>

components/layout/List/List.tsx

 import Item from "@/components/Top-Level/Item/Item";
 import styles from "./list.module.css";
-import { ItemMethods, TodoListItems } from "@/Types/todoTypes";
-interface ListItemProps extends ItemMethods {
+import { TodoListItems } from "@/Types/todoTypes";
+interface ListItemProps {
     data: TodoListItems[];
+    onDelete: (id: number) => void;
+    updateTask: (id: number, task: string, isCompleted: boolean) => void;
 }
-const ListItem: React.FC<ListItemProps> = ({ data, updateTask, onDelete }) => {
+const ListItem: React.FC<ListItemProps> = ({ data, onDelete, updateTask }) => {
     return (
         <div className={styles.list}>
             {
@@ -12,9 +14,9 @@ const ListItem: React.FC<ListItemProps> = ({ data, updateTask, onDelete }) => {
                     return (
                         <Item
                             key={item.id}
-                            {...item}
-                            updateTask={updateTask}
+                            data={item}
                             onDelete={onDelete}
+                            updateTask={updateTask}
                         />
                     )
                 })

components/layout/List/list.stories.tsx

 import type { Meta, StoryObj } from '@storybook/react';
 import List from './List';
 import { List_data } from '@/utils/data';
-import { fn } from '@storybook/test';
+import { action } from '@storybook/addon-actions';
 import Heading from '@/components/base/Heading/Heading';
 import FormComponent from '@/components/Top-Level/Form/FormComponent';
 
 const meta: Meta<typeof List> = {
     title: 'Layout',
     component: List,
+    argTypes: {
+        onDelete: {
+            action: 'onDelete',
+
+        },
+        updateTask: {
+            action: 'UpdateTask',
+        }
+    }
 };
 
 export default meta;
@@ -17,16 +26,12 @@ type Story = StoryObj<typeof meta>;
 export const List_: Story = {
     args: {
         data: List_data,
-        onDelete: fn(),
-        updateTask: fn()
     }
 };
 
 export const Todos: Story = {
     args: {
         data: List_data,
-        onDelete: fn(),
-        updateTask: fn()
     },
     render: (args) => (
         <div style={{
@@ -35,7 +40,6 @@ export const Todos: Story = {
             flexShrink: 1,
             width: '100%',
         }}>
-
             <div style={{
                 boxShadow: '2px 2px 3px rgba(0,0,0,0.06), -2px -2px 3px rgba(0,0,0,0.06)',
                 flexBasis: '100%',
@@ -44,7 +48,7 @@ export const Todos: Story = {
             }}>
                 <Heading count={args.data.length} />
                 <List {...args} />
-                <FormComponent onPost={fn()} />
+                <FormComponent onPost={action('onClick')} />
             </div>
         </div>
     )

db.json

 {
   "tasks": [
     {
-      "task": "new todo",
-      "isCompleted": true,
-      "id": 1
+      "task": "New Items",
+      "isCompleted": false,
+      "id": 4
     },
     {
-      "task": "new element",
-      "isCompleted": false,
-      "id": 2
+      "task": "new task anther",
+      "isCompleted": true,
+      "id": 5
     },
     {
-      "task": "Nothing",
+      "task": "sdf",
       "isCompleted": false,
-      "id": 3
+      "id": 7
     }
   ]
 }
\ No newline at end of file

pages/Todo.tsx

@@ -5,8 +5,8 @@ import style from "./todoapp.module.css"
 import Heading from "@/components/base/Heading/Heading";
 import List from "@/components/layout/List/List";
 import FormComponent from "@/components/Top-Level/Form/FormComponent";
-import { TodoListItems } from "@/components/types";
-import AddTask, { UpdateTask, DeleteTask } from "@/lib/TodoOperations";
+import { TodoListItems } from "@/Types/todoTypes";
+import AddTask, { UpdateTask, DeleteTask } from "@/lib/TodoApi";
 import getall from "@/lib/getall";
 interface StateTodo {
     data?: TodoListItems[],
@@ -15,7 +15,7 @@ interface StateTodo {
 }
 
 const Todo = () => {
-    const [refresh, setrefresh] = useState<boolean>(false)
+    const [refresh, setrefresh] = useState(false)
     const [TodoList, setTodoList] = useState<StateTodo>({
         isError: false,
         isLoading: true,
@@ -85,8 +85,3 @@ const Todo = () => {
 }
 
 export default Todo;
\ No newline at end of file
-
-
-
-
-

styles/globals.css

 @tailwind base;
 @tailwind components;
 @tailwind utilities;
\ No newline at end of file
-
-
-
-/* 
-.container {
-    width: 100%;
-    min-height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: radial-gradient(circle, #b3b3b3 10%, transparent 11%), radial-gradient(circle at bottom left, #b3b3b3 5%, transparent 6%), radial-gradient(circle at bottom right, #b3b3b3 5%, transparent 6%), radial-gradient(circle at top left, #b3b3b3 5%, transparent 6%), radial-gradient(circle at top right, #b3b3b3 5%, transparent 6%);
-    background-size: 1em 1em;
-    background-color: #ffffff;
-}
-
-
-* {
-    background-color: white;
-}
-
-.list-container {
-    margin-top: 10px;
-} */
\ No newline at end of file