feat: Support disabled fields (#18)

* feat: Support disabled fields

* fix: Lint error

Author: ganlhi

packages/react-forms/src/lib/error-helper/error-helper.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { Helper } from '@heetch/flamingo-react';
 import styles from './error-helper.module.scss';
 

packages/react-forms/src/lib/form-field-boolean-renderer/form-field-boolean-renderer.tsx

@@ -29,6 +29,7 @@ export function FormFieldBooleanRenderer({
           checked: fieldProps.value,
           helper: fieldState?.error ? fieldState.error.message : field.helper,
           invalid: !!fieldState?.error,
+          disabled: field.disabled,
         };
 
         return field.format === 'toggle' ? (

packages/react-forms/src/lib/form-field-date-renderer/form-field-date-renderer.tsx

@@ -51,6 +51,7 @@ export function FormFieldDateRenderer({
           value: fieldProps.value !== undefined ? fieldProps.value : '',
           placeholder: placeholder || '',
           invalid: !!fieldState?.error,
+          disabled: field.disabled,
         };
 
         const helper = fieldState?.error ? undefined : field.helper;

packages/react-forms/src/lib/form-field-file-renderer/form-field-file-renderer.stories.tsx

@@ -94,3 +94,11 @@ Validation.args = {
     ],
   },
 };
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  field: {
+    ...base,
+    disabled: true,
+  },
+};

packages/react-forms/src/lib/form-field-file-renderer/form-field-file-renderer.tsx

@@ -48,7 +48,7 @@ export function FormFieldFileRenderer({
           ? (fieldProps.value as File[])
           : undefined;
 
-        const showAddButton = field.multiple || (files || []).length < 1;
+        const showAddButton = !field.disabled && (field.multiple || (files || []).length < 1);
 
         const deleteFile = (file: File) => {
           const remainingFiles = files?.filter((f) => f !== file) || [];
@@ -97,6 +97,7 @@ export function FormFieldFileRenderer({
                   accept={field.accepts}
                   onChange={(e) => addFiles(e.target.files)}
                   className={classNames.field.file.input}
+                  disabled={field.disabled}
                 />
                 {showAddButton && (
                   <Button

packages/react-forms/src/lib/form-field-number-renderer/form-field-number-renderer.tsx

@@ -101,6 +101,7 @@ function NumberFieldRenderer({
     min,
     max,
     className: classNames.field.number,
+    disabled: field.disabled,
   };
 
   return <InputField {...props} />;

packages/react-forms/src/lib/form-field-string-renderer/form-field-string-renderer.tsx

@@ -37,6 +37,7 @@ export function FormFieldStringRenderer({
           placeholder,
           helper: fieldState?.error ? fieldState.error.message : field.helper,
           invalid: !!fieldState?.error,
+          disabled: field.disabled,
         };
 
         switch (field.format) {

packages/react-forms/src/lib/form-renderer/form-renderer.stories.tsx

@@ -312,3 +312,17 @@ Autofill.play = async () => {
     }
   );
 };
+
+
+export const DisabledFields = Template.bind({});
+DisabledFields.args = {
+  fields: fields.map(f => ({...f, disabled: true})) as FormField[],
+  values: {
+    name: 'Al Capone',
+    email: '[email protected]',
+    country: 'fr',
+    notifications: true,
+    'notifications-delay': 42,
+    birthdate: new Date('1899-01-17'),
+  },
+};

packages/react-forms/src/types/fields.ts

@@ -28,6 +28,7 @@ type FormField_<T extends FormFieldType, K extends string> = {
   label: string;
   placeholder?: string;
   helper?: string;
+  disabled?: boolean;
 };
 
 export type FormFieldBoolean<K extends string = string> = FormField_<