open-index/open-npm huggingface dataset:
npm package: @namnode/vite-plugin-inspect-react
Description: A Vite plugin to inspect React components
Author: Nam Nguyen
Latest version: 1.21.0

# vite-plugin-inspect-react 💞

## WHY 🙈

This plugin will inject special `comment` nodes next to your react components inside your codebase during compile time.
Yet, those come with unique content that stores the location of your React components accordingly

This plugin is highly inspired by another fantastic plugin so-called
[vite-plugin-react-inspector](https://github.com/sudongyuer/vite-plugin-react-inspector). The reason this plugin exists
because not all React's component libraries are built with extensibility in mind. To achieve certain consistency, they
sacrifice the flexibility of the component's structure. For instance, some component libraries do not allow you to pass
any props other than their pre-defined set of props. Therefore,
[dataset property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) injection is not an option
anymore. This plugin helps to overcome that limitation 🎉

React's dev tool does have a feature to inspect the component's location, but it is not as accurate at scale in my
experience. Therefore, I recommend you try out this plugin only when the React dev tool is not enough for your use case.

## Demo

https://github.com/willnguyen1312/namnode/assets/17794897/6c48b24c-70b5-4ddb-a00f-3a1a5a27eff6

## Installation 🚀

```bash
# pnpm
pnpm add @namnode/vite-plugin-inspect-react -D

# yarn
yarn add @namnode/vite-plugin-inspect-react -D

# npm
npm install @namnode/vite-plugin-inspect-react -D

# bun
bun install @namnode/vite-plugin-inspect-react -dev
```

## Usage 🎉

```ts
// vite.config.ts
// Please ensure this plugin comes before react plugin, otherwise it can't detect your react component inside your source code.

import react from "@vitejs/plugin-react-swc"
import { defineConfig } from "vite"
import { inspectReact } from "@namnode/vite-plugin-inspect-react"

export default defineConfig({
  plugins: [inspectReact(), react()],
})
```

```ts
// Retrieve code path of component which render element in the DOM
import { getCodePathFromElement } from "@namnode/vite-plugin-inspect-react/utils"

const codePath = getCodePathFromElement(element)
```

## Options 🎨

```ts
type Options = {
  predicate?: (node: Node) => boolean
  plugins?: PluginItem[]
  base?: string
  type?: "devtool" | "dom"
  propName?: string
}

function inspectReact(option?: Options): Plugin
```

### predicate

By default, all nodes of type `JSXElement` will be inspected. However, you can pass a predicate function to filter out
the nodes that you want to ignore.

### plugins

Since the plugin is powered by `@babel/core`, you can pass any Babel plugins. For more information, please refer to
[Babel's documentation](https://babeljs.io/docs/en/plugins).

### base

By default, the plugin will return the absolute path. However, you can override this behavior by passing a base, which
will be used to resolve the relative path.

## Development 🧑‍💻

### Playground

#### From vite-plugin-inspect-react folder

```bash
pnpm dev
```

#### From root folder

```bash
pnpm start-inspect-react
```
npm package: @namopanda/date-utility
Description: A date utility package with inbuilt date functions for different formats.
Author: Pratik
Latest version: 1.0.1

# Date Utilities

Date Utilities is a lightweight npm package that provides various date-related utility functions to simplify common date operations in JavaScript applications.

## Installation

You can install the package via npm:

```shell
npm install @namopanda/date-utility

const {
  formatDate,
  calculateDaysDiff,
  calculateMonthDiff,
  calculateYearDiff,
  convertDateFormat,
  getDayOfYear,
} = require('date-utils');

// Example usage
const date = new Date();
console.log(formatDate(date)); // Output: July 5, 2023

const startDate = new Date('2023-01-01');
const endDate = new Date('2023-12-31');
console.log(calculateDaysDiff(startDate, endDate)); // Output: 364

console.log(calculateMonthDiff(startDate, endDate)); // Output: 11

console.log(calculateYearDiff(startDate, endDate)); // Output: 0

console.log(convertDateFormat(date, 'dd-mm-yyyy')); // Output: 05-07-2023

console.log(getDayOfYear(date)); // Output: 185

```


## Available Date Utility Functions
The following date utility functions are available in this package:

formatDate(date, format): Formats a given date object into a specific format. It uses the toLocaleDateString() method with options to format the date as a string.

calculateDaysDiff(date1, date2): Calculates the number of days between two given date objects.

calculateMonthDiff(date1, date2): Calculates the number of months between two given date objects.

calculateYearDiff(date1, date2): Calculates the number of years between two given date objects.

convertDateFormat(date, format): Converts the format of a given date object to the specified format.

getDayOfYear(date): Returns the day of the year for a given date object.

Please refer to the function descriptions in the source code for more details on their usage and return values.
npm package: @namopanda/form-validation
Description: A form-validator utility for validating various input fields.
Author: Pratik
Latest version: 1.0.1

# Form Validator

Form Validator is a lightweight npm package that provides various form validation functions to simplify form validation in JavaScript applications.

## Installation

You can install the package via npm:

```shell
npm install @namopanda/form-validator

// Import the desired form validation functions from the package and use them in your JavaScript code.

const {
  validateEmail,
  validatePhoneNumber,
  validateAddress,
  validateName,
  validatePassword,
} = require('form-validator');

// Example usage
const email = 'test@example.com';
if (validateEmail(email)) {
  console.log('Email is valid.');
} else {
  console.log('Email is invalid.');
}

const phoneNumber = '1234567890';
if (validatePhoneNumber(phoneNumber)) {
  console.log('Phone number is valid.');
} else {
  console.log('Phone number is invalid.');
}

//Available Validation Functions
//The following form validation functions are available in this package:

validateEmail(email): Validates an email address.
validatePhoneNumber(phone): Validates a phone number.
validateAddress(address): Validates an address.
validateName(name): Validates a name.
validatePassword(password): Validates a password.
Please refer to the function descriptions in the source code for more details on their usage and return values.

License
This project is licensed under the MIT License. See the LICENSE file for details.
npm package: @namopanda/random-generator
Description: A random number or randomising utility.
Author: Pratik
Latest version: 1.0.3

# Randomizer

Randomizer is an npm package that provides various randomization functions. It allows you to generate random numbers, shuffle arrays, select random elements, generate random strings, and more.

## Installation

You can install the Randomizer package using npm:

```shell
npm install @namopanda/randomizer
 ```


# Randomizer

Randomizer is an npm package that provides various randomization functions. It allows you to generate random numbers, shuffle arrays, select random elements, generate random strings, and more.

## Installation

You can install the Randomizer package using npm:

```shell
npm install @namopanda/randomizer

```
## Usage
Import the Randomizer package into your project:

const Randomizer = require('@namopanda/randomizer');

# Generate a Random Number
Generate a random number between a minimum and maximum value (inclusive):


const randomNumber = Randomizer.generateRandomNumber(1, 10);
console.log('Random Number:', randomNumber);

# Shuffle an Array
Shuffle the elements in an array randomly:


const array = [1, 2, 3, 4, 5];
const shuffledArray = Randomizer.shuffleArray(array);
console.log('Shuffled Array:', shuffledArray);

# Select a Random Element
Select a random element from an array:


const array = [1, 2, 3, 4, 5];
const randomElement = Randomizer.selectRandomElement(array);
console.log('Random Element:', randomElement);

# Generate a Random String
Generate a random string of a specified length:


const randomString = Randomizer.generateRandomString(8);
console.log('Random String:', randomString);

# Generate a Random Boolean
Generate a random boolean value (true or false):


const randomBoolean = Randomizer.generateRandomBoolean();
console.log('Random Boolean:', randomBoolean);

# Generate a Random RGB Color
Generate a random RGB color in the format "rgb(red, green, blue)":

const randomColor = Randomizer.generateRandomColor();
console.log('Random Color:', randomColor);

## License
This project is licensed under the MIT License.
npm package: @namopanda/react-modal
Description: A customisable React-Modal.
Author: Pratik
Latest version: 1.0.0

# React Modal

React Modal is a customizable modal component for React applications. It allows you to display overlays, alerts, or dialog boxes in your application with ease.

## Installation

You can install React Modal using npm:

```shell
npm install @namopanda/react-modal
```

# Usage
Import the Modal component and use it in your React application:

```shell
import React, { useState } from 'react';
import Modal from 'react-modal';

function App() {
  const [modalIsOpen, setModalIsOpen] = useState(false);

  const openModal = () => {
    setModalIsOpen(true);
  };

  const closeModal = () => {
    setModalIsOpen(false);
  };

  return (
    <div>
      <h1>My App</h1>
      <button onClick={openModal}>Open Modal</button>

      <Modal isOpen={modalIsOpen} onRequestClose={closeModal}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
        <button onClick={closeModal}>Close</button>
      </Modal>
    </div>
  );
}

export default App;

```
# Props
The Modal component accepts the following props:

## isOpen (boolean): Determines whether the modal is open or closed.
## onRequestClose (function): Callback function invoked when the user requests to close the modal (e.g., clicks outside the modal or presses the escape key).
# Customization
You can customize the appearance and behavior of the modal by applying CSS classes or overriding the default styles.

# License
This project is licensed under the MIT License.
npm package: @namorzyny/eslint-config
Description: [![NPM](https://img.shields.io/npm/v/@namorzyny/eslint-config)](https://www.npmjs.com/package/@namorzyny/eslint-config)
Author: namorzyny
Latest version: 4.0.0

# ESLintConfig

[![NPM](https://img.shields.io/npm/v/@namorzyny/eslint-config)](https://www.npmjs.com/package/@namorzyny/eslint-config)

This package is something I use for myself.
You can use it if you want, but I’m not responsible for anything that happens. **Use it entirely at your own risk.**
npm package: @namphuongtechnologi/axios
Description: Axios for namphuongtechnologies
Author: namphuongso
Latest version: 0.0.10

# @namphuongtechnologi/axios

## Introduction

This project is designed to facilitate the reusability of Axios libraries. It includes a collection of reusable functions and logics. The main goal of this project is to streamline the development process by providing a set of pre-built elements that can be incorporated into various Axios applications. This not only saves time but also ensures consistency across different projects.

## Usage

```tsx
import { AxiosService, ReqMiddleWare, ResMiddleWare } from '@namphuongtechnologi/axios';
import get from 'lodash/get';

const customResMiddleWare = ResMiddleWare.create<{
  contentTypes: string[];
}>({
  handler: (response, options) => {
    const { contentTypes } = options;

    if (
      contentTypes.includes(response.headers['content-type']) &&
      get(response, 'data.statusCode') !== 200
    ) {
      throw new Error(get(response, 'data.message', 'Bad Request'));
    }

    return response;
  },
});

const axios = new AxiosService({
  baseURL: 'https://api.example.com',
  interceptors: {
    req: {
      middlewares: [
        ReqMiddleWare.removeFields({
          methods: ['put', 'post', 'delete'],
          startWithChar: '__',
        }),
        ReqMiddleWare.convertPascalCase({
          methods: ['put', 'post', 'delete'],
        }),
      ],
    },
    res: {
      middlewares: [
        customResMiddleWare({
          contentTypes: ['application/json'],
        }),
        ResMiddleWare.convertCamelCase({
          contentTypes: ['application/json'],
        }),
      ],
    },
  },
});
```

## Documentation

See the [documentation](https://your-documentation-link.com) for more information on how to use this project.
npm package: @namu-labs/userop
Description: A simple JS library for building ERC-4337 UserOperations.
Author: stackup-wallet
Latest version: 0.3.71

![](https://i.imgur.com/mR5CsOr.png)

# Getting started

A simple JS library for building ERC-4337 UserOperations.

> **🚀 Looking for access to hosted infrastructure to build your Smart Accounts? Check out [stackup.sh](https://www.stackup.sh/)!**

# Usage

See the `userop` documentation at [docs.stackup.sh](https://docs.stackup.sh/docs/useropjs).

# Contributing

## Prerequisites

- Node 16 or later

## Setup

Install dependencies:

```bash
yarn install
```

Run tests:

```bash
yarn test
```

# License

Distributed under the MIT License. See [LICENSE](./LICENSE) for more information.

# Contact

Feel free to direct any technical related questions to the `dev-hub` channel in the [Stackup Discord](https://discord.gg/VTjJGvMNyW).