npm package: @obigtech/ui-utils
Description: UI utilities for Obigtech UI based projects.
Author: Obigtech
Latest version: 2.1.0

# Obig UI utilities

## Table of contents

- [Colors](#colors)
- [Errors](#errors)
- [Numbers](#numbers)
- [Strings](#strings)
- [Units](#units)
- [Validation](#validation)


## Colors

### generateHash

This takes a string and generates a number has to use with `%`.

```ts
const hash = generateHash('some string');
// get a number between 0-360
const hue = hash % 360;
```

### hashValue

This function generates a hash from a string, and then gets a value from an array. An example usage would be to have an array of colors you'd like to pick from.

```ts
const colors = ['red', 'blue', 'green'];
const string = 'Hiro Protaganist';
const colorFromString = hashValue<('red' | 'blue' | 'green')[]>(string, colors);
// will be one of the colors
```

### stringToHslColor

This takes a string, saturation value, and lightness value to output a color in HSL.

```ts
const string = 'Hiro Protaganist';
const color = stringToHslColor(string, 60, 55);
// an hsl color
```

### moduloRange

This is a helper function to select a number from a range.

```ts
const restrictedHue = moduloRange(hash, [40, 60], true);
// will return a number between 40 and 60, including 60 as an option
```

## Errors

### getTxErrorMessage

Will return a human readable error message for the status of a transaction.

```ts
// tx.tx_status === "abort_by_post_condition"
const error = getTxErrorMessage(tx);
// This transaction would have succeeded, but was rolled back by a supplied post-condition.

// tx.tx_status === "abort_by_response"
const error = getTxErrorMessage(tx);
// This transaction did not succeed because the transaction was aborted during its execution.
```

## Strings

### capitalize

This will convert the first letter of a string to upper case.

```ts
const string = 'hello obg';

console.log(capitalize(string));
// -> Hello obg
```

### with0x

This will prefix a string with `0x`, unless it contains a `.`.

```ts
const hex = `33cc9a437e704e790958f7bb66492f5ad3a863ab3bcbef47138069725549a353`;
const contract = 'ST12EY99GS4YKP0CP2CFW6SEPWQ2CGVRWK5GHKDRV.market';
const id = 'muneeb.id';

const query = with0x(contract);
// ST12EY99GS4YKP0CP2CFW6SEPWQ2CGVRWK5GHKDRV.market

const query = with0x(id);
// muneeb.id

const query = with0x(hex);
// 0x33cc9a437e704e790958f7bb66492f5ad3a863ab3bcbef47138069725549a353
```

### truncateHex

This will truncate a hex, keeping the 0x out of the offset amount.

```ts
const hex = `0x33cc9a437e704e790958f7bb66492f5ad3a863ab3bcbef47138069725549a353`;

const shortened = truncateHex(hex, 4);
// 0x33cc...a353
```

### truncateMiddle

This will truncate any string in the middle, given an offset amount.

```ts
const hex = `0x33cc9a437e704e790958f7bb66492f5ad3a863ab3bcbef47138069725549a353`;

const shortened = truncateHex(hex, 4);
// 0x33cc...a353

const contract = 'ST12EY99GS4YKP0CP2CFW6SEPWQ2CGVRWK5GHKDRV.market';

const shortenedContract = truncateHex(contract, 4);
// ST12...KDRV.market
```

### withSTX

This will wrap any value with a suffix ` STX`.

```ts
const value = '1,000.00';

console.log(withSTX(value));
// 1,000.00 STX
```

### addSepBetweenStrings

This will combine an array of strings with a divider character.

```ts
const string = addSepBetweenStrings(['Pending', 'Contract deploy', '5 min ago'], '|');

// Pending | Contract deploy | 5 min ago
```