@commercetools-uikit/field-errors 0.0.0-canary-2021830134526

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 commercetools GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,99 @@
+<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
+<!-- This file is created by the `yarn generate-readme` script. -->
+
+# FieldErrors
+
+## Description
+
+Renders errors based on configuration.
+
+## Installation
+
+```
+yarn add @commercetools-uikit/field-errors
+```
+
+```
+npm --save install @commercetools-uikit/field-errors
+```
+
+Additionally install the peer dependencies (if not present)
+
+```
+yarn add react react-intl
+```
+
+```
+npm --save install react react-intl
+```
+
+## Usage
+
+```jsx
+import FieldErrors from '@commercetools-uikit/field-errors';
+
+const Example = () => (
+  // This example shows how to handle custom errors on top of the
+  // predefined errors of FieldErrors which this component and other
+  // Field components use under the hood.
+  <FieldErrors
+    errors={{
+      [FieldErrors.errors.MISSING]: true,
+      duplicate: true,
+      minLength: true,
+    }}
+    isVisible={true}
+    renderError={(key) => {
+      switch (key) {
+        case 'duplicate':
+          return 'This thing is already in use. It must be unique.';
+        default:
+          // When null is returned then the default error handling from
+          // renderDefaultError will kick in for that error.
+          return null;
+      }
+    }}
+    renderDefaultError={(key) => {
+      switch (key) {
+        case 'minLength':
+          return 'This thing is too short.';
+        default:
+          // When null is returned then the error handling defined in
+          // FieldError itself will kick in
+          return null;
+      }
+    }}
+  />
+);
+
+export default Example;
+```
+
+## Properties
+
+| Props                | Type                                                           | Required | Default | Description                                                                                                                                                                                                                                   |
+| -------------------- | -------------------------------------------------------------- | :------: | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `errors`             | `Record`                                                       |          |         | List of errors. Only entries with truthy values will count as active errors.                                                                                                                                                                  |
+| `isVisible`          | `boolean`                                                      |          |         | `true` when the error messages should be rendered. Usually you'd pass in a `touched` state of fields.                                                                                                                                         |
+| `renderError`        | `Function`<br/>[See signature.](#signature-renderError)        |          |         | Function which gets called with each error key (from the `errors` prop) and may render an error message or return `null` to hand the error handling off to `renderDefaultError`.                                                              |
+| `renderDefaultError` | `Function`<br/>[See signature.](#signature-renderDefaultError) |          |         | Function which gets called with each error key (from the `errors` prop) for which `renderError` returned `null`.&#xA;It may render an error message or return `null` to hand the error handling off to `FieldError`s built-in error handling. |
+
+## Signatures
+
+### Signature `renderError`
+
+```ts
+(key: string, error?: boolean) => ReactNode;
+```
+
+### Signature `renderDefaultError`
+
+```ts
+(key: string, error?: boolean) => ReactNode;
+```
+
+## Static properties
+
+### `FieldErrors.errorTypes`
+
+An enum of known errors which `FieldErrors` can handle itself. You might want to use this while constructing the error object you're passing as the `errors` prop.

package/dist/commercetools-uikit-field-errors.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./declarations/src/index";
+export { default } from "./declarations/src/index";

package/dist/commercetools-uikit-field-errors.cjs.dev.js

@@ -0,0 +1,131 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _typeof = require('@babel/runtime-corejs3/helpers/typeof');
+var _pt = require('prop-types');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$entries = require('@babel/runtime-corejs3/core-js-stable/object/entries');
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+require('react');
+var reactIntl = require('react-intl');
+var messages$1 = require('@commercetools-uikit/messages');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _pt__default = /*#__PURE__*/_interopDefault(_pt);
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+
+var messages = reactIntl.defineMessages({
+  missingRequiredField: {
+    id: 'UIKit.FieldErrors.missingRequiredField',
+    description: 'Error message for missing required value',
+    defaultMessage: 'This field is required. Provide a value.'
+  },
+  invalidNegativeNumber: {
+    id: 'UIKit.FieldErrors.invalidNegativeNumber',
+    description: 'Error message when negative number is used',
+    defaultMessage: 'Negative number is not supported.'
+  },
+  invalidFractionalNumber: {
+    id: 'UIKit.FieldErrors.invalidFractionalNumber',
+    description: 'Error message when fractional number is used',
+    defaultMessage: 'A whole number is required.'
+  }
+});
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context4; _forEachInstanceProperty__default['default'](_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+
+var isObject = function isObject(obj) {
+  return _typeof(obj) === 'object';
+};
+
+var FieldErrors = function FieldErrors(props) {
+  var _context, _context2;
+
+  if (!props.isVisible) return null;
+  if (!props.errors || !isObject(props.errors)) return null;
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: _mapInstanceProperty__default['default'](_context = _filterInstanceProperty__default['default'](_context2 = _Object$entries__default['default'](props.errors) // Only render errors which have truthy values, to avoid
+    // rendering an error for, e.g. { missing: false }
+    ).call(_context2, function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+          error = _ref2[1];
+
+      return error;
+    })).call(_context, function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+          key = _ref4[0],
+          error = _ref4[1];
+
+      // We might not use a custom error renderer, so we fall back to null
+      // to enable the default errors to kick in
+      var errorElement = props.renderError ? props.renderError(key, error) : null; // Render a custom error if one was provided.
+      // Custom errors take precedence over the default errors
+
+      if (errorElement) return jsxRuntime.jsx(messages$1.ErrorMessage, {
+        children: errorElement
+      }, key);
+      var defaultErrorElement = props.renderDefaultError ? props.renderDefaultError(key, error) : null; // Render a default error if one was provided.
+      // Default errors take precedence over the known errors
+
+      if (defaultErrorElement) return jsxRuntime.jsx(messages$1.ErrorMessage, {
+        children: defaultErrorElement
+      }, key); // Try to see if we know this error and render that error instead then
+
+      if (key === FieldErrors.errorTypes.MISSING) return jsxRuntime.jsx(messages$1.ErrorMessage, {
+        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages.missingRequiredField))
+      }, key);
+      if (key === FieldErrors.errorTypes.NEGATIVE) return jsxRuntime.jsx(messages$1.ErrorMessage, {
+        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages.invalidNegativeNumber))
+      }, key);
+      if (key === FieldErrors.errorTypes.FRACTIONS) return jsxRuntime.jsx(messages$1.ErrorMessage, {
+        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages.invalidFractionalNumber))
+      }, key); // Render nothing in case the error is not known and no custom error
+      // was returned
+
+      return null;
+    })
+  });
+};
+
+FieldErrors.propTypes = process.env.NODE_ENV !== "production" ? {
+  errors: _pt__default['default'].objectOf(_pt__default['default'].bool),
+  isVisible: _pt__default['default'].bool,
+  renderError: _pt__default['default'].func,
+  renderDefaultError: _pt__default['default'].func
+} : {};
+FieldErrors.displayName = 'FieldErrors';
+FieldErrors.errorTypes = {
+  MISSING: 'missing',
+  NEGATIVE: 'negative',
+  FRACTIONS: 'fractions'
+};
+var FieldErrors$1 = FieldErrors;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+exports['default'] = FieldErrors$1;
+exports.version = version;

