@digigov/form 2.0.0-2445d5cb → 2.0.0-254f7786

package/src/Fieldset/types.tsx

@@ -1,5 +1,5 @@
-import { FieldsetLegendProps } from '@digigov/react-core/FieldsetLegend';
-import { HintProps } from '@digigov/react-core/Hint';
+import { FieldsetLegendProps } from '@digigov/ui/form/FieldContainer';
+import { HintProps } from '@digigov/ui/typography/Hint';
 
 export interface FieldsetLabelProps extends FieldsetLegendProps {}
 export interface FieldsetCaptionProps extends HintProps {}

package/src/FormBuilder/{FormBuilder.mdx → doc.mdx}

@@ -8,11 +8,8 @@ sidebar_label: FormBuilder
 
 `stepForm` component:
 
-<Story
-  packageName="@digigov/form"
-  component="FormBuilder"
-  story="Default.tsx"
-/>
+<code src="@digigov/form/FormBuilder/__stories__/Default.tsx" />
+
 
 ### Importing and using FormBuilder Component
 
@@ -34,18 +31,14 @@ import BasicLayout, {
 import {FormBuilder} from '@digigov/form';
 
 export default function MyComponent({ props }) {
-
   return (
     <BasicLayout>
-      .
-      .
+      /* code */
       <Container>
         <Main>
-          .
-          .
+          /* code */
           <FormBuilder></FormBuilder>
-          .
-          .
+          /* code */
         </Main>
       </Container>
       <Bottom>
@@ -54,7 +47,6 @@ export default function MyComponent({ props }) {
     </BasicLayout>
   );
 }
-}
 ```
 
 ### Props
@@ -83,7 +75,7 @@ Below are demostrated some examples for each type of field
 
 The examples above are implemented by using the code below
 
-```javascript
+```jsx
 import React, { useState } from 'react';
 import BasicLayout, {
   Top,
@@ -91,7 +83,7 @@ import BasicLayout, {
   Main,
   Bottom,
 } from '@digigov/ui/layouts/Basic';
-import Header, { HeaderTitle } from '@digigov/ui/app/Header';
+import Header, { HeaderTitle, HeaderContent, HeaderSection } from '@digigov/ui/app/Header';
 import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
 import GovGRFooter from '@digigov/ui/govgr/Footer';
 import Button from '@digigov/ui/form/Button';
@@ -99,8 +91,9 @@ import PageTitleContainer, {
   PageTitleCaption,
   PageTitleHeading,
 } from '@digigov/ui/app/PageTitleContainer';
-import BackButton from '@digigov/ui/form/Button/BackButton';
-import FormBuilder, { Fieldset, FieldsetLabel, Field } from '@digigov/form';
+import BackLink from '@digigov/ui/navigation/BackLink';
+import FormBuilder, { Fieldset, Field } from '@digigov/form';
+import { FieldsetLabel } from '@digigov/form/Fieldset';
 import { useTranslation } from '@digigov/ui/i18n';
 
 const FIELDS = [
@@ -203,30 +196,24 @@ const initialValues = {
   string: 'default content',
 };
 
-const useStyles = makeStyles(
-  {
-    top: { minHeight: '75px' },
-    main: {},
-    side: {},
-  },
-  { name: 'MuiSite' }
-);
-
 export default function Index() {
-  const styles = useStyles();
   const [data, setData] = useState(null);
   const { t } = useTranslation();
   return (
     <BasicLayout>
-      <Top className={styles.top}>
+      <Top>
         <Header>
-          <GovGRLogo />
-          <HeaderTitle>Service name</HeaderTitle>
+          <HeaderContent>
+            <HeaderSection>
+              <GovGRLogo />
+              <HeaderTitle>Service name</HeaderTitle>
+            </HeaderSection>
+          </HeaderContent>
         </Header>
       </Top>
       <Container>
-        <Main className={styles.main}>
-          <BackButton>{t('button.back')}</BackButton>
+        <Main>
+          <BackLink>Back</BackLink>
           <PageTitleContainer>
             <PageTitleCaption>Before we start</PageTitleCaption>
             <PageTitleHeading>Submit a form</PageTitleHeading>
@@ -237,7 +224,7 @@ export default function Index() {
             initial={initialValues}
           >
             <Fieldset>
-              <FieldsetLabel>This is a fieldset</FieldsetLabel>
+              <FieldsetLabel size="lg">This is a fieldset</FieldsetLabel>
               {FIELDS.map((field) => (
                 <Field key={field.key} name={field.key} />
               ))}

package/src/FormBuilder/index.test.tsx

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

package/src/FormBuilder/index.tsx

@@ -1,8 +1,179 @@
-import {
-  FormBuilder,
-  useFormContext,
-  useFormValues,
-  FormBase,
-} from '@digigov/form';
-export { useFormContext, useFormValues, FormBase };
+import React, { useCallback, useContext, useRef } from 'react';
+import { useForm } from 'react-hook-form';
+import { Field } from '@digigov/form/Field';
+import { CONTROLLED_FIELD_COMPONENTS } from '@digigov/form/Field/utils';
+import { Fieldset } from '@digigov/form/Fieldset';
+import { FormContext } from '@digigov/form/FormContext';
+import { FormBaseProps, FormData, FormBuilderProps } from '@digigov/form/types';
+import { yupResolver } from '@digigov/form/utils';
+import { useValidationSchema } from '@digigov/form/validators';
+import { Button } from '@digigov/ui/form/Button';
+import { Form } from '@digigov/ui/form/Form';
+
+const FormBase = React.forwardRef(function FormBase(
+  {
+    onSubmit,
+    children,
+    registerField,
+    fieldsMap,
+    fieldsetsMap,
+    resolver,
+    mode,
+    initial,
+    reValidateMode,
+    shouldFocusError,
+    criteriaMode,
+    componentRegistry,
+    grid,
+    ...props
+  }: FormBaseProps,
+  ref: React.Ref<HTMLFormElement>
+) {
+  const form = useForm({
+    resolver,
+    mode,
+    defaultValues: initial,
+    reValidateMode,
+    shouldFocusError,
+    criteriaMode,
+  });
+
+  const handleSubmit = useCallback(
+    (data: FormData): void => {
+      if (onSubmit) onSubmit(data);
+    },
+    [onSubmit]
+  );
+  const submit = form.handleSubmit(handleSubmit);
+  const ctx = {
+    fieldsMap,
+    fieldsetsMap,
+    control: form.control,
+    register: form.register,
+    watch: form.watch,
+    resetField: form.resetField,
+    registerField: registerField,
+    errors: form.formState.errors,
+    formState: form.formState,
+    reset: form.reset,
+    trigger: form.trigger,
+    getFieldState: form.getFieldState,
+    setValue: form.setValue,
+    clearErrors: form.clearErrors,
+    getValues: form.getValues,
+    unregister: form.unregister,
+    componentRegistry,
+    setError: form.setError,
+    formRef: ref,
+    submit,
+  };
+  return (
+    <FormContext.Provider value={ctx}>
+      <Form grid={grid} onSubmit={submit} ref={ref} {...props}>
+        {children}
+      </Form>
+    </FormContext.Provider>
+  );
+});
+
+const useFormContext = () => {
+  return useContext(FormContext);
+};
+const useFormValues = () => {
+  const ctx = useFormContext();
+  return ctx.getValues();
+};
+const FormBuilder = React.forwardRef(function FormBuilder(
+  {
+    fields = [],
+    fieldsets,
+    initial = {},
+    onSubmit,
+    children,
+    reValidateMode = 'onSubmit',
+    mode = 'onSubmit',
+    shouldFocusError = true,
+    criteriaMode = 'all',
+    auto = false,
+    validatorRegistry,
+    componentRegistry,
+    grid = false,
+    ...props
+  }: FormBuilderProps,
+  ref: React.Ref<HTMLFormElement>
+): React.ReactElement {
+  const fieldsState = useRef(fields);
+  const setFieldsState = useCallback((newFields) => {
+    fieldsState.current = newFields;
+  }, []);
+  const schema = useValidationSchema(fieldsState, validatorRegistry);
+  const registerField = useCallback((field) => {
+    const fieldIndex = fieldsState.current.findIndex(
+      (f) => f.key === field.key
+    );
+    if (fieldIndex > -1) {
+      fieldsState.current[fieldIndex] = field;
+    } else {
+      fieldsState.current.push(field);
+    }
+    setFieldsState(fieldsState.current);
+  }, []);
+  let resolver;
+  let fieldsMap;
+  let fieldsetsMap;
+  let fieldChildren;
+  if (schema) {
+    resolver = yupResolver(schema);
+    fieldsMap = fields
+      ? fields.reduce((map, field) => ({ ...map, [field.key]: field }), {})
+      : {};
+    fieldsetsMap =
+      fieldsets &&
+      fieldsets.reduce(
+        (map, fieldset) => ({ ...map, [fieldset.key]: fieldset }),
+        {}
+      );
+
+    if (auto) {
+      if (fieldsets) {
+        fieldChildren = fieldsets.map((fieldset) => (
+          <Fieldset key={fieldset.key} />
+        ));
+      } else if (fields) {
+        fieldChildren = fields.map((field) => (
+          <Field key={field.key} name={field.key} />
+        ));
+      }
+    }
+  }
+  return (
+    <FormBase
+      resolver={resolver}
+      fieldsetsMap={fieldsetsMap}
+      fieldsMap={fieldsMap}
+      registerField={registerField}
+      initial={initial}
+      reValidateMode={reValidateMode}
+      mode={mode}
+      shouldFocusError={shouldFocusError}
+      criteriaMode={criteriaMode}
+      onSubmit={onSubmit}
+      componentRegistry={componentRegistry}
+      ref={ref}
+      grid={grid}
+      {...props}
+    >
+      {fieldChildren}
+      {auto && <Button type="submit">Συνέχεια</Button>}
+      {children}
+    </FormBase>
+  );
+});
+export const ControlledFormBuilder = (props) => {
+  return (
+    <FormBuilder {...props} componentRegistry={CONTROLLED_FIELD_COMPONENTS} />
+  );
+};
 export default FormBuilder;
+
+export { useFormContext, useFormValues, FormBase };

package/src/FormBuilder/scenarios.test.tsx

@@ -589,7 +589,7 @@ const generateScenarios = (
         };
         scenarioFill.push(finalScenarioFill);
         for (const multiplicityField of fillTemplate?.value?.of?.extra
-          ?.fields) {
+          ?.fields ?? []) {
           scenarioExpect.push({
             type: 'success',
             fieldKey: `${fillTemplate.fieldKey}\\.${i}\\.${multiplicityField.fieldKey}`,
@@ -1120,7 +1120,7 @@ const inputsScenarios = [
         args: {
           maxSizeToMb: 0.0003,
         },
-        text: el.form.error.file_size,
+        text: el.form.error.image_size,
       },
       {
         type: 'error',

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/add-objects.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import React, { useEffect, useMemo } from 'react';
 import {
   ErrorOption,
@@ -14,16 +13,15 @@ import {
 } 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 { FieldObject } from '@digigov/form/FieldObject';
+import { Fieldset } from '@digigov/form/Fieldset';
 import type {
   MultiplicityProps,
   StashedObject,
 } 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'> {
@@ -51,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}`;
@@ -106,8 +105,10 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
                           (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}
@@ -186,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/{MultiplicityField.mdx → 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

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

package/src/MultiplicityField/index.tsx

@@ -1,19 +1,20 @@
 import React, { useState } from 'react';
 import { useFieldArray, UseFormReturn } from 'react-hook-form';
-import FieldContainer from '@digigov/form/Field/FieldBaseContainer';
-
-import FieldObject from '@digigov/form/FieldObject';
-import AddObjects from '@digigov/form/MultiplicityField/add-objects';
+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 { Button } from '@digigov/react-core/Button';
-import { Card } from '@digigov/react-core/Card';
-import { CardAction } from '@digigov/react-core/CardAction';
-import { CardContent } from '@digigov/react-core/CardContent';
-import { CardHeading } from '@digigov/react-core/CardHeading';
-import { Heading } from '@digigov/react-core/Heading';
+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> = ({
@@ -30,6 +31,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
   setValue,
   getValues,
   unregister,
+  Field,
 }) => {
   const { fields, append, remove } = useFieldArray({
     control,
@@ -47,7 +49,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
     setStashedObjects(newStashedObjects);
   };
   return (
-    <FieldContainer
+    <FieldBaseContainer
       label={label}
       layout={layout}
       error={
@@ -96,8 +98,9 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
         unregister={unregister}
         trigger={trigger}
         clearErrors={clearErrors}
+        Field={Field}
       />
-    </FieldContainer>
+    </FieldBaseContainer>
   );
 };
 

package/src/MultiplicityField/types.ts

@@ -1,6 +1,5 @@
 import { ErrorOption, UseFormReturn } from 'react-hook-form';
-import { FieldSpec } from '@digigov/form/Field/types';
-import { ControlledFieldProps } from '@digigov/form/Field/types';
+import { FieldSpec, ControlledFieldProps } from '@digigov/form/Field/types';
 
 export interface MultiplicityProps
   extends Omit<ControlledFieldProps, 'value' | 'onChange' | 'error' | 'extra'> {