From cc1d0db4cac8bc395cbf3b4ae0bd39820e1c235b Mon Sep 17 00:00:00 2001
From: abdelkd <abdelkarimdjelalda@gmail.com>
Date: Tue, 19 Mar 2024 05:21:19 +0100
Subject: [PATCH 1/4] feat: add customRender prop to legend

---
 .../text-elements/Legend/Legend.tsx           | 94 +++++++++++++------
 1 file changed, 67 insertions(+), 27 deletions(-)

diff --git a/src/components/text-elements/Legend/Legend.tsx b/src/components/text-elements/Legend/Legend.tsx
index 1b933669..dfb03e3b 100644
--- a/src/components/text-elements/Legend/Legend.tsx
+++ b/src/components/text-elements/Legend/Legend.tsx
@@ -6,15 +6,47 @@ import { ChevronLeftFill, ChevronRightFill } from "assets";
 
 const makeLegendClassName = makeClassName("Legend");
 
+export interface ColorCircleProps {
+  name: string;
+  color: string;
+  activeLegend?: string;
+}
+
+const ColorCircle = ({ name, color, activeLegend }: ColorCircleProps) => {
+  return (
+    <svg
+      className={tremorTwMerge(
+        "flex-none h-2 w-2 mr-1.5",
+        getColorClassNames(color, colorPalette.text).textColor,
+        activeLegend && activeLegend !== name ? "opacity-40" : "opacity-100",
+      )}
+      fill="currentColor"
+      viewBox="0 0 8 8"
+    >
+      <circle cx={4} cy={4} r={4} />
+    </svg>
+  );
+};
+
 export interface LegendItemProps {
   name: string;
   color: Color | string;
   onClick?: (name: string, color: Color | string) => void;
   activeLegend?: string;
+  customRender:
+    | (({
+        name,
+        Circle,
+      }: {
+        name: string;
+        Circle: () => React.ReactNode;
+      }) => React.ReactNode | undefined)
+    | undefined;
 }
 
-const LegendItem = ({ name, color, onClick, activeLegend }: LegendItemProps) => {
+const LegendItem = ({ name, color, onClick, activeLegend, customRender }: LegendItemProps) => {
   const hasOnValueChange = !!onClick;
+
   return (
     <li
       className={tremorTwMerge(
@@ -34,32 +66,31 @@ const LegendItem = ({ name, color, onClick, activeLegend }: LegendItemProps) =>
         onClick?.(name, color);
       }}
     >
-      <svg
-        className={tremorTwMerge(
-          "flex-none h-2 w-2 mr-1.5",
-          getColorClassNames(color, colorPalette.text).textColor,
-          activeLegend && activeLegend !== name ? "opacity-40" : "opacity-100",
-        )}
-        fill="currentColor"
-        viewBox="0 0 8 8"
-      >
-        <circle cx={4} cy={4} r={4} />
-      </svg>
-      <p
-        className={tremorTwMerge(
-          // common
-          "whitespace-nowrap truncate text-tremor-default",
-          // light
-          "text-tremor-content",
-          hasOnValueChange ? "group-hover:text-tremor-content-emphasis" : "",
-          // dark
-          "dark:text-dark-tremor-content",
-          activeLegend && activeLegend !== name ? "opacity-40" : "opacity-100",
-          hasOnValueChange ? "dark:group-hover:text-dark-tremor-content-emphasis" : "",
-        )}
-      >
-        {name}
-      </p>
+      {customRender ? (
+        customRender({
+          name,
+          Circle: () => <ColorCircle name={name} activeLegend={activeLegend} color={color} />,
+        })
+      ) : (
+        <>
+          <ColorCircle name={name} activeLegend={activeLegend} color={color} />
+          <p
+            className={tremorTwMerge(
+              // common
+              "whitespace-nowrap truncate text-tremor-default",
+              // light
+              "text-tremor-content",
+              hasOnValueChange ? "group-hover:text-tremor-content-emphasis" : "",
+              // dark
+              "dark:text-dark-tremor-content",
+              activeLegend && activeLegend !== name ? "opacity-40" : "opacity-100",
+              hasOnValueChange ? "dark:group-hover:text-dark-tremor-content-emphasis" : "",
+            )}
+          >
+            {name}
+          </p>
+        </>
+      )}
     </li>
   );
 };
@@ -135,6 +166,13 @@ export interface LegendProps extends React.OlHTMLAttributes<HTMLOListElement> {
   onClickLegendItem?: (category: string, color: Color | string) => void;
   activeLegend?: string;
   enableLegendSlider?: boolean;
+  renderItem?: ({
+    name,
+    Circle,
+  }: {
+    name: string;
+    Circle: () => React.ReactNode;
+  }) => React.ReactNode | undefined;
 }
 
 type HasScrollProps = {
@@ -150,6 +188,7 @@ const Legend = React.forwardRef<HTMLOListElement, LegendProps>((props, ref) => {
     onClickLegendItem,
     activeLegend,
     enableLegendSlider = false,
+    renderItem = undefined,
     ...other
   } = props;
   const scrollableRef = React.useRef<HTMLInputElement>(null);
@@ -259,6 +298,7 @@ const Legend = React.forwardRef<HTMLOListElement, LegendProps>((props, ref) => {
             color={colors[idx]}
             onClick={onClickLegendItem}
             activeLegend={activeLegend}
+            customRender={renderItem}
           />
         ))}
       </div>

From 7dbf650da97dc7862c93de07a2b705c0edaa0647 Mon Sep 17 00:00:00 2001
From: abdelkd <abdelkarimdjelalda@gmail.com>
Date: Tue, 19 Mar 2024 05:21:40 +0100
Subject: [PATCH 2/4] feat: add story for customRender on legend

---
 src/stories/text-elements/Legend.stories.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/stories/text-elements/Legend.stories.tsx b/src/stories/text-elements/Legend.stories.tsx
index aa87324c..3106a92c 100644
--- a/src/stories/text-elements/Legend.stories.tsx
+++ b/src/stories/text-elements/Legend.stories.tsx
@@ -101,3 +101,17 @@ export const CustomColorsConClick: Story = {
     },
   },
 };
