open-index/open-npm huggingface dataset:
npm package: @kcod/render-media-file
Description: This is a React component that can render multi media files on  a browser
Author: kcod
Latest version: 0.3.13

# Notice
There are trouble in making a bundling on Webpack with React Hooks. So I change this as a class component.
Next time I will try to insert rich control options such as tag colors and React-player controls. 

# Supporting File Types
pdf, mp4, mp3, jpg, jpeg, gif, png

# Installation
React components is available as an npm package.

```bash
$ npm i @kcod/render-media-file
```

# ⌨️ Usage
Here is a quick example to get you started, it's all you need:

```js
import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import RenderMedia from '@kcod/render-media-file';

class App extends React.Component { 
  render() {
    return (
      <RenderMedia 
        fileInfo={{
          src:"https://user-images.com/sample.gif", 
          fileType:"image/gif"}} />
          // if you want to test pdf file, you can see CORS policy. So install Chrome extention program such 'Allow CORS'
          //src:"http://www.orimi.com/pdf-test.pdf",
          //src:"https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", 
          //fileType:"application/pdf"}} />
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
```

# Demo result
![ezgif com-gif-maker](https://user-images.githubusercontent.com/24896007/69593100-8a710900-103b-11ea-8f89-12feea8bec3a.gif)


# User Guide
### Props
|Prop name | Description| Default Value | Example Values |
|----------|------------|---------------|----------------|
|fileInfo  | only props on this component and this has two atrributes, <br>one is `'src'` and the other is `'fileType'`. <br>src is the remote location addresses. <br>fileType is [MIME type](https://en.wikipedia.org/wiki/Media_type) | n/a | <ul><li>fileInfo={{ src:`"http://example.com/sample.jpg"`, <br> fileType:`"image/png"`}}</li>|
npm package: @kcodev/react-native-calendar
Description: React Native basic calendar module
Author: Juan Martin Huerta Hernandez
Latest version: 1.0.1

# react-native-calendar

React native simple and customizable calendar.



## Features

- Flexible style.
- Plain simple and flexible API
- Listeners for actions



## Setup

`npm install --save @kcodev/react-native-calendar`



## Usage

```javascript
import React, { Component } from 'react';
import { View } from 'react-native';
import Calendar from '@kcodev/react-native-calendar';

class App extends Component {
  render() {
    return (
      <View>
        <Calendar />
      </View>
    );
  }
}

export default App;
```



## Available props

| Name | Type| Default | Description |
| --- | --- | --- | --- |
| dateFormat | string | MMMM DD[,] YYYY | - Default date to show on calendar. |
| locale | string | es | - Locale of date on header. Use moment to manage dates, use locales soported by moment |
| minDate | any | null | - Minimum date to show on the calendar, the days before this, are disabled. |
| events | object | {} | - Events to display on calendar. More details on Documentation. |
| staticCalendar | bool | false | - Disable click of calendar days and make it static |
| weekDaysLabels | array | ['Dom.', 'Lun.', 'Mar.', 'Mié.', 'Jue.', 'Vie.', 'Sáb.'] | - Labels of days showed on Calendar Header |
| onPressDay | function | ()=>{} | - Callback when press on day. Return day and events if it exist. |
|eventsView  | element | null | - You can pass and element to render custom event indicator on calendar. More details in Documentation. |
| headerStyle | object | Object[Object] | - You can pass custom style to header. More details in Documentation. |
| dayStyle | object | Object[Object] | - You can pass custom style to day render. More details in Documentation. |



## Documentation
This component is a basic calendar component, it can be used to get a day selected and render events. 

##### Events

To render events, you need to pass a custom object. The required structure of object events is as follows.

```json
{
  "2020-01-24": [
    {
      "id": "1",
        "date": "2020-01-24",
        "color": "#654321"
    },
    {
      "id": "2",
        "date": "2020-01-24",
        "color": "#654541"
    }
  ],
  "2020-01-28": [
    {
      "id": "1",
        "date": "2020-01-28",
        "color": "#654321"
    }
  ]
}
```

The calendar highlights the day of the event using the color passed in the data object.

![Calendar Events](img/calendar-events.jpg)
npm package: @kcodev/react-native-progress-bar
Description: React Native progressbar module
Author: Juan Martin Huerta Hernandez
Latest version: 1.0.1

# react-native-progress-bar

React native Simple, customizable and animated progress bar for React Native

## Features

- Flexible style
- Plain simple and flexible API
- Listeners for actions
## Setup

`npm install --save @kcodev/react-native-progress-bar`

## Usage

```javascript
import React, { Component } from 'react';
import { View } from 'react-native';

import ProgressBar from '@kcodev/react-native-progress-bar';

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={{ flexDirection: "row", flex: 1 }}>
        <View style={{ flex: 1 }}>
          <ProgressBar
            value={70}
            maxValue={100}
            backgroundColorOnComplete="#123123"
            backgroundColor="#987987"
          />
        </View>
      </View>
    );
  }
}

export default App;
```



## Available props

| Name | Type| Default | Description |
| --- | --- | --- | --- |
| value | number | 0 | Progress value |
| maxValue | number | 500 | Max percentage bar can have |
| barEasing | string | 'linear' | Easing animation type(bounce, cubic, ease, sin, linear, quad) |
| height | number | 16 | Height of bar |
| backgroundColor | string | #148cF0 | Color that will complete the bar |
| borderWidth | number | 1 | Style prop |
| borderColor | string | '#148cF0' | Style prop |
| borderRadius | number | 8 | Style prop |
| onComplete | function | null | Callback after bar reach the max value prop |
npm package: @kcol/common-tools
Description: 通过 window.print() 导出 PDF
Latest version: 0.0.3

# @kcol/common-tools

## exportToPdf 功能

通过 window.print() 导出 PDF

### 特性

- 支持超出一页自动分页、且分页也会带上logo
- 自动复制 `<canvas>` 绘图内容及表单输入值
- 支持自定义页边距、Logo 尺寸、分页类名等

### 安装

```bash
npm i @kcol/common-tools
import {exportToPdf} from '@kcol/common-tools'
exportToPdf({
    templateRef: '',
    logoUrl: '',
    pageBreakClass: 'page_break',
    logoWidth: '25mm',
    pageMargin: '0 8mm 0',
})
```

### 参数

```typescript
export interface ExportOptions {
  templateRef: HTMLElement; // 模板引用，直接将最外层的元素ref传入即可
  logoUrl?: string; // logo 地址
  pageBreakClass?: string; // 分页类名,可设置分页的类名,默认值为'page_break'，如果模板中需要分页,则在需要分页的位置添加该class即可
  logoWidth?: string; // 指定宽度，根据宽度自适应高度
  pageMargin?: string; // 页面边距，建议设置上下边距为0，这样可以使打印弹窗框默认关闭隐藏页眉页脚选项
}
```
npm package: @kcp/channels-gateway
Description: Klasa Channels Gateway: a plugin to add per-channel settings gateway
Author: KlasaCommunityPlugins
Latest version: 1.0.1

<div>
	<br/>
	<p>
	  <a href="https://www.npmjs.com/package/@kcp/channels-gateway"><img src="https://img.shields.io/npm/v/@kcp/channels-gateway.svg?maxAge=3600" alt="NPM version" /></a>
		<a href="https://www.npmjs.com/package/@kcp/channels-gateway"><img src="https://img.shields.io/npm/dt/@kcp/channels-gateway.svg?maxAge=3600" alt="NPM downloads" /></a>
		<a href="https://packagephobia.now.sh/result?p=@kcp/channels-gateway"><img src="https://packagephobia.now.sh/badge?p=@kcp/channels-gateway" alt="Install Size"></a>
    <a href="https://dev.azure.com/klasacommunityplugins/Plugins/_build/latest?definitionId=8&branchName=master"><img src="https://dev.azure.com/klasacommunityplugins/Plugins/_apis/build/status/Channel%20Gateways?branchName=master" alt="Build Status"></a>
	</p>
	<p>
    <a href="https://nodei.co/npm/@kcp/channels-gateway"><img src="https://nodei.co/npm/@kcp/channels-gateway.png?downloads=true&stars=true" alt="NPM info"></a>
  </p>
</div>

# Channel Gateways

A simple Klasa plugin which adds settings to all your channels

## How To Use

1. Install the plugin.

```bash
npm i @kcp/channels-gateway

# If you use yarn
yarn add @kcp/channels-gateway
```

1. Use `@kcp/channels-gateway` in your client.

```js
const { Client } = require("klasa");
Client.use(require("@kcp/channels-gateway"));

new Client({ channelGateways: { text: true, category: false } }).login("Your Beautiful Token");
```

If you use TypeScript

```ts
import { Client } from 'klasa';
import { Client as ChannelsGatewayClient } from '@kcp/channels-gateway';

Client.use(ChannelsGatewayClient);

new Client({ channelGateways: { text: true, category: false } }).login("Your Beautiful Token");
```

1. ???... Enjoy!

## Tips

- By default, all gateways are enabled. If you want to disable any of them, make sure you specify the client option
- You can disable and enable gateways at any point in time with 0 data loss

## License

This project is under the [MIT](https://github.com/KlasaCommunityPlugins/channels-gateway/blob/master/LICENSE) license.
npm package: @kcp/functions
Description: A basic plugin which adds reloadable functions to Klasa
Author: KlasaCommunityPlugins
Latest version: 1.0.0

<div>
	<br/>
	<p>
	    <a href="https://www.npmjs.com/package/@kcp/functions"><img src="https://img.shields.io/npm/v/@kcp/functions.svg?maxAge=3600" alt="NPM version" /></a>
		<a href="https://www.npmjs.com/package/@kcp/functions"><img src="https://img.shields.io/npm/dt/@kcp/functions.svg?maxAge=3600" alt="NPM downloads" /></a>
		<a href="https://packagephobia.now.sh/result?p=@kcp/functions"><img src="https://packagephobia.now.sh/badge?p=@kcp/functions" alt="Install Size"></a>
        <a href="https://dev.azure.com/klasacommunityplugins/Plugins/_build/latest?definitionId=1&branchName=master"><img src="https://dev.azure.com/klasacommunityplugins/Plugins/_apis/build/status/Functions?branchName=master" alt="Build Status"></a>
	</p>
	<p>
    <a href="https://nodei.co/npm/@kcp/functions"><img src="https://nodei.co/npm/@kcp/functions.png?downloads=true&stars=true" alt="NPM info"></a>
  </p>
</div>

# Functions

A simple Klasa plugin which adds reloadable functions to your Klasa Bot

## How To Use

1. Install the plugin.

```bash
npm i @kcp/functions

# If you use yarn
yarn add @kcp/functions
```

1. Use `@kcp/functions` in your client.

```js
const { Client } = require("klasa");
Client.use(require("@kcp/functions"));

new Client({ aliasFunctions: { returnMethod: "run", prefix: "funcs", enabled: true } }).login("Your Beautiful Token");
```

If you use TypeScript

```ts
import { Client } from 'klasa';
import { Client as FunctionsClient } from '@kcp/functions';

Client.use(FunctionsClient);

new Client({ aliasFunctions: { returnMethod: "run", prefix: "funcs", enabled: true } }).login("Your Beautiful Token");
```

1. Create a new `function` in your `functions` folder with the name you want to access later, for example `test.js` or `test.ts`.

```js
const { Function } = require("@kcp/functions");

module.exports = class extends Function {
    run() {
        // Your Code Here
    }
}
```

1. Use these functions in your bot.

```js
this.client.funcs.test();
```

1. ???... Enjoy!

## Tips

- To allow multiple functions in a file so you can do something like `this.client.funcs.utils.toTitleCase(string)` instead of using 1 file per function remove the `returnMethod`.

## License

This project is under the [MIT](https://github.com/KlasaCommunityPlugins/functions/blob/master/LICENSE) license.
npm package: @kcp/no-mention-spam
Description: A klasa plugin to seamlessly replicate no-mention-spam behavior in Klasa bots
Author: KlasaCommunityPlugins
Latest version: 1.0.1

<div>
	<br/>
	<p>
	    <a href="https://www.npmjs.com/package/@kcp/no-mention-spam"><img src="https://img.shields.io/npm/v/@kcp/no-mention-spam.svg?maxAge=3600" alt="NPM version" /></a>
		<a href="https://www.npmjs.com/package/@kcp/no-mention-spam"><img src="https://img.shields.io/npm/dt/@kcp/no-mention-spam.svg?maxAge=3600" alt="NPM downloads" /></a>
		<a href="https://packagephobia.now.sh/result?p=@kcp/no-mention-spam"><img src="https://packagephobia.now.sh/badge?p=@kcp/no-mention-spam" alt="Install Size"></a>
        <a href="https://dev.azure.com/klasacommunityplugins/Plugins/_build/latest?definitionId=4&branchName=master"><img src="https://dev.azure.com/klasacommunityplugins/Plugins/_apis/build/status/No%20Mention%20Spam?branchName=master" alt="Build Status"></a>
	</p>
	<p>
    <a href="https://nodei.co/npm/@kcp/no-mention-spam"><img src="https://nodei.co/npm/@kcp/no-mention-spam.png?downloads=true&stars=true" alt="NPM info"></a>
  </p>
</div>

# No Mention Spam

A Klasa plugin to seamlessly replicate no-mention-spam behavior in Klasa bots

## How To Use

1. Install the plugin.

```bash
npm i @kcp/no-mention-spam

# If you use yarn
yarn add @kcp/no-mention-spam
```

1. Use `@kcp/no-mention-spam` in your client.

```js
const { Client } = require("klasa");
Client.use(require("@kcp/no-mention-spam"));
```

If you use TypeScript

```ts
import { Client } from 'klasa';
import { Client as NMSClient } from '@kcp/no-mention-spam';

Client.use(NMSClient);
```

1. ???... Enjoy!

## License

This project is under the [MIT](https://github.com/KlasaCommunityPlugins/no-mention-spam/blob/master/LICENSE) license.
npm package: @kcp/raw-events
Description: A simple Raw Event Plugin that adds a simpler way to tap into raw events using klasa
Author: KlasaCommunityPlugins
Latest version: 1.0.1
Deprecated: As of the latest discord.js version, you can do this with raw Klasa by setting the emitter to 'ws' in an event handler

<div>
	<br/>
	<p>
	    <a href="https://www.npmjs.com/package/@kcp/raw-events"><img src="https://img.shields.io/npm/v/@kcp/raw-events.svg?maxAge=3600" alt="NPM version" /></a>
		<a href="https://www.npmjs.com/package/@kcp/raw-events"><img src="https://img.shields.io/npm/dt/@kcp/raw-events.svg?maxAge=3600" alt="NPM downloads" /></a>
		<a href="https://packagephobia.now.sh/result?p=@kcp/raw-events"><img src="https://packagephobia.now.sh/badge?p=@kcp/raw-events" alt="Install Size"></a>
        <a href="https://dev.azure.com/klasacommunityplugins/Plugins/_build/latest?definitionId=3&branchName=master"><img src="https://dev.azure.com/klasacommunityplugins/Plugins/_apis/build/status/Raw%20Events?branchName=master" alt="Build Status"></a>
	</p>
	<p>
    <a href="https://nodei.co/npm/@kcp/raw-events"><img src="https://nodei.co/npm/@kcp/raw-events.png?downloads=true&stars=true" alt="NPM info"></a>
  </p>
</div>

# Raw Events

A simple Klasa plugin which allows you to handle raw events with ease.

## How To Use

1. Install the plugin.

```bash
npm i @kcp/raw-events

# If you use yarn
yarn add @kcp/raw-events
```

1. Use `@kcp/raw-events` in your client.

```js
const { Client } = require("klasa");
Client.use(require("@kcp/raw-events"));
```

If you use TypeScript

```ts
import { Client } from 'klasa';
import { Client as RawEventsClient } from '@kcp/raw-events';

Client.use(RawEventsClient);
```

1. Create a new `raw-event` in your `rawEvents` folder.

```js
const { RawEvent } = require("klasa-raw-events");

module.exports = class extends RawEvent {
    run(data) {
        // Your Code Here
    }
}
```

1. ???... Enjoy!

## License

This project is under the [MIT](https://github.com/KlasaCommunityPlugins/raw-events/blob/master/LICENSE) license.
npm package: @kcp/tags
Description: A Klasa plugin to add tag functionality to bots
Author: bdistin
Latest version: 1.0.0

<div>
	<br/>
	<p>
	  <a href="https://www.npmjs.com/package/@kcp/tags"><img src="https://img.shields.io/npm/v/@kcp/tags.svg?maxAge=3600" alt="NPM version" /></a>
		<a href="https://www.npmjs.com/package/@kcp/tags"><img src="https://img.shields.io/npm/dt/@kcp/tags.svg?maxAge=3600" alt="NPM downloads" /></a>
		<a href="https://packagephobia.now.sh/result?p=@kcp/tags"><img src="https://packagephobia.now.sh/badge?p=@kcp/tags" alt="Install Size"></a>
    <a href="https://dev.azure.com/klasacommunityplugins/Plugins/_build/latest?definitionId=6&branchName=master"><img src="https://dev.azure.com/klasacommunityplugins/Plugins/_apis/build/status/Tags?branchName=master" alt="Build Status"></a>
	</p>
	<p>
    <a href="https://nodei.co/npm/@kcp/tags"><img src="https://nodei.co/npm/@kcp/tags.png?downloads=true&stars=true" alt="NPM info"></a>
  </p>
</div>

# Tags

A Klasa plugin to add tag functionality to bots

## How To Use

1. Install the plugin.

```bash
npm i @kcp/tags

# If you use yarn
yarn add @kcp/tags
```

1. Use `@kcp/tags` in your client.

```js
const { Client } = require("klasa");
Client.use(require("@kcp/tags"));
```

If you use TypeScript

```ts
import { Client } from 'klasa';
import { Client as TagsClient } from '@kcp/tags';

Client.use(TagsClient);
```

1. ???... Enjoy!

## License

This project is under the [MIT](https://github.com/KlasaCommunityPlugins/tags/blob/master/LICENSE) license.
npm package: @kcram-solutions/logger
Description: Logger simple para node y el navegador
Author: Marck C. Guzmán
Latest version: 0.2.3

# Logger Simple para la organización [![Verified on Openbase](https://badges.openbase.com/js/verified/@kcram-solutions/logger.svg?style=openbase&token=gaASWyYL+oAwrnSZ6ZwrrkZPO8p1acapq1mOp4apJVs=)](https://openbase.com/js/@kcram-solutions/logger?utm_source=embedded&amp;utm_medium=badge&amp;utm_campaign=rate-badge) 

[![Socket Badge](https://socket.dev/api/badge/npm/package/@kcram-solutions/logger)](https://socket.dev/npm/package/@kcram-solutions/logger) [![](https://data.jsdelivr.com/v1/package/npm/@kcram-solutions/logger/badge)](https://www.jsdelivr.com/package/npm/@kcram-solutions/logger)
 ![NPM](https://img.shields.io/npm/l/@kcram-solutions/logger?style=flat-square)
 ![npm](https://img.shields.io/npm/v/@kcram-solutions/logger?style=flat-square)

Simple logger para los proyecto de node.

Instalación:

**NPM**
```
npm install @kcram-solutions/logger
```
**Navegador**


```html
<script type="module">
import {Logger} from 'https://esm.run/@kcram-solutions/logger';

let logger = new Logger('App');
</script>
```
```javascript
// importamos la librería
const { Logger, LEVEL } = require('@kcram-solutions/logger')

const logger = new Logger(?name);

Logger.level = LEVEL.DEBUG // INFO | LOG | WARN | ERROR | CRITICAL

logger.debug('Hola from debug')
logger.info('Hola from info')
logger.log('Hola from log')
logger.warn('Hola from warn')
logger.error('Hola from error')
logger.critical('Hola from critical')
```

## Todo:
- [x] Formato a los número en fechas y horas
- [ ] Agregar color en la salida estandar
- [ ] Separar archivos para node y navegador
npm package: @kcrommett/oc-web
Description: OC Web - Self-hosted web interface for OpenCode (namespace reservation - full release coming soon)
Author: Kyle Crommett
Latest version: 0.0.1

# OC Web

**Note:** This is a namespace reservation package. The full `@kcrommett/oc-web` package will be released soon.

OC Web is a self-hosted web interface for the OpenCode AI assistant, rebranded from `opencode-web`.

For now, please use:
```bash
bunx opencode-web@latest
```

Stay tuned for the full `@kcrommett/oc-web` release!

## Links
- GitHub: https://github.com/kcrommett/opencode-web
- Issues: https://github.com/kcrommett/opencode-web/issues
npm package: @kcscope/simple-ai-chatbot
Description: React Simple Chatbot
Latest version: 0.6.7

# Simple AI Chatbot

<a href="https://travis-ci.org/LucasBassetti/react-simple-chatbot"><img src="https://travis-ci.org/LucasBassetti/react-simple-chatbot.svg?branch=master" alt="Travis CI" /></a> <a href="https://badge.fury.io/js/react-simple-chatbot"><img src="https://badge.fury.io/js/react-simple-chatbot.svg" alt="npm version"></a>
  <img src="https://codecov.io/gh/LucasBassetti/react-simple-chatbot/branch/master/graph/badge.svg" alt="Codecov" />
</a> <a href="https://beerpay.io/LucasBassetti/react-simple-chatbot"><img src="https://beerpay.io/LucasBassetti/react-simple-chatbot/badge.svg?style=flat" /></a>

A simple chatbot component to create conversation chats

<img src="https://cloud.githubusercontent.com/assets/1014326/25716667/2d4bb4c4-30d6-11e7-996e-30c8fb316361.gif" height="400" />

## Getting Start

```bash
npm install @kcscope/simple-ai-chatbot --save
```

## Usage

There are several examples on the [website](http://lucasbassetti.com.br/react-simple-chatbot). Here is the first one to get you started:

``` javascript
import ChatBot from '@kcscope/simple-ai-chatbot';

ReactDOM.render(
  <div>
    <ChatBot token={TOKEN} />
  </div>,
  document.getElementById('root')
);
```


### Remark
A fork of a [react-simple-chatbot](http://lucasbassetti.com.br/react-simple-chatbot), for educational purpose.