open-index/open-npm huggingface dataset:
npm package: @monade/json-api-parser
Description: A parser for JSON:API format that maps data to models using decorators, inspired by retrofit.
Author: Monade
Latest version: 1.0.2

![Tests](https://github.com/monade/json-api-parser/actions/workflows/test.yml/badge.svg)

# @monade/json-api-parser

A parser for [JSON:API](https://jsonapi.org/) format that maps data to models using decorators, inspired by retrofit.

## Installation

```bash
  npm install @monade/json-api-parser
```

## Example usage

```typescript
import { Attr, JSONAPI, Model, Rel } from "@monade/json-api-parser";

export const DateParser = (data: any) => new Date(data);

@JSONAPI("posts")
export class Post extends Model {
  @Attr() name!: string;
  @Attr("description") content!: string;
  @Attr("created_at", { parser: DateParser }) createdAt!: Date;
  @Attr("active", { default: true }) enabled!: boolean;
  @Attr() missing!: boolean;

  @Rel("user") author!: User;
  @Rel() reviewer!: User | null;
}

@JSONAPI("users")
class User extends Model {
  @Attr() firstName!: string;
  @Attr() lastName!: string;
  @Attr("created_at", { parser: DateParser }) createdAt!: Date;

  @Rel() favouritePost!: Post;
}
```

## TODO
* Documentation
* Edge case tests
npm package: @monade/vue-components
Description: A set of utility components from monade.
Author: monade
Latest version: 0.1.2

# @monade/vue-components

A collection of vue components by @monade

## List of components
- [DataTable](tree/master/src/DataTable.md)
- [Select2](tree/master/src/Select2.md)
- [Paginator](tree/master/src/Paginator.md)

## TODO:
- Documentation
- d.ts files
- Tests
npm package: @monadex/sdk
Description: 🛠 An SDK for building applications on top of Monadex.
Author: Monadex labs
Latest version: 0.2.25

# Monadex SDK
This repo contains tools for developing with [Monadex](https://monadex.exchange).

## Running
This project uses standard npm and yarn workflows.

Install dependencies

```sh
yarn
```

Compile
```sh
yarn build
```

## Installation
This project is available as an npm package. Add to your project with `npm install @Monadex/sdk`

## Attribution
This code was adapted from this Uniswap repo: [uniswap-sdk](https://github.com/Uniswap/sdk).
npm package: @monadigital/react-native-bottom-tabs
Description: Native Bottom Tabs for React Native
Author: Oskar Kwasniewski
Latest version: 0.9.0

<h1 align="center">
  React Native Bottom Tabs
</h1>

<p align="center">
  <strong>Bottom Tabs that use native platform primitives.</strong><br>
</p>

<div align="center">

[![mit licence](https://img.shields.io/dub/l/vibe-d.svg?style=for-the-badge)](https://github.com/okwasniewski/react-native-bottom-tabs/blob/main/LICENSE)
[![npm version](https://img.shields.io/npm/v/react-native-bottom-tabs?style=for-the-badge)](https://www.npmjs.org/package/react-native-bottom-tabs)
[![npm downloads](https://img.shields.io/npm/dt/react-native-bottom-tabs.svg?style=for-the-badge)](https://www.npmjs.org/package/react-native-bottom-tabs)
[![npm downloads](https://img.shields.io/npm/dm/react-native-bottom-tabs.svg?style=for-the-badge)](https://www.npmjs.org/package/react-native-bottom-tabs)

</div>

## Documentation

The full documentation can be found on our [website](https://okwasniewski.github.io/react-native-bottom-tabs/).

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with ❤️ and [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
npm package: @monado/scripts
Description: react应用零配置构建工具
Author: wen
Latest version: 1.0.9

# @monado/scripts

基于 webpack 的用于构建 react 应用的打包工具，支持 typescript、mdx、tailwindcss、postcss 等常用库

## usage

```shell
# 安装
npm install -D @monado/scripts

# 启动开发环境
npx monado-scripts start

# 启动打包
npx monado-scripts build
```

## 打包入口

monado-scripts 会从项目文件夹下的`src`目录中按照优先级读取以下文件之一作为打包入口

- index.tsx
- index.ts
- main.tsx
- main.ts
- index.jsx
- index.js
- main.jsx
- main.js

## 配置文件

在项目文件夹下创建 monado.config.json 作为配置文件，目前支持的配置如下

```json
{
	"publicPath": "/",
	"devServer": {
		"port": 4000,
		"proxy": {
			"/api": "http://localhost:9000"
		}
	},
	"alias": {
		"@": "src"
	},
	"plugins": {
		"bundleAnalyzer": false
	}
}
```

### 启用 mdx

安装@mdx-js/react 后 monado-scirpts 自动启用 mdx-loader

```shell
npm install @mdx-js/react
```

### 启用 scss

安装 sass 后 monado-scirpts 自动启用 sass-loader,并支持 css module

```shell
npm install sass
```

### 开发代理配置

@monado/scripts 的配置文件的开发服务代理使用与 webpack 开发代理一样的规则

```json
{
	"devServer": {
		"proxy": {
			"/api": {
				"target": "http://localhost:8000",
				"pathRewrite": {
					"^/api": ""
				}
			}
		}
	}
}
```

### 别名配置

在 monado.config.json 的 alias 字段下配置别名
以下为将`@`作为项目根目录下`src`目录别名的配置

```json
{
	"alias": {
		"@": "src"
	}
}
```
npm package: @monadstech/gatsby-starterx
Description: Booster for gatsby starter app
Author: Pankaj Vaghela
Latest version: 0.0.7

# gatsby-starterx
A CLI to powerup gatsby starter and manage plugins


> `Work In Progress`


When finished one run following command to start a new gatsby project with custom starter 

```(bash)
  npx gatsby-starterx
```

----
we are planning to provide integration with following plugins

- contentful 
  - cloudinary app integration

and some common plugins such as
- helmet
- sitemap
- manifest
npm package: @monadstech/react-native-design-system-text
Description: Text Component for React Native Design Systems
Author: Pankaj Vaghela
Latest version: 0.0.1

# react-native-design-system-text

React Native Design System Text Component

### How to use

```ts
//define config
const config: TextConfigType = {
  size: {
    h1: 21,
    h2: 19,
    h3: 16,
    p: 14,
  },
};

// create custom-charged text component
const {CustomText} = createTextSystem(config);

// use it in your components
export const CustomTextExample: FC<{}> = () => {
  return <CustomText size="h1" />;
};
```
npm package: @monadstech/react-native-form
Description: A Form Library for React Native
Author: Pankaj Vaghela
Latest version: 0.0.7

# react-native-form

A Declarative Form Library for React Native.

## Features

- Declarative
- Easy Error Handling
- Simple & Intuitive API
- Independent form Input Components

## Install

```base
yarn add @monadstech/react-native-form
```

```base
npm install @monadstech/react-native-form
```

# Usage

```jsx
import React from 'react';
import {Form, FormItem, FormAction} from '@monadstech/react-native-form';

const FormView = (props) => {
  const formRef = React.useRef();

  return (
    <Form
      name="FormName"
      ref={(form) => (formRef.current = form)}
      onFinish={(values) => {
        console.log('values', values);
      }}
      onFinishFailed={(errors) => {
        console.log('errors', errors);
      }}>
      <FormItem
        name="input1"
        label="Name"
        options={{
          initialValue: 'First Name',
          rules: [
            {
              required: true,
              message: 'Please enter your name!',
            },
          ],
        }}>
        {/* Your Input Component Here, which accepts value and onChange props */}
      </FormItem>
      <FormAction title="Login" />
    </Form>
  );
};
```
npm package: @monadstech/react-native-use-otp-verify
Description: React Native hook wrapper for use-otp-verify
Author: Pankaj Vaghela
Latest version: 1.0.10

# react-native-use-otp-verify

Wrapper Hook for `react-native-otp-verify`

Make yourself familiar with [react-native-otp-verify](https://github.com/faizalshap/react-native-otp-verify#readme) before using this hook .

### Installation

```bash
yarn add react-native-otp-verify @monadstech/react-native-use-otp-verify
```

or

```bash
npm i react-native-otp-verify @monadstech/react-native-use-otp-verify
```

then Follow instruction of [react-native-otp-verify](https://github.com/faizalshap/react-native-otp-verify#readme) first

### Usage

#### Basic Example

```js
import React from 'react';
import {useOtpVerify} from '@monadstech/rn-use-otp-verify';

const OtpConfirm = () => {
  const [otp, setOtp] = React.useState('');
  const [autoDetectedOtp, autoDetectError] =  useOtpVerify() ;

  React.useEffect(() => {
    if (autoDetectedOtp) {
      setOtp(autoDetectedOtp);
    }
  }, [autoDetectedOtp, handleLogin]);

  ...
};

```

---

### OTP Parser

Default `otpParser` checks for following regex : /(\d+)[\s]_is|is[\s]_(\d+)\.?/g

i.e. otp SMS must be one of following formats

- .... OTP is 2098 ....

- .... 2098 is OTP ....

However, you can pass a custom `otpParser` to useOtpVerify hook.

this `otpParser` must accept sms as argument and return otp as string or empty string.

## LICENSE

MIT LICENSE
npm package: @monajs/babel-plugin-react-css-modules
Description: babel-plugin-react-css-modules
Author: yangxi
Latest version: 2.5.0

# babel-plugin-react-css-modules

✨✨ 一款非常实用的 react-css-modules 插件

[![npm](https://img.shields.io/npm/v/@monajs/babel-plugin-react-css-modules.svg?style=flat-square)](https://www.npmjs.com/package/@monajs/babel-plugin-react-css-modules) [![npm](https://img.shields.io/npm/dt/@monajs/babel-plugin-react-css-modules.svg?style=flat-square)](https://www.npmjs.com/package/@monajs/babel-plugin-react-css-modules)

## 背景

[babel插件之react-css-modules](https://github.com/func-star/blog/issues/29)

## 安装

```bash
$ npm i --save-dev @monajs/babel-plugin-react-css-modules
```

## 使用

### 字符串形式
```js
const a2 = (
	<div className='ssss fds ss'>
		<div>{events.on}</div>
	</div>
)
```

### 数组形式
```js
const b1 = (
	<div className={['aaa', 'bbb', 'ccc ddd']}>
		<div>{events.on}</div>
	</div>
)

const b2 = (
	<div className={['aaa', bbb, { 'bbb': this.isShow, ccc: true, 'ddd': false }]}>
		<div>{events.on}</div>
	</div>
)

const b3 = (
	<div className={[this.classname(), { 'fd-ssss-fdfdfd': true }, 'sss-dd-dd']}>
		<div>{events.on}</div>
	</div>
)
```

### json形式
```js
const c1 = (
	<div className={{ 'aaa': true }}>
		<div>{events.on}</div>
	</div>
)

const c2 = (
	<div className={{ 'aaa': true, bbb: events }}>
		<div>{events.on}</div>
	</div>
)

const c3 = (
	<div className={{ 'aaa': true, bbb: this.ctrl.isShow, 'ccc': this.showClassname() }}>
		<div>{events.on}</div>
	</div>
)
```

## 使用注意点
* 插件只会处理 `string` 类型、`array` 类型、`json` 类型的 `CSS Modules` 转换，不会对模版字符串、字符串叠加计算等方式进行转换


## 联系我
> 微信：yx12032331
npm package: @monajs/events
Description: Mona系列 - 事件机制
Author: yangxi
Latest version: 1.1.1

# Events

✨✨ 一款小而全的事件监听产品，满足你的各种体位

[![npm](https://img.shields.io/npm/v/@monajs/events.svg?style=flat-square)](https://www.npmjs.com/package/@monajs/events) [![npm](https://img.shields.io/npm/dt/@monajs/events.svg?style=flat-square)](https://www.npmjs.com/package/@monajs/events)

## 大致介绍

这款轻量版 events 主要实现了事件的监听和消息的分发功能，你可以基于这个方法进行赋能。
> 可以参考 [监听者模式实战应用](https://github.com/func-star/blog/issues/23)

## 使用场景

- 单页面应用页面之间的通信
- 组件之间的相互通信
- 全局事件通信

...

## 相关产品

- [mor-scroll-watcher](https://github.com/func-star/mor-scroll-watcher)
- [mo-react-router](https://github.com/func-star/mo-react-router)
- [mor-mobile](https://github.com/func-star/mor-mobile)
- [mov-mobile](https://github.com/func-star/mov-mobile)

## 安装

```bash
$ npm i --save @monajs/events
```


## 代码演示

```js
import Events from '@monajs/events'

const event = new Events()

event.on('eventName', (data)=>{
	// do something
})

event.emit('eventName' ,{...})
```

## 进一步应用

你也可以继承 `@monajs/events` ，结合自己的业务逻辑来实现更高级的功能

```js
import Events from '@monajs/events'

class Ctrl extends Events {
	...
}

export default new Ctrl

```

## 方法

| 参数 | 说明 | 参数 | 返回值 |
| --- | --- | --- | :-- |
| on | 绑定事件 | 1.事件名，2.监听函数 | - |
| emit | 触发事件 | 1.事件名，2.监听函数传值 | - |
| once | 只监听一次，触发后失效 | 1.事件名，2.监听函数 | - |
| off | 取消监听，若没有传被监听函数，则取消事件名对应的全部监听 | 1.事件名，2.监听函数 | - |

## 联系我
> 微信：yx12032331
npm package: @monajs/list-diff
Description: Mona系列 - List Diff
Author: yangxi
Latest version: 1.2.3

# List Diff（O(N)）

✨✨ 对比两个列表的差异，计算最小编辑距离

[![npm](https://img.shields.io/npm/v/@monajs/list-diff.svg?style=flat-square)](https://www.npmjs.com/package/@monajs/list-diff)
[![npm](https://img.shields.io/npm/dt/@monajs/list-diff.svg?style=flat-square)](https://www.npmjs.com/package/@monajs/list-diff)

## 相关文档

* https://zhuanlan.zhihu.com/p/20346379
* https://github.com/livoras/blog/issues/13

## 安装

```bash
$ npm i --save @monajs/list-diff
```

## 使用

```js
import listDiff from '@monajs/list-diff'

const oldList = [
    { key: '1', name: 'a' },
    { key: '2', name: 'b' },
    { key: '3', name: 'c' },
    { key: '4', name: 'd' }
]
const newList = [
    { key: '2', name: 'b' },
    { key: '5', name: 'e' },
    { key: '6', name: 'f' },
    { key: '1', name: 'a' },
    { key: '7', name: 'g' },
    { key: '4', name: 'd' }
]

const diff = listDiff(oldList, newList, 'key')
console.log(diff.moves)
```

#### output:
```
[{
    type: 'insert',
    originIndex: null,
    currentIndex: 1,
    item: { key: '5', name: 'e' }
}, {
    type: 'insert',
    originIndex: null,
    currentIndex: 2,
    item: { key: '6', name: 'f' }
}, {
    type: 'move',
    originIndex: 0,
    currentIndex: 3,
    item: { key: '1', name: 'a' }
}, {
    type: 'insert',
    originIndex: null,
    currentIndex: 4,
    item: { key: '7', name: 'g' }
}, {
    type: 'remove',
    originIndex: 2,
    currentIndex: null,
    item: { key: '3', name: 'c' }
}]
```

## 联系我
> 微信：yx12032331