fix: icons in table stories

src/stories/Table.stories.tsx

@@ -63,7 +63,7 @@ const rows = [
     name: "Tony",
     role: "CEO",
     status: <Badge text="Active" />,
-    action: <Button label="Edit" color="secondary" icon="edit" />,
+    action: <Button label="Edit" color="secondary" icon="Edit" />,
   },
   {
     key: "2",
@@ -72,8 +72,8 @@ const rows = [
     status: <Badge text="Paused" color="warning" />,
     action: (
       <div className="flex flex-row gap-3 w-fit">
-        <Button label="Edit" color="secondary" icon="edit" />
-        <Button label="Delete" color="negative" icon="cross" />
+        <Button label="Edit" color="secondary" icon="Edit" />
+        <Button label="Delete" color="negative" icon="Cross" />
       </div>
     ),
   },
@@ -84,8 +84,8 @@ const rows = [
     status: <Badge text="Inactive" color="negative" />,
     action: (
       <div className="flex flex-row gap-3">
-        <Button label="Edit" color="secondary" icon="edit" />
-        <Button label="Delete" color="negative" icon="cross" />
+        <Button label="Edit" color="secondary" icon="Edit" />
+        <Button label="Delete" color="negative" icon="Cross" />
       </div>
     ),
   },
@@ -96,8 +96,8 @@ const rows = [
     status: <Badge text="Vacation" color="neutral" />,
     action: (
       <div className="flex flex-row gap-3">
-        <Button label="Edit" color="secondary" icon="edit" />
-        <Button label="View" color="primary" icon="eye" />
+        <Button label="Edit" color="secondary" icon="Edit" />
+        <Button label="View" color="primary" icon="Eye" />
       </div>
     ),
   },
@@ -110,14 +110,21 @@ export const TableWithText: StoryObj = {
   },
 };
 
+export const EmptyTable: StoryObj = {
+  args: {
+    columns: textColumns,
+    rows: [],
+  },
+};
+
 export const TableWithComponentsInHeader: StoryObj = {
   args: {
     columns: textColumns,
     rows: textRows,
     headerContent: (
       <div className="flex flex-row gap-2 pb-[10px]">
-        <Button label="Create New" color="positive" icon="plus" />
-        <Button label="Edit" color="secondary" icon="edit" />
+        <Button label="Create New" color="positive" icon="Plus" />
+        <Button label="Edit" color="secondary" icon="Edit" />
       </div>
     ),
   },
@@ -175,8 +182,6 @@ export const TableWithReorderableRows = () => {
   );
 };
 
-
-
 type Row = {
   row_id: string;
   name: string;
@@ -184,8 +189,7 @@ type Row = {
   salary: number;
   notes: string;
   action: JSX.Element;
-}
-
+};
 
 const editableColumnRows = [
   {
@@ -208,24 +212,38 @@ const editableColumnRows = [
     role: "Project manager",
     salary: 2000000,
     notes: "Micro manager",
-  }
+  },
 ] as Row[];
 
 /** Cells can be edited, cell values can be validated */
 export const TableWithEditableCells = () => {
-
   const textEditor = (options: ColumnEditorOptions) => {
-    return <TextInput value={options.value as string} onValueChange={(e) => options.editorCallback && options.editorCallback(e)}></TextInput>
+    return (
+      <TextInput
+        value={options.value as string}
+        onValueChange={(e) =>
+          options.editorCallback && options.editorCallback(e)
+        }
+      ></TextInput>
+    );
   };
 
   const numberEditor = (options: ColumnEditorOptions) => {
-    return <TextInput type="number" value={options.value as string} onValueChange={(e) => options.editorCallback && options.editorCallback(e)}></TextInput>
+    return (
+      <TextInput
+        type="number"
+        value={options.value as string}
+        onValueChange={(e) =>
+          options.editorCallback && options.editorCallback(e)
+        }
+      ></TextInput>
+    );
   };
 
   const onCellEditComplete = (e: ColumnEvent) => {
     const { rowData, newValue, field } = e;
     rowData[field] = newValue;
-  }
+  };
 
   const isPositiveInteger = (val: unknown) => {
     let str = String(val);
@@ -236,7 +254,7 @@ export const TableWithEditableCells = () => {
       return false;
     }
 
-    str = str.replace(/^0+/, '') || '0';
+    str = str.replace(/^0+/, "") || "0";
     const n = Math.floor(Number(str));
 
     return n !== Infinity && String(n) === str && n >= 0;
@@ -249,13 +267,25 @@ export const TableWithEditableCells = () => {
     } else {
       event.preventDefault();
     }
-  }
+  };
 
   const editableColumns = [
     { field: "row_id", header: "ID", style: { width: "30%" } },
-    { field: "name", header: "Name", style: { width: "20%" }, editor: textEditor, onCellEditComplete: onCellEditComplete },
+    {
+      field: "name",
+      header: "Name",
+      style: { width: "20%" },
+      editor: textEditor,
+      onCellEditComplete: onCellEditComplete,
+    },
     { field: "role", header: "Role", style: { width: "20%" } },
-    { field: "salary", header: "Salary", style: { width: "10%" }, editor: numberEditor, onCellEditComplete: onSalaryEditComplete},
+    {
+      field: "salary",
+      header: "Salary",
+      style: { width: "10%" },
+      editor: numberEditor,
+      onCellEditComplete: onSalaryEditComplete,
+    },
     { field: "notes", header: "Notes", style: { width: "10%" } },
     { field: "action", header: "", style: { width: "10%" } },
   ];
@@ -263,29 +293,52 @@ export const TableWithEditableCells = () => {
   const [editableRows, setEditableRows] = useState<Row[]>([]);
 
   useEffect(() => {
-    setEditableRows(editableColumnRows) 
+    setEditableRows(editableColumnRows);
   }, []);
 
-  const deleteButton = (row: Row) => <Button label={"Delete"} icon={"cross"} onClick={() => { deleteEmployee(row) }} />
+  const deleteButton = (row: Row) => (
+    <Button
+      label="Delete"
+      icon="Cross"
+      onClick={() => {
+        deleteEmployee(row);
+      }}
+    />
+  );
 
   for (const row of editableRows) {
     row.action = deleteButton(row);
   }
 
   const addEmployee = () => {
-    const newRow = { row_id: crypto.randomUUID(),  name: "", role: "", salary: 0, notes: "" } as Row;
+    const newRow = {
+      row_id: crypto.randomUUID(),
+      name: "",
+      role: "",
+      salary: 0,
+      notes: "",
+    } as Row;
     newRow.action = deleteButton(newRow);
-    setEditableRows(old => [...old, newRow])
+    setEditableRows((old) => [...old, newRow]);
   };
 
   const deleteEmployee = (row: Row) => {
-    const newRows = editableRows.filter(r => r !== row);
+    const newRows = editableRows.filter((r) => r !== row);
     setEditableRows(newRows);
   };
 
   return (
     <Table
-      headerContent={<div className="flex flex-row gap-2 pb-[10px]"><Button color="positive" icon="plus" label="Add Employee" onClick={addEmployee}/></div>}
+      headerContent={
+        <div className="flex flex-row gap-2 pb-[10px]">
+          <Button
+            color="positive"
+            icon="Plus"
+            label="Add Employee"
+            onClick={addEmployee}
+          />
+        </div>
+      }
       columns={editableColumns}
       rows={editableRows}
       editMode="cell"