open-index/open-npm huggingface dataset:
npm package: @natachah/vanilla-frontend
Description: A vanilla frontend framework
Author: Natacha Herth
Latest version: 1.0.0

# Vanilla Frontend

A simple and minimal framework that prioritize semantic HTML and accessibility.

Quickly start a new project with a clean design and a minimal override for customization.

More info on the(https://vanilla-frontend-packages4913705-8c38a44c52586aedf08b2939a0529c.gitlab.io/)[DOC]

## Bug or suggestion

Please report any bug of issues on (https://gitlab.com/packages4913705/vanilla-frontend/-/issues)[Gitlab] or send me an email !
npm package: @natade-coco/jpqr
Description: JPQR library that uses go.mercari.io/go-emv-code by WebAssembly.
Author: iwashi1t
Latest version: 0.1.1

# JPQR

JPQR library that uses [go.mercari.io/go-emv-code](https://github.com/mercari/go-emv-code) by WebAssembly.

## Installation

```sh
npm install @natade-coco/jpqr
```

## Usage

```js
import JPQR from '@natade-coco/jpqr';

const code = JPQR.mpmEncode({
  payloadFormatIndicator: '01',
  pointOfInitiationMethod: 'dynamic',
  merchantAccountInformation: [{
    tag: '26',
    length: '68',
    value: '0019jp.or.paymentsjapan011300000000000010204000103060000010406000001'
  }],
  merchantCategoryCode: '5812',
  transactionCurrency: '392',
  transactionAmount: '498',
  countryCode: 'JP',
  merchantName: 'xxx',
  merchantCity: 'xxx',
  postalCode: '5300005',
  merchantInformation: {
    languagePreference: 'JA',
    name: 'ナタデココ カフェ'
  }
});

console.log(code);  // 00020101021226680019jp.or.paymentsjapan01130000000000001020400010306000001040600000152045812530339254034985802JP5903xxx6003xxx6107530000564190002JA0109ナタデココ カフェ63045BA0
showQRCode(code);
```

## API

### `mpmEncode(mpmInformation: MPMInformation): string`

Get JPQR MPM code for showing QR Code.
For details, please refer to JPQR MPM guideline 1.1.

#### Example

```js
const code = JPQR.mpmEncode({
  payloadFormatIndicator: '01',  // '01' 固定
  pointOfInitiationMethod: 'dynamic',  // 静的 'static' または 動的 'dynamic'
  merchantAccountInformation: [{
    tag: '26',
    length: '68',
    value: '0019jp.or.paymentsjapan011300000000000010204000103060000010406000001'
  }],
  merchantCategoryCode: '5812',
  transactionCurrency: '392',  // 円 '392' 固定
  transactionAmount: '498',  // 静的の場合は任意、動的の場合は必須
  countryCode: 'JP',  // 日本 'JP' 固定
  merchantName: 'xxx',
  merchantCity: 'xxx',
  postalCode: '5300005',
  merchantInformation: {
    languagePreference: 'JA',  // 日本語 'JA' 固定
    name: 'ナタデココ カフェ'
  }
});
```
npm package: @natade-coco/react-pay-js
Description: Library for COCOPay integration
Author: natadeCOCO
Latest version: 0.3.7

# @natade-coco/react-pay-js

> Library for COCOPay integration

[![NPM](https://img.shields.io/npm/v/@natade-coco/react-pay-js.svg)](https://www.npmjs.com/package/@natade-coco/react-pay-js) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## 🚧 Release Candidate

This is _pre-release_ software. Changes may occur at any time, and
certain features might be missing or broken. 

## 📌 Requirements

You have to enable Stripe connected account via [natadeCOCO Console](https://console.natade-coco.com/) and get your account ID.

## ⚙️ Install

```bash
npm install --save @natade-coco/react-pay-js
```

## 🚀 Usage

```tsx
import React, { Component } from 'react'

import { Payout } from '@natade-coco/react-pay-js'
import '@natade-coco/react-pay-js/dist/index.css'

class Example extends Component {
  const handleOnCompleted = (txId: string, status: string, chargeId: string, receiptUrl: string): boolean => {
    // callback after payment success
    return true
  }
  const handleOnError = (reason: any) => {
    // callback when an error occurred
  }
  render() {
    return <Payout
      theme='light' // option: light(default), dark, inverted
      layout='basic' // option: basic(default), short, stack 
      account='YOUR_ACCOUNT_ID'
      amount={1000} 
      onCompleted={handleOnCompleted}
      onError={handleOnError} />
  }
}
```

## 🍭 Layouts & Colors

|       |                            light                             |                            dark                             |                            inverted                             |
| :---: | :----------------------------------------------------------: | :---------------------------------------------------------: | :-------------------------------------------------------------: |
| basic | <img src="./example/public/img/basic-light.png" width="300"> | <img src="./example/public/img/basic-dark.png" width="300"> | <img src="./example/public/img/basic-inverted.png" width="300"> |
| short | <img src="./example/public/img/short-light.png" width="160"> | <img src="./example/public/img/short-dark.png" width="160"> | <img src="./example/public/img/short-inverted.png" width="160"> |
| stack | <img src="./example/public/img/stack-light.png" width="140"> | <img src="./example/public/img/stack-dark.png" width="140"> | <img src="./example/public/img/stack-inverted.png" width="140"> |


## License

MIT © [natadeCOCO](https://natade-coco.com)
npm package: @natahouse/eslint-config-react
Description: Base Natahouse's JSX ESLint config, following our styleguide
Author: Natahouse
Latest version: 0.0.2

<img src="https://avatars1.githubusercontent.com/u/35275557?v=4&s=200" width="128px" height="128px" align="left"/>

# Nata.house React Style Guide

Nosso style guide é baseado no [Airbnb's](https://github.com/airbnb/javascript/tree/master/react). Disponível em português [aqui](https://github.com/ronal2do/airbnb-react-styleguide).

## Instalando

```shell
$ yarn add @natahouse/eslint-config-react
```

Para incluir no projeto, crie o arquivo `.eslintrc` com a seguinte config:

```json
{
  "extends": ["@natahouse/eslint-config-react"]
}
```

## Regras adicionadas

Por enquanto estamos utilizando o estilo base Airbnb

## Contribuindo

Sinta-se a vontade para abrir uma PR
npm package: @natahouse/react-ellipsis-with-tooltip
Description: truncates (with ellipsis) overflowing text elements and adds a tooltip
Author: amirfefer
Latest version: 1.1.0

[![Build Status](https://travis-ci.org/amirfefer/react-ellipsis-with-tooltip.svg)](https://travis-ci.org/amirfefer/react-ellipsis-with-tooltip)
# react-ellipsis-and-tooltip
Recognizes whether a text element is overflowed,

truncates (with ellipsis) it and adds bootstrap's tooltip.

Try via [stroybook](https://amirfefer.github.io/react-ellipsis-with-tooltip/
)

## Usage

1. Install package
   > npm install --save react-ellipsis-with-tooltip

2. Import it

    ```javascript
    import EllipsisWithTooltip from 'react-ellipsis-with-tooltip'
    ```
3. Wrap with text elements

## Examples
### Inside a table cell
```javascript
<td>
  <EllipsisWithTooltip placement="bottom">
     Lorem Ipsum
  </EllipsisWithTooltip>
<td>      
```

### Wrapping anchor element
```javascript
<td>
  <EllipsisWithTooltip placement="bottom">
    <a href="#">  Lorem Ipsum </a> 
  </EllipsisWithTooltip>
<td>      
```
npm package: @nataicons/react
Description: A fun-themed simple open source icon made by the folks at Natatoko. This package provides React components for easy integration of icons.
Author: Afnizar Nur Ghifari
Latest version: 1.0.1

<p align="center">
  <a href="https://github.com/afnizarnur/nataicons">
    <img src="https://user-images.githubusercontent.com/4648648/96120944-841ca180-0f19-11eb-892e-4312017f5e8b.png" width="44">
  </a>
</p>
<h3 align="center">Nataicons</h3>

<p align="center">
  A fun-themed simple open source icon by the folks at <a href="https://natatoko.com">Natatoko</a>. 
</p>

---

<div align="center">
  <img src="https://user-images.githubusercontent.com/4648648/96269199-404a9a80-0ff4-11eb-9039-c71f1225c721.png">
</div>

## Installation

Install with npm
```bash
npm install @nataicons/react
```

## Usage

1. Import the icon components

```jsx
import { AlarmIcon, NataIcon } from "@nataicons/react"
```

2. Use the icon components in your JSX

```jsx
function MyComponent() {
  return (
    <div>
      <AlarmIcon color="red" size={24} />
      <NataIcon name="bell" color="blue" size={32} />
    </div>  
  )
}
```

You can set a custom `size` (in pixels) or use the default sizes (24px or 20px). The `color` prop allows you to change the icon color.
om `size` (in pixels) or use the default sizes. The `color` prop allows you to change the icon color.


## License

Nataicons is licensed under the [MIT License](https://github.com/afnizarnur/nataicons//tree/main/LICENSE). In short, you are free to use this icons in any personal, open-source or commercial work. Attribution is optional but appreciated.
npm package: @nataicons/vue
Description: A fun-themed simple open source icon made by the folks at Natatoko. This package provides Vue components for easy integration of icons.
Author: Afnizar Nur Ghifari
Latest version: 1.0.1

<p align="center">
  <a href="https://github.com/afnizarnur/nataicons">
    <img src="https://user-images.githubusercontent.com/4648648/96120944-841ca180-0f19-11eb-892e-4312017f5e8b.png" width="44">
  </a>
</p>
<h3 align="center">Nataicons</h3>

<p align="center">
  A fun-themed simple open source icon by the folks at <a href="https://natatoko.com">Natatoko</a>. 
</p>

---

<div align="center">
  <img src="https://user-images.githubusercontent.com/4648648/96269199-404a9a80-0ff4-11eb-9039-c71f1225c721.png">
</div>

## Installation

Install with npm
```bash
npm install @nataicons/vue
```

## Usage

1. Import the icon components

```js
import { AlarmIcon, AlertIcon, NataIcon } from "@nataicons/vue"
```

2. Use the icon components in your template


```jsx
<template>
  <div>
    <AlarmIcon color="red" size="24" />
    <NataIcon name="bell" color="blue" size="32" />
  </div>
</template>
<script>
  import { AlarmIcon } from "@nataicons/vue"
    export default {
    components: { AlarmIcon }
  }
</script>
```

You can set a custom `size` (in pixels) or use the default sizes (24px or 20px). The `color` prop allows you to change the icon color.
om `size` (in pixels) or use the default sizes. The `color` prop allows you to change the icon color.


## License

Nataicons is licensed under the [MIT License](https://github.com/afnizarnur/nataicons//tree/main/LICENSE). In short, you are free to use this icons in any personal, open-source or commercial work. Attribution is optional but appreciated.
npm package: @nataliajagiello/nospace
Description: Removes all spaces from a string
Latest version: 2.0.2

# nospace

[![npm (scoped)](https://img.shields.io/npm/v/@nataliajagiello/nospace.svg)](https://www.npmjs.com/package/@nataliajagiello/nospace)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@nataliajagiello/nospace.svg)](https://www.npmjs.com/package/@nataliajagiello/nospace)


## Install

```
$ npm install @nataliajagiello/nospace
```

## Usage

```js
const nospace = require("@nataliajagiello/nospace");

nospace("So much space!");
//=> "Somuchspace!"

nospace(1337);
//=> Uncaught TypeError: String is required!
//    at nospace (<anonymous>:2:41)
//    at <anonymous>:1:1
```

Package that removes all spaces from a string
npm package: @nataliajagiello/nospace-react
Description: Removes all spaces from a string
Author: nataliajagiello
Latest version: 0.2.6

# nospace

[![npm (scoped)](https://img.shields.io/npm/v/@nataliajagiello/nospace-react.svg)](https://www.npmjs.com/package/@nataliajagiello/nospace-react)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@nataliajagiello/nospace-react.svg)](https://www.npmjs.com/package/@nataliajagiello/nospace-react)


## Install

```
$ npm install @nataliajagiello/nospace-react
```

## Usage

```js
import {nospace} from "@nataliajagiello/nospace-react";

<NoSpace text="So much space!"/>
//=> "Somuchspace!"

<NoSpace text={1337}/>
//=> Uncaught TypeError: String is required!
//    at nospace (<anonymous>:2:41)
//    at <anonymous>:1:1
```

Package that removes all spaces from a string
npm package: @nataliajagiello/react-notifications
Description: Package containing alert component
Author: nataliajagiello
Latest version: 0.4.1

# react-notifications

[![npm (scoped)](https://img.shields.io/npm/v/@nataliajagiello/react-notifications.svg)](https://www.npmjs.com/package/@nataliajagiello/react-notifications)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@nataliajagiello/react-notifications.svg)](https://www.npmjs.com/package/@nataliajagiello/react-notifications)


## Install

```
$ npm install @nataliajagiello/react-notifications
```

## Usage

```js
import {UserMessage} from "@nataliajagiello/react-notifications";

<UserMessage text="Uwaga alert!"/>

NPM Package that shows user notifications
npm package: @natalialasz/randomid-generator
Description: The RandomID Generator is a Node.js module designed to generate random alphanumeric IDs of a specified length.
Latest version: 1.0.1

# RandomID Generator

## Description

The RandomID Generator is a Node.js module designed to generate random alphanumeric IDs of a specified length.

## Installation

You can install the RandomID Generator via npm using the following command:

```bash
npm install @natalialasz/randomid-generator
```
## Usage

Below is an example demonstrating how to use the RandomID Generator package:

```javascript
const randomID = require('@natalialasz/randomid-generator');

// Generate an identifier with a length of 10
const id = randomID(10);
console.log(id); // It will display a random identifier with a length of 10
npm package: @nataliespringer/nataliesdesignsystem
Description: ![picture of storybook](https://github.com/user-attachments/assets/cf98766d-8b90-44ab-b718-94ab16e63205)
Latest version: 1.3.0

![picture of storybook](https://github.com/user-attachments/assets/cf98766d-8b90-44ab-b718-94ab16e63205)

# getting started

```sh
npx create-expo-app --template expo-template-storybook AwesomeStorybook
```

or

```sh
yarn create expo-app --template expo-template-storybook AwesomeStorybook
```

# app

```sh
yarn start
```

# RN Storybook (ondevice)

In this template you can now run `yarn storybook` to start ondevice storybook or `yarn start` to start your expo app.
This works via env variables and expo constants.

```sh
# either
yarn storybook

# ios
yarn storybook:ios

# android
yarn storybook:android
```

If you add new stories on the native (ondevice version) you either need to have the watcher running or run the stories loader

To update the stories one time

```sh
yarn storybook-generate
```

# Web

Start react native web storybook:

```
yarn storybook:web
```

build react native web storybook:

```sh
yarn build-storybook
```