open-index/open-npm huggingface dataset:
npm package: @jonhoffmam/webreload
Description: CLI for refreshing the browser while developing basic front-end projects.
Author: Jonathan Hoffmam Pivetta
Latest version: 1.0.0

# web-reload

web-reload is a simple CLI for auto-reloading web applications with each change made to your project at the time of development.

# Installation

Install web-reload globally with [**npm**](http://npmjs.org/) using the command below to use in your terminal:

```bash
npm install -g @jonhoffmam/web-reload
```

You can also install web-reload as a development dependency:

```bash
npm install --save-dev @jonhoffmam/web-reload
```

# Usage

> Your web application must be inside a ***src*** folder!

If you have installed web-reload globally you can simply run the command in your terminal:

```bash
web-reload

# OR

webreload
```

If you have installed web-reload as a development dependency, you can insert in your package.json file:

Example:

```json
"scripts": {
  "start": "web-reload"
}
```

When running your application it will be available at <http://localhost:3000>

# Collaborators

- [Jonathan Hoffmam Pivetta](https://github.com/jonhoffmam)

# License

MIT
npm package: @jonhyfun/jira-commit-generator
Description: Gerar commits do jira e padronizados pro NV99
Author: Jotape Corporation
Latest version: 1.1.5

# How to install
`npm i -g @jonhyfun/jira-commit-generator`

The idea of this package is to have a commit command that always asks for a task id and a commit type
to have a common pattern of commits and help link them to jira tasks or look them up later...

Sorry english speaking folks, one day i will have better docs and a way to set the localization.

This package uses **git-commit-msg-linter** to prevent "bad commits" altought i havent implement anything besides the default properties.

Unfortunatelly there is no config for it yet.


# How to use
Once you installed the package, you will have the command `commit` available anywhere in your machine

you can use it like 

```js
commit my message
```

after you run the command it will ask for the jira task id (NAME-1234) and what type of commit it is.

For now, unfortunately there is no way to configure (without building your own version) what kind of types you will have available, i cherry picked from conventional commits those that i think are a good practice.

you can also use the `-a` and `-p` tags

the `-a` tag runs `git add .` prior to commiting and `-p` runs `git push` after commiting

of course you can combine both with 

```js
commit -a -p my message
```
npm package: @jonit-dev/decorators-utils
Description: This lib is a collection of useful decorators for debugging, logging and other utilities.
Author: Joao Paulo Furtado
Latest version: 0.1.5

# Decorator Utils

This lib is a collection of useful decorators for debugging, logging and other utilities.

## Installation

```
yarn add @jonit-dev/decorators-utils -D
```

## Usage

### Loggers

#### @ClassLogger

This decorator will log the class name and the method name before the method execution.

```typescript

import { ClassLogger } from '@jonit-dev/decorators-utils';

@ClassLogger()
export class SomeClassHere {
  public someMethodHere() {
    ...
  }
}
```

Would output something like:

```
 Running SomeClassHere.someMethodHere with arguments: [
  ...
  ]
```

### Performance Trackers

<img src="./docs/track-class-execution-time.jpg" alt="Performance trackers">

#### @TrackExecutionTime

This one is a method specific performance tracker. It will track the performance of the decorated method by using a console.time and console.timeEnd.

```typescript
import { TrackExecutionTime } from '@jonit-dev/decorators-utils';

export class SomeClassHere {
  @TrackExecutionTime()
  public someMethodHere() {
    ...
  }
}
```

#### @TrackClassExecutionTime

This decorator will track the performance of all public and private methods of a class, by using a console.time and console.timeEnd.

```typescript
import { TrackClassExecutionTime } from '@jonit-dev/decorators-utils';

@TrackClassExecutionTime()
export class SomeClassHere {
  ...
}
```

#### @DecorateAllWith(decorator)

As the name suggests, this decorator will decorate all methods of a class with the given decorator.

```typescript
import { DecorateAllWith } from '@jonit-dev/decorators-utils';

@DecorateAllWith(TrackExecutionTime())
export class SomeClassHere {
  ...
}
```
npm package: @joniui/react-icons
Description: A collection of customizable React icons for UI components in your React projects.
Author: @dioarafi
Latest version: 1.0.9


# Icons

**Icons** is a crisp, minimalist icon set built specifically for modern React applications. Designed on a 15×15 grid, each icon is crafted for clarity, consistency, and seamless integration with design systems.

---

## Features

- Pixel-perfect 15×15 grid  
- Optimized for React and Tailwind CSS  
- Consistent visual language  
- Tree-shakeable React components  
- MIT License – Free for personal and commercial use  

---

## Installation

Install via npm:

```bash
npm i @joniui/react-icons
````

Or with yarn:

```bash
yarn add @joniui/react-icons
```

---

## Usage

Use icons as React components:

```tsx
import { AccessibilityIcon } from '@joniui/react-icons';

export default function Example() {
  return (
    <button className="flex items-center gap-2">
      <AccessibilityIcon
        width={20} 
        height={20} 
        color="currentColor" 
        fill="none" 
      />
      Confirm
    </button>
  );
}
```

You can customize each icon using Tailwind CSS or your own class names via the `className` prop.

---

## Icon List & Documentation

To browse all available icons, usage examples, and design guidelines, visit:

**Storybook** 
[Storybook](https://6813e8dacad384ce2c256f3e--storybook-icons-react.netlify.app/)


---

## Contribution

We welcome contributions! If you'd like to submit a new icon or improve the existing set, please check our **Contribution Guide**.

---

## License

Licensed under the MIT License.
Copyright © 2025 \[joniui].

See `LICENSE` for full details.
npm package: @jonkasusaki/avatar-generator
Description: Avatar Generator
Author: Jonka Susaki
Latest version: 1.0.3

<div style="text-align: center;">
    
![Avatar](./assets/avatar.png)

# Easy avatar generator

</div>

Create kaleidoscopic avatars based on string input.

## Installation

```
yarn add @jonkasusaki/avatar-generator
```

OR

```
npm install @jonkasusaki/avatar-generator
```


## Usage

```
import {generateAvatar} from '@jonkasusaki/avatar-generator';

// Generate buffer
const buffer = await generateAvatar('your input text', 400, 400)

// Do whatever you want
fs.writeFileSync("your/destination/folder", buffer);
```

## About

This project is basically just a wrapper for [PureImage](https://github.com/joshmarinacci/node-pureimage)
npm package: @jonl1/wappler-ac-cookie-consent
Description: App Connect extension that wraps Cookie Consent library
Author: JonL1
Latest version: 0.1.0

# Wappler - Cookie Consent Extension

App Connect extension that wraps [Cookie Consent](https://cookieconsent.orestbida.com) library .
Cookie Consent is lightweight & gdpr compliant cookie consent plugin written in plain javascript.

## Installation

1. Open your Project Settings.
2. Go to the `Extensions`
3. Click on `Add extension`
4. Enter `@jonl1/wappler-ac-cookie-consent`
5. Click `save`
6. Click `save` again. This step will install the extension.

## Usage

1. Click `Add new component` in the `App structure` panel.
2. Browse to `Jonl1` folder and add `Jonl1 Cookie Consent` to your page. In code view it will look something like this:

    ```html
    <dmx-jonl1-cookie-consent id="consent1" dmx-bind:categories="{necessary:{enabled:true,readOnly:true,autoClear:''}}"></dmx-jonl1-cookie-consent>
    ```

The component is documented in the UI but make sure to check the [library's documentation](https://cookieconsent.orestbida.com)

You can check what it's capable in the demo [website](https://playground.cookieconsent.orestbida.com)

## Contributing

Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License

[MIT](https://choosealicense.com/licenses/mit/)
npm package: @jonl1/wappler-ac-dicebear
Description: App Connect extension that integrates Dicebear avatar library
Author: JonL1
Latest version: 0.1.6

# Wappler - Dicebear Extension

App Connect extension that wraps Dicebear API.
DiceBear is an avatar library for designers and developers. Generate random avatar profile pictures!

## Installation

1. Open your Project Settings.
2. Go to the `Extensions`
3. Click on `Add extension` icon ![Wappler 20-03-2023 12 54 55 000346](https://user-images.githubusercontent.com/1325712/226332026-a8bba7d8-4f94-4ead-8011-d63b740ca541.png)
4. Enter `@jonl1/wappler-ac-dicebear`

    ![Wappler 20-03-2023 12 51 24 000342](https://user-images.githubusercontent.com/1325712/226331382-7beb35ff-5b10-432b-9efd-32964b29b564.png)

5. Click `save`
6. Click `save` again. This step will install the extension.

## Usage

1. Click `Add new component` in the `App structure` panel.

    ![Wappler 20-03-2023 12 58 48 000350](https://user-images.githubusercontent.com/1325712/226333191-f840cc8e-9de3-4e69-a9ac-1d7b1b669fb2.png)

2. Browse to `Jonl1` folder and add `Jonl1 component` to your page. In code view it will look something like this: 
    ```
    <dmx-jonl1-avatar id="avatar1" style="adventurer"></dmx-jonl1-avatar>
    ```

### Static attributes

- Seed

    Determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based the seed. _Normally you would use something unique for each user (email, id, etc)_
- Style (Default: adventurer)

    You can choose between simple identicons and lovingly designed characters. Check them all [here](https://www.dicebear.com/styles)
 
- Return type (Default: SVG)

    Defines what type of data will the component return. [Return types documentation](https://www.dicebear.com/how-to-use/js-library#tostring)
### Dynamic attributes

- Seed

- Style options (optional)

    Check each style in Dicebear's documentation to learn the different options. _Add the options in Javascript Object notation in the databinding's code view_
    
### Dynamic events
N/A
### Static events
N/A
### Actions 

- Download Avatar

    It will download the avatar's image to the browser. 
    
### Output

- Data

    The data returned will depend on the selected `Return Type`. [Return types documentation](https://www.dicebear.com/how-to-use/js-library#tostring)

    ![Wappler 20-03-2023 13 50 34 000352](https://user-images.githubusercontent.com/1325712/226343838-f781da72-bb51-42ab-bbf7-9efa0a880ece.png)
    
    Right now only the root of data is pickable in the UI. If you select a `Return Type` that returns nested data remember to add the nested keys to access what you need.[^1]

## Contributing

Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License

[MIT](https://choosealicense.com/licenses/mit/)


[^1]: You can vote for a feature request that would solve this: https://community.wappler.io/t/conditional-datascheme-for-ac-components/48696
npm package: @jonlev1n/git-sorry
Description: 1. Simply run the command `./node_modules/bin/git-sorry-setup` to initialize in your repo, and voila! You are now sorry
Author: Jon Levin
Latest version: 1.0.0

1. Simply run the command `./node_modules/bin/git-sorry-setup` to initialize in your repo, and voila! You are now sorry