npm package: @highlight-ui/utils-commons
Description: A collection of helpers, global constants, shared types used by UI-components in Personio
Author: Personio GmbH & Co. KG
Latest version: 2.7.1

# `@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.

```typescript
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.

```jsx
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 |

```jsx
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.