@digigov/form 2.0.0-a32ad9b2 → 2.0.0-aa380ec7

package/src/FormContext.tsx

@@ -1,7 +1,12 @@
-import React, { createContext } from 'react';
-import { FormContextProps } from '@digigov/form/types';
+import type React from 'react';
+import { createContext, useContext } from 'react';
+import type { FormContextProps } from '@digigov/form/types';
 
 export const FormContext: React.Context<FormContextProps> = createContext({
   fieldsMap: {},
   fieldsetsMap: {},
 } as FormContextProps);
+
+export const useFormContext = () => {
+  return useContext(FormContext);
+};

package/src/MultiplicityField/MultiplicityField.stories.js

@@ -1,7 +1,10 @@
 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 { Default } from '@digigov/form/MultiplicityField/__stories__/Default';

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

@@ -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

@@ -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

@@ -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

@@ -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,17 +1,12 @@
 import React, { useEffect, useMemo } from 'react';
-import {
+import type {
   ErrorOption,
   FieldArrayWithId,
   UseFieldArrayReturn,
-  useWatch,
 } from 'react-hook-form';
+import { useWatch } from 'react-hook-form';
 import { FieldBase } from '@digigov/form/Field/FieldBase';
-import { CalculatedField } from '@digigov/form/Field/types';
-import {
-  FIELD_COMPONENTS,
-  ALTERNATIVE_COMPONENTS,
-} from '@digigov/form/Field/utils';
-import { calculateField } from '@digigov/form/Field/utils/calculateField';
+import { resolveField } from '@digigov/form/Field/utils/resolveField';
 import { useField } from '@digigov/form/Field/utils/useField';
 import { FieldObject } from '@digigov/form/FieldObject';
 import { Fieldset } from '@digigov/form/Fieldset';
@@ -19,7 +14,7 @@ import type {
   MultiplicityProps,
   StashedObject,
 } from '@digigov/form/MultiplicityField/types';
-import { FieldSpec } from '@digigov/form/types';
+import type { FieldSpec } from '@digigov/form/types';
 import { Button } from '@digigov/ui/form/Button';
 import { RadioConditional } from '@digigov/ui/form/RadioContainer';
 
@@ -47,6 +42,7 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
   setValue,
   stashedObjects,
   getValues,
+  resetField,
   onStash,
   error,
   Field,
@@ -136,11 +132,7 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
     error: needsMoreError,
   } = useField(radioField.key, radioField?.type ? radioField : null);
 
