open-index/open-npm huggingface dataset:
npm package: @mazlano27/e-commerce-dialog-for-users-leaving
Description: A plugin for e-commerce stores to re-engage users who are inactive or about to leave
Latest version: 0.3.8

### Script tag

- Put a script tag similar to this `<script src='https://unpkg.com/@mazlano27/e-commerce-dialog-for-users-leaving/dist/e-commerce-dialog-for-users-leaving/e-commerce-dialog-for-users-leaving.js'></script>` in the head of your index.html

- Then you can use the element by adding the tag `<e-commerce-dialog-for-users-leaving sheetId="[SHEET ID COMES HERE]"></e-commerce-dialog-for-users-leaving>`
npm package: @mazlano27/oto-convert
Description: Boost e-commerce conversions
Latest version: 0.1.7

## Using this component

### Script tag
- Put a these tags → 

`<script type="module" src="https://unpkg.com/@mazlano27/oto-convert/dist/oto-convert/oto-convert.esm.js"></script>`

`<script nomodule="" src="https://unpkg.com/@mazlano27/oto-convert/dist/oto-convert/oto-convert.js"></script>`

in the head of your index.html

- Then you can use the <oto-convert> element in your project
npm package: @mazlano27/oto-tracking-product-page
Description: Component to track product page changes
Latest version: 0.0.8

### Script tag

- Put a script tag similar to this `<script src='https://unpkg.com/@mazlano27/oto-tracking-product-page/dist/oto-tracking-product-page/oto-tracking-product-page.js'></script>` in the head of your index.html

- Then you can use the element by adding the tag `<oto-price-tracking sheetId="[SHEET ID COMES HERE]"></oto-price-tracking>`
npm package: @mazmo/mazmo-ui
Description: The components are inside the `src` folder.
Author: Andrés Torres
Latest version: 0.1.0

# Mazmo UI Components

The components are inside the `src` folder.

To preview and work (with HMR), run `npm run storybook` and follow the instructions.

## Maintainer

