fix: export CustomTooltipProps and fix button transition (#930)

* fix: findDOMNode is deprecated in StrictMode (#907) (#924) * Add react-transition-state library * replace `react-transition-group` with `react-transition-state` * fix: reconfigure CustomTooltipProps * fix: add theme tokens to legend slider (#929) --------- Co-authored-by: Touha Zohair <[email protected]> Co-authored-by: christopherkindl <[email protected]>
tremorlabs · Jan 23, 2024 · 7e857c5 · 7e857c5
1 parent 0fa9bef
commit 7e857c5
Show file tree

Hide file tree

Showing 15 changed files with 120 additions and 121 deletions.
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "@headlessui/tailwindcss": "^0.2.0",
     "date-fns": "^2.30.0",
     "react-day-picker": "^8.9.1",
-    "react-transition-group": "^4.4.5",
+    "react-transition-state": "^2.1.1",
     "recharts": "^2.10.3",
     "tailwind-merge": "^1.14.0"
   },
@@ -64,7 +64,6 @@
     "@types/jest": "^27.5.2",
     "@types/node": "^20.10.2",
     "@types/react": "^18.2.41",
-    "@types/react-transition-group": "^4.4.9",
     "@typescript-eslint/eslint-plugin": "^6.13.1",
     "@typescript-eslint/parser": "^6.13.1",
     "autoprefixer": "^10.4.16",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/chart-elements/DonutChart/DonutChart.tsx b/src/components/chart-elements/DonutChart/DonutChart.tsx
@@ -16,7 +16,7 @@ import { DonutChartTooltip } from "./DonutChartTooltip";
 import { parseData, parseLabelInput } from "./inputParser";
 
 import type { EventProps } from "components/chart-elements/common";
-import { CustomTooltipType } from "components/chart-elements/common/CustomTooltipProps";
+import { CustomTooltipProps } from "components/chart-elements/common/CustomTooltipProps";
 import type BaseAnimationTimingProps from "../common/BaseAnimationTimingProps";
 
 type DonutChartVariant = "donut" | "pie";
@@ -35,7 +35,7 @@ export interface DonutChartProps extends BaseAnimationTimingProps {
   noDataText?: string;
   className?: string;
   onValueChange?: (value: EventProps) => void;
-  customTooltip?: React.ComponentType<CustomTooltipType>;
+  customTooltip?: React.ComponentType<CustomTooltipProps>;
 }
 
 const renderInactiveShape = (props: any) => {

diff --git a/src/components/chart-elements/ScatterChart/ScatterChart.tsx b/src/components/chart-elements/ScatterChart/ScatterChart.tsx
@@ -26,7 +26,7 @@ import {
   getYAxisDomain,
 } from "../common/utils";
 
-import { CustomTooltipType } from "components/chart-elements/common/CustomTooltipProps";
+import { CustomTooltipProps } from "components/chart-elements/common/CustomTooltipProps";
 import {
   BaseColors,
   colorPalette,
@@ -73,7 +73,7 @@ export interface ScatterChartProps
   noDataText?: string;
   enableLegendSlider?: boolean;
   onValueChange?: (value: EventProps) => void;
-  customTooltip?: React.ComponentType<CustomTooltipType>;
+  customTooltip?: React.ComponentType<CustomTooltipProps>;
   rotateLabelX?: {
     angle: number;
     verticalShift: number;

diff --git a/src/components/chart-elements/common/BaseChartProps.tsx b/src/components/chart-elements/common/BaseChartProps.tsx
@@ -1,6 +1,6 @@
 import { Color, ValueFormatter, IntervalType } from "../../../lib";
 import type BaseAnimationTimingProps from "./BaseAnimationTimingProps";
-import { CustomTooltipType } from "./CustomTooltipProps";
+import { CustomTooltipProps } from "./CustomTooltipProps";
 
 type FixedProps = {
   eventType: "dot" | "category" | "bar" | "slice" | "bubble";
@@ -34,7 +34,7 @@ interface BaseChartProps extends BaseAnimationTimingProps, React.HTMLAttributes<
   noDataText?: string;
   onValueChange?: (value: EventProps) => void;
   enableLegendSlider?: boolean;
-  customTooltip?: React.ComponentType<CustomTooltipType>;
+  customTooltip?: React.ComponentType<CustomTooltipProps>;
   rotateLabelX?: {
     angle: number;
     verticalShift?: number;

diff --git a/src/components/chart-elements/common/CustomTooltipProps.tsx b/src/components/chart-elements/common/CustomTooltipProps.tsx
@@ -1,6 +1,6 @@
 import { NameType, Payload } from "recharts/types/component/DefaultTooltipContent";
 
-export type CustomTooltipType = {
+export type CustomTooltipProps = {
   payload: Payload<string | number | (string | number)[], string | number>[] | undefined;
   active: boolean | undefined;
   label: NameType | undefined;

diff --git a/src/components/chart-elements/common/index.ts b/src/components/chart-elements/common/index.ts
@@ -1 +1,2 @@
 export type { EventProps } from "./BaseChartProps";
+export type { CustomTooltipProps } from "./CustomTooltipProps";
diff --git a/src/components/chart-elements/index.ts b/src/components/chart-elements/index.ts
@@ -1,6 +1,7 @@
 export * from "./AreaChart";
 export * from "./BarChart";
 export { EventProps } from "./common/BaseChartProps";
+export { CustomTooltipProps } from "./common/CustomTooltipProps";
 export * from "./DonutChart";
 export * from "./LineChart";
 export * from "./ScatterChart";
diff --git a/src/components/input-elements/Button/Button.tsx b/src/components/input-elements/Button/Button.tsx
@@ -1,7 +1,7 @@
 "use client";
 import Tooltip, { useTooltip } from "components/util-elements/Tooltip/Tooltip";
-import React from "react";
-import { Transition } from "react-transition-group";
+import React, { useEffect } from "react";
+import { useTransition, type TransitionStatus } from "react-transition-state";
 
 import { HorizontalPositions, makeClassName, mergeRefs, Sizes, tremorTwMerge } from "lib";
 
@@ -17,7 +17,7 @@ export interface ButtonIconOrSpinnerProps {
   iconPosition: string;
   Icon: React.ElementType | undefined;
   needMargin: boolean;
-  transitionState: string;
+  transitionStatus: TransitionStatus;
 }
 
 export const ButtonIconOrSpinner = ({
@@ -26,7 +26,7 @@ export const ButtonIconOrSpinner = ({
   iconPosition,
   Icon,
   needMargin,
-  transitionState,
+  transitionStatus,
 }: ButtonIconOrSpinnerProps) => {
   Icon = Icon!;
 
@@ -52,7 +52,7 @@ export const ButtonIconOrSpinner = ({
         "animate-spin shrink-0",
         margin,
         spinnerSize.default,
-        spinnerSize[transitionState],
+        spinnerSize[transitionStatus],
       )}
       style={{ transition: `width 150ms` }}
     />
@@ -113,71 +113,73 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
   const delay = 300;
   const { tooltipProps, getReferenceProps } = useTooltip(delay);
 
+  const [transitionState, toggleTransition] = useTransition({ timeout: 50 });
+
+  useEffect(() => {
+    toggleTransition(loading);
+  }, [loading]);
+
   return (
-    <Transition in={loading} timeout={50}>
-      {(state) => (
-        // eslint-disable-next-line react/button-has-type
-        <button
-          ref={mergeRefs([ref, tooltipProps.refs.setReference])}
+    // eslint-disable-next-line react/button-has-type
+    <button
+      ref={mergeRefs([ref, tooltipProps.refs.setReference])}
+      className={tremorTwMerge(
+        makeButtonClassName("root"),
+        // common
+        "flex-shrink-0 inline-flex justify-center items-center group font-medium outline-none",
+        buttonShapeStyles,
+        buttonProportionStyles.paddingX,
+        buttonProportionStyles.paddingY,
+        buttonProportionStyles.fontSize,
+        buttonColorStyles.textColor,
+        buttonColorStyles.bgColor,
+        buttonColorStyles.borderColor,
+        buttonColorStyles.hoverBorderColor,
+        !isDisabled
+          ? tremorTwMerge(
+              getButtonColors(variant, color).hoverTextColor,
+              getButtonColors(variant, color).hoverBgColor,
+              getButtonColors(variant, color).hoverBorderColor,
+            )
+          : "opacity-50 cursor-not-allowed",
+        className,
+      )}
+      disabled={isDisabled}
+      {...getReferenceProps}
+      {...other}
+    >
+      <Tooltip text={tooltip} {...tooltipProps} />
+      {showButtonIconOrSpinner && iconPosition !== HorizontalPositions.Right ? (
+        <ButtonIconOrSpinner
+          loading={loading}
+          iconSize={iconSize}
+          iconPosition={iconPosition}
+          Icon={Icon}
+          transitionStatus={transitionState.status}
+          needMargin={needIconMargin}
+        />
+      ) : null}
+      {showLoadingText || children ? (
+        <span
           className={tremorTwMerge(
-            makeButtonClassName("root"),
-            // common
-            "flex-shrink-0 inline-flex justify-center items-center group font-medium outline-none",
-            buttonShapeStyles,
-            buttonProportionStyles.paddingX,
-            buttonProportionStyles.paddingY,
-            buttonProportionStyles.fontSize,
-            buttonColorStyles.textColor,
-            buttonColorStyles.bgColor,
-            buttonColorStyles.borderColor,
-            buttonColorStyles.hoverBorderColor,
-            !isDisabled
-              ? tremorTwMerge(
-                  getButtonColors(variant, color).hoverTextColor,
-                  getButtonColors(variant, color).hoverBgColor,
-                  getButtonColors(variant, color).hoverBorderColor,
-                )
-              : "opacity-50 cursor-not-allowed",
-            className,
+            makeButtonClassName("text"),
+            "text-tremor-default whitespace-nowrap",
           )}
-          disabled={isDisabled}
-          {...getReferenceProps}
-          {...other}
         >
-          <Tooltip text={tooltip} {...tooltipProps} />
-          {showButtonIconOrSpinner && iconPosition !== HorizontalPositions.Right ? (
-            <ButtonIconOrSpinner
-              loading={loading}
-              iconSize={iconSize}
-              iconPosition={iconPosition}
-              Icon={Icon}
-              transitionState={state}
-              needMargin={needIconMargin}
-            />
-          ) : null}
-          {showLoadingText || children ? (
-            <span
-              className={tremorTwMerge(
-                makeButtonClassName("text"),
-                "text-tremor-default whitespace-nowrap",
-              )}
-            >
-              {showLoadingText ? loadingText : children}
-            </span>
-          ) : null}
-          {showButtonIconOrSpinner && iconPosition === HorizontalPositions.Right ? (
-            <ButtonIconOrSpinner
-              loading={loading}
-              iconSize={iconSize}
-              iconPosition={iconPosition}
-              Icon={Icon}
-              transitionState={state}
-              needMargin={needIconMargin}
-            />
-          ) : null}
-        </button>
-      )}
-    </Transition>
+          {showLoadingText ? loadingText : children}
+        </span>
+      ) : null}
+      {showButtonIconOrSpinner && iconPosition === HorizontalPositions.Right ? (
+        <ButtonIconOrSpinner
+          loading={loading}
+          iconSize={iconSize}
+          iconPosition={iconPosition}
+          Icon={Icon}
+          transitionStatus={transitionState.status}
+          needMargin={needIconMargin}
+        />
+      ) : null}
+    </button>
   );
 });
 

diff --git a/src/components/text-elements/Legend/Legend.tsx b/src/components/text-elements/Legend/Legend.tsx
@@ -266,17 +266,32 @@ const Legend = React.forwardRef<HTMLOListElement, LegendProps>((props, ref) => {
         <>
           <div
             className={tremorTwMerge(
-              "absolute top-0 bottom-0 left-0 w-4 bg-gradient-to-r from-white to-transparent pointer-events-none",
+              // light mode
+              "from-tremor-background",
+              // dark mode
+              "dark:from-dark-tremor-background",
+              // common
+              "absolute top-0 bottom-0 left-0 w-4 bg-gradient-to-r to-transparent pointer-events-none",
             )}
           />
           <div
             className={tremorTwMerge(
-              "absolute top-0 bottom-0 right-10 w-4 bg-gradient-to-r from-transparent to-white pointer-events-none",
+              // light mode
+              "to-tremor-background",
+              // dark mode
+              "dark:to-dark-tremor-background",
+              // common
+              "absolute top-0 bottom-0 right-10 w-4 bg-gradient-to-r from-transparent pointer-events-none",
             )}
           />
           <div
             className={tremorTwMerge(
-              "absolute flex top-0 pr-1 bottom-0 right-0 items-center justify-center h-full bg-tremor-background",
+              // light mode
+              "bg-tremor-background",
+              // dark mode
+              "dark:bg-dark-tremor-background",
+              // common
+              "absolute flex top-0 pr-1 bottom-0 right-0 items-center justify-center h-full",
             )}
           >
             <ScrollButton