open-index/open-npm huggingface dataset:
npm package: @potch/layers
Description: use html canvas as if it's a layered image editor
Author: Potch
Latest version: 0.1.2

# Layers.js

Layers.js is a canvas library built around the idea of "layers" as used in image editors. Control the content of a canvas programmatcally using metaphors familiar to users of popular image editing tools:

```js
const canvas = render({
  width: 200,
  height: 200,
  layers: [
    {
      text: "Hello, World!",
      position: { y: "90%" },
      color: "white",
      stroke: "black",
    },
    {
      name: "image",
      image: {
        url: "site/cat.png",
        size: "cover",
      },
    },
  ],
});
```

Layers are drawn from the bottom up, over top of each other using effects like opacity, masks, and filters.

## Installation

`npm i @potch/layers`

## Usage

_work in progress!_

## Documentation

See [API Documentation](https://github.com/potch/layers.js/blob/main/API.md)
npm package: @potch/signals
Description: a small reactive signals library
Author: potch
Latest version: 2.0.0

# signals

A tiny standalone implementation of reactive signals.

## Installation

```
npm install @potch/signals
```

## Demo

[view the demo live on Glitch!](https://signals-demo.glitch.me/)

or to run it locally:

```
npm start
```

then visit `localhost:8080` in your browser.

## Usage

```js
// `node example.js`
import { signal, computed, effect, batch } from "@potch/signals";

// signals can be any value
const a = signal(2);
const b = signal(3);

// computed values are based on signals
const c = computed(() => Math.sqrt(a.value * a.value + b.value * b.value));

// computed values can also be based on a mix of signals and other computed values
const perimeter = computed(() => a.value + b.value + c.value);

// effects are for having other code react to changes in signals or computed values
effect(() =>
  console.log(`the perimeter of the triangle is ${perimeter.value}`)
);

// effects and computed values are recomputed whenever their dependencies change

// in this case the new perimeter will be logged twice
console.log("updating sides without `batch`");
a.value = 4;
b.value = 5;

// use `batch` to update multiple signals and prevent multiple effect updates
// this time the new perimeter will only be logged once, after the batch is complete
console.log("updating sides with `batch`");
batch(() => {
  a.value = 5;
  b.value = 7;
});
```

## How it Works

I built this library to understand how basic reactive "signals" work. It's useful for small projects but there are more comprehensive first-party signals implementations available for frameworks and better reactive programming tools out there in general.

When a computed value or an effect is created, we mark it as the current context. When the initial value of the context is computed (by running the supplied function), the library detects every access to a signal or computed values `.value` property (via their `get value()` getters) and records a dependency. When the `.value` of signals is set, their dependencies are looked up in a `Map` and the `.update()` method is called. In the case of a computed value, this will update the computed value and propagate updates to _its_ dependencies. In the case of an effect, the effect function is triggered.

This may not be how other signals implementations work! I wanted to build this without reading anyone else's source first.
npm package: @potchangelo/money-to-thai-word
Description: Convert money in currency Baht and Satang to Thai word (Thai or English locale).
Author: Potchara Puttawanchai
Latest version: 0.1.0-beta.2

# money-to-thai-word

Convert money, in currency Baht and Satang, to Thai word (Thai or English locale).


## Install

```
npm install @potchangelo/money-to-thai-word
```


## Usage

### CommonJS

```
const { moneyToThaiWord, moneyToThaiWordLocaleEN } = require('@potchangelo/money-to-thai-word');

moneyToThaiWord(6543);
// หกพันห้าร้อยสี่สิบสามบาทถ้วน

moneyToThaiWordLocaleEN(635.08);
// Six hundred thirty five baht eight satang
```

### ES Module

```
import { moneyToThaiWord, moneyToThaiWordLocaleEN } from '@potchangelo/money-to-thai-word';

moneyToThaiWord(5.25);
// ห้าบาทยี่สิบห้าสตางค์

moneyToThaiWordLocaleEN(80808);
// Eighty thousand eight hundred eight baht
```
npm package: @potentii/app-data
Description: A simple data persistence layer for applications
Author: Guilherme Reginaldo Ruella
Latest version: 1.0.1

# App-data

A simple data persistence layer for applications

<br>

## Basic usage

```javascript
const appdata = require('@potentii/app-data');


/* 
 * Setting the application name:
 *  This will be the directory name where 
 *  the data will be saved on.
 */
appdata.setAppName('My app');


/*
 * An example of data to be saved:
 */
const userPreferences = {
    mode: 'dark'
};


/*
 * Saving the data:
 *  You can use any file extension here as the key.
 *  The data can be an object or an array.
 */
appdata.save('preferences.json', userPreferences)
    .then(() => {
        console.log('User preferences successfully saved!');
    
        
        /*
         * Retrieving the data:
         *  The returned data will be converted to an object.
         *  For arrays, use the 'appdata.getArray' function instead.
         */
        appdata.get('preferences.json')
            .then(data => console.log('mode: ' + data.mode)); // mode: dark
    });
```

<br>

## Directories

The default persistence directory will vary depending on the OS:

- Windows: `C:\Users\<username>\AppData\Roaming\<appname>`

<br>

## License
[MIT](LICENSE)
npm package: @potentii/auto-rest
Description: Automatic REST endpoints
Author: Guilherme Reginaldo Ruella
Latest version: 1.0.3

# Auto REST

[![NPM Version][npm-image]][npm-url]

> Automatic REST endpoints

<br>

## Installing
```
$ npm install @potentii/auto-rest
```

---

## Usage

```javascript

```

---

## License

[MIT](LICENSE)


[npm-image]: https://img.shields.io/npm/v/@potentii/auto-rest.svg
[npm-url]: https://npmjs.org/package/@potentii/auto-rest
npm package: @potentii/browser-utils
Description: Browser utilities
Author: Guilherme Reginaldo Ruella
Latest version: 1.1.7

# Browser Utils

> Browser utilities

<br>

---

## Utilities

- [DomUtils](#domutils)
- [FileUtils](#fileutils)
- [MediaQueryUtils](#mediaqueryutils)
- [VueUtils](#vueutils)
- [Base64Utils](#base64utils)
- [StorageUtils](#storageutils)

<br>

### DomUtils

> TODO

<br>

### FileUtils

> TODO

<br>

### MediaQueryUtils

> TODO

<br>

### VueUtils

> TODO

<br>

### Base64Utils

> TODO

<br>

### StorageUtils

> TODO

<br>

---

## License
[MIT](LICENSE)
npm package: @potentii/electron-ipc-api
Description: Create and consume electron IPC APIs
Author: Guilherme Reginaldo Ruella
Latest version: 1.0.4

# Electron IPC API

[![NPM Version][npm-image]][npm-url]

> Create and consume electron IPC APIs


## Index
- [Installing](#installing)
- [Examples](#examples)
- [Renderer process](#renderer-process)
- [License](#license)


---


## Installing
```
$ npm install @potentii/electron-ipc-api
```


---


## Examples

### Main process

```javascript
import { IpcApiMain } from '@potentii/electron-ipc-api';

const myUsersDatabase = //...

IpcApiMain.process('user-by-id', async data => {    
    const userFound = await myUsersDatabase.find({ id: data.id });
    return userFound;    
});
```

### Renderer process

```javascript
import { IpcApiRenderer } from '@potentii/electron-ipc-api';

const userFound = await IpcApiRenderer.send('user-by-id', { id: '1234' });
```

---

## License

[MIT](LICENSE)


[npm-image]: https://img.shields.io/npm/v/@potentii/electron-ipc-api.svg
[npm-url]: https://npmjs.org/package/@potentii/electron-ipc-api
npm package: @potentii/logger-js
Description: Logger for JS
Author: Guilherme Reginaldo Ruella
Latest version: 1.2.1

# LoggerJS

[![NPM Version][npm-image]][npm-url]


A logger wrapper around winston.

<br>

---

## Usage


Basic usage out of the box:

```javascript
import Logger from '@potentii/logger-js';

//...

Logger.global.reset();
Logger.global
    .withLevel('info') // Possible levels: debug, verbose, info, warn, error
    .withService('my-app')
    .addTransport(new Logger.WINSTON.transports.Console({ format: Logger.FORMAT_TEMPLATES.human })); // Possible formats: Logger.FORMAT_TEMPLATES.human, Logger.FORMAT_TEMPLATES.json

//...

Logger.info('USER_FETCH_SUCCESS', 'User fetch successfully', { userId: '1234' });

// ...

try{
    // ...
} catch (err){
    Logger.error('PROCESS_FAILED', 'Processing has failed', err, { userId: '1234', processType: '...' });
}


```

<br>

Using **Dynamic Logging** within an `express` request:

```javascript
// Define a handler to inject the dynamic logger (before the actual handlers):
app.use((req, res, next) => {
    res.locals.logger = Logger.dynamic({ /* opitional context data associated with this request (like correlationIds, or tracking info) */ });
});

// An example of using the dynamic logging to inject more data into the log:
app.get('/users/:userId', (req, res, next) => {
    res.locals.logger.set({ userId: req.params.userId }); // Setting the userId on the request context (this will be logged on every log of this request)
    res.locals.logger.info('FETCH_USER_STARTED', 'Fetching user...'); // This log will have userId on its payload (you also could pass in more data in the third argument)
    // ...
});
```

<br>

---

<br>

## License
[MIT](LICENSE)

[npm-image]: https://img.shields.io/npm/v/@potentii/logger-js.svg
[npm-url]: https://npmjs.org/package/@potentii/logger-js
npm package: @potentii/logger-js-pino
Description: Logger for JS using pino
Author: Guilherme Reginaldo Ruella
Latest version: 1.1.2

# LoggerJS [pino]

[![NPM Version][npm-image]][npm-url]


A logger wrapper around pino.

<br>

---

## Usage


Basic usage out of the box:

```javascript
import Logger from '@potentii/logger-js-pino';

//...

Logger
    .withLevel('info') // Possible levels: debug, trace, info, warn, error, fatal
    .customField({ service: 'my-app' }) // Optional fields to compose your logs (at top level)
    .set({ correlationId: '8888' }); // Optional data to compose your logs (inside 'data' special field)

//...

Logger.info('USER_FETCH_SUCCESS', 'User fetch successfully', { userId: '1234' });

// ...

try{
    // ...
} catch (err){
    Logger.error('PROCESS_FAILED', 'Processing has failed', err, { userId: '1234', processType: '...' });
}


```


<br>

---

<br>

## License
[MIT](LICENSE)

[npm-image]: https://img.shields.io/npm/v/@potentii/logger-js-pino.svg
[npm-url]: https://npmjs.org/package/@potentii/logger-js-pino
npm package: @potentii/micro-db
Description: A micro database
Author: Guilherme Reginaldo Ruella
Latest version: 1.1.1

# Micro DB

[![NPM Version][npm-image]][npm-url]

> A micro (self-contained) database

<br>

## Installing
```
$ npm install @potentii/micro-db
```

---

## Usage

```javascript

```

---

## License

[MIT](LICENSE)


[npm-image]: https://img.shields.io/npm/v/@potentii/micro-db.svg
[npm-url]: https://npmjs.org/package/@potentii/micro-db
npm package: @potentii/rest-envelopes
Description: Enveloping of REST messages
Author: Guilherme Reginaldo Ruella
Latest version: 1.4.0

# REST Envelopes

[![NPM Version][npm-image]][npm-url]

> Enveloping of REST messages

---

## Installing
with `npm`:
```shell
npm install @potentii/rest-envelopes
```
with `yarn`:
```shell
yarn add @potentii/rest-envelopes
```

---

## What it is

It just helps to enforce a standard for API payloads _(both requests and responses)_.

### Requests

```json
{
    "data": {} 
}
```

The content goes into the `data` property, and it can be an object or array.

### Responses

```json
{
  "data": {},
  "error": {
    "status": 999,
    "code": "",
    "message": "",
    "track": "4769ea6c-c745-485c-8e1e-3ec762e902c8",
    "errors": [
      {
        "code": "",
        "message": "",
        "field": "",
        "value": ""
      }
    ]
  },
  "pagination": {
    "page": 0,
    "pageSize": 0,
    "actualPageSize": 0,
    "pages": 0,
    "totalSize": 0,
    "next": 0,
    "prev": 0
  },
  "links": [
    {
      "type": "",
      "href": "",
      "rel": ""
    }
  ]
}
```

At the first level of the response, either `data` or `error` should be populated.

`pagination` and `links` are optional.

---

## Usage

Example in an [expressjs](https://www.npmjs.com/package/express) application:

```javascript
import { RequestEnvelope, ResponseEnvelope, ApiError, ApiErrorDetail } from '@potentii/rest-envelopes';

app.post('/api/users', (req, res, next) => {
   const body = RequestEnvelope.from(req.body);
	
   // Example of some validation error:
   if(!body?.data?.fullname?.trim().length) 
      return res
         .status(400)
         .json(ResponseEnvelope.withError(
            ApiError.create('VALIDATION_ERR', 'Registration have failed', ApiErrorDetail.create('USER_NAME_INVALID', 'The full name of the user must be set', 'fullname', body?.data?.fullname))
         ))
         .end();
   
   let createdUser = {
      user_id: 1,
      fullname: 'John Doe'
   };
   
   // Example with a success return:
   res
      .status(200)
      .json(ResponseEnvelope.withData(createdUser)) // data can be an object or a list
      .end();	
});

```

### Other Examples:

#### Parsing the request body:

```javascript
import { RequestEnvelope } from '@potentii/rest-envelopes';

// ...

const body = RequestEnvelope.from(req.body);

console.log(body?.data);
    
// ...
```

#### Using builders to create a response object:

```javascript
import { ResponseEnvelopeBuilder, ResponseLinkBuilder } from '@potentii/rest-envelopes';

// ...

const createdPayment = {
    // ...
};

const responseBody = ResponseEnvelopeBuilder.create()
    .withData(createdPayment)
    .withLink(ResponseLinkBuilder.create().withHref('/payments/123456').withRel('cancel-payment').withType('DELETE').build())
    .withLink(ResponseLinkBuilder.create().withHref('/payments/123456/history').withRel('payment-history').withType('GET').build())
    .build();

res.status(201).json(responseBody).end();

// ...
```

---

## License
[MIT](LICENSE)

[npm-image]: https://img.shields.io/npm/v/@potentii/rest-envelopes.svg
[npm-url]: https://npmjs.org/package/@potentii/rest-envelopes
npm package: @potentii/type-utils
Description: Type utilities
Author: Guilherme Reginaldo Ruella
Latest version: 1.0.1

# Type Utils

[![NPM Version][npm-image]][npm-url]

> Type utilities

<br>

## Installing
```
$ npm install @potentii/type-utils
```

---

## Usage

```javascript
import { TypeOf } from '@potentii/type-utils';

TypeOf.checkValue('my-value', 45, 'number', true);
```

---

## License

[MIT](LICENSE)


[npm-image]: https://img.shields.io/npm/v/@potentii/type-utils.svg
[npm-url]: https://npmjs.org/package/@potentii/type-utils
npm package: @potentii/unique-utils
Description: Uniqueness utilities
Author: Guilherme Reginaldo Ruella
Latest version: 1.0.2

# Unique Utils

[![NPM Version][npm-image]][npm-url]

> Uniqueness utilities

<br>

## Installing
```
$ npm install @potentii/unique-utils
```

---

## Usage

```javascript

```

---

## License

[MIT](LICENSE)


[npm-image]: https://img.shields.io/npm/v/@potentii/unique-utils.svg
[npm-url]: https://npmjs.org/package/@potentii/unique-utils
npm package: @potentii/use-debounce-resolve
Description: Debounce resolve for Vue
Author: Guilherme Reginaldo Ruella
Latest version: 1.0.2

# useDebounceResolve

[![NPM Version][npm-image]][npm-url]


Debounce resolve for Vue.

<br>

---

<br>

## License
[MIT](LICENSE)

[npm-image]: https://img.shields.io/npm/v/@potentii/use-debounce-resolve.svg
[npm-url]: https://npmjs.org/package/@potentii/use-debounce-resolve
npm package: @potentii/use-deferred-fetch
Description: Deferred fetch for Vue
Author: Guilherme Reginaldo Ruella
Latest version: 1.2.2

# useDeferredFetch

[![NPM Version][npm-image]][npm-url]


Deferred fetch for Vue.

<br>

---

<br>

## License
[MIT](LICENSE)

[npm-image]: https://img.shields.io/npm/v/@potentii/use-deferred-fetch.svg
[npm-url]: https://npmjs.org/package/@potentii/use-deferred-fetch