open-index/open-npm huggingface dataset:
npm package: @phucbm/get-options-from-html-attr
Description: Parses options from a specified attribute of a target element, with support for default values, numeric conversion, and JSON validation.
Author: Phuc Bui
Latest version: 1.0.0

# @phucbm/get-options-from-html-attr

![Test Status](https://github.com/phucbm/get-options-from-html-attr/actions/workflows/test.yml/badge.svg)
![NPM Publish](https://img.shields.io/github/actions/workflow/status/phucbm/get-options-from-html-attr/publish.yml?branch=main&label=npm%20publish&logo=npm)
![NPM Version](https://img.shields.io/npm/v/@phucbm/get-options-from-html-attr)


A utility function to parse options from a specified attribute of a target element, with support for default values, numeric conversion, and JSON validation.

## Installation

First, ensure you have Node.js and npm installed. Then, install the package using npm:

```bash
npm i @phucbm/get-options-from-html-attr
```

## Usage

### Importing the Function

```typescript
import { getOptionsFromAttribute } from '@phucbm/get-options-from-html-attr';
```

### Function Parameters

The `getOptionsFromAttribute` function accepts an object with the following properties:

| Parameter        | Type                     | Default Value | Description                                          |
|------------------|--------------------------|---------------|------------------------------------------------------|
| `target`         | `HTMLElement`            | `null`        | `null`                                               | The target HTML element.                            |
| `attributeName`  | `string`                 | `''`          | The name of the attribute to parse.                  |
| `defaultOptions` | `Record<string, any>`    | `{}`          | The default options to return if parsing fails.      |
| `numericValues`  | `string[]`               | `[]`          | An array of property names to convert to float.      |
| `onIsString`     | `(data: string) => void` | `undefined`   | A callback function to execute if value is not JSON. |
| `dev`            | `boolean`                | `false`       | Enable or disable development mode.                  |

### Example Usage

```typescript
import { getOptionsFromAttribute } from '@phucbm/get-options-from-html-attr';

const targetElement = document.getElementById('example-element');

const options = getOptionsFromAttribute({
  target: targetElement,
  attributeName: 'data-options',
  defaultOptions: { key: 'defaultValue' },
  numericValues: ['numericValue'],
  onIsString: (data) => { console.log('Not a JSON string:', data); },
  dev: true,
});

console.log(options);
```

### Example HTML

```html
<div id="example-element" data-options='{"key":"value", "numericValue":"123.45", "isTrue":"true", "isFalse":"false"}'></div>
```

### Expected Output

When the above HTML and JavaScript are used, the `options` object will be:

```javascript
{
  key: 'value',
  numericValue: 123.45,
  isTrue: true,
  isFalse: false
}
```

## Testing

```bash
npx jest
```

Ensure all tests pass.

## License

This project is licensed under the MIT License.

---
npm package: @phucbm/lerp
Description: A lightweight TypeScript utility function for linear interpolation
Author: phucbm
Latest version: 1.0.1

# 🎯 Lerp

A lightweight TypeScript utility function for linear interpolation.

[![npm version](https://badgen.net/npm/v/@phucbm/lerp?icon=npm)](https://www.npmjs.com/package/@phucbm/lerp)
[![npm downloads](https://badgen.net/npm/dm/@phucbm/lerp?icon=npm)](https://www.npmjs.com/package/@phucbm/lerp)
[![npm dependents](https://badgen.net/npm/dependents/@phucbm/lerp?icon=npm)](https://www.npmjs.com/package/@phucbm/lerp)
[![github stars](https://badgen.net/github/stars/phucbm/lerp?icon=github)](https://github.com/phucbm/lerp/)
[![github license](https://badgen.net/github/license/phucbm/lerp?icon=github)](https://github.com/phucbm/lerp/blob/main/LICENSE)
[![Made in Vietnam](https://raw.githubusercontent.com/webuild-community/badge/master/svg/made.svg)](https://webuild.community)

## Installation

```bash
npm i @phucbm/lerp
```
```bash
pnpm add @phucbm/lerp
```

## Usage

```typescript
import { lerp } from '@phucbm/lerp'
// or
import lerp from '@phucbm/lerp'

// Basic usage
lerp(0, 100, 0.5)  // 50

// With default fraction (0.1)
lerp(0, 100)       // 10

// Smooth animation
let current = 0
const target = 100
current = lerp(current, target, 0.2)  // Moves 20% closer to target
```

## API

```typescript
lerp(start: number, end: number, fraction?: number): number
```

- `start` - Starting value
- `end` - Target value  
- `fraction` - Interpolation factor (default: 0.1)
  - `0` = no change
  - `1` = instant change
  - `0.1` = move 10% closer to target

## License

MIT © [phucbm](https://github.com/phucbm)
npm package: @phucbm/os-util
Description: Utility functions for open-source projects.
Author: phucbm
Latest version: 0.0.5

# OS Util

https://www.npmjs.com/package/@phucbm/os-util

## Install

```shell
# Install
npm i @phucbm/os-util
```

## Features

### Get options from attribute

```js
import {getOptionsFromAttribute} from "@phucbm/os-util";
```

#### 1. Test cases for boolean and numeric values

```html

<section data-json='{"testNum":"480", "testFalse":"false", "testTrue":"true"}'>
</section>
```

```js
const options = getOptionsFromAttribute({
    target: document.querySelector('section'), // required, DOM element that holds the attribute
    attributeName: 'data-json', // required, attribute name that holds the value
    numericValues: ['testNum'], // optional, the props will be converted into numeric values
    defaultOptions: {}, // optional, options from attribute will override these default options, 
    // or return defaultOptions if options are not found
});
console.log(options); // => {"testNum": 480, "testFalse": false, "testTrue": true};
```

#### 2. Empty value

```html

<section data-json></section>
```

```js
const options = getOptionsFromAttribute({
    target: document.querySelector('section'),
    attributeName: 'data-json',
});
console.log(options); // => {}
```

#### 3. Value is just a string

```html

<section data-json="hello-world"></section>
```

```js
const options = getOptionsFromAttribute({
    target: document.querySelector('section'),
    attributeName: 'data-json',
    onIsString: value => {
        console.log(value); // => "hello-world"
    }
});
console.log(options); // => {}
```

### Events Manager

```js
import {EventsManager} from "@phucbm/os-util";
```

In your plugin constructor

```js
// init events manager
this.events = new EventsManager(this, {
    names: ['onInit'] // register event names
});

// fire an event
this.events.fire('onInit', {source}); // the 2nd param is an object that will be passed to the callback
```

Create a method to assign late-events

```js
/**
 * Assign late-events
 */
function on(eventName, callback){
    this.events.add(eventName, callback);
}
```

Usage

```js
// add event from init
const instance = Plugin.init({
    onInit: data => {
        console.log('init', data)
    }
});

// add via method after init
instance.on('onInit', data => {
    console.log('init', data)
});

// with or without keyword on before the event name are all acceptable
instance.on('init', data => {
    console.log('init', data)
});
```

## Deployment

```shell
# Publish package
# 1. Export the new function in index.js
# 2. Update version in package.json
# 3. Run publish
npm publish

# Dev
npm run dev
```
npm package: @phucbm/ripple-effect
Description: A TypeScript utility for applying a ripple effect to a set of elements.
Author: phucbm
Latest version: 1.0.0

# ripple-effect

Applies a ripple effect that distributes normalized values [0; 1] from a center point. Useful for animations or visual
emphasis.

[![npm version](https://badgen.net/npm/v/@phucbm/ripple-effect?icon=npm)](https://www.npmjs.com/package/@phucbm/ripple-effect)
[![npm downloads](https://badgen.net/npm/dm/@phucbm/ripple-effect?icon=npm)](https://www.npmjs.com/package/@phucbm/ripple-effect)
[![npm dependents](https://badgen.net/npm/dependents/@phucbm/ripple-effect?icon=npm)](https://www.npmjs.com/package/@phucbm/ripple-effect)
[![github stars](https://badgen.net/github/stars/phucbm/ripple-effect?icon=github)](https://github.com/phucbm/ripple-effect/)
[![github license](https://badgen.net/github/license/phucbm/ripple-effect?icon=github)](https://github.com/phucbm/ripple-effect/blob/main/LICENSE)

![Screen Recording 2025-07-13 at 18 35 54](https://github.com/user-attachments/assets/afce54ce-a80c-4fb4-8575-6eed833a1ab4)

## Installation

```bash
npm i @phucbm/ripple-effect
```

```bash
pnpm add @phucbm/ripple-effect
```

## Usage

```typescript
import {applyRippleEffect} from '@phucbm/ripple-effect';

const elements = document.querySelectorAll('.item');

applyRippleEffect({
    length: elements.length,
    centerIndex: 5,
    rippleRadius: 3,
    callback: (normalizedValue, index) => {
        const scale = 1 + normalizedValue; // [1.0 - 2.0]
        elements[index].style.transform = `scale(${scale})`;
    }
});

```

## Development

```bash
# Install dependencies
pnpm install

# Run tests
pnpm test

# Build the package
pnpm run build

# Run tests in watch mode
pnpm run test:watch
```

## License

MIT © [phucbm](https://github.com/phucbm)
npm package: @phucbm/tailwindcss-style-props
Description: Tailwind CSS plugin for easily adding multiple inline style properties using the style utility
Author: Phuc Bui
Latest version: 0.1.1

# @phucbm/tailwindcss-style-props

[![release](https://badgen.net/github/release/phucbm/tailwindcss-style-props/)](https://www.npmjs.com/package/@phucbm/tailwindcss-style-props)
[![npm weekly download](https://badgen.net/npm/dm/@phucbm/tailwindcss-style-props)](https://www.npmjs.com/package/@phucbm/tailwindcss-style-props)

A Tailwind CSS plugin that enables easy addition of multiple inline style properties using a custom `style` utility.

## Installation

```bash
# Using npm
npm install @phucbm/tailwindcss-style-props

# Using yarn
yarn add @phucbm/tailwindcss-style-props

# Using pnpm
pnpm add @phucbm/tailwindcss-style-props
```

## Setup

Add the plugin to your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
  // ...rest of your config
  plugins: [
    require('@phucbm/tailwindcss-style-props'),
    // ...other plugins
  ],
}
```

## Usage

Use the `style` utility to add multiple inline style properties:

```html
<!-- Basic usage -->
<div class="style-[color=red;font-size=16px]">
  This text will be red with a font-size of 16px
</div>

<!-- With CSS variables -->
<div class="style-[color=var(--my-color);background=var(--my-bg)]">
  Using CSS variables
</div>

<!-- Complex values -->
<div class="style-[transform=rotate(45deg);transition=all_0.3s_ease]">
  Complex property values
</div>
```

## How it works

The plugin parses the string value provided to the `style` utility by:

1. Splitting the string by semicolons (`;`) to get individual CSS declarations
2. For each declaration, splitting by equals sign (`=`) to get property-value pairs
3. Converting these pairs into a CSS object that Tailwind can apply

## Examples

```html
<!-- Multiple properties -->
<div class="style-[color=blue;padding=10px;margin=5px]">
  Multiple styles applied
</div>

<!-- With responsive prefixes -->
<div class="md:style-[display=flex;gap=10px]">
  Only applies on medium screens and up
</div>

<!-- With hover state -->
<div class="hover:style-[background=yellow;color=black]">
  Changes on hover
</div>

<!-- Combined with other utilities -->
<div class="rounded shadow p-4 style-[max-width=500px;margin=0_auto]">
  Combined with standard Tailwind utilities
</div>
```

## Notes

- Use equals sign (`=`) instead of colons (`:`) to separate property and value
- Use semicolons (`;`) to separate multiple style declarations
- For complex values with spaces, use underscores (`_`), which will be interpreted as spaces

## License

MIT
npm package: @phumo/hellonpm
Description: Learn how to publish npm package
Author: Phusan Moonmuang
Latest version: 1.0.5

# hellonpm

Learn how to publish npm package

## Installation

Using npm:

```bash
npm install @phumo/hellonpm
```

Using yarn:

```bash
yarn add @phumo/hellonpm
```

## Usage

CommonJS:
```js
const hellonpm = require('@phumo/hellonpm').default

hellonpm.hellonpm()
hellonpm.logAuthorInfo()
hellonpm.logLicense()
```

ESModule:
```js
import hellonpm from '@phumo/hellonpm'

hellonpm.hellonpm()
hellonpm.logAuthorInfo()
hellonpm.logLicense()
```
npm package: @phun-ky/design-token-flow
Description: Design token relations
Author: Alexander Vassbotn Røyne-Helgesen
Latest version: 0.1.0

# @phun-ky/design-token-flow

    $ npm i @phun-ky/design-token-flow

**NOTE**

This is alpha, at best, for now

## Contributors

[Stefano Tirloni](http://www.stedesign.com/)
npm package: @phungdaihiep/react-native-jazzicon
Description: React Native Jazzicon
Author: Stanislaw Glogowski
Latest version: 0.0.2

# React Native Jazzicon

[![NPM version][npm-image]][npm-url]

React Native component for [jazzicon](https://github.com/danfinlay/jazzicon)

## Installation

```bash
  $ npm i react-native-jazzicon -S
  $ react-native link react-native-svg
```

## Usage

With numeric `seed`: 

```js
import Jazzicon from 'react-native-jazzicon'
 
export default class App extends React.Component {
   render() {
      return (
        <Jazzicon size={120} seed={Math.round(Math.random() * 10000000)} />
      );
  }
}
```

With ethereum `address`: 

```js
import Jazzicon from 'react-native-jazzicon'
 
export default class App extends React.Component {
   render() { 
      return ( 
        <Jazzicon size={120} address={"0x2152220ab60719d6f987f6de1478971c585841c7"} />
      );
  }
}
```

## License

The MIT License

[npm-image]: https://badge.fury.io/js/react-native-jazzicon.svg
[npm-url]: https://npmjs.org/package/react-native-jazzicon
npm package: @phungdaihiep/react-native-os
Description: node's os module for react-native
Author: phungdaihiep
Latest version: 1.2.7

# os in React Native

node's [os](https://nodejs.org/api/os.html) API in React Native

This module is used by [Peel](http://www.peel.com/)

## Install

* Create a new react-native project. [Check react-native getting started](http://facebook.github.io/react-native/docs/getting-started.html#content)

* In your project dir:

```
npm install react-native-os --save
```

__Note for iOS:__ If your react-native version < 0.40 install with this tag instead:
```
npm install react-native-os@1.0.3 --save
```

## Link in the native dependency

```
react-native link react-native-os
```

***Step 3 Profit***

## Usage

### package.json

_only if you want to write require('os') in your javascript_

```json
{
  "react-native": {
    "os": "react-native-os"
  }
}
```

## Contributors

[Andy Prock](https://github.com/aprock)  

PR's welcome!
npm package: @phungvansyhb/easy-form
Description: A React library help you manage form. Includes various of input component already
Author: Phung Van Sy, Michel
Latest version: 1.2.0

# @phungvansyhb/easy-form

A powerful React form management library that provides a collection of pre-built input components and form handling utilities.

![capture screen](./capture.png)

## Features

-   🎯 Easy form management with React Hook Form integration
-   📦 Pre-built input components
-   🔒 Form validation with Zod
-   🎨 Customizable styling
-   📱 Responsive design
-   🚀 TypeScript support
-   🌙 Vietnamese Lunar Date Picker integration

## Installation

```bash
npm install @phungvansyhb/easy-form
# or
yarn add @phungvansyhb/easy-form
```

## Peer Dependencies

This library requires the following peer dependencies:

```json
{
	"@hookform/resolvers": "^3.0.0",
	"@phungvansyhb/vietnamese-lunar-date-picker": "^1.1.4",
	"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
	"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
	"react-hook-form": "^7.0.0",
	"zod": "^3.24.3"
}
```
## Demo 

You can find storybook here: 

## Customization

It is react hook form, feel free to make your own component

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

MIT © [Phung Van Sy, Michel](https://github.com/phungvansyhb)