refactor(FileInput): fix theme styles + simplify component JSX

themesberg · Jan 11, 2025 · 0d8c822 · 0d8c822
1 parent 095e2c2
commit 0d8c822
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 57 deletions.
diff --git a/packages/ui/src/components/FileInput/FileInput.tsx b/packages/ui/src/components/FileInput/FileInput.tsx
@@ -12,20 +12,6 @@ import type { TextInputColors, TextInputSizes } from "../TextInput";
 import { fileInputTheme } from "./theme";
 
 export interface FileInputTheme {
-  root: FileInputRootTheme;
-  field: FileInputFieldTheme;
-}
-
-export interface FileInputRootTheme {
-  base: string;
-}
-
-export interface FileInputFieldTheme {
-  base: string;
-  input: FileInputFieldInputTheme;
-}
-
-export interface FileInputFieldInputTheme {
   base: string;
   colors: TextInputColors;
   sizes: TextInputSizes;
@@ -53,20 +39,12 @@ export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
 
     return (
       <>
-        <div className={twMerge(theme.root.base, className)}>
-          <div className={theme.field.base}>
-            <input
-              className={twMerge(
-                theme.field.input.base,
-                theme.field.input.colors[color],
-                theme.field.input.sizes[sizing],
-              )}
-              {...props}
-              type="file"
-              ref={ref}
-            />
-          </div>
-        </div>
+        <input
+          ref={ref}
+          type="file"
+          className={twMerge(theme.base, theme.colors[color], theme.sizes[sizing], className)}
+          {...props}
+        />
         {helperText && <HelperText color={color}>{helperText}</HelperText>}
       </>
     );

diff --git a/packages/ui/src/components/FileInput/index.ts b/packages/ui/src/components/FileInput/index.ts
@@ -1,9 +1,3 @@
 export { FileInput } from "./FileInput";
-export type {
-  FileInputFieldInputTheme,
-  FileInputFieldTheme,
-  FileInputProps,
-  FileInputRootTheme,
-  FileInputTheme,
-} from "./FileInput";
+export type { FileInputProps, FileInputTheme } from "./FileInput";
 export { fileInputTheme } from "./theme";
diff --git a/packages/ui/src/components/FileInput/theme.ts b/packages/ui/src/components/FileInput/theme.ts
@@ -2,28 +2,20 @@ import { createTheme } from "../../helpers/create-theme";
 import type { FileInputTheme } from "./FileInput";
 
 export const fileInputTheme: FileInputTheme = createTheme({
-  root: {
-    base: "flex",
+  base: "block w-full cursor-pointer rounded-lg border file:-ms-4 file:me-4 file:cursor-pointer file:border-none file:bg-gray-800 file:py-2.5 file:pe-4 file:ps-8 file:text-sm file:font-medium file:leading-[inherit] file:text-white hover:file:bg-gray-700 focus:outline-none focus:ring-1 dark:file:bg-gray-600 dark:hover:file:bg-gray-500",
+  sizes: {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-lg",
   },
-  field: {
-    base: "relative w-full",
-    input: {
-      base: "block w-full overflow-hidden rounded-lg border disabled:cursor-not-allowed disabled:opacity-50",
-      sizes: {
-        sm: "sm:text-xs",
-        md: "text-sm",
-        lg: "sm:text-base",
-      },
-      colors: {
-        gray: "border-gray-300 bg-gray-50 text-gray-900 focus:border-cyan-500 focus:ring-cyan-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-cyan-500 dark:focus:ring-cyan-500",
-        info: "border-cyan-500 bg-cyan-50 text-cyan-900 placeholder-cyan-700 focus:border-cyan-500 focus:ring-cyan-500 dark:border-cyan-400 dark:bg-cyan-100 dark:focus:border-cyan-500 dark:focus:ring-cyan-500",
-        failure:
-          "border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500",
-        warning:
-          "border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 focus:border-yellow-500 focus:ring-yellow-500 dark:border-yellow-400 dark:bg-yellow-100 dark:focus:border-yellow-500 dark:focus:ring-yellow-500",
-        success:
-          "border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500",
-      },
-    },
+  colors: {
+    gray: "border-gray-300 bg-gray-50 text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500",
+    info: "border-cyan-500 bg-cyan-50 text-cyan-900 placeholder-cyan-700 focus:border-cyan-500 focus:ring-cyan-500 dark:border-cyan-400 dark:bg-cyan-100 dark:focus:border-cyan-500 dark:focus:ring-cyan-500",
+    failure:
+      "border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500",
+    warning:
+      "border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 focus:border-yellow-500 focus:ring-yellow-500 dark:border-yellow-400 dark:bg-yellow-100 dark:focus:border-yellow-500 dark:focus:ring-yellow-500",
+    success:
+      "border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500",
   },
 });