@digigov/form 2.0.0-e7d30530 → 2.0.0-eaf330f5

package/src/inputs/DateInput/index.tsx

@@ -1,8 +1,8 @@
-import React, { useMemo, useEffect } from 'react';
+import React, { useMemo, useState } 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 { useFormContext } from '@digigov/form/FormBuilder';
 import {
   DateInputContainer,
   DateInputItem,
@@ -20,6 +20,7 @@ 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('/');
@@ -93,37 +94,23 @@ const DatePart = ({ label, ...props }) => {
 
 export const DateInput = ({ name, ...props }) => {
   const { t } = useTranslation();
-  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,
-      });
+  const [initial] = useState(props.value);
+  const value = useMemo(() => {
+    if (initial === props.value) {
+      return makeDate(props.value);
     }
-  }, []);
+    return props.value;
+  }, [props.value, initial]);
 
-  const value = form.getValues(name);
-  const date = useDate(name, value, form);
+  const form = useFormContext();
+  const date = useDate(name, value || makeDate(props.defaultValue), form);
 
   return (
     <DateInputContainer>
       <DatePart
         label={t('form.label.day')}
         onChange={date.setDay}
-        onBlur={(e) => {
-          if (date.day && date.day.length === 1) {
-            date.setDay(e, true);
-          }
-          date.trigger();
-        }}
+        onBlur={date.trigger}
         value={date.day}
         width={2}
         name={`${name}-day`}
@@ -136,12 +123,7 @@ export const DateInput = ({ name, ...props }) => {
       <DatePart
         label={t('form.label.month')}
         onChange={date.setMonth}
-        onBlur={(e) => {
-          if (date.month && date.month.length === 1) {
-            date.setMonth(e, true);
-          }
-          date.trigger();
-        }}
+        onBlur={date.trigger}
         value={date.month}
         width={2}
         name={`${name}-month`}

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

@@ -1,14 +1,8 @@
-import DateTimeInput from '@digigov/form/inputs/DateTimeInput';
-import doc from './doc.mdx?raw';
+import { Default } from './__stories__/Default';
+
 export default {
-  title: 'Digigov Form/inputs/DateTimeInput',
-  component: DateTimeInput,
-  tags: ['autodocs'],
-  markdown: doc,
-  displayName: 'DateTimeInput',
+  title: 'Form/Inputs/DateTimeInput',
+  component: 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';
+
+export { Default };

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

@@ -14,7 +14,7 @@ const fields = [
   } as const,
 ];
 
-export const Default = (_: any) => (
+export const Default = () => (
   <FormBuilder onSubmit={() => console.log('kati')}>
     {fields.map(({ key, ...field }) => {
       return <Field {...field} name={key} key={key} />;

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

@@ -2,10 +2,6 @@ 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(
@@ -14,18 +10,6 @@ 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,8 +1,8 @@
-import React, { useMemo, useEffect } from 'react';
+import React, { useMemo, useState } 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 { useFormContext } from '@digigov/form/FormBuilder';
 import {
   DateInputContainer,
   DateInputItem,
@@ -21,6 +21,7 @@ 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(' ');
@@ -119,112 +120,87 @@ const DateTimePart = ({ label, ...props }) => {
 
 export const DateTimeInput = ({ name, ...props }) => {
   const { t } = useTranslation();
-  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,
-      });
+  const [initial] = useState(props.value);
+  const value = useMemo(() => {
+    if (initial === props.value) {
+      return makeDateTime(props.value);
     }
-  }, []);
+    return props.value;
+  }, [props.value, initial]);
 
-  const value = form.getValues(name);
-  const dateTime = useDateTime(name, value, form);
+  const form = useFormContext();
+  const datetime = useDateTime(
+    name,
+    value || makeDateTime(props.defaultValue),
+    form
+  );
 
   return (
     <DateInputContainer>
       <DateTimePart
         label={t('form.label.day')}
-        onChange={dateTime.setDay}
-        onBlur={(e) => {
-          if (dateTime.day && dateTime.day.length === 1) {
-            dateTime.setDay(e, true);
-          }
-          dateTime.trigger();
-        }}
-        value={dateTime.day}
+        onChange={datetime.setDay}
+        onBlur={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={(e) => {
-          if (dateTime.month && dateTime.month.length === 1) {
-            dateTime.setMonth(e, true);
-          }
-          dateTime.trigger();
-        }}
-        value={dateTime.month}
+        onChange={datetime.setMonth}
+        onBlur={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={(e) => {
-          if (dateTime.hours && dateTime.hours.length === 1) {
-            dateTime.setHours(e, true);
-          }
-          dateTime.trigger();
-        }}
-        value={dateTime.hours}
+        onChange={datetime.setHours}
+        onBlur={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={(e) => {
-          if (dateTime.minutes && dateTime.minutes.length === 1) {
-            dateTime.setMinutes(e, true);
-          }
-          dateTime.trigger();
-        }}
-        value={dateTime.minutes}
+        onChange={datetime.setMinutes}
+        onBlur={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>
   );

package/src/inputs/FileInput/FileInput.stories.js

@@ -1,10 +1,7 @@
 import FileInput from '@digigov/form/inputs/FileInput';
-import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/inputs/FileInput',
   component: FileInput,
-  tags: ['autodocs'],
-  markdown: doc,
   displayName: 'FileInput',
 };
 export { Default } from '@digigov/form/inputs/FileInput/__stories__/Default';

package/src/inputs/FileInput/__stories__/Default.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const Default = (_: any) => (
+export const Default = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/FileInput/index.tsx

@@ -1,5 +1,4 @@
-import React, { ComponentRef, useCallback, useEffect, useState } from 'react';
-import { UseFormReturn, useWatch } from 'react-hook-form';
+import React, { useEffect, useState } from 'react';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
 import { Button, ButtonProps } from '@digigov/ui/form/Button';
 import {
@@ -11,7 +10,6 @@ import {
 import { useTranslation } from '@digigov/ui/i18n';
 import { Hint } from '@digigov/ui/typography/Hint';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
-
 export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
   extra?: {
     className?: string;
@@ -31,72 +29,32 @@ 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.forwardRef<
-  ComponentRef<typeof FileUpload>,
-  FileInputProps
->(function FileInput(
-  {
-    name,
-    disabled,
-    resetField,
-    extra,
-    control,
-    onChange,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    Field,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    reset,
-    ...props
-  },
-  ref
+export const FileInput: React.FC<any> = React.forwardRef(function FileInput(
+  { name, disabled, resetField, extra, onChange, value, ...props },
+  ref: any
 ) {
+  delete props.Field;
   const { t } = useTranslation();
-  const value: FileList = useWatch({ control, name });
 
-  const [filenames, setFilenames] = useState<string[] | undefined>(
-    Object.values(value || {}).map(({ name }) => name) || []
+  const [files, setFiles] = useState<string[] | undefined>(
+    Object.values(value || {})?.map?.(({ name }) => name) || []
   );
-
   useEffect(() => {
-    setFilenames(Object.values(value || {}).map(({ name }) => name));
+    setFiles(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={filenames && filenames.length > 0}
+        hasFiles={files && files.length > 0}
       >
-        {filenames?.length ? (
+        {files?.length ? (
           <>
             <Paragraph>
-              <b>{t('upload.file')}:</b> {`${filenames.join(', ')}`}
+              <b>{t('upload.file')}:</b> {`${files.join(', ')}`}
             </Paragraph>
           </>
         ) : (
@@ -110,31 +68,40 @@ export const FileInput = React.forwardRef<
         )}
         <FileUpload
           ref={ref}
-          hasFiles={!!filenames?.length}
+          hasFiles={!!files?.length}
           name={name}
           variant={extra?.uploadButtonProps?.variant}
           disabled={disabled}
           id={name}
-          onChange={handleChange}
-          {...{ ...props, required: undefined }}
+          value={value?.filename}
+          onChange={(event) => {
+            if (event?.target?.files && event?.target?.files.length > 0) {
+              onChange(event.target.files);
+            }
+          }}
+          {...{
+            ...props,
+            required: undefined,
+            error: undefined,
+          }}
         >
-          {filenames?.length
-            ? t('upload.change_file')
-            : t('upload.choose_file')}
+          {files?.length ? t('upload.change_file') : t('upload.choose_file')}
         </FileUpload>
-        {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>
-            </>
-          )}
+        {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>
+          </>
+        )}
       </FileUploadContainer>
     </>
   );

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

@@ -1,13 +1,9 @@
 import ImageInput from '@digigov/form/inputs/ImageInput';
-import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/inputs/ImageInput',
   component: ImageInput,
-  tags: ['autodocs'],
-  markdown: doc,
   displayName: 'ImageInput',
 };
 export { Default } from '@digigov/form/inputs/ImageInput/__stories__/Default';
-export { MaxSize } from '@digigov/form/inputs/ImageInput/__stories__/MaxSize';
 export { WithInvalidImageDimension } from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageDimension';
-export { WithInitialValues } from '@digigov/form/inputs/ImageInput/__stories__/WithInitialValues';
+export { MaxSize } from '@digigov/form/inputs/ImageInput/__stories__/MaxSize';

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

@@ -13,7 +13,7 @@ const FIELDS: FieldSpec[] = [
   },
 ];
 
-export const Default = (_: any) => (
+export const Default = () => (
   <FormBuilder
     fields={FIELDS}
     onSubmit={(data) => {

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

@@ -9,18 +9,17 @@ const FIELDS: FieldSpec[] = [
     required: true,
     label: {
       primary: 'Ανέβασμα φωτογραφίας',
-      secondary: 'Μέγιστο μέγεθος φωτογραφίας: 1KB.',
+      secondary: 'Μέγιστο μέγεθος φωτογραφίας: 10KB.',
     },
     extra: {
       limit: {
-        // bytes
         maxSize: 1000,
       },
     },
   },
 ];
 
-export const MaxSize = (_: any) => (
+export const MaxSize = () => (
   <FormBuilder
     fields={FIELDS}
     onSubmit={(data) => {

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

@@ -23,7 +23,7 @@ const FIELDS: FieldSpec[] = [
   },
 ];
 
-export const WithInvalidImageDimension = (_: any) => (
+export const WithInvalidImageDimension = () => (
   <FormBuilder
     fields={FIELDS}
     onSubmit={(data) => {

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

@@ -3,7 +3,6 @@ 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 { WithInitialValues } from '@digigov/form/inputs/ImageInput/__stories__/WithInitialValues';
 import { WithInvalidImageDimension } from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageDimension';
 
 test('renders the All ImageInput variants', async ({ mount, page }) => {
@@ -16,9 +15,6 @@ test('renders the All ImageInput variants', async ({ mount, page }) => {
     <TestVariant title="MaxSize">
       <MaxSize />
     </TestVariant>
-    <TestVariant title="WithInitialValues">
-      <WithInitialValues />
-    </TestVariant>
     <TestVariant title="WithInvalidImageDimension">
       <WithInvalidImageDimension />
     </TestVariant>