@digigov/form 2.0.0-b15d5d44 → 2.0.0-b19b7fe2

package/src/FormBuilder/index.tsx

@@ -1,16 +1,14 @@
 import React, { useCallback, useContext, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import { Field } from '@digigov/form/Field';
-import { ErrorGroup } from '@digigov/form/Field/ErrorGroup';
 import { CONTROLLED_FIELD_COMPONENTS } from '@digigov/form/Field/utils';
-import { FieldsetWithContext } from '@digigov/form/Fieldset/FieldsetWithContext';
+import { Fieldset } from '@digigov/form/Fieldset';
 import { FormContext } from '@digigov/form/FormContext';
 import { FormBaseProps, FormData, FormBuilderProps } from '@digigov/form/types';
 import { yupResolver } from '@digigov/form/utils';
 import { useValidationSchema } from '@digigov/form/validators';
 import { Button } from '@digigov/ui/form/Button';
 import { Form } from '@digigov/ui/form/Form';
-import { useScreenSize } from '@digigov/ui/utils/hooks/useScreen';
 
 const FormBase = React.forwardRef(function FormBase(
   {
@@ -81,43 +79,6 @@ const FormBase = React.forwardRef(function FormBase(
   );
 });
 
-const DEFAULT_LAYOUT = {
-  xs: 12,
-  sm: 12,
-  md: 12,
-  lg: 12,
-  xl: 12,
-};
-
-const BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl'];
-
-const groupFieldsByLayout = (fields) => {
-  return BREAKPOINTS.reduce((sizes, size) => {
-    sizes[size] = fields
-      .reduce((acc, item) => {
-        const layoutValue = item.layout?.[size] || 12;
-        if (layoutValue === 0) {
-          return [...acc, item];
-        }
-        const lastElement = acc[acc.length - 1];
-        const currentSum = Array.isArray(lastElement)
-          ? lastElement.reduce((sum, i) => sum + (i.layout?.[size] || 0), 0)
-          : 0;
-        if (!Array.isArray(lastElement) || currentSum + layoutValue > 12) {
-          return layoutValue === 12 ? [...acc, item] : [...acc, [item]];
-        }
-
-        return [...acc.slice(0, -1), [...lastElement, item]];
-      }, [])
-      .map((item) => {
-        if (Array.isArray(item) && item.length === 1) {
-          return item[0];
-        }
-        return item;
-      });
-    return sizes;
-  }, {});
-};
 const useFormContext = () => {
   return useContext(FormContext);
 };
@@ -144,34 +105,6 @@ const FormBuilder = React.forwardRef(function FormBuilder(
   }: FormBuilderProps,
   ref: React.Ref<HTMLFormElement>
 ): React.ReactElement {
-  const { screenSize } = useScreenSize();
-  fields = fields.map((field) => {
-    const layout = field.layout;
-    if (!layout) {
-      return {
-        ...field,
-        layout: DEFAULT_LAYOUT,
-      };
-    }
-    return {
-      ...field,
-      layout: BREAKPOINTS.reduce(
-        (expandedLayout, breakpoint, breakpointIndex) => {
-          if (field?.layout?.[breakpoint]) {
-            expandedLayout[breakpoint] = field?.layout[breakpoint];
-          } else if (expandedLayout[BREAKPOINTS[breakpointIndex - 1]]) {
-            expandedLayout[breakpoint] =
-              expandedLayout[BREAKPOINTS[breakpointIndex - 1]];
-          } else {
-            expandedLayout[breakpoint] = 12;
-          }
-          return expandedLayout;
-        },
-        {}
-      ),
-    };
-  });
-
   const fieldsState = useRef(fields);
   const setFieldsState = useCallback((newFields) => {
     fieldsState.current = newFields;
@@ -207,28 +140,12 @@ const FormBuilder = React.forwardRef(function FormBuilder(
     if (auto) {
       if (fieldsets) {
         fieldChildren = fieldsets.map((fieldset) => (
-          <FieldsetWithContext key={fieldset.key} name={fieldset.key} />
+          <Fieldset key={fieldset.key} />
         ));
       } else if (fields) {
-        const fieldsByLayouts = groupFieldsByLayout(fields);
-        const fieldsByLayoutSize = fieldsByLayouts[screenSize];
-        fieldChildren = fieldsByLayoutSize.map((item, index) => {
-          if (Array.isArray(item)) {
-            return (
-              <ErrorGroup
-                key={index}
-                screenSize={screenSize}
-                fieldOrder={item.map((field) => field.key)}
-              >
-                {item.map((f) => {
-                  return <Field key={f.key} name={f.key} />;
-                })}
-              </ErrorGroup>
-            );
-          } else {
-            return <Field key={item.key} name={item.key} />;
-          }
-        });
+        fieldChildren = fields.map((field) => (
+          <Field key={field.key} name={field.key} />
+        ));
       }
     }
   }

package/src/FormBuilder/scenarios.test.tsx

@@ -469,11 +469,7 @@ const expectErrorMessages = async (formBuilder, scenarioExpect, expect) => {
           );
         }
       }
-      if (expectObj.textAssertion === 'toContainText') {
-        await expect(labelLocator).toContainText(expectText);
-      } else {
-        await expect(labelLocator).toHaveText(expectText);
-      }
+      await expect(labelLocator).toHaveText(expectText);
     }
   }
 };
@@ -1293,54 +1289,6 @@ const INPUTS_INPUT_FIELDS = [
   },
 ];
 
-const ERROR_GROUPING_FIELDS = [
-  {
-    key: 'address',
-    type: 'string',
-    required: true,
-    layout: { xl: 6, lg: 6, md: 6, xs: 6 },
-    label: {
-      primary: 'Οδός',
-    },
-  },
-  {
-    key: 'address_number',
-    type: 'int',
-    required: true,
-    layout: { xl: 2, lg: 2, md: 2, xs: 6 },
-    label: {
-      primary: 'Αριθμός',
-    },
-  },
-  {
-    key: 'postal_code',
-    type: 'postal_code',
-    required: true,
-    layout: { xl: 4, lg: 4, md: 4, xs: 6 },
-    label: {
-      primary: 'Ταχ. Κώδικας',
-    },
-  },
-  {
-    key: 'town',
-    type: 'string',
-    required: true,
-    layout: { xl: 6, lg: 6, md: 6, xs: 6 },
-    label: {
-      primary: 'Πόλη',
-    },
-  },
-  {
-    key: 'country',
-    type: 'string',
-    required: true,
-    layout: { xl: 6, lg: 6, md: 6, xs: 6 },
-    label: {
-      primary: 'Χώρα',
-    },
-  },
-];
-
 const inputsInputScenarios = [
   {
     title: 'success fill for inputs Input',
@@ -1462,7 +1410,7 @@ const inputsInputScenarios = [
   {
     title: 'empty fill for inputs Input',
     describe: 'inputs Input scenario',
-    fields: [...INPUTS_INPUT_FIELDS, ...ERROR_GROUPING_FIELDS],
+    fields: INPUTS_INPUT_FIELDS,
     fill: [],
     expect: [
       {
@@ -1520,42 +1468,12 @@ const inputsInputScenarios = [
         fieldKey: 'uuid4',
         text: el.form.error.required,
       },
-      {
-        type: 'error',
-        fieldKey: 'address',
-        text: el.form.error.required,
-        textAssertion: 'toContainText',
-      },
-      {
-        type: 'error',
-        fieldKey: 'address_number',
-        text: el.form.error.required,
-        textAssertion: 'toContainText',
-      },
-      {
-        type: 'error',
-        fieldKey: 'postal_code',
-        text: el.form.error.required,
-        textAssertion: 'toContainText',
-      },
-      {
-        type: 'error',
-        fieldKey: 'town',
-        text: el.form.error.required,
-        textAssertion: 'toContainText',
-      },
-      {
-        type: 'error',
-        fieldKey: 'country',
-        text: el.form.error.required,
-        textAssertion: 'toContainText',
-      },
     ],
   },
   {
     title: 'incorrect types for inputs Input',
     describe: 'inputs Input scenario',
-    fields: [...INPUTS_INPUT_FIELDS, ...ERROR_GROUPING_FIELDS],
+    fields: INPUTS_INPUT_FIELDS,
     fill: [
       {
         fieldKey: 'age',
@@ -1601,14 +1519,6 @@ const inputsInputScenarios = [
         fieldKey: 'uuid4',
         value: 'aaaaaa',
       },
-      {
-        fieldKey: 'address_number',
-        value: 'aa',
-      },
-      {
-        fieldKey: 'postal_code',
-        value: 'aaaaa',
-      },
     ],
     expect: [
       {
@@ -1666,18 +1576,6 @@ const inputsInputScenarios = [
         fieldKey: 'uuid4',
         text: el.form.error.uuid4,
       },
-      {
-        type: 'error',
-        fieldKey: 'address_number',
-        text: el.form.error.number,
-        textAssertion: 'toContainText',
-      },
-      {
-        type: 'error',
-        fieldKey: 'postal_code',
-        text: el.form.error.postalCode,
-        textAssertion: 'toContainText',
-      },
     ],
   },
 ];
@@ -1949,12 +1847,7 @@ for (const scenario of scenarios) {
     test(scenario.title, async ({ mount, page }) => {
       const formBuilder = await mount(
         // @ts-ignore
-        <FormBuilder
-          auto={true}
-          grid={true}
-          fields={scenario.fields}
-          onSubmit={() => {}}
-        />
+        <FormBuilder auto={true} fields={scenario.fields} onSubmit={() => {}} />
       );
       await fillFields(page, formBuilder, scenario);
       await submitForm(formBuilder);

package/src/MultiplicityField/index.test.tsx

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

package/src/MultiplicityField/index.tsx

@@ -57,7 +57,6 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
           ? error
           : undefined
       }
-      hasError={formState.isSubmitted && !formState.isSubmitting && !!error}
       wrapper="fieldset"
       name={name}
     >

package/src/Questions/__snapshots__/index.spec.tsx.snap

@@ -45,7 +45,7 @@ exports[`renders the Questions 1`] = `
       class="ds-form"
     >
       <div
-        class="ds-field xs:ds-grid__col-span-12 sm:ds-grid__col-span-12 md:ds-grid__col-span-12 lg:ds-grid__col-span-12 xl:ds-grid__col-span-12"
+        class="ds-field xs:ds-grid__col-span-12"
       >
         <label
           class="ds-label"
@@ -64,7 +64,6 @@ exports[`renders the Questions 1`] = `
             aria-required="true"
             class="ds-input"
             data-type="string"
-            id="name"
             name="name"
             type="text"
           />

package/src/Questions/index.spec.tsx

@@ -46,14 +46,6 @@ const steps = [
   },
 ];
 
-beforeAll(() => {
-  global.ResizeObserver = class ResizeObserver {
-    observe() {}
-    unobserve() {}
-    disconnect() {}
-  };
-});
-
 it('renders the Questions', () => {
   expect(
     render(

package/src/Questions/index.test.tsx

@@ -1,20 +1,21 @@
 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';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All Questions variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

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

@@ -1,24 +1,25 @@
 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';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All AutoCompleteInput variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="Multiple">
-      <Multiple />
-    </TestVariant>
-  </div>
-  )
+    <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' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

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

@@ -1,28 +1,29 @@
 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' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

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

@@ -1,20 +1,21 @@
 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 TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All DateInput variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

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

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

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

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

package/src/inputs/Input/Input.stories.js

@@ -5,7 +5,6 @@ export default {
   displayName: 'Input',
 };
 export { String } from '@digigov/form/inputs/Input/__stories__/String';
-export { StringWithTrimValidation } from '@digigov/form/inputs/Input/__stories__/StringWithTrimValidation';
 export { Integer } from '@digigov/form/inputs/Input/__stories__/Integer';
 export { Boolean } from '@digigov/form/inputs/Input/__stories__/Boolean';
 export { PhoneNumber } from '@digigov/form/inputs/Input/__stories__/PhoneNumber';

package/src/inputs/Input/__stories__/TextWithLimit.tsx

@@ -12,7 +12,6 @@ export const TextWithLimit = () => (
       key="text"
       name="text"
       type="text"
-      trim
       label={{
         primary: 'Μπορείτε να δώσετε περισσότερες πληροφορίες;',
       }}