@digigov/form 2.0.0-76ec20a0 → 2.0.0-7d765d3c

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 type { 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,
   };
 }
 
@@ -76,28 +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 date = useDate(value || makeDate(props.defaultValue), props.onChange);
+  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={(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 +147,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 +165,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`}
@@ -134,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/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,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 type { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import { useFormContext } from '@digigov/form/FormContext';
 import {
   DateInputContainer,
   DateInputItem,
@@ -17,10 +18,9 @@ export interface DateTimeInputProps
   };
 }
 
-function useDateTime(value, onChange) {
+function useDateTime(name, value, form) {
   const [year, month, day, hours, minutes] = useMemo(() => {
     if (!value || value.length === 0) {
-      onChange('');
       return ['', '', '', '', ''];
     }
     const [datePart, timePart] = value.split(' ');
@@ -29,15 +29,19 @@ function useDateTime(value, onChange) {
     return [year, month, day, hours, minutes];
   }, [value]);
 
+  function update(value) {
+    form.setValue(name, value, { shouldValidate: false });
+  }
+
   function set(year, month, day, hours, minutes) {
     const datePart = `${day || ''}/${month || ''}/${year || ''}`;
     const timePart = hours || minutes ? `${hours || ''}:${minutes || ''}` : '';
     const value = timePart ? `${datePart} ${timePart}` : datePart;
 
     if (!year && !month && !day && !hours && !minutes) {
-      onChange(null);
+      update('');
     } else {
-      onChange(value);
+      update(value);
     }
   }
 
@@ -78,6 +82,12 @@ function useDateTime(value, onChange) {
     set(year, month, day, hours, val);
   }
 
+  function trigger() {
+    if (form.formState.isSubmitted) {
+      form.trigger(name);
+    }
+  }
+
   return {
     day,
     month,
@@ -89,6 +99,7 @@ function useDateTime(value, onChange) {
     setDay,
     setHours,
     setMinutes,
+    trigger,
   };
 }
 
@@ -102,93 +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 datetime = useDateTime(
-    value || makeDateTime(props.defaultValue),
-    props.onChange
-  );
+  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={(e) => datetime.setDay(e, true)}
-        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={(e) => datetime.setMonth(e, true)}
-        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}
-        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) => datetime.setHours(e, true)}
-        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={(e) => datetime.setMinutes(e, true)}
-        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/FileInput.stories.js

@@ -8,3 +8,4 @@ export default {
   displayName: 'FileInput',
 };
 export { Default } from '@digigov/form/inputs/FileInput/__stories__/Default';
+export { WithBorderAndLink } from '@digigov/form/inputs/FileInput/__stories__/WithBorderAndLink';

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+export const WithBorderAndLink = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+  >
+    <Field
+      key={'string'}
+      name="file"
+      type="file"
+      required
+      extra={{
+        containerProps: {
+          variant: 'border',
+        },
+        uploadButtonProps: {
+          variant: 'link',
+        },
+        resetButtonProps: {
+          variant: 'link',
+          color: 'warning',
+        },
+      }}
+      label={{ primary: 'Βιογραφικό σημείωμα' }}
+    />
+    <Button>Συνέχεια</Button>
+  </FormBuilder>
+);
+
+export default WithBorderAndLink;

package/src/inputs/FileInput/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/FileInput/__stories__/Default';
+import { WithBorderAndLink } from '@digigov/form/inputs/FileInput/__stories__/WithBorderAndLink';
 
 test('renders the All FileInput variants', async ({ mount, page }) => {
   await mount(
@@ -10,6 +11,9 @@ test('renders the All FileInput variants', async ({ mount, page }) => {
     <TestVariant title="Default">
       <Default />
     </TestVariant>
+    <TestVariant title="WithBorderAndLink">
+      <WithBorderAndLink />
+    </TestVariant>
   </div>
   )
   await page.evaluate(() => document.fonts.ready);