open-index/open-npm huggingface dataset:
npm package: @revofusion/vuemoji-picker
Description: Vue 2 and 3 lightweight emoji picker.
Latest version: 0.3.2

# vuemoji-picker

A simple Vue 2 and 3 wrapper component for [emoji-picker-element](https://github.com/nolanlawson/emoji-picker-element).

[Live Demo](https://vuemoji-picker.vercel.app/)

![Demo of vuemoji-picker](https://i.imgur.com/6CcJxLW.gif)

## Install

```bash
npm install vuemoji-picker
```

## Usage

```html
<script setup lang="ts">
import { VuemojiPicker, EmojiClickEventDetail } from 'vuemoji-picker'

const handleEmojiClick = (detail: EmojiClickEventDetail) => {}
</script>

<template>
    <VuemojiPicker @emojiClick="handleEmojiClick" />
</template>
```

## Props

Name | Type | Default | Description |
------ | ------ | ------ | ------ |
`isDark` | `Boolean` | system | Set picker theme  |
`customCategorySorting` | `Function` | - | Function to sort custom category strings (sorted alphabetically by default)  |
`customEmoji` | `CustomEmoji[]` | - | Array of custom emoji |
`dataSource` | `String` | "https://cdn.jsdelivr.net/npm/emoji-picker-element-data@^1/en/emojibase/data.json" | URL to fetch the emoji data from |
`i18n` | `I18n` | - | i18n object ([see details](https://github.com/nolanlawson/emoji-picker-element#i18n-structure)) |
`locale` | `String` | "en" | Locale string |
`skinToneEmoji` | `String` | "🖐️" | The emoji to use for the skin tone picker |
`pickerStyle` | `VuemojiPickerStyle` | - | [style object](https://github.com/nolanlawson/emoji-picker-element#styling) ([see available options](https://github.com/wobsoriano/vuemoji-picker/blob/master/packages/lib/src/index.ts#L4)) |

## Events

Name | Type | Default | Description |
------ | ------ | ------ | ------ |
`emojiClick` | `Function` | - | Fired when an emoji is selected  |
`skinToneChange` | `Function` | - | Fired when a new skin tone is selected  |

## Composables

Set of composables that wraps [Database API](https://github.com/nolanlawson/emoji-picker-element#database) methods.

```vue
<script setup>
import { ref } from 'vue'
import {
  useEmojiByGroup,
  useEmojiBySearchQuery,
  useEmojiByShortcode,
  useEmojiByUnicodeOrName
} from 'vuemoji-picker'

const query = ref('elephant')
const { result, loading } = useEmojiBySearchQuery(query)
</script>
```

For more information about available styling and offline config, please read [emoji-picker-element's docs](https://github.com/nolanlawson/emoji-picker-element).

## License
MIT - Copyright (c) 2021 [Robert Soriano](https://github.com/wobsoriano)
npm package: @revoke.cash/chains
Description: Helper module for getting EVM chains info.
Author: Revoke.cash
Latest version: 75.1.0

[![Publish](https://github.com/RevokeCash/chains/actions/workflows/publish-release.yml/badge.svg)](https://github.com/RevokeCash/chains/actions/workflows/publish-release.yml) [![npm](https://img.shields.io/npm/v/@revoke.cash/chains?logoColor=blue)](https://www.npmjs.com/package/@revoke.cash/chains)

# Eth Chains

Helper module for getting EVM chain info from [chainid.network](https://chainid.network/).

Note: This package was initially created by @taylorjdawson. We forked the repository so we can control the release process with an automated script and make additional changes. The original package can be found [here](https://github.com/taylorjdawson/eth-chains).

## Installation

```
yarn add @revoke.cash/chains
```

### Note on versioning

`@revoke.cash/chains` uses a weekly automated release script that updates its chain data. This release script takes breaking changes into account, so breaking changes (e.g. renamed chains) are released as a new major version, while non-breaking changes (e.g. new chains) are released as a new minor version.

## Usage

Import `chains` methods and enums:

```ts
import allChains, { ChainId, ChainName } from '@revoke.cash/chains'
```

### Chain names and ids via Enums:

```ts
console.log(ChainId.EthereumMainnet) // 1
console.log(ChainId.BinanceSmartChainMainnet) // 56
console.log(ChainName.EthereumMainnet) // "Ethereum Mainnet"
console.log(ChainName.Rinkeby) // "Rinkeby"
```

### Chain by ID:

```ts
getChainById(ChainId.EthereumMainnet) // { name: "Ethereum Mainnet", ..., "infoURL": "https://ethereum.org" }
// Equivalent
getChainById(1)
```

### Chain by Name:

```ts
getChainByName(ChainName.EthereumMainnet) // { name: "Ethereum Mainnet", ..., "infoURL": "https://ethereum.org" }
// Equivalent
getChainByName('Ethereum Mainnet')
```

### Get all Chains:

```ts
const chains = allChains()
// { 1: { name: "Ethereum Mainnet", ..., "infoURL": "https://ethereum.org" }, 2: {...}}
```

### Typescript Types:

```ts
import { Chain, NativeCurrency, Explorer } from '@revoke.cash/chains'
const ethereum: Chain = getChainById(ChainId.EthereumMainnet)
ethereum.chain // 'ETH'
```
npm package: @revolist/revogrid-column-date
Description: Date format for RevoGrid system based on duetds-date-picker
Author: revolist
Latest version: 2.0.25

### 🚨 Repository Notice 🚨

This repo is read-only and will be **deprecated** in v5+ in favor of monorepos. Post issues [here](https://github.com/revolist/revogrid). Happy coding! 🖥️💻

---

# `revogrid-column-date`
Custom column type for [RevoGrid](https://github.com/revolist/revogrid) component based on [duetds-date-picker](https://github.com/duetds/date-picker) library.


## Installation
`npm i @revolist/revogrid-column-date`

## How to use

- Import Select Column type;
- Specify table data;
- Per column specify column type;
- Register your column type;
```js

// do import
import Plugin from "@revolist/revogrid-column-date";

const columns = [{ prop: 'name', columnType: 'date' }];
const rows = [{ name: '2020-08-24' }, { name: '2022-08-24' }];

// register column type
const columnTypes = { 'date': new Plugin() };

// apply data to grid per your framework approach
<revo-grid source={rows} columns={columns} columnTypes={columnTypes}/>
```
npm package: @revolist/revogrid-column-numeral
Description: Number column type for RevoGrid system based on numeraljs
Author: revolist
Latest version: 2.0.11

### 🚨 Repository Notice 🚨

This repo is read-only and will be **deprecated** in v5+ in favor of monorepos. Post issues [here](https://github.com/revolist/revogrid). Happy coding! 🖥️💻

---

# Number Column Type
Number column type for RevoGrid system based on [numeraljs](http://numeraljs.com) library.

Use any format you love to assign number format for your grid.

## Installation

```
npm i @revolist/revogrid-column-numeral
```

## Output

### Number

|Number|Format|String|
|--- |--- |--- |
|10000|'0,0.0000'|10,000.0000|
|10000.23|'0,0'|10,000|
|10000.23|'+0,0'|+10,000|
|-10000|'0,0.0'|-10,000.0|
|10000.1234|'0.000'|10000.123|
|100.1234|'00000'|00100|
|1000.1234|'000000,0'|001,000|
|10|'000.00'|010.00|
|10000.1234|'0[.]00000'|10000.12340|
|-10000|'(0,0.0000)'|(10,000.0000)|
|-0.23|'.00'|-.23|
|-0.23|'(.00)'|(.23)|
|0.23|'0.00000'|0.23000|
|0.23|'0.0[0000]'|0.23|
|1230974|'0.0a'|1.2m|
|1460|'0 a'|1 k|
|-104000|'0a'|-104k|
|1|'0o'|1st|
|100|'0o'|100th|

### Currency

|Number|Format|String|
|--- |--- |--- |
|1000.234|'$0,0.00'|$1,000.23|
|1000.2|'0,0[.]00 $'|1,000.20 $|
|1001|'$ 0,0[.]00'|$ 1,001|
|-1000.234|'($0,0)'|($1,000)|
|-1000.234|'$0.00'|-$1000.23|
|1230974|'($ 0.00 a)'|$ 1.23 m|



## Usage in revo-grid:

```js
import NumberColumnType from '@revolist/revogrid-column-numeral';
const columnTypes = {
    'numeric': new NumberColumnType('0,0')
};
const columns = [
    {
        prop: 'Num',
        name: 'My number',
        columnType: 'numeric'
    },
    {
        prop: 'Num2',
        name: 'My number2',
        columnType: 'numeric'
    }
];
const rows = [{
    'Num': 1000,
    'Num2': 1000
}];

const grid = document.querySelector('revo-grid');
grid.columnTypes = columnTypes;
grid.source = rows;
grid.columns = columns;


// '1,000'
```



## Advanced

If you need to get numeric library instance you can do this as simple as:

```js
import NumberColumnType from '@revolist/revogrid-column-numeral';
const numeral = NumberColumnType.getNumeralInstance;

numeral.register('format', 'percentage', {});
```

Also plugin provides access to beforeValueFormatted instance:
emiter?: (event: string, instance: Numeral)

```js
import NumberColumnType from '@revolist/revogrid-column-numeral';
const columnTypes = {
    'numeric': new NumberColumnType('0,0', (eventName, numeralInstance) => {
        // numeralInstance operations
    }),
};
```
npm package: @revolist/revogrid-column-select
Description: Select column type for RevoGrid system based on revo-dropdown
Author: revolist
Latest version: 3.1.10

### 🚨 Repository Notice 🚨

This repo is read-only and will be **deprecated** in v5+ in favor of monorepos. Post issues [here](https://github.com/revolist/revogrid). Happy coding! 🖥️💻

---

# Select Column type
Custom column type for [RevoGrid](https://github.com/revolist/revogrid) component based on [revo-dropdown](https://github.com/revolist/revodropdown) library.

<img src="./public/assets/sample.png" alt="Autocomplete dropdown" width="100%" />


## Installation
`npm i @revolist/revogrid-column-select`

## How to use

- Import Select Column type;
- Specify table data;
- Per column specify column type;
- Register your column type;
```js

// do Select class import
import SelectTypePlugin from "@revolist/revogrid-column-select";

const columns = [{
    prop: 'name',
    labelKey: 'label',
    valueKey: 'value',
    source: [
        { label: 'According', value: 'a' },
        { label: 'Over', value: 'b' },
        { label: 'Source', value: 's' }
    ],
    columnType: 'select' // column type specified as 'select'
}];
const rows = [{ name: 'New item' }, { name: 'New item 2' }];

// register column type
const columnTypes = { 'select': new SelectTypePlugin() };

// apply data to grid per your framework approach
<revo-grid source={rows} columns={columns} columnTypes={columnTypes}/>
```

## How to use with static Vanilla JS:

For static sites check this [Sample](https://codesandbox.io/s/revogrid-staticjs-column-jvztc?file=/index.html).
npm package: @revolist/revogrid-number
Description: Number column type for RevoGrid system
Author: revolist
Latest version: 1.0.5

# revogrid-number
Number column type for RevoGrid system.

Column type depends on [numbro](http://numbrojs.com/format.html) library.
Use any format you love to assign number format for your grid.
For example:

```js
import NumberColumnType from '@revolist/revogrid-number';
const columnTypes = {
    'numeric': new NumberColumnType({thousandSeparated: true, mantissa: 5})
};
const columns = [
    {
        prop: 'Num',
        name: 'My number',
        columnType: 'numeric'
    },
    {
        prop: 'Num2',
        name: 'My number2',
        columnType: 'numeric'
    }
];
const rows = [{
    'Num': 132322332,
    'Num2': 32322
}];

const grid = document.querySelector('revo-grid');
grid.columnTypes = columnTypes;
grid.source = rows;
grid.columns = columns;
```
npm package: @revolist/stencil-vue2-output-target
Description: Vue2  output target for @stencil/core components.
Latest version: 0.0.6

[![npm version](https://img.shields.io/npm/v/stencil-vue2-output-target.svg?style=flat)](https://www.npmjs.com/package/@revolist/stencil-vue2-output-target)
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/diondree/stencil-vue2-output-target/blob/master/LICENSE.md)

# Vue 2 Stencil Output Targets

This project was forked from [Stencils Vue Output targets](https://github.com/ionic-team/stencil-ds-output-targets/tree/master/packages/vue-output-target) in an effort to fully support Vue 2 for components built with `@stencil/core`

# Installation

```bash
npm install -D stencil-vue2-output-target

# OR

yarn add -D stencil-vue2-output-target
```

# Usage

## Vue

### Stencil Config setup

```ts
import { Config } from "@stencil/core";
import { vueOutputTarget } from "stencil-vue2-output-target";

export const config: Config = {
  namespace: "demo",
  outputTargets: [
    vueOutputTarget({
      componentCorePackage: "component-library",
      proxiesFile: "../component-library-vue/src/components.ts",
      componentModels: vueComponentModels,
    }),
    {
      type: "dist",
    },
  ],
};
```

#### componentCorePackage

This is the NPM package name of your core stencil package. In the case of Ionic we chose ‘@ionic/core’. This is the package that gets published that contains just your web components. This package is then used by the Vue package as a dependency

#### proxiesFile

This is the output file that gets generated by the outputTarget. This file should be referencing a different package location. In the example case we are choosing a sibling directory’s src directory. We will then create a Vue package that exports all components defined in this file.

### Setup of Vue Component Library

There is an example component library package available on Github so that you can get started. This repo will likely live as a sibling to your Stencil component library.

### Usage

```ts
import { DemoComponent } from "component-library-vue";
```
npm package: @revoloo/cypress
Description: Cypress.io end to end testing tool
Author: Brian Mann
Latest version: 1.0.1

<p align="center">
  <img src="https://cloud.githubusercontent.com/assets/1268976/20607953/d7ae489c-b24a-11e6-9cc4-91c6c74c5e88.png"/>
</p>
<p align="center">
  <a href="https://on.cypress.io">Documentation</a> |
  <a href="https://on.cypress.io/changelog">Changelog</a> |
  <a href="https://on.cypress.io/roadmap">Roadmap</a>
</p>

<h3 align="center">
  The web has evolved. Finally, testing has too.
</h3>

<p align="center">
  Fast, easy and reliable testing for anything that runs in a browser.
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/cypress">
    <img src="https://img.shields.io/npm/dm/cypress.svg" alt="npm"/>
  </a>
  <a href="https://gitter.im/cypress-io/cypress">
    <img src="https://img.shields.io/gitter/room/cypress-io/cypress.svg" alt="Gitter chat"/>
  </a>
    <a href="https://stackshare.io/cypress">
    <img src="https://img.stackshare.io/misc/follow-on-stackshare-badge.svg" alt="StackShare"/>
  </a><br />
</p>

## What is Cypress?

<p align="center">
  <a href="https://player.vimeo.com/video/237527670">
    <img alt="Why Cypress Video" src="https://user-images.githubusercontent.com/1271364/31739717-dbdff0ee-b41c-11e7-9b16-bfa1b6ac1814.png" width="75%" height="75%" />
  </a>
</p>

## Installing

[![npm version](https://badge.fury.io/js/cypress.svg)](https://badge.fury.io/js/cypress)

Install Cypress for Mac, Linux, or Windows, then [get started](https://docs.cypress.io/guides/getting-started/installing-cypress.html).

```bash
npm install cypress --save-dev
```
or
```bash
yarn add cypress --dev
```

![installing-cli e1693232](https://user-images.githubusercontent.com/1271364/31740846-7bf607f0-b420-11e7-855f-41c996040d31.gif)


## Contributing

- [![CircleCI](https://circleci.com/gh/cypress-io/cypress/tree/develop.svg?style=svg)](https://circleci.com/gh/cypress-io/cypress/tree/develop) - `develop` branch
- [![CircleCI](https://circleci.com/gh/cypress-io/cypress/tree/master.svg?style=svg)](https://circleci.com/gh/cypress-io/cypress/tree/master) - `master` branch

Please see our [Contributing Guideline](./CONTRIBUTING.md) which explains repo organization, linting, testing, and other steps.

## License

[![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/cypress-io/cypress/blob/master/LICENSE)

This project is licensed under the terms of the [MIT license](/LICENSE).

## Badges

Let the world know your project is using Cypress.io to test with this cool badge

[![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)

```
[![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)
```
npm package: @revoloo/cypress6
Description: Cypress.io end to end testing tool
Author: Brian Mann
Latest version: 1.0.0

<p align="center">
  <img src="https://cloud.githubusercontent.com/assets/1268976/20607953/d7ae489c-b24a-11e6-9cc4-91c6c74c5e88.png"/>
</p>
<p align="center">
  <a href="https://on.cypress.io">Documentation</a> |
  <a href="https://on.cypress.io/changelog">Changelog</a> |
  <a href="https://on.cypress.io/roadmap">Roadmap</a>
</p>

<h3 align="center">
  The web has evolved. Finally, testing has too.
</h3>

<p align="center">
  Fast, easy and reliable testing for anything that runs in a browser.
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/cypress">
    <img src="https://img.shields.io/npm/dm/cypress.svg" alt="npm"/>
  </a>
  <a href="https://gitter.im/cypress-io/cypress">
    <img src="https://img.shields.io/gitter/room/cypress-io/cypress.svg" alt="Gitter chat"/>
  </a>
    <a href="https://stackshare.io/cypress">
    <img src="https://img.stackshare.io/misc/follow-on-stackshare-badge.svg" alt="StackShare"/>
  </a><br />
</p>

## What is Cypress?

<p align="center">
  <a href="https://player.vimeo.com/video/237527670">
    <img alt="Why Cypress Video" src="https://user-images.githubusercontent.com/1271364/31739717-dbdff0ee-b41c-11e7-9b16-bfa1b6ac1814.png" width="75%" height="75%" />
  </a>
</p>

## Installing

[![npm version](https://badge.fury.io/js/cypress.svg)](https://badge.fury.io/js/cypress)

Install Cypress for Mac, Linux, or Windows, then [get started](https://docs.cypress.io/guides/getting-started/installing-cypress.html).

```bash
npm install cypress --save-dev
```
or
```bash
yarn add cypress --dev
```

![installing-cli e1693232](https://user-images.githubusercontent.com/1271364/31740846-7bf607f0-b420-11e7-855f-41c996040d31.gif)


## Contributing

- [![CircleCI](https://circleci.com/gh/cypress-io/cypress/tree/develop.svg?style=svg)](https://circleci.com/gh/cypress-io/cypress/tree/develop) - `develop` branch
- [![CircleCI](https://circleci.com/gh/cypress-io/cypress/tree/master.svg?style=svg)](https://circleci.com/gh/cypress-io/cypress/tree/master) - `master` branch

Please see our [Contributing Guideline](./CONTRIBUTING.md) which explains repo organization, linting, testing, and other steps.

## License

[![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/cypress-io/cypress/blob/master/LICENSE)

This project is licensed under the terms of the [MIT license](/LICENSE).

## Badges

Let the world know your project is using Cypress.io to test with this cool badge

[![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)

```
[![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)
```
npm package: @revolt-digital/cool-frames
Description: ### Install
Author: fernandomunoz
Latest version: 0.1.0

## Custom hook for react: useWindowSize

### Install

```
yarn add @revolt-digital/use-state-ref
yarn add @revolt-digital/cool-frames
```

### Styles

You can import the .scss or .css styles

```
@import '~@revolt-digital/cool-frames/lib/styles.scss';
```

### How to use it?

```
import React, { useEffect } from 'react';
import useWindowSize from '@revolt-digital/use-window-size';
import { CoolFramesProvider, CoolFrames } from '@revolt-digital/cool-frames';

const frames = [
    {
        label: 'Intro',
        sub: [],
        Component: Intro
    },
    {
        label: 'Trio',
        sub: [],
        Component: ExtendedDescription,
        desktop: false
    },
    {
        label: 'How does it work?',
        sub: ['SignUp', 'Upload', 'Discover'],
        Component: HowWorks
    },
]; 

export default () => {
    const windowSize = useWindowSize();
    ...
    
    useEffect(() => {
        const vh = window.innerHeight * .01;
        document.documentElement.style.setProperty('--vh', `${vh}px`);
    }, [windowSize.height]);

    return (
        <CoolFramesProvider frames={frames}>
            ...
            <CoolFrames />
        </CoolFramesProvider>
    );
};
```

### Options

| Name | Type | Description |
| :---: | :---: | :---: |
| frames | Frame[] | Array of frames. A frame represents a single view in a determined position. Params: label, subs (subFrames), Component, desktop (true by default) and extraProps (if it were needed). |

### Hook

| Name | Type | Description |
| :---: | :---: | :---: |
| frames | Frame[] |  |
| selectedIndex | number | Index in the stepper. |
| prevIndex | number | It is the previous index selected. |
| frameIndex | number | It represent the subframe index. It will be 0 when there aren't subframes for the frame. |
| setSelectedIndex | (index: number) => void; |  |
| isFrameSelected | (index: number) => void; |  |
| getSubFrameIndex | (index: number) => void; |  |
| translateY | number |  |
| lastDirection | Direction | It can be 'up, 'down' or undefined. |

### How does it look?

![Alt text](./examples/pic-2.png "Desktop")

![Alt text](./examples/pic-1.png "Mobile")
npm package: @revolt-digital/gallery-crop
Description: ```bash yarn add @revolt-digital/gallery-crop ``` ## How to use it? ```bash import GalleryCrop from "@revolt-digital/gallery-crop"; ```
Author: eapuulesrevolt
Latest version: 0.0.12

## Install

```bash
yarn add @revolt-digital/gallery-crop
```
## How to use it?
```bash
import GalleryCrop from "@revolt-digital/gallery-crop";
```

## Example
```bash
import GalleryCrop from "@revolt-digital/gallery-crop";
function App() {

  const data = [
    {
      id: 1,
      name: "imagen4.jpg",
      url:
        "https://img.freepik.com/free-vector/nature-scene-with-river-hills-forest-mountain-landscape-flat-cartoon-style-illustration_1150-37326.jpg?w=2000",
      size: "24kb",
      extension: ".jpg",
      aspect_ratio: "16 / 9",
    },
    {
      id: 2,
      name: "imagen4.jpg",
      url:
        "https://images.pexels.com/photos/2662116/pexels-photo-2662116.jpeg?auto=compress&cs=tinysrgb&w=800",
      size: "24kb",
      extension: ".jpg",
      aspect_ratio: "16 / 9",
    },
    {
      id: 4,
      name: "imagen4.jpg",
      url:
        "https://img.freepik.com/free-vector/nature-scene-with-river-hills-forest-mountain-landscape-flat-cartoon-style-illustration_1150-37326.jpg?w=2000",
      size: "24kb",
      extension: ".jpg",
      aspect_ratio: "16 / 9",
    },
    {
      id: 5,
      name: "imagen4.jpg",
      url:
        "https://i0.wp.com/digital-photography-school.com/wp-content/uploads/2021/03/landscape-photography-tips-4.jpg?fit=1500%2C908&ssl=1",
      size: "24kb",
      extension: ".jpg",
      aspect_ratio: "16 / 9",
    },
    {
      id: 6,
      name: "imagen4.jpg",
      url:
        "https://img.freepik.com/free-vector/nature-scene-with-river-hills-forest-mountain-landscape-flat-cartoon-style-illustration_1150-37326.jpg?w=2000",
      size: "24kb",
      extension: ".jpg",
      aspect_ratio: "16 / 9",
    },
    {
      id: 7,
      name: "imagen4.jpg",
      url:
        "https://images.pexels.com/photos/34107/milky-way-stars-night-sky.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
      size: "24kb",
      extension: ".jpg",
      aspect_ratio: "16 / 9",
    },
    {
      id: 8,
      name: "imagen4.jpg",
      url:
        "https://img.freepik.com/free-vector/nature-scene-with-river-hills-forest-mountain-landscape-flat-cartoon-style-illustration_1150-37326.jpg?w=2000",
      size: "24kb",
      extension: ".jpg",
      aspect_ratio: "16 / 9",
    },
    {
      id: 9,
      name: "imagen4.jpg",
      url:
        "https://images.unsplash.com/photo-1559583985-c80d8ad9b29f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",
      size: "24kb",
      extension: ".jpg",
      aspect_ratio: "16 / 9",
    },
  ]
  return (
      <GalleryCrop listOfImages={data}/>
  );
}

export default App;
```
npm package: @revolt-digital/gallery-picker-s3
Description: A package to handle backend side of gallery picker integrated with AWS S3.
Author: aazcast
Latest version: 0.0.5

# :email: revoltMailer

A package to handle backend side of gallery picker integrated with AWS S3.

## Todo

- [] Tests

## Usage

- Install the package

```bash
  npm install @revolt-digital/galley-picker-s3
  # or
  yarn add @revolt-digital/galley-picker-s3
```

- Step 1, create one handler file, where we can define the aws config file, Note: Define this transport in server.ts/app.ts (main expressjs file) to use it globally is not a good practice.

```javascript
import { S3Service } from '@revolt-digital/galley-picker-s3';

const serviceS3 = new S3Service({
  accessKey: process.env.AWACCESKEYID,
  secretAccessKey: process.env.AWSECRETACCESSKEY,
  region: process.env.AWREGION,
  signatureVersion: process.env.AWSIGNATURE,
  bucket: process.env.AWS3BUCKET
});
```

- Step 2, get AWS Upload Signed URL`.

```javascript
app.post('/uploadurl', async (req:Request, res: Response)=> {
  try {
    let options = {
      fileName: "imagename_withoutextension",
      extension: "jpg",
      width: 500,
      height: 500,
      aspectRatio: '1/1',
      item: 0 //item 0 is considerated as the original item
    }
    const url = await serviceS3.getS3UploadSigned(options);
    res.send(`success: ${url}`)
  } catch (err) {
    throw err;
  }
})
```

- Step 3, Delete Image in s3`.

```javascript
app.post('/delete', async (req:Request, res: Response)=> {
  try {
    const url = await serviceS3.deleteObject(req.body.fileName)
    res.send(`success: ${url}`)
  } catch (err) {
    console.log(err);
  }
})
```

- Step 4, List All objects with pagination`.

```javascript
app.get('/list', async (req:Request, res: Response)=> {
  try {
    const page = 1;
    const limit = 500;
    const data = await serviceS3.getObjects(page, limit)
    res.send({sucess: true, data: data})
  } catch (err) {
    throw err;
  }
})
```

## Running the example app

Run `yarn install` then `yarn build` in the root folder (the one with this README file).

Then move into the example folder `cd example` and run `yarn install` and `yarn start`.

Then go to `http://localhost:8001/uploadurl`
npm package: @revolt-digital/mailer
Description: A package to handle email sending with nodemailer.
Author: aazcast
Latest version: 0.0.3

# :email: revoltMailer

A package to handle email sending with nodemailer.

## Todo

- [] Enable compiler templates like pugjs, handlebars
- [] Tests

## Usage

- Install the package

```bash
  npm install @revolt-digital/mailer
  # or
  yarn add @revolt-digital/mailer
```

- Step 1, create one handler file check example in this case: sender.js file, where we can define the transport types we are going to use. import and create transport, Note: Define this transport in server.ts/app.ts (main expressjs file) to use it globally is not a good practice.

```javascript
import { MailerService, ISendMailOptions } from '@revolt-digital/mailer';

export const sendMail = async (options:ISendMailOptions) => {
  try {
    const sender = new MailerService({
      transport: {
        host: process.env.HOST,
        port: process.env.PORT,
        auth: {
          user: process.env.USERNAME,
          pass: process.env.PASSWORD
        },
      },
      defaults: {
        from: process.env.FROM
      }
    });
    await sender.sendMail(options);
    return;
  } catch (err) {
    throw err;
  }
}
```

- Step 2, import sender handler and send email`.

```javascript
import {sendMail} from './sender';

app.get('/email_smtp', async (req:Request, res: Response)=> {
  await sendMail({
    to: "email@gmail.com",
    subject: "Testing Revolt Mailer module",
    html: "<div>HTML EMAIL</div>",
    text: "text version of email"
  });
  res.send('success')
})
```

## Running the example app

Run `yarn install` then `yarn build` in the root folder (the one with this README file).

Then move into the example folder `cd example` and run `yarn install` and `yarn start`.

Then go to `http://localhost:8001/email_smtp`
npm package: @revolt-digital/use-horizontal-scroll
Description: A package to easily create horizontal scrolling on flex elements.
Author: andreivan
Latest version: 0.0.1

# :left_right_arrow: useHorizontalScroll

A package to easily create horizontal scrolling on flex elements.

## Usate

- Install the package

```bash
  npm install @revolt-digital/use-horizontal-scroll

  yarn add @revolt-digital/use-horizontal-scroll
```

- Step 1, create a layout that you want to make scrolleable


```html
<section className="flex overflow-x-hidden">
  <div className="flex-none">
    ...
  </div>
  <div className="flex-none">
    ...
  </div>
  <div className="flex-none">
    ...
  </div>
  ...
</section>
```

> Important: Parent `div` must have `display: flex` and `overflow-x: hidden | scroll` css styles

- Step 2, import and assign ref to your `div element`.

```javascript
import useHorizontalScroll from "@revolt-digital/use-horizontal-scroll";

export default () => {
  const { ref } = useHorizontalScroll();

  return (
    <section className="flex overflow-x-hidden" ref={ref}>
      <div className="flex-none">
        ...
      </div>
      <div className="flex-none">
        ...
      </div>
      <div className="flex-none">
        ...
      </div>
    </section>
  );
}
```

## Running the example app

Run `yarn install` then `yarn build` in the root folder (the one with this README file).

Then move into the example folder `cd example` and run `yarn install` and `yarn start`.

Then go to `http://localhost:3000`
npm package: @revolt-digital/use-notification
Description: ```bash yarn add @revolt-digital/use-notification ```
Author: eapuulesrevolt
Latest version: 0.0.2

## Install

```bash
yarn add @revolt-digital/use-notification
```

create a file called 'firebase-messaging-sw.js; in the built folder (ex: public folder)
and put the following code inside

```javascript
importScripts("https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js");
importScripts("https://cdn.jsdelivr.net/npm/idb@5.0.4/build/iife/index-min.js");

// Initialize the Firebase app in the service worker by passing the generated config
firebase.initializeApp({
  apiKey: *,
  authDomain: *,
  databaseURL: *,
  projectId: *,
  storageBucket: *,
  messagingSenderId: *,
  appId: *,
});

async function storeNotif(payload) {
  const dbName = "admin";
  const storeName = "notifications";
  const limit = 250;

  const adminDB = await idb.openDB(dbName, 2, {
    upgrade(db) {
      if (!db.objectStoreNames.contains(storeName)) {
        db.createObjectStore(storeName, { keyPath: "id", autoIncrement: true });
      }
    },
  });

  adminDB.put(storeName, payload);

  const count = await adminDB.count(storeName);

  if (count > limit) {
    const list = await adminDB.getAll(storeName);

    for (const item of list.reverse().slice(limit)) {
      adminDB.delete(storeName, item.id);
    }
  }

  adminDB.close();
}

const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function (payload) {
  storeNotif({
    moment: payload.data.moment,
    organization: payload.data.organization,
    type: payload.data.type,
    message: payload.data.body,
  });

  return self.registration.showNotification(payload.data.title, {
    body: payload.data.body,
    icon: payload.data.icon,
    data: {
      click_action: payload.data.click_action,
    },
  });
});

messaging.onBackgroundMessage(function (payload) {
  console.log("Received background message ", payload);
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
  };
  self.registration.showNotification(notificationTitle, notificationOptions);
});

self.addEventListener("notificationclick", function (event) {
  event.notification.close();
  event.waitUntil(
    self.clients.openWindow(event.notification.data.click_action)
  );
});
```

## How to use it?
import useNotification from '@revolt-digital/use-notification';

#Input
```javascript
useNotification(firebaseConfig: firebaseConfig, vapidKey: string)
```
#Output
```javascript
{
    suscribe: () => Promise<string>;
    unsuscribe: () => Promise<boolean>;
    onMessageListener: () => Unsubscribe;
}
```
npm package: @revolt-digital/use-scroll
Description: ### Install
Author: fernandomunoz
Latest version: 0.0.1

## Custom hook for react: useScroll

### Install

```yarn add @revolt-digital/use-scroll```

### How to use it?

```
import React from 'react';
import useScroll from '@revolt-digital/use-scroll';

export default () => {
    const {
        scrollY,
        scrollX,
        blockScroll,
        unblockScroll,
        setYPosition,
        isScrollBlocked
    } = useScroll(); 

    return <div>Hello there!</div>;
};
```
npm package: @revolt-digital/use-state-ref
Description: ### Install
Author: fernandomunoz
Latest version: 0.0.4

## Custom hook for react: useStateRef

### Install

```yarn add @revolt-digital/use-state-ref```

### How to use it?

```
import React from 'react';
import useStateRef from '@revolt-digital/use-state-ref';

export default () => {
    const [state, setState, prevState] = useStateRef(0);

    return <div>Hello there!</div>;
};
```
npm package: @revolt-digital/use-window-size
Description: ### Install
Author: fernandomunoz
Latest version: 0.0.8

## Custom hook for react: useWindowSize

### Install

```yarn add @revolt-digital/use-window-size```

### How to use it?

```
import React from 'react';
import useWindowSize from '@revolt-digital/use-window-size';

export default () => {
    const { width, height } = useWindowSize(); 

    return <div>width: {width} height: {height}</div>;
};
```
npm package: @revoltchat/asnlookup
Description: IP to ASN lookup using BGP table listings from http://thyme.apnic.net/current/
Author: Johannes Zellner
Latest version: 1.0.2

# asnlookup

Node.JS module for getting ASN for a given IP address. It uses data from
http://thyme.apnic.net/current/ .

Mostly inspired by https://www.npmjs.com/package/iptoasn but without native code and using async/await instead of callback style.

## Installation

`npm install --save asnlookup`

## Description

This module downloads raw BGP table (~13MB) and ASN to name mapping (~2MB)
files from http://thyme.apnic.net/current/ and converts them into a more useful
format that allows for a quick search.

WARNING: To improve the lookup speed by a lot only /16 at most is currently supported as the first 2 bytes of the address is used for quick lookup!
On the upside this makes it more specific for ranges covered by various ASNs

## Usage

```javascript
'use strict';

// you must pass a filepath for the local cache, otherwise .asnlookup.cache will be used
const asnlookup = require('./index.js')('.asnlookup.cache');

(async function() {
    const testArray = [
        '8.8.8.8',
        '50.22.180.100',
        '1.2.3.4',
        '104.16.181.15',
        '127.0.0.1',
        'asd'
    ];

    // call .load() for an attempt to load the local cache, this will require 10s of MB of memory!
    await asnlookup.load();

    // check when the cache was updated
    // lastUpdated are days
    // lastUpdated is Infinity if there's no cache at all
    const lastUpdated = asnlookup.lastUpdated();

    console.log(`Last updated ${lastUpdated} days ago.`);

    // update the cache if it's older than 31 days
    if (lastUpdated > 31) {
        console.log('Cache too old or never created. Updating...');
        await asnlookup.update();
    }

    testArray.forEach(function(ip) {
        console.log(ip, '-', asnlookup.lookup(ip));
    });
})();
```

Result of this sample script:

```
Last updated 0 days ago.
8.8.8.8 - LEVEL3
50.22.180.100 - SOFTLAYER
1.2.3.4 - null
104.16.181.15 - CLOUDFLARENET
127.0.0.1 - null
asd - null
```
npm package: @revoltchat/babel-plugin-extract-messages
Description: Babel plugin for collecting messages from source code for internationalization
Author: Tomáš Ehrlich
Latest version: 5.1.3

[![License][badge-license]][license]
[![Version][badge-version]][package]
[![Downloads][badge-downloads]][package]

# @lingui-solid/solid

> SolidJS components for internationalization

This is fork of the [LinguiJS](https://lingui.dev/) with SolidJS support.

See [documentation](https://github.com/Azq2/js-lingui-solid/blob/main/README.md) for usage and installation.

## License

[MIT][license]

[license]: https://github.com/Azq2/js-lingui-solid/blob/main/LICENSE
[package]: https://www.npmjs.com/package/@revoltchat/babel-plugin-extract-messages
[badge-downloads]: https://img.shields.io/npm/dw/@revoltchat/babel-plugin-extract-messages.svg
[badge-version]: https://img.shields.io/npm/v/@revoltchat/babel-plugin-extract-messages.svg
[badge-license]: https://img.shields.io/npm/l/@revoltchat/babel-plugin-extract-messages.svg
npm package: @revoltchat/babel-plugin-lingui-macro
Description: Babel plugin for transforming Lingui Macros
Author: Tomáš Ehrlich
Latest version: 5.1.3

[![License][badge-license]][license]
[![Version][badge-version]][package]
[![Downloads][badge-downloads]][package]

# @lingui-solid/solid

> SolidJS components for internationalization

This is fork of the [LinguiJS](https://lingui.dev/) with SolidJS support.

See [documentation](https://github.com/Azq2/js-lingui-solid/blob/main/README.md) for usage and installation.

## License

[MIT][license]

[license]: https://github.com/Azq2/js-lingui-solid/blob/main/LICENSE
[package]: https://www.npmjs.com/package/@revoltchat/babel-plugin-lingui-macro
[badge-downloads]: https://img.shields.io/npm/dw/@revoltchat/babel-plugin-lingui-macro.svg
[badge-version]: https://img.shields.io/npm/v/@revoltchat/babel-plugin-lingui-macro.svg
[badge-license]: https://img.shields.io/npm/l/@revoltchat/babel-plugin-lingui-macro.svg