@digigov/form 2.0.0-2445d5cb → 2.0.0-264e5fff

package/src/inputs/Checkboxes/index.tsx

@@ -1,110 +1,121 @@
 import React, { useState } from 'react';
-import { ControlledFieldProps } from '@digigov/form/Field/types';
-import { FieldOptionProps } from '@digigov/form/inputs/Label';
-import CoreCheckboxes from '@digigov/react-core/Checkbox';
-import { CheckboxConditional } from '@digigov/react-core/CheckboxConditional';
-import CheckboxItem from '@digigov/react-core/CheckboxItem';
-import Hint from '@digigov/react-core/Hint';
+import type { UseFormReturn } from 'react-hook-form';
+import type { ControlledFieldProps } from '@digigov/form/Field/types';
+import type { FieldOptionProps } from '@digigov/form/inputs/Label';
+import { omit } from '@digigov/form/utils';
+import {
+  Checkbox,
+  CheckboxItem,
+  CheckboxConditional,
+} from '@digigov/ui/form/Checkbox';
 import { useTranslation } from '@digigov/ui/i18n';
+import { Hint } from '@digigov/ui/typography/Hint';
 
 export interface CheckboxesProps
   extends Omit<ControlledFieldProps, 'extra' | 'value'> {
   value?: string[];
   extra: {
     className?: string;
-    options: Array<FieldOptionProps>;
+    options: FieldOptionProps[];
   };
   fieldComponent: React.FC<Omit<ControlledFieldProps, 'value' | 'onChange'>>;
+  resetField: UseFormReturn['resetField'];
 }
 
-export const Checkboxes: React.FC<CheckboxesProps> = ({
-  name,
-  onChange,
-  value,
-  extra: { options, className },
-  disabled,
-  fieldComponent: Field,
-  ...props
-}) => {
-  if (!value) value = [];
-  const handleChange =
-    (optionValue, idx, show) =>
-    (evt): void => {
-      let newValue;
-      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) {
-        setChecked((items) =>
-          items.map((item, index) => (index === idx ? !item : item))
-        );
-      }
+export const Checkboxes = React.forwardRef<HTMLInputElement, CheckboxesProps>(
+  (
+    {
+      name,
+      onChange,
+      value,
+      extra: { options, className },
+      disabled,
+      Field,
+      ...props
+    },
+    ref
+  ) => {
+    if (!value) value = [];
+    const handleChange =
+      (optionValue, idx, show) =>
+      (evt): void => {
+        let newValue: any = [];
+        if (evt.currentTarget.checked) {
+          newValue = value.concat([optionValue]);
+        } else {
+          newValue = value.filter((val) => val !== optionValue);
+        }
+        if (show && show.length > 0) {
+          setChecked((items) =>
+            items.map((item, index) => (index === idx ? !item : item))
+          );
+        }
 
-      // reset value to undefined instead of an empty array
-      // so the error state mechanism can throw validation errors
-      if (newValue.length === 0) newValue = undefined;
-      onChange(newValue);
-    };
-  const { t } = useTranslation();
-  const [checked, setChecked] = useState(
-    Array<boolean>(options.length).fill(false)
-  );
-  return (
-    <CoreCheckboxes className={className}>
-      {options.map(
-        (
-          {
-            label,
-            value: v,
-            show,
-            disabled: optionDisabled,
-            selected,
-            ...option
-          },
-          index
-        ) => (
-          <React.Fragment key={index}>
-            <CheckboxItem
-              key={`${name}.${index}`}
-              name={`${name}.${v}`}
-              value={v}
-              disabled={disabled || optionDisabled}
-              checked={value?.includes(v)}
-              onChange={handleChange(v, index, show)}
-              {...option}
-              {...{
-                ...props,
-                reset: undefined,
-                defaultValue: undefined,
-                onBlur: undefined,
-                required: undefined,
-                'aria-describedby': undefined,
-                type: 'checkbox',
-              }}
-            >
-              {(label && label.primary && t(label.primary)) || value}
-              {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
-            </CheckboxItem>
+        // reset value to undefined instead of an empty array
+        // so the error state mechanism can throw validation errors
+        if (newValue.length === 0) newValue = undefined;
+        onChange(newValue);
+      };
+    const { t } = useTranslation();
+    const [checked, setChecked] = useState(
+      Array<boolean>(options.length).fill(false)
+    );
+    return (
+      <Checkbox className={className}>
+        {options.map(
+          (
+            {
+              label,
+              value: v,
+              show,
+              disabled: optionDisabled,
+              selected,
+              ...option
+            },
+            index
+          ) => (
+            <React.Fragment key={index}>
+              <CheckboxItem
+                ref={index === 0 ? ref : undefined}
+                key={`${name}.${index}`}
+                name={`${name}.${v}`}
+                id={`${name}.${v}`}
+                value={v}
+                disabled={disabled || optionDisabled}
+                checked={value?.includes(v)}
+                onChange={handleChange(v, index, show)}
+                {...option}
+                {...{
+                  ...omit(props, ['resetField']),
+                  reset: undefined,
+                  defaultValue: undefined,
+                  error: undefined,
+                  onBlur: undefined,
+                  required: undefined,
+                  'aria-describedby': undefined,
+                  type: 'checkbox',
+                }}
+              >
+                {(label && label.primary && t(label.primary)) || value}
+                {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
+              </CheckboxItem>
 
-            {!!checked[index] && show && Field && (
-              <CheckboxConditional>
-                {show.map((fieldName) => (
-                  <Field name={fieldName} key={fieldName} />
-                ))}
-              </CheckboxConditional>
-            )}
-            {selected && selected()}
-          </React.Fragment>
-        )
-      )}
-    </CoreCheckboxes>
-  );
-};
+              {!!checked[index] && show && Field && (
+                <CheckboxConditional>
+                  {show.map((fieldName) => (
+                    <Field name={fieldName} key={fieldName} />
+                  ))}
+                </CheckboxConditional>
+              )}
+              {selected && selected()}
+            </React.Fragment>
+          )
+        )}
+      </Checkbox>
+    );
+  }
+);
+
+Checkboxes.displayName = 'Checkboxes';
 
 export default Checkboxes;

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

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

@@ -9,21 +9,16 @@ const fields = [
     required: true,
     label: {
       primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
-      secondary:
-        'Για παράδειγμα, 05 11 2020',
-    }
-  },
-]
+      secondary: 'Για παράδειγμα, 05 11 2020',
+    },
+  } as const,
+];
 
