From 62c186edec879b6bfd279d975d8f68d61feae612 Mon Sep 17 00:00:00 2001
From: Devansh <dkansagra04@gmail.com>
Date: Wed, 16 Oct 2024 20:05:06 +0530
Subject: [PATCH 1/2] fixed the issue of unable to select and unselect the
 items

---
 .../src/components/Table/Table.stories.tsx    | 202 ++++++++++--------
 1 file changed, 116 insertions(+), 86 deletions(-)

diff --git a/packages/fuselage/src/components/Table/Table.stories.tsx b/packages/fuselage/src/components/Table/Table.stories.tsx
index 084f7760aa..f1f94f2cec 100644
--- a/packages/fuselage/src/components/Table/Table.stories.tsx
+++ b/packages/fuselage/src/components/Table/Table.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryFn } from '@storybook/react';
+import { useState } from 'react';
 
 import { CheckBox } from '../CheckBox';
 import { Table } from './Table';
@@ -62,93 +63,122 @@ export const Default: StoryFn<typeof Table> = () => (
   </>
 );
 
-export const WithSelection: StoryFn<typeof Table> = () => (
-  <>
-    <Table>
-      <TableHead>
-        <TableRow>
-          <TableCell>
-            <CheckBox aria-label='select all' checked={false} />
-          </TableCell>
-          <TableCell>Dessert (100g serving)</TableCell>
-          <TableCell align='end'>Calories</TableCell>
-          <TableCell align='end'>Fat&nbsp;(g)</TableCell>
-          <TableCell align='end'>Carbs&nbsp;(g)</TableCell>
-          <TableCell align='end'>Protein&nbsp;(g)</TableCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        <TableRow selected>
-          <TableCell>
-            <CheckBox aria-label='select frozen yoghurt' checked />
-          </TableCell>
-          <TableCell is='th' scope='row'>
-            Frozen yoghurt
-          </TableCell>
-          <TableCell align='end'>159</TableCell>
-          <TableCell align='end'>6</TableCell>
-          <TableCell align='end'>24</TableCell>
-          <TableCell align='end'>4</TableCell>
-        </TableRow>
-        <TableRow selected>
-          <TableCell>
-            <CheckBox aria-label='select frozen yoghurt' checked />
-          </TableCell>
-          <TableCell is='th' scope='row'>
-            Frozen yoghurt
-          </TableCell>
-          <TableCell align='end'>159</TableCell>
-          <TableCell align='end'>6</TableCell>
-          <TableCell align='end'>24</TableCell>
-          <TableCell align='end'>4</TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <CheckBox aria-label='select frozen yoghurt' checked={false} />
-          </TableCell>
-          <TableCell is='th' scope='row'>
-            Frozen yoghurt
-          </TableCell>
-          <TableCell align='end'>159</TableCell>
-          <TableCell align='end'>6</TableCell>
-          <TableCell align='end'>24</TableCell>
-          <TableCell align='end'>4</TableCell>
-        </TableRow>
-        <TableRow selected>
-          <TableCell>
-            <CheckBox aria-label='select frozen yoghurt' checked />
-          </TableCell>
-          <TableCell is='th' scope='row'>
-            Frozen yoghurt
-          </TableCell>
-          <TableCell align='end'>159</TableCell>
-          <TableCell align='end'>6</TableCell>
-          <TableCell align='end'>24</TableCell>
-          <TableCell align='end'>4</TableCell>
-        </TableRow>
-        <TableRow selected>
-          <TableCell>
-            <CheckBox aria-label='select frozen yoghurt' checked />
-          </TableCell>
-          <TableCell is='th' scope='row'>
-            Frozen yoghurt
-          </TableCell>
-          <TableCell align='end'>159</TableCell>
-          <TableCell align='end'>6</TableCell>
-          <TableCell align='end'>24</TableCell>
-          <TableCell align='end'>4</TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-    <TableSelection text='5 Items selected'>
-      <TableSelectionButtonGroup>
-        <TableSelectionButton>Delete</TableSelectionButton>
-        <TableSelectionButton>Cancel</TableSelectionButton>
-      </TableSelectionButtonGroup>
-    </TableSelection>
-  </>
-);
+export const WithSelection: StoryFn<typeof Table> = () => {
+  const [checkedAll, setCheckedAll] = useState(false);
+  const [checkedItems, setCheckedItems] = useState<Record<string, boolean>>({
+    item1: false,
+    item2: false,
+    item3: false,
+    item4: false,
+    item5: false,
+  });
+
+  const handleCheckBoxChange = (item: string) => {
+    setCheckedItems(prevState => ({
+      ...prevState,
+      [item]: !prevState[item]
+    }));
+  };
+
+  const handleAllCheckBoxChange = () => {
+    const newCheckedAll = !checkedAll;
+    setCheckedAll(newCheckedAll);
+    setCheckedItems({
+      item1: newCheckedAll,
+      item2: newCheckedAll,
+      item3: newCheckedAll,
+      item4: newCheckedAll,
+      item5: newCheckedAll,
+    });
+  };
 
+  return (
+    <>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>
+              <CheckBox aria-label='select all' checked={checkedAll} onChange={handleAllCheckBoxChange} />
+            </TableCell>
+            <TableCell>Dessert (100g serving)</TableCell>
+            <TableCell align='end'>Calories</TableCell>
+            <TableCell align='end'>Fat&nbsp;(g)</TableCell>
+            <TableCell align='end'>Carbs&nbsp;(g)</TableCell>
+            <TableCell align='end'>Protein&nbsp;(g)</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow selected={checkedItems.item1}>
+            <TableCell>
+              <CheckBox aria-label='select item1' checked={checkedItems.item1} onChange={() => handleCheckBoxChange('item1')} />
+            </TableCell>
+            <TableCell is='th' scope='row'>
+              Frozen yoghurt
+            </TableCell>
+            <TableCell align='end'>159</TableCell>
+            <TableCell align='end'>6</TableCell>
+            <TableCell align='end'>24</TableCell>
+            <TableCell align='end'>4</TableCell>
+          </TableRow>
+          <TableRow selected={checkedItems.item2}>
+            <TableCell>
+              <CheckBox aria-label='select item2' checked={checkedItems.item2} onChange={() => handleCheckBoxChange('item2')} />
+            </TableCell>
+            <TableCell is='th' scope='row'>
+              Frozen yoghurt
+            </TableCell>
+            <TableCell align='end'>159</TableCell>
+            <TableCell align='end'>6</TableCell>
+            <TableCell align='end'>24</TableCell>
+            <TableCell align='end'>4</TableCell>
+          </TableRow>
+          <TableRow selected={checkedItems.item3}>
+            <TableCell>
+              <CheckBox aria-label='select item3' checked={checkedItems.item3} onChange={() => handleCheckBoxChange('item3')} />
+            </TableCell>
+            <TableCell is='th' scope='row'>
+              Frozen yoghurt
+            </TableCell>
+            <TableCell align='end'>159</TableCell>
+            <TableCell align='end'>6</TableCell>
+            <TableCell align='end'>24</TableCell>
+            <TableCell align='end'>4</TableCell>
+          </TableRow>
+          <TableRow selected={checkedItems.item4}>
+            <TableCell>
+              <CheckBox aria-label='select item4' checked={checkedItems.item4} onChange={() => handleCheckBoxChange('item4')} />
+            </TableCell>
+            <TableCell is='th' scope='row'>
+              Frozen yoghurt
+            </TableCell>
+            <TableCell align='end'>159</TableCell>
+            <TableCell align='end'>6</TableCell>
+            <TableCell align='end'>24</TableCell>
+            <TableCell align='end'>4</TableCell>
+          </TableRow>
+          <TableRow selected={checkedItems.item5}>
+            <TableCell>
+              <CheckBox aria-label='select item5' checked={checkedItems.item5} onChange={() => handleCheckBoxChange('item5')} />
+            </TableCell>
+            <TableCell is='th' scope='row'>
+              Frozen yoghurt
+            </TableCell>
+            <TableCell align='end'>159</TableCell>
+            <TableCell align='end'>6</TableCell>
+            <TableCell align='end'>24</TableCell>
+            <TableCell align='end'>4</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+      <TableSelection text='5 Items selected'>
+        <TableSelectionButtonGroup>
+          <TableSelectionButton>Delete</TableSelectionButton>
+          <TableSelectionButton>Cancel</TableSelectionButton>
+        </TableSelectionButtonGroup>
+      </TableSelection>
+    </>
+  );
+};
 export const Striped: StoryFn<typeof Table> = () => (
   <Table fixed striped sticky>
     <TableHead>

From 1e55db04464f7140595eea2189c70e232bc45e67 Mon Sep 17 00:00:00 2001
From: Devansh <dkansagra04@gmail.com>
Date: Wed, 16 Oct 2024 20:20:29 +0530
Subject: [PATCH 2/2] fixed linting errors

---
 .../src/components/Table/Table.stories.tsx    | 40 +++++++++++++++----
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/packages/fuselage/src/components/Table/Table.stories.tsx b/packages/fuselage/src/components/Table/Table.stories.tsx
index f1f94f2cec..760e892426 100644
--- a/packages/fuselage/src/components/Table/Table.stories.tsx
+++ b/packages/fuselage/src/components/Table/Table.stories.tsx
@@ -74,9 +74,9 @@ export const WithSelection: StoryFn<typeof Table> = () => {
   });
 
   const handleCheckBoxChange = (item: string) => {
-    setCheckedItems(prevState => ({
+    setCheckedItems((prevState) => ({
       ...prevState,
-      [item]: !prevState[item]
+      [item]: !prevState[item],
     }));
   };
 
@@ -98,7 +98,11 @@ export const WithSelection: StoryFn<typeof Table> = () => {
         <TableHead>
           <TableRow>
             <TableCell>
-              <CheckBox aria-label='select all' checked={checkedAll} onChange={handleAllCheckBoxChange} />
+              <CheckBox
+                aria-label='select all'
+                checked={checkedAll}
+                onChange={handleAllCheckBoxChange}
+              />
             </TableCell>
             <TableCell>Dessert (100g serving)</TableCell>
             <TableCell align='end'>Calories</TableCell>
@@ -110,7 +114,11 @@ export const WithSelection: StoryFn<typeof Table> = () => {
         <TableBody>
           <TableRow selected={checkedItems.item1}>
             <TableCell>
-              <CheckBox aria-label='select item1' checked={checkedItems.item1} onChange={() => handleCheckBoxChange('item1')} />
+              <CheckBox
+                aria-label='select item1'
+                checked={checkedItems.item1}
+                onChange={() => handleCheckBoxChange('item1')}
+              />
             </TableCell>
             <TableCell is='th' scope='row'>
               Frozen yoghurt
@@ -122,7 +130,11 @@ export const WithSelection: StoryFn<typeof Table> = () => {
           </TableRow>
           <TableRow selected={checkedItems.item2}>
             <TableCell>
-              <CheckBox aria-label='select item2' checked={checkedItems.item2} onChange={() => handleCheckBoxChange('item2')} />
+              <CheckBox
+                aria-label='select item2'
+                checked={checkedItems.item2}
+                onChange={() => handleCheckBoxChange('item2')}
+              />
             </TableCell>
             <TableCell is='th' scope='row'>
               Frozen yoghurt
@@ -134,7 +146,11 @@ export const WithSelection: StoryFn<typeof Table> = () => {
           </TableRow>
           <TableRow selected={checkedItems.item3}>
             <TableCell>
-              <CheckBox aria-label='select item3' checked={checkedItems.item3} onChange={() => handleCheckBoxChange('item3')} />
+              <CheckBox
+                aria-label='select item3'
+                checked={checkedItems.item3}
+                onChange={() => handleCheckBoxChange('item3')}
+              />
             </TableCell>
             <TableCell is='th' scope='row'>
               Frozen yoghurt
@@ -146,7 +162,11 @@ export const WithSelection: StoryFn<typeof Table> = () => {
           </TableRow>
           <TableRow selected={checkedItems.item4}>
             <TableCell>
-              <CheckBox aria-label='select item4' checked={checkedItems.item4} onChange={() => handleCheckBoxChange('item4')} />
+              <CheckBox
+                aria-label='select item4'
+                checked={checkedItems.item4}
+                onChange={() => handleCheckBoxChange('item4')}
+              />
             </TableCell>
             <TableCell is='th' scope='row'>
               Frozen yoghurt
@@ -158,7 +178,11 @@ export const WithSelection: StoryFn<typeof Table> = () => {
           </TableRow>
           <TableRow selected={checkedItems.item5}>
             <TableCell>
-              <CheckBox aria-label='select item5' checked={checkedItems.item5} onChange={() => handleCheckBoxChange('item5')} />
+              <CheckBox
+                aria-label='select item5'
+                checked={checkedItems.item5}
+                onChange={() => handleCheckBoxChange('item5')}
+              />
             </TableCell>
             <TableCell is='th' scope='row'>
               Frozen yoghurt