@digigov/form 2.0.0-834daea4 → 2.0.0-87b6232d

package/src/Questions/doc.mdx

@@ -14,6 +14,7 @@ import {
   TableDataCell,
 } from '@digigov/react-core';
 
+# Questions
 
 Question pages are used to ask users meaningful questions needed by your
 GOV.GR service, or even gather data about their persona or their application
@@ -46,7 +47,7 @@ import { Field } from '@digigov/form';
 const steps = [
   {
     name: 'residency',
-    title: 'Where do you live?',
+    title: 'Που μένετε;',
     fields: [
       {
         key: 'countries',
@@ -56,25 +57,25 @@ const steps = [
           options: [
             {
               label: {
-                primary: 'Greece',
+                primary: 'Ελλάδα',
               },
               value: 'greece',
             },
             {
               label: {
-                primary: 'Cyprus',
+                primary: 'Κύπρος',
               },
               value: 'cyprus',
             },
             {
               label: {
-                primary: 'European Union',
+                primary: 'Ευρωπαϊκή Ένωση',
               },
               value: 'eu',
             },
             {
               label: {
-                primary: 'United States of America',
+                primary: 'Ηνωμένες Πολιτείες της Αμερικής',
               },
               value: 'usa',
             },
@@ -85,12 +86,12 @@ const steps = [
   },
   {
     name: 'dob',
-    title: 'When is your birthday?',
+    title: 'Ποια είναι ημερομηνία γέννησής σας;',
     fields: [
       {
         key: 'dob',
         label: {
-          primary: 'Birthday',
+          primary: 'Ημερομηνία γέννησης',
         },
         type: 'date',
         required: true,
@@ -184,7 +185,7 @@ object. The most basic properties are the following:
 ```json pure title="step-name.json"
 {
   "name": "name",
-  "title": "What is your name?",
+  "title": "Ποιο είναι το όνομά σας;",
   "fields": [
     {
       "key": "name",
@@ -210,7 +211,7 @@ the next `step`.
 const steps = [
   {
     name: 'age',
-    title: 'What is your age?',
+    title: 'Ποια είναι η ηλικία σας?',
     fields: [
       {
         key: 'age',
@@ -226,13 +227,13 @@ const steps = [
   },
   {
     name: 'citizen-underage',
-    title: 'Are you a student?',
+    title: 'Είστε μαθητής;',
     fields: [ ... ]
   },
   {
     // highlight-next-line
     name: 'citizen-adult',
-    title: 'Are you currently employed?',
+    title: 'Εργάζεστε;',
     fields: [
       {
         key: 'citizen-underage-employed',
@@ -242,11 +243,11 @@ const steps = [
           options: [
             {
               label: {primary: "Yes"},
-              value: 'yes',
+              value: 'Ναι',
             },
             {
               label: {primary: "No"},
-              value: 'no',
+              value: 'ΌΧι',
             }
           ]
         }
@@ -280,7 +281,7 @@ import TranslatorsHeader from 'translators-landing/components/TranslatorsHeader'
 const steps = [
   {
     name: 'age',
-    title: 'What is your age?',
+    title: 'Ποια είναι η ηλικία σας;',
     fields: [
       {
         key: 'age',
@@ -294,7 +295,7 @@ const steps = [
   },
   {
     name: 'citizen-underage',
-    title: 'Are you a student?',
+    title: 'Είστε μαθητής;',
     fields: [
       {
         key: 'citizen-underage-student',
@@ -303,11 +304,11 @@ const steps = [
         extra: {
           options: [
             {
-              label: { primary: 'Yes' },
+              label: { primary: 'Ναι' },
               value: 'yes',
             },
             {
-              label: { primary: 'No' },
+              label: { primary: 'Όχι' },
               value: 'no',
             },
           ],
@@ -317,7 +318,7 @@ const steps = [
   },
   {
     name: 'citizen-adult',
-    title: 'Are you currently employed?',
+    title: 'Εργάζεστε;',
     fields: [
       {
         key: 'citizen-adult-employed',
@@ -326,11 +327,11 @@ const steps = [
         extra: {
           options: [
             {
-              label: { primary: 'Yes' },
+              label: { primary: 'Ναι' },
               value: 'yes',
             },
             {
-              label: { primary: 'No' },
+              label: { primary: 'Όχι' },
               value: 'no',
             },
           ],
@@ -389,24 +390,3 @@ export default function Index() {
   );
 }
 ```
-
-## Prop types
-
-<TableContainer>
-  <Table>
-    <TableHead>
-      <TableRow>
-        <TableHeadCell>Περίοδος</TableHeadCell>
-        <TableHeadCell>Κανονικό ποσό</TableHeadCell>
-        <TableHeadCell>Μειωμένο ποσό</TableHeadCell>
-      </TableRow>
-    </TableHead>
-    <TableBody>
-      <TableRow>
-        <TableDataCell>Πρώτες 6 εβδομάδες </TableDataCell>
-        <TableDataCell> €109.80 / εβδομάδα</TableDataCell>
-        <TableDataCell> €69.80 / εβδομάδα</TableDataCell>
-      </TableRow>
-    </TableBody>
-  </Table>
-</TableContainer>

package/src/Questions/index.spec.tsx

@@ -2,8 +2,12 @@ import * as React from 'react';
 import { render } from '@testing-library/react';
 
 import { Field } from '@digigov/form';
-import { Step, StepForm, StepQuote, StepTitle } from '@digigov/form/Questions';
-import Questions from '@digigov/form/Questions';
+import Questions, {
+  Step,
+  StepForm,
+  StepQuote,
+  StepTitle,
+} from '@digigov/form/Questions';
 
 const steps = [
   {
@@ -42,6 +46,14 @@ const steps = [
   },
 ];
 
+beforeAll(() => {
+  global.ResizeObserver = class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  };
+});
+
 it('renders the Questions', () => {
   expect(
     render(

package/src/Questions/index.test.tsx

@@ -14,6 +14,10 @@ test('renders the All Questions 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/doc.mdx

@@ -1,16 +1,16 @@
 ---
 id: Introduction
-title: Digigov Form
-sidebar_label: Introduction to Digigov Form
 ---
 
+# Digigov form
+
 Digigov Form is an off-the-shelf solution for managing web forms using
 Reactjs. It supports flexible and multi-step forms and easy-to-use validation.
 This page will guide you through everything you need to create accessible and
 dynamic forms that can handle all sorts of user inputs.
 
 <img
-  src="/img/form.svg"
+  src="/tmp/form.svg"
   style={{ margin: '3rem 0', maxWidth: '450px', width: '60%' }}
 />
 
@@ -30,18 +30,33 @@ will be able to save via an JSON API.
 The `@digigov/form` NPM package contains React components and validators. The
 library uses basic, semantically correct HTML5 input fields.
 
-It adds dynamic control, interactivity and validations to the core input
-components implemented in `@digigov/react-core`. Styling is provided by
-`@digigov/css` library following the [GOV.GR design
-system](https://guide.services.gov.gr).
+### 📦 Installation
+
+```sh
+yarn add @digigov/form
+
+```
+
+Or using npm:
+
+```sh
+npm install i @digigov/form
 
-Digigov Form uses two main libraries internally. The first is [React Hook
-Form](https://www.react-hook-form.com/) which helps us manage the form state and
-perform actions and mutations on it. The second is
-[Yup](https://github.com/jquense/yup) and it is used to validate form data. It
+```
+
+`digigov/form` is a **form management solution** which adds dynamic control while simplifies handling user input, based on:
+
+✅ [React Hook Form](https://www.react-hook-form.com/) which helps us manage the form state and
+perform actions and mutations on it.
+
+🛠️ [Yup](https://github.com/jquense/yup) and it is used to validate form data. It
 interfaces with React Hook Form right out of the box, but also enables us to
 define custom validation types such as AMKA, AFM etc.
 
+🔄 [Multi-step](/components/@digigov/form/Questions) forms for complex workflows.
+
+🔗 [digigov/form](/components/@digigov/form/FormBuilder) components for a consistent UI.
+
 Some basic functionalites of `@digigov/form` will be presented in the following
 sections and also we are going to guide you through some more advanced topics
 such as internationalisation, custom data validation etc.

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

@@ -4,13 +4,7 @@ import FormBuilder from '@digigov/form/FormBuilder';
 import { FieldSpec } from '@digigov/form/types';
 import Button from '@digigov/ui/form/Button';
 
-const results = [
-  'Αμερική',
-  'Ασία',
-  'Αυστραλία',
-  'Αφρική',
-  'Ευρώπη',
-];
+const results = ['Αμερική', 'Ασία', 'Αυστραλία', 'Αφρική', 'Ευρώπη'];
 
 const fields: FieldSpec[] = [
   {
@@ -36,7 +30,6 @@ const fields: FieldSpec[] = [
 const initialValues = {};
 
 export const Default = () => (
-
   <FormBuilder
     fields={fields}
     onSubmit={(data) => {
@@ -49,6 +42,5 @@ export const Default = () => (
     ))}
     <Button type="submit">Submit</Button>
   </FormBuilder>
-
 );
-export default Default;
+export default Default;

package/src/inputs/AutoCompleteInput/__stories__/Multiple.tsx

@@ -4,13 +4,7 @@ import FormBuilder from '@digigov/form/FormBuilder';
 import { FieldSpec } from '@digigov/form/types';
 import Button from '@digigov/ui/form/Button';
 
-const results = [
-  'Αμερική',
-  'Ασία',
-  'Αυστραλία',
-  'Αφρική',
-  'Ευρώπη',
-];
+const results = ['Αμερική', 'Ασία', 'Αυστραλία', 'Αφρική', 'Ευρώπη'];
 
 const fields: FieldSpec[] = [
   {

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

@@ -17,7 +17,7 @@ export interface AutoCompleteInputExtra
     | 'onConfirm'
     | 'dropdownArrow'
   > {
-  options: Array<FieldOptionProps>;
+  options: FieldOptionProps[];
 }
 
 export interface AutoCompleteInputProps
@@ -33,7 +33,6 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
   extra: { options },
   onChange,
   value,
-  error,
   ...props
 }) => {
   const suggest = useCallback(
@@ -65,9 +64,8 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
       onConfirm={(value) => {
         if (Array.isArray(value)) {
           const selectedValues = value.map((item) => item.value);
-          selectedValues.length > 0
-            ? onChange(selectedValues)
-            : onChange(undefined);
+          if (selectedValues.length > 0) onChange(selectedValues);
+          else onChange(undefined);
         } else {
           onChange(value.value);
         }
@@ -92,6 +90,7 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
         ...props,
         reset: undefined,
         required: undefined,
+        Field: undefined,
       }}
       name={name}
       id={`${name}-id`}

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

@@ -14,7 +14,7 @@ export interface CheckboxesProps
   value?: string[];
   extra: {
     className?: string;
-    options: Array<FieldOptionProps>;
+    options: FieldOptionProps[];
   };
   fieldComponent: React.FC<Omit<ControlledFieldProps, 'value' | 'onChange'>>;
 }
@@ -48,9 +48,6 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
         );
       }
 
-      // 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();
@@ -75,6 +72,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)}
@@ -84,6 +82,7 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
                 ...props,
                 reset: undefined,
                 defaultValue: undefined,
+                error: undefined,
                 onBlur: undefined,
                 required: undefined,
                 'aria-describedby': undefined,

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 = () => (
   <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.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,6 +2,7 @@ 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/FormBuilder';
 import {
   DateInputContainer,
   DateInputItem,
@@ -16,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;
     }
@@ -49,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,
@@ -63,6 +74,7 @@ function useDate(value, onChange) {
     setYear,
     setMonth,
     setDay,
+    trigger,
   };
 }
 
@@ -80,7 +92,7 @@ const DatePart = ({ label, ...props }) => {
   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(() => {
@@ -90,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']}
@@ -109,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']}
@@ -121,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,8 @@
+import { Default } from './__stories__/Default';
+
+export default {
+  title: 'Form/Inputs/DateTimeInput',
+  component: Default,
+};
+
+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 = () => (
+  <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" />