open-index/open-npm huggingface dataset:
npm package: @masihkasar/telegrambot
Description: Telegram BOT, build with Javascript
Author: mohammedwazier
Latest version: 1.0.2

# TelegramBOT

Telegram BOT, build with Javascript

## Installation

Using npm:

```shell
$ npm i @masihkasar/telegrambot
```

Using Yarn:

```shell
$ yarn add @masihkasar/telegrambot
```

in Node.js:

```js
const TelegramBot = require("@masihkasar/telegrambot");

TelegramBot.SetToken("Your Bot Channel Token"); // Setting Token
```
npm package: @masik09/randomid-generator
Description: random-id-generator
Latest version: 1.0.1

random-id-generator

Paczka random-id-generator to prosta biblioteka Node.js, która umożliwia generowanie losowych identyfikatorów o określonej długości.

Instalacja
Aby zainstalować paczkę random-id-generator, wykonaj polecenie:

npm install random-id-generator

Użycie
Poniżej znajduje się przykład użycia paczki random-id-generator:


const randomID = require('random-id-generator');

// Generowanie identyfikatora o długości 10
const id = randomID(10);
console.log(id); // Wyświetli losowy identyfikator o długości 10

// Generowanie identyfikatora o długości 5
const id2 = randomID(5);
console.log(id2); // Wyświetli losowy identyfikator o długości 5
npm package: @masila/chat-widget
Description: Chat web widget for React apps
Author: Abel Masila
Latest version: 1.1.2

# Chat Widget

## Features

- Plain text message UI
- Snippet style for links (only as responses for now)
- Fully customizable
- Easy to use

## Installation

#### npm

```bash
npm install --save @masila/chat-widget
```

#### yarn

```bash
yarn add @masila/chat-widget
```

## Usage

1- Add the Widget component to your root component

```js
import React from "react";
import { Widget } from "react-chat-widget";

import "react-chat-widget/lib/styles.css";

function App() {
  return (
    <div className="App">
      <Widget />
    </div>
  );
}

export default App;
```

2- The only required prop you need to use is the `handleNewUserMessage`, which will receive the input from the user.

```js
import React from "react";
import { Widget } from "react-chat-widget";

import "react-chat-widget/lib/styles.css";

function App() {
  const handleNewUserMessage = (newMessage) => {
    console.log(`New message incoming! ${newMessage}`);
    // Now send the message throught the backend API
  };

  return (
    <div className="App">
      <Widget handleNewUserMessage={handleNewUserMessage} />
    </div>
  );
}

export default App;
```

