@digigov/form 1.1.2 → 1.1.4-mobile

package/src/Field/types.tsx

@@ -17,6 +17,7 @@ export interface FieldConditionalProps {
   register: UseFormReturn['register'];
   reset: UseFormReturn['reset'];
   error?: ErrorOption;
+  Field: React.FC<FieldProps>;
 }
 
 export type FieldComponentItem = {
@@ -51,6 +52,8 @@ export interface ControlledFieldProps {
   error?: boolean;
   name?: string;
   disabled?: boolean;
+  Field: React.FC<FieldProps>;
+
 }
 
 export interface UncontrolledFieldProps {
@@ -61,6 +64,8 @@ export interface UncontrolledFieldProps {
   extra?: Record<string, never>;
   type?: string;
   disabled?: boolean;
+  Field: React.FC<FieldProps>;
+
 }
 
 export interface CalculatedField extends OmittedFieldSpec {
@@ -77,6 +82,8 @@ export interface FieldBaseProps extends CalculatedField {
   control: UseFormReturn['control'];
   register: UseFormReturn['register'];
   reset: UseFormReturn['reset'];
+  Field: React.FC<FieldProps>;
+
 }
 
 export interface FieldProps extends FieldSpec {

package/src/Field/utils.ts

@@ -1,4 +1,4 @@
-import { lazy, useContext, useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 import {
   CalculatedField,
   FieldComponentRegistry,
@@ -13,13 +13,11 @@ import FileInput from '@digigov/form/inputs/FileInput';
 import ImageInput from '@digigov/form/inputs/ImageInput';
 import Input from '@digigov/form/inputs/Input';
 import OtpInput from '@digigov/form/inputs/OtpInput';
-import Radio from '@digigov/form/inputs/Radio';
+import Radio, {ControlledRadioButtonsGroup} from '@digigov/form/inputs/Radio';
 import Select from '@digigov/form/inputs/Select';
+import AutoCompleteInput from '@digigov/form/inputs/AutoCompleteInput';
 import { FieldSpec } from '@digigov/form/types';
 
-const AutoCompleteInput = lazy(() =>
-  import('@digigov/form/inputs/AutoCompleteInput')
-);
 
 const FIELD_COMPONENTS: FieldComponentRegistry = {
   text: {
@@ -57,7 +55,14 @@ const FIELD_COMPONENTS: FieldComponentRegistry = {
     component: Radio,
   },
 };
-
+export const CONTROLLED_FIELD_COMPONENTS: FieldComponentRegistry = {
+  ...FIELD_COMPONENTS,
+  'choice:single': {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: ControlledRadioButtonsGroup,
+  },
+}
 const ALTERNATIVE_COMPONENTS: FieldComponentRegistry = {
   Select: {
     component: Select,
@@ -66,6 +71,7 @@ const ALTERNATIVE_COMPONENTS: FieldComponentRegistry = {
   AutoComplete: {
     component: AutoCompleteInput,
     controlled: true,
+    wrapper: 'fieldset'
   },
 };
 
@@ -93,6 +99,7 @@ export function calculateField(
       ALTERNATIVE_COMPONENTS[field.extra.component]?.controlled || false;
     calculatedField.component =
       ALTERNATIVE_COMPONENTS[field.extra.component].component;
+      calculatedField.wrapper = ALTERNATIVE_COMPONENTS[field.extra.component].wrapper;
   } else if (
     !field.component &&
     field.type &&

package/src/FieldArray/FieldArray.stories.js

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

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

package/src/FieldArray/index.tsx

@@ -5,12 +5,15 @@ import { FieldProps } from '@digigov/form/Field/types';
 import FieldObject from '@digigov/form/FieldObject';
 import { FieldsetLabel } from '@digigov/form/Fieldset';
 import Fieldset from '@digigov/react-core/Fieldset';
-import { Button, Card, Hint } from '@digigov/ui';
+import { Button } from '@digigov/ui/form/Button';
+import { Card } from '@digigov/ui/content/Card';
+import { Hint } from '@digigov/ui/typography/Hint';
 export interface FieldArrayProps extends FieldProps {
   control: UseFormReturn['control'];
   register: UseFormReturn['register'];
   formState: UseFormReturn['formState'];
   error?: ErrorOption;
+  Field: React.FC<FieldProps>;
 }
 export const FieldArray: React.FC<FieldArrayProps> = ({
   name,
@@ -20,6 +23,7 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
   error,
   layout,
   label,
+  Field,
   ...customField
 }) => {
   const { fields, append, remove } = useFieldArray({
@@ -33,9 +37,9 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
       layout={layout}
       error={
         formState.isSubmitted &&
-        !formState.isSubmitting &&
-        error?.message &&
-        error
+          !formState.isSubmitting &&
+          error?.message &&
+          error
           ? error
           : undefined
       }
@@ -58,9 +62,10 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
               register={register}
               control={control}
               {...customField.extra?.of}
+              Field={Field}
             />
-            <Button type="button" color="warning" onClick={() => remove(index)}>
-              Remove
+            <Button name={`${name}-object-remove`} type="button" color="warning" onClick={() => remove(index)}>
+              {customField.extra?.label.object?.delete}
             </Button>
           </Fieldset>
         </Card>
@@ -68,6 +73,7 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
 
       <Button
         type="button"
+        name={`${name}-add-object`}
         color="secondary"
         onClick={(ev) => {
           ev.preventDefault();

package/src/FieldObject/index.tsx

@@ -5,7 +5,7 @@ import { CalculatedField, FieldProps } from '@digigov/form/Field/types';
 import { calculateField } from '@digigov/form/Field/utils';
 import Fieldset, { FieldsetCaption } from '@digigov/form/Fieldset';
 import { FieldSpec } from '@digigov/form/types';
-import { FieldsetLegend } from '@digigov/react-core';
+import { FieldsetLegend } from '@digigov/react-core/FieldsetLegend';
 import { useTranslation } from '@digigov/ui/i18n';
 
 export interface FieldObjectProps extends Omit<FieldProps, 'key'> {
@@ -14,6 +14,7 @@ export interface FieldObjectProps extends Omit<FieldProps, 'key'> {
   reset: UseFormReturn['reset'];
   formState: UseFormReturn['formState'];
   error?: ErrorOption;
+  Field: React.FC<FieldProps>;
 }
 
 export const FieldObject: React.FC<FieldObjectProps> = ({
@@ -24,6 +25,8 @@ export const FieldObject: React.FC<FieldObjectProps> = ({
   register,
   reset,
   formState,
+  error,
+  Field
 }) => {
   const { t } = useTranslation();
 
@@ -43,8 +46,9 @@ export const FieldObject: React.FC<FieldObjectProps> = ({
           register={register}
           reset={reset}
           field={field}
-          error={formState.errors && formState.errors[field.key]}
+          error={error && error[field.key]}
           formState={formState}
+          Field={Field}
         />
       ))}
     </Fieldset>
@@ -59,6 +63,8 @@ export interface FieldObjectItemProps {
   reset: UseFormReturn['reset'];
   formState: UseFormReturn['formState'];
   error?: ErrorOption;
+  children?: React.ReactNode;
+  Field: React.FC<FieldProps>;
 }
 
 const FieldObjectItem: React.FC<FieldObjectItemProps> = ({
@@ -70,6 +76,7 @@ const FieldObjectItem: React.FC<FieldObjectItemProps> = ({
   formState,
   reset,
   register,
+  Field
 }) => {
   const calculatedField: CalculatedField = useMemo(
     () => calculateField(children, field),
@@ -81,6 +88,7 @@ const FieldObjectItem: React.FC<FieldObjectItemProps> = ({
     <FieldBase
       {...calculatedField}
       name={name}
+      Field={Field}
       control={control}
       reset={reset}
       register={register}

package/src/Fieldset/types.tsx

@@ -3,4 +3,6 @@ import { HintProps } from '@digigov/react-core/Hint';
 
 export interface FieldsetLabelProps extends FieldsetLegendProps {}
 export interface FieldsetCaptionProps extends HintProps {}
-export interface FieldsetBodyProps {}
+export interface FieldsetBodyProps {
+  children?: React.ReactNode;
+}

package/src/FormBuilder/FormBuilder.stories.js

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

package/src/FormBuilder/FormBuilder.tsx

@@ -8,6 +8,8 @@ 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'
+import { CONTROLLED_FIELD_COMPONENTS } from '../Field/utils';
 
 export const FormBase = React.forwardRef(function FormBase(
   {
@@ -43,7 +45,7 @@ export const FormBase = React.forwardRef(function FormBase(
     },
     [onSubmit]
   );
-
+  const submit = form.handleSubmit(handleSubmit)
   const ctx = {
     fieldsMap,
     fieldsetsMap,
@@ -62,12 +64,13 @@ export const FormBase = React.forwardRef(function FormBase(
     unregister: form.unregister,
     componentRegistry,
     setError: form.setError,
+    submit: submit
   };
   return (
     <FormContext.Provider value={ctx}>
       <Form
         grid={grid}
-        onSubmit={form.handleSubmit(handleSubmit)}
+        onSubmit={submit}
         ref={ref}
         {...props}
       >
@@ -158,9 +161,18 @@ export const FormBuilder = React.forwardRef(function FormBuilder(
       {...props}
     >
       {fieldChildren}
+      {
+        auto && (
+          <Button type="submit">
+            Συνέχεια
+          </Button>
+        )
+      }
       {children}
     </FormBase>
   );
 });
-
+export const ControlledFormBuilder = (props)=>{
+  return <FormBuilder {...props} componentRegistry={CONTROLLED_FIELD_COMPONENTS} />
+}
 export default FormBuilder;

package/src/FormBuilder/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/FormBuilder/__stories__/Default';
+
+test('renders the All FormBuilder 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();
+});
+