reuse validation and fix things after review

Author: ankormoreankor

packages/ui/locales/en/views.json

@@ -18,7 +18,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { Icon } from '../icon'
 
 const alertVariants = cva(
-  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+  '[&>svg]:text-foreground relative grid w-full gap-1 rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7',
   {
     variants: {
       variant: {

packages/ui/locales/fr/views.json

@@ -7,7 +7,7 @@ export interface AlertTitleProps extends PropsWithChildren<React.HTMLAttributes<
 }
 
 export const AlertTitle = forwardRef<HTMLHeadingElement, AlertTitleProps>(({ className, children }, ref) => (
-  <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)}>
+  <h5 ref={ref} className={cn('font-medium leading-none tracking-tight', className)}>
     {children}
   </h5>
 ))

packages/ui/src/components/alert/AlertContainer.tsx

@@ -123,7 +123,7 @@ export const ButtonWithOptions = <T extends string>({
                       control={<RadioButton className="mt-px" value={String(option.value)} id={String(option.value)} />}
                       id={String(option.value)}
                       label={option.label}
-                      aria-selected={selectedValue === option.value}
+                      ariaSelected={selectedValue === option.value}
                       description={option?.description}
                     />
                   </DropdownMenu.Item>
@@ -139,7 +139,7 @@ export const ButtonWithOptions = <T extends string>({
                   onClick={() => handleOptionChange(option.value)}
                 >
                   <span className="flex flex-col gap-y-1.5">
-                    <span className="leading-none text-foreground-8">{option.label}</span>
+                    <span className="text-foreground-8 leading-none">{option.label}</span>
                     {option?.description && <span className="text-foreground-4">{option.description}</span>}
                   </span>
                 </DropdownMenu.Item>

packages/ui/src/components/alert/AlertTitle.tsx

@@ -175,17 +175,17 @@ export const GitCommitDialog: FC<GitCommitDialogProps> = ({
                     Commit directly to the
                     <span
                       className="
-                        relative mx-1.5 inline-flex gap-1 px-2.5 text-foreground-8
-                        before:absolute before:-top-1 before:left-0 before:z-[-1] before:h-6 before:w-full before:rounded before:bg-background-8
+                        text-foreground-8 before:bg-background-8 relative mx-1.5 inline-flex gap-1
+                        px-2.5 before:absolute before:-top-1 before:left-0 before:z-[-1] before:h-6 before:w-full before:rounded
                       "
                     >
-                      <Icon className="translate-y-0.5 text-icons-9" name="branch" size={14} />
+                      <Icon className="text-icons-9 translate-y-0.5" name="branch" size={14} />
                       {currentBranch}
                     </span>
                     branch
                   </span>
                 }
-                aria-selected={commitToGitRefValue === CommitToGitRefOption.DIRECTLY}
+                ariaSelected={commitToGitRefValue === CommitToGitRefOption.DIRECTLY}
               />
               <Option
                 control={
@@ -197,7 +197,7 @@ export const GitCommitDialog: FC<GitCommitDialogProps> = ({
                 }
                 id={CommitToGitRefOption.NEW_BRANCH}
                 label="Create a new branch for this commit and start a pull request"
-                aria-selected={commitToGitRefValue === CommitToGitRefOption.NEW_BRANCH}
+                ariaSelected={commitToGitRefValue === CommitToGitRefOption.NEW_BRANCH}
                 description={
                   // TODO: Add correct path
                   <StyledLink to="/">Learn more about pull requests</StyledLink>

packages/ui/src/components/button-with-options.tsx

@@ -12,6 +12,7 @@ interface OptionProps extends HTMLAttributes<HTMLDivElement> {
   description?: string | ReactNode
   disabled?: boolean
   error?: string
+  ariaSelected?: boolean
 }
 
 /**
@@ -24,13 +25,23 @@ interface OptionProps extends HTMLAttributes<HTMLDivElement> {
  *   description="Description for Option 1"
  * />
  */
-export const Option: FC<OptionProps> = ({ control, id, label, description, className, disabled, error, ...props }) => {
+export const Option: FC<OptionProps> = ({
+  control,
+  id,
+  label,
+  description,
+  className,
+  disabled,
+  error,
+  ariaSelected,
+  ...props
+}) => {
   return (
     <div
       className={cn('flex items-start', className)}
       role="option"
       aria-labelledby={`${id}-label`}
-      aria-selected={false}
+      aria-selected={ariaSelected}
       {...props}
     >
       {control}

packages/ui/src/components/git-commit-dialog/git-commit-dialog.tsx

@@ -27,7 +27,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         )}
         <textarea
           className={cn(
-            'placeholder:text-foreground-4 flex min-h-[74px] w-full rounded border bg-input-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:rounded disabled:cursor-not-allowed',
+            'text-foreground-1 placeholder:text-foreground-4 flex min-h-[74px] w-full rounded border bg-input-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:rounded disabled:cursor-not-allowed',
             resizable ? 'resize-y [field-sizing:content] whitespace-pre-wrap [word-break:break-word]' : 'resize-none',
             className,
             error

packages/ui/src/components/option.tsx

@@ -0,0 +1,74 @@
+import { TranslationStore } from '@/views'
+import { z } from 'zod'
+
+export const makeValidationUtils = (t: TranslationStore['t']) => ({
+  required: (name: string): string => t('views:utils.validation.required', `${name} is required`, { name }),
+  invalid: (name: string): string => t('views:utils.validation.invalid', `${name} is invalid`, { name }),
+  minLength: (length: number, name: string): [number, string] => [
+    length,
+    t('views:utils.validation.minLength', `${name} must be at least ${length} characters`, { name, length })
+  ],
+  maxLength: (length: number, name: string): [number, string] => [
+    length,
+    t('views:utils.validation.maxLength', `${name} must be no longer than ${length} characters`, { name, length })
+  ],
+  specialSymbols: (name: string): [RegExp, string] => [
+    /^[a-zA-Z0-9._-\s]+$/,
+    t(
+      'views:utils.validation.specialSymbols',
+      `${name} must contain only letters, numbers, and the characters: - _ .`,
+      { name }
+    )
+  ],
+  noSpaces: (name: string): [(data: string) => boolean, string] => [
+    data => !data.includes(' '),
+    t('views:utils.validation.noSpaces', `${name} cannot contain spaces`, { name })
+  ]
+})
+
+export const makeFloatValidationUtils =
+  (t: TranslationStore['t'], ctx: z.RefinementCtx) =>
+  ({ value: v, path, name }: { value: string | undefined; path: string; name: string }) => {
+    const { required, invalid, maxLength, specialSymbols, noSpaces } = makeValidationUtils(t)
+    const value = v?.trim()
+
+    const addIssue = (message: string) => ctx.addIssue({ code: 'custom', path: [path], message })
+
+    return {
+      requiredFloat: (): void => {
+        if (value) return
+
+        addIssue(required(name))
+      },
+      maxLengthFloat: (length: number): void => {
+        if (!value) return
+        const [maxLen, errorMessage] = maxLength(length, name)
+        if (value.length <= maxLen) return
+
+        addIssue(errorMessage)
+      },
+      specialSymbolsFloat: (): void => {
+        if (!value) return
+        const [regex, errorMessage] = specialSymbols(name)
+        if (regex.test(value)) return
+
+        addIssue(errorMessage)
+      },
+      noSpacesFloat: (): void => {
+        if (!value) return
+        const [checkFn, errorMessage] = noSpaces(name)
+        if (checkFn(value)) return
+
+        addIssue(errorMessage)
+      },
+      urlFloat: (): void => {
+        if (!value) return
+
+        try {
+          new URL(value)
+        } catch (error) {
+          addIssue(invalid(name))
+        }
+      }
+    }
+  }

packages/ui/src/components/textarea.tsx

@@ -1,9 +1,10 @@
-import { useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useForm } from 'react-hook-form'
 
 import { Button, Card, Fieldset, FormWrapper, Input, Message, MessageTheme, StyledLink } from '@/components'
 import { Floating1ColumnLayout, TranslationStore } from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { makeValidationUtils } from '@utils/validation'
 import { z } from 'zod'
 
 import { Agreements } from './components/agreements'
@@ -16,27 +17,49 @@ interface SignInPageProps {
   error?: string
 }
 
-const makeSignInSchema = (t: TranslationStore['t']) =>
-  z.object({
-    email: z.string().trim().nonempty(t('views:signIn.validation.emailNoEmpty', 'Field can’t be blank')),
-    password: z.string().nonempty(t('views:signIn.validation.passwordNoEmpty', 'Password can’t be blank'))
+const makeSignInSchema = (t: TranslationStore['t']) => {
+  const { required } = makeValidationUtils(t)
+
+  return z.object({
+    email: z
+      .string()
+      .trim()
+      .nonempty(required(t('views:signIn.emailTitle'))),
+    password: z.string().nonempty(required(t('views:signIn.passwordTitle')))
   })
+}
 
 export type SignInData = z.infer<ReturnType<typeof makeSignInSchema>>
 
 export function SignInPage({ handleSignIn, useTranslationStore, isLoading, error }: SignInPageProps) {
+  const [serverError, setServerError] = useState<string | null>(null)
+
   const { t } = useTranslationStore()
   const {
     register,
     handleSubmit,
     formState: { errors }
   } = useForm<SignInData>({
+    mode: 'onChange',
     resolver: zodResolver(makeSignInSchema(t))
   })
 
-  const errorMessage = useMemo(() => (error?.includes('Not Found') ? 'Please check your details' : error), [error])
+  const errorMessage = useMemo(
+    () => (error?.includes('Not Found') ? t('views:signIn.checkDetails', 'Please check your details') : error),
+    [error, t]
+  )
+
+  const handleInputChange = async () => {
+    if (!serverError) return
+    setServerError(null)
+  }
+
+  useEffect(() => {
+    if (!error) return
+    setServerError(error)
+  }, [error])
 
-  const hasError = Object.keys(errors).length > 0 || !!error
+  const hasError = Object.keys(errors).length > 0 || !!serverError
 
   return (
     <Floating1ColumnLayout
@@ -65,14 +88,14 @@ export function SignInPage({ handleSignIn, useTranslationStore, isLoading, error
                 label={t('views:signIn.emailTitle', 'Username/Email')}
                 placeholder={t('views:signIn.emailDescription', 'Your email')}
                 size="md"
-                {...register('email')}
+                {...register('email', { onChange: handleInputChange })}
                 error={errors.email?.message?.toString()}
                 autoFocus
               />
               <Input
                 id="password"
                 type="password"
-                {...register('password')}
+                {...register('password', { onChange: handleInputChange })}
                 label={t('views:signIn.passwordTitle', 'Password')}
                 placeholder={t('views:signIn.passwordDescription', 'Password')}
                 size="md"

packages/ui/src/utils/validation.ts

@@ -1,8 +1,10 @@
+import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 
 import { Button, Card, Fieldset, FormWrapper, Input, Message, MessageTheme, StyledLink } from '@/components'
 import { Floating1ColumnLayout, TranslationStore } from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { makeValidationUtils } from '@utils/validation'
 import { z } from 'zod'
 
 import { Agreements } from './components/agreements'
@@ -15,53 +17,60 @@ interface SignUpPageProps {
   error?: string
 }
 
-const makeSignUpSchema = (t: TranslationStore['t']) =>
-  z
+const makeSignUpSchema = (t: TranslationStore['t']) => {
+  const { required, maxLength, minLength, specialSymbols, noSpaces, invalid } = makeValidationUtils(t)
+
+  return z
     .object({
       userId: z
         .string()
         .trim()
-        .nonempty(t('views:signUp.validation.userIDNoEmpty', 'User ID can’t be blank'))
-        .max(100, t('views:signUp.validation.userIDMax', 'User ID must be no longer than 100 characters'))
-        .regex(
-          /^[a-zA-Z0-9._-\s]+$/,
-          t(
-            'views:signUp.validation.userIDRegex',
-            'User ID must contain only letters, numbers, and the characters: - _ .'
-          )
-        )
-        .refine(
-          data => !data.includes(' '),
-          t('views:signUp.validation.userIDNoSpaces', 'User ID cannot contain spaces')
-        ),
+        .nonempty(required(t('views:signUp.userIDPlaceholder')))
+        .max(...maxLength(100, t('views:signUp.userIDPlaceholder')))
+        .regex(...specialSymbols(t('views:signUp.userIDPlaceholder')))
+        .refine(...noSpaces(t('views:signUp.userIDPlaceholder'))),
       email: z
         .string()
-        .email(t('views:signUp.validation.emailNoEmpty', 'Invalid email address'))
-        .max(250, t('views:signUp.validation.emailMax', 'Email must be no longer than 250 characters')),
+        .email(invalid(t('views:signUp.emailLabel', 'Email')))
+        .max(...maxLength(250, t('views:signUp.emailLabel', 'Email'))),
       password: z
         .string()
-        .min(6, t('views:signUp.validation.passwordNoEmpty', 'Password must be at least 6 characters'))
-        .max(128, t('views:signUp.validation.passwordMax', 'Password must be no longer than 128 characters')),
-      confirmPassword: z.string()
+        .min(...minLength(6, t('views:signUp.passwordLabel', 'Password')))
+        .max(...maxLength(128, t('views:signUp.passwordLabel', 'Password'))),
+      confirmPassword: z.string().min(...minLength(6, t('views:signUp.passwordLabel', 'Password')))
     })
     .refine(data => data.password === data.confirmPassword, {
       message: t('views:signUp.validation.passwordsCheck', "Passwords don't match"),
       path: ['confirmPassword']
     })
+}
 
 export type SignUpData = z.infer<ReturnType<typeof makeSignUpSchema>>
 
 export function SignUpPage({ isLoading, handleSignUp, useTranslationStore, error }: SignUpPageProps) {
+  const [serverError, setServerError] = useState<string | null>(null)
+
   const { t } = useTranslationStore()
   const {
     register,
     handleSubmit,
     formState: { errors }
   } = useForm<SignUpData>({
+    mode: 'onChange',
     resolver: zodResolver(makeSignUpSchema(t))
   })
 
-  const hasError = Object.keys(errors).length > 0 || !!error
+  const handleInputChange = async () => {
+    if (!serverError) return
+    setServerError(null)
+  }
+
+  useEffect(() => {
+    if (!error) return
+    setServerError(error)
+  }, [error])
+
+  const hasError = Object.keys(errors).length > 0 || !!serverError
 
   return (
     <Floating1ColumnLayout
@@ -88,7 +97,7 @@ export function SignUpPage({ isLoading, handleSignUp, useTranslationStore, error
               <Input
                 id="userId"
                 type="text"
-                {...register('userId')}
+                {...register('userId', { onChange: handleInputChange })}
                 placeholder={t('views:signUp.userIDPlaceholder', 'User ID')}
                 label={t('views:signUp.userIDLabel', 'User ID')}
                 size="md"
@@ -98,7 +107,7 @@ export function SignUpPage({ isLoading, handleSignUp, useTranslationStore, error
               <Input
                 id="email"
                 type="email"
-                {...register('email')}
+                {...register('email', { onChange: handleInputChange })}
                 placeholder={t('views:signUp.emailPlaceholder', 'Your email')}
                 label={t('views:signUp.emailLabel', 'Email')}
                 size="md"
@@ -110,7 +119,7 @@ export function SignUpPage({ isLoading, handleSignUp, useTranslationStore, error
                 placeholder={t('views:signUp.passwordPlaceholder', 'Password (6+ characters)')}
                 label={t('views:signUp.passwordLabel', 'Password')}
                 size="md"
-                {...register('password')}
+                {...register('password', { onChange: handleInputChange })}
                 error={errors.password?.message?.toString()}
               />
               <Input
@@ -119,7 +128,7 @@ export function SignUpPage({ isLoading, handleSignUp, useTranslationStore, error
                 placeholder={t('views:signUp.confirmPasswordPlaceholder', 'Confirm password')}
                 label={t('views:signUp.confirmPasswordLabel', 'Confirm password')}
                 size="md"
-                {...register('confirmPassword')}
+                {...register('confirmPassword', { onChange: handleInputChange })}
                 error={errors.confirmPassword?.message?.toString()}
               />
             </Fieldset>