-export const Default = () => (
+export const Default = (_: any) => (
   <FormBuilder onSubmit={() => console.log('kati')}>
-    {fields.map((field) => {
-      return (
-        // @ts-ignore
-        <Field {...field} name={field.key} />
-      )
-    }
-    )}
+    {fields.map(({ key, ...field }) => {
+      return <Field {...field} name={key} key={key} />;
+    })}
     <Button type="submit">Συνέχεια</Button>
   </FormBuilder>
 );

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.mdx → doc.mdx}

@@ -13,11 +13,4 @@ either with a textbox that validates the input or a special date picker interfac
 
 ### Default
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/DateInput"
-  story="Default.tsx"
-/>
-
-
-
+<code src="@digigov/form/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,9 +1,12 @@
-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 DateInputContainer from '@digigov/react-core/DateInputContainer';
-import CoreDateInputItem from '@digigov/react-core/DateInputItem';
+import type { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import { useFormContext } from '@digigov/form/FormContext';
+import {
+  DateInputContainer,
+  DateInputItem,
+} from '@digigov/ui/form/DateInputContainer';
 import { useTranslation } from '@digigov/ui/i18n';
 dayjs.extend(customParseFormat);
 
@@ -14,32 +17,35 @@ 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);
     }
   }
 
   function setYear(evt) {
-    const val = evt.target.value;
+    const val = evt.target.value.trim();
     set(val, month, day);
   }
 
   function setMonth(evt, cast) {
-    let val = evt.target.value;
+    let val = evt.target.value.trim();
     if (cast && val && val.length === 1) {
       val = '0' + val;
     }
@@ -47,13 +53,19 @@ function useDate(value, onChange) {
   }
 
   function setDay(evt, cast) {
-    let val = evt.target.value;
+    let val = evt.target.value.trim();
     if (cast && val && val.length === 1) {
       val = '0' + val;
     }
     set(year, month, val);
   }
 
+  function trigger() {
+    if (form.formState.isSubmitted) {
+      form.trigger(name);
+    }
+  }
+
   return {
     day,
     month,
@@ -61,6 +73,7 @@ function useDate(value, onChange) {
     setYear,
     setMonth,
     setDay,
+    trigger,
   };
 }
 
@@ -74,31 +87,58 @@ const makeDate = (val) => {
   return '';
 };
 
-const DatePart = ({ label, ...props }) => {
-  return <CoreDateInputItem {...props}>{label}</CoreDateInputItem>;
-};
+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, type, ...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']}
@@ -107,10 +147,16 @@ export const DateInput = ({ name, type, ...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']}
@@ -119,9 +165,11 @@ export const DateInput = ({ name, type, ...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']}
@@ -129,6 +177,8 @@ export const DateInput = ({ name, type, ...props }) => {
       />
     </DateInputContainer>
   );
-};
+});
+
+DateInput.displayName = 'DateInput';
 
 export default DateInput;

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

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

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