@digigov/form 2.0.0-cbc56209 → 2.0.0-daaf7bdf

package/src/MultiplicityField/MultiplicityField.stories.js

@@ -4,9 +4,9 @@ export default {
   component: MultiplicityField,
   displayName: 'MultiplicityField',
 };
-export * from '@digigov/form/MultiplicityField/__stories__/Default';
-export * from '@digigov/form/MultiplicityField/__stories__/WithMinLength';
-export * from '@digigov/form/MultiplicityField/__stories__/WithMaxLength';
-export * from '@digigov/form/MultiplicityField/__stories__/WithMinAndMaxLength';
-export * from '@digigov/form/MultiplicityField/__stories__/WithExactLength';
-export * from '@digigov/form/MultiplicityField/__stories__/PreviewDisplay';
+export { Default } from '@digigov/form/MultiplicityField/__stories__/Default';
+export { PreviewDisplay } from '@digigov/form/MultiplicityField/__stories__/PreviewDisplay';
+export { WithMinLength } from '@digigov/form/MultiplicityField/__stories__/WithMinLength';
+export { WithMaxLength } from '@digigov/form/MultiplicityField/__stories__/WithMaxLength';
+export { WithMinAndMaxLength } from '@digigov/form/MultiplicityField/__stories__/WithMinAndMaxLength';
+export { WithExactLength } from '@digigov/form/MultiplicityField/__stories__/WithExactLength';

package/src/MultiplicityField/__stories__/PreviewDisplay.tsx

