storybook components

todo-storybook/.storybook/main.js

@@ -7,6 +7,7 @@ const config = {
     "@storybook/preset-create-react-app",
     "@storybook/addon-onboarding",
     "@storybook/addon-interactions",
+    "@storybook/addon-actions",
   ],
   framework: {
     name: "@storybook/react-webpack5",

todo-storybook/package-lock.json

@@ -17,6 +17,7 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
+        "@storybook/addon-actions": "^7.4.0",
         "@storybook/addon-essentials": "^7.4.0",
         "@storybook/addon-interactions": "^7.4.0",
         "@storybook/addon-links": "^7.4.0",

todo-storybook/package.json

@@ -39,6 +39,7 @@
     ]
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^7.4.0",
     "@storybook/addon-essentials": "^7.4.0",
     "@storybook/addon-interactions": "^7.4.0",
     "@storybook/addon-links": "^7.4.0",

todo-storybook/src/Components/Base/Button/index.js

@@ -3,7 +3,7 @@ import React from 'react'
 function Button() {
   return (
     <div>
-      <button>Submit</button>
+  
     </div>
   )
 }

todo-storybook/src/stories/button.stories.js

 import Button from "../Components/Base/Button";
+import {action} from '@storybook/addon-actions';
 export default{
-    title:"Button",
+    title:"Base/Button",
     component:Button
 }
 
-export const button = {};
+export const button=() => (
+    <Button onClick={action('selected')} />
+);

todo-storybook/src/stories/checkbox.stories.js

 import Checkbox from "../Components/Base/Checkbox";
 export default{
-    title:"Checkbox",
+    title:"Base/Checkbox",
     component:Checkbox
 }
 

todo-storybook/src/stories/header.stories.js

 import Header from "../Components/TopLevel/Header";
 export default{
-    title:"Header",
+    title:"TopLevel/Header",
     component:Header
 }
 

todo-storybook/src/stories/input.stories.js

 import Input from "../Components/Base/Input";
 export default{
-    title:"Input",
+    title:"Base/Input",
     component:Input
 }
 

todo-storybook/src/stories/layout.stories.js

 import Layout from "../Components/Base/Layout";
 export default{
-    title:"Layout",
+    title:"Base/Layout",
     component:Layout
 }
 

todo-storybook/src/stories/task.stories.js

 import Task from "../Components/TopLevel/Task";
 export default{
-    title:"Task",
+    title:"TopLevel/Task",
     component:Task
 }
 

todo-storybook/src/stories/tasklist.stories.js

 import Tasklist from "../Components/TopLevel/TaskList";
 export default{
-    title:"TaskList",
+    title:"TopLevel/TaskList",
     component:Tasklist
 }