@digigov/form 1.2.0-dcbd7ded → 2.0.0-2445d5cb

package/src/Questions/index.mdx

@@ -87,11 +87,11 @@ const steps = [
     ],
   },
   {
-    name: 'bod',
+    name: 'dob',
     title: 'When is your birthday?',
     fields: [
       {
-        key: 'bod',
+        key: 'dob',
         label: {
           primary: 'Birthday',
         },
@@ -117,10 +117,10 @@ export default function Index() {
           <Field name="countries" />
         </StepForm>
       </Step>
-      <Step name="bod">
+      <Step name="dob">
         <StepTitle />
         <StepForm submitButton={true}>
-          <Field name="bod" />
+          <Field name="dob" />
         </StepForm>
       </Step>
     </Questions>

package/src/Questions/index.spec.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import { Field } from '@digigov/form';
 import { Step, StepForm, StepQuote, StepTitle } from '@digigov/form/Questions';
@@ -44,7 +44,7 @@ const steps = [
 
 it('renders the Questions', () => {
   expect(
-    mount(
+    render(
       <Questions
         name={'example'}
         onSubmit={(data): void => {
@@ -67,6 +67,6 @@ it('renders the Questions', () => {
           </StepForm>
         </Step>
       </Questions>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });

package/src/Questions/index.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/form/Questions/__stories__/Default';
+
+test('renders the All Questions variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/Questions/types.tsx

@@ -13,6 +13,7 @@ export interface QuestionsInterface {
   initialData?: any;
   localDraft?: boolean;
   errorLabels?: Record<string, string>;
+  children?: React.ReactNode;
 }
 
 export interface QuestionsContextInterface {

package/src/{FormBuilder/FormBuilder.tsx → index.tsx}

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useContext, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import Field from '@digigov/form/Field';
 import Fieldset from '@digigov/form/Fieldset';
@@ -8,8 +8,9 @@ import { FormBaseProps, FormData, FormBuilderProps } from '@digigov/form/types';
 import { yupResolver } from '@digigov/form/utils';
 import { useValidationSchema } from '@digigov/form/validators';
 import { Form } from '@digigov/react-core/Form';
+import { Button } from '@digigov/ui/form/Button';
 
-export const FormBase = React.forwardRef(function FormBase(
+const FormBase = React.forwardRef(function FormBase(
   {
     onSubmit,
     children,
@@ -43,6 +44,7 @@ export const FormBase = React.forwardRef(function FormBase(
     },
     [onSubmit]
   );
+  const submit = form.handleSubmit(handleSubmit);
 
   const ctx = {
     fieldsMap,
@@ -50,6 +52,7 @@ export const FormBase = React.forwardRef(function FormBase(
     control: form.control,
     register: form.register,
     watch: form.watch,
+    resetField: form.resetField,
     registerField: registerField,
     errors: form.formState.errors,
     formState: form.formState,
@@ -62,22 +65,26 @@ export const FormBase = React.forwardRef(function FormBase(
     unregister: form.unregister,
     componentRegistry,
     setError: form.setError,
+    formRef: ref,
+    submit,
   };
   return (
     <FormContext.Provider value={ctx}>
-      <Form
-        grid={grid}
-        onSubmit={form.handleSubmit(handleSubmit)}
-        ref={ref}
-        {...props}
-      >
+      <Form grid={grid} onSubmit={submit} ref={ref} {...props}>
         {children}
       </Form>
     </FormContext.Provider>
   );
 });
 
-export const FormBuilder = React.forwardRef(function FormBuilder(
+const useFormContext = () => {
+  return useContext(FormContext);
+};
+const useFormValues = () => {
+  const ctx = useFormContext();
+  return ctx.getValues();
+};
+const FormBuilder = React.forwardRef(function FormBuilder(
   {
     fields = [],
     fieldsets,
@@ -158,9 +165,14 @@ export const FormBuilder = React.forwardRef(function FormBuilder(
       {...props}
     >
       {fieldChildren}
+      {auto && <Button type="submit">Συνέχεια</Button>}
       {children}
     </FormBase>
   );
 });
 
+export { FormBase, useFormContext, useFormValues, FormBuilder };
+
+export * from '@digigov/form/internal';
+
 export default FormBuilder;

package/src/inputs/AutoCompleteInput/AutoComplete.stories.js

@@ -4,4 +4,5 @@ export default {
   component: AutoComplete,
   displayName: 'AutoCompleteInput',
 };
-export * from '@digigov/form/inputs/AutoCompleteInput/__stories__/Default';
+export { Default } from '@digigov/form/inputs/AutoCompleteInput/__stories__/Default';
+export { Multiple } from '@digigov/form/inputs/AutoCompleteInput/__stories__/Multiple';

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

@@ -1,13 +1,21 @@
-import React, { Suspense } from 'react';
+import React from 'react';
 import { Field } from '@digigov/form/Field';
 import FormBuilder from '@digigov/form/FormBuilder';
 import { FieldSpec } from '@digigov/form/types';
-import { results } from '@digigov/ui/form/AutoComplete/utils';
 import Button from '@digigov/ui/form/Button';
+
+const results = [
+  'Αμερική',
+  'Ασία',
+  'Αυστραλία',
+  'Αφρική',
+  'Ευρώπη',
+];
+
 const fields: FieldSpec[] = [
   {
     key: 'autocomplete',
-    label: { primary: 'An autocomplete field' },
+    label: { primary: 'Επιλέξτε ήπειρο' },
     required: true,
     type: 'choice:single',
     extra: {
@@ -16,7 +24,7 @@ const fields: FieldSpec[] = [
         return {
           label: {
             primary: r,
-            secondary: `Country: ${r}`,
+            secondary: `'Ηπειρος: ${r}`,
           },
           value: r.toLowerCase(),
         };
@@ -28,18 +36,19 @@ const fields: FieldSpec[] = [
 const initialValues = {};
 
 export const Default = () => (
-  <Suspense fallback={<div>loading</div>}>
-    <FormBuilder
-      fields={fields}
-      onSubmit={(data) => {
-        console.log(data);
-      }}
-      initial={initialValues}
-    >
-      {fields.map((field) => (
-        <Field key={field.key} name={field.key} />
-      ))}
-      <Button type="submit">Submit</Button>
-    </FormBuilder>
-  </Suspense>
+
+  <FormBuilder
+    fields={fields}
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+    initial={initialValues}
+  >
+    {fields.map((field) => (
+      <Field key={field.key} name={field.key} />
+    ))}
+    <Button type="submit">Submit</Button>
+  </FormBuilder>
+
 );
+export default Default;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Field } from '@digigov/form/Field';
+import FormBuilder from '@digigov/form/FormBuilder';
+import { FieldSpec } from '@digigov/form/types';
+import Button from '@digigov/ui/form/Button';
+
+const results = [
+  'Αμερική',
+  'Ασία',
+  'Αυστραλία',
+  'Αφρική',
+  'Ευρώπη',
+];
+
+const fields: FieldSpec[] = [
+  {
+    key: 'autocomplete',
+    label: { primary: 'Επιλέξτε ήπειρο' },
+    required: true,
+    type: 'choice:multiple',
+    extra: {
+      component: 'AutoComplete',
+      multiple: true,
+      options: results.map((r) => {
+        return {
+          label: {
+            primary: r,
+            secondary: `Ήπειρος: ${r}`,
+          },
+          value: r.toLowerCase(),
+        };
+      }),
+    },
+  },
+];
+
+const initialValues = {};
+
+export const Multiple = () => (
+  <FormBuilder
+    fields={fields}
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+    initial={initialValues}
+  >
+    {fields.map((field) => (
+      <Field key={field.key} name={field.key} />
+    ))}
+    <Button type="submit">Submit</Button>
+  </FormBuilder>
+);
+
+export default Multiple;

package/src/inputs/AutoCompleteInput/index.mdx

@@ -0,0 +1,29 @@
+---
+title: AutoComplete Input 
+---
+ 
+# AutoComplete input
+
+AutoCompleteInput element is an enhanced version of text input that shows suggested 
+options as the users type and also let them select an option from the list.
+
+## How to use
+
+### Default
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/AutoCompleteInput"
+  story="Default.tsx"
+/>
+
+### Display multiple values
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/AutoCompleteInput"
+  story="Multiple.tsx"
+/>
+
+
+

package/src/inputs/AutoCompleteInput/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/AutoCompleteInput/__stories__/Default';
+import { Multiple } from '@digigov/form/inputs/AutoCompleteInput/__stories__/Multiple';
+
+test('renders the All AutoCompleteInput variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="Multiple">
+      <Multiple />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/inputs/AutoCompleteInput/index.tsx

@@ -23,14 +23,15 @@ export interface AutoCompleteInputProps
   extends Omit<ControlledFieldProps, 'value' | 'onChange' | 'extra'> {
   extra: AutoCompleteInputExtra;
   value: string;
-  onChange: (v: string) => void;
+  onChange: (v: string | string[] | undefined) => void;
 }
 
 export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
   name,
-  extra: { options },
+  extra: { options, multiple },
   onChange,
   value,
+  error,
   ...props
 }) => {
   const suggest = useCallback(function suggest(
@@ -40,24 +41,29 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
     syncResults(
       query
         ? options.filter(function (option) {
-            return (
-              `${option.value} ${option.label?.primary || ''} ${
-                option.label?.secondary || ''
+          return (
+            `${option.value} ${option.label?.primary || ''} ${option.label?.secondary || ''
               }`
-                .toLowerCase()
-                .indexOf(query.toLowerCase()) !== -1
-            );
-          })
-        : []
+              .toLowerCase()
+              .indexOf(query.toLowerCase()) !== -1
+          );
+        })
+        : options
     );
   },
-  []);
+    [options]);
 
   return (
     <UIAutoComplete
+      multiple={multiple}
       source={suggest}
       onConfirm={(value) => {
-        onChange(value.value);
+        if (Array.isArray(value)) {
+          const selectedValues = value.map(item => item.value);
+          selectedValues.length > 0 ? onChange(selectedValues) : onChange(undefined);
+        } else {
+          onChange(value.value);
+        }
       }}
       templates={{
         suggestion({ label, value }) {
@@ -75,11 +81,16 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
           return option.label.primary || option.value;
         },
       }}
-      {...props}
+      {...{
+        ...props,
+        reset: undefined,
+        required: undefined,
+      }}
+      name={name}
       id={`${name}-id`}
       defaultValue={value}
     />
   );
 };
 
-export default AutoCompleteInput;
+export default AutoCompleteInput;

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

@@ -4,6 +4,6 @@ export default {
   component: Checkboxes,
   displayName: 'Checkboxes',
 };
-export * from '@digigov/form/inputs/Checkboxes/__stories__/Default';
-export * from '@digigov/form/inputs/Checkboxes/__stories__/WithDivider';
-export * from '@digigov/form/inputs/Checkboxes/__stories__/Conditional';
+export { Default } from '@digigov/form/inputs/Checkboxes/__stories__/Default';
+export { WithDivider } from '@digigov/form/inputs/Checkboxes/__stories__/WithDivider';
+export { Conditional } from '@digigov/form/inputs/Checkboxes/__stories__/Conditional';

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

@@ -6,7 +6,6 @@ const fields: FieldSpec[] = [
   {
     key: 'landline',
     type: 'phone_number',
-
     label: {
       secondary: 'Εισάγετε το νούμερο του σταθερού σας τηλεφώνου.',
     },
@@ -24,7 +23,6 @@ const fields: FieldSpec[] = [
   {
     key: 'mobile_phone',
     type: 'mobile_phone',
-
     label: {
       secondary: 'Εισάγετε το νούμερο του κινητού σας τηλεφώνου.',
     },
@@ -41,7 +39,6 @@ const fields: FieldSpec[] = [
   },
   {
     key: 'email',
-
     type: 'email',
     label: {
       secondary: 'Εισάγετε την διεύθυνση του ηλεκτρονικού σας ταχυδρομείου.',
@@ -98,3 +95,5 @@ export const Conditional = () => (
     <Button type="submit">Συνέχεια</Button>
   </FormBuilder>
 );
+
+export default Conditional;

package/src/inputs/Checkboxes/index.mdx

@@ -0,0 +1,33 @@
+---
+title: Checkbox
+---
+ 
+# Checkboxes
+Input element of type `checkbox` are rendered by default as boxes that are checked when activated.
+Checkboxes are used to let a user select one or more options of a limited number of choices.
+
+## How to use
+
+### Default
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Checkboxes"
+  story="Default.tsx"
+/>
+
+### Conditional
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Checkboxes"
+  story="Conditional.tsx"
+/>
+
+### With divider
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Checkboxes"
+  story="WithDivider.tsx"
+/>

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import { Conditional } from '@digigov/form/inputs/Checkboxes/__stories__/Conditional';
+import { Default } from '@digigov/form/inputs/Checkboxes/__stories__/Default';
+import { WithDivider } from '@digigov/form/inputs/Checkboxes/__stories__/WithDivider';
+import TestVariant from '@digigov/ui/utils/TestVariant';
+
+test('renders the All Checkboxes variants', async ({ mount, page }) => {
+  await mount(
+    <div>
+      <TestVariant title="Conditional">
+        <Conditional />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="WithDivider">
+        <WithDivider />
+      </TestVariant>
+    </div>
+  );
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});

package/src/inputs/Checkboxes/index.tsx

@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
-import { Field } from '@digigov/form';
 import { ControlledFieldProps } from '@digigov/form/Field/types';
 import { FieldOptionProps } from '@digigov/form/inputs/Label';
-import { CheckboxConditional } from '@digigov/react-core/CheckboxConditional';
 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 { useTranslation } from '@digigov/ui/i18n';
@@ -15,39 +14,43 @@ export interface CheckboxesProps
     className?: string;
     options: Array<FieldOptionProps>;
   };
+  fieldComponent: React.FC<Omit<ControlledFieldProps, 'value' | 'onChange'>>;
 }
 
-export const Checkboxes: React.FC<CheckboxesProps> = function Checkboxes({
+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))
-      );
-    }
+  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))
+        );
+      }
 
-    // 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)
@@ -69,7 +72,7 @@ export const Checkboxes: React.FC<CheckboxesProps> = function Checkboxes({
           <React.Fragment key={index}>
             <CheckboxItem
               key={`${name}.${index}`}
-              name={name}
+              name={`${name}.${v}`}
               value={v}
               disabled={disabled || optionDisabled}
               checked={value?.includes(v)}
@@ -89,7 +92,7 @@ export const Checkboxes: React.FC<CheckboxesProps> = function Checkboxes({
               {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
             </CheckboxItem>
 
-            {!!checked[index] && show && (
+            {!!checked[index] && show && Field && (
               <CheckboxConditional>
                 {show.map((fieldName) => (
                   <Field name={fieldName} key={fieldName} />

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

@@ -4,4 +4,4 @@ export default {
   component: DateInput,
   displayName: 'DateInput',
 };
-export * from '@digigov/form/inputs/DateInput/__stories__/Default';
+export { Default } from '@digigov/form/inputs/DateInput/__stories__/Default';