open-index/open-npm huggingface dataset:
npm package: @jsdanielh/minimal-package
Description: A minimal npm package
Author: jsdanielh
Latest version: 1.0.0

# Minimal Package

A simple npm package that exports a greeting function.

## Installation

```bash
npm install @jsdanielh/minimal-package
```

## Usage

```javascript
const { greet } = require('@jsdanielh/minimal-package');

console.log(greet()); // "Hello, World!"
console.log(greet('Developer')); // "Hello, Developer!"
```

## License

MIT
npm package: @jsdaniell/mask-fields
Description: Format data to masked information.
Latest version: 2.1.3

# Mask Fields

[![GitHub license](https://img.shields.io/github/license/jsdaniell/mask-fields)](https://github.com/jsdaniell/mask-fields/blob/master/LICENSE) [![GitHub issues](https://img.shields.io/github/issues/jsdaniell/mask-fields)](https://github.com/jsdaniell/mask-fields/issues) [![npm](https://img.shields.io/badge/version-v2.1.0-blue)](https://www.npmjs.com/package/@jsdaniell/mask-fields)

The npm package to mask and format fields.

## For what?

This package allows you to format string data in standard formats such as the examples below.

- CPF Brazillian Document - 12345678900 → 123.456.789.00
- Telephone Number - 85123457890 → (85)12345-7890
- Brazillian Postal Code - 12355201 → 12.355-201
- CNPJ Brazillian Document - 12345678123400 → 12.345.678/1234-00
- Credit Card - 1234567832166547 → 1234.5678.3216.6547
- Brazillian General Document - 12345678901 → 1234567890-1
- Date - 02082019 → 02/08/2019
- Money - 1000 → 1,000...

### Aditional Formats

- Only numbers filter mask, don't allow non-numeric characters.
- No latin letters → Permissives [123,.-=+...] ← No letters
- Only letters [abcDEF...]

## Install

To install the package run `npm install --save @jsdaniell/mask-fields` on terminal inside your project.

## How to use?

1. First, import the package on your project:

```javascript
import format from "@jsdaniell/mask-fields";
```

2. Then you can use the mask on any local that's shows data.

Example of use on React component:

```javascript
<TextField
  fullWidth
  value={format.tel("85012346789")}
  onChange={event => {
    let value = format.num(event.target.value); // Reformat value for only numbers to treat the number.
    onChange(value);
  }}
  variant="outlined"
  label="Valor"
/>
```

The result will be → (85)01234-6789

Remember to use `format.num(event.target.value)` on onChange event of TextField or any component that you're using to reformat the string to numbers again when passing value on `onChange` event, or `format.onlyLetters(event.target.value)` to reformat to only latin characters string.

## List of supported masks

It's not required that the value passed have to be a string.

```javascript
format.cpf(); // Brazillian CPF Document
format.tel(); // Phone Number
format.cep(); // Brazillian Postal Code
format.cnpj(); // Brazillian Juridic Person Document
format.card(); // Credit Card
format.rg(); // Brazillian General Document
format.date(); // Date Time format
format.money(); // Money format
format.noLetters(); // No letter characters allowed
format.onlyLetters(); // Only letters characters are returned
```
npm package: @jsdaniell/react-native-no-sleep
Description: Prevent React Native Apps to sleeping
Author: José Daniel
Latest version: 0.1.3

# @jsdaniell/react-native-no-sleep

[![npm version](https://img.shields.io/npm/v/@jsdaniell/react-native-no-sleep.svg)](https://www.npmjs.com/package/@jsdaniell/react-native-no-sleep)
[![License](https://img.shields.io/npm/l/@jsdaniell/react-native-no-sleep.svg)](https://github.com/jsdaniell/react-native-no-sleep/blob/main/LICENSE)

Library to keep screen awake on React Native, working on iOS and Android.

## Features

- Prevents the screen from sleeping on both iOS and Android devices.
- Lightweight and easy to use.

## Installation

```bash
npm install @jsdaniell/react-native-no-sleep
```

or

```bash
yarn add @jsdaniell/react-native-no-sleep
```

## Usage

```javascript
import { activateKeepAwake, deactivateKeepAwake } from '@jsdaniell/react-native-no-sleep';

// To activate (keep the screen awake)
activateKeepAwake();

// To deactivate (allow the screen to sleep)
deactivateKeepAwake();
```

## API

### `activateKeepAwake()`

Activates the library, preventing the screen from sleeping.

### `deactivateKeepAwake()`

Deactivates the library, allowing the screen to sleep as usual.

## Contributing

Contributions are welcome! Please see the [CONTRIBUTING.md](https://github.com/jsdaniell/react-native-no-sleep/blob/main/CONTRIBUTING.md) file for more information.

## License

This project is licensed under the MIT License - see the [LICENSE](https://github.com/jsdaniell/react-native-no-sleep/blob/main/LICENSE) file for details.
npm package: @jsdecorators/debounce
Description: >Encapsulate `lodash.debounce` to a decorator. For further details please check [lodash/debounce.js](https://github.com/lodash/lodash/blob/master/debounce.js)
Latest version: 1.0.2

# @jsdecorators/debounce

>Encapsulate `lodash.debounce` to a decorator.
For further details please check [lodash/debounce.js](https://github.com/lodash/lodash/blob/master/debounce.js)

## install
```sh

~$ yarn add @jsdecorators/debounce

```

or

```sh

~$ npm i @jsdecorators/debounce

```

## how to use

```ts
import debounce from '@jsdecorators/debounce';

class MyClass {

  @debounce(100)
  onScroll() {
    console.log('onScroll is called!');
  }

}

```
npm package: @jsdecorators/throttle
Description: >Encapsulate `lodash.throttle` to a decorator. For further details please check [lodash/throttle.js](https://github.com/lodash/lodash/blob/master/throttle.js)
Latest version: 1.0.7

# @jsdecorators/throttle

>Encapsulate `lodash.throttle` to a decorator.
For further details please check [lodash/throttle.js](https://github.com/lodash/lodash/blob/master/throttle.js)

## install
```sh

~$ yarn add @jsdecorators/throttle

```

or

```sh

~$ npm i @jsdecorators/throttle

```

## usage

```ts
import throttle from '@jsdecorators/throttle';

class MyClass {

  @throttle(100)
  onScroll() {
    // this function would be called every 100ms
  }

}

```
npm package: @jsdesign/jsd-checkbox
Description: JS Design checkbox web component 
Author: Jayabratha Saha
Latest version: 1.0.6

# `<jsd-checkbox>` 

Simple checkbox input web-component to be use accross web irrespective of frameworks.

## Installation

```sh
npm install @jsdesign/jsd-checkbox
```

## Attributes

| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `id` | `string` | `''` | Sets the id attribute for the checkbox input. Preferred when used inside forms.
| `name` | `string` | `''` | Sets the name attribute for the input. Preferred when used inside forms.
| `label` | `string` | `''` | Label to display for the checkbox input.
| `disabled` | `boolean` | -- | When attribute is present, checkbox input is disabled cannot be interacted with.
| `required` | `boolean` | -- | When attribute is present, the input field is marked mandatory.
| `list` | `Array` | `[]` | Creates the checkbox list based on this attribute. Should be a array of value string.
| `value` | `Array` | `[]` | Sets the default checked values. Must be list of valid values.
| `theme` | `string` | `'light` | When `'dark'`, the input will adapt to dark theme.
| `inline` | `boolean` | -- | When attribute is present, the checkbox inputs will be aligned inline.
| `error-msg` | `string` | `''` | When error message string is provided, the checkbox input will be error themed and error message is displayed.


## Examples

### Default Radio

![](images/checkbox.png)

```html 
<jsd-checkbox id='snacks' label='snacks' value='["Samosa"]' list='["Samosa", "Kachori", "Jalebi"]' onchange="test(event)"></jsd-checkbox>
```

### Inline Radio

![](images/checkbox-inline.png)

```html 
<jsd-checkbox id='snacks' inline label='snacks' value='["Samosa"]' list='["Samosa", "Kachori", "Jalebi"]'></jsd-checkbox>
```

### Radio with error

![](images/checkbox-error.png)

```html 
<jsd-checkbox id='snacks-disabled' label='snacks' error-msg='Please select your choices' list='["Samosa", "Kachori", "Jalebi"]'>
</jsd-checkbox>
```

### Disabled Radio

![](images/checkbox-disabled.png)

```html 
<jsd-checkbox id='snacks-disabled' disabled label='snacks' value='["Samosa"]' list='["Samosa", "Kachori", "Jalebi"]'>
</jsd-checkbox>
```

### Cutomizable property list

| Name | Default
| ---- | ---- 
|--color-primary | #1eba68;
|--color-primary-dark | #1ba75e;
|--color-secondary | #f6f6f6;
|--color-secondary-dark | #efefef;
|--color-secondary-darktheme | rgba(255, 255, 255, 0.3);
|--color-secondary-dark-darktheme | rgba(255, 255, 255, 0.6);
|--color-error | #dd4421;
|--color-error-background | #ffebe6;
|--color-placeholder | #737373;
|--color-placeholder-disabled | #e0e0e0;
|--color-placeholder-darktheme | #e0e0e0;
|--color-label | #909090;
|--color-black | #2c2c2c;
|--color-header-black | #252525;
|--color-header-tag | #747373;
|--color-white | #ffffff;
|--color-border | #edebeb;
|--border-radius | 0.5rem;
|--border-width | 1px;
|--border-width-hover | 3px;
|--label-spacing | 0.2rem;
|--label-case | uppercase;
|--label-font-size | 0.8rem;
|--button-font-weight | 500;
npm package: @jsdesign/jsd-radio
Description: JS Design radio web component 
Author: Jayabratha Saha
Latest version: 1.0.6

# `<jsd-radio>` 

Simple radio input web-component to be use accross web irrespective of frameworks.

## Installation

```sh
npm install @jsdesign/jsd-radio
```

## Attributes

| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `id` | `string` | `''` | Sets the id attribute for the radio input. Preferred when used inside forms.
| `name` | `string` | `''` | Sets the name attribute for the input. Preferred when used inside forms.
| `label` | `string` | `''` | Label to display for the radio input.
| `disabled` | `boolean` | -- | When attribute is present, radio input is disabled cannot be interacted with.
| `required` | `boolean` | -- | When attribute is present, the input field is marked mandatory.
| `list` | `Array` | `[]` | Creates the radio list based on this attribute. Should be a array of value string.
| `inline` | `boolean` | -- | When attribute is present, the radio inputs will be aligned inline.
| `value` | `string` | `''` | Sets the default checked value.
| `theme` | `string` | `'light` | When `'dark'`, the input will adapt to dark theme.
| `error-msg` | `string` | `''` | When error message string is provided, the radio input will be error themed and error message is displayed.


## Examples

### Default Radio

![](images/radio.png)

```html 
<jsd-radio id='test' name='test' value='Male' label="gender" list='["Male", "Female", "Other"]' onchange='test(event)'></jsd-radio>
```

### Inline Radio

![](images/radio-inline.png)

```html 
<jsd-radio id='gender' inline name='gender' label="gender" value='Male' list='["Male", "Female", "Other"]'></jsd-radio>
```

### Radio with error

![](images/radio-error.png)

```html 
<jsd-radio id='error' name='error' value='' error-msg="Please select your gender" label="gender" list='["Male", "Female", "Other"]'></jsd-radio>
```

### Disabled Radio

![](images/radio-disabled.png)

```html 
<jsd-radio id='disabled' name='disabled' disabled value='Male' label="gender" list='["Male", "Female", "Other"]'></jsd-radio>
```

### Cutomizable property list

| Name | Default
| ---- | ---- 
|--color-primary | #1eba68;
|--color-primary-dark | #1ba75e;
|--color-secondary | #f6f6f6;
|--color-secondary-dark | #efefef;
|--color-secondary-darktheme | rgba(255, 255, 255, 0.3);
|--color-secondary-dark-darktheme | rgba(255, 255, 255, 0.6);
|--color-error | #dd4421;
|--color-error-background | #ffebe6;
|--color-placeholder | #737373;
|--color-placeholder-disabled | #e0e0e0;
|--color-placeholder-darktheme | #e0e0e0;
|--color-label | #909090;
|--color-black | #2c2c2c;
|--color-header-black | #252525;
|--color-header-tag | #747373;
|--color-white | #ffffff;
|--color-border | #edebeb;
|--border-radius | 0.5rem;
|--border-width | 1px;
|--border-width-hover | 3px;
|--label-spacing | 0.2rem;
|--label-case | uppercase;
|--label-font-size | 0.8rem;
|--button-font-weight | 500;
npm package: @jsdevs-sp/queue-hook
Description: ## Import
Author: jsdevs-sp
Latest version: 0.0.7

# queue-hook

## Import

### Web Modules

```
<script type="module">
  import { useQueue, getQueues, getQueuesByKey } from "https://cdn.jsdelivr.net/npm/@jsdevs-sp/queue-hook@0.0.2/lib/index.js";
</script>
```

### Node Modules

```npm install --save @jsdevs-sp/queue-hook```

```import { useQueue, getQueues, getQueuesByKey } from  "@jsdevs-sp/queue-hook"```

## Usage

### Manifest

```
const manifest = export default [
  {
    key: 'todos',
    url: 'https://jsonplaceholder.typicode.com/todos',
    loader: 'json',
    options: {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      },
      mode: 'cors',
      cache: 'default'
    }
  },
  {
    key: 'article-42',
    url: 'https://jsonplaceholder.typicode.com/posts/42',
    loader: 'json',
  },
  {
    key: 'create-user',
    url: 'http://localhost:8000/api/user',
    loader: 'json',
    options: {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ a: 1, b: 2 })
    }
  },
  {
    key: 'foo',
    url: 'mock/foo.json',
    loader: 'json',
  },
  {
    key: 'bar',
    url: 'mock/bar.json',
    loader: 'json',
  },
  {
    key: 'image',
    url: 'mock/image.jpg',
    loader: 'image'
  }
]

```

### loadQueue

```
import { useQueue } from  "@jsdevs-sp/queue-hook;

const { loadQueue } = useQueue('preload', manifest);

loadQueue((queue) => {
  console.log('onComplete:', queue);
});

```

### loadQueueByItem

```
import { useQueue } from  "@jsdevs-sp/queue-hook;

const { loadQueueByItem } = useQueue('preload', manifest);

loadQueueByItem(({ item, progress, position }) => {
  console.log('onItemComplete', item, progress, position);
});
```

### getQueuesByKey

```
import { getQueuesByKey } from  "@jsdevs-sp/queue-hook;

getQueuesByKey('preload')
```

### getQueues

```
import { getQueues } from  "@jsdevs-sp/queue-hook;

getQueues()
```
npm package: @jsdir/avro-to-typescript
Description: Package for converting Avro schema files (.avsc) to TypeScript class files
Author: Degordian
Latest version: 2.2.3

avro-to-typescript 
========
[![Build Status](https://travis-ci.org/degordian/avro-to-typescript.svg?branch=master)](https://travis-ci.org/degordian/avro-to-typescript)
[![npm version](https://badge.fury.io/js/%40degordian%2Favro-to-typescript.svg)](https://badge.fury.io/js/%40degordian%2Favro-to-typescript)

avro-to-typescript compiles avro schema files (.avsc) to TypeScript classes 
and interfaces. Making using avro schematics with node.js easy and comfortable.


Features
--------

- Compiles most if not all avro types (**record**, **enum**, **primitive**, **map**, **array**)
- Provides methods for effective serialization and deserialization of avro to js and vice versa


Usage
-----

#### Global:
Most projects will use avro-to-typescript this way
```sh
npm install -g @degordian/avro-to-typescript

avro-to-typescript --compile [ schema-directory ] [ output-directory ]
```
This will generate namespaced folders and files for your schemas inside 
output directory so have that in mind.

You also need to install avro-to-typescript in your project.
```
npm install @degordian/avro-to-typescript --save
```

#### Project:
This way is if your projects needs to generate avro classes while running.
```
npm install @degordian/avro-to-typescript --save
```

    import { Compiler } from "degordian/avro-to-typescript";

    const compiler = new Compiler(outputDir);
    await compiler.compile(avro);

#### Logical Types:
If you want to take advantage of logical types, you can pass these as an argument to the cli
```sh
avro-to-typescript --compile [ schema-directory ] [ output-directory ] --logical-types [avro type] [typescript type]
```

You can even pass more than one if you alternate them:
```sh
avro-to-typescript --compile [ schema-directory ] [ output-directory ] --logical-types [avro type] [typescript type] [avro type] [typescript type]
```

You can also pass them to the compilre in your code directly:

    import { Compiler } from "degordian/avro-to-typescript";

    const compiler = new Compiler(outputDir, { date: 'string', 'timestamp-millis': 'string'} });
    await compiler.compile(avro);

If there are logical types in the avro schema but you don't provide a mapping for them, they will default to the underlying primitive type.

Contribution and Support
------------------------

If you are having issues, please let us know on our issue tracker.

- Issue Tracker: github.com/degordian/avro-to-typescript/issues
- Source Code: github.com/degordian/avro-to-typescript


License
-------

The project is licensed under the MIT license.
npm package: @jsdirgodel/react-stockcharts
Description: Highly customizable stock charts with ReactJS and d3
Author: Ragu Ramaswamy
Latest version: 0.7.0-beta.22.1

## React Stockcharts

[![Join the chat at https://gitter.im/rrag/react-stockcharts](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/rrag/react-stockcharts?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[![npm version](https://badge.fury.io/js/react-stockcharts.svg)](https://badge.fury.io/js/react-stockcharts)

Create highly customizable stock charts

Built with [React JS](http://facebook.github.io/react/) and [d3](http://d3js.org/)

Multiple [quick start examples](https://github.com/rrag/react-stockcharts-examples2)

- svg and canvas for improved performance. 
- pan and zoom, on touch devices too

#### Chart types

- Scatter
- Area
- Line
- Candlestick
- OHLC
- HeikenAshi
- Renko
- Kagi
- Point & Figure

#### Indicators

- EMA, SMA, WMA, TMA
- Bollinger band
- SAR
- MACD
- RSI
- ATR
- Stochastic (fast, slow, full)
- ForceIndex
- ElderRay
- Elder Impulse

(more to come), 

and it is simple to create your own indicator too

#### Interactive Indicators

- Trendline
- Fibonacci Retracements
- Gann Fan
- Channel
- Linear regression channel

---

### Installation
```sh
npm install  --save react-stockcharts@next
```

### Documentation

[Documentation](http://rrag.github.io/react-stockcharts)

[Ready to use Examples](https://github.com/rrag/react-stockcharts-examples2)

### Demo

[Demo v1](http://rrag.github.io/stockcharts-demo/) (closed source) built with react-stockcharts

[Demo v2](https://demo.reactstockcharts.org/) - Includes
- Serverside calculation of indicators
- Pan to load more
- option of websocket/xhr to download data
- Multiple chart types, including advanced types
- Drawing objects
- Indicators
- Compare with another

I am exploring options to license this, contact me if you are interested

### Contributing

Refer to [CONTRIBUTING.md](./CONTRIBUTING.md)

### Stability

This is alpha state software, the api will change with each minor version.

### Roadmap

[Roadmap](./docs/md/COMING-SOON.md)

### LICENSE

[MIT](./LICENSE)
npm package: @jsdkit/bridge
Description: 即时设计开发辅助工具套件，方便宿主与iframe通信
Author: Finn
Latest version: 1.0.2

# @jsdkit/bridge

本项目使您可以像调用本地同步函数一样，进行宿主与iframe间双向同步调用。

同时本项目，也可做为使用 React 进行即时设计插件开发的基础模板。

## 安装

### ES6(推荐)

```shell
npm i @jsdkit/bridge
```

### UMD(不推荐)

npm 包中包含 umd 文件，你可以下载下来后，添加到工程中：

```html

<script src="./node_modules/@jsdkit/bridge/dist/index.umd.js"></script>
```

## 使用

### ui 调用 host 中的方法

首先在 host 中提供一个 createRectangle 方法：

```typescript
import {createUiBridge} from '@/lib';

const ui = createUiBridge();

// 定义一个方法，供 ui 环境使用
ui.createRectangle = async (count) => {
    console.log('ui 传递的参数：', count);  // 123
    // 使用 return 将值直接传递给 ui
    return true;
};

jsDesign.showUI(__html__);
```

在 ui 环境中，直接调用宿主中的 createRectangle 方法：

```typescript
import {createHostBridge} from '@jsdkit/bridge';

const host = createHostBridge('你的插件id');
const res = await host.createRectangle(123);
console.log(res)  // res 即为 host 中 createRectangle 方法的返回值 (true)
```

### host 调用 ui 中的方法

首先在 ui 中提供一个 changeButtonColor 方法：

```typescript
import {createHostBridge} from '@jsdkit/bridge';

const host = createHostBridge('你的插件id');

// 定义一个方法供 host 调用
host.changeButtonColor = (color: string) => {
    // 收到 color 参数
    document.getElementById('btn').style.backgroundColor = color;
};
```

在 host 环境中，直接调用 ui 中的 changeButtonColor 方法：

```typescript
// 调用 ui 方法
import {createUiBridge} from '@/lib';

const ui = createUiBridge();
ui.changeButtonColor('#f00'); // 如果有返回值，也可以使用 await 来接收
jsDesign.showUI(__html__);
```

## TypeScript 支持

您只需要对提供的方法进行声明，并在 createBridge 时传入泛型声明即可：

示例：

```typescript
// interfaces.ts ，此文件仅为 ts 定义文件，会被 host 和 ui 环境共用类型提示
export interface Bridge {
    /** 创建矩形 */
    createRectangle(count: number): Promise<boolean>;

    /** 改变按钮颜色 */
    changeButtonColor(color: string): void;
}
```

在 ui 中使用:

```typescript
const host = createHostBridge<Bridge>('你的插件id');
```

之后输入 `host.`，您的编辑器即可自动提示。

在 host 中使用：

```typescript
const ui = createUiBridge<Bridge>();
```

之后输入 `ui.`，您的编辑器即可自动提示。