How to use @commercetools-frontend/ui-kit - 10 common examples

if (TextInput.isEmpty(formValues.key)) errors.key.missing = true;

  // validate name
  // A localized string is considered empty when no translation is given at all
  if (LocalizedTextInput.isEmpty(formValues.name)) errors.name.missing = true;

  // validate slug
  // A slug must match [a-zA-Z0-9_-]{2,256}
  // The error object of the slug is
  //  {
  //    missing: Boolean,
  //    translations: { de: { hasForbiddenChars: Boolean }, ... },
  //  }
  // The "missing" part is used to highlight all fields, while the
  // "translations" part gets mapped to errors per translation.
  if (LocalizedTextInput.isEmpty(formValues.slug)) {
    errors.slug.missing = true;
  } else {
    const isValidSlug = value => /^[a-zA-Z0-9_-]{2,256}$/.test(value);
    const translationErrors = Object.keys(
      LocalizedTextInput.omitEmptyTranslations(formValues.slug)
    ).reduce((acc, language) => {
      const value = isValidSlug(formValues.slug[language])
        ? {}
        : { hasForbiddenChars: true };
      return {
        ...acc,
        [language]: value,
      };
    }, {});

    errors.slug.translations = translationErrors;

key: {},
    name: {},
    slug: {},
    description: {},
    inventory: {},
    price: {},
  };

  // validate key
  // Input elements usually provide a way to check whether it's value is empty
  // This is useful to determine whether a required value was not filled out.
  if (TextInput.isEmpty(formValues.key)) errors.key.missing = true;

  // validate name
  // A localized string is considered empty when no translation is given at all
  if (LocalizedTextInput.isEmpty(formValues.name)) errors.name.missing = true;

  // validate slug
  // A slug must match [a-zA-Z0-9_-]{2,256}
  // The error object of the slug is
  //  {
  //    missing: Boolean,
  //    translations: { de: { hasForbiddenChars: Boolean }, ... },
  //  }
  // The "missing" part is used to highlight all fields, while the
  // "translations" part gets mapped to errors per translation.
  if (LocalizedTextInput.isEmpty(formValues.slug)) {
    errors.slug.missing = true;
  } else {
    const isValidSlug = value => /^[a-zA-Z0-9_-]{2,256}$/.test(value);
    const translationErrors = Object.keys(
      LocalizedTextInput.omitEmptyTranslations(formValues.slug)

// validate slug
  // A slug must match [a-zA-Z0-9_-]{2,256}
  // The error object of the slug is
  //  {
  //    missing: Boolean,
  //    translations: { de: { hasForbiddenChars: Boolean }, ... },
  //  }
  // The "missing" part is used to highlight all fields, while the
  // "translations" part gets mapped to errors per translation.
  if (LocalizedTextInput.isEmpty(formValues.slug)) {
    errors.slug.missing = true;
  } else {
    const isValidSlug = value => /^[a-zA-Z0-9_-]{2,256}$/.test(value);
    const translationErrors = Object.keys(
      LocalizedTextInput.omitEmptyTranslations(formValues.slug)
    ).reduce((acc, language) => {
      const value = isValidSlug(formValues.slug[language])
        ? {}
        : { hasForbiddenChars: true };
      return {
        ...acc,
        [language]: value,
      };
    }, {});

    errors.slug.translations = translationErrors;
  }

  // validate description
  if (MultilineTextInput.isEmpty(formValues.description))
    errors.description.missing = true;

const validate = (formValues, locale) => {
  // To make it easier to attach errors during validation, we initialize
  // all form fields to empty objects.
  const errors = {
    key: {},
    name: {},
    slug: {},
    description: {},
    inventory: {},
    price: {},
  };

  // validate key
  // Input elements usually provide a way to check whether it's value is empty
  // This is useful to determine whether a required value was not filled out.
  if (TextInput.isEmpty(formValues.key)) errors.key.missing = true;

  // validate name
  // A localized string is considered empty when no translation is given at all
  if (LocalizedTextInput.isEmpty(formValues.name)) errors.name.missing = true;

  // validate slug
  // A slug must match [a-zA-Z0-9_-]{2,256}
  // The error object of the slug is
  //  {
  //    missing: Boolean,
  //    translations: { de: { hasForbiddenChars: Boolean }, ... },
  //  }
  // The "missing" part is used to highlight all fields, while the
  // "translations" part gets mapped to errors per translation.
  if (LocalizedTextInput.isEmpty(formValues.slug)) {
    errors.slug.missing = true;

const validate = (formValues, locale) => {
  // To make it easier to attach errors during validation, we initialize
  // all form fields to empty objects.
  const errors = {
    key: {},
    description: {},
    inventory: {},
    price: {},
  };

  // validate key
  // Input elements usually provide a way to check whether it's value is empty
  // This is useful to determine whether a required value was not filled out.
  if (TextInput.isEmpty(formValues.key)) errors.key.missing = true;

  // validate description
  if (MultilineTextInput.isEmpty(formValues.description))
    errors.description.missing = true;

  // validate inventory
  if (NumberInput.isEmpty(formValues.inventory)) {
    errors.inventory.missing = true;
  } else {
    // When the value is not empty, we can assume that it is a number
    if (formValues.inventory < 0) errors.inventory.negative = true;
    if (NumberInput.hasFractionDigits(formValues.inventory))
      errors.inventory.fractions = true;
  }

  // validate price

{({ className, style, tokens, getLineProps, getTokenProps }) => (
        <pre open="" style="{{"> https://github.com/stylelint/stylelint/issues/4020
            /* stylelint-disable-next-line property-no-unknown */
            overflowX: 'auto',
          }}
        &gt;
          {tokens.map((line, i) =&gt; (
            <div>
              {line.map((token, key) =&gt; {
                if (tokens.length === i + 1 &amp;&amp; token.empty) {
                  return null;
                }
                const tokenProps = getTokenProps({ token, key });
                return <span>;
              })}
            </span></div></pre>

// data provided when first opened. When the user would submit the form,
  // we would read the version from the cache (where it has increased).
  // We would thus skip the APIs ConcurrentModificationError, but the user has
  // never seen the updated version of the data. This is quite bad and can lead
  // to accidental loss of data. By keeping the version in the form values
  // instead an update of the version in the Apollo Cache does not affect the.
  // form. On submission the version from the form values will be used, and the
  // user will see the APIs ConcurrentModificationError as expected!
  version: doc.version,
  key: doc.key,
  // The name is initialized with all supported languages set to their value
  // or an empty string. This circumvents a lot of edge cases where we'd
  // otherwise have to deal with either undefined or an empty string, or a
  // filled string.
  name: LocalizedTextInput.createLocalizedString(resourceLanguages, doc.name),
  slug: LocalizedTextInput.createLocalizedString(resourceLanguages, doc.slug),
  // The product does not contain a "description" field by default. However,
  // the form expects description to be a string. Hence, we have to fall back
  // to a string here!
  description: doc.description || '',
  // The inventory should either be an empty string or a number. The inventory
  // could be undefined, in which case toFormValue will set it to an empty
  // string. This eases validation later on, as we don't have to deal with
  // undefined anymore.
  inventory: NumberInput.toFormValue(doc.inventory),
  // parseMoneyValue will ensure that the price field will have currencyCode and
  // amount filled out or set to empty strings. This reduces the cases we
  // need to deal with (amount, currencyCode or the whole object being
  // undefined).
  price: MoneyInput.parseMoneyValue(doc.price, locale),
});

// cache. The form will not reinitialize with the new data. The form uses the
  // data provided when first opened. When the user would submit the form,
  // we would read the version from the cache (where it has increased).
  // We would thus skip the APIs ConcurrentModificationError, but the user has
  // never seen the updated version of the data. This is quite bad and can lead
  // to accidental loss of data. By keeping the version in the form values
  // instead an update of the version in the Apollo Cache does not affect the.
  // form. On submission the version from the form values will be used, and the
  // user will see the APIs ConcurrentModificationError as expected!
  version: doc.version,
  key: doc.key,
  // The name is initialized with all supported languages set to their value
  // or an empty string. This circumvents a lot of edge cases where we'd
  // otherwise have to deal with either undefined or an empty string, or a
  // filled string.
  name: LocalizedTextInput.createLocalizedString(resourceLanguages, doc.name),
  slug: LocalizedTextInput.createLocalizedString(resourceLanguages, doc.slug),
  // The product does not contain a "description" field by default. However,
  // the form expects description to be a string. Hence, we have to fall back
  // to a string here!
  description: doc.description || '',
  // The inventory should either be an empty string or a number. The inventory
  // could be undefined, in which case toFormValue will set it to an empty
  // string. This eases validation later on, as we don't have to deal with
  // undefined anymore.
  inventory: NumberInput.toFormValue(doc.inventory),
  // parseMoneyValue will ensure that the price field will have currencyCode and
  // amount filled out or set to empty strings. This reduces the cases we
  // need to deal with (amount, currencyCode or the whole object being
  // undefined).
  price: MoneyInput.parseMoneyValue(doc.price, locale),
});

errors.description.missing = true;

  // validate inventory
  if (NumberInput.isEmpty(formValues.inventory)) {
    errors.inventory.missing = true;
  } else {
    // When the value is not empty, we can assume that it is a number
    if (formValues.inventory < 0) errors.inventory.negative = true;
    if (NumberInput.hasFractionDigits(formValues.inventory))
      errors.inventory.fractions = true;
  }

  // validate price
  if (MoneyInput.isEmpty(formValues.price)) {
    errors.price.missing = true;
  } else if (MoneyInput.isHighPrecision(formValues.price, locale)) {
    errors.price.unsupportedHighPrecision = true;
  }

  // Formik will think there are errors when the object returned as a
  // validation result has at least one key. We therefore have to omit
  // all empty fields inside the error object.
  // When an empty object is returned, formik will assume there were no errors
  return omitEmpty(errors);
};

errors.description.missing = true;

  // validate inventory
  if (NumberInput.isEmpty(formValues.inventory)) {
    errors.inventory.missing = true;
  } else {
    // When the value is not empty, we can assume that it is a number
    if (formValues.inventory < 0) errors.inventory.negative = true;
    if (NumberInput.hasFractionDigits(formValues.inventory))
      errors.inventory.fractions = true;
  }

  // validate price
  if (MoneyInput.isEmpty(formValues.price)) {
    errors.price.missing = true;
  } else if (MoneyInput.isHighPrecision(formValues.price, locale)) {
    errors.price.unsupportedHighPrecision = true;
  }

  // Formik will think there are errors when the object returned as a
  // validation result has at least one key. We therefore have to omit
  // all empty fields inside the error object.
  // When an empty object is returned, formik will assume there were no errors
  return omitEmpty(errors);
};