@digigov/form 2.0.0-0edebf87 → 2.0.0-2177f152

package/src/FormContext.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { createContext } from 'react';
+import React, { createContext } from 'react';
 import { FormContextProps } from '@digigov/form/types';
 
 export const FormContext: React.Context<FormContextProps> = createContext({

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__/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,4 @@
-/* eslint-disable react/prop-types */
 import React, { useEffect, useMemo } from 'react';
-// import { FormBuilderProps } from '@digigov/form';
 import {
   ErrorOption,
   FieldArrayWithId,
@@ -9,16 +7,22 @@ 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 { Fieldset } from '@digigov/form/Fieldset';
+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';
+import { Button } from '@digigov/ui/form/Button';
+import { RadioConditional } from '@digigov/ui/form/RadioContainer';
+
 export interface AddObjectsProps
   extends Omit<MultiplicityProps, 'key' | 'component'> {
   fields: FieldArrayWithId[];
@@ -27,6 +31,7 @@ export interface AddObjectsProps
   remove: UseFieldArrayReturn['remove'];
   stashedObjects: StashedObject[];
   onStash: (arg0: StashedObject) => void;
+  children?: React.ReactNode;
 }
 
 export const AddObjects: React.FC<AddObjectsProps> = ({
@@ -44,6 +49,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 +73,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,14 +98,17 @@ 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(
                           (f) => `${currentName}.${f.key}`
                         );
                         const result = await trigger(nestedFields);
-                        result && setValue('needs-more', '');
-                        result && onStash(getValues(currentName));
+                        if (result) {
+                          setValue('needs-more', '');
+                          onStash(getValues(currentName));
+                        }
                       }}
                     >
                       {extra?.label.object.add}
@@ -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/{MultiplicityField/MultiplicityField.mdx → src/MultiplicityField/doc.mdx}

@@ -3,13 +3,9 @@ id: ask-users-recursive
 title: Ask users for recursive data
 ---
 
-import LeadText from '@site/src/components/LeadText';
-
-<LeadText>
-  Multiplicity & FieldArray fields allow users to input data described by a
-  particular schema for an arbitrary number of times until they are done. It can
-  be used to input a fixed, a minimum, and a maximum length of instances.
-</LeadText>
+Multiplicity & FieldArray fields allow users to input data described by a
+particular schema for an arbitrary number of times until they are done. It can
+be used to input a fixed, a minimum, and a maximum length of instances.
 
 ## What we are trying to achieve
 
@@ -108,7 +104,7 @@ This field is the most complex component we currently offer, and it uses the
 react-hook-form under the hood. First, let's take a look at what it looks like, and then we can
 break down its functionality and how you can use it.
 
-```jsx live
+```jsx
 import React from 'react';
 import Form, { Field } from '@digigov/form';
 import Button from '@digigov/ui/form/Button';
@@ -209,7 +205,7 @@ are asking users for information about their vehicles, we can also fill in the `
 `label.primary`, as well as the `type` and `required`
 props.
 
-```jsx
+```jsx pure
 <Field
   key="vehicles"
   name="vehicles"
@@ -232,7 +228,7 @@ inner form, respectively.
 Inside the `of` key you can add an `extra` key that will then contain a `fields`
 key describing the field props for all inputs needed.
 
-```js
+```js pure
 // this will be used as value for the `extra` prop
 {
   of: {
@@ -290,7 +286,7 @@ As a result, if you learn how to use one, you can easily use the other, and
 naturally, you can also change their behaviour by changing a single prop in your
 React code.
 
-```jsx
+```jsx pure
 <Field
   key="vehicles"
   name="vehicles"
@@ -305,7 +301,7 @@ React code.
 The end result looks very different from Multiplicity at first glance, but you
 can achieve the same results with both of them.
 
-```jsx live
+```jsx
 import React from 'react';
 import Form, { Field } from '@digigov/form';
 import Button from '@digigov/ui/form/Button';
@@ -396,7 +392,7 @@ should expect to need some length validation sooner than later.
 You can easily validate the exact length of the items added to the multipliticy
 array, simply by using the `extra.length` prop.
 
-```jsx
+```jsx pure
 <Field
   extra={{
     length: 2,
@@ -409,7 +405,7 @@ array, simply by using the `extra.length` prop.
 The example below will validate this and show all the error messages necessary
 to make sure that the users understand what is going wrong with the process.
 
-```jsx live
+```jsx
 import React from 'react';
 import Form, { Field } from '@digigov/form';
 import Button from '@digigov/ui/form/Button';
@@ -497,7 +493,7 @@ Do not mix and match the exact `length` validation with the `min` or `max`.
 
 :::
 
-```jsx
+```jsx pure
 <Field
   extra={{
     min: 2,
@@ -511,7 +507,7 @@ Do not mix and match the exact `length` validation with the `min` or `max`.
 The example below will validate this and show all the error messages necessary
 to make sure that the users understand what is going wrong with the process.
 
-```jsx live
+```jsx
 import React from 'react';
 import Form, { Field } from '@digigov/form';
 import Button from '@digigov/ui/form/Button';

package/src/MultiplicityField/index.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+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>
+  );
+  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,20 @@
 import React, { useState } from 'react';
-import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
-import { FieldSpec } from '@digigov/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 { 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 { 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 { useFieldArray, UseFormReturn } from 'react-hook-form';
+import { FieldBaseContainer } from '@digigov/form/Field/FieldBaseContainer';
+import { FieldObject } from '@digigov/form/FieldObject';
+import { AddObjects } from '@digigov/form/MultiplicityField/add-objects';
+import {
+  MultiplicityProps,
+  StashedObject,
+} from '@digigov/form/MultiplicityField/types';
+import {
+  Card,
+  CardHeading,
+  CardContent,
+  CardAction,
+} from '@digigov/ui/content/Card';
+import { Button } from '@digigov/ui/form/Button';
+import { Heading } from '@digigov/ui/typography/Heading';
 
 // epeidh einai forwardRef to ref mas to dinei xwrista apo ta props
 export const Multiplicity: React.FC<MultiplicityProps> = ({
@@ -47,6 +31,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
   setValue,
   getValues,
   unregister,
+  Field,
 }) => {
   const { fields, append, remove } = useFieldArray({
     control,
@@ -64,7 +49,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
     setStashedObjects(newStashedObjects);
   };
   return (
-    <FieldContainer
+    <FieldBaseContainer
       label={label}
       layout={layout}
       error={
@@ -113,8 +98,9 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
         unregister={unregister}
         trigger={trigger}
         clearErrors={clearErrors}
+        Field={Field}
       />
-    </FieldContainer>
+    </FieldBaseContainer>
   );
 };
 

package/src/MultiplicityField/types.ts

@@ -0,0 +1,21 @@
+import { ErrorOption, UseFormReturn } from 'react-hook-form';
+import { FieldSpec, 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/Questions.tsx

@@ -31,7 +31,7 @@ export const Questions: React.FC<QuestionsInterface> = ({
   useEffect(() => {
     if (forceStepName !== currentStep.name) {
       const forceStep = steps.find(({ name }) => name === forceStepName);
-      forceStep && setCurrentStep(forceStep);
+      if (forceStep) setCurrentStep(forceStep);
     }
   }, [forceStepName]);
   const localData =
@@ -42,16 +42,16 @@ export const Questions: React.FC<QuestionsInterface> = ({
   const submitStep = (stepName, stepData): void => {
     data[stepName] = stepData;
     if (localDraft) {
-      isBrowser &&
+      if (isBrowser)
         window.localStorage.setItem(`questions-${name}`, JSON.stringify(data));
     }
     if (onChange) {
-      onChange && onChange(data);
+      onChange(data);
     }
     setData(data);
     const nextStep = getNextStep(currentStep, steps, data);
     if (nextStep) {
-      onActiveStep && onActiveStep(nextStep);
+      if (onActiveStep) onActiveStep(nextStep);
       setCurrentStep(nextStep);
     } else {
       onSubmit(data);

package/src/Questions/Step/StepArrayReview.tsx

@@ -37,7 +37,7 @@ export const StepArrayReview: React.FC<StepArrayReviewInterface> = (props) => {
       </PageTitleContainer>
       <SummaryList>
         {props.array.map(
-          (item: { [x: string]: React.ReactNode }, idx: number) => (
+          (item: Record<string, React.ReactNode>, idx: number) => (
             <SummaryListItem key={idx}>
               <SummaryListItemKey>
                 {t(primaryField.label.primary)}

package/src/Questions/Step/StepTitle.tsx

@@ -1,18 +1,20 @@
 import React, { useContext } from 'react';
 import { StepContext } from '@digigov/form/Questions/Step/StepContext';
-import Heading, { HeadingProps } from '@digigov/react-core/Heading';
-import HeadingCaption from '@digigov/react-core/HeadingCaption';
-import PageTitleContainer, {
+import {
+  PageTitleContainer,
   PageTitleCaption,
 } from '@digigov/ui/app/PageTitleContainer';
 import { useTranslation } from '@digigov/ui/i18n';
 import { BackLink } from '@digigov/ui/navigation/BackLink';
+import { Heading, HeadingProps } from '@digigov/ui/typography/Heading';
+import { HeadingCaption } from '@digigov/ui/typography/HeadingCaption';
 
 export interface StepTitleInterface {
   title?: string;
   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>[];