@digigov/form 2.0.0-13876dba → 2.0.0-16da9467

package/src/FormContext.tsx

@@ -1,7 +1,11 @@
-import React, { createContext } from 'react';
+import React, { createContext, useContext } from 'react';
 import { FormContextProps } from '@digigov/form/types';
 
 export const FormContext: React.Context<FormContextProps> = createContext({
   fieldsMap: {},
   fieldsetsMap: {},
 } as FormContextProps);
+
+export const useFormContext = () => {
+  return useContext(FormContext);
+};

package/src/MultiplicityField/add-objects.tsx

@@ -47,6 +47,7 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
   setValue,
   stashedObjects,
   getValues,
+  resetField,
   onStash,
   error,
   Field,
@@ -187,6 +188,7 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
         control={control}
         register={register}
         reset={reset}
+        resetField={resetField}
         Field={Field}
         error={
           extra?.max - stashedObjects.length === 0 ||

package/src/MultiplicityField/index.tsx

@@ -31,6 +31,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
   setValue,
   getValues,
   unregister,
+  resetField,
   Field,
 }) => {
   const { fields, append, remove } = useFieldArray({
@@ -60,6 +61,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
       hasError={formState.isSubmitted && !formState.isSubmitting && !!error}
       wrapper="fieldset"
       name={name}
+      register={register}
     >
       {stashedObjects.length > 0 ? (
         <div>
@@ -98,6 +100,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
         getValues={getValues}
         unregister={unregister}
         trigger={trigger}
+        resetField={resetField}
         clearErrors={clearErrors}
         Field={Field}
       />

package/src/MultiplicityField/types.ts

@@ -12,6 +12,7 @@ export interface MultiplicityProps
   setValue: UseFormReturn['setValue'];
   getValues: UseFormReturn['getValues'];
   unregister: UseFormReturn['unregister'];
+  resetField?: UseFormReturn['resetField'];
   error?: ErrorOption;
   extra?: Record<string, any>;
   label?: FieldSpec['label'];

package/src/inputs/Checkboxes/index.tsx

@@ -32,14 +32,10 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
   const handleChange =
     (optionValue, idx, show) =>
     (evt): void => {
-      let newValue;
+      let newValue: any = [];
       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) {
@@ -85,9 +81,9 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
                 ...props,
                 reset: undefined,
                 defaultValue: undefined,
+                error: undefined,
                 onBlur: undefined,
                 required: undefined,
-                Field: undefined,
                 'aria-describedby': undefined,
                 type: 'checkbox',
               }}

package/src/inputs/DateInput/DateInput.stories.js

@@ -8,3 +8,7 @@ export default {
   displayName: 'DateInput',
 };
 export { Default } from '@digigov/form/inputs/DateInput/__stories__/Default';
+export { WithDefaultValue } from '@digigov/form/inputs/DateInput/__stories__/WithDefaultValue';
+export { WithWrongDefaultValue } from '@digigov/form/inputs/DateInput/__stories__/WithWrongDefaultValue';
+export { WithInitialValue } from '@digigov/form/inputs/DateInput/__stories__/WithInitialValue';
+export { WithWrongInitialValue } from '@digigov/form/inputs/DateInput/__stories__/WithWrongInitialValue';

package/src/inputs/DateInput/__stories__/WithDefaultValue.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+const fields = [
+  {
+    key: 'date_example',
+    type: 'date',
+    required: true,
+    defaultValue: '05/11/2020',
+    label: {
+      primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020',
+    },
+  } as const,
+];
+
+export const WithDefaultValue = (_: any) => (
+  <FormBuilder onSubmit={(data) => console.log(data)}>
+    {fields.map(({ key, ...field }) => {
+      return <Field {...field} name={key} key={key} />;
+    })}
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default WithDefaultValue;

package/src/inputs/DateInput/__stories__/WithInitialValue.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+const fields = [
+  {
+    key: 'date_example',
+    type: 'date',
+    required: true,
+    label: {
+      primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020',
+    },
+  } as const,
+];
+
+export const WithInitialValue = (_: any) => (
+  <FormBuilder
+    initial={{ date_example: '05/01/2020' }}
+    onSubmit={(data) => console.log(data)}
+  >
+    {fields.map(({ key, ...field }) => {
+      return <Field {...field} name={key} key={key} />;
+    })}
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default WithInitialValue;

package/src/inputs/DateInput/__stories__/WithWrongDefaultValue.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+const fields = [
+  {
+    key: 'date_example',
+    type: 'date',
+    required: true,
+    defaultValue: '5/1/2020',
+    label: {
+      primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020',
+    },
+  } as const,
+];
+
+export const WithWrongDefaultValue = (_: any) => (
+  <FormBuilder onSubmit={(data) => console.log(data)}>
+    {fields.map(({ key, ...field }) => {
+      return <Field {...field} name={key} key={key} />;
+    })}
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default WithWrongDefaultValue;

package/src/inputs/DateInput/__stories__/WithWrongInitialValue.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+const fields = [
+  {
+    key: 'date_example',
+    type: 'date',
+    required: true,
+    label: {
+      primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020',
+    },
+  } as const,
+];
+
+export const WithWrongInitialValue = (_: any) => (
+  <FormBuilder
+    initial={{ date_example: '5/1/2020' }}
+    onSubmit={(data) => console.log(data)}
+  >
+    {fields.map(({ key, ...field }) => {
+      return <Field {...field} name={key} key={key} />;
+    })}
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default WithWrongInitialValue;

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

@@ -2,6 +2,10 @@ 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/DateInput/__stories__/Default';
+import { WithDefaultValue } from '@digigov/form/inputs/DateInput/__stories__/WithDefaultValue';
+import { WithInitialValue } from '@digigov/form/inputs/DateInput/__stories__/WithInitialValue';
+import { WithWrongDefaultValue } from '@digigov/form/inputs/DateInput/__stories__/WithWrongDefaultValue';
+import { WithWrongInitialValue } from '@digigov/form/inputs/DateInput/__stories__/WithWrongInitialValue';
 
 test('renders the All DateInput variants', async ({ mount, page }) => {
   await mount(
@@ -10,6 +14,18 @@ test('renders the All DateInput variants', async ({ mount, page }) => {
     <TestVariant title="Default">
       <Default />
     </TestVariant>
+    <TestVariant title="WithDefaultValue">
+      <WithDefaultValue />
+    </TestVariant>
+    <TestVariant title="WithInitialValue">
+      <WithInitialValue />
+    </TestVariant>
+    <TestVariant title="WithWrongDefaultValue">
+      <WithWrongDefaultValue />
+    </TestVariant>
+    <TestVariant title="WithWrongInitialValue">
+      <WithWrongInitialValue />
+    </TestVariant>
   </div>
   )
   await page.evaluate(() => document.fonts.ready);

package/src/inputs/DateInput/index.tsx

@@ -1,7 +1,8 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useEffect } from 'react';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import { useFormContext } from '@digigov/form/FormContext';
 import {
   DateInputContainer,
   DateInputItem,
@@ -16,22 +17,25 @@ export interface DateInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
   };
 }
 
-function useDate(value, onChange) {
+function useDate(name, value, form) {
   const [year, month, day] = useMemo(() => {
     if (!value || value.length === 0) {
-      onChange('');
       return ['', '', ''];
     }
     const [day, month, year] = value.split('/');
     return [year, month, day];
   }, [value]);
 
+  function update(value) {
+    form.setValue(name, value, { shouldValidate: false });
+  }
+
   function set(year, month, day) {
     const value = `${day || ''}/${month || ''}/${year || ''}`;
     if (!year && !month && !day) {
-      onChange(null);
+      update('');
     } else {
-      onChange(value);
+      update(value);
     }
   }
 
@@ -56,6 +60,12 @@ function useDate(value, onChange) {
     set(year, month, val);
   }
 
+  function trigger() {
+    if (form.formState.isSubmitted) {
+      form.trigger(name);
+    }
+  }
+
   return {
     day,
     month,
@@ -63,6 +73,7 @@ function useDate(value, onChange) {
     setYear,
     setMonth,
     setDay,
+    trigger,
   };
 }
 
@@ -82,22 +93,37 @@ const DatePart = ({ label, ...props }) => {
 
 export const DateInput = ({ name, ...props }) => {
   const { t } = useTranslation();
-  const [initial] = useState(props.value);
-  const value = useMemo(() => {
-    if (initial === props.value) {
-      return makeDate(props.value);
+  const form = useFormContext();
+
+  useEffect(() => {
+    const initialValue = form.getValues(name);
+    // checks if the initial value is undefined and if the default value is valid  date
+    if (initialValue === undefined && props.defaultValue) {
+      form.setValue(name, makeDate(props.defaultValue), {
+        shouldValidate: false,
+      });
+    } else {
+      // checks if the initial value is a valid date
+      form.setValue(name, makeDate(initialValue), {
+        shouldValidate: false,
+      });
     }
-    return props.value;
-  }, [props.value, initial]);
+  }, []);
 
-  const date = useDate(value || makeDate(props.defaultValue), props.onChange);
+  const value = form.getValues(name);
+  const date = useDate(name, value, form);
 
   return (
     <DateInputContainer>
       <DatePart
         label={t('form.label.day')}
         onChange={date.setDay}
-        onBlur={(e) => date.setDay(e, true)}
+        onBlur={(e) => {
+          if (date.day && date.day.length === 1) {
+            date.setDay(e, true);
+          }
+          date.trigger();
+        }}
         value={date.day}
         width={2}
         name={`${name}-day`}
@@ -110,7 +136,12 @@ export const DateInput = ({ name, ...props }) => {
       <DatePart
         label={t('form.label.month')}
         onChange={date.setMonth}
-        onBlur={(e) => date.setMonth(e, true)}
+        onBlur={(e) => {
+          if (date.month && date.month.length === 1) {
+            date.setMonth(e, true);
+          }
+          date.trigger();
+        }}
         value={date.month}
         width={2}
         name={`${name}-month`}
@@ -123,6 +154,7 @@ export const DateInput = ({ name, ...props }) => {
       <DatePart
         label={t('form.label.year')}
         onChange={date.setYear}
+        onBlur={date.trigger}
         value={date.year}
         width={4}
         name={`${name}-year`}

package/src/inputs/DateTimeInput/DateTimeInput.stories.js

@@ -1,11 +1,14 @@
-import { Default } from './__stories__/Default';
+import DateTimeInput from '@digigov/form/inputs/DateTimeInput';
 import doc from './doc.mdx?raw';
-
 export default {
-  title: 'Form/Inputs/DateTimeInput',
-  component: Default,
+  title: 'Digigov Form/inputs/DateTimeInput',
+  component: DateTimeInput,
   tags: ['autodocs'],
   markdown: doc,
+  displayName: 'DateTimeInput',
 };
-
-export { Default };
+export { Default } from '@digigov/form/inputs/DateTimeInput/__stories__/Default';
+export { WithDefaultValue } from '@digigov/form/inputs/DateTimeInput/__stories__/WithDefaultValue';
+export { WithWrongDefaultValue } from '@digigov/form/inputs/DateTimeInput/__stories__/WithWrongDefaultValue';
+export { WithInitialValue } from '@digigov/form/inputs/DateTimeInput/__stories__/WithInitialValue';
+export { WithWrongInitialValue } from '@digigov/form/inputs/DateTimeInput/__stories__/WithWrongInitialValue';

package/src/inputs/DateTimeInput/__stories__/WithDefaultValue.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+const fields = [
+  {
+    key: 'datetime_example',
+    type: 'datetime',
+    defaultValue: '05/11/2020 13:30',
+    required: true,
+    label: {
+      primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020 13:30',
+    },
+  } as const,
+];
+
+export const WithDefaultValue = (_: any) => (
+  <FormBuilder onSubmit={(data) => console.log(data)}>
+    {fields.map(({ key, ...field }) => {
+      return <Field {...field} name={key} key={key} />;
+    })}
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default WithDefaultValue;

package/src/inputs/DateTimeInput/__stories__/WithInitialValue.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+const fields = [
+  {
+    key: 'date_example',
+    type: 'datetime',
+    required: true,
+    label: {
+      primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020',
+    },
+  } as const,
+];
+
+export const WithInitialValue = (_: any) => (
+  <FormBuilder
+    initial={{ date_example: '05/01/2020 13:30' }}
+    onSubmit={(data) => console.log(data)}
+  >
+    {fields.map(({ key, ...field }) => {
+      return <Field {...field} name={key} key={key} />;
+    })}
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default WithInitialValue;

package/src/inputs/DateTimeInput/__stories__/WithWrongDefaultValue.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+const fields = [
+  {
+    key: 'datetime_example',
+    type: 'datetime',
+    defaultValue: '5/1/2020 3:3',
+    required: true,
+    label: {
+      primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020 13:30',
+    },
+  } as const,
+];
+
+export const WithWrongDefaultValue = (_: any) => (
+  <FormBuilder onSubmit={(data) => console.log(data)}>
+    {fields.map(({ key, ...field }) => {
+      return <Field {...field} name={key} key={key} />;
+    })}
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default WithWrongDefaultValue;

package/src/inputs/DateTimeInput/__stories__/WithWrongInitialValue.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+const fields = [
+  {
+    key: 'date_example',
+    type: 'datetime',
+    required: true,
+    label: {
+      primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020',
+    },
+  } as const,
+];
+
+export const WithWrongInitialValue = (_: any) => (
+  <FormBuilder
+    initial={{ date_example: '5/1/2020 3:3' }}
+    onSubmit={(data) => console.log(data)}
+  >
+    {fields.map(({ key, ...field }) => {
+      return <Field {...field} name={key} key={key} />;
+    })}
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default WithWrongInitialValue;

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

@@ -2,6 +2,10 @@ 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/DateTimeInput/__stories__/Default';
+import { WithDefaultValue } from '@digigov/form/inputs/DateTimeInput/__stories__/WithDefaultValue';
+import { WithInitialValue } from '@digigov/form/inputs/DateTimeInput/__stories__/WithInitialValue';
+import { WithWrongDefaultValue } from '@digigov/form/inputs/DateTimeInput/__stories__/WithWrongDefaultValue';
+import { WithWrongInitialValue } from '@digigov/form/inputs/DateTimeInput/__stories__/WithWrongInitialValue';
 
 test('renders the All DateTimeInput variants', async ({ mount, page }) => {
   await mount(
@@ -10,6 +14,18 @@ test('renders the All DateTimeInput variants', async ({ mount, page }) => {
     <TestVariant title="Default">
       <Default />
     </TestVariant>
+    <TestVariant title="WithDefaultValue">
+      <WithDefaultValue />
+    </TestVariant>
+    <TestVariant title="WithInitialValue">
+      <WithInitialValue />
+    </TestVariant>
+    <TestVariant title="WithWrongDefaultValue">
+      <WithWrongDefaultValue />
+    </TestVariant>
+    <TestVariant title="WithWrongInitialValue">
+      <WithWrongInitialValue />
+    </TestVariant>
   </div>
   )
   await page.evaluate(() => document.fonts.ready);