app.js

import React from 'react';

import { useForm } from 'hooks';

import settings from './form-settings';

const App = () => {
  const {
    components: { Form, Submit },
    elements: {
      fields: {
        unordered: { email, location, secret, tel },
      },
    },
  } = useForm(settings);

  return (
    <Form>
      <div>
        <div>{email}</div>
      </div>
      <div>
        <div>{location}</div>
      </div>
      <div>
        <div>{secret}</div>
      </div>
      <div>
        <div>{tel}</div>
      </div>
      <Submit>Save form</Submit>
    </Form>
  );
};

form-settings.js

import { getLocationsByKeyword, saveUser } from 'services';
import { useI18n } from 'hooks';
import {
  validEmail,
  validLocation,
  strongPassword,
  validPhoneNumber,
} from 'validations';
import { EMAIL, AUTO_COMPLETE, PASSWORD, PHONE } from 'components/fields';

import messages from './messages';

export default () => {
  const { email, location, secret, phone } = useI18n(messages);

  return {
    fields: [
      {
        name: 'email',
        type: EMAIL,
        label: email,
        validation: validEmail().isRequired(),
      },
      {
        name: 'location',
        type: AUTO_COMPLETE,
        label: location,
        validation: validLocation().isRequired(),
        settings: {
          onComplete: ({ value, feed, fail }) =>
            getLocationsByKeyword(value)
              .then(feed)
              .catch(fail),
        },
      },
      {
        name: 'secret',
        type: PASSWORD,
        label: secret,
        validation: strongPassword().isRequired(),
      },
      {
        name: 'tel',
        type: PHONE,
        label: (
          <a
            href="https://en.wikipedia.org/wiki/Telephone_numbers_in_Germany"
            target="_blank"
            title={phone}
          >
            {phone}
          </a>
        ),
        validation: validPhoneNumber(),
      },
    ],
    onSubmit: data => {
      /*
       * {
       *   "email": "f.camargo@expertlead.de",
       *   "location": {
       *     "accent": "Berlin",
       *     "coordinates": {
       *       "latitude": 52.516666,
       *       "longitude": 13.4
       *     },
       *     "latitude": 52.516666,
       *     "longitude": 13.4,
       *     "country": {
       *       "id": "faf4dbb1-9a4e-42b4-8302-782220e7d150",
       *       "iso2code": "de",
       *       "name": "Germany"
       *     },
       *     "id": "faf4dbb1-9a4e-42b4-8302-782220e7d150",
       *     "iso2code": "de",
       *     "name": "Germany",
       *     "id": "28ce44de-4c5a-4bce-a4b7-07e3be89b666",
       *     "name": "berlin"
       *   },
       *   "secret": "b4d455P455!",
       *   "tel": "(49) 030 209663155",
       * }
       */
      console.log(data);

      saveUser(data);
    },
  };
};

validations.js

import { string, object, number } from 'yup';

export const validEmail = () =>
  string()
    .trim()
    .min(3)
    .max(255)
    .email();

export const validLocation = () =>
  object({
    accent: string().isRequired(),
    coordinates: {
      latitude: number().isRequired(),
      longitude: number().isRequired(),
    },
    latitude: number().isRequired(),
    longitude: number().isRequired(),
    country: {
      id: string().isRequired(),
      iso2code: string().isRequired(),
      name: string().isRequired(),
    },
    id: string().isRequired(),
    iso2code: string().isRequired(),
    name: string().isRequired(),
    id: string().isRequired(),
    name: string().isRequired(),
  });

export const strongPassword = () =>
  string()
    .trim()
    .min(6)
    .max(50)
    .matches(
      /^(?=.*[\d])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*])[\w!@#$%^&*]{6,}$/
    );

export const validPhoneNumber = () =>
  string()
    .trim()
    .min(12)
    .max(12)
    .matches(/\(?\+\(?49\)?[ ()]?([- ()]?\d[- ()]?){10}/);