How to use @commercetools-uikit/utils - 10 common examples

const PrimaryButton = props => {
  const dataProps = {
    'data-track-component': 'PrimaryButton',
    ...filterInvalidAttributes(omit(props, propsToOmit)),
    // if there is a divergence between `isDisabled` and `disabled`,
    // we fall back to `isDisabled`
    disabled: props.isDisabled,
  };

  const isActive = props.isToggleButton && props.isToggled;
  return (

export const FlatButton = props => {
  const dataProps = {
    'data-track-component': 'FlatButton',
    ...filterInvalidAttributes(omit(props, propsToOmit)),
    // if there is a divergence between `isDisabled` and `disabled`,
    // we fall back to `isDisabled`
    disabled: props.isDisabled,
  };

  return (
     {
        const overwrittenVars = {
          ...vars,
          ...theme,

export const SecondaryIconButton = props => {
  const buttonAttributes = {
    ...filterInvalidAttributes(omit(props, propsToOmit)),
    'data-track-component': 'SecondaryIconButton',
    // if there is a divergence between `isDisabled` and `disabled`,
    // we fall back to `isDisabled`
    disabled: props.isDisabled,
  };
  return (
     getBaseStyles(theme, props)}
    >
      {props.icon}

: intl.formatMessage(messages.placeholder),
                  onMouseEnter: () => {
                    // we remove the highlight so that the user can use the
                    // arrow keys to move the cursor when hovering
                    if (isOpen) setDownshiftHighlightedIndex(null);
                  },
                  onKeyDown: event => {
                    if (event.key === 'Enter' && inputValue.trim() === '') {
                      clearSelection();
                    }
                  },
                  // we only do this for readOnly because the input
                  // doesn't ignore these events, unlike when its disabled
                  onFocus: props.isReadOnly ? undefined : openMenu,
                  onClick: props.isReadOnly ? undefined : openMenu,
                  ...filterDataAttributes(props),
                })}
                hasSelection={Boolean(selectedItem)}
                onClear={clearSelection}
                isOpen={isOpen}
                isDisabled={props.isDisabled}
                isReadOnly={props.isReadOnly}
                toggleButtonProps={getToggleButtonProps()}
                hasError={props.hasError}
                hasWarning={props.hasWarning}
              />
              {isOpen && !props.isDisabled && !props.isReadOnly && (

omitEmptyTranslations,
  isEmpty,
  createLocalizedString,
  getId,
  getName,
} from '@commercetools-uikit/localized-utils';
import { createSequentialId } from '@commercetools-uikit/utils';
import TextInput from '@commercetools-uikit/text-input';
import LanguagesButton from './languages-button';
import messages from '../../internals/messages/localized-input';
import {
  getLocalizedInputStyles,
  getLanguageLabelStyles,
} from './localized-text-input.styles';

const sequentialId = createSequentialId('localized-text-input-');

const LocalizedInput = props => {
  const { onChange } = props;
  const handleChange = React.useCallback(
    event => {
      // We manipulate the event to add the language to the target.
      // That way the users of LocalizedTextInput's onChange can read
      // event.target.language and event.target.value to determine the next value.
      //
      // We only need this information for the story, the MC application code will
      // never need to access the information in such an inconvenient way, as
      // Formik can deal with a name like "foo.en" and sets the value correctly.
      // We can't use this as we aren't guaranteed a name in the story as the user
      // might clear it using the knob, and then we can't parse the language from
      // the input name anymore.
      //

import Stack from '@commercetools-uikit/spacings-stack';
import Constraints from '@commercetools-uikit/constraints';
import {
  createLocalizedDataAttributes,
  getHasErrorOnRemainingLanguages,
  getHasWarningOnRemainingLanguages,
  getId,
  getName,
} from '@commercetools-uikit/localized-utils';
import {
  createSequentialId,
  filterDataAttributes,
} from '@commercetools-uikit/utils';
import CurrencyControl from './currency-control';

const sequentialId = createSequentialId('localized-money-input-');

// sorts the currencies with the following priority:
// - The selected currency is placed first (e.g EUR)
// - All other currencies follow, sorted alphabetically as well
export const sortCurrencies = (selectedCurrency, allCurrencies) => {
  const remainingCurrencies = allCurrencies.filter(
    currency => currency !== selectedCurrency
  );
  return [selectedCurrency, ...remainingCurrencies.sort()];
};

const LocalizedInput = props => {
  const { onChange } = props;
  const handleChange = React.useCallback(
    event => {
      // We manipulate the event to add the currency to the target.

import React from 'react';
import PropTypes from 'prop-types';
import requiredIf from 'react-required-if';
import {
  createSequentialId,
  filterDataAttributes,
  getFieldId,
} from '@commercetools-uikit/utils';
import Constraints from '@commercetools-uikit/constraints';
import Spacings from '@commercetools-uikit/spacings';
import FieldLabel from '@commercetools-uikit/field-label';
import SelectInput from '@commercetools-uikit/select-input';
import FieldErrors from '@commercetools-uikit/field-errors';
import SafeHTMLElement from '../../../utils/helpers/safeHTMLElement';

const sequentialId = createSequentialId('select-field-');

const hasErrors = errors => errors && Object.values(errors).some(Boolean);

export default class SelectField extends React.Component {
  static displayName = 'SelectField';

  static propTypes = {
    // SelectField
    id: PropTypes.string,
    horizontalConstraint: PropTypes.oneOf(['s', 'm', 'l', 'xl', 'scale']),
    errors: PropTypes.shape({
      missing: PropTypes.bool,
    }),
    renderError: PropTypes.func,
    isRequired: PropTypes.bool,
    touched: (props, ...rest) =>

import React from 'react';
import PropTypes from 'prop-types';
import requiredIf from 'react-required-if';
import {
  createSequentialId,
  filterDataAttributes,
  getFieldId,
} from '@commercetools-uikit/utils';
import Constraints from '@commercetools-uikit/constraints';
import Spacings from '@commercetools-uikit/spacings';
import FieldLabel from '@commercetools-uikit/field-label';
import MultilineTextInput from '@commercetools-uikit/multiline-text-input';
import FieldErrors from '@commercetools-uikit/field-errors';

const sequentialId = createSequentialId('multiline-text-field-');

const hasErrors = errors => errors && Object.values(errors).some(Boolean);

class MultilineTextField extends React.Component {
  static displayName = 'MultilineTextField';

  static propTypes = {
    // MultilineTextField
    id: PropTypes.string,
    horizontalConstraint: PropTypes.oneOf(['m', 'l', 'xl', 'scale']),
    errors: PropTypes.shape({
      missing: PropTypes.bool,
    }),
    renderError: PropTypes.func,
    isRequired: PropTypes.bool,
    touched: PropTypes.bool,

import React from 'react';
import PropTypes from 'prop-types';
import requiredIf from 'react-required-if';
import {
  createSequentialId,
  filterDataAttributes,
  getFieldId,
} from '@commercetools-uikit/utils';
import Constraints from '@commercetools-uikit/constraints';
import Stack from '@commercetools-uikit/spacings-stack';
import FieldLabel from '@commercetools-uikit/field-label';
import FieldErrors from '@commercetools-uikit/field-errors';
import RadioInput from '@commercetools-uikit/radio-input';

const sequentialId = createSequentialId('radio-field-');

const hasErrors = errors => errors && Object.values(errors).some(Boolean);

class RadioField extends React.Component {
  static displayName = 'RadioField';

  static propTypes = {
    // RadioField
    id: PropTypes.string,
    horizontalConstraint: PropTypes.oneOf(['m', 'l', 'xl', 'scale']),
    errors: PropTypes.shape({
      missing: PropTypes.bool,
    }),
    renderError: PropTypes.func,
    isRequired: PropTypes.bool,
    touched: PropTypes.bool,

import React from 'react';
import PropTypes from 'prop-types';
import requiredIf from 'react-required-if';
import {
  filterDataAttributes,
  getFieldId,
  createSequentialId,
} from '@commercetools-uikit/utils';
import Constraints from '@commercetools-uikit/constraints';
import Spacings from '@commercetools-uikit/spacings';
import FieldLabel from '@commercetools-uikit/field-label';
import AsyncCreatableSelectInput from '@commercetools-uikit/async-creatable-select-input';
import FieldErrors from '@commercetools-uikit/field-errors';
import SafeHTMLElement from '../../../utils/helpers/safeHTMLElement';

const sequentialId = createSequentialId('async-creatable-select-field-');

const hasErrors = errors => errors && Object.values(errors).some(Boolean);

export default class SelectField extends React.Component {
  static displayName = 'SelectField';

  static propTypes = {
    // SelectField
    id: PropTypes.string,
    horizontalConstraint: PropTypes.oneOf(['s', 'm', 'l', 'xl', 'scale']),
    errors: PropTypes.shape({
      missing: PropTypes.bool,
    }),
    renderError: PropTypes.func,
    isRequired: PropTypes.bool,
    touched: (props, ...rest) =>