open-index/open-npm huggingface dataset:
npm package: @mongchhi/plugin-sdk
Description: > 为了有更好的类型提示，请结合 `@mongchhi/types` 使用。
Latest version: 0.0.4

# Mongchhi 插件 api

> 为了有更好的类型提示，请结合 `@mongchhi/types` 使用。

## onMongChhiSocket

扩展 Socket 响应的 node 端服务，拥有三个参数 `type, payload, send`，主要行为是根据 `type` 识别是否是自己需要响应的事件。

```ts
export interface SocketAction {
  type?: string;
  payload?: any;
  send?: any;
}
```

比如：

```ts
import { IApi } from '@mongchhi/types';

export default (api: IApi) => {
  api.onMongChhiSocket(async ({ type, send }) => {
    switch (type) {
      case 'app-data':
        // 发送 localUmiAppData
        send(
          JSON.stringify({
            type: 'app-data',
            payload: {},
          }),
        );
        break;
    }
  });
};
```

> 存在一个特殊的服务是 `type:'call'`，它用于前端和前端通信使用，所以在定义 ui 服务的时候，请不要使用这个 type。
npm package: @mongchhi/plugin-socket
Description: ## 插件中添加
Latest version: 0.0.4

# mongchhi socket

## 插件中添加

```tsx
import { MongChhiIApi } from '@mongchhi/types';

export default (api: IApi) => {
    api.onMongChhiSocket(({ type, send, payload }) => {
        switch (type) {
            case 'call':
              // 给前端发数据
              send({ type: 'MongChhi serve', data: 'first' });
              break;
            default:
            // Do nothing
        }
    });
};
```
##  前端添加监听

```ts
import { socket } from 'umi';
useEffect(() => {
    return socket.listen((type) => {
        console.log(type);
    });
}, []);
```

## 前端发送消息

```ts
import { socket } from 'umi';
socket.send({type:'call'})
```
npm package: @mongey/serverless-plugin-terraform-remote-state
Description: Inject Terraform outputs into your Serverless config.
Latest version: 0.2.0

# Serverless Terraform Remote State Plugin

Inject Terraform outputs into your Serverless config.

(Currently only compatible with Terraform 0.13+)

## Install:
`yarn add -D @mongey/serverless-plugin-terraform-remote-state`

`npm add --dev @mongey/serverless-plugin-terraform-remote-state`

## Usage
```yaml
service: my-service

custom:
  terraformRemoteState:
    commonInfra:
      backend: s3
      config:
        bucket: my-state-bucket
        key: state/common/tf.state
        region: ap-southeast-2
    myService:
      backend: s3
      config:
        bucket: my-state-bucket
        key: state/my-service/tf.state
        region: ap-southeast-2

provider:
  name: aws
  runtime: nodejs12.x
  apiGateway:
    restApiId: ${terraformRemoteState:commonInfra.outputs.rest_api.id}
    restApiRootResourceId: ${terraformRemoteState:commonInfra.outputs.rest_api.root_resource_id}

functions:
  snsListener:
    handler: src/sns_listener.handler
    events:
      - sns:
          arn: ${terraformRemoteState:myService.outputs.my_sns_topic.arn}
```
npm package: @mongez/huskier
Description: A wrapper for husky to make it easier to use with a nice summary.
Author: hassanzohdy
Latest version: 3.0.0

# Huskier

