How to use the @commercetools-uikit/utils.createSequentialId function in @commercetools-uikit/utils

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) =>

import React from 'react';
import PropTypes from 'prop-types';
import requiredIf from 'react-required-if';
import {
  filterDataAttributes,
  createSequentialId,
  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 TimeInput from '@commercetools-uikit/time-input';
import FieldErrors from '@commercetools-uikit/field-errors';

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

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

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

  static propTypes = {
    // TimeField
    id: PropTypes.string,
    horizontalConstraint: PropTypes.oneOf(['s', '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 Constraints from '@commercetools-uikit/constraints';
import Stack from '@commercetools-uikit/spacings-stack';
import FieldLabel from '@commercetools-uikit/field-label';
import TextInput from '@commercetools-uikit/text-input';
import {
  filterDataAttributes,
  createSequentialId,
  getFieldId,
} from '@commercetools-uikit/utils';
import FieldErrors from '@commercetools-uikit/field-errors';

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

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

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

  static propTypes = {
    // TextField
    id: PropTypes.string,
    horizontalConstraint: PropTypes.oneOf(['s', '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 NumberInput from '@commercetools-uikit/number-input';

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

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

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

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

import {
  createSequentialId,
  filterDataAttributes,
  filterAriaAttributes,
  getFieldId,
} from '@commercetools-uikit/utils';
import Text from '@commercetools-uikit/text';
import {
  IndeterminateIcon,
  CheckedIcon,
  UncheckedIcon,
} from '../../internals/icons';
import { getCheckboxWrapperStyles } from './checkbox-input.styles';
import Checkbox from './checkbox';

const sequentialId = createSequentialId('checkbox-input-');

const hoverStyles = props => {
  if (!props.hasError && !props.disabled) {
    return css`
      &:hover svg [id$='borderAndContent'] > [id$='border'] {
        stroke: ${vars.borderColorForInputWhenFocused};
      }
    `;
  }
  return css``;
};

const Label = styled.label`
  display: flex;
  align-items: center;
  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};