package/dist/commercetools-uikit-field-errors.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./commercetools-uikit-field-errors.cjs.prod.js");
+} else {
+  module.exports = require("./commercetools-uikit-field-errors.cjs.dev.js");
+}

package/dist/commercetools-uikit-field-errors.cjs.prod.js

@@ -0,0 +1,125 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _typeof = require('@babel/runtime-corejs3/helpers/typeof');
+require('prop-types');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$entries = require('@babel/runtime-corejs3/core-js-stable/object/entries');
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+require('react');
+var reactIntl = require('react-intl');
+var messages$1 = require('@commercetools-uikit/messages');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+
+var messages = reactIntl.defineMessages({
+  missingRequiredField: {
+    id: 'UIKit.FieldErrors.missingRequiredField',
+    description: 'Error message for missing required value',
+    defaultMessage: 'This field is required. Provide a value.'
+  },
+  invalidNegativeNumber: {
+    id: 'UIKit.FieldErrors.invalidNegativeNumber',
+    description: 'Error message when negative number is used',
+    defaultMessage: 'Negative number is not supported.'
+  },
+  invalidFractionalNumber: {
+    id: 'UIKit.FieldErrors.invalidFractionalNumber',
+    description: 'Error message when fractional number is used',
+    defaultMessage: 'A whole number is required.'
+  }
+});
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context4; _forEachInstanceProperty__default['default'](_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+
+var isObject = function isObject(obj) {
+  return _typeof(obj) === 'object';
+};
+
+var FieldErrors = function FieldErrors(props) {
+  var _context, _context2;
+
+  if (!props.isVisible) return null;
+  if (!props.errors || !isObject(props.errors)) return null;
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: _mapInstanceProperty__default['default'](_context = _filterInstanceProperty__default['default'](_context2 = _Object$entries__default['default'](props.errors) // Only render errors which have truthy values, to avoid
+    // rendering an error for, e.g. { missing: false }
+    ).call(_context2, function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+          error = _ref2[1];
+
+      return error;
+    })).call(_context, function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+          key = _ref4[0],
+          error = _ref4[1];
+
+      // We might not use a custom error renderer, so we fall back to null
+      // to enable the default errors to kick in
+      var errorElement = props.renderError ? props.renderError(key, error) : null; // Render a custom error if one was provided.
+      // Custom errors take precedence over the default errors
+
+      if (errorElement) return jsxRuntime.jsx(messages$1.ErrorMessage, {
+        children: errorElement
+      }, key);
+      var defaultErrorElement = props.renderDefaultError ? props.renderDefaultError(key, error) : null; // Render a default error if one was provided.
+      // Default errors take precedence over the known errors
+
+      if (defaultErrorElement) return jsxRuntime.jsx(messages$1.ErrorMessage, {
+        children: defaultErrorElement
+      }, key); // Try to see if we know this error and render that error instead then
+
+      if (key === FieldErrors.errorTypes.MISSING) return jsxRuntime.jsx(messages$1.ErrorMessage, {
+        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages.missingRequiredField))
+      }, key);
+      if (key === FieldErrors.errorTypes.NEGATIVE) return jsxRuntime.jsx(messages$1.ErrorMessage, {
+        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages.invalidNegativeNumber))
+      }, key);
+      if (key === FieldErrors.errorTypes.FRACTIONS) return jsxRuntime.jsx(messages$1.ErrorMessage, {
+        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages.invalidFractionalNumber))
+      }, key); // Render nothing in case the error is not known and no custom error
+      // was returned
+
+      return null;
+    })
+  });
+};
+
+FieldErrors.propTypes = {};
+FieldErrors.displayName = 'FieldErrors';
+FieldErrors.errorTypes = {
+  MISSING: 'missing',
+  NEGATIVE: 'negative',
+  FRACTIONS: 'fractions'
+};
+var FieldErrors$1 = FieldErrors;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+exports['default'] = FieldErrors$1;
+exports.version = version;

