From 4048eff3abe07fed06c8d3e7ab8fce18fe482439 Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Wed, 4 Dec 2024 17:37:12 +0800
Subject: [PATCH] chore: remove twc

---
 web/app/components/base/skeleton/index.tsx | 33 ++++++++++++++++++----
 web/package.json                           |  1 -
 web/utils/twc.ts                           |  6 ----
 web/yarn.lock                              | 25 ----------------
 4 files changed, 28 insertions(+), 37 deletions(-)
 delete mode 100644 web/utils/twc.ts

diff --git a/web/app/components/base/skeleton/index.tsx b/web/app/components/base/skeleton/index.tsx
index 20ebeb6611..5f29c22f7c 100644
--- a/web/app/components/base/skeleton/index.tsx
+++ b/web/app/components/base/skeleton/index.tsx
@@ -1,11 +1,34 @@
-import type { FC } from 'react'
-import { twc } from '@/utils/twc'
+import type { ComponentProps, FC } from 'react'
+import classNames from '@/utils/classnames'
 
-export const SkeletonContanier = twc.div`flex flex-col gap-1`
+type SkeletonProps = ComponentProps<'div'>
 
-export const SkeletonRow = twc.div`flex items-center gap-2`
+export const SkeletonContanier: FC<SkeletonProps> = (props) => {
+  const { className, children, ...rest } = props
+  return (
+    <div className={classNames('flex flex-col gap-1', className)} {...rest}>
+      {children}
+    </div>
+  )
+}
 
-export const SkeletonRectangle = twc.div`h-2 rounded-sm opacity-20 bg-text-tertiary my-1`
+export const SkeletonRow: FC<SkeletonProps> = (props) => {
+  const { className, children, ...rest } = props
+  return (
+    <div className={classNames('flex items-center gap-2', className)} {...rest}>
+      {children}
+    </div>
+  )
+}
+
+export const SkeletonRectangle: FC<SkeletonProps> = (props) => {
+  const { className, children, ...rest } = props
+  return (
+    <div className={classNames('h-2 rounded-sm opacity-20 bg-text-tertiary my-1', className)} {...rest}>
+      {children}
+    </div>
+  )
+}
 
 export const SkeletonPoint: FC = () =>
   <div className='text-text-quaternary text-xs font-medium'>·</div>
diff --git a/web/package.json b/web/package.json
index dc7305f824..f65d87961b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -88,7 +88,6 @@
     "react-sortablejs": "^6.1.4",
     "react-syntax-highlighter": "^15.5.0",
     "react-tooltip": "5.8.3",
-    "react-twc": "^1.4.2",
     "react-window": "^1.8.9",
     "react-window-infinite-loader": "^1.0.9",
     "reactflow": "^11.11.3",
diff --git a/web/utils/twc.ts b/web/utils/twc.ts
deleted file mode 100644
index d2dc6e71b1..0000000000
--- a/web/utils/twc.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { createTwc } from 'react-twc'
-import classNames from './classnames'
-
-export const twc = createTwc({
-  compose: classNames,
-})
diff --git a/web/yarn.lock b/web/yarn.lock
index 8f4c7d5be5..4bdef397cd 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -2501,18 +2501,6 @@
     schema-utils "^4.2.0"
     source-map "^0.7.3"
 
-"@radix-ui/react-compose-refs@1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74"
-  integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==
-
-"@radix-ui/react-slot@^1.0.2":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84"
-  integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==
-  dependencies:
-    "@radix-ui/react-compose-refs" "1.1.0"
-
 "@reactflow/background@11.3.13":
   version "11.3.13"
   resolved "https://registry.npmjs.org/@reactflow/background/-/background-11.3.13.tgz"
@@ -5395,11 +5383,6 @@ clsx@2.0.0:
   resolved "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz"
   integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
 
-clsx@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
-  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
-
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.npmjs.org/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -11802,14 +11785,6 @@ react-tooltip@5.8.3:
     "@floating-ui/dom" "1.1.1"
     classnames "^2.3.2"
 
-react-twc@^1.4.2:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/react-twc/-/react-twc-1.4.2.tgz#2e795c0683ee6196afe105500ae611a8e955d691"
-  integrity sha512-ix8Z1dNacL29Vri3rWsQqRYMQXWCNzbI1qhz0yyvcbO057HZwz3rXZDQ7TcOE1hQ7EHornX3ka2reO27RmXiYA==
-  dependencies:
-    "@radix-ui/react-slot" "^1.0.2"
-    clsx "^2.1.0"
-
 react-window-infinite-loader@^1.0.9:
   version "1.0.9"
   resolved "https://registry.npmjs.org/react-window-infinite-loader/-/react-window-infinite-loader-1.0.9.tgz"