fix: Text pass className & Tracker circular deps (#352)

Author: mitrotasios

src/components/text-elements/Text/Text.tsx

@@ -10,14 +10,15 @@ export interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
 }
 
 const Text = React.forwardRef<HTMLParagraphElement, TextProps>((props, ref) => {
-  const { color = BaseColors.Gray, children } = props;
+  const { color = BaseColors.Gray, className, children } = props;
   return (
     <p
       ref={ref}
       className={twMerge(
         getColorClassNames(color, colorPalette.text).textColor,
         fontSize.sm,
         fontWeight.sm,
+        className,
       )}
     >
       {children}

src/components/vis-elements/Tracker/Tracker.tsx

@@ -1,18 +1,47 @@
 import React from "react";
 import { twMerge } from "tailwind-merge";
 
-import { makeClassName, spacing } from "lib";
+import {
+  colorPalette,
+  makeClassName,
+  spacing,
+  borderRadius,
+  getColorClassNames,
+  mergeRefs,
+} from "lib";
 import { Color } from "../../../lib/inputTypes";
-import TrackerBlock from "./TrackerBlock";
+import Tooltip, { useTooltip } from "components/util-elements/Tooltip/Tooltip";
 
 export const makeTrackerClassName = makeClassName("Tracker");
 
 export interface TrackerBlockProps {
-  key?: string;
+  key?: string | number;
   color?: Color;
   tooltip?: string;
 }
 
+const TrackerBlock = React.forwardRef<HTMLDivElement, TrackerBlockProps>((props, ref) => {
+  const { color, tooltip, ...other } = props;
+
+  const { tooltipProps, getReferenceProps } = useTooltip();
+
+  return (
+    <div
+      ref={mergeRefs([ref, tooltipProps.refs.setReference])}
+      className={twMerge(
+        makeTrackerClassName("trackingBlock"),
+        "w-full h-full",
+        getColorClassNames(color ?? "gray", colorPalette.background).bgColor,
+        borderRadius.md.all,
+      )}
+      {...other}
+      {...getReferenceProps}
+    >
+      <Tooltip text={tooltip} {...tooltipProps} />
+    </div>
+  );
+});
+
 export interface TrackerProps extends React.HTMLAttributes<HTMLDivElement> {
   data: TrackerBlockProps[];
 }
@@ -31,7 +60,7 @@ const Tracker = React.forwardRef<HTMLDivElement, TrackerProps>((props, ref) => {
       {...other}
     >
       {data.map((item, idx) => (
-        <TrackerBlock key={item.key ?? idx} color={item.color ?? "gray"} tooltip={item.tooltip} />
+        <TrackerBlock key={item.key ?? idx} color={item.color} tooltip={item.tooltip} />
       ))}
     </div>
   );

src/components/vis-elements/Tracker/TrackerBlock.tsx

@@ -21,7 +21,7 @@ const ResponsiveTemplate: ComponentStory<typeof LineChart> = (args) => (
         <LineChart {...args} />
       </Card>
     </div>
-    <Title marginTop="mt-5">Desktop</Title>
+    <Title className="mt-5">Desktop</Title>
     <Card>
       <LineChart {...args} />
     </Card>

src/stories/chart-elements/LineChart.stories.tsx

@@ -2,15 +2,9 @@ import React from "react";
 import { render } from "@testing-library/react";
 
 import Tracker from "components/vis-elements/Tracker/Tracker";
-import TrackerBlock from "components/vis-elements/Tracker/TrackerBlock";
 
 describe("Tracker", () => {
   test("renders the Tracker component with default props", () => {
-    render(
-      <Tracker>
-        <TrackerBlock color="green" />
-        <TrackerBlock color="green" />
-      </Tracker>,
-    );
+    render(<Tracker data={[{ color: "green" }, { color: "green" }]} />);
   });
 });