package/dist/commercetools-uikit-field-errors.esm.js

@@ -0,0 +1,112 @@
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
+import _typeof from '@babel/runtime-corejs3/helpers/esm/typeof';
+import _pt from 'prop-types';
+import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
+import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
+import _Object$entries from '@babel/runtime-corejs3/core-js-stable/object/entries';
+import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
+import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
+import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
+import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
+import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
+import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
+import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
+import 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import { ErrorMessage } from '@commercetools-uikit/messages';
+import { jsx, Fragment } from '@emotion/react/jsx-runtime';
+
+var messages = defineMessages({
+  missingRequiredField: {
+    id: 'UIKit.FieldErrors.missingRequiredField',
+    description: 'Error message for missing required value',
+    defaultMessage: 'This field is required. Provide a value.'
+  },
+  invalidNegativeNumber: {
+    id: 'UIKit.FieldErrors.invalidNegativeNumber',
+    description: 'Error message when negative number is used',
+    defaultMessage: 'Negative number is not supported.'
+  },
+  invalidFractionalNumber: {
+    id: 'UIKit.FieldErrors.invalidFractionalNumber',
+    description: 'Error message when fractional number is used',
+    defaultMessage: 'A whole number is required.'
+  }
+});
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty(_context3 = ownKeys(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context4; _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var isObject = function isObject(obj) {
+  return _typeof(obj) === 'object';
+};
+
+var FieldErrors = function FieldErrors(props) {
+  var _context, _context2;
+
+  if (!props.isVisible) return null;
+  if (!props.errors || !isObject(props.errors)) return null;
+  return jsx(Fragment, {
+    children: _mapInstanceProperty(_context = _filterInstanceProperty(_context2 = _Object$entries(props.errors) // Only render errors which have truthy values, to avoid
+    // rendering an error for, e.g. { missing: false }
+    ).call(_context2, function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+          error = _ref2[1];
+
+      return error;
+    })).call(_context, function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+          key = _ref4[0],
+          error = _ref4[1];
+
+      // We might not use a custom error renderer, so we fall back to null
+      // to enable the default errors to kick in
+      var errorElement = props.renderError ? props.renderError(key, error) : null; // Render a custom error if one was provided.
+      // Custom errors take precedence over the default errors
+
+      if (errorElement) return jsx(ErrorMessage, {
+        children: errorElement
+      }, key);
+      var defaultErrorElement = props.renderDefaultError ? props.renderDefaultError(key, error) : null; // Render a default error if one was provided.
+      // Default errors take precedence over the known errors
+
+      if (defaultErrorElement) return jsx(ErrorMessage, {
+        children: defaultErrorElement
+      }, key); // Try to see if we know this error and render that error instead then
+
+      if (key === FieldErrors.errorTypes.MISSING) return jsx(ErrorMessage, {
+        children: jsx(FormattedMessage, _objectSpread({}, messages.missingRequiredField))
+      }, key);
+      if (key === FieldErrors.errorTypes.NEGATIVE) return jsx(ErrorMessage, {
+        children: jsx(FormattedMessage, _objectSpread({}, messages.invalidNegativeNumber))
+      }, key);
+      if (key === FieldErrors.errorTypes.FRACTIONS) return jsx(ErrorMessage, {
+        children: jsx(FormattedMessage, _objectSpread({}, messages.invalidFractionalNumber))
+      }, key); // Render nothing in case the error is not known and no custom error
+      // was returned
+
+      return null;
+    })
+  });
+};
+
+FieldErrors.propTypes = process.env.NODE_ENV !== "production" ? {
+  errors: _pt.objectOf(_pt.bool),
+  isVisible: _pt.bool,
+  renderError: _pt.func,
+  renderDefaultError: _pt.func
+} : {};
+FieldErrors.displayName = 'FieldErrors';
+FieldErrors.errorTypes = {
+  MISSING: 'missing',
+  NEGATIVE: 'negative',
+  FRACTIONS: 'fractions'
+};
+var FieldErrors$1 = FieldErrors;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+export { FieldErrors$1 as default, version };

