chore: bump version to 2.20.1 in package.json and refactor layout and… (#404)

* chore: bump version to 2.20.1 in package.json and refactor layout and form components

- Incremented application version from 2.20.0 to 2.20.1 in package.json.
- Refactored RootLayout to optimize asynchronous calls and introduced getRootClassName function for better class management.
- Updated font handling in getFontsClassName function to streamline class generation.
- Enhanced various authentication form components by replacing Input with EmailInput and PasswordInput for improved consistency and usability.
- Adjusted layout styles in AuthLayoutShell and other components for better responsiveness.

* fix: improve content rendering fallback logic in ContentRenderer component

- Enhanced the ContentRenderer function to explicitly check for the presence of a renderer before returning content.
- Added a fallback mechanism to return raw content as React nodes when no renderer is found, improving robustness and user experience.

packages/features/auth/src/components/password-sign-up-form.tsx

@@ -3,7 +3,6 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { ArrowRight } from 'lucide-react';
 import { useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
 
 import { Button } from '@kit/ui/button';
 import {
@@ -12,14 +11,14 @@ import {
   FormDescription,
   FormField,
   FormItem,
-  FormLabel,
   FormMessage,
 } from '@kit/ui/form';
 import { If } from '@kit/ui/if';
-import { Input } from '@kit/ui/input';
 import { Trans } from '@kit/ui/trans';
 
 import { PasswordSignUpSchema } from '../schemas/password-sign-up.schema';
+import { EmailInput } from './email-input';
+import { PasswordInput } from './password-input';
 import { TermsAndConditionsFormField } from './terms-and-conditions-form-field';
 
 interface PasswordSignUpFormProps {
@@ -43,8 +42,6 @@ export function PasswordSignUpForm({
   onSubmit,
   loading,
 }: PasswordSignUpFormProps) {
-  const { t } = useTranslation();
-
   const form = useForm({
     resolver: zodResolver(PasswordSignUpSchema),
     defaultValues: {
@@ -60,82 +57,56 @@ export function PasswordSignUpForm({
         className={'flex w-full flex-col gap-y-4'}
         onSubmit={form.handleSubmit(onSubmit)}
       >
-        <FormField
-          control={form.control}
-          name={'email'}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <Trans i18nKey={'common:emailAddress'} />
-              </FormLabel>
+        <div className={'flex flex-col space-y-2.5'}>
+          <FormField
+            control={form.control}
+            name={'email'}
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <EmailInput data-test={'email-input'} {...field} />
+                </FormControl>
 
-              <FormControl>
-                <Input
-                  data-test={'email-input'}
-                  required
-                  type="email"
-                  placeholder={t('emailPlaceholder')}
-                  {...field}
-                />
-              </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
 
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+          <FormField
+            control={form.control}
+            name={'password'}
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <PasswordInput {...field} />
+                </FormControl>
 
-        <FormField
-          control={form.control}
-          name={'password'}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <Trans i18nKey={'common:password'} />
-              </FormLabel>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
 
-              <FormControl>
-                <Input
-                  required
-                  data-test={'password-input'}
-                  type="password"
-                  autoComplete="new-password"
-                  placeholder={''}
-                  {...field}
-                />
-              </FormControl>
+          <FormField
+            control={form.control}
+            name={'repeatPassword'}
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <PasswordInput
+                    data-test={'repeat-password-input'}
+                    {...field}
+                  />
+                </FormControl>
 
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+                <FormDescription>
+                  <Trans i18nKey={'auth:repeatPasswordDescription'} />
+                </FormDescription>
 
-        <FormField
-          control={form.control}
-          name={'repeatPassword'}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <Trans i18nKey={'auth:repeatPassword'} />
-              </FormLabel>
-
-              <FormControl>
-                <Input
-                  required
-                  data-test={'repeat-password-input'}
-                  type="password"
-                  placeholder={''}
-                  {...field}
-                />
-              </FormControl>
-
-              <FormMessage />
-
-              <FormDescription className={'pb-2 text-xs'}>
-                <Trans i18nKey={'auth:repeatPasswordHint'} />
-              </FormDescription>
-            </FormItem>
-          )}
-        />
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
 
         <If condition={displayTermsCheckbox}>
           <TermsAndConditionsFormField />