+
+export const CustomItem: Story = {
+  ...LegendTemplate,
+  args: {
+    renderItem: ({ name, Circle }: any) => {
+      return (
+        <>
+          <Circle />
+          <p>custom - {name}</p>
+        </>
+      );
+    },
+  },
+};

From 911e3bc7341c83a3e8502ea703ef496dd36e6968 Mon Sep 17 00:00:00 2001
From: abdelkd <abdelkarimdjelalda@gmail.com>
Date: Thu, 21 Mar 2024 15:49:31 +0100
Subject: [PATCH 3/4] feat: add index to renderItem component props

---
 .../text-elements/Legend/Legend.tsx           | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/text-elements/Legend/Legend.tsx b/src/components/text-elements/Legend/Legend.tsx
index dfb03e3b..121f3b53 100644
--- a/src/components/text-elements/Legend/Legend.tsx
+++ b/src/components/text-elements/Legend/Legend.tsx
@@ -33,18 +33,24 @@ export interface LegendItemProps {
   color: Color | string;
   onClick?: (name: string, color: Color | string) => void;
   activeLegend?: string;
+  index: number;
   customRender:
-    | (({
-        name,
-        Circle,
-      }: {
+    | ((params: {
         name: string;
-        Circle: () => React.ReactNode;
+        index: number;
+        Circle: () => React.JSX.Element;
       }) => React.ReactNode | undefined)
     | undefined;
 }
 
-const LegendItem = ({ name, color, onClick, activeLegend, customRender }: LegendItemProps) => {
+const LegendItem = ({
+  name,
+  color,
+  onClick,
+  activeLegend,
+  customRender,
+  index,
+}: LegendItemProps) => {
   const hasOnValueChange = !!onClick;
 
   return (
@@ -69,6 +75,7 @@ const LegendItem = ({ name, color, onClick, activeLegend, customRender }: Legend
       {customRender ? (
         customRender({
           name,
+          index,
           Circle: () => <ColorCircle name={name} activeLegend={activeLegend} color={color} />,
         })
       ) : (
@@ -166,12 +173,10 @@ export interface LegendProps extends React.OlHTMLAttributes<HTMLOListElement> {
   onClickLegendItem?: (category: string, color: Color | string) => void;
   activeLegend?: string;
   enableLegendSlider?: boolean;
-  renderItem?: ({
-    name,
-    Circle,
-  }: {
+  renderItem?: (params: {
     name: string;
-    Circle: () => React.ReactNode;
+    index: number;
+    Circle: () => React.JSX.Element;
   }) => React.ReactNode | undefined;
 }
 
@@ -299,6 +304,7 @@ const Legend = React.forwardRef<HTMLOListElement, LegendProps>((props, ref) => {
             onClick={onClickLegendItem}
             activeLegend={activeLegend}
             customRender={renderItem}
+            index={idx}
           />
         ))}
       </div>

From 82858cd71fd507d5e05bbd9a0357fdf233a52f39 Mon Sep 17 00:00:00 2001
From: abdelkd <abdelkarimdjelalda@gmail.com>
Date: Thu, 21 Mar 2024 15:50:33 +0100
Subject: [PATCH 4/4] update legend story to include renderItem index

---
 src/stories/text-elements/Legend.stories.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/stories/text-elements/Legend.stories.tsx b/src/stories/text-elements/Legend.stories.tsx
index 3106a92c..789fc6a9 100644
--- a/src/stories/text-elements/Legend.stories.tsx
+++ b/src/stories/text-elements/Legend.stories.tsx
@@ -105,11 +105,14 @@ export const CustomColorsConClick: Story = {
 export const CustomItem: Story = {
   ...LegendTemplate,
   args: {
-    renderItem: ({ name, Circle }: any) => {
+    categories: ["Category A", "Category B", "Category C"],
+    renderItem: ({ name, index, Circle }) => {
       return (
         <>
           <Circle />
-          <p>custom - {name}</p>
+          <p>
+            {index} - {name}
+          </p>
         </>
       );
     },