-  const calculatedField: CalculatedField = useMemo(
-    () =>
-      calculateField(children, field, FIELD_COMPONENTS, ALTERNATIVE_COMPONENTS),
-    [field]
-  );
+  const resolvedField = useMemo(() => resolveField(children, field), [field]);
   const needsMore = useWatch({ name: field.key, control });
 
   useEffect(() => {
@@ -155,25 +147,25 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
 
   // TODO: Refactor types so that label is always required, the following
   // assignment is a temp fix for typescript build to run
-  calculatedField.label = calculatedField.label || {};
+  resolvedField.label = resolvedField.label || {};
   if (extra?.length) {
-    calculatedField.label.secondary = `Έχετε προσθέσει ${
+    resolvedField.label.secondary = `Έχετε προσθέσει ${
       stashedObjects.length
     } εγγραφές και σας απομένουν ακόμα ${
       extra.length - stashedObjects.length
     } εγγραφές.`;
   } else if (extra?.min && extra?.max) {
-    calculatedField.label.secondary = `Το πεδίο πρέπει να έχει ακόμα ${
+    resolvedField.label.secondary = `Το πεδίο πρέπει να έχει ακόμα ${
       extra?.min - stashedObjects.length
     } και το μέγιστο ${
       extra?.max
     } εγγραφές. Προσθέστε μια ακόμα επιλέγοντας την απάντηση «Ναι» στην επόμενη ερώτηση.`;
   } else if (extra?.min) {
-    calculatedField.label.secondary = `Το πεδίο πρέπει να έχει ακόμα ${
+    resolvedField.label.secondary = `Το πεδίο πρέπει να έχει ακόμα ${
       extra?.min - stashedObjects.length
     } εγγραφές. Προσθέστε μια ακόμα επιλέγοντας την απάντηση «Ναι» στην επόμενη ερώτηση.`;
   } else if (extra?.max) {
-    calculatedField.label.secondary = ` Έχετε προσθέσει ${
+    resolvedField.label.secondary = ` Έχετε προσθέσει ${
       stashedObjects.length
     } εγγραφές και σας απομένουν ${
       extra.max - stashedObjects.length
@@ -182,11 +174,12 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
   return (
     <Fieldset>
       <FieldBase
-        {...calculatedField}
-        name={calculatedField.key}
+        {...resolvedField}
+        name={resolvedField.key}
         control={control}
         register={register}
         reset={reset}
+        resetField={resetField}
         Field={Field}
         error={
           extra?.max - stashedObjects.length === 0 ||

package/src/MultiplicityField/index.tsx

@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
-import { useFieldArray, UseFormReturn } from 'react-hook-form';
+import type { UseFormReturn } from 'react-hook-form';
+import { useFieldArray } 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 {
+import type {
   MultiplicityProps,
   StashedObject,
 } from '@digigov/form/MultiplicityField/types';
@@ -31,6 +32,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
   setValue,
   getValues,
   unregister,
+  resetField,
   Field,
 }) => {
   const { fields, append, remove } = useFieldArray({
@@ -60,6 +62,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
       hasError={formState.isSubmitted && !formState.isSubmitting && !!error}
       wrapper="fieldset"
       name={name}
+      register={register}
     >
       {stashedObjects.length > 0 ? (
         <div>
@@ -98,6 +101,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
         getValues={getValues}
         unregister={unregister}
         trigger={trigger}
+        resetField={resetField}
         clearErrors={clearErrors}
         Field={Field}
       />

package/src/MultiplicityField/types.ts

@@ -1,5 +1,8 @@
-import { ErrorOption, UseFormReturn } from 'react-hook-form';
-import { FieldSpec, ControlledFieldProps } from '@digigov/form/Field/types';
+import type { ErrorOption, UseFormReturn } from 'react-hook-form';
+import type {
+  FieldSpec,
+  ControlledFieldProps,
+} from '@digigov/form/Field/types';
 
 export interface MultiplicityProps
   extends Omit<ControlledFieldProps, 'value' | 'onChange' | 'error' | 'extra'> {
@@ -12,6 +15,7 @@ export interface MultiplicityProps
   setValue: UseFormReturn['setValue'];
   getValues: UseFormReturn['getValues'];
   unregister: UseFormReturn['unregister'];
+  resetField?: UseFormReturn['resetField'];
   error?: ErrorOption;
   extra?: Record<string, any>;
   label?: FieldSpec['label'];

package/src/Questions/Questions.stories.js

@@ -1,7 +1,10 @@
 import Questions from '@digigov/form/Questions';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/Questions',
   component: Questions,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'Questions',
 };
 export { Default } from '@digigov/form/Questions/__stories__/Default';

package/src/Questions/Questions.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { getNextStep } from '@digigov/form/Questions/getNextStep';
 import { QuestionsContext } from '@digigov/form/Questions/QuestionsContext';
-import { StepInterface } from '@digigov/form/Questions/Step/types';
-import { QuestionsInterface } from '@digigov/form/Questions/types';
+import type { StepInterface } from '@digigov/form/Questions/Step/types';
+import type { QuestionsInterface } from '@digigov/form/Questions/types';
 
 const isBrowser = typeof window !== 'undefined';
 

package/src/Questions/QuestionsContext.tsx

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import { QuestionsContextInterface } from '@digigov/form/Questions/types';
+import type { QuestionsContextInterface } from '@digigov/form/Questions/types';
 
 const defaultStep = { name: '' };
 export const QuestionsContext = createContext<QuestionsContextInterface>({

package/src/Questions/Step/Step.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useState } from 'react';
 import { QuestionsContext } from '@digigov/form/Questions/QuestionsContext';
 import { StepArrayReview } from '@digigov/form/Questions/Step/StepArrayReview';
 import { StepContext } from '@digigov/form/Questions/Step/StepContext';
-import { StepInterface } from '@digigov/form/Questions/Step/types';
+import type { StepInterface } from '@digigov/form/Questions/Step/types';
 
 /**
  * The Step component accepts Step data as props

package/src/Questions/Step/StepArrayReview.tsx

@@ -5,8 +5,8 @@ import FormBuilder from '@digigov/form/FormBuilder';
 import Label from '@digigov/form/inputs/Label';
 import { QuestionsContext } from '@digigov/form/Questions/QuestionsContext';
 import { getAddMoreFields } from '@digigov/form/Questions/Step/getAddMoreFields';
-import { StepArrayReviewInterface } from '@digigov/form/Questions/Step/types';
-import { FieldSpec } from '@digigov/form/types';
+import type { StepArrayReviewInterface } from '@digigov/form/Questions/Step/types';
+import type { FieldSpec } from '@digigov/form/types';
 import PageTitleContainer, {
   PageTitleHeading,
 } from '@digigov/ui/app/PageTitleContainer';

package/src/Questions/Step/StepContext.tsx

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import { StepInterface } from '@digigov/form/Questions/Step/types';
+import type { StepInterface } from '@digigov/form/Questions/Step/types';
 
 export const StepContext = createContext<StepInterface>({
   name: '',

package/src/Questions/Step/StepDescription.tsx

@@ -1,7 +1,8 @@
 import React, { useContext } from 'react';
 import { StepContext } from '@digigov/form/Questions/Step/StepContext';
 import { useTranslation } from '@digigov/ui/i18n';
-import Paragraph, { ParagraphProps } from '@digigov/ui/typography/Paragraph';
+import type { ParagraphProps } from '@digigov/ui/typography/Paragraph';
+import Paragraph from '@digigov/ui/typography/Paragraph';
 
 export interface StepDescriptionInterface extends ParagraphProps {
   description?: string;

package/src/Questions/Step/StepForm.tsx

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
 import Field from '@digigov/form/Field';
-import { FieldProps } from '@digigov/form/Field/types';
+import type { FieldProps } from '@digigov/form/Field/types';
 import Fieldset from '@digigov/form/Fieldset';
 import FormBuilder from '@digigov/form/FormBuilder';
 import { StepContext } from '@digigov/form/Questions/Step/StepContext';
-import { FormBuilderProps } from '@digigov/form/types';
+import type { FormBuilderProps } from '@digigov/form/types';
 import Button from '@digigov/ui/form/Button';
 import { useTranslation } from '@digigov/ui/i18n';
 

package/src/Questions/Step/StepQuote.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import Paragraph, { ParagraphProps } from '@digigov/ui/typography/Paragraph';
+import type { ParagraphProps } from '@digigov/ui/typography/Paragraph';
+import Paragraph from '@digigov/ui/typography/Paragraph';
 
 export const StepQuote: React.FC<ParagraphProps> = ({ children, ...props }) => {
   return <Paragraph {...props}>{children}</Paragraph>;

package/src/Questions/Step/StepTitle.tsx

@@ -6,7 +6,8 @@ import {
 } 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 type { HeadingProps } from '@digigov/ui/typography/Heading';
+import { Heading } from '@digigov/ui/typography/Heading';
 import { HeadingCaption } from '@digigov/ui/typography/HeadingCaption';
 
 export interface StepTitleInterface {

package/src/Questions/Step/getAddMoreFields.tsx

@@ -1,5 +1,5 @@
-import { StepInterface } from '@digigov/form/Questions/Step/types';
-import { FieldSpec } from '@digigov/form/types';
+import type { StepInterface } from '@digigov/form/Questions/Step/types';
+import type { FieldSpec } from '@digigov/form/types';
 
 export const getAddMoreFields = (currentStep: StepInterface): FieldSpec[] => {
   return [

package/src/Questions/Step/types.tsx

@@ -1,4 +1,4 @@
-import { LabelProps } from '@digigov/form/inputs/Label';
+import type { LabelProps } from '@digigov/form/inputs/Label';
 
 export type StepType = 'object' | 'array';
 export type StepReviewAnswersType = 'positive' | 'negative';

package/src/Questions/__stories__/Default.tsx

@@ -75,7 +75,7 @@ const steps = [
   },
 ];
 
-export function Default() {
+export function Default(_: any) {
   return (
     <BasicLayout>
       <Top>

package/src/Questions/getNextStep.tsx

@@ -1,4 +1,4 @@
-import { StepInterface } from '@digigov/form/Questions/Step/types';
+import type { StepInterface } from '@digigov/form/Questions/Step/types';
 
 export function getNextStep(
   currentStep: any,

package/src/Questions/types.tsx

@@ -1,4 +1,4 @@
-import { StepInterface } from '@digigov/form/Questions/Step/types';
+import type { StepInterface } from '@digigov/form/Questions/Step/types';
 
 export interface QuestionsInterface {
   name: string;