Add time field input

src/components/form/fields/ForcedValueField.tsx

@@ -36,6 +36,7 @@ export function ForcedValueField({
   const descriptionId = `forced-value-${name}-description`;
 
   useEffect(() => {
+    console.log('setting value', name, value);
     setValue(name, value);
   }, [name, value, setValue]);
 

src/components/form/fields/HiddenField.tsx

@@ -1,9 +1,22 @@
 import { useFormContext } from 'react-hook-form';
+import { useEffect } from 'react';
 import { FormField } from '../../ui/form';
 import { Field } from '@/src/flows/types';
 
 export function HiddenField(props: Field) {
-  const { control } = useFormContext();
+  const { control, setValue } = useFormContext();
+
+  // If the field has a forced/computed value (const === default), set it
+  // If not it'll get the value from the form state
+  useEffect(() => {
+    if (
+      props.const !== undefined &&
+      props.const === props.default &&
+      props.name
+    ) {
+      setValue(props.name, props.const);
+    }
+  }, [props.const, props.default, props.name, setValue]);
 
   return (
     <FormField

src/components/form/fields/TimeField.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+
+import { useFormFields, useTransformer } from '@/src/context';
+import { Components, JSFField, $TSFixMe } from '@/src/types/remoteFlows';
+import { useFormContext } from 'react-hook-form';
+import { FormField } from '../../ui/form';
+import { TimeFieldDataProps } from '@/src/types/fields';
+
+export type TimeFieldProps = JSFField & {
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  component?: Components['time'];
+};
+
+export function TimeField({
+  name,
+  description,
+  label,
+  type,
+  onChange,
+  component,
+  maxLength,
+  ...rest
+}: TimeFieldProps) {
+  const { components } = useFormFields();
+  const { control } = useFormContext();
+  const transformHtml = useTransformer();
+
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field, fieldState }) => {
+        const Component = component || components?.time;
+
+        if (!Component) {
+          throw new Error(`Time component not found for field ${name}`);
+        }
+
+        const customTimeFieldProps: TimeFieldDataProps = {
+          name,
+          description,
+          label,
+          type,
+          onChange,
+          maxLength,
+          transformHtml,
+          ...rest,
+        };
+        return (
+          <Component
+            field={{
+              ...field,
+              onChange: (value: $TSFixMe) => {
+                field.onChange(value);
+                onChange?.(value);
+              },
+            }}
+            fieldState={fieldState}
+            fieldData={customTimeFieldProps}
+          />
+        );
+      }}
+    />
+  );
+}

src/components/form/fields/baseFields.tsx

@@ -13,6 +13,7 @@ import { WorkScheduleField } from './WorkScheduleField';
 import { MultiSelectField } from './MultiSelectField';
 import { MoneyField } from './MoneyField';
 import { TelField } from './TelField';
+import { TimeField } from './TimeField';
 import { SupportedTypes } from './types';
 import { $TSFixMe } from '@/src/types/remoteFlows';
 
@@ -34,5 +35,6 @@ export const baseFields: Record<
   countries: CountryField,
   hidden: HiddenField,
   tel: TelField,
+  time: TimeField,
   'work-schedule': WorkScheduleField,
 };

src/components/form/fields/default/TimeFieldDefault.tsx

@@ -0,0 +1,42 @@
+import { FormDescription, FormMessage } from '@/src/components/ui/form';
+import { FormControl, FormItem, FormLabel } from '@/src/components/ui/form';
+import { Input } from '@/src/components/ui/input';
+import { TimeFieldComponentProps } from '@/src/types/fields';
+
+export function TimeFieldDefault({
+  field,
+  fieldState,
+  fieldData,
+}: TimeFieldComponentProps) {
+  const { name, label, description } = fieldData;
+  return (
+    <FormItem
+      data-field={name}
+      className={`RemoteFlows__TimeField__Item__${name}`}
+    >
+      {label && (
+        <FormLabel className='RemoteFlows__TimeField__Label'>{label}</FormLabel>
+      )}
+      <FormControl>
+        <Input
+          {...field}
+          type='time'
+          value={field.value ?? ''}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+            field.onChange(event);
+          }}
+          className='RemoteFlows__TimeField__Input'
+          placeholder={label}
+        />
+      </FormControl>
+      {description && (
+        <FormDescription className='RemoteFlows__TimeField__Description'>
+          {description}
+        </FormDescription>
+      )}
+      {fieldState.error && (
+        <FormMessage className='RemoteFlows__TimeField__Error' />
+      )}
+    </FormItem>
+  );
+}

src/components/form/fields/types.ts

@@ -13,6 +13,7 @@ export type BaseTypes =
   | 'countries'
   | 'hidden'
   | 'work-schedule'
-  | 'tel';
+  | 'tel'
+  | 'time';
 
 export type SupportedTypes = BaseTypes | 'fieldset' | 'fieldset-flat';

src/components/form/validationResolver.ts

@@ -73,8 +73,11 @@ export const useJsonSchemasValidationFormResolver = <
   handleValidation: (data: T) => Promise<ValidationResult | null>,
 ): Resolver<T> => {
   return async (data: T) => {
+    console.log('data', data);
     const result = await handleValidation(data);
 
+    console.log('result', result);
+
     // Handle null case - return no errors
     if (!result) {
       return {

src/default-components.ts

@@ -19,6 +19,7 @@ import { WorkScheduleFieldDefault } from '@/src/components/form/fields/default/W
 import { ButtonDefault } from '@/src/components/form/fields/default/ButtonDefault';
 import { PDFPreviewDefault } from '@/src/components/shared/pdf-preview/PDFPreviewDefault';
 import { TelFieldDefault } from '@/src/components/form/fields/default/TelFieldDefault';
+import { TimeFieldDefault } from '@/src/components/form/fields/default/TimeFieldDefault';
 
 /**
  * Default field components for RemoteFlows.
@@ -48,4 +49,5 @@ export const defaultComponents: Components = {
   'work-schedule': WorkScheduleFieldDefault,
   pdfViewer: PDFPreviewDefault,
   tel: TelFieldDefault,
+  time: TimeFieldDefault,
 };

src/types/fields.ts

@@ -212,3 +212,11 @@ export type RadioGroupComponentProps = Omit<
 > & {
   fieldData: RadioGroupDataProps;
 };
+
+export type TimeFieldDataProps = FieldDataProps & {
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+export type TimeFieldComponentProps = FieldComponentProps & {
+  fieldData: TimeFieldDataProps;
+};

src/types/remoteFlows.ts

@@ -14,6 +14,7 @@ import {
   TextFieldComponentProps,
   WorkScheduleComponentProps,
   TelFieldComponentProps,
+  TimeFieldComponentProps,
   RadioGroupComponentProps,
 } from '@/src/types/fields';
 
@@ -138,6 +139,7 @@ type FieldComponentTypes = Exclude<
   | 'money'
   | 'date'
   | 'tel'
+  | 'time'
   | 'radio'
 >;
 
@@ -157,6 +159,7 @@ export type Components = {
   'work-schedule'?: React.ComponentType<WorkScheduleComponentProps>;
   pdfViewer?: React.ComponentType<PDFPreviewComponentProps>;
   tel?: React.ComponentType<TelFieldComponentProps>;
+  time?: React.ComponentType<TimeFieldComponentProps>;
   radio?: React.ComponentType<RadioGroupComponentProps>;
 };