feat: add destructive to button and required to label

guildxyz · Jul 24, 2024 · a993155 · a993155
1 parent 30f4c24
commit a993155
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 11 deletions.
diff --git a/src/app/(marketing)/create-profile/_components/StartProfile.tsx b/src/app/(marketing)/create-profile/_components/StartProfile.tsx
@@ -20,8 +20,22 @@ import FarcasterImage from "/src/static/socialIcons/farcaster.svg"
 import { OnboardingChain } from "../types"
 
 const formSchema = z.object({
-  name: z.string(),
-  handle: z.string(),
+  name: z.string().max(100, { message: "Name cannot exceed 100 characters" }),
+  username: z
+    .string()
+    .min(1, { message: "Handle is required" })
+    .max(100, { message: "Handle cannot exceed 100 characters" })
+    .superRefine((value, ctx) => {
+      const pattern = /^[\w\-.]+$/
+      const isValid = pattern.test(value)
+      if (!isValid) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message:
+            "Handle must only contain either alphanumeric, hyphen, underscore or dot characters",
+        })
+      }
+    }),
 })
 
 // TODO: use ConnectFarcasterButton
@@ -30,9 +44,11 @@ export const StartProfile: OnboardingChain = () => {
     resolver: zodResolver(formSchema),
     defaultValues: {
       name: "",
-      handle: "",
+      username: "",
     },
+    mode: "onTouched",
   })
+
   function onSubmit(values: z.infer<typeof formSchema>) {
     console.log(values)
   }
@@ -67,12 +83,12 @@ export const StartProfile: OnboardingChain = () => {
             />
             <FormField
               control={form.control}
-              name="handle"
+              name="username"
               render={({ field }) => (
                 <FormItem className="pb-2">
-                  <FormLabel>Handle</FormLabel>
+                  <FormLabel aria-required="true">Handle</FormLabel>
                   <FormControl>
-                    <Input placeholder="" {...field} />
+                    <Input placeholder="" required {...field} />
                   </FormControl>
                   <FormErrorMessage />
                 </FormItem>
@@ -83,6 +99,7 @@ export const StartProfile: OnboardingChain = () => {
               type="submit"
               colorScheme="success"
               onClick={() => setStartMethod(undefined)}
+              disabled={!form.formState.isValid}
             >
               Start my profile
             </Button>

diff --git a/src/v2/components/ui/Form.tsx b/src/v2/components/ui/Form.tsx
@@ -90,16 +90,21 @@ FormItem.displayName = "FormItem"
 const FormLabel = forwardRef<
   ElementRef<typeof LabelPrimitive.Root>,
   ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
+>(({ className, children, ...props }, ref) => {
   const { formItemId } = useFormField()
 
   return (
     <Label
       ref={ref}
-      className={cn("text-md", className)}
+      className={cn("group text-md", className)}
       htmlFor={formItemId}
       {...props}
-    />
+    >
+      {children}
+      <span className="ml-1 hidden select-none font-bold text-destructive-subtle-foreground group-aria-required:inline-block">
+        *
+      </span>
+    </Label>
   )
 })
 FormLabel.displayName = "FormLabel"
@@ -150,7 +155,7 @@ const FormErrorMessage = forwardRef<
   const [debounceBody] = useDebounceValue(body, 200)
 
   return (
-    <Collapsible open={!!error}>
+    <Collapsible open={!!body}>
       <CollapsibleContent>
         <p
           ref={ref}

diff --git a/src/v2/components/ui/Input.tsx b/src/v2/components/ui/Input.tsx
@@ -3,7 +3,7 @@ import { VariantProps, cva } from "class-variance-authority"
 import { InputHTMLAttributes, forwardRef } from "react"
 
 const inputVariants = cva(
-  "flex w-full border border-input px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+  "flex w-full border border-input px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:bg-destructive/10 aria-[invalid=true]:border-destructive-subtle aria-[invalid=true]:placeholder:text-destructive-subtle/60",
   {
     variants: {
       variant: {