@digigov/form 2.0.0-36b707c1 → 2.0.0-44e7106a

package/src/inputs/AutoCompleteInput/{index.mdx → doc.mdx}

@@ -11,19 +11,8 @@ options as the users type and also let them select an option from the list.
 
 ### Default
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/AutoCompleteInput"
-  story="Default.tsx"
-/>
+<code src="@digigov/form/inputs/AutoCompleteInput/__stories__/Default.tsx" />
 
 ### Display multiple values
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/AutoCompleteInput"
-  story="Multiple.tsx"
-/>
-
-
-
+<code src="@digigov/form/inputs/AutoCompleteInput/__stories__/Multiple.tsx" />

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

@@ -18,6 +18,10 @@ test('renders the All AutoCompleteInput variants', async ({ mount, page }) => {
   )
   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/AutoCompleteInput/index.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback } from 'react';
 import { ControlledFieldProps } from '@digigov/form/Field/types';
 import { FieldOptionProps } from '@digigov/form/inputs/Label';
-import { Hint } from '@digigov/react-core/Hint';
-import UIAutoComplete, {
+import {
+  AutoComplete,
   AutoCompleteProps as UIAutoCompleteProps,
 } from '@digigov/ui/form/AutoComplete';
-import { Base } from '@digigov/react-core/Base';
-
+import { Hint } from '@digigov/ui/typography/Hint';
+import { Base } from '@digigov/ui/utils/Base';
 export interface AutoCompleteInputExtra
   extends Omit<
     UIAutoCompleteProps,
@@ -17,7 +17,7 @@ export interface AutoCompleteInputExtra
     | 'onConfirm'
     | 'dropdownArrow'
   > {
-  options: Array<FieldOptionProps>;
+  options: FieldOptionProps[];
 }
 
 export interface AutoCompleteInputProps
@@ -33,36 +33,39 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
   extra: { options },
   onChange,
   value,
-  error,
   ...props
 }) => {
-  const suggest = useCallback(function suggest(
-    query: string,
-    syncResults: (options: any[]) => void
-  ): void {
-    syncResults(
-      query
-        ? options.filter(function (option) {
-          return (
-            `${option.value} ${option.label?.primary || ''} ${option.label?.secondary || ''
-              }`
-              .toLowerCase()
-              .indexOf(query.toLowerCase()) !== -1
-          );
-        })
-        : options
-    );
-  },
-    [options]);
+  const suggest = useCallback(
+    function suggest(
+      query: string,
+      syncResults: (options: any[]) => void
+    ): void {
+      syncResults(
+        query
+          ? options.filter(function (option) {
+              return (
+                `${option.value} ${option.label?.primary || ''} ${
+                  option.label?.secondary || ''
+                }`
+                  .toLowerCase()
+                  .indexOf(query.toLowerCase()) !== -1
+              );
+            })
+          : options
+      );
+    },
+    [options]
+  );
 
   return (
-    <UIAutoComplete
+    <AutoComplete
       multiple={type === 'choice:multiple' ? true : false}
       source={suggest}
       onConfirm={(value) => {
         if (Array.isArray(value)) {
-          const selectedValues = value.map(item => item.value);
-          selectedValues.length > 0 ? onChange(selectedValues) : onChange(undefined);
+          const selectedValues = value.map((item) => item.value);
+          if (selectedValues.length > 0) onChange(selectedValues);
+          else onChange(undefined);
         } else {
           onChange(value.value);
         }
@@ -87,6 +90,7 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
         ...props,
         reset: undefined,
         required: undefined,
+        Field: undefined,
       }}
       name={name}
       id={`${name}-id`}
@@ -95,4 +99,4 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
   );
 };
 
-export default AutoCompleteInput;
+export default AutoCompleteInput;

package/src/inputs/Checkboxes/Checkboxes.stories.js

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

package/src/inputs/Checkboxes/__stories__/Conditional.tsx

@@ -84,7 +84,7 @@ const fields: FieldSpec[] = [
   },
 ];
 