package/dist/declarations/src/export-types.d.ts

@@ -0,0 +1,3 @@
+import type { TFieldErrorsProps as FieldErrorsProps, TFieldErrors as FieldErrors } from './field-errors';
+export declare type TFieldErrorsProps = FieldErrorsProps;
+export declare type TFieldErrors = FieldErrors;

package/dist/declarations/src/field-errors.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+declare type TErrorRenderer = (key: string, error?: boolean) => ReactNode;
+export declare type TFieldErrors = Record<string, boolean>;
+export declare type TFieldErrorsProps = {
+    errors?: TFieldErrors;
+    isVisible?: boolean;
+    renderError?: TErrorRenderer;
+    renderDefaultError?: TErrorRenderer;
+};
+declare const FieldErrors: {
+    (props: TFieldErrorsProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+    errorTypes: {
+        MISSING: string;
+        NEGATIVE: string;
+        FRACTIONS: string;
+    };
+};
+export default FieldErrors;

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './field-errors';
+export { default as version } from './version';
+export * from './export-types';

package/dist/declarations/src/messages.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    missingRequiredField: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    invalidNegativeNumber: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    invalidFractionalNumber: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};
+export default _default;

package/dist/declarations/src/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "0.0.0-canary-2021830134526";
+export default _default;

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@commercetools-uikit/field-errors",
+  "description": "Renders errors based on configuration.",
+  "version": "0.0.0-canary-2021830134526",
+  "bugs": "https://github.com/commercetools/ui-kit/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/commercetools/ui-kit.git",
+    "directory": "packages/components/field-errors"
+  },
+  "homepage": "https://uikit.commercetools.com",
+  "keywords": [
+    "javascript",
+    "design system",
+    "react",
+    "uikit"
+  ],
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "main": "dist/commercetools-uikit-field-errors.cjs.js",
+  "module": "dist/commercetools-uikit-field-errors.esm.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepare": "../../../scripts/version.js replace"
+  },
+  "dependencies": {
+    "@babel/runtime": "7.14.8",
+    "@babel/runtime-corejs3": "7.14.9",
+    "@commercetools-uikit/messages": "0.0.0-canary-2021830134526",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
+    "prop-types": "15.7.2"
+  },
+  "devDependencies": {
+    "react": "17.0.2",
+    "react-intl": "5.20.7"
+  },
+  "peerDependencies": {
+    "react": "17.x",
+    "react-intl": "5.x"
+  }
+}