A simple wrapper for [Husky](https://typicode.github.io/husky) to make it easier to use.

## Installation

```bash
npm install @mongez/huskier --save-dev
```

Using Yarn

```bash
yarn add @mongez/huskier --dev
```

## Usage

You don't need to install husky, it is already installed with this package, so your start is from here, run the following command to initialize husky and add `pre-commit` hook:

```bash
npx huskier-init
```

This will create a `.husky` and adds `pre-commit` file with `npx huskier` command, it will also create a `huskier` key in your `package.json` file, this should be list of commands to run before commit, for example:

```json
{
  "huskier": {
    "pre-commit": []
  }
}
```

You can run whatever command you want, for example using it with prettier and eslint, or any other command you want.

```json
{
  "huskier": {
    "pre-commit": ["prettier --write .", "eslint . --fix"]
  }
}
```

Huskier will also give you some details about executed commands, for example how much time it took to run each command.

ny failed command will will stop executing the rest of the commands, and will show you the error message.

At the end of commands execution, huskier will show you a summary of total executed commands, total time it took to run all commands, and number of success and failed commands.

## Parallel Execution

If you want to execute all commands in parallel, you can use `parallel` option to be `true` in `huskier` key in your `package.json` file.

```json
{
  "huskier": {
    "parallel": true,
    "pre-commit": ["prettier --write .", "eslint . --fix"]
  }
}
```

> parallel option is set to `true` by default.

## Execute series of commands

When `parallel` option is enabled, you could execute multiple commands in `sequence` by grouping them in a nested array.

```json
{
  "huskier": {
    "parallel": true,
    "pre-commit": [["prettier --write .", "eslint . --fix"], "jest"]
  }
}
```

This will execute jest and prettier in same time, once prettier is finished, eslint will start.

> This option works even if `parallel` is set to `false`.

## Existing commands

Any command fails, it will stop the execution of the rest of the commands, and will show you the error message with exit code `1`.

## Committing

Now whenever you commit, husky will run these commands before committing.

## License

This package is released under the [MIT license](https://en.wikipedia.org/wiki/MIT_License).
npm package: @mongez/password
Description: A password hash generator and verifier for Nodejs.
Author: hassanzohdy
Latest version: 1.0.2

# Mongez Password

A Simple Password Hash Generator and Verifier for Node Js

> This package is a wrapper over [bcryptjs](https://www.npmjs.com/package/bcryptjs) as it is being used to generate and verify passwords.

## Installation

`yarn add @mongez/password`

Or

`npm i @mongez/password`

## Generating Password Hash

To generate a password hash, just import the Package and call the `generate` method.

```ts
import Password from '@mongez/password';

// generate a password hash
const hash = await Password.generate('123456');

console.log(hash); // $2a$15$Yw76mQjsULdRb14qtBZ7Y.iMkJNrbewQ4cpX/PPP0nt4wQuUo70Fu
```

Alternatively, you can use the `hash` method.

```ts
import { hash } from '@mongez/password';

// generate a password hash
const hash = hash('123456');

console.log(hash); // $2a$15$Yw76mQjsULdRb14qtBZ7Y.iMkJNrbewQ4cpX/PPP0nt4wQuUo70Fu
```

## Verifying Password

To verify a password, just import the Package and call the `verify` method.

```ts
import Password from '@mongez/password';

// verify a password
const isValid = await Password.verify('123456', '$2a$15$Yw76mQjsULdRb14qtBZ7Y.iMkJNrbewQ4cpX/PPP0nt4wQuUo70Fu'); // true
```

Or you can import directly the `verify` method.

```ts
import { verify } from '@mongez/password';

// verify a password
const isValid = verify('123456', '$2a$15$Yw76mQjsULdRb14qtBZ7Y.iMkJNrbewQ4cpX/PPP0nt4wQuUo70Fu'); // true
```

## Custom Salt

By default the generated password has value of salt equals to `15` but you can change it by passing the `salt` option.

```ts
import Password from '@mongez/password';

// generate a password hash
const hash = await Password.generate('123456', 10);

console.log(hash); // $2a$10$Yw76mQjsULdRb14qtBZ7Y.iMkJNrbewQ4cpX/PPP0nt4wQuUo70Fu
```

Or you can change the default salt value directly using `setDefaultPasswordSalt` method.

```ts
import Password, { setDefaultPasswordSalt } from '@mongez/password';

// set default salt
setDefaultPasswordSalt(10);

// generate a password hash
const hash = await Password.generate('123456'); // will be generated with salt equals to 10
```

## Tests

To run the tests, just run the following command:

`yarn test`

## License

This package is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).
npm package: @mongez/react-components
Description: Beautiful and simple ready React Components for quick production.
Author: hassanzohdy
Latest version: 1.0.9

# React Components

This package has some good and quick react components to be used.

## Installation

```bash
yarn add @mongez/react-components
```

## Not Found Component

This component is used to show a not found page.

```tsx
import { NotFound } from '@mongez/react-components';

<NotFound />
```

It will look like this:

![Not Found Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5llfh3np2th1xu4oowj2.png)

```tsx
import { NotFound } from '@mongez/react-components';
import { setRouterConfigurations } from '@mongez/react-router';

setRouterConfigurations({
    notFound: {
        mode: 'render',
        component: NotFound,
    }
});
```

Now any route that is not found will case a render to the `NotFound` component.

## Progress Bar

This component is used to show a progress bar.

```tsx
import { Progress } from '@mongez/react-components';

<Progress />
```

If you want to control the progress, you can use the `value` prop.

```tsx
import { Progress } from '@mongez/react-components';

<Progress loading value={50} />
```

It looks like this:

![Progress Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99kzuedy4fiezrxgcst4.gif)

To change progress height, you can use the `height` prop.

```tsx
import { Progress } from '@mongez/react-components';

<Progress height={5} />
```

To Change the color of the progress bar, you can use the `color` prop.

```tsx
import { Progress } from '@mongez/react-components';

<Progress loading value={50} color="red" />
```

To change the glow color, you can use the `glowColor` prop.

```tsx
import { Progress } from '@mongez/react-components';

<Progress loading value={50} color="red" glowColor="red" />
```

To change the glow effect height you can use the `glow` prop.

```tsx
import { Progress } from '@mongez/react-components';

<Progress loading value={50} color="red" glowColor="red" glow={25} />
```

Here is all available props:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| **loading** | `boolean` | `true` | If true, the progress will be shown automatically. |
| **value** | `number` | `undefined` | The progress value to be controlled |
| **height** | `number` | `5` | The progress bar height |
| **color** | `string` | `#21a6e9` | The progress bar color |
| **glowColor** | `string` | `#21a6e9` | The progress bar glow color |
| **glow** | `number` | `20` | The progress bar glow height |
| **zIndex** | `number` | `1000` | The progress bar z-index |
npm package: @mongez/react-google-map
Description: Easy Google Map For React.
Author: hassanzohdy
Latest version: 1.0.1

# Google Map

A simple wrapper for Google maps in React.

## Installation

```bash
yarn add @mongez/react-google-map
```

> Package requires react 18 or higher

## Usage

First off, let's set the base configuration for the map. You can do this in your entry file, or in any other place that is executed before the map is used.

```tsx
import { setGoogleMapConfigurations } from '@mongez/react-google-map';

setGoogleMapConfigurations({
    apiKey: "", // required
});
```

All you need to set for basic google map rendering is the `api key`, now you're ready to go, but here are all the available configurations:

```tsx
import { setGoogleMapConfigurations } from '@mongez/react-google-map';
import { Loader } from './Loader';
import { LocationComponent } from './LocationComponent';

setGoogleMapConfigurations({
    apiKey: "", // required
    defaultCenter: {
    lat: 0,
    lng: 0,
    }, // optional
    height: 500, // default to 500
    width: "100%", // default to 100%
    libraries: ["drawing", "geometry", "localContext", "places", "visualization"],
    defaultZoom: 15,
    loadingComponent: Loader,
    locationComponent: LocationComponent,
    currentLocaleCode() {
        return "en";
    },
});
```

Now, let's render the map:

```tsx
import { GoogleMap } from '@mongez/react-google-map';

export function ContactUs() {
    return (
        <GoogleMap center={{
            lat: 31.205753,
            lng: 29.924526,
        }} />
    )
}
```

## Setting Multiple locations

You can set multiple locations on the map by passing an array of locations to the `locations` prop:

```tsx
import { GoogleMap } from '@mongez/react-google-map';

export function ContactUs() {
    return (
        <GoogleMap
            center={{
                lat: 31.205753,
                lng: 29.924526,
            }}
            locations={[
                {
                    lat: 31.205753,
                    lng: 29.924526,
                },
                {
                    lat: 31.205753,
                    lng: 29.924526,
                },
            ]}
        />
    )
}
```

## Rendering Custom Location Component

You can render a custom component for each location by passing a component to the `locationComponent` prop:

```tsx
import { GoogleMap } from '@mongez/react-google-map';
import { LocationComponent } from './LocationComponent';

export function ContactUs() {
    return (
        <GoogleMap
            center={{
                lat: 31.205753,
                lng: 29.924526,
            }}
            locations={[
                {
                    lat: 31.205753,
                    lng: 29.924526,
                },
                {
                    lat: 31.205753,
                    lng: 29.924526,
                },
            ]}
            locationComponent={LocationComponent}
        />
    )
}
```

The component receives a single prop `location` which is the location object.
npm package: @mongez/react-localization
Description: A simple i18n localization handler for React Js and React Native
Author: hassanzohdy
Latest version: 3.2.1

# Mongez React Localization

A converter for [Mongez Localization](https://github.com/hassanzohdy/mongez-localization) to allow passing jsx element to the translator.

## Installation

`npm i @mongez/react-localization`

OR

`yarn add @mongez/react-localization`

## JSX Converter

This converter will allow you to pass jsx elements to the translator.
Just import the converter and use it as a translator.

```tsx
// src/config/localization.ts

import { jsxConverter } from "@mongez/react-localization";
import { setLocalizationConfigurations } from "@mongez/localization";

setLocalizationConfigurations({
  /**
   * Default locale code
   *
   * @default en
   */
  defaultLocaleCode: "ar",
  /**
   * Fall back locale code
   *
   * @default en
   */
  fallback: "en",
  /**
   * Converter function to convert the placeholder value to jsx element
   */
  converter: jsxConverter,
});
```

## Example of usage

```tsx
import { extend } from '@mongez/localization';

extend("en", {
  minimumOrderPurchase: "Minimum purchase amount for this order is :amount USD",
});

export function RedComponent() {
  return (
    <>
      {trans('minimumOrderPurchase', { amount: <strong style={{color: 'red'}}>12</strong> })}
    </strong>
  )
}
```

## Tests

Run `yarn test` or `npm run test` to run the tests.
npm package: @mongez/react-rte
Description: A wrapper for Rich Text Editor React Component.
Author: hassanzohdy
Latest version: 2.0.0

# Rich Text Editor (Moonlight)

A powerful Rich Text Editor using Tiptap and Mantine, powered by Moonlight as well.

## Installation

`npm i @mongez/react-rte`

OR

`yarn add @mongez/react-rte`

OR

`pnpm install @mongez/react-rte`

The package requires peer dependencies, so you need to install them as well:

`yarn add @mongez/moonlight`

## Usage

```tsx
import { RichTextEditor } from '@mongez/react-rte';
import { useState } from 'react';

export function App() {
    const [value, setValue] = useState('');

    return (    
        <RichTextEditor
            value={value}
            onChange={setValue}
            placeholder="Type here..."
            label="Content"
            required
        />
    );
}
```

The Component by default uses the following:

- Color Selector
- Text Highlighter
- Text Aligner
- Youtube Embedder
- Image Uploader (Drag & Drop)
- Link
- Font Style
- Lists

## Available Props

The following table shows all available props:

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | `''` | The value of the editor, used for controlled value |
| `onChange` | `(value: string) => void` | `() => {}` | The function to be called when the value changes |
| `placeholder` | `string` | `''` | The placeholder of the editor |
| `label` | `string` | `''` | The label of the editor |
| `required` | `boolean` | `false` | Whether the editor is required or not |
| `defaultValue` | `string` | `''` | The default value of the editor, used for uncontrolled value |
| `hint` | `string` | `''` | Display a hint message below the label |
| `toolbarProps` | `ToolbarProps` | `{}` | The props of the toolbar, see [Mantine ToolbarProps](https://mantine.dev/others/tiptap/#sticky-toolbar) |

## Using as reactive form component

Simply use `richTextInput` function to get the Rich Text Editor as a form component.

```tsx
import { richTextInput } from '@mongez/react-rte';
import { createReactiveForm, textInput } from "@mongez/moonlight";

createReactiveForm(reactiveForm => {
    reactiveForm.setInputs([
        textInput('title'),
        richTextInput('content'),
    ]);
})
```

## TODO

- Expose toolbar configurations per component or globally.
- Expose extensions.
npm package: @mongez/sitemap
Description: A simple Sitemap generator for Node.js
Author: hassanzohdy
Latest version: 1.0.2

# Sitemap Generator

A simple yet powerful sitemap generator written for Node.js.

## Installation

Yarn

```bash
yarn add @mongez/sitemap
```

NPM

```bash
npm i @mongez/sitemap
```

PNPM

```bash
pnpm i @mongez/sitemap
```

BUN

```bash
bun add @mongez/sitemap
```

## Usage

Import the sitemap class, pass the base url and locale codes to it, then add the pages to the sitemap.

```ts
import { Sitemap } from "@mongez/sitemap";

const sitemap = new Sitemap("https://example.com", ["en", "ar"]);

sitemap.add("/").add("/about-us").add("/contact-us");

await sitemap.saveTo("/path/to/sitemap.xml");
```

And that's it

This will create a sitemap with links, each link will have the original path along with the locale code as well.

## Add more options to path

If you want to customize the path, you can pass an object to the `add` method.

```ts
sitemap.add({
  path: "/",
  lastModified: new Date(),
  changeFrequency: "daily",
  priority: 0.8,
});
```

The object can have the following properties:

```ts
type SitemapPath = {
  /**
   * The relative path to the website
   */
  path: string;
  /**
   * Last modification date
   */
  lastModified?: Date | string;
  /**
   * Change frequency
   */
  changeFrequency?: string;
  /**
   * Priority
   */
  priority?: number;
  /**
   * Hreflang
   * If you have multiple languages, you can add the hreflang, it will be used automatically if locale codes are set
   */
  hreflang?: {
    [localeCOde: string]: string;
  };
};
```

## Generate Only

If you want just the xml sitemap without saving it to a file, you can use the `generate` method.

```ts
const xml = await sitemap.generate();
```

Alternatively, you can use the `toXml` method.

```ts
const xml = await sitemap.toXml();
```


## ChangeLog

- Fixed route path when generating sitemap.
npm package: @mongez/slug
Description: A utility to generate route slug.
Author: hassanzohdy
Latest version: 1.0.7

# Mongez Slug

A utility to generate route slug.

## Installation

`yarn add @mongez/slug`

Or

`npm i @mongez/slug`

## Usage

```js
import slug from "@mongez/slug";

// OR
import { slugify } from "@mongez/slug";

slug("hello-world"); // hello-world
```

## TODO

- Add unit tests
npm package: @mongez/time-wizard
Description: A simple dayjs wrapper to manage time and dates.
Author: hassanzohdy
Latest version: 1.0.6

# Time Wizard

A simple wrapper around [dayjs](day.js.org) to make it easier to work with dates in Nodejs.

## Installation

```bash
yarn add @mongez/time-wizard
```

OR

```bash
npm install @mongez/time-wizard
```

OR

```bash
pnpm install @mongez/time-wizard
```

## Configurations
npm package: @mongez/warlock
Description: A comprehensive nodejs framework for building nodejs applications
Author: hassanzohdy
Latest version: 2.0.10

# Warlock

A comprehensive and flexible framework for building nodejs applications.

## Installation

`yarn create-mongez-app my-backend-app`

Then select Nodejs App -> Warlock App

## Documentation

Full documentation is available at [official documentation](https://docs.mentoor.io/mongez/docs/warlock/getting-started/introduction).