The owner and main responsable of this project is [Andrés Torres](https://mazmo.net/andrestorres).
npm package: @mazp/at-i18n
Description: This is a library for extracting Chinese in tsx and converting it. If your project is a React project and does not have international translation, then using this library can quickly help you extract Chinese and generate corresponding response variables.
Author: sishen
Latest version: 1.0.1

# at-i18n

## ✨ 介绍

这是一个用于提取 tsx 中的中文进行转化的库，如果你的项目是 React 项目，并且没有做国际化翻译，那么使用这个库可以快速帮助你提取中文，并且生成对应的响应变量。

该库包含了大部分的单元测试和快照测试，测试覆盖率百分百，但是仍有部分情况会漏掉，可以提 issue，或者二次开发。

如果生成的响应变量不符合你的需求，可以直接 fork github 仓库，进行二次开发替换成你需要转化的值即可。



## 📦 下载

```bash
npm i -g at-i18n
yarn add -g at-i18n
pnpm add -g at-i18n
```



## 🔨 使用

**测试文件**：

![image-20231218105145482](assets/README.assets/image-20231218105145482.png)

**针对单个文件夹**：

![at-i18n2](assets/README.assets/at-i18n2.gif)

**针对单个文件**：

![at-i18n](assets/README.assets/at-i18n.gif)
npm package: @mazp/create-tpl
Description: CLI to create project template
Author: sishen
Latest version: 1.6.1

# create-tpl

English | [简体中文](./README-zh.md)

## ✨ Introduce

Quick creation tools, application templates such as Vue/React scaffolding tools, including out-of-the-box Vitest test environment, and configured TS and Vite environments

You can also use this tool to quickly create development npm library or backend project templates, with built-in rollup and gulp configuration files, all of which can be developed and packaged using TS



## 📦 Install

```bash
npm i -g @mazp/create-tpl
cnpm i -g @mazp/create-tpl
yarn add -g @mazp/create-tpl
pnpm add -g @mazp/create-tpl
```



## 🔨 Usage

### create project

```bash
# create in the local folder
cra .
# create a new folder
cra <project-name>
```

![vue3-demo](assets/README.assets/vue3-demo.gif)

![Snipaste_2023-08-14_14-34-12](assets/README.assets/Snipaste_2023-08-14_14-34-12.png)

### create lib

![lib-demo](assets/README.assets/lib-demo.gif)

![Snipaste_2023-08-14_14-37-15](assets/README.assets/Snipaste_2023-08-14_14-37-15-16919973130231.png)

### install plugin

>   Currently only supports Vue/React framework, plugin  only supports eslint
>
>   ❗: Less used so don't consider adding more extensions

```bash
# include your chosen framework, install relative plugin
cra i eslint
```
npm package: @mazp/dotenv
Description: Injecting data to process.env in runtime or running the command
Author: sishen
Latest version: 1.2.2

# @mazp/dotenv

## Introduce

This is a package about injecting data to process.env object from a .env file, made this package reason is dotenv package is unstable.

## Install

```bash
npm i @mazp/dotenv
yarn add @mazp/dotenv
```

## Usage

### Use env file inject

```bash
dotenv test.env rimraf dist
```

if you don't pass a .env file, default use that named config.env file in the root dir, that you can direct use command like follow:

```bash
dotenv rimraf dist
```

### Use parameter inject

```bash
dotenv NODE_ENV=development rimraf dist
```

## API

### dotnet(option: DotenvOption)

```ts
interface DotenvOption {
  path?: string | string[];
  command?: string[];
}
declare function dotenv(option: DotenvOption): void;
```

you can use this API, pass the path parameter inject data to process.env, path is a .env file location, if you do not pass, default use that named config.env file in the root dir.
The path parameter is a relative root dir, so you maybe use a path or url module to load the correct path.

```js
// ESM
import dotenv from "@mazp/dotenv";
dotenv({});
```

```js
// CJS
let dotenv = require("@mazp/dotenv");
dotenv({ path: "test.env" });
```
npm package: @mazp/node-util
Description: Common utility script functions for node ~
Author: sishen
Latest version: 1.1.2

1.  # @mazp/node-util

    ## Introduce

    Integrate the functions commonly used in the node project or lib.

    ## Install

    ```bash
    npm i @mazp/node-util
    yarn add @mazp/node-util
    pnpm add @mazp/node-util
    ```

    ## Usage

    ```js
    // ESM
    import { getLocalIPV4 } from "@mazp/util";
    ```

    ```js
    // CJS
    let { getLocalIPV4 } = require("@mazp/util");
    ```

    ## API

    ### getLocalIPV4

    Get the current ipv4 address of the machine.

    ```ts
    declare function getLocalIPV4(): string;
    ```
npm package: @mazp/util
Description: Integrate the functions commonly used in the project
Author: sishen
Latest version: 1.0.3

# @mazp/util

## Introduce

Integrate the functions commonly used in the project.

## Install

```bash
npm i @mazp/util
yarn add @mazp/util
pnpm i @mazp/util
```

## Usage

```js
// ESM
import util from "@mazp/util";
util.formatTime(1671198728746)
```

```js
// CJS
let util = require("@mazp/util");
util.formatTime(1671198728746)
```

## API

### formatTime

Transform timeStamp to  a standard format like `2022-12-16-21-52-8`.

```ts
declare function formatTime(time: number): string;
```

### randomChars

Randomly generate your input parameter length, which is a `[a-z][A-Z]` composition string.

```ts
declare function randomChars(len: number): string;
```
npm package: @mazurp/twx-widget
Description: A CLI app that allow us create widget project
Latest version: 1.0.12

# ThingWorx Widget CLI

Thingworx Widget CLI is a command line application to allow developers to build widget for ThingWorx. The widget cli can be used to create node typescript project base on  [Template](https://github.com/stefan-lacatus/ThingworxDemoWebpackWidget)

# Installation
Run the following command to install the widget cli globally.
```sh
$ npm install -g @mazurp/twx-widget
```
### Creating your first connector project
Run the following command to install the widget cli globally.
```sh
$ twx-widget init
```
After this you will be ask about details


![Init](https://github.com/mazurp/twx-widget-cli/blob/master/images/initImage.PNG)


You can also use parameter to quickly create new project:
```sh
    -n        name of widget
    -d        description of widget
    -t        minimum Thingworx version
    -a        author/vendor of widget
    -r        auto deploy (true/false)
    -s        URL TWX for auto deploy
    -u        TWX username
    -p        TWX password
```

afret execute this command CLI create project and install all dependencys  

### Additional comand
```sh
 $ twx-widget build
```
 builds the production version of the widget. Creates a new extension zip file under the zip folder. The production version is optimized for sharing and using in production enviroments.

```sh
 $ twx-widget deploy
```
creates a build, and uploads the extension zip to the thingworx server configured during crating project. The build is created for developement, with source-maps enabled.

License
----

MIT
npm package: @mazvysp/primeng
Description: [![npm version](https://badge.fury.io/js/primeng.svg)](https://badge.fury.io/js/primeng) [![npm downloads](https://img.shields.io/npm/dm/primeng.svg)](https://www.npmjs.com/package/primeng) [![Actions CI](https://github.com/primefaces/primeng/workflows/
Latest version: 1.0.9


[![npm version](https://badge.fury.io/js/primeng.svg)](https://badge.fury.io/js/primeng)
[![npm downloads](https://img.shields.io/npm/dm/primeng.svg)](https://www.npmjs.com/package/primeng)
[![Actions CI](https://github.com/primefaces/primeng/workflows/NodeJS%20CI/badge.svg)](https://github.com/primefaces/primeng/actions/workflows/node.js.yml)
[![Discord Chat](https://img.shields.io/discord/557940238991753223.svg?color=7289da&label=chat&logo=discord)](https://discord.gg/gzKFYnpmCY)

[![PrimeNG Hero](https://www.primefaces.org/wp-content/uploads/2022/09/primeng-gh-readme.jpg)](https://primeng.org)

### Website

Visit the [PrimeNG Website](https://primeng.org) for general information, demos and documentation.
npm package: @mazzard/classes
Description: Combining of class names
Author: Deight
Latest version: 1.0.0

#@mazzard/classes
### Install
```bash
npm i @mazzard/classes
```
Next we will use `classes` which means we imported it from `@mazzard/classes`
```javascript
import classes from '@mazzard/classes'
classes() // ''
```

### string
String is conveying as is
```javascript
classes('test') // 'test' 
```
### function
Function is calling
```javascript
classes(() => 'test1') // 'test1'
classes(() => () => 'test1') // 'test1'
classes(() => () => () => 'test1') // 'test1'
```
### iterable
Any iterable elements are sorting out and combining each other
```javascript
classes([]) // ''
classes(['test1', 'test2', 'test3']) // 'test1 test2 test3'
classes(new Set(['test1', 'test2', 'test3'])) // 'test1 test2 test3'
classes(new Map([['test1', ''], ['test2', ''], ['test3', 'test4']])) // 'test1 test2 test3 test4'
```
### object
Any object are filtering by value and combining their's keys
```javascript
classes({}) // ''
classes({
  test1: true,
  test2: false
}) // 'test1'
classes({
  test1: true,
  test2: true
}) // 'test1 test2'
```
### other
other types returns empty string
```javascript
classes(null) // ''
classes(undefined) // ''
classes(Symbol('test')) // ''
classes(1) // ''
classes(1.1) // ''
classes(NaN) // ''
```
### combining
You may combine all of this types as you wish
```javascript
classes(
  'test1',
  () => 'test2',
  () => [
    new Set(['test3']),
    () => ({
      test4: true,
      test5: false
    })
  ]
) // 'test1 test2 test3 test4'
```
npm package: @mazzard/react-meta
Description: React component for handling of meta data
Author: Deight
Latest version: 1.0.0

#@mazzard/react-meta
### Install
```bash
npm i @mazzard/react-meta
```
`Meta` helps you control title and description of pages.
```javascript
import React from 'react'
import ReactDom from 'react-dom'
import Link from '@mazzard/react-link'
import Router from '@mazzard/react-router/Router'
import Route from '@mazzard/react-router/Route'
import Meta from '@mazzard/react-meta'

class Test extends React.Component {
  render () {
    return (
      <>
        <Link>
          Home
        </Link>
        <Router>
          <Route match='/'>
            <Meta title='Home' description='Home description' />
            <hr />
            <Link to='/test1'>
              test1
            </Link>
            {' | '}
            <Link to='/test2'>
              test2
            </Link>
          </Route>
          <Route>
            <Meta title='Home | '>
              <Route match='/test1'>
                <Meta title='Test1' description='Test1 description' />
              </Route>
              <Route match='/test2'>
                <Meta title='Test2' description='Test2 description' />
              </Route>
            </Meta>
          </Route>
        </Router>
      </>
    )
  }
}

ReactDom.render(<Test />, document.getElementById('root'))
```

### clearTitle and clearDescription
You may clear parent's title and description
```javascript
import React from 'react'
import ReactDom from 'react-dom'
import Link from '@mazzard/react-link'
import Router from '@mazzard/react-router/Router'
import Route from '@mazzard/react-router/Route'
import Meta from '@mazzard/react-meta'

class Test extends React.Component {
  render () {
    return (
      <>
        <Link>
          Home
        </Link>
        <Router>
          <Route match='/'>
            <Meta title='Home' description='Home description' />
            <hr />
            <Link to='/test1'>
              test1
            </Link>
            {' | '}
            <Link to='/test2'>
              test2
            </Link>
          </Route>
          <Route>
            <Meta title='Home | '>
              <Route match='/test1'>
                <Meta title='Test1' description='Test1 description' />
              </Route>
              <Route match='/test2'>
                <Meta title='Test2' clearTitle description='Test2 description' />
              </Route>
            </Meta>
          </Route>
        </Router>
      </>
    )
  }
}

ReactDom.render(<Test />, document.getElementById('root'))
```
npm package: @mazzard/react-router
Description: React component for routing
Author: Deight
Latest version: 2.1.1

#@mazzard/react-router
### Install
```bash
npm i @mazzard/react-router
```
### Route
Use `Router` anywhere to show content by rout matching.
```javascript
import React from 'react'
import ReactDom from 'react-dom'
import Link from '@mazzard/react-link'
import Router from '@mazzard/react-router'

class Test extends React.Component {
  render () {
    return (
      <>
        <Link>
          Menu
        </Link>
        <Router path='/'>
          <hr />
          <Link to='/test1'>
            test1
          </Link>
          {' | '}
          <Link to='/test2'>
            test2
          </Link>
        </Router>
      </>
    )
  }
}

ReactDom.render(<Test />, document.getElementById('root'))
```
Wrap routers at `Router` with `combine` attribute to display only one suitable router. 
```javascript
import React from '@mazzard/react'
import Link from '@mazzard/react-link'
import Router from '@mazzard/react-router'

class Test extends React {
  render () {
    return (
      <Router combine>
        <Router>
          <Link to='/'>
            Menu
          </Link>
        </Router>
        <Router path='/'>
          <Link to='/test1'>
            test1
          </Link>
          {' | '}
          <Link to='/test2'>
            test2
          </Link>
        </Router>
      </Router>
    )
  }
}

React.render(<Test />, document.getElementById('root'))
``` 
Look at [demo](https://mazzard-react-router.stackblitz.io)
npm package: @mazzen.emad/draganddrop
Description: A simple drag-and-drop package for handling file uploads
Author: Your Name
Latest version: 1.0.0

# Drag and Drop Package

A simple drag-and-drop class for handling file uploads. It allows the user to specify allowed file types, and notifies listeners when files are added via drag-and-drop.

## Installation

```bash
npm install drag-and-drop
```