@digigov/form 2.0.0-d57821ba → 2.0.0-daaf7bdf

package/src/FormBuilder/index.tsx

@@ -1,8 +1,180 @@
-import {
-  FormBuilder,
-  useFormContext,
-  useFormValues,
-  FormBase,
-} from '@digigov/form';
-export { useFormContext, useFormValues, FormBase };
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useCallback, useContext, useRef } from 'react';
+import { useForm } from 'react-hook-form';
+import Field from '@digigov/form/Field';
+import { CONTROLLED_FIELD_COMPONENTS } from '@digigov/form/Field/utils';
+import Fieldset from '@digigov/form/Fieldset';
+import { FormContext } from '@digigov/form/FormContext';
+import { FormBaseProps, FormData, FormBuilderProps } from '@digigov/form/types';
+import { yupResolver } from '@digigov/form/utils';
+import { useValidationSchema } from '@digigov/form/validators';
+import { Form } from '@digigov/react-core/Form';
+import { Button } from '@digigov/ui/form/Button';
+
+const FormBase = React.forwardRef(function FormBase(
+  {
+    onSubmit,
+    children,
+    registerField,
+    fieldsMap,
+    fieldsetsMap,
+    resolver,
+    mode,
+    initial,
+    reValidateMode,
+    shouldFocusError,
+    criteriaMode,
+    componentRegistry,
+    grid,
+    ...props
+  }: FormBaseProps,
+  ref: React.Ref<HTMLFormElement>
+) {
+  const form = useForm({
+    resolver,
+    mode,
+    defaultValues: initial,
+    reValidateMode,
+    shouldFocusError,
+    criteriaMode,
+  });
+
+  const handleSubmit = useCallback(
+    (data: FormData): void => {
+      onSubmit && onSubmit(data);
+    },
+    [onSubmit]
+  );
+  const submit = form.handleSubmit(handleSubmit);
+  const ctx = {
+    fieldsMap,
+    fieldsetsMap,
+    control: form.control,
+    register: form.register,
+    watch: form.watch,
+    resetField: form.resetField,
+    registerField: registerField,
+    errors: form.formState.errors,
+    formState: form.formState,
+    reset: form.reset,
+    trigger: form.trigger,
+    getFieldState: form.getFieldState,
+    setValue: form.setValue,
+    clearErrors: form.clearErrors,
+    getValues: form.getValues,
+    unregister: form.unregister,
+    componentRegistry,
+    setError: form.setError,
+    formRef: ref,
+    submit,
+  };
+  return (
+    <FormContext.Provider value={ctx}>
+      <Form grid={grid} onSubmit={submit} ref={ref} {...props}>
+        {children}
+      </Form>
+    </FormContext.Provider>
+  );
+});
+
+const useFormContext = () => {
+  return useContext(FormContext);
+};
+const useFormValues = () => {
+  const ctx = useFormContext();
+  return ctx.getValues();
+};
+const FormBuilder = React.forwardRef(function FormBuilder(
+  {
+    fields = [],
+    fieldsets,
+    initial = {},
+    onSubmit,
+    children,
+    reValidateMode = 'onSubmit',
+    mode = 'onSubmit',
+    shouldFocusError = true,
+    criteriaMode = 'all',
+    auto = false,
+    validatorRegistry,
+    componentRegistry,
+    grid = false,
+    ...props
+  }: FormBuilderProps,
+  ref: React.Ref<HTMLFormElement>
+): React.ReactElement {
+  const fieldsState = useRef(fields);
+  const setFieldsState = useCallback((newFields) => {
+    fieldsState.current = newFields;
+  }, []);
+  const schema = useValidationSchema(fieldsState, validatorRegistry);
+  const registerField = useCallback((field) => {
+    const fieldIndex = fieldsState.current.findIndex(
+      (f) => f.key === field.key
+    );
+    if (fieldIndex > -1) {
+      fieldsState.current[fieldIndex] = field;
+    } else {
+      fieldsState.current.push(field);
+    }
+    setFieldsState(fieldsState.current);
+  }, []);
+  let resolver;
+  let fieldsMap;
+  let fieldsetsMap;
+  let fieldChildren;
+  if (schema) {
+    resolver = yupResolver(schema);
+    fieldsMap = fields
+      ? fields.reduce((map, field) => ({ ...map, [field.key]: field }), {})
+      : {};
+    fieldsetsMap =
+      fieldsets &&
+      fieldsets.reduce(
+        (map, fieldset) => ({ ...map, [fieldset.key]: fieldset }),
+        {}
+      );
+
+    if (auto) {
+      if (fieldsets) {
+        fieldChildren = fieldsets.map((fieldset) => (
+          <Fieldset key={fieldset.key} />
+        ));
+      } else if (fields) {
+        fieldChildren = fields.map((field) => (
+          <Field key={field.key} name={field.key} />
+        ));
+      }
+    }
+  }
+  return (
+    <FormBase
+      resolver={resolver}
+      fieldsetsMap={fieldsetsMap}
+      fieldsMap={fieldsMap}
+      registerField={registerField}
+      initial={initial}
+      reValidateMode={reValidateMode}
+      mode={mode}
+      shouldFocusError={shouldFocusError}
+      criteriaMode={criteriaMode}
+      onSubmit={onSubmit}
+      componentRegistry={componentRegistry}
+      ref={ref}
+      grid={grid}
+      {...props}
+    >
+      {fieldChildren}
+      {auto && <Button type="submit">Συνέχεια</Button>}
+      {children}
+    </FormBase>
+  );
+});
+export const ControlledFormBuilder = (props) => {
+  return (
+    <FormBuilder {...props} componentRegistry={CONTROLLED_FIELD_COMPONENTS} />
+  );
+};
 export default FormBuilder;
