Merge pull request #810 from deepfence/ui-v2-use-cva-for-textinput

(V2) Use cva for textinput

deepfence_frontend/.vscode/settings.json

@@ -4,5 +4,8 @@
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "typescript.preferences.importModuleSpecifier": "non-relative"
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ]
 }

deepfence_frontend/packages/ui-components/package.json

@@ -39,6 +39,7 @@
     "@tanstack/react-table": "^8.5.13",
     "ariakit": "2.0.0-next.41",
     "classnames": "^2.3.2",
+    "cva": "npm:class-variance-authority@^0.4.0",
     "lodash-es": "^4.17.21",
     "tailwind-merge": "^1.6.0",
     "tailwindcss-radix": "^2.6.0"

deepfence_frontend/packages/ui-components/src/components/input/HelperText.tsx

@@ -1,34 +1,30 @@
-import cx from 'classnames';
+import { cva, VariantProps } from 'cva';
 import { FC } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-export type ColorType = 'default' | 'error' | 'success';
+import { ObjectWithNonNullableValues } from '@/types/utils';
 
-type Props = {
+const helperTextClasses = cva('leading-tight text-sm fornt-normal', {
+  variants: {
+    color: {
+      default: 'text-gray-500 dark:text-gray-400',
+      error: 'text-red-600 dark:text-red-600',
+      success: 'text-green-600 dark:text-green-600',
+    },
+  },
+  defaultVariants: {
+    color: 'default',
+  },
+});
+
+interface Props
+  extends ObjectWithNonNullableValues<VariantProps<typeof helperTextClasses>> {
   text: string;
-  color: ColorType;
   className?: string;
-};
-
-export const classes = {
-  color: {
-    default: 'text-gray-500 dark:text-gray-400',
-    error: 'text-red-600 dark:text-red-600',
-    success: 'text-green-600 dark:text-green-600',
-  },
-};
+}
 
 export const HelperText: FC<Props> = ({ text, color, className }) => {
-  return (
-    <p
-      className={twMerge(
-        cx('leading-tight text-sm fornt-normal', `${classes.color[color]}`),
-        className,
-      )}
-    >
-      {text}
-    </p>
-  );
+  return <p className={twMerge(helperTextClasses({ color }), className)}>{text}</p>;
 };
 
 export default HelperText;