@digigov/form 2.0.0-0edebf87 → 2.0.0-13876dba

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

@@ -1,12 +1,15 @@
 import MultiplicityField from '@digigov/form/MultiplicityField';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/MultiplicityField',
   component: MultiplicityField,
+  tags: ['autodocs'],
+  markdown: doc,
   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__/Default.tsx

@@ -85,7 +85,7 @@ const fields = [
   },
 ] as FieldSpec[];
 
-export const Default = () => (
+export const Default = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/MultiplicityField/__stories__/PreviewDisplay.tsx

@@ -61,7 +61,7 @@ const fields = [
   },
 ];
 
-export const PreviewDisplay = () => (
+export const PreviewDisplay = (_: any) => (
   <Layout>
     <Header>
       <HeaderContent>

package/src/MultiplicityField/__stories__/WithExactLength.tsx

@@ -61,7 +61,7 @@ const fields = [
               },
             },
             {
-              key: 'bod',
+              key: 'dob',
               required: true,
               type: 'date',
               label: {
@@ -84,7 +84,7 @@ const fields = [
   },
 ] as FieldSpec[];
 
-export const WithExactLength = () => (
+export const WithExactLength = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/MultiplicityField/__stories__/WithMaxLength.tsx

@@ -61,7 +61,7 @@ const fields = [
               },
             },
             {
-              key: 'bod',
+              key: 'dob',
               required: true,
               type: 'date',
               label: {
@@ -87,7 +87,7 @@ const fields = [
   },
 ] as FieldSpec[];
 
-export const WithMaxLength = () => (
+export const WithMaxLength = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/MultiplicityField/__stories__/WithMinAndMaxLength.tsx

@@ -62,7 +62,7 @@ const fields = [
               },
             },
             {
-              key: 'bod',
+              key: 'dob',
               required: true,
               type: 'date',
               label: {
@@ -88,7 +88,7 @@ const fields = [
   },
 ] as FieldSpec[];
 
-export const WithMinAndMaxLength = () => (
+export const WithMinAndMaxLength = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/MultiplicityField/__stories__/WithMinLength.tsx

@@ -61,7 +61,7 @@ const fields = [
               },
             },
             {
-              key: 'bod',
+              key: 'dob',
               required: true,
               type: 'date',
               label: {
@@ -87,7 +87,7 @@ const fields = [
   },
 ] as FieldSpec[];
 
-export const WithMinLength = () => (
+export const WithMinLength = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

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