+
+export { useFormContext, useFormValues, FormBase };

package/src/FormBuilder/scenarios.test.tsx

@@ -1120,7 +1120,7 @@ const inputsScenarios = [
         args: {
           maxSizeToMb: 0.0003,
         },
-        text: el.form.error.file_size,
+        text: el.form.error.image_size,
       },
       {
         type: 'error',
@@ -1847,7 +1847,7 @@ for (const scenario of scenarios) {
     test(scenario.title, async ({ mount, page }) => {
       const formBuilder = await mount(
         // @ts-ignore
-        <FormBuilder auto={true} fields={scenario.fields} onSubmit={() => {}} />
+        <FormBuilder auto={true} fields={scenario.fields} onSubmit={() => { }} />
       );
       await fillFields(page, formBuilder, scenario);
       await submitForm(formBuilder);

package/src/MultiplicityField/add-objects.tsx

@@ -51,6 +51,7 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
   getValues,
   onStash,
   error,
+  Field
 }) => {
   const currentIndex = fields.length > 0 ? fields.length - 1 : fields.length;
   const currentName = `${name}.${currentIndex}`;
@@ -186,6 +187,7 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
         control={control}
         register={register}
         reset={reset}
+        Field={Field}
         error={
           extra?.max - stashedObjects.length === 0 ||
           extra?.length - stashedObjects.length === 0

package/src/MultiplicityField/index.tsx

@@ -30,6 +30,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
   setValue,
   getValues,
   unregister,
+  Field,
 }) => {
   const { fields, append, remove } = useFieldArray({
     control,
@@ -96,6 +97,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
         unregister={unregister}
         trigger={trigger}
         clearErrors={clearErrors}
+        Field={Field}
       />
     </FieldContainer>
   );

package/src/index.ts

@@ -0,0 +1,6 @@
+export { default as Field } from '@digigov/form/Field';
+export { default as Fieldset } from '@digigov/form/Fieldset';
+export * from '@digigov/form/inputs/Label';
+import FormBuilder from '@digigov/form/FormBuilder';
+export * from '@digigov/form/types';
+export default FormBuilder;

package/src/inputs/AutoCompleteInput/__stories__/Multiple.tsx

@@ -20,7 +20,6 @@ const fields: FieldSpec[] = [
     type: 'choice:multiple',
     extra: {
       component: 'AutoComplete',
-      multiple: true,
       options: results.map((r) => {
         return {
           label: {

package/src/inputs/AutoCompleteInput/index.tsx

@@ -5,6 +5,7 @@ import { Hint } from '@digigov/react-core/Hint';
 import UIAutoComplete, {
   AutoCompleteProps as UIAutoCompleteProps,
 } from '@digigov/ui/form/AutoComplete';
+import { Base } from '@digigov/react-core/Base';
 
 export interface AutoCompleteInputExtra
   extends Omit<
@@ -28,7 +29,8 @@ export interface AutoCompleteInputProps
 
 export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
   name,
-  extra: { options, multiple },
+  type,
+  extra: { options },
   onChange,
   value,
   error,
@@ -55,7 +57,7 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
 
   return (
     <UIAutoComplete
-      multiple={multiple}
+      multiple={type === 'choice:multiple' ? true : false}
       source={suggest}
       onConfirm={(value) => {
         if (Array.isArray(value)) {
@@ -68,10 +70,10 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
       templates={{
         suggestion({ label, value }) {
           return (
-            <div>
+            <Base as="div">
               {(label && label.primary && label.primary) || value}
               {label && label.secondary && <Hint>{label.secondary}</Hint>}
-            </div>
+            </Base>
           );
         },
         inputValue: (option) => {

package/src/inputs/Checkboxes/index.test.tsx

@@ -1,29 +1,28 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Conditional } from '@digigov/form/inputs/Checkboxes/__stories__/Conditional';
 import { Default } from '@digigov/form/inputs/Checkboxes/__stories__/Default';
 import { WithDivider } from '@digigov/form/inputs/Checkboxes/__stories__/WithDivider';
-import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All Checkboxes variants', async ({ mount, page }) => {
   await mount(
-    <div>
-      <TestVariant title="Conditional">
-        <Conditional />
-      </TestVariant>
-      <TestVariant title="Default">
-        <Default />
-      </TestVariant>
-      <TestVariant title="WithDivider">
-        <WithDivider />
-      </TestVariant>
-    </div>
-  );
+    
+  <div>
+    <TestVariant title="Conditional">
+      <Conditional />
+    </TestVariant>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="WithDivider">
+      <WithDivider />
+    </TestVariant>
+  </div>
+  )
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({
-    fullPage: true,
-    animations: 'disabled',
-  });
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });
+  

package/src/inputs/Checkboxes/index.tsx

@@ -23,34 +23,34 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
   value,
   extra: { options, className },
   disabled,
-  fieldComponent: Field,
+  Field,
   ...props
 }) => {
   if (!value) value = [];
   const handleChange =
     (optionValue, idx, show) =>
-    (evt): void => {
-      let newValue;
-      if (evt.currentTarget.checked) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        newValue = value.concat([optionValue]);
-      } else {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        newValue = value.filter((val) => val !== optionValue);
-      }
-      if (show && show.length > 0) {
-        setChecked((items) =>
-          items.map((item, index) => (index === idx ? !item : item))
-        );
-      }
+      (evt): void => {
+        let newValue;
+        if (evt.currentTarget.checked) {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          newValue = value.concat([optionValue]);
+        } else {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          newValue = value.filter((val) => val !== optionValue);
+        }
+        if (show && show.length > 0) {
+          setChecked((items) =>
+            items.map((item, index) => (index === idx ? !item : item))
+          );
+        }
 
-      // reset value to undefined instead of an empty array
-      // so the error state mechanism can throw validation errors
-      if (newValue.length === 0) newValue = undefined;
-      onChange(newValue);
-    };
+        // reset value to undefined instead of an empty array
+        // so the error state mechanism can throw validation errors
+        if (newValue.length === 0) newValue = undefined;
+        onChange(newValue);
+      };
   const { t } = useTranslation();
   const [checked, setChecked] = useState(
     Array<boolean>(options.length).fill(false)

package/src/inputs/ImageInput/ImageInput.stories.js

@@ -5,5 +5,6 @@ export default {
   displayName: 'ImageInput',
 };
 export { Default } from '@digigov/form/inputs/ImageInput/__stories__/Default';
-export { WithInvalidImageSize } from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageSize';
 export { WithInvalidImageDimension } from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageDimension';
+export { MaxSize } from '@digigov/form/inputs/ImageInput/__stories__/MaxSize';
+

package/src/inputs/ImageInput/__stories__/MaxSize.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import FormBuilder, { Field, Fieldset } from '@digigov/form';
+import { FieldSpec } from '@digigov/form/types';
+import { Button } from '@digigov/ui/form/Button';
+const FIELDS: FieldSpec[] = [
+  {
+    key: 'image',
+    type: 'image',
+    required: true,
+    label: {
+      primary: 'Ανέβασμα φωτογραφίας',
+      secondary: 'Μέγιστο μέγεθος φωτογραφίας: 10KB.',
+    },
+    extra: {
+      limit: {
+        maxSize: 1000,
+      },
+    }
+  },
+];
+
+export const MaxSize = () => (
+  <FormBuilder
+    fields={FIELDS}
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+  >
+    <Fieldset>
+      {FIELDS.map((field) => (
+        <Field key={field.key} name={field.key}  />
+      ))}
+    </Fieldset>
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default MaxSize;

package/src/inputs/ImageInput/index.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
 import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/form/inputs/ImageInput/__stories__/Default';
+import { MaxSize } from '@digigov/form/inputs/ImageInput/__stories__/MaxSize';
 import { WithInvalidImageDimension } from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageDimension';
 import { WithInvalidImageSize } from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageSize';
 
@@ -12,6 +13,9 @@ test('renders the All ImageInput variants', async ({ mount, page }) => {
     <TestVariant title="Default">
       <Default />
     </TestVariant>
+    <TestVariant title="MaxSize">
+      <MaxSize />
+    </TestVariant>
     <TestVariant title="WithInvalidImageDimension">
       <WithInvalidImageDimension />
     </TestVariant>

package/src/inputs/ImageInput/index.tsx

@@ -6,7 +6,7 @@ import CoreHint from '@digigov/react-core/Hint';
 import Button, { ButtonGroup } from '@digigov/ui/form/Button';
 import { useTranslation } from '@digigov/ui/i18n';
 import Paragraph from '@digigov/ui/typography/Paragraph';
-
+import { Base } from '@digigov/react-core/Base';
 export interface ImageProps {
   src?: any;
 }
@@ -20,7 +20,7 @@ export interface Limit {
 }
 
 export const Image: React.FC<ImageProps> = React.memo(function Image({ src }) {
-  return <img src={src} className="ds-image--ratio" />;
+  return <Base as='img' src={src} className="ds-image--ratio" />;
 });
 export interface ImageInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
   extra?: {
@@ -72,7 +72,7 @@ export const ImageInput: React.FC<ImageInputProps> = React.forwardRef(
           {selectedImage !== null ? (
             <>
               <Paragraph>
-                <b>{t('upload.image')}:</b> {`${selectedImage?.name}`}
+                <Base as='b'>{t('upload.image')}:</Base> {`${selectedImage?.name}`}
               </Paragraph>
             </>
           ) : (

package/src/inputs/Input/index.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 import { useWatch } from 'react-hook-form';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
 import { Hint } from '@digigov/react-core/Hint';
-import TextArea from '@digigov/react-core/TextArea';
-import TextInput from '@digigov/react-core/TextInput';
+import { TextArea } from '@digigov/react-core/TextArea';
+import { TextInput } from '@digigov/react-core/TextInput';
 import { useTranslation } from '@digigov/ui/i18n';
-
 const TYPES_MAP = {
   string: 'text',
   int: 'text',
@@ -40,6 +39,21 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
     const fieldType = TYPES_MAP[type || 'text'] || 'text';
     const { t } = useTranslation();
     const currentValue: string | '' = useWatch({ control, name });
+
+    const getRemainingChars = (currentValue, limit) => {
+      if (currentValue) {
+        return limit?.max - currentValue.length
+      }
+      return limit?.max;
+    }
+
+    const constructRemainingText = (currentValue, limit) => {
+      const remainingChars = getRemainingChars(currentValue, limit);
+      let remainingText = Math.abs(remainingChars) === 1 ? t('form.info.text.character') : t('form.info.text.characters');
+      remainingText += remainingChars > 0 ? ` ${t('form.info.text.remaining')}.` : ` ${t('form.info.text.too_many')}.`;
+      return remainingText;
+    }
+
     if (multiline === true) {
       return (
         <>
@@ -56,32 +70,12 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
             }}
           />
           {limit?.max && (
-            <Hint>
-              {currentValue === undefined ||
-              (currentValue?.length >= 0 &&
-                currentValue?.length <= limit?.max) ? (
-                <span>
-                  {t('form.info.text.you_have')}{' '}
-                  <b>
-                    {!currentValue
-                      ? limit.max
-                      : limit?.max - currentValue?.length}
-                  </b>{' '}
-                  {currentValue && limit?.max - currentValue?.length === 1
-                    ? `${t('form.info.text.character')}`
-                    : `${t('form.info.text.characters')}`}{' '}
-                  {t('form.info.text.remaining')}.
-                </span>
-              ) : (
-                <span style={{ color: '#b60202' }}>
-                  {t('form.info.text.you_have')}{' '}
-                  <b>{currentValue && currentValue?.length - limit?.max}</b>{' '}
-                  {currentValue?.length - limit?.max === 1
-                    ? `${t('form.info.text.character')}`
-                    : `${t('form.info.text.characters')}`}{' '}
-                  {t('form.info.text.too_many')}.
-                </span>
-              )}
+            <Hint display={'flex'}>
+              {t('form.info.text.you_have')}
+              <Hint fontWeight='bold'>
+                &nbsp;{`${Math.abs(getRemainingChars(currentValue, limit))}`}&nbsp;
+              </Hint>
+              {constructRemainingText(currentValue, limit)}
             </Hint>
           )}
         </>
@@ -91,6 +85,7 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
         <TextInput
           name={name}
           type={fieldType}
+          data-type={type}
           className={className}
           ref={ref}
           {...{ ...props, reset: undefined, required: undefined }}

package/src/inputs/Radio/__stories__/Conditional.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import FormBuilder, { Field, FieldSpec } from '@digigov/form';
+import FormBuilder, { Field } from '@digigov/form';
+import { FieldSpec } from '@digigov/form/types';
 import { Button } from '@digigov/ui/form/Button';
 
 const fields: FieldSpec[] = [