-export const Conditional = () => (
+export const Conditional = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Checkboxes/__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 = () => (
+export const Default = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Checkboxes/__stories__/WithDivider.tsx

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

package/src/inputs/Checkboxes/{index.mdx → doc.mdx}

@@ -10,24 +10,14 @@ Checkboxes are used to let a user select one or more options of a limited number
 
 ### Default
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/Checkboxes"
-  story="Default.tsx"
-/>
+<code src="@digigov/form/inputs/Checkboxes/__stories__/Default.tsx" />
+
 
 ### Conditional
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/Checkboxes"
-  story="Conditional.tsx"
-/>
+<code src="@digigov/form/inputs/Checkboxes/__stories__/Conditional.tsx" />
+
 
 ### With divider
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/Checkboxes"
-  story="WithDivider.tsx"
-/>
+<code src="@digigov/form/inputs/Checkboxes/__stories__/WithDivider.tsx" />

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

@@ -22,6 +22,10 @@ test('renders the All Checkboxes variants', async ({ mount, page }) => {
   )
   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/Checkboxes/index.tsx

@@ -1,18 +1,20 @@
 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 {
+  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'>>;
 }
@@ -29,34 +31,34 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
   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))
-          );
-        }
+    (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))
+        );
+      }
 
-        // 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);
-      };
+      // 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}>
+    <Checkbox className={className}>
       {options.map(
         (
           {
@@ -73,6 +75,7 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
             <CheckboxItem
               key={`${name}.${index}`}
               name={`${name}.${v}`}
+              id={`${name}.${v}`}
               value={v}
               disabled={disabled || optionDisabled}
               checked={value?.includes(v)}
@@ -82,6 +85,7 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
                 ...props,
                 reset: undefined,
                 defaultValue: undefined,
+                error: undefined,
                 onBlur: undefined,
                 required: undefined,
                 'aria-describedby': undefined,
@@ -103,7 +107,7 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
           </React.Fragment>
         )
       )}
-    </CoreCheckboxes>
+    </Checkbox>
   );
 };
 

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

@@ -1,7 +1,10 @@
 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';

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/{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

@@ -14,6 +14,10 @@ test('renders the All DateInput variants', async ({ mount, page }) => {
   )
   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

@@ -2,8 +2,11 @@ import React, { useMemo, useState } 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 { useFormContext } from '@digigov/form/FormBuilder';
+import {
+  DateInputContainer,
+  DateInputItem,
+} from '@digigov/ui/form/DateInputContainer';
 import { useTranslation } from '@digigov/ui/i18n';
 dayjs.extend(customParseFormat);
 
@@ -14,32 +17,36 @@ 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('');
+      update('');
       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 +54,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 +74,7 @@ function useDate(value, onChange) {
     setYear,
     setMonth,
     setDay,
+    trigger,
   };
 }
 
@@ -75,10 +89,10 @@ const makeDate = (val) => {
 };
 
 const DatePart = ({ label, ...props }) => {
-  return <CoreDateInputItem {...props}>{label}</CoreDateInputItem>;
+  return <DateInputItem {...props}>{label}</DateInputItem>;
 };
 
-export const DateInput = ({ name, type, ...props }) => {
+export const DateInput = ({ name, ...props }) => {
   const { t } = useTranslation();
   const [initial] = useState(props.value);
   const value = useMemo(() => {
@@ -88,17 +102,19 @@ export const DateInput = ({ name, type, ...props }) => {
     return props.value;
   }, [props.value, initial]);
 
-  const date = useDate(value || makeDate(props.defaultValue), props.onChange);
+  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) => date.setDay(e, true)}
+        onBlur={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 +123,11 @@ export const DateInput = ({ name, type, ...props }) => {
       <DatePart
         label={t('form.label.month')}
         onChange={date.setMonth}
-        onBlur={(e) => date.setMonth(e, true)}
+        onBlur={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 +136,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']}

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

@@ -0,0 +1,11 @@
+import { Default } from './__stories__/Default';
+import doc from './doc.mdx?raw';
+
+export default {
+  title: 'Form/Inputs/DateTimeInput',
+  component: Default,
+  tags: ['autodocs'],
+  markdown: doc,
+};
+
+export { Default };

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;

package/src/inputs/DateTimeInput/doc.mdx

@@ -0,0 +1,16 @@
+---
+title: DateTime Input
+---
+ 
+# DateTime input
+
+
+
+Input element of type `datetime` create input fields that let the user enter a date and time, 
+either with a textbox that validates the input or a special date picker interface.
+
+## How to use
+
+### Default
+
+<code src="@digigov/form/inputs/DateTimeInput/__stories__/Default.tsx" />

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

@@ -0,0 +1,24 @@
+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';
+
+test('renders the All DateTimeInput variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </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();
+});
+