@digigov/form 2.0.0-cbc56209 → 2.0.0-d4fe516b

package/src/FieldArray/index.tsx

@@ -1,25 +1,40 @@
 import React from 'react';
 import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
-import FieldContainer from '@digigov/form/Field/FieldBaseContainer';
+import { FieldBaseContainer } from '@digigov/form/Field/FieldBaseContainer';
 import { FieldProps } from '@digigov/form/Field/types';
-import FieldObject from '@digigov/form/FieldObject';
-import { FieldsetLabel } from '@digigov/form/Fieldset';
-import Fieldset from '@digigov/react-core/Fieldset';
-import { Button, Card, Hint } from '@digigov/ui';
+import { FormDialog } from '@digigov/form/FieldArray/FormDialog';
+import { FieldObject } from '@digigov/form/FieldObject';
+import { FieldsetLabel, Fieldset } from '@digigov/form/Fieldset';
+import { Card } from '@digigov/ui/content/Card';
+import { Button } from '@digigov/ui/form/Button';
+import { Hint } from '@digigov/ui/typography/Hint';
+
 export interface FieldArrayProps extends FieldProps {
   control: UseFormReturn['control'];
+  trigger: UseFormReturn['trigger'];
   register: UseFormReturn['register'];
+  clearErrors: UseFormReturn['clearErrors'];
   formState: UseFormReturn['formState'];
   error?: ErrorOption;
+  getValues: UseFormReturn['getValues'];
+  setValue: UseFormReturn['setValue'];
+  reset: UseFormReturn['reset'];
+  Field: React.FC<FieldProps>;
 }
 export const FieldArray: React.FC<FieldArrayProps> = ({
   name,
+  trigger,
   register,
+  clearErrors,
   control,
   formState,
   error,
+  getValues,
+  setValue,
   layout,
+  reset,
   label,
+  Field,
   ...customField
 }) => {
   const { fields, append, remove } = useFieldArray({
@@ -28,7 +43,7 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
   });
 
   return (
-    <FieldContainer
+    <FieldBaseContainer
       label={label}
       layout={layout}
       error={
@@ -39,44 +54,82 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
           ? error
           : undefined
       }
+      hasError={formState.isSubmitted && !formState.isSubmitting && !!error}
       wrapper="fieldset"
       name={name}
     >
       {fields.length === 0 && (
-        <Hint>{customField.extra?.label.object?.nothing_added}</Hint>
+        <Hint {...customField.extra?.label.object?.nothing_added_props}>
+          {customField.extra?.label.object?.nothing_added}
+        </Hint>
       )}
-      {fields.map((field, index) => (
-        <Card variant="border" key={field.id}>
-          <Fieldset>
-            <FieldsetLabel>
-              {customField.extra?.label.object.title} {index + 1}
-            </FieldsetLabel>
-            <FieldObject
-              name={`${name}.${index}`}
-              error={Array.isArray(error) && error[index]}
-              formState={formState}
-              register={register}
-              control={control}
-              {...customField.extra?.of}
-            />
-            <Button type="button" color="warning" onClick={() => remove(index)}>
-              Remove
-            </Button>
-          </Fieldset>
-        </Card>
-      ))}
-
-      <Button
-        type="button"
-        color="secondary"
-        onClick={(ev) => {
-          ev.preventDefault();
-          append({});
-        }}
-      >
-        {customField.extra?.label.object?.add}
-      </Button>
-    </FieldContainer>
+      {customField.extra?.variant === 'dialog' ? (
+        <FormDialog
+          name={name}
+          trigger={trigger}
+          register={register}
+          clearErrors={clearErrors}
+          control={control}
+          formState={formState}
+          error={error}
+          getValues={getValues}
+          setValue={setValue}
+          layout={layout}
+          label={label}
+          Field={Field}
+          reset={reset}
+          {...customField}
+        />
+      ) : (
+        <>
+          {fields.map((field, index) => (
+            <Card
+              variant={customField.extra?.border ? 'border' : 'divider'}
+              key={field.id}
+            >
+              <Fieldset>
+                <FieldsetLabel>
+                  {customField.extra?.label.object.title}{' '}
+                  {!customField.extra?.noIndex && index + 1}
+                </FieldsetLabel>
+                <FieldObject
+                  name={`${name}.${index}`}
+                  error={Array.isArray(error) && error[index]}
+                  formState={formState}
+                  register={register}
+                  control={control}
+                  {...customField.extra?.of}
+                  Field={Field}
+                />
+                <Button
+                  name={`${name}-object-remove`}
+                  variant={customField.extra?.label.object?.deleteButtonVariant}
+                  type="button"
+                  color="warning"
+                  onClick={() => remove(index)}
+                  disabled={!customField?.editable}
+                >
+                  {customField.extra?.label.object?.delete}
+                </Button>
+              </Fieldset>
+            </Card>
+          ))}
+          <Button
+            type="button"
+            name={`${name}-add-object`}
+            color="secondary"
+            variant={customField.extra?.label.object?.addButtonVariant}
+            onClick={(ev) => {
+              ev.preventDefault();
+              append({});
+            }}
+            disabled={!customField?.editable}
+          >
+            {customField.extra?.label.object?.add}
+          </Button>
+        </>
+      )}
+    </FieldBaseContainer>
   );
 };
 

