refactor: replace tremor with recharts (#22791)

* refactor: replace tremor with recharts

* update tooltip

* clean up types

* replace tremor with recharts

* replace BarList with recharts

* replace ProgressBar

* remove tremor from the repository

* clean up

* fix UserStatsTable

* fix type error

* add explicit return type

packages/ui/components/progress-bar/ProgressBar.tsx

@@ -0,0 +1,38 @@
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+import classNames from "@calcom/ui/classNames";
+
+const progressBarStyles = cva("h-2 rounded-full", {
+  variants: {
+    color: {
+      green: "bg-green-500",
+      blue: "bg-blue-500",
+      red: "bg-red-500",
+      yellow: "bg-yellow-500",
+      gray: "bg-gray-500",
+    },
+  },
+  defaultVariants: {
+    color: "gray",
+  },
+});
+
+export interface ProgressBarProps extends VariantProps<typeof progressBarStyles> {
+  percentageValue: number;
+  label?: string;
+  className?: string;
+}
+
+export function ProgressBar({ color, percentageValue, label, className }: ProgressBarProps) {
+  const clampedPercentage = Math.min(100, Math.max(0, percentageValue));
+
+  return (
+    <div className={classNames("flex w-full items-center gap-3", className)}>
+      <div className="h-2 flex-1 rounded-full bg-gray-200">
+        <div className={progressBarStyles({ color })} style={{ width: `${clampedPercentage}%` }} />
+      </div>
+      {label && <span className="text-sm font-medium text-gray-700">{label}</span>}
+    </div>
+  );
+}

packages/ui/components/progress-bar/index.ts

@@ -0,0 +1,2 @@
+export { ProgressBar } from "./ProgressBar";
+export type { ProgressBarProps } from "./ProgressBar";

packages/ui/package.json

@@ -43,6 +43,7 @@
     "./components/organization-banner": "./components/organization-banner/index.ts",
     "./components/pagination": "./components/pagination/index.ts",
     "./components/popover": "./components/popover/index.ts",
+    "./components/progress-bar": "./components/progress-bar/index.ts",
     "./components/radio": "./components/radio/index.ts",
     "./components/scrollable": "./components/scrollable/index.ts",
     "./components/sheet": "./components/sheet/index.ts",