cleanup

tremorlabs · Dec 12, 2024 · 6ac0cc7 · 6ac0cc7
1 parent e4bc2ac
commit 6ac0cc7
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 243 deletions.
diff --git a/src/components/chart-elements/common/NoData.tsx b/src/components/chart-elements/common/NoData.tsx
@@ -9,23 +9,11 @@ const NoData = ({ className, noDataText = "No data" }: NoDataProps) => {
   return (
     <div
       className={tremorTwMerge(
-        // common
-        "rounded-tremor-default flex h-full w-full items-center justify-center border border-dashed",
-        // light
-        "border-tremor-border",
-        // dark
-        "dark:border-dark-tremor-border",
+        "rounded-tremor-default border-tremor-border-default flex h-full w-full items-center justify-center border border-dashed",
         className,
       )}
     >
-      <p
-        className={tremorTwMerge(
-          // light
-          "text-tremor-content text-tremor-default",
-          // dark
-          "dark:text-dark-tremor-content",
-        )}
-      >
+      <p className={tremorTwMerge("text-tremor-content-default text-tremor-default")}>
         {noDataText}
       </p>
     </div>

diff --git a/src/components/input-elements/Button/styles.ts b/src/components/input-elements/Button/styles.ts
diff --git a/src/components/input-elements/MultiSelect/MultiSelect.tsx b/src/components/input-elements/MultiSelect/MultiSelect.tsx
@@ -4,12 +4,10 @@ import { ArrowDownHeadIcon, SearchIcon, XCircleIcon } from "assets";
 import XIcon from "assets/XIcon";
 import { SelectedValueContext } from "contexts";
 import { useInternalState } from "hooks";
-import { makeClassName, tremorTwMerge } from "lib";
+import { tremorTwMerge } from "lib";
 import React, { isValidElement, useMemo, useRef, useState } from "react";
 import { getFilteredOptions, getSelectButtonColors } from "../selectUtils";
 
-const makeMultiSelectClassName = makeClassName("MultiSelect");
-
 interface MultiSelectProps extends React.HTMLAttributes<HTMLInputElement> {
   defaultValue?: string[];
   name?: string;
@@ -142,10 +140,7 @@ const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>((props,
                     )}
                   >
                     <Icon
-                      className={tremorTwMerge(
-                        makeMultiSelectClassName("Icon"),
-                        "text-tremor-content-subtle h-5 w-5 shrink-0",
-                      )}
+                      className={tremorTwMerge("text-tremor-content-subtle h-5 w-5 shrink-0")}
                     />
                   </span>
                 )}
@@ -175,7 +170,6 @@ const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>((props,
                               >
                                 <XIcon
                                   className={tremorTwMerge(
-                                    makeMultiSelectClassName("clearIconItem"),
                                     "rounded-tremor-full text-tremor-content-subtle hover:text-tremor-content ml-2 h-3.5 w-3.5 cursor-pointer",
                                   )}
                                 />
@@ -192,10 +186,7 @@ const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>((props,
                   className={tremorTwMerge("absolute inset-y-0 right-0 mr-2.5 flex items-center")}
                 >
                   <ArrowDownHeadIcon
-                    className={tremorTwMerge(
-                      makeMultiSelectClassName("arrowDownIcon"),
-                      "text-tremor-content-subtle h-5 w-5 shrink-0",
-                    )}
+                    className={tremorTwMerge("text-tremor-content-subtle h-5 w-5 shrink-0")}
                   />
                 </span>
               </ListboxButton>
@@ -210,10 +201,7 @@ const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>((props,
                   }}
                 >
                   <XCircleIcon
-                    className={tremorTwMerge(
-                      makeMultiSelectClassName("clearIconAllItems"),
-                      "text-tremor-content-subtle h-4 w-4 shrink-0",
-                    )}
+                    className={tremorTwMerge("text-tremor-content-subtle h-4 w-4 shrink-0")}
                   />
                 </button>
               ) : null}

diff --git a/src/components/input-elements/MultiSelect/MultiSelectItem.tsx b/src/components/input-elements/MultiSelect/MultiSelectItem.tsx
@@ -1,11 +1,9 @@
 "use client";
 import { ListboxOption } from "@headlessui/react";
 import { SelectedValueContext } from "contexts";
-import { isValueInArray, makeClassName, tremorTwMerge } from "lib";
+import { isValueInArray, tremorTwMerge } from "lib";
 import React, { useContext } from "react";
 
-const makeMultiSelectItemClassName = makeClassName("MultiSelectItem");
-
 interface MultiSelectItemProps extends React.HTMLAttributes<HTMLDivElement> {
   value: string;
 }
@@ -19,8 +17,7 @@ const MultiSelectItem = React.forwardRef<HTMLDivElement, MultiSelectItemProps>((
   return (
     <ListboxOption
       className={tremorTwMerge(
-        makeMultiSelectItemClassName("root"),
-        "text-tremor-default data-focus:bg-tremor-background-muted data-focus:text-tremor-content-strong data-[select]ed:text-tremor-content-strong text-tremor-content-emphasis flex cursor-default items-center justify-start p-2.5",
+        "text-tremor-default data-focus:bg-tremor-background-muted data-focus:text-tremor-content-strong data-selected:text-tremor-content-strong text-tremor-content-emphasis flex cursor-default items-center justify-start p-2.5",
         className,
       )}
       ref={ref}
@@ -31,7 +28,6 @@ const MultiSelectItem = React.forwardRef<HTMLDivElement, MultiSelectItemProps>((
       <input
         type="checkbox"
         className={tremorTwMerge(
-          makeMultiSelectItemClassName("checkbox"),
           "focus:ring-none accent-tremor-brand-default mr-2.5 shrink-0 cursor-pointer focus:outline-none",
         )}
         checked={isSelected}

diff --git a/src/components/spark-elements/SparkAreaChart/SparkAreaChart.tsx b/src/components/spark-elements/SparkAreaChart/SparkAreaChart.tsx
@@ -4,7 +4,7 @@ import { Area, AreaChart as ReChartsAreaChart, ResponsiveContainer, XAxis, YAxis
 
 import NoData from "components/chart-elements/common/NoData";
 import { constructCategoryColors, getYAxisDomain } from "components/chart-elements/common/utils";
-import { BaseColors, colorPalette, getColorClassNames, themeColorRange, tremorTwMerge } from "lib";
+import { themeColorRange, tremorTwMerge } from "lib";
 import { AxisDomain } from "recharts/types/util/types";
 import { Color, CurveType } from "../../../lib/inputTypes";
 import BaseSparkChartProps from "../common/BaseSparkChartProps";
@@ -64,12 +64,7 @@ const SparkAreaChart = React.forwardRef<HTMLDivElement, SparkAreaChartProps>((pr
                     </linearGradient>
                   ) : (
                     <linearGradient
-                      className={
-                        getColorClassNames(
-                          categoryColors.get(category) ?? BaseColors.Gray,
-                          colorPalette.text,
-                        ).textColor
-                      }
+                      className={color ? textColors[color] : "gray"}
                       id={categoryColors.get(category)}
                       x1="0"
                       y1="0"

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -1,12 +1,4 @@
-import { Color, DeltaType, Size } from "./inputTypes";
-
-export const DeltaTypes: { [key: string]: DeltaType } = {
-  Increase: "increase",
-  ModerateIncrease: "moderateIncrease",
-  Decrease: "decrease",
-  ModerateDecrease: "moderateDecrease",
-  Unchanged: "unchanged",
-};
+import { Color, Size } from "./inputTypes";
 
 export const BaseColors: { [key: string]: Color } = {
   Brand: "brand",

diff --git a/src/lib/utils.tsx b/src/lib/utils.tsx
@@ -1,22 +1,4 @@
-import { DeltaTypes } from "./constants";
-import { Color, getIsBaseColor, ValueFormatter } from "./inputTypes";
-
-export const mapInputsToDeltaType = (deltaType: string, isIncreasePositive: boolean): string => {
-  if (isIncreasePositive || deltaType === DeltaTypes.Unchanged) {
-    return deltaType;
-  }
-  switch (deltaType) {
-    case DeltaTypes.Increase:
-      return DeltaTypes.Decrease;
-    case DeltaTypes.ModerateIncrease:
-      return DeltaTypes.ModerateDecrease;
-    case DeltaTypes.Decrease:
-      return DeltaTypes.Increase;
-    case DeltaTypes.ModerateDecrease:
-      return DeltaTypes.ModerateIncrease;
-  }
-  return "";
-};
+import { ValueFormatter } from "./inputTypes";
 
 export const defaultValueFormatter: ValueFormatter = (value: number) => value.toString();
 
@@ -48,67 +30,3 @@ export function mergeRefs<T = any>(
     });
   };
 }
-
-export function makeClassName(componentName: string) {
-  return (className: string) => {
-    return `tremor-${componentName}-${className}`;
-  };
-}
-
-interface ColorClassNames {
-  bgColor: string;
-  hoverBgColor: string;
-  selectBgColor: string;
-  textColor: string;
-  selectTextColor: string;
-  hoverTextColor: string;
-  borderColor: string;
-  selectBorderColor: string;
-  hoverBorderColor: string;
-  ringColor: string;
-  strokeColor: string;
-  fillColor: string;
-}
-
-/**
- * Returns boolean based on a determination that a color should be considered an "arbitrary"
- * Tailwind CSS class.
- * @see {@link https://tailwindcss.com/docs/background-color#arbitrary-values | Tailwind CSS docs}
- */
-const getIsArbitraryColor = (color: Color | string) =>
-  color.includes("#") || color.includes("--") || color.includes("rgb");
-
-export function getColorClassNames(color: Color | string, shade?: number): ColorClassNames {
-  const isBaseColor = getIsBaseColor(color);
-  if (color === "white" || color === "black" || color === "transparent" || !shade || !isBaseColor) {
-    const unshadedColor = !getIsArbitraryColor(color) ? color : `[${color}]`;
-    return {
-      bgColor: `bg-${unshadedColor} dark:bg-${unshadedColor}`,
-      hoverBgColor: `hover:bg-${unshadedColor} dark:hover:bg-${unshadedColor}`,
-      selectBgColor: `data-[selected]:bg-${unshadedColor} dark:data-[selected]:bg-${unshadedColor}`,
-      textColor: `text-${unshadedColor} dark:text-${unshadedColor}`,
-      selectTextColor: `data-[selected]:text-${unshadedColor} dark:data-[selected]:text-${unshadedColor}`,
-      hoverTextColor: `hover:text-${unshadedColor} dark:hover:text-${unshadedColor}`,
-      borderColor: `border-${unshadedColor} dark:border-${unshadedColor}`,
-      selectBorderColor: `data-[selected]:border-${unshadedColor} dark:data-[selected]:border-${unshadedColor}`,
-      hoverBorderColor: `hover:border-${unshadedColor} dark:hover:border-${unshadedColor}`,
-      ringColor: `ring-${unshadedColor} dark:ring-${unshadedColor}`,
-      strokeColor: `stroke-${unshadedColor} dark:stroke-${unshadedColor}`,
-      fillColor: `fill-${unshadedColor} dark:fill-${unshadedColor}`,
-    };
-  }
-  return {
-    bgColor: `bg-${color}-${shade} dark:bg-${color}-${shade}`,
-    selectBgColor: `data-[selected]:bg-${color}-${shade} dark:data-[selected]:bg-${color}-${shade}`,
-    hoverBgColor: `hover:bg-${color}-${shade} dark:hover:bg-${color}-${shade}`,
-    textColor: `text-${color}-${shade} dark:text-${color}-${shade}`,
-    selectTextColor: `data-[selected]:text-${color}-${shade} dark:data-[selected]:text-${color}-${shade}`,
-    hoverTextColor: `hover:text-${color}-${shade} dark:hover:text-${color}-${shade}`,
-    borderColor: `border-${color}-${shade} dark:border-${color}-${shade}`,
-    selectBorderColor: `data-[selected]:border-${color}-${shade} dark:data-[selected]:border-${color}-${shade}`,
-    hoverBorderColor: `hover:border-${color}-${shade} dark:hover:border-${color}-${shade}`,
-    ringColor: `ring-${color}-${shade} dark:ring-${color}-${shade}`,
-    strokeColor: `stroke-${color}-${shade} dark:stroke-${color}-${shade}`,
-    fillColor: `fill-${color}-${shade} dark:fill-${color}-${shade}`,
-  };
-}
diff --git a/tailwind.config.js b/tailwind.config.js