fix: replace tw classes with custom ones (#115)

Author: 0xDazzer

.changeset/pink-adults-refuse.md

@@ -0,0 +1,5 @@
+---
+"@babylonlabs-io/bbn-core-ui": patch
+---
+
+replace tw classes with custom ones

src/components/List/List.css

@@ -0,0 +1,55 @@
+.bbn-list {
+  @apply rounded border border-secondary-strokeLight;
+
+  &-horizontal {
+    @apply flex py-3;
+  }
+
+  &-vertical {
+    @apply px-4;
+  }
+
+  &-adaptive {
+    @apply px-4 md:flex md:py-3;
+  }
+}
+
+.bbn-list-item {
+  @apply flex;
+
+  &-horizontal {
+    @apply flex-row items-center justify-between border-b border-secondary-strokeLight py-4 last-of-type:border-0;
+  }
+
+  &-vertical {
+    @apply flex-1 flex-col items-start justify-start gap-1.5 border-r border-secondary-strokeLight px-6 last-of-type:border-0;
+  }
+
+  &-adaptive {
+    @apply flex-row items-center justify-between border-b border-secondary-strokeLight py-4 last-of-type:border-0 md:flex-1 md:flex-col md:items-start md:justify-start md:gap-1.5 md:border-b-0 md:border-r md:px-6 md:py-0;
+  }
+}
+
+.bbn-list-title {
+  @apply text-accent-secondary;
+
+  &-adaptive {
+    @apply text-base md:text-sm;
+  }
+}
+
+.bbn-list-value {
+  @apply text-accent-primary;
+
+  &-horizontal {
+    @apply flex items-center gap-1;
+  }
+
+  &-vertical {
+    @apply flex w-full items-center justify-between;
+  }
+
+  &-adaptive {
+    @apply flex items-center gap-1 md:w-full md:justify-between;
+  }
+}

src/components/List/List.tsx

@@ -1,5 +1,6 @@
 import { type PropsWithChildren, Children, cloneElement, isValidElement, ReactElement } from "react";
 import { twMerge } from "tailwind-merge";
+import "./List.css";
 
 import { type ListItemProps, ListItem } from "./components/ListItem";
 
@@ -9,12 +10,6 @@ export interface ListProps {
   children: ReactElement<ListItemProps, typeof ListItem> | ReactElement<ListItemProps, typeof ListItem>[];
 }
 
-const STYLES = {
-  adaptive: "px-4 md:flex md:py-3",
-  horizontal: "flex py-3",
-  vertical: "px-4",
-};
-
 const ROW_ORIENTATION = {
   adaptive: "adaptive",
   horizontal: "vertical",
@@ -23,7 +18,7 @@ const ROW_ORIENTATION = {
 
 export function List({ className, orientation = "vertical", children }: PropsWithChildren<ListProps>) {
   return (
-    <div className={twMerge("rounded border border-secondary-strokeLight", STYLES[orientation], className)}>
+    <div className={twMerge("bbn-list", `bbn-list-${orientation}`, className)}>
       {Children.map(children, (item) =>
         isValidElement(item) ? cloneElement(item, { orientation: ROW_ORIENTATION[orientation] }) : item,
       )}

src/components/List/components/ListItem.tsx

@@ -1,4 +1,4 @@
-import { twMerge } from "tailwind-merge";
+import { twJoin } from "tailwind-merge";
 
 import { Text } from "@/components/Text";
 
@@ -10,28 +10,18 @@ export interface ListItemProps {
   suffix?: JSX.Element;
 }
 
-const STYLES = {
-  adaptive:
-    "flex-row items-center justify-between border-b border-secondary-strokeLight last-of-type:border-0 py-4  md:flex-1 md:flex-col md:items-start md:justify-start md:gap-1.5 md:px-6 md:py-0 md:border-b-0 md:border-r",
-  horizontal: "flex-row items-center justify-between border-b border-secondary-strokeLight last-of-type:border-0 py-4",
-  vertical:
-    "flex-1 flex-col items-start justify-start gap-1.5 px-6 border-r border-secondary-strokeLight last-of-type:border-0",
-};
-
-const VALUE_STYLES = {
-  adaptive: "flex items-center gap-1 md:justify-between md:w-full",
-  horizontal: "flex items-center gap-1",
-  vertical: "flex items-center justify-between w-full",
-};
-
 export function ListItem({ className, orientation = "horizontal", title, value, suffix }: ListItemProps) {
   return (
-    <div className={twMerge("flex", STYLES[orientation], className)}>
-      <Text as="div" className="text-accent-secondary" variant={orientation === "horizontal" ? "body1" : "body2"}>
+    <div className={twJoin("bbn-list-item", `bbn-list-item-${orientation}`, className)}>
+      <Text
+        as="div"
+        className={twJoin("bbn-list-title", `bbn-list-title-${orientation}`)}
+        variant={orientation === "horizontal" ? "body1" : "body2"}
+      >
         {title}
       </Text>
 
-      <Text as="div" className={twMerge("text-accent-primary", VALUE_STYLES[orientation])} variant="body1">
+      <Text as="div" className={twJoin("bbn-list-value", `bbn-list-value-${orientation}`)} variant="body1">
         {value}
         {suffix}
       </Text>