@digigov/form 2.0.0-d57821ba → 2.0.0-e7d30530

package/src/inputs/AutoCompleteInput/index.tsx

@@ -1,11 +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 { Hint } from '@digigov/ui/typography/Hint';
+import { Base } from '@digigov/ui/utils/Base';
 export interface AutoCompleteInputExtra
   extends Omit<
     UIAutoCompleteProps,
@@ -16,7 +17,7 @@ export interface AutoCompleteInputExtra
     | 'onConfirm'
     | 'dropdownArrow'
   > {
-  options: Array<FieldOptionProps>;
+  options: FieldOptionProps[];
 }
 
 export interface AutoCompleteInputProps
@@ -28,39 +29,43 @@ export interface AutoCompleteInputProps
 
 export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
   name,
-  extra: { options, multiple },
+  type,
+  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
-      multiple={multiple}
+    <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);
         }
@@ -68,10 +73,10 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
       templates={{
         suggestion({ label, value }) {
           return (
-            <div>
+            <Base as="div">
               {(label && label.primary && label.primary) || value}
               {label && label.secondary && <Hint>{label.secondary}</Hint>}
-            </div>
+            </Base>
           );
         },
         inputValue: (option) => {
@@ -85,6 +90,7 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
         ...props,
         reset: undefined,
         required: undefined,
+        Field: undefined,
       }}
       name={name}
       id={`${name}-id`}
@@ -93,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

@@ -1,29 +1,32 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
 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>
-  );
+    
+  <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',
-  });
+  // 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'>>;
 }
@@ -23,21 +25,17 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
   value,
   extra: { options, className },
   disabled,
-  fieldComponent: Field,
+  Field,
   ...props
 }) => {
   if (!value) value = [];
   const handleChange =
     (optionValue, idx, show) =>
     (evt): void => {
-      let newValue;
+      let newValue: any = [];
       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) {
@@ -56,7 +54,7 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
     Array<boolean>(options.length).fill(false)
   );
   return (
-    <CoreCheckboxes className={className}>
+    <Checkbox className={className}>
       {options.map(
         (
           {
@@ -73,6 +71,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 +81,7 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
                 ...props,
                 reset: undefined,
                 defaultValue: undefined,
+                error: undefined,
                 onBlur: undefined,
                 required: undefined,
                 'aria-describedby': undefined,
@@ -103,7 +103,7 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
           </React.Fragment>
         )
       )}
-    </CoreCheckboxes>
+    </Checkbox>
   );
 };
 

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();
 });