UI v2 remove cx twmerge

deepfence_frontend/apps/dashboard/package.json

@@ -25,7 +25,6 @@
     "@suspensive/react": "^1.11.2",
     "@suspensive/react-query": "^1.11.2",
     "@tanstack/react-query": "^4.29.17",
-    "classnames": "^2.3.2",
     "dayjs": "^1.11.8",
     "echarts": "^5.4.2",
     "lodash-es": "^4.17.21",
@@ -35,7 +34,6 @@
     "react-router-dom": "^6.14.0",
     "react-use": "^17.4.0",
     "sonner": "^0.1.1",
-    "tailwind-merge": "^1.13.2",
     "tailwind-preset": "workspace:*",
     "ui-components": "workspace:*"
   },

deepfence_frontend/apps/dashboard/src/components/AppHeader.tsx

@@ -1,5 +1,5 @@
-import classNames from 'classnames';
 import { useFetcher, useRouteLoaderData } from 'react-router-dom';
+import { cn } from 'tailwind-preset';
 import { Dropdown, DropdownItem } from 'ui-components';
 
 import { DFLink } from '@/components/DFLink';
@@ -12,12 +12,12 @@ export function AppHeader() {
   const { email } = useRouteLoaderData('root') as { email: string };
   return (
     <header
-      className={classNames(
+      className={cn(
         'fixed z-10 top-0 bg-white dark:bg-bg-left-nav h-[56px] w-full border-b border-gray-200 dark:border-bg-top-header',
       )}
     >
       <div className="h-full flex items-center">
-        <div className={classNames('mr-auto ml-3')}>
+        <div className="mr-auto ml-3">
           <DFLink
             to="/"
             style={{

deepfence_frontend/apps/dashboard/src/components/LinkButton.tsx

@@ -1,5 +1,5 @@
-import cx from 'classnames';
 import React from 'react';
+import { cn } from 'tailwind-preset';
 
 import { DFLink } from '@/components/DFLink';
 
@@ -15,7 +15,7 @@ export const LinkButton = ({
   return (
     <DFLink
       to={to}
-      className={cx(
+      className={cn(
         'flex items-center hover:no-underline focus:no-underline active:no-underline',
         'text-gray-800 dark:text-gray-100 hover:text-blue-600 hover:dark:text-blue-500',
         'visited:text-gray-800 dark:visited:text-gray-100',

deepfence_frontend/apps/dashboard/src/components/ScanStatusMessage.tsx

@@ -1,12 +1,11 @@
-import cx from 'classnames';
 import { CircleSpinner, Tooltip } from 'ui-components';
 
 import { ErrorStandardLineIcon } from '@/components/icons/common/ErrorStandardLine';
 import { ErrorStandardSolidIcon } from '@/components/icons/common/ErrorStandardSolid';
 
 export const ScanStatusInProgress = () => {
   return (
-    <div className={cx('flex items-center justify-center gap-x-2')}>
+    <div className="flex items-center justify-center gap-x-2">
       <CircleSpinner size="md" />
       <span className="text-h3 font-medium dark:text-text-text-and-icon">
         Scan is in progress, please wait...
@@ -17,7 +16,7 @@ export const ScanStatusInProgress = () => {
 
 export const ScanStatusInError = ({ errorMessage }: { errorMessage: string }) => {
   return (
-    <div className={cx('flex items-center justify-center gap-x-2')}>
+    <div className="flex items-center justify-center gap-x-2">
       {errorMessage ? (
         <Tooltip content={errorMessage}>
           <div className="w-6 h-6 dark:text-status-error  rounded-full">

deepfence_frontend/apps/dashboard/src/components/error/404.tsx

@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import { useLocation, useRouteError } from 'react-router-dom';
 
 const SVG404 = () => {
@@ -435,7 +434,7 @@ export const FourZeroFourAuthenticated = () => {
   }
 
   return (
-    <main className={classNames('pt-[64px] h-screen')}>
+    <main className="pt-[64px] h-screen">
       <PageNotFoundComponent />
     </main>
   );

deepfence_frontend/apps/dashboard/src/components/error/500.tsx

@@ -1,6 +1,6 @@
-import classNames from 'classnames';
 import { useMemo, useState } from 'react';
 import { useLocation, useRouteError } from 'react-router-dom';
+import { cn } from 'tailwind-preset';
 
 import { AppHeader } from '@/components/AppHeader';
 import { getSideNavigationState, SideNavigation } from '@/components/SideNavigation';
@@ -1367,13 +1367,10 @@ export const FiveZeroZero = () => {
             onExpandedChange={(state) => setSideNavExpanded(state)}
           />
           <main
-            className={classNames(
-              'pt-[56px] h-screen overflow-auto transition-[margin-left]',
-              {
-                'ml-[60px]': !sideNavExpanded,
-                'ml-[240px]': sideNavExpanded,
-              },
-            )}
+            className={cn('pt-[56px] h-screen overflow-auto transition-[margin-left]', {
+              'ml-[60px]': !sideNavExpanded,
+              'ml-[240px]': sideNavExpanded,
+            })}
           >
             <ErrorComponent />
           </main>

deepfence_frontend/apps/dashboard/src/features/auth/pages/Login.tsx

@@ -1,4 +1,3 @@
-import cx from 'classnames';
 import { useFetcher } from 'react-router-dom';
 import { Button, TextInput } from 'ui-components';
 
@@ -41,9 +40,7 @@ export const Login = () => {
           <DFLink
             unstyled
             to="/auth/forgot-password"
-            className={cx(
-              'ml-auto text-p5 underline text-blue-600 dark:text-accent-accent',
-            )}
+            className="ml-auto text-p5 underline text-blue-600 dark:text-accent-accent"
           >
             Forgot password?
           </DFLink>

deepfence_frontend/apps/dashboard/src/features/common/RootLayout.tsx

@@ -1,6 +1,6 @@
-import classNames from 'classnames';
 import { useState } from 'react';
 import { Outlet } from 'react-router-dom';
+import { cn } from 'tailwind-preset';
 
 import { AppHeader } from '@/components/AppHeader';
 import { getSideNavigationState, SideNavigation } from '@/components/SideNavigation';
@@ -17,13 +17,10 @@ export const RootLayout = () => {
         onExpandedChange={(state) => setSideNavExpanded(state)}
       />
       <main
-        className={classNames(
-          'pt-[56px] h-screen overflow-auto transition-[margin-left]',
-          {
-            'ml-[60px]': !sideNavExpanded,
-            'ml-[240px]': sideNavExpanded,
-          },
-        )}
+        className={cn('pt-[56px] h-screen overflow-auto transition-[margin-left]', {
+          'ml-[60px]': !sideNavExpanded,
+          'ml-[240px]': sideNavExpanded,
+        })}
       >
         <Outlet />
       </main>

deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScans.tsx

@@ -1,6 +1,5 @@
 import { useSuspenseQuery } from '@suspensive/react-query';
 import { useIsFetching } from '@tanstack/react-query';
-import cx from 'classnames';
 import { capitalize } from 'lodash-es';
 import React, { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
 import {
@@ -9,6 +8,7 @@ import {
   useFetcher,
   useSearchParams,
 } from 'react-router-dom';
+import { cn } from 'tailwind-preset';
 import {
   Badge,
   Breadcrumb,
@@ -273,15 +273,9 @@ const ActionDropdown = ({
                 e.preventDefault();
                 onDownloadAction();
               }}
+              disabled={!isScanComplete(scanStatus)}
             >
-              <span
-                className={cx('flex items-center gap-x-2', {
-                  'opacity-60 dark:opacity-30 cursor-default':
-                    !isScanComplete(scanStatus),
-                })}
-              >
-                Download report
-              </span>
+              <span>Download report</span>
             </DropdownItem>
             <DropdownItem
               onClick={(e) => {

deepfence_frontend/apps/dashboard/src/features/onboard/components/ConnectorHeader.tsx

@@ -1,6 +1,5 @@
-import cx from 'classnames';
 import { useLocation } from 'react-router-dom';
-import { twMerge } from 'tailwind-merge';
+import { cn } from 'tailwind-preset';
 import { Breadcrumb, BreadcrumbLink } from 'ui-components';
 
 type ConnectorHeaderProps = {
@@ -40,17 +39,15 @@ export const ConnectorHeader = ({
         <Breadcrumb>
           <BreadcrumbLink isLink>
             <span
-              className={twMerge(
-                cx(
-                  'w-6 h-6 rounded-full dark:bg-df-gray-200 text-p7 flex items-center justify-center',
-                  'dark:bg-gray-700 dark:text-df-gray-100 cursor-default',
-                ),
+              className={cn(
+                'w-6 h-6 rounded-full dark:bg-df-gray-200 text-p7 flex items-center justify-center',
+                'dark:bg-gray-700 dark:text-df-gray-100 cursor-default',
               )}
             >
               1
             </span>
             <span
-              className={cx('flex items-center ml-2 cursor-default', {
+              className={cn('flex items-center ml-2 cursor-default', {
                 ['dark:text-text-text-and-icon']: !isAddConnectorRoutePath(),
               })}
             >
@@ -59,18 +56,16 @@ export const ConnectorHeader = ({
           </BreadcrumbLink>
           <BreadcrumbLink className="cursor-auto">
             <span
-              className={twMerge(
-                cx(
-                  'w-6 h-6 rounded-full dark:bg-df-gray-200 text-p7 flex items-center justify-center',
-                  'dark:bg-gray-700 dark:text-df-gray-100 cursor-default',
-                ),
+              className={cn(
+                'w-6 h-6 rounded-full dark:bg-df-gray-200 text-p7 flex items-center justify-center',
+                'dark:bg-gray-700 dark:text-df-gray-100 cursor-default',
               )}
             >
               2
             </span>
 
             <span
-              className={cx('cursor-auto ml-2', {
+              className={cn('cursor-auto ml-2', {
                 ['dark:text-text-link']: isScanRoutePath(),
               })}
             >
@@ -79,17 +74,15 @@ export const ConnectorHeader = ({
           </BreadcrumbLink>
           <BreadcrumbLink>
             <span
-              className={twMerge(
-                cx(
-                  'w-6 h-6 rounded-full dark:bg-df-gray-200 text-p7 flex items-center justify-center',
-                  'dark:bg-gray-700 dark:text-df-gray-100 cursor-default',
-                ),
+              className={cn(
+                'w-6 h-6 rounded-full dark:bg-df-gray-200 text-p7 flex items-center justify-center',
+                'dark:bg-gray-700 dark:text-df-gray-100 cursor-default',
               )}
             >
               3
             </span>
             <span
-              className={cx('cursor-auto ml-2', {
+              className={cn('cursor-auto ml-2', {
                 ['dark:text-text-link']: isViewScanSummaryRoutePath(),
               })}
             >

deepfence_frontend/apps/dashboard/src/features/onboard/pages/connectors/AddConnectors.tsx

@@ -1,8 +1,8 @@
-import cx from 'classnames';
 import { useRef } from 'react';
 import { useState } from 'react';
 import { useMemo } from 'react';
 import { generatePath } from 'react-router-dom';
+import { cn } from 'tailwind-preset';
 import { Button, Card, Tabs } from 'ui-components';
 
 import { ACCOUNT_CONNECTOR } from '@/components/hosts-connector/NoConnectors';
@@ -42,7 +42,7 @@ const CardConnect = ({ label, path, icon }: CardConnectProps) => {
   return (
     <div className="px-6">
       <button
-        className={cx(
+        className={cn(
           'text-sm text-left flex items-center w-full gap-5',
           'border-b dark:border-bg-grid-border border-gray-200 h-[72px]  dark:hover:text-text-input-value dark:bg-transparent',
         )}

deepfence_frontend/apps/dashboard/src/features/settings/pages/ConnectorInstructions.tsx

@@ -1,6 +1,6 @@
-import cx from 'classnames';
 import { startCase } from 'lodash-es';
 import { generatePath, useParams } from 'react-router-dom';
+import { cn } from 'tailwind-preset';
 import { Card } from 'ui-components';
 
 import { AWSCloudFormation } from '@/components/clouds-connector/AWSCloudFormation';
@@ -52,7 +52,7 @@ const CardConnect = ({ label, path, icon }: CardConnectProps) => {
   return (
     <div className="px-6">
       <button
-        className={cx(
+        className={cn(
           'text-sm text-left flex items-center w-full gap-5',
           'border-b dark:border-gray-700 border-gray-200 h-[72px] dark:text-gray-300 dark:bg-transparent',
         )}
@@ -103,16 +103,10 @@ const Cloud = () => {
           Connect an AWS, GCP, or Azure cloud account to check for compliance
           misconfigurations.
         </p>
-        <div className="flex flex-col">
+        <div className="flex flex-col dark:text-text-text-and-icon">
           {connectors.map((connector) => {
             return (
-              <div
-                key={connector.label}
-                className={cx(
-                  'hover:bg-[linear-gradient(270deg,_#EBF5FF_-0.07%,_#FFFFFF_100%)]',
-                  'dark:hover:bg-[linear-gradient(270deg,_#1c2431_-0.07%,_#1f2937_100%)]',
-                )}
-              >
+              <div key={connector.label} className="dark:hover:bg-bg-hover-2">
                 <CardConnect {...connector} />
               </div>
             );
@@ -158,16 +152,10 @@ const Host = () => {
           Connect a K8s cluster, Docker container, or Linux host to check for
           vulnerabilities, secrets, malware, and compliance misconfigurations.
         </p>
-        <div className="flex flex-col">
+        <div className="flex flex-col dark:text-text-text-and-icon">
           {connectors.map((connector) => {
             return (
-              <div
-                key={connector.label}
-                className={cx(
-                  'hover:bg-[linear-gradient(270deg,_#EBF5FF_-0.07%,_#FFFFFF_100%)]',
-                  'dark:hover:bg-[linear-gradient(270deg,_#1c2431_-0.07%,_#1f2937_100%)]',
-                )}
-              >
+              <div key={connector.label} className="dark:hover:bg-bg-hover-2">
                 <CardConnect {...connector} />
               </div>
             );

deepfence_frontend/packages/ui-components/package.json

@@ -39,11 +39,9 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",
     "@tanstack/react-table": "^8.9.3",
-    "classnames": "^2.3.2",
     "cva": "npm:class-variance-authority@^0.6.0",
     "lodash-es": "^4.17.21",
     "react-use": "^17.4.0",
-    "tailwind-merge": "^1.13.2",
     "tailwind-preset": "workspace:*"
   },
   "peerDependencies": {