From d99be12ae0e69d1a1e70e6bc7f8523ae4873770e Mon Sep 17 00:00:00 2001
From: Kaustubh Krishna Borpujari
 <kaustubh.krishna.borpujari@ipg-automotive.com>
Date: Thu, 26 Dec 2024 16:46:16 +0530
Subject: [PATCH] Review changes

---
 .../LabelFilter/LabelFilter.stories.tsx       |  9 +++---
 src/Filter/LabelFilter/LabelFilter.tsx        | 28 +++++++++++++++----
 src/Filter/LabelFilter/LabelFilter.types.ts   | 23 +++++++++++++++
 3 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/src/Filter/LabelFilter/LabelFilter.stories.tsx b/src/Filter/LabelFilter/LabelFilter.stories.tsx
index 6acad49a..765be97b 100644
--- a/src/Filter/LabelFilter/LabelFilter.stories.tsx
+++ b/src/Filter/LabelFilter/LabelFilter.stories.tsx
@@ -1,3 +1,4 @@
+import { Label } from "../../LabelSelector/Label.types";
 import LabelFilter from "./LabelFilter";
 import React from "react";
 import { action } from "@storybook/addon-actions";
@@ -9,9 +10,9 @@ export default {
 
 // example options
 const options = [
-  { _id: 1, color: "#005FA8", description: "first label", name: "label 1" },
-  { _id: 2, color: "#f542e0", description: "second label", name: "label 2" },
-  { _id: 3, color: "#ffa500", description: "third label", name: "label 3" }
+  { _id: "1", color: "#005FA8", description: "first label", name: "label 1" },
+  { _id: "2", color: "#f542e0", description: "second label", name: "label 2" },
+  { _id: "3", color: "#ffa500", description: "third label", name: "label 3" }
 ];
 
 // story template with state for selection
@@ -20,7 +21,7 @@ const Template = args => {
   React.useEffect(() => {
     setValue(args.value);
   }, [args.value]);
-  const onChange = (value: typeof options) => {
+  const onChange = (value: Label[]) => {
     setValue(value);
     action("onChange")(value);
   };
diff --git a/src/Filter/LabelFilter/LabelFilter.tsx b/src/Filter/LabelFilter/LabelFilter.tsx
index 1cca1a5f..c1e06de6 100644
--- a/src/Filter/LabelFilter/LabelFilter.tsx
+++ b/src/Filter/LabelFilter/LabelFilter.tsx
@@ -56,14 +56,21 @@ function LabelFilterPopper({
   );
 }
 
-// render for label chips
+// Render for label chips
+/**
+ * Renders the selected labels as chips with delete functionality.
+ * @param labels - The array of selected labels to display as chips.
+ * @param getTagProps - A function provided by Material-UI to generate props for each tag.
+ * @param ownerState - The owner state of the Autocomplete component, including `value` and `onChange` handler.
+ * @returns An array of LabelChip components representing the selected labels.
+ */
 function Tags(
   labels: Label[],
   getTagProps: AutocompleteRenderGetTagProps,
   ownerState: AutocompleteOwnerState<Label, true, undefined, undefined, "div">
 ) {
-  const value = ownerState.value || []; // Current selected labels
-  const onChange = ownerState.onChange || (() => {}); // No-op if onChange is not provided
+  // Extract current selected labels and onChange handler from ownerState
+  const { value = [], onChange = () => {} } = ownerState;
   return labels.map((label, index) => (
     <LabelChip
       key={label._id}
@@ -71,9 +78,10 @@ function Tags(
       color={label.color}
       style={{ marginLeft: 2 }}
       onDelete={e => {
-        const updatedValue = value.filter(l => l._id !== label._id); // Remove label from the value
+        // Remove label from the value
+        const updatedValue = value.filter(l => l._id !== label._id);
         // Trigger onChange with event, updated value, reason, and details
-        onChange(e as React.SyntheticEvent, updatedValue, "removeOption", {
+        onChange(e, updatedValue, "removeOption", {
           option: label
         });
       }}
@@ -83,12 +91,20 @@ function Tags(
 }
 
 // Render label options
+/**
+ * Renders a single option in the dropdown for selection.
+ * @param props - HTML attributes for the list item element.
+ * @param option - The label object representing the current option.
+ * @param selected - Indicates whether the current option is selected.
+ * @returns A list item element representing the label option.
+ */
 function Option(
   props: React.HTMLAttributes<HTMLLIElement>,
   option: Label,
   { selected }: { selected: boolean }
 ) {
-  const { key, ...restProps } = props as { key?: React.Key }; // Extract key explicitly
+  // Extract key explicitly
+  const { key, ...restProps } = props as { key?: React.Key };
   return (
     <li key={key} {...restProps}>
       <Checkbox
diff --git a/src/Filter/LabelFilter/LabelFilter.types.ts b/src/Filter/LabelFilter/LabelFilter.types.ts
index 35264ba6..0c7317fe 100644
--- a/src/Filter/LabelFilter/LabelFilter.types.ts
+++ b/src/Filter/LabelFilter/LabelFilter.types.ts
@@ -1,12 +1,35 @@
 import type { Label } from "../../LabelSelector/Label.types";
 import LabelFilter from "./LabelFilter";
 
+/**
+ * Props definition for the LabelFilter component
+ */
 export type LabelFilterProps = {
+  /**
+   * Label for the filter
+   */
   label?: string;
+  /**
+   * How many tags to show before truncating and showing the plus sign, -1 is no limit.
+   */
   limitTags?: number;
+  /**
+   * Name of the filter
+   */
   name?: string;
+  /**
+   * OnChange handler for the filter box
+   * @param value the value to add/delete from the filtered values
+   * @returns void
+   */
   onChange?: (value: Label[]) => void;
+  /**
+   * Options to choose from in the dropdown box
+   */
   options: Label[];
+  /**
+   * Current value of what's been selected
+   */
   value?: Label[];
 };