@digigov/form 2.0.0-07ee8440 → 2.0.0-0b806366

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/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/DateInput/__stories__/Default.tsx" />
+<code src="@digigov/form/src/inputs/DateInput/__stories__/Default.tsx" />

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,10 +14,26 @@ 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);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

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,31 +87,58 @@ 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`}
+        id={`${name}-day`}
         maxLength="2"
         disabled={props.disabled}
         aria-required={props['aria-required']}
@@ -109,10 +147,16 @@ 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`}
+        id={`${name}-month`}
         maxLength="2"
         disabled={props.disabled}
         aria-required={props['aria-required']}
@@ -121,9 +165,11 @@ 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`}
+        id={`${name}-year`}
         maxLength="4"
         disabled={props.disabled}
         aria-required={props['aria-required']}
@@ -131,6 +177,8 @@ export const DateInput = ({ name, ...props }) => {
       />
     </DateInputContainer>
   );
-};
+});
+
+DateInput.displayName = 'DateInput';
 
 export default DateInput;

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

@@ -1,8 +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__/Default.tsx

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

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,10 +14,26 @@ 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);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });