open-index/open-npm huggingface dataset:
npm package: @hyperjumptech/monika-notification
Description: notification package for monika
Author: @hyperjumptech
Latest version: 1.18.3

# About

This is the notification package used by [Monika](https://github.com/hyperjumptech/monika).

## How to Use

For details about the various notification channels supported, see the [notification documentations here](https://monika.hyperjump.tech/guides/notifications). Or visit the Monika repository on github to see the sources.

## Contributing

See the main `README.md` in the Monika repository for contributing details.

## Releasing

The notification package is released to npm. When creating a PR for the package, please ensure that:

1. Linter is run.
2. The changes work with the main Monika application.
3. The command `npm run build` from packages/notification ran and builds without error.
4. The versions in ./package.json are properly incremented.
5. Create a PR to merge to `main`.

If releasing Monika application:

1. Ensure that the notification dependency is updated:

```yaml
 "dependencies": {
 "@hyperjumptech/monika-notification": x.y.z // enter the correct version here

```

## References

For further details see:

1. [Turborepo](https://turbo.build/repo/docs/handbook/workspaces#workspaces-which-depend-on-each-other)
2. [Monika docs](https://monika.hyperjump.tech/overview)
3. [Notification documentations](https://monika.hyperjump.tech/guides/notifications)
npm package: @hyperjumptech/strapi-optimized-image
Description: Strapi optimized image
Author: @hyperjumptech
Latest version: 0.0.5

# Strapi Optimized Image

Retrieve optimized image from [Strapi](https://strapi.io/).

## Quick Start

### Install

```sh
npm i --save-exact @hyperjumptech/strapi-optimized-image
```

### Usage

```typescript
import {
  PreferredSize,
  strapiOptimizedImage,
} from "@hyperjumptech/strapi-optimized-image";

const formats = {
  thumbnail: {
    height: 180,
    url: "https://example.com/logo_thumbnail.svg",
    width: 320,
  },
  small: {
    height: 225,
    url: "https://example.com/logo_small.svg",
    width: 400,
  },
  large: {
    height: 900,
    url: "https://example.com/logo_large.svg",
    width: 1600,
  },
};
const { height, src, width } = strapiOptimizedImage({
  image: {
    formats,
    height: 720,
    url: "https://example.com/logo.svg",
    width: 1280,
  },
  fallback: "smaller",
  preferredSize: PreferredSize.Medium,
});

console.log({ height, src, width });
// { height: 225, src: "https://example.com/logo_small.svg", width: 400 }
```

| Props         | Default Value | Description                                                                                                                       | Example                                                          |
| ------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
| image         | `undefined`   | The image object structure from the Strapi API response                                                                           | `{ formats, height: 100, url: "/uploads/logo.svg", width: 100 }` |
| fallback      | "original"    | Uses the original size of the image if set to `"original"`. Tries to find a smaller image if set to `"smaller"`.                  | `"original" / "smaller"`                                         |
| preferredSize | "large"       | Attempts to use the preferred size. If unavailable, it will use the original or a smaller image, depending on the fallback value. | `"thumbnail" / "small" / "medium" / "large"`                     |

## License

The MIT License.
npm package: @hyperjumptech/whatsapp-business-sender
Description: Node.js library to send message through Whatsapp Business API
Author: hyperjumptech
Latest version: 1.0.3

# **Whatsapp Business Sender**

Whatsapp Business Sender is the library for sending whatsapp for business message api using node js.

## **Built With**

- [Nodejs](https://nodejs.org/en/)
- [Axios](https://github.com/axios/axios)
- [Typescript](https://www.typescriptlang.org)

## **Getting Started**

### Prerequisites

- Node.js v^14.14.37
- npm v6.14.11

### Installing

```bash
npm install @hyperjumptech/whatsapp-business-sender
```

## **Libraries**

### Exposed Libraries

```
  - loginUser
  - checkContacts
  - sendMessageTemplateText
```

### Descriptions

**_loginUser_**

The method to run login-user endpoint in the Whatsapp Business API :

- baseURL : Whatsapp business api server host
- creds : Whatsapp business user credentials, consist of username and password

_usage:_

```js
import whatsapp from "@hyperjumptech/whatsapp-business-sender";

const resp = await whatsapp.loginUser("<server host>", {
  username: "<whatsapp username>",
  password: "<whatsapp password>",
});
```

**_checkContacts_**

The method to run check-contacts endpoint in the Whatsapp Business API :

- baseURL : Whatsapp business api server host
- token : token from the user login
- phones : string arrays of phone number using country code

_usage:_

```js
import whatsapp from "@hyperjumptech/whatsapp-business-sender";

const resp = await whatsapp.checkContacts("<server host>", "<login token>", [
  "<phone number>",
  "<phone number>",
  "<phone number>",
]);
```

**_sendMessageTemplateText_**

The method to run send-message-template-text endpoint in Whatsapp Business API :

- baseURL : Whatsapp business api server host
- token : token from the user login
- data : consist of phone number and template configurations

_usage:_

```js
import whatsapp from "@hyperjumptech/whatsapp-business-sender";

const resp = await whatsapp.sendMessageTemplateText(
  "<server host>",
  "<login token>",
  {
    phone: "<phone number with country code>",
    template: {
      namespace: "<Message Template Namespace>",
      name: "<Message Template Element Name>",
      language: {
        policy: "<Message Template Language Policy>",
        code: "<Message Template Language Code>",
      },
      components: [
        {
          type: "body",
          parameters: [
            {
              type: "<param type>",
              text: "<param value>",
            },
          ],
        },
      ],
    },
  }
);
```

## Discussions

If you need help, want to give feedback, or have a great idea to improve this library, get involved! Let us know in the [Github discussions](https://github.com/hyperjumptech/whatsapp-business-sender/discussions).

Please abide by the [Contributor's Code of Conduct](CODE_OF_CONDUCTS.md)

## License

[MIT](./LICENSE.txt) License.
npm package: @hyperjumptech/ztorage
Description: A flexible and type-safe wrapper for key-value storage
Author: Kevin Hermawan
Latest version: 1.0.3

# Ztorage

![Minified size](https://img.shields.io/bundlephobia/min/@hyperjumptech/ztorage) ![Test coverage](https://img.shields.io/codecov/c/github/hyperjumptech/ztorage) ![Monthly download](https://img.shields.io/npm/dm/@hyperjumptech/ztorage)

Ztorage is a flexible and type-safe wrapper for key-value storage that is designed to work with various storage mediums, including [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) and other storage backends. It takes advantage of [Zod](https://github.com/colinhacks/zod), a powerful TypeScript schema validation library, to provide automatic parsing and validation of data.

## Articles

- [Open-sourcing Ztorage: A Type-Safe Wrapper for Key-Value Storage in JavaScript](https://medium.com/hyperjump-tech/open-sourcing-ztorage-a-type-safe-wrapper-for-key-value-storage-in-javascript-2cfe9879ea1a?source=rss----fabfd42372dc---4)

## Features

- Works with various storage mediums
- Provides type safety for key-value storage
- Enables automatic parsing and validation of data
- Zero dependencies

## Installation

To use Ztorage, you must have Zod installed. You can install `@hyperjumptech/ztorage` and `zod`, by running the following command:

**NPM**

```
npm install @hyperjumptech/ztorage zod
```

**Yarn**

```
yarn add @hyperjumptech/ztorage zod
```

**pnpm**

```
pnpm add @hyperjumptech/ztorage zod
```

## Usage

```ts
import { z } from "zod";
import Ztorage from "@hyperjumptech/ztorage";

// Define a schema for the data you want to store
const schema = z.object({
  isDarkModeEnabled: z.boolean(),
});

// Instantiate a Ztorage object with a schema and storage functions
const storage = new Ztorage({
  schema,
  onGetItem: async (key) => {
    return localStorage.getItem(key);
  },
  onSetItem: async (key, value) => {
    localStorage.setItem(key, value);
  },
  onRemoveItem: async (key) => {
    localStorage.removeItem(key);
  },
});

// Set item to storage
await storage.setItem("isDarkModeEnabled", true);

// Get item from storage
const isDarkModeEnabled = await storage.getItem("isDarkModeEnabled");
console.log(isDarkModeEnabled); // true

// Remove item from storage
await storage.removeItem("isDarkModeEnabled");
```

## License

[MIT License](/LICENSE)
npm package: @hyperkid/react-final-form
Description: 🏁 High performance subscription-based form state management for React
Author: Erik Rasmussen
Latest version: 7.0.0

# 🏁 React Final Form

[![React Final Form](banner.png)](https://final-form.org/react)

[![Backers on Open Collective](https://opencollective.com/final-form/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/final-form/sponsors/badge.svg)](#sponsors) [![NPM Version](https://img.shields.io/npm/v/react-final-form.svg?style=flat)](https://www.npmjs.com/package/react-final-form)
[![NPM Downloads](https://img.shields.io/npm/dm/react-final-form.svg?style=flat)](https://www.npmjs.com/package/react-final-form)
[![Build Status](https://travis-ci.org/final-form/react-final-form.svg?branch=master)](https://travis-ci.org/final-form/react-final-form)
[![codecov.io](https://codecov.io/gh/final-form/react-final-form/branch/master/graph/badge.svg)](https://codecov.io/gh/final-form/react-final-form)
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

✅ Zero dependencies (that affect your bundle size)

✅ Only peer dependencies: React and
[🏁 Final Form](https://github.com/final-form/final-form#-final-form)

✅ Opt-in subscriptions - only update on the state you need!

✅ 💥 [**3.0k gzipped**](https://bundlephobia.com/result?p=react-final-form) 💥

---

[<img align="right" src="docs/sencha.svg" height="100"/>](https://www.sencha.com/)

### React Final Form is sponsored by [Sencha](https://www.sencha.com/).

Comprehensive JS framework and UI components for building enterprise-grade web apps.

---

## 💬 [Give Feedback on React Final Form](https://goo.gl/forms/dxdfxKNy64DLb99z2) 💬

In the interest of making 🏁 React Final Form the best library it can be, we'd love your thoughts and feedback.

[Take a quick survey](https://goo.gl/forms/dxdfxKNy64DLb99z2).

---

React Final Form is a thin React wrapper for [Final Form](https://final-form.org), which is a subscriptions-based form state management library that uses the [Observer pattern](https://en.wikipedia.org/wiki/Observer_pattern), so only the components that need updating are re-rendered as the form's state changes.

## [Getting Started](https://final-form.org/docs/react-final-form/getting-started)

## [Philosophy](https://final-form.org/docs/react-final-form/philosophy)

## [Examples](https://final-form.org/docs/react-final-form/examples)

## [API](https://final-form.org/docs/react-final-form/api)

## [FAQ](https://final-form.org/docs/react-final-form/faq)

<img src="https://static.scarf.sh/a.png?x-pxid=8feec529-43ac-4b78-8ad9-17c280b4f2d9" />
npm package: @hyperkitxyz/elements
Description: A suite of headless, unstyled custom elements designed to make building rich, interactive UIs simple and fast. Hyperkit allows you to create dynamic, scalable interfaces with pure HTML & CSS, with no need for writing JavaScript.
Author: Chris Garrett
Latest version: 0.0.5

# @hyperkitxyz/elements

A suite of headless, unstyled custom elements designed to make building rich, interactive UIs simple and fast. Hyperkit allows you to create dynamic, scalable interfaces with pure HTML & CSS, with no need for writing JavaScript.

## Elements

Here is a list of the available elements in this package:

- [Modal](https://hyperkit.xyz/modal): A versatile modal element for displaying content in an overlay with optional transitions, backdrops, and dismissible actions.
- [Popover](https://hyperkit.xyz/popover): A simple popover element for showing contextual information or interactive content in an overlay.
- [Detail & Accordion](https://hyperkit.xyz/accordion): Expandable content elements, with optional accordion functionality and smooth transitions.
- [Select](https://hyperkit.xyz/select): A flexible select element that integrates with inputs and fires change events on selection.
- [Fieldset Repeater](https://hyperkit.xyz/fieldset-repeater): A dynamic form component allowing users to add and remove repeated sets of input fields.
- [Sortable List](https://hyperkit.xyz/sortable): A drag-and-drop sortable list with optional position tracking.
- [Calendar](https://hyperkit.xyz/calendar): A calendar element for navigating and selecting dates, with optional input field integration.
- [Masked Input](https://hyperkit.xyz/masked-input): An input element for applying custom masks to user input.
- [Transition](https://hyperkit.xyz/transition): An element for animating content visibility with customizable enter and exit classes.
- [Arrow Nav](https://hyperkit.xyz/arrow-nav): Navigate between focusable elements using up and down arrow keys.

For more details and examples, visit the [Hyperkit documentation](https://hyperkit.xyz).

## Installation

To install the elements:

```bash
bun add @hyperkitxyz/elements
```

## Usage

Simply import the elements and include them in your HTML to start building dynamic interfaces.

```js
import "@hyperkitxyz/modal"
```

---

For full documentation and examples, visit [hyperkit.xyz](https://hyperkit.xyz).
npm package: @hyperknot/astro-dpr
Description: Astro is a modern site builder with web best practices, performance, and DX front-of-mind.
Author: withastro
Latest version: 100.0.11

# DevicePixelRatio support for Astro

<br/>

<p align="center">
  <img src="../../.github/assets/banner.jpg" alt="Build the web you want">
  <br/><br/>
  <a href="https://astro.build">Astro</a> is the all-in-one web framework designed for speed.
  <br/>
  Pull your content from anywhere and deploy everywhere, all powered by your favorite UI components and libraries.
  <br/><br/>
</p>

## Install

```bash
# Recommended!
npm create astro@latest

# Manual:
npm install --save-dev astro
```

Looking for help? Start with our [Getting Started](https://docs.astro.build/en/getting-started/) guide.

Looking for quick examples? [Open a starter project](https://astro.new/) right in your browser.

## Documentation

Visit our [official documentation](https://docs.astro.build/).

## Support

Having trouble? Get help in the official [Astro Discord](https://astro.build/chat).

## Contributing

**New contributors welcome!** Check out our [Contributors Guide](/CONTRIBUTING.md) for help getting started.

Join us on [Discord](https://astro.build/chat) to meet other contributors. We'll help you get your first contribution in no time!

## Sponsors

Astro is generously supported by [Vercel](https://vercel.com/), [storyblok](https://storyblok.com/), and several other amazing organizations [listed here.](https://opencollective.com/astrodotbuild)

[❤️ Sponsor Astro! ❤️](https://github.com/withastro/.github/blob/main/FUNDING.md)
npm package: @hyperlab-solutions/dialex
Description: JavaScript Client for HyperLab Dialex API
Author: Riyadh Al Nur
Latest version: 1.0.0

# Dialex SDK for JavaScript  
JavaScript Client for HyperLab Dialex API  

[![Build Status](https://travis-ci.org/HyperLab-Solutions-Sdn-Bhd/dialex-sdk-javascript.svg?branch=master)](https://travis-ci.org/HyperLab-Solutions-Sdn-Bhd/dialex-sdk-javascript) [![Coverage Status](https://coveralls.io/repos/github/HyperLab-Solutions-Sdn-Bhd/dialex-sdk-javascript/badge.svg?branch=master)](https://coveralls.io/github/HyperLab-Solutions-Sdn-Bhd/dialex-sdk-javascript?branch=master) [![](https://data.jsdelivr.com/v1/package/npm/@hyperlab-solutions/dialex/badge?style=rounded)](https://www.jsdelivr.com/package/npm/@hyperlab-solutions/dialex) [![Known Vulnerabilities](https://snyk.io/test/github/hyperlab-solutions-sdn-bhd/dialex-sdk-javascript/badge.svg)](https://snyk.io/test/github/hyperlab-solutions-sdn-bhd/dialex-sdk-javascript)  

## Install  

### Node

```js
$ npm install --save @hyperlab-solutions/dialex
```

### **Browser**

```html
<script src="https://cdn.jsdelivr.net/npm/@hyperlab-solutions/dialex/lib/dialex.min.js"></script>
```

## Quick Start

### NodeJS

```js
const Dialex = require('@hyperlab-solutions/dialex').Dialex;
const dialex = new Dialex('apiKey');
```

### Browser

```js
<script src="https://cdn.jsdelivr.net/npm/@hyperlab-solutions/dialex/lib/dialex.min.js"></script>
...
<script>
let dial = new dialex.Dialex('apiKey');
</script>
```  

## Developing  

Clone using git:  
`git clone git@github.com:HyperLab-Solutions-Sdn-Bhd/dialex-sdk-javascript.git`  

Install dependencies:  
`npm install`  

Testing during development:  
`npm run dev`  

To build for production:  
`npm run build`  

Run tests:  
`npm test`