Add Checkbox and CategoryCheckbox options to FormFieldSchemaType and Field interface

CommonUI/src/Components/CategoryCheckbox/Index.tsx

@@ -2,15 +2,16 @@ import React, { FunctionComponent, ReactElement } from 'react';
 import { CategoryCheckboxOption, CheckboxCategory, CategoryCheckboxValue } from './CategoryCheckboxTypes';
 import Category from './Category';
 
-export interface ComponentProps {
+export interface CategoryCheckboxProps {
     categories: Array<CheckboxCategory>;
     options: Array<CategoryCheckboxOption>;
     onChange: (value: Array<CategoryCheckboxValue>) => void;
     initialValue?: undefined | Array<CategoryCheckboxValue>;
+    error?: string | undefined;
 }
 
-const LabelElement: FunctionComponent<ComponentProps> = (
-    props: ComponentProps
+const CategoryCheckbox: FunctionComponent<CategoryCheckboxProps> = (
+    props: CategoryCheckboxProps
 ): ReactElement => {
 
     const [currentValues, setCurrentValues] = React.useState<Array<CategoryCheckboxValue>>(props.initialValue || []);
@@ -43,8 +44,16 @@ const LabelElement: FunctionComponent<ComponentProps> = (
 
                 }} />)
             })}
+            {props.error && (
+                <p
+                    data-testid="error-message"
+                    className="mt-1 text-sm text-red-400"
+                >
+                    {props.error}
+                </p>
+            )}
         </div>
     );
 };
 
-export default LabelElement;
+export default CategoryCheckbox;

CommonUI/src/Components/Forms/Types/Field.ts

@@ -8,6 +8,7 @@ import MimeType from 'Common/Types/File/MimeType';
 import FormValues from './FormValues';
 import { RadioButton } from '../../RadioButtons/GroupRadioButtons';
 import { ReactElement } from 'react';
+import { CategoryCheckboxOption, CheckboxCategory } from '../../CategoryCheckbox/CategoryCheckboxTypes';
 
 export enum FormFieldStyleType {
     Default = 'Default',
@@ -30,6 +31,12 @@ export interface CustomElementProps {
     placeholder?: string | undefined;
 }
 
+
+export interface CategoryCheckboxProps {
+    categories: Array<CheckboxCategory>;
+    options: Array<CategoryCheckboxOption>;
+}
+
 export default interface Field<TEntity> {
     name?: string; // form field name, should be unique in thr form. If not provided, the field will be auto generated.
     title?: string;
@@ -75,4 +82,5 @@ export default interface Field<TEntity> {
         values: FormValues<TEntity>,
         props: CustomElementProps
     ) => ReactElement | undefined; // custom element to render instead of the elements in the form.
+    categoryCheckboxProps?: CategoryCheckboxProps | undefined; // props for the category checkbox component. If fieldType is CategoryCheckbox, this prop is required.
 }

CommonUI/src/Components/Forms/Types/FormFieldSchemaType.ts

@@ -32,6 +32,8 @@ enum FormFieldSchemaType {
     JSON = 'JSON',
     Query = 'Query',
     CustomComponent = 'CustomComponent',
+    Checkbox = 'Checkbox',
+    CategoryCheckbox = 'CategoryCheckbox',
 }
 
 export default FormFieldSchemaType;