@@ -83,7 +83,7 @@ export const PreviewDisplay = () => (
         <Card variant="border" borderColor="dark">
           <CardHeading>Συνυπογράφοντας 1</CardHeading>
           <CardContent>
-            <SummaryList>
+            <SummaryList noLastBorder marginBottom={0}>
               {fields &&
                 fields.map((field, index) => {
                   return (
@@ -99,7 +99,7 @@ export const PreviewDisplay = () => (
         <Card variant="border" borderColor="dark">
           <CardHeading>Συνυπογράφοντας 2</CardHeading>
           <CardContent>
-            <SummaryList>
+            <SummaryList noLastBorder marginBottom={0}>
               {fields &&
                 fields.map((field, index) => {
                   return (

package/src/MultiplicityField/__stories__/WithExactLength.tsx

@@ -61,7 +61,7 @@ const fields = [
               },
             },
             {
-              key: 'bod',
+              key: 'dob',
               required: true,
               type: 'date',
               label: {

package/src/MultiplicityField/__stories__/WithMaxLength.tsx

@@ -61,7 +61,7 @@ const fields = [
               },
             },
             {
-              key: 'bod',
+              key: 'dob',
               required: true,
               type: 'date',
               label: {

package/src/MultiplicityField/__stories__/WithMinAndMaxLength.tsx

@@ -62,7 +62,7 @@ const fields = [
               },
             },
             {
-              key: 'bod',
+              key: 'dob',
               required: true,
               type: 'date',
               label: {

package/src/MultiplicityField/__stories__/WithMinLength.tsx

@@ -61,7 +61,7 @@ const fields = [
               },
             },
             {
-              key: 'bod',
+              key: 'dob',
               required: true,
               type: 'date',
               label: {

package/src/MultiplicityField/add-objects.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/prop-types */
 import React, { useEffect, useMemo } from 'react';
-// import { FormBuilderProps } from '@digigov/form';
 import {
   ErrorOption,
   FieldArrayWithId,
@@ -9,16 +8,23 @@ import {
 } from 'react-hook-form';
 import { FieldBase } from '@digigov/form/Field/FieldBase';
 import { CalculatedField } from '@digigov/form/Field/types';
-import { calculateField, useField } from '@digigov/form/Field/utils';
-import FieldObject from '@digigov/form/FieldObject';
 import {
+  FIELD_COMPONENTS,
+  ALTERNATIVE_COMPONENTS,
+} from '@digigov/form/Field/utils';
+import { calculateField } from '@digigov/form/Field/utils/calculateField';
+import { useField } from '@digigov/form/Field/utils/useField';
+
+import FieldObject from '@digigov/form/FieldObject';
+import type {
   MultiplicityProps,
   StashedObject,
-} from '@digigov/form/MultiplicityField';
+} from '@digigov/form/MultiplicityField/types';
 import { FieldSpec } from '@digigov/form/types';
 import Fieldset from '@digigov/react-core/Fieldset';
 import RadioConditional from '@digigov/react-core/RadioConditional';
 import Button from '@digigov/ui/form/Button';
+
 export interface AddObjectsProps
   extends Omit<MultiplicityProps, 'key' | 'component'> {
   fields: FieldArrayWithId[];
@@ -27,6 +33,7 @@ export interface AddObjectsProps
   remove: UseFieldArrayReturn['remove'];
   stashedObjects: StashedObject[];
   onStash: (arg0: StashedObject) => void;
+  children?: React.ReactNode;
 }
 
 export const AddObjects: React.FC<AddObjectsProps> = ({
@@ -44,6 +51,7 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
   getValues,
   onStash,
   error,
+  Field
 }) => {
   const currentIndex = fields.length > 0 ? fields.length - 1 : fields.length;
   const currentName = `${name}.${currentIndex}`;
@@ -67,6 +75,7 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
       options: [
         {
           label: { primary: extra?.label.question.yes },
+          id: `radio-input-${name}-yes`,
           value: 'yes',
           selected: function RadioSelected() {
             return (
@@ -91,6 +100,7 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
                     />
                     <Button
                       color="secondary"
+                      name={`${currentName}-add-object`}
                       onClick={async (e) => {
                         e.preventDefault();
                         const nestedFields = extra?.of.extra.fields.map(
@@ -111,19 +121,24 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
         },
         {
           label: { primary: extra?.label.question.no },
+          id: `radio-input-${name}-no`,
           value: 'no',
         },
       ],
     },
   };
 
-  const { field, control, register, reset, error: needsMoreError } = useField(
-    radioField.key,
-    radioField?.type ? radioField : null
-  );
+  const {
+    field,
+    control,
+    register,
+    reset,
+    error: needsMoreError,
+  } = useField(radioField.key, radioField?.type ? radioField : null);
 
   const calculatedField: CalculatedField = useMemo(
-    () => calculateField(children, field),
+    () =>
+      calculateField(children, field, FIELD_COMPONENTS, ALTERNATIVE_COMPONENTS),
     [field]
   );
   const needsMore = useWatch({ name: field.key, control });
@@ -172,6 +187,7 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
         control={control}
         register={register}
         reset={reset}
+        Field={Field}
         error={
           extra?.max - stashedObjects.length === 0 ||
           extra?.length - stashedObjects.length === 0

package/src/MultiplicityField/index.test.tsx

@@ -0,0 +1,40 @@
+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';
+
+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>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/MultiplicityField/index.tsx

@@ -1,36 +1,19 @@
 import React, { useState } from 'react';
-import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
-import { FieldSpec } from '@digigov/form';
+import { useFieldArray, UseFormReturn } from 'react-hook-form';
 import FieldContainer from '@digigov/form/Field/FieldBaseContainer';
-import { ControlledFieldProps } from '@digigov/form/Field/types';
+
 import FieldObject from '@digigov/form/FieldObject';
 import AddObjects from '@digigov/form/MultiplicityField/add-objects';
+import {
+  MultiplicityProps,
+  StashedObject,
+} from '@digigov/form/MultiplicityField/types';
+import { Button } from '@digigov/react-core/Button';
 import { Card } from '@digigov/react-core/Card';
-import { CardContent } from '@digigov/react-core/CardContent';
 import { CardAction } from '@digigov/react-core/CardAction';
-import { Button } from '@digigov/react-core/Button';
-import { Heading } from '@digigov/react-core/Heading';
+import { CardContent } from '@digigov/react-core/CardContent';
 import { CardHeading } from '@digigov/react-core/CardHeading';
-
-
-export interface MultiplicityProps
-  extends Omit<ControlledFieldProps, 'value' | 'onChange' | 'error' | 'extra'> {
-  name: string;
-  control: UseFormReturn['control'];
-  register: UseFormReturn['register'];
-  trigger: UseFormReturn['trigger'];
-  clearErrors: UseFormReturn['clearErrors'];
-  formState: UseFormReturn['formState'];
-  setValue: UseFormReturn['setValue'];
-  getValues: UseFormReturn['getValues'];
-  unregister: UseFormReturn['unregister'];
-  error?: ErrorOption;
-  extra?: Record<string, any>;
-  label?: FieldSpec['label'];
-  layout?: FieldSpec['layout'];
-}
-
-export type StashedObject = Record<string, any>;
+import { Heading } from '@digigov/react-core/Heading';
 
 // epeidh einai forwardRef to ref mas to dinei xwrista apo ta props
 export const Multiplicity: React.FC<MultiplicityProps> = ({
@@ -47,6 +30,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
   setValue,
   getValues,
   unregister,
+  Field,
 }) => {
   const { fields, append, remove } = useFieldArray({
     control,
@@ -113,6 +97,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
         unregister={unregister}
         trigger={trigger}
         clearErrors={clearErrors}
+        Field={Field}
       />
     </FieldContainer>
   );

package/src/MultiplicityField/types.ts

@@ -0,0 +1,22 @@
+import { ErrorOption, UseFormReturn } from 'react-hook-form';
+import { FieldSpec } from '@digigov/form/Field/types';
+import { ControlledFieldProps } from '@digigov/form/Field/types';
+
+export interface MultiplicityProps
+  extends Omit<ControlledFieldProps, 'value' | 'onChange' | 'error' | 'extra'> {
+  name: string;
+  control: UseFormReturn['control'];
+  register: UseFormReturn['register'];
+  trigger: UseFormReturn['trigger'];
+  clearErrors: UseFormReturn['clearErrors'];
+  formState: UseFormReturn['formState'];
+  setValue: UseFormReturn['setValue'];
+  getValues: UseFormReturn['getValues'];
+  unregister: UseFormReturn['unregister'];
+  error?: ErrorOption;
+  extra?: Record<string, any>;
+  label?: FieldSpec['label'];
+  layout?: FieldSpec['layout'];
+}
+
+export type StashedObject = Record<string, any>;

package/src/Questions/Questions.stories.js

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

package/src/Questions/Step/StepTitle.tsx

@@ -13,6 +13,7 @@ export interface StepTitleInterface {
   backButton?: string;
   caption?: string;
   step?: string;
+  children?: React.ReactNode;
 }
 
 export const StepTitleHeading: React.FC<HeadingProps> = (props) => {

package/src/Questions/Step/index.ts

@@ -7,7 +7,6 @@ export * from '@digigov/form/Questions/Step/StepForm';
 export * from '@digigov/form/Questions/Step/StepQuote';
 export * from '@digigov/form/Questions/Step/StepTitle';
 export * from '@digigov/form/Questions/Step/getAddMoreFields';
-export * from '@digigov/form/Questions/Step/';
 export * from '@digigov/form/Questions/Step/types';
 import Step from '@digigov/form/Questions/Step/Step';
 export default Step;

package/src/Questions/Step/types.tsx

@@ -25,6 +25,7 @@ export interface StepInterface {
   submitStep?: any;
   review?: StepReviewInterface;
   type?: StepType;
+  children?: React.ReactNode;
 }
 export interface StepArrayReviewInterface {
   array: Record<string, any>[];