feat: DXDP-5242 | POC: Explore UDS components approach & Custom Variant

Author: grandmaester

src/common/FormFieldWrapper/index.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { FormField, FormFieldProps } from "@/components/ui/form-field"; // Import the FormField component and its props
+import { cn } from "@/utils/helpers/cn"; // Utility function for conditional class names
+
+// Extend FormFieldProps to include additional props for the wrapper component
+interface FormFieldWrapperProps extends FormFieldProps {
+  className?: string; // Optional custom class for the wrapper
+  errorMessage?: string; // Custom error message for the field
+  forceFocusStyle?: boolean; // Flag to force focus styles
+}
+
+// Wrapper component for FormField to add additional functionality or styling
+const FormFieldWrapper: React.FC<FormFieldWrapperProps> = ({
+  className,
+  label,
+  error,
+  errorMessage,
+  helperText,
+  startAdornment,
+  endAdornment,
+  size,
+  variant = "default",
+  forceFocusStyle = false,
+  ...props
+}) => {
+  // Theme overrides for consistent styling
+  const themeOverrides = "theme-universal:rounded-input theme-universal:bg-primary-button-label";
+
+  return (
+    <FormField
+      className={cn(className, themeOverrides)} // Combine custom class with theme overrides
+      label={label}
+      error={error} // Pass error state to FormField
+      helperText={helperText || errorMessage} // Display helper text or custom error message
+      startAdornment={startAdornment}
+      endAdornment={endAdornment}
+      size={size}
+      variant={variant}
+      {...props} // Spread additional props to FormField
+    />
+  );
+};
+
+export default FormFieldWrapper; // Export the wrapper component default FormFieldWrapper; // Export the wrapper component
+

src/components/ui/form-field.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const formFieldVariants = cva(
-  "bg-input aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive theme-default:active:scale-[0.99] relative box-border inline-flex w-full shrink-0 cursor-text items-center justify-center gap-2 overflow-hidden text-sm transition-[color,box-shadow] duration-150 ease-in-out outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "theme-universal:rounded-input bg-input aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive theme-default:active:scale-[0.99] relative box-border inline-flex w-full shrink-0 cursor-text items-center justify-center gap-2 text-sm transition-[color,box-shadow] duration-150 ease-in-out outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -96,7 +96,7 @@ const FormField = React.forwardRef<HTMLInputElement, FormFieldProps>(
               startAdornment && "left-0",
               isLabelFloating && "top-4 text-xs",
               isLabelFloating && size === "sm" && "top-3.5 text-xs",
-              error ? "text-destructive-foreground" : "text-muted-foreground",
+              error ? "text-destructive-foreground theme-universal:text-error" : "text-muted-foreground",
               focused && !error && "text-primary",
             )}
           >
@@ -132,12 +132,7 @@ const FormField = React.forwardRef<HTMLInputElement, FormFieldProps>(
           )}
         </div>
         {helperText && (
-          <p
-            className={cn(
-              "mt-1.5 text-xs",
-              error ? "text-destructive-foreground" : "text-muted-foreground",
-            )}
-          >
+          <p className={cn("mt-1.5 text-xs", error ? "theme-universal:text-error" : "text-muted-foreground")}>
             {helperText}
           </p>
         )}

src/components/ui/label.tsx

@@ -12,7 +12,7 @@ function Label({
     <LabelPrimitive.Root
       data-slot="label"
       className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        "theme-universal:rounded-input flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
         className,
       )}
       {...props}

src/index.css

@@ -80,6 +80,16 @@
   --max-w-md: 28rem;
 }
 
+
+
+/* Define the custom variant using @custom-variant */
+@custom-variant theme-universal {
+  &.theme-universal {
+    @slot;
+  }
+}
+  
+
 :root {
   /* Colors */
   --ul-theme-color-primary-button: #635dff;

src/screens/login-id/components/IdentifierForm.tsx

@@ -4,10 +4,12 @@ import Button from "@/common/Button";
 import Alert from "@/common/Alert";
 import CaptchaBox from "@/common/CaptchaBox";
 import FormField from "@/common/FormField";
+// import { FormField as UDSFormField } from "@/components/ui/form-field";
 import { getFieldError } from "@/utils/helpers/errorUtils";
 import { rebaseLinkToCurrentOrigin } from "@/utils/helpers/urlUtils";
 import { getIdentifierDetails } from "@/utils/helpers/identifierUtils";
 import { useLoginIdManager } from "../hooks/useLoginIdManager";
+import InputWrapper from "@/common/FormFieldWrapper";
 
 interface LoginIdFormData {
   identifier: string;
@@ -60,6 +62,13 @@ const IdentifierForm: React.FC = () => {
     originalResetPasswordLink,
   );
 
+  const formError =
+    formErrors.identifier?.message ||
+    getFieldError("identifier", errors) ||
+    getFieldError("email", errors) ||
+    getFieldError("phone", errors) ||
+    getFieldError("username", errors);
+
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
       {/* General alerts at the top */}
@@ -71,6 +80,31 @@ const IdentifierForm: React.FC = () => {
         </div>
       )}
 
+      <InputWrapper
+        className="mb-4"
+        label={identifierLabel}
+        id="identifier-login-id"
+        type={identifierType}
+        autoComplete={identifierAutoComplete}
+        autoFocus
+        {...register("identifier", {
+          required: "This field is required",
+          maxLength: {
+            value: 100,
+            message: "Maximum 100 characters allowed",
+          },
+        })}
+        error={!!formError}
+        errorMessage={formErrors.identifier?.message ||
+          getFieldError("identifier", errors) ||
+          getFieldError("email", errors) ||
+          getFieldError("phone", errors) ||
+          getFieldError("username", errors)}
+        variant="default"
+      />
+
+      {/* <UDSFormField label={identifierLabel} variant="default" error={true} /> */}
+
       <FormField
         className="mb-4"
         labelProps={{

src/screens/login-id/index.tsx

@@ -30,7 +30,7 @@ const LoginIdScreen: React.FC = () => {
 
   return (
     <div
-      className={`min-h-screen flex items-center p-5`}
+      className={`min-h-screen flex items-center p-5 theme-universal`}
       style={{ justifyContent: pageLayout }}
     >
       <Card className="w-full max-w-sm">