@highlight-ui/utils-commons

Installation

yarn add @highlight-ui/utils-commons

Usage

import utils from '@highlight-ui/utils-commons';

Exported Types

| Name | Description | | ----------------- | ------------------------------------------------------------------------- | | FontFamily | Valid FontAwesome family variants | | Locale | Used for internationalization | | Size | Allowed size variants | | Direction | Used for positioning elements | | ComponentMetadata | Used for specifying required data-attributes for e2e tests | | ParsedMetadata | Same as ComponentMetadata but every attribute is prefixed with data-* | | PropsWithMetadata | Utility type for adding metadata to a component's props | | OutlineVariant | Allowed outlines on input elements | | ValidationStatus | Used for specifying validations status for a message or a file |

Exported Functions

parseMetadata()

Takes an object and converts all of its properties to valid HTML data attributes.

import utils from '@highlight-ui/utils-commons';

const metadata = {
  firstAttribute: '1',
  secondAttribute: '2',
};

const parsedMetadata = utils.parseMetadata(metadata);

console.log(parsedMetadata);
/*
  Output:
 {
  'data-first-attribute': '1',
  'data-second-attribute': '2',
  }
*/

forkHandlers()

Receives an array of callbacks and returns a function that accepts an event argument that will be passed to every callback in the array.

import utils from '@highlight-ui/utils-commons';

const MyComponent = () => {
  const handleClick = utils.forkHandlers([
    () => {
      console.log('first handler');
    },
    () => {
      console.log('second handler');
    },
    (event) => {
      event.preventDefault();
      console.log('third handler');
    },
  ]);

  return <div onClick={handleClick}>Click Me</div>;
};

withDeprecationWarning()

Higher order component that can be used to show a deprecation message as a warning in the console, with optional further information on how to use a replacement.

| Prop | Type | Required | Default | Description | | :------------------- | :--------------- | :------- | :------ | :----------------------------------------------------------------------- | | WrappedComponent | ReactComponent | Yes | | Component to display console warning about deprecation - when used | | migrationGuideLink | string | No | null | Valid link to a migration guide from deprecated component to alternative |

withDeprecationWarning(
  ADeprecatedComponent,
  'https://optional-link-to-a-migration-guide.com',
);

This will show as a warning on the console:

⚠️ Deprecation Warning: ADeprecatedComponent is now deprecated. See https://optional-link-to-a-migration-guide.com for migration guidance.