3- Import the methods for you to add messages in the Widget. (See [messages](#messages))

```js
import React from "react";
import { Widget, addResponseMessage } from "react-chat-widget";

import "react-chat-widget/lib/styles.css";

function App() {
  useEffect(() => {
    addResponseMessage("Welcome to this awesome chat!");
  }, []);

  const handleNewUserMessage = (newMessage) => {
    console.log(`New message incoming! ${newMessage}`);
    // Now send the message throught the backend API
    addResponseMessage(response);
  };

  return (
    <div className="App">
      <Widget handleNewUserMessage={handleNewUserMessage} />
    </div>
  );
}

export default App;
```

4- Customize the widget to match your app design! You can add both props to manage the title of the widget and the avatar it will use. Of course, feel free to change the styles the widget will have in the CSS

```js
import React, { useEffect } from "react";
import { Widget, addResponseMessage } from "react-chat-widget";

import "react-chat-widget/lib/styles.css";

import logo from "./logo.svg";

function App() {
  useEffect(() => {
    addResponseMessage("Welcome to this awesome chat!");
  }, []);

  const handleNewUserMessage = (newMessage) => {
    console.log(`New message incoming! ${newMessage}`);
    // Now send the message throught the backend API
  };

  return (
    <div className="App">
      <Widget
        handleNewUserMessage={handleNewUserMessage}
        profileAvatar={logo}
        title="My new awesome title"
        subtitle="And my cool subtitle"
      />
    </div>
  );
}

export default App;
```
npm package: @masim5722/tourguide
Description: Tour Guide is a private react library which is used to implement web tour in to the application
Author: masim5722
Latest version: 2.0.8

# tourguide

> Tour Guide is a private react library which is used to implement web tour in to the application

[![NPM](https://img.shields.io/npm/v/tourguide.svg)](https://www.npmjs.com/package/tourguide) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @masim5722/tourguide
```

## Usage

```jsx
import React from 'react'

import 'tourguide/dist/index.css'
import TourGuide from 'tourguide'
import config from './config'


const App = () => {
  return <TourGuide page="demo"
                    base_api_url={config.base_api_url}
                    api_secret={config.api_secret}
                    system={3}
                    employeeId="0"
                    startbutton={true}
                    endbutton={true}
  />
}

export default App

```

## config.js
Create config.js file in components folder.
```$xslt
/**
 * Configuration file for TourGuide Library
 * @type {string}
 */

// base api url
const base_api_url = <BASE API URL>;
const api_secret = <API SECRET>;
const system_id = <SYSTEM ID>;

let config = {
    "base_api_url":base_api_url,
    "api_secret":api_secret,
    "system_id": system_id
};

export default config;

```

## License

MIT © [masim5722](https://github.com/masim5722)
npm package: @masjed/modern-react-verification-code-input
Description: A modern verification code input
Author: mhdolatabadi
Latest version: 1.2.9

# react-verification-code-input

> 🎉A verification code input

[![NPM](https://img.shields.io/npm/v/react-verification-code-input.svg)](https://www.npmjs.com/package/react-verification-code-input) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

[![NPM](https://nodei.co/npm/react-verification-code-input.png)](https://nodei.co/npm/react-verification-code-input/)

## Live demo

- [Demo](https://suweya.github.io/react-verification-code-input/)

## Install

```bash
npm install --save react-verification-code-input
```

## Usage

```jsx
import React, { Component } from 'react';

import ReactCodeInput from 'react-verification-code-input';

class Example extends Component {
  render() {
    return <ReactCodeInput />;
  }
}
```

## PropTypes

|     Key     |  Type  |              Desc               |
| :---------: | :----: | :-----------------------------: |
|    type     |  text  |      one of number or text      |
|   fields    | number |     The count of characters     |
|  onChange   |  func  |   Trigger on character change   |
| onComplete  |  func  | Trigger on all character inputs |
| fieldWidth  | number |           input width           |
| fieldHeight | number |          input height           |
|  autoFocus  |  bool  | auto focus first input on init  |
|    title    | string |        code input title         |
|   loading   |  bool  |        show loading flag        |
|  className  | string |           class name            |
|   values    | array  |         default values          |
| placeholder | array  |        input placeholder        |

## License

MIT © [suweya](https://github.com/suweya)
npm package: @mask91/yu-ui
Description: 小程序自定义组件开发模板：
Author: yu
Latest version: 1.0.1

# miniprogram-custom-component

小程序自定义组件开发模板：

* 支持使用 less 语法编写 wxss 文件
* 使用 webpack 构建 js
* 支持自定义组件单元测试
* 支持 eslint
* 支持多入口构建

## 使用

* 使用[命令行工具](https://github.com/wechat-miniprogram/miniprogram-cli)进行初始化
* 直接从 github 上 clone 下来

## 开发

1. 安装依赖：

```
npm install
```

2. 执行命令：

```
npm run dev
```

默认会在包根目录下生成 miniprogram\_dev 目录，src 中的源代码会被构建并生成到 miniprogram\_dev/components 目录下。如果需要监听文件变化动态构建，则可以执行命令：

```
npm run watch
```

> ps: 如果 minirpogram\_dev 目录下已存在小程序 demo，执行`npm run dev`则不会再将 tools 下的 demo 拷贝到此目录下。而执行`npm run watch`则会监听 tools 目录下的 demo 变动并进行拷贝。

3. 生成的 miniprogram\_dev 目录是一个小程序项目目录，以此目录作为小程序项目目录在开发者工具中打开即可查看自定义组件被使用的效果。

4. 进阶：

* 如果有额外的构建需求，可自行修改 tools 目录中的构建脚本。
* 内置支持 webpack、less 语法、sourcemap 等功能，默认关闭。如若需要可以自行修改 tools/config.js 配置文件中相关配置。
* 内置支持多入口构建，如若需要可自行调整 tools/config.js 配置文件的 entry 字段。
* 默认开启 eslint，可自行调整规则或在 tools/config.js 中注释掉 eslint-loader 行来关闭此功能。

## 发布

> ps: 发布前得确保已经执行构建，小程序 npm 包只有构建出来的目录是真正被使用到的。

1. 如果还没有 npm 帐号，可以到[ npm 官网](https://www.npmjs.com/)注册一个 npm 帐号。
2. 在本地登录 npm 帐号，在本地执行：

```
npm adduser
```

或者

```
npm login
```

3. 在已完成编写的 npm 包根目录下执行：

```
npm publish
```

到此，npm 包就成功发布到 npm 平台了。

> PS：一些开发者在开发过程中可能修改过 npm 的源，所以当进行登录或发布时需要注意要将源切回 npm 的源。

## 目录结构

以下为推荐使用的目录结构，如果有必要开发者也可以自行做一些调整:

```
|--miniprogram_dev // 开发环境构建目录
|--miniprogram_dist // 生产环境构建目录
|--src // 源码
|   |--components // 通用自定义组件
|   |--images // 图片资源
|   |
|   |--xxx.js/xxx.wxml/xxx.json/xxx.wxss // 暴露的 js 模块/自定义组件入口文件
|
|--test // 测试用例
|--tools // 构建相关代码
|   |--demo // demo 小程序目录，开发环境下会被拷贝生成到 miniprogram_dev 目录中
|   |--config.js // 构建相关配置文件
|
|--gulpfile.js
```

> PS：对外暴露的 js 模块/自定义组件请放在 src 目录下，不宜放置在过深的目录。另外新增的暴露模块需要在 tools/config.js 的 entry 字段中补充，不然不会进行构建。

## 测试

* 执行测试用例：

```
npm run test
```

* 执行测试用例并进入 node inspect 调试：

```
npm run test-debug
```

* 检测覆盖率：

```
npm run coverage
```

测试用例放在 test 目录下，使用 **miniprogram-simulate** 工具集进行测试，[点击此处查看](https://github.com/wechat-miniprogram/miniprogram-simulate/blob/master/README.md)使用方法。在测试中可能需要变更或调整工具集中的一些方法，可在 test/utils 下自行实现。

## 其他命令

* 清空 miniprogram_dist 目录：

```
npm run clean
```

* 清空 miniprogam_dev 目录：

```
npm run clean-dev
```
npm package: @maskin/core
Description: Easy to use string to string data masking
Latest version: 0.2.0

# Maskin core

Core module of the [maskin](https://github.com/imbrn/maskin) library.
This module provides an API for data masking operations in programming level.

```javascript
import Maskin from "@maskin/core";

const mask = Maskin("##-xx");

mask("12-ab"); // 12-ab
mask("12ab"); // 12-ab
mask("1234"); // 12
mask("12-"); // 12
mask("1a2b3c4d"); // 12cd
```

## Masking classes

- **Number (#)**

  Use the symbol (#) to indicate that you expect a number for the character in
  the input.

  _Ex:_

  ```javascript
  const mask = Maskin("## ##");
  mask("12 34"); // "12 34"
  mask("12abc"); // "12"
  ```

- **String (x, X, i)**

  To indicate that you want a string character, use the symbols _x_, _X_, or
  _i_, for lowercase character, uppercase and insensitive case, respectively.

  _Ex:_

  ```javascript
  const mask = Maskin("xX ii");
  mask("aB cD"); // aB cD
  mask("aB Cd"); // aB Cd
  ```

- **Regular expression**

  You can use regular expression to define what kind of characters you expect in
  your pattern. _Keep in mind that this kind of feature is available only if you
  define your pattern as an array._

  _Ex:_

  ```javascript
  const mask = Maskin([/[a-z]/, "-", /[0-9]/]);
  mask("a-0"); // a-0
  mask("b3"); // b-3
  ```

  > Note that each item of the pattern array corresponds to only one character
  > when the masking is performed.

- **Unclassified masking**

  You can define an unclassified character as part of your masking pattern. An
  unclassified character is matched only with itself, and it's not included as
  part of the raw version of the masking result.

  _Ex:_

  ```javascript
  // The dot (.) and the dash (-) characters are unclassified characters.
  const mask = Maskin("#.#-#");
  mask("1.2-3"); // 1.2-3
  mask("123"); // 1.2-3
  ```

## License

[MIT License](https://opensource.org/licenses/MIT)
npm package: @maskin/react
Description: Easy to use masking for React
Latest version: 0.2.0

# Maskin react

[Maskin](https://github.com/imbrn/maskin) module for working with React
applications. It provides useful stuff like masking components for you to use
within your React projects.

## Installing

```sh
npm i -S @maskin/react

#or

yarn add @maskin/react
```

## The `Mask` component

The `Mask` component is a higher-order component that uses the [_children render
pattern_](https://reactjs.org/docs/render-props.html#using-props-other-than-render)
to keep logic into the component but it delegates the responsibility of
rendering to the children.

_Example:_

```javascript
import { Mask } from "@maskin/react";
```

```jsx
<Mask pattern="###-xxx">
  {({ value, handleChange }) => (
    <input type="text" value={value} onChange={handleChange} />
  )}
</Mask>
```

## The `Input` component

The `Input` component is a useful component for quick usage of masking.

_Example:_

```javascript
import { Input } from "@maskin/react";
```

```jsx
<Input mask="xxx.xxx-##" />
```

## License

[MIT License](https://opensource.org/licenses/MIT)