@digigov/form 2.0.0-a402a664 → 2.0.0-a64dc016

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,7 @@
-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 type { UncontrolledFieldProps } from '@digigov/form/Field/types';
 import { useFormContext } from '@digigov/form/FormContext';
 import {
   DateInputContainer,
@@ -20,7 +20,6 @@ export interface DateInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
 function useDate(name, value, form) {
   const [year, month, day] = useMemo(() => {
     if (!value || value.length === 0) {
-      update('');
       return ['', '', ''];
     }
     const [day, month, year] = value.split('/');
@@ -88,29 +87,54 @@ const makeDate = (val) => {
   return '';
 };
 
-const DatePart = ({ label, ...props }) => {
-  return <DateInputItem {...props}>{label}</DateInputItem>;
-};
+const DatePart = React.forwardRef<HTMLInputElement, Record<string, any>>(
+  ({ label, ...props }, ref) => {
+    return (
+      <DateInputItem {...props} ref={ref}>
+        {label}
+      </DateInputItem>
+    );
+  }
+);
+DatePart.displayName = 'DatePart';
 
-export const DateInput = ({ name, ...props }) => {
+export const DateInput = React.forwardRef<
+  HTMLInputElement,
+  Record<string, any>
+>(({ name, ...props }, ref) => {
   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 form = useFormContext();
-  const date = useDate(name, value || makeDate(props.defaultValue), form);
+  const value = form.getValues(name);
+  const date = useDate(name, value, form);
 
   return (
     <DateInputContainer>
       <DatePart
+        ref={ref}
         label={t('form.label.day')}
         onChange={date.setDay}
-        onBlur={date.trigger}
+        onBlur={(e) => {
+          if (date.day && date.day.length === 1) {
+            date.setDay(e, true);
+          }
+          date.trigger();
+        }}
         value={date.day}
         width={2}
         name={`${name}-day`}
@@ -123,7 +147,12 @@ export const DateInput = ({ name, ...props }) => {
       <DatePart
         label={t('form.label.month')}
         onChange={date.setMonth}
-        onBlur={date.trigger}
+        onBlur={(e) => {
+          if (date.month && date.month.length === 1) {
+            date.setMonth(e, true);
+          }
+          date.trigger();
+        }}
         value={date.month}
         width={2}
         name={`${name}-month`}
@@ -148,6 +177,8 @@ export const DateInput = ({ name, ...props }) => {
       />
     </DateInputContainer>
   );
-};
+});
+
+DateInput.displayName = 'DateInput';
 
 export default DateInput;

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/doc.mdx

@@ -13,4 +13,4 @@ either with a textbox that validates the input or a special date picker interfac
 
 ### Default
 
-<code src="@digigov/form/inputs/DateTimeInput/__stories__/Default.tsx" />
+<code src="@digigov/form/src/inputs/DateTimeInput/__stories__/Default.tsx" />

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);

package/src/inputs/DateTimeInput/index.tsx

@@ -1,7 +1,7 @@
-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 type { UncontrolledFieldProps } from '@digigov/form/Field/types';
 import { useFormContext } from '@digigov/form/FormContext';
 import {
   DateInputContainer,
@@ -21,7 +21,6 @@ export interface DateTimeInputProps
 function useDateTime(name, value, form) {
   const [year, month, day, hours, minutes] = useMemo(() => {
     if (!value || value.length === 0) {
-      update('');
       return ['', '', '', '', ''];
     }
     const [datePart, timePart] = value.split(' ');
@@ -114,96 +113,134 @@ const makeDateTime = (val) => {
   return '';
 };
 
-const DateTimePart = ({ label, ...props }) => {
-  return <DateInputItem {...props}>{label}</DateInputItem>;
-};
+const DateTimePart = React.forwardRef<HTMLInputElement, Record<string, any>>(
+  ({ label, ...props }, ref) => {
+    return (
+      <DateInputItem {...props} ref={ref}>
+        {label}
+      </DateInputItem>
+    );
+  }
+);
+DateTimePart.displayName = 'DateTimePart';
 
-export const DateTimeInput = ({ name, ...props }) => {
+export const DateTimeInput = React.forwardRef<
+  HTMLInputElement,
+  Record<string, any>
+>(({ name, ...props }, ref) => {
   const { t } = useTranslation();
-  const [initial] = useState(props.value);
-  const value = useMemo(() => {
-    if (initial === props.value) {
-      return makeDateTime(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, makeDateTime(props.defaultValue), {
+        shouldValidate: false,
+      });
+    } else {
+      // checks if the initial value is a valid date
+      form.setValue(name, makeDateTime(initialValue), {
+        shouldValidate: false,
+      });
     }
-    return props.value;
-  }, [props.value, initial]);
+  }, []);
 
-  const form = useFormContext();
-  const datetime = useDateTime(
-    name,
-    value || makeDateTime(props.defaultValue),
-    form
-  );
+  const value = form.getValues(name);
+  const dateTime = useDateTime(name, value, form);
 
   return (
     <DateInputContainer>
       <DateTimePart
+        ref={ref}
         label={t('form.label.day')}
-        onChange={datetime.setDay}
-        onBlur={datetime.trigger}
-        value={datetime.day}
+        onChange={dateTime.setDay}
+        onBlur={(e) => {
+          if (dateTime.day && dateTime.day.length === 1) {
+            dateTime.setDay(e, true);
+          }
+          dateTime.trigger();
+        }}
+        value={dateTime.day}
         width={2}
         name={`${name}-day`}
         maxLength="2"
         disabled={props.disabled}
         aria-required={props['aria-required']}
-        error={!datetime.day ? props.error : false}
+        error={!dateTime.day ? props.error : false}
         id={`${name}-day`}
       />
       <DateTimePart
         label={t('form.label.month')}
-        onChange={datetime.setMonth}
-        onBlur={datetime.trigger}
-        value={datetime.month}
+        onChange={dateTime.setMonth}
+        onBlur={(e) => {
+          if (dateTime.month && dateTime.month.length === 1) {
+            dateTime.setMonth(e, true);
+          }
+          dateTime.trigger();
+        }}
+        value={dateTime.month}
         width={2}
         name={`${name}-month`}
         id={`${name}-month`}
         maxLength="2"
         disabled={props.disabled}
         aria-required={props['aria-required']}
-        error={!datetime.month ? props.error : false}
+        error={!dateTime.month ? props.error : false}
       />
       <DateTimePart
         label={t('form.label.year')}
-        onChange={datetime.setYear}
-        onBlur={datetime.trigger}
-        value={datetime.year}
+        onChange={dateTime.setYear}
+        onBlur={dateTime.trigger}
+        value={dateTime.year}
         width={4}
         name={`${name}-year`}
         id={`${name}-year`}
         maxLength="4"
         disabled={props.disabled}
         aria-required={props['aria-required']}
-        error={!datetime.year ? props.error : false}
+        error={!dateTime.year ? props.error : false}
       />
       <DateTimePart
         label={t('form.label.hours')}
-        onChange={datetime.setHours}
-        onBlur={datetime.trigger}
-        value={datetime.hours}
+        onChange={dateTime.setHours}
+        onBlur={(e) => {
+          if (dateTime.hours && dateTime.hours.length === 1) {
+            dateTime.setHours(e, true);
+          }
+          dateTime.trigger();
+        }}
+        value={dateTime.hours}
         width={2}
         name={`${name}-hours`}
         id={`${name}-hours`}
         maxLength="2"
         disabled={props.disabled}
         aria-required={props['aria-required']}
-        error={!datetime.hours ? props.error : false}
+        error={!dateTime.hours ? props.error : false}
       />
       <DateTimePart
         label={t('form.label.minutes')}
-        onChange={datetime.setMinutes}
-        onBlur={datetime.trigger}
-        value={datetime.minutes}
+        onChange={dateTime.setMinutes}
+        onBlur={(e) => {
+          if (dateTime.minutes && dateTime.minutes.length === 1) {
+            dateTime.setMinutes(e, true);
+          }
+          dateTime.trigger();
+        }}
+        value={dateTime.minutes}
         width={2}
         name={`${name}-minutes`}
         id={`${name}-minutes`}
         maxLength="2"
         disabled={props.disabled}
         aria-required={props['aria-required']}
-        error={!datetime.minutes ? props.error : false}
+        error={!dateTime.minutes ? props.error : false}
       />
     </DateInputContainer>
   );
-};
+});
+
+DateTimeInput.displayName = 'DateTimeInput';
 
 export default DateTimeInput;

package/src/inputs/FileInput/doc.mdx

@@ -12,4 +12,4 @@ Input element of type `file` let the user choose one or more files from their de
 
 ### Default
 
-<code src="@digigov/form/inputs/FileInput/__stories__/Default.tsx" />
+<code src="@digigov/form/src/inputs/FileInput/__stories__/Default.tsx" />

package/src/inputs/FileInput/index.tsx

@@ -1,13 +1,16 @@
-import React, { useEffect, useState } from 'react';
+import type { ComponentRef } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import type { UseFormReturn } from 'react-hook-form';
 import { useWatch } from 'react-hook-form';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-import { Button, ButtonProps } from '@digigov/ui/form/Button';
-import {
-  FileUpload,
-  FileUploadContainer,
+import type { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import { omit } from '@digigov/form/utils';
+import type { ButtonProps } from '@digigov/ui/form/Button';
+import { Button } from '@digigov/ui/form/Button';
+import type {
   FileUploadContainerProps,
   FileUploadProps,
 } from '@digigov/ui/form/FileUpload';
+import { FileUpload, FileUploadContainer } from '@digigov/ui/form/FileUpload';
 import { useTranslation } from '@digigov/ui/i18n';
 import { Hint } from '@digigov/ui/typography/Hint';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
@@ -31,34 +34,60 @@ export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
       resetFile?: string;
     };
   };
+  reset: (values?: FileList) => void;
+  resetField: UseFormReturn['resetField'];
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const FileInput: React.FC<any> = React.forwardRef(function FileInput(
-  { name, disabled, resetField, extra, control, onChange, ...props },
-  ref: any
+export const FileInput = React.forwardRef<
+  ComponentRef<typeof FileUpload>,
+  FileInputProps
+>(function FileInput(
+  { name, disabled, extra, control, onChange, resetField, ...props },
+  ref
 ) {
-  delete props.Field;
-  delete props.reset;
   const { t } = useTranslation();
-  const value: any = useWatch({ control, name });
+  const value: FileList = useWatch({ control, name });
 
-  const [files, setFiles] = useState<string[] | undefined>(
-    Object.values(value || {})?.map?.(({ name }) => name) || []
+  const [filenames, setFilenames] = useState<string[] | undefined>(
+    Object.values(value || {}).map(({ name }) => name) || []
   );
+
   useEffect(() => {
-    setFiles(Object.values(value || {})?.map?.(({ name }) => name));
+    setFilenames(Object.values(value || {}).map(({ name }) => name));
   }, [value]);
 
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      event.preventDefault();
+      const target = event.target;
+      if (target.files && target.files.length > 0) {
+        setFilenames(Object.values(target.files).map(({ name }) => name));
+      }
+      onChange(event);
+    },
+    [onChange]
+  );
+
+  const handleReset = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      resetField(name);
+      setFilenames(undefined);
+    },
+    [name, resetField]
+  );
+
   return (
     <>
       <FileUploadContainer
         variant={extra?.containerProps?.variant || 'default'}
-        hasFiles={files && files.length > 0}
+        hasFiles={filenames && filenames.length > 0}
       >
-        {files?.length ? (
+        {filenames?.length ? (
           <>
             <Paragraph>
-              <b>{t('upload.file')}:</b> {`${files.join(', ')}`}
+              <b>{t('upload.file')}:</b> {`${filenames.join(', ')}`}
             </Paragraph>
           </>
         ) : (
@@ -72,38 +101,34 @@ export const FileInput: React.FC<any> = React.forwardRef(function FileInput(
         )}
         <FileUpload
           ref={ref}
-          hasFiles={!!files?.length}
+          hasFiles={!!filenames?.length}
           name={name}
           variant={extra?.uploadButtonProps?.variant}
           disabled={disabled}
           id={name}
-          onChange={(event) => {
-            event.preventDefault();
-            const target = event?.target as HTMLInputElement;
-            if (target?.files && target?.files.length > 0) {
-              setFiles(Object.values(target?.files)?.map?.(({ name }) => name));
-            }
-            onChange(event);
+          onChange={handleChange}
+          {...{
+            ...omit(props, ['Field', 'reset', 'error']),
+            required: undefined,
           }}
-          {...{ ...props, required: undefined }}
         >
-          {files?.length ? t('upload.change_file') : t('upload.choose_file')}
+          {filenames?.length
+            ? t('upload.change_file')
+            : t('upload.choose_file')}
         </FileUpload>
-        {files !== undefined && files?.length > 0 && !extra?.noResetButton && (
-          <>
-            <Button
-              variant={extra?.resetButtonProps?.variant || 'link'}
-              onClick={(event) => {
-                event.preventDefault();
-                resetField(name);
-                setFiles(undefined);
-              }}
-              color={extra?.resetButtonProps?.color || 'secondary'}
-            >
-              {t('upload.reset_file')}
-            </Button>
-          </>
-        )}
+        {filenames !== undefined &&
+          filenames?.length > 0 &&
+          !extra?.noResetButton && (
+            <>
+              <Button
+                variant={extra?.resetButtonProps?.variant || 'link'}
+                onClick={handleReset}
+                color={extra?.resetButtonProps?.color || 'secondary'}
+              >
+                {t('upload.reset_file')}
+              </Button>
+            </>
+          )}
       </FileUploadContainer>
     </>
   );