package/src/FieldObject/index.tsx

@@ -2,10 +2,14 @@ import React, { useMemo } from 'react';
 import { ErrorOption, UseFormReturn } from 'react-hook-form';
 import { FieldBase } from '@digigov/form/Field/FieldBase';
 import { CalculatedField, FieldProps } from '@digigov/form/Field/types';
-import { calculateField } from '@digigov/form/Field/utils';
-import Fieldset, { FieldsetCaption } from '@digigov/form/Fieldset';
+import {
+  FIELD_COMPONENTS,
+  ALTERNATIVE_COMPONENTS,
+} from '@digigov/form/Field/utils';
+import { calculateField } from '@digigov/form/Field/utils/calculateField';
+import { Fieldset, FieldsetCaption } from '@digigov/form/Fieldset';
 import { FieldSpec } from '@digigov/form/types';
-import { FieldsetLegend } from '@digigov/react-core/FieldsetLegend';
+import { FieldsetLegend } from '@digigov/ui/form/FieldContainer';
 import { useTranslation } from '@digigov/ui/i18n';
 
 export interface FieldObjectProps extends Omit<FieldProps, 'key'> {
@@ -14,6 +18,8 @@ export interface FieldObjectProps extends Omit<FieldProps, 'key'> {
   reset: UseFormReturn['reset'];
   formState: UseFormReturn['formState'];
   error?: ErrorOption;
+  defaultValue?: undefined;
+  Field: React.FC<FieldProps>;
 }
 
 export const FieldObject: React.FC<FieldObjectProps> = ({
@@ -24,6 +30,9 @@ export const FieldObject: React.FC<FieldObjectProps> = ({
   register,
   reset,
   formState,
+  error,
+  defaultValue,
+  Field,
 }) => {
   const { t } = useTranslation();
 
@@ -37,14 +46,16 @@ export const FieldObject: React.FC<FieldObjectProps> = ({
       )}
       {extra?.fields.map((field) => (
         <FieldObjectItem
-          key={`${name}.${field.key}`}
-          name={`${name}.${field.key}`}
+          key={`${name}${field.key ? `.${field.key}` : ''}`}
+          name={`${name}${field.key ? `.${field.key}` : ''}`}
           control={control}
           register={register}
           reset={reset}
           field={field}
-          error={formState.errors && formState.errors[field.key]}
+          error={error && error[field.key]}
           formState={formState}
+          defaultValue={defaultValue}
+          Field={Field}
         />
       ))}
     </Fieldset>
@@ -59,6 +70,10 @@ export interface FieldObjectItemProps {
   reset: UseFormReturn['reset'];
   formState: UseFormReturn['formState'];
   error?: ErrorOption;
+  children?: React.ReactNode;
+  // defaultValue?: FormData | undefined;
+  defaultValue?: undefined;
+  Field: React.FC<FieldProps>;
 }
 
 const FieldObjectItem: React.FC<FieldObjectItemProps> = ({
@@ -70,21 +85,26 @@ const FieldObjectItem: React.FC<FieldObjectItemProps> = ({
   formState,
   reset,
   register,
+  defaultValue,
+  Field,
 }) => {
   const calculatedField: CalculatedField = useMemo(
-    () => calculateField(children, field),
+    () =>
+      calculateField(children, field, FIELD_COMPONENTS, ALTERNATIVE_COMPONENTS),
     [field]
   );
-
+  console.log(field);
   const customError = error ? error : formState?.errors[name];
   return (
     <FieldBase
       {...calculatedField}
       name={name}
+      Field={Field}
       control={control}
       reset={reset}
       register={register}
       error={customError}
+      defaultValue={defaultValue}
     />
   );
 };

package/src/Fieldset/index.tsx

@@ -4,11 +4,11 @@ import {
   FieldsetCaptionProps,
   FieldsetBodyProps,
 } from '@digigov/form/Fieldset/types';
-import Fieldset from '@digigov/react-core/Fieldset';
-import FieldsetLegend from '@digigov/react-core/FieldsetLegend';
-import Hint from '@digigov/react-core/Hint';
-import Grid from '@digigov/ui/layouts/Grid';
-import NormalText from '@digigov/ui/typography/NormalText';
+import { Fieldset } from '@digigov/react-core/Fieldset';
+import { FieldsetLegend } from '@digigov/ui/form/FieldContainer';
+import { Grid } from '@digigov/ui/layouts/Grid';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { NormalText } from '@digigov/ui/typography/NormalText';
 
 export const FieldsetLabel: React.FC<FieldsetLabelProps> = ({
   children,

package/src/Fieldset/types.tsx

@@ -1,6 +1,8 @@
-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 {}
-export interface FieldsetBodyProps {}
+export interface FieldsetBodyProps {
+  children?: React.ReactNode;
+}

package/src/FormBuilder/FormBuilder.stories.js

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

package/src/FormBuilder/__stories__/AutoErrorGrouping.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import FormBuilder, { FieldSpec } from '@digigov/form';
+
+const FIELDS: FieldSpec[] = [
+  {
+    key: 'name',
+    type: 'string',
+    required: true,
+    layout: { xl: 4, lg: 4, md: 6, xs: 6 },
+    label: {
+      primary: 'Όνομα',
+    },
+  },
+  {
+    key: 'surname',
+    type: 'string',
+    required: true,
+    layout: { xl: 4, lg: 4, md: 6, xs: 6 },
+    label: {
+      primary: 'Επίθετο',
+    },
+  },
+  {
+    key: 'address',
+    type: 'string',
+    required: true,
+    layout: { xl: 4, lg: 2, md: 6, xs: 6 },
+    label: {
+      primary: 'Διεύθυνση',
+    },
+  },
+  {
+    key: 'town',
+    type: 'string',
+    required: true,
+    layout: { xl: 4, lg: 4, md: 6, xs: 6 },
+    label: {
+      primary: 'Πόλη',
+    },
+  },
+  {
+    key: 'country',
+    type: 'string',
+    required: true,
+    layout: { xs: 12 },
+    label: {
+      primary: 'Χώρα',
+    },
+  },
+];
+
+export const AutoErrorGrouping = () => (
+  <FormBuilder
+    grid={true}
+    auto={true}
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+    fields={FIELDS}
+  ></FormBuilder>
+);
+
+export default AutoErrorGrouping;

package/src/FormBuilder/__stories__/ErrorGrouping.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { ErrorGroup } from '@digigov/form/Field/ErrorGroup';
+import { Button } from '@digigov/ui/form/Button';
+
+export const ErrorGrouping = () => (
+  <FormBuilder
+    grid={true}
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+  >
+    <ErrorGroup>
+      <Field
+        key="name"
+        name="name"
+        type="string"
+        label={{ primary: 'Όνομα' }}
+        layout={{ xs: 4 }}
+        required
+      />
+      <Field
+        key="surname"
+        name="surname"
+        type="string"
+        label={{ primary: 'Επίθετο' }}
+        layout={{ xs: 4 }}
+        required
+      />
+      <Field
+        key="address"
+        name="address"
+        type="string"
+        label={{ primary: 'Διεύθυνση' }}
+        layout={{ xs: 4 }}
+        required
+      />
+    </ErrorGroup>
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+
+export default ErrorGrouping;

package/{FormBuilder/FormBuilder.mdx → src/FormBuilder/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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant';
+import { AutoErrorGrouping } from '@digigov/form/FormBuilder/__stories__/AutoErrorGrouping';
+import { Default } from '@digigov/form/FormBuilder/__stories__/Default';
+import { ErrorGrouping } from '@digigov/form/FormBuilder/__stories__/ErrorGrouping';
+
+test('renders the All FormBuilder variants', async ({ mount, page }) => {
+  await mount(
+    <div>
+      <TestVariant title="AutoErrorGrouping">
+        <AutoErrorGrouping />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="ErrorGrouping">
+        <ErrorGrouping />
+      </TestVariant>
+    </div>
+  );
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});