Merge pull request #60 from DouglasNeuroInformatics/dev

fix some styling issues

Author: joshunrau

src/components/Form/ErrorMessage.tsx

@@ -6,7 +6,7 @@ import { cn } from '@/utils';
 
 export const ErrorMessage: React.FC<{ className?: string; error?: null | string[] }> = ({ className, error }) => {
   return error ? (
-    <div className="space-y-1.5">
+    <div className="flex flex-col gap-1.5">
       {error.map((message) => (
         <div className={cn('text-destructive flex w-full items-center text-sm font-medium', className)} key={message}>
           <CircleAlertIcon className="mr-1" style={{ strokeWidth: '2px' }} />

src/components/Form/Form.stories.tsx

@@ -302,6 +302,9 @@ const ungroupedContent = {
 } as const;
 
 export default {
+  args: {
+    onBeforeSubmit: null
+  },
   component: Form,
   decorators: [
     (Story) => (

src/components/Form/Form.tsx

@@ -17,6 +17,7 @@ import { cn } from '@/utils';
 
 import { Button } from '../Button';
 import { Heading } from '../Heading';
+import { Separator } from '../Separator';
 import { ErrorMessage } from './ErrorMessage';
 import { FieldsComponent } from './FieldsComponent';
 import { getInitialValues } from './utils';
@@ -38,7 +39,9 @@ type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<T
   fieldsFooter?: React.ReactNode;
   id?: string;
   initialValues?: PartialNullableFormDataType<NoInfer<TData>>;
-  onBeforeSubmit?: (data: NoInfer<TData>) => Promisable<{ errorMessage: string; success: false } | { success: true }>;
+  onBeforeSubmit?:
+    | ((data: NoInfer<TData>) => Promisable<{ errorMessage: string; success: false } | { success: true }>)
+    | null;
   onError?: (error: z.ZodError<NoInfer<TData>>) => void;
   onSubmit: (data: NoInfer<TData>) => Promisable<void>;
   preventResetValuesOnReset?: boolean;
@@ -165,7 +168,7 @@ const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TS
   return (
     <form
       autoComplete="off"
-      className={twMerge('relative w-full', isGrouped ? 'space-y-8 divide-y' : 'space-y-6', className)}
+      className={twMerge('relative flex w-full flex-col', !isGrouped && 'gap-6', className)}
       id={id}
       onBlur={revalidateOnBlur ? revalidate : undefined}
       onSubmit={(event) => void handleSubmit(event)}
@@ -175,26 +178,29 @@ const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TS
       {isGrouped ? (
         content.map((fieldGroup, i) => {
           return (
-            <div className="flex flex-col space-y-6 [&:not(:first-child)]:pt-8" key={i}>
-              <div className="space-y-1">
-                {fieldGroup.title && (
-                  <Heading className="text-base" variant="h4">
-                    {fieldGroup.title}
-                  </Heading>
-                )}
-                {fieldGroup.description && (
-                  <p className="text-muted-foreground text-sm leading-tight italic">{fieldGroup.description}</p>
-                )}
+            <>
+              <div className="flex flex-col gap-6 [&:not(:first-child)]:pt-8" key={i}>
+                <div className="flex flex-col gap-1">
+                  {fieldGroup.title && (
+                    <Heading className="text-base" variant="h4">
+                      {fieldGroup.title}
+                    </Heading>
+                  )}
+                  {fieldGroup.description && (
+                    <p className="text-muted-foreground text-sm leading-tight italic">{fieldGroup.description}</p>
+                  )}
+                </div>
+                <FieldsComponent
+                  errors={errors}
+                  fields={fieldGroup.fields as FormFields<TData>}
+                  readOnly={readOnly}
+                  setErrors={setErrors}
+                  setValues={setValues}
+                  values={values}
+                />
               </div>
-              <FieldsComponent
-                errors={errors}
-                fields={fieldGroup.fields as FormFields<TData>}
-                readOnly={readOnly}
-                setErrors={setErrors}
-                setValues={setValues}
-                values={values}
-              />
-            </div>
+              <Separator className="mt-8" />
+            </>
           );
         })
       ) : (

src/components/Form/NumberRecordField.tsx

@@ -47,11 +47,11 @@ export const NumberRecordField = <T extends NumberRecordFieldValue = NumberRecor
   }
 
   return (
-    <div className="space-y-4">
+    <div className="flex flex-col gap-4">
       <Heading className="font-medium" variant="h5">
         {label}
       </Heading>
-      <div className="space-y-6">
+      <div className="flex flex-col gap-6">
         {Object.keys(items).map((name) => {
           const item = items[name]!;
           return (

src/components/Form/RecordArrayField.tsx

@@ -59,13 +59,13 @@ export const RecordArrayField = memo(function RecordArrayField({
   };
 
   return (
-    <div className="space-y-4">
+    <div className="flex flex-col gap-4">
       <Heading className="font-medium" variant="h5">
         {label}
       </Heading>
-      <div className="space-y-6">
+      <div className="flex flex-col gap-6">
         {arrayValue.map((fields, i) => (
-          <div className="space-y-4" key={i}>
+          <div className="flex flex-col gap-4" key={i}>
             <Label className="font-semibold italic">{label + ' ' + (i + 1)}</Label>
             {Object.keys(fields).map((name) => {
               const field = fieldset[name];

src/components/OneTimePasswordInput/OneTimePasswordInput.tsx

@@ -89,7 +89,7 @@ export const OneTimePasswordInput = ({ className, onComplete, ...props }: OneTim
     <div className={cn('flex gap-2', className)} {...props}>
       {digits.map((_, index) => (
         <input
-          className="w-1/6 rounded-md border border-slate-300 bg-transparent p-2 shadow-xs hover:border-slate-300 focus:border-sky-800 focus:outline-hidden dark:border-slate-600 dark:hover:border-slate-400 dark:focus:border-sky-500"
+          className="w-1/6 rounded-md border border-slate-300 bg-transparent p-2 text-center shadow-xs hover:border-slate-300 focus:border-sky-800 focus:outline-hidden dark:border-slate-600 dark:hover:border-slate-400 dark:focus:border-sky-500"
           key={index}
           maxLength={1}
           ref={inputRefs[index]}

src/hooks/useOnClickOutside/useOnClickOutside.ts

@@ -4,7 +4,7 @@ import { useEventListener } from '../useEventListener';
 
 type Handler = (event: MouseEvent) => void;
 
-export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
+export function useOnClickOutside<T extends HTMLElement | null = HTMLElement>(
   ref: RefObject<T>,
   handler: Handler,
   mouseEvent: 'mousedown' | 'mouseup' = 'mousedown'

src/tailwind/globals.css

@@ -181,6 +181,11 @@
 
     --radius: 0.5rem;
   }
+
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
 }
 
 @layer base {