0.0.5 • Published 3 years ago
@personio/utils-commons v0.0.5
@personio/utils-commons
Installation
yarn add @personio/utils-commonsUsage
import utils from '@personio/utils-commons';Exported Objects
| Name | Description |
|---|---|
| ICON_MAP | A map for associating validation states with icons |
| THEME_COLOR_TOKEN_MAP | A map for associating themes with color tokens |
Exported Types
| Name | Description |
|---|---|
| FontFamily | Valid FontAwesome family variants |
| Locale | Used for internationalization |
| Size | Allowed size variants |
| Theme | Allowed themes |
| ColorToken | Allowed color tokens |
| 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 |
Exported Functions
parseMetadata()
Takes an object and converts all of its properties to valid HTML data attributes.
import utils from '@personio/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 '@personio/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>;
};