@digigov/form 0.10.8 → 0.10.10

package/src/FormBuilder/FormBuilder.tsx

@@ -0,0 +1,165 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useCallback, useRef } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@digigov/form/utils';
+import { useValidationSchema } from '@digigov/form/validators';
+import Fieldset from '@digigov/form/Fieldset';
+import Field from '@digigov/form/Field';
+import { FormBaseProps, FormData, FormBuilderProps } from '@digigov/form/types';
+import { FormContext } from '@digigov/form/FormContext';
+import { Form } from '@digigov/react-core/Form';
+
+export 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 => {
+      onSubmit && onSubmit(data);
+    },
+    [onSubmit]
+  );
+
+  const ctx = {
+    fieldsMap,
+    fieldsetsMap,
+    control: form.control,
+    register: form.register,
+    watch: form.watch,
+    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,
+  };
+  return (
+    <FormContext.Provider value={ctx}>
+      <Form
+        grid={grid}
+        onSubmit={form.handleSubmit(handleSubmit)}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </Form>
+    </FormContext.Provider>
+  );
+});
+
+export 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}
+      {children}
+    </FormBase>
+  );
+});
+
+export default FormBuilder;

package/src/FormBuilder/__stories__/Default.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+export const Default = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      debugger;
+      console.log(data);
+    }}
+  >
+    <Field
+      key="business-title"
+      name="business-title"
+      type="string"
+      label={{ primary: 'Όνομα επιχείρησης' }}
+      required
+    />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+
+export default Default;

package/src/FormBuilder/index.tsx

@@ -0,0 +1,3 @@
+import { FormBuilder } from '@digigov/form/FormBuilder/FormBuilder';
+
+export default FormBuilder;

package/src/FormContext.tsx

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