feat: change direction of radio field

apps/remix/app/components/general/document-signing/document-signing-radio-field.tsx

@@ -14,6 +14,7 @@ import type {
   TRemovedSignedFieldWithTokenMutationSchema,
   TSignFieldWithTokenMutationSchema,
 } from '@documenso/trpc/server/field-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
 import { Label } from '@documenso/ui/primitives/label';
 import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -156,7 +157,12 @@ export const DocumentSigningRadioField = ({
       {!field.inserted && (
         <RadioGroup
           onValueChange={(value) => handleSelectItem(value)}
-          className="z-10 my-0.5 gap-y-1"
+          className={cn(
+            'z-10 my-0.5 gap-1',
+            parsedFieldMeta.direction === 'horizontal'
+              ? 'flex flex-row flex-wrap'
+              : 'flex flex-col gap-y-1',
+          )}
         >
           {values?.map((item, index) => (
             <div key={index} className="flex items-center">
@@ -181,7 +187,14 @@ export const DocumentSigningRadioField = ({
       )}
 
       {field.inserted && (
-        <RadioGroup className="my-0.5 gap-y-1">
+        <RadioGroup
+          className={cn(
+            'my-0.5 gap-1',
+            parsedFieldMeta.direction === 'horizontal'
+              ? 'flex flex-row flex-wrap'
+              : 'flex flex-col gap-y-1',
+          )}
+        >
           {values?.map((item, index) => (
             <div key={index} className="flex items-center">
               <RadioGroupItem

packages/lib/types/field-meta.ts

@@ -79,6 +79,7 @@ export const ZRadioFieldMeta = ZBaseFieldMeta.extend({
       }),
     )
     .optional(),
+  direction: z.enum(['vertical', 'horizontal']).optional().default('vertical'),
 });
 
 export type TRadioFieldMeta = z.infer<typeof ZRadioFieldMeta>;

packages/ui/primitives/document-flow/field-content.tsx

@@ -108,8 +108,15 @@ export const FieldContent = ({ field, documentMeta }: FieldIconProps) => {
     field.fieldMeta.values.length > 0
   ) {
     return (
-      <div className="flex flex-col gap-y-2 py-0.5">
-        <RadioGroup className="gap-y-1">
+      <div className="py-0.5">
+        <RadioGroup
+          className={cn(
+            'gap-1',
+            field.fieldMeta.direction === 'horizontal'
+              ? 'flex flex-row flex-wrap'
+              : 'flex flex-col gap-y-1',
+          )}
+        >
           {field.fieldMeta.values.map((item, index) => (
             <div key={index} className="flex items-center">
               <RadioGroupItem

packages/ui/primitives/document-flow/field-item-advanced-settings.tsx

@@ -120,6 +120,7 @@ const getDefaultState = (fieldType: FieldType): FieldMeta => {
         values: [],
         required: false,
         readOnly: false,
+        direction: 'vertical',
       };
     case FieldType.CHECKBOX:
       return {

packages/ui/primitives/document-flow/field-items-advanced-settings/radio-field.tsx

@@ -11,6 +11,13 @@ import { Button } from '@documenso/ui/primitives/button';
 import { Checkbox } from '@documenso/ui/primitives/checkbox';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
 import { Switch } from '@documenso/ui/primitives/switch';
 
 export type RadioFieldAdvancedSettingsProps = {
@@ -35,6 +42,9 @@ export const RadioFieldAdvancedSettings = ({
   );
   const [readOnly, setReadOnly] = useState(fieldState.readOnly ?? false);
   const [required, setRequired] = useState(fieldState.required ?? false);
+  const [direction, setDirection] = useState<'vertical' | 'horizontal'>(
+    fieldState.direction ?? 'vertical',
+  );
 
   const addValue = () => {
     const newId = values.length > 0 ? Math.max(...values.map((val) => val.id)) + 1 : 1;
@@ -69,10 +79,19 @@ export const RadioFieldAdvancedSettings = ({
   const handleToggleChange = (field: keyof RadioFieldMeta, value: string | boolean) => {
     const readOnly = field === 'readOnly' ? Boolean(value) : Boolean(fieldState.readOnly);
     const required = field === 'required' ? Boolean(value) : Boolean(fieldState.required);
+    const currentDirection =
+      field === 'direction' && String(value) === 'horizontal' ? 'horizontal' : 'vertical';
     setReadOnly(readOnly);
     setRequired(required);
+    setDirection(currentDirection);
 
-    const errors = validateRadioField(String(value), { readOnly, required, values, type: 'radio' });
+    const errors = validateRadioField(String(value), {
+      readOnly,
+      required,
+      values,
+      type: 'radio',
+      direction: currentDirection,
+    });
     handleErrors(errors);
 
     handleFieldChange(field, value);
@@ -97,7 +116,13 @@ export const RadioFieldAdvancedSettings = ({
   }, [fieldState.values]);
 
   useEffect(() => {
-    const errors = validateRadioField(undefined, { readOnly, required, values, type: 'radio' });
+    const errors = validateRadioField(undefined, {
+      readOnly,
+      required,
+      values,
+      type: 'radio',
+      direction,
+    });
     handleErrors(errors);
   }, [values]);
 
@@ -116,6 +141,27 @@ export const RadioFieldAdvancedSettings = ({
             onChange={(e) => handleFieldChange('label', e.target.value)}
           />
         </div>
+        <div>
+          <Label>
+            <Trans>Direction</Trans>
+          </Label>
+          <Select
+            value={fieldState.direction ?? 'vertical'}
+            onValueChange={(val) => handleToggleChange('direction', val)}
+          >
+            <SelectTrigger className="text-muted-foreground bg-background mt-2 w-full">
+              <SelectValue placeholder={_(msg`Select direction`)} />
+            </SelectTrigger>
+            <SelectContent position="popper">
+              <SelectItem value="vertical">
+                <Trans>Vertical</Trans>
+              </SelectItem>
+              <SelectItem value="horizontal">
+                <Trans>Horizontal</Trans>
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
         <div className="flex flex-row items-center gap-2">
           <Switch
             className="bg-background"