open-index/open-npm huggingface dataset:
npm package: @meetgram/utils
Description: <!-- omit in toc --> # `@meetgram/utils`
Latest version: 0.2.6

<!-- omit in toc -->
# `@meetgram/utils`

An internal library of utility functions and React hooks that are used across Meetgram's web application

<!-- omit in toc -->
## Table of Contents

- [Functions](#functions)
  - [`cn`](#cn)
  - [`dateFormatting`](#dateformatting)
  - [`flattenTranslations`](#flattentranslations)
  - [`getTimeAgo`](#gettimeago)
  - [`getTruncatedMessage`](#gettruncatedmessage)
  - [`range`](#range)
  - [`readFile`](#readfile)
  - [`sleep`](#sleep)
  - [`validateFileExtension`](#validatefileextension)
- [Hooks](#hooks)
  - [`useInfiniteScroll`](#useinfinitescroll)
  - [`useScreenHeightTracker`](#usescreenheighttracker)
  - [`useChangeZodErrorLang`](#usechangezoderrorlang)

## Functions

### `cn`

**Description:**
Merges class names using `clsx` and `tailwind-merge` for efficient handling of conditional and conflicting Tailwind classes.

### `dateFormatting`

**Description:**
Formats a JavaScript Date object into a user-friendly string, with optional configurations for time and date formats.

### `flattenTranslations`

**Description:**
Flattens a nested translation object into a single-level object with dot-notated keys.

### `getTimeAgo`

**Description:**
Returns a relative time string, such as "2 hours ago," for a given date.

### `getTruncatedMessage`

**Description:**
Truncates a string to a specified length, appending ellipsis if necessary.

### `range`

**Description:**
Generates an array of numbers between a specified start and end value.

### `readFile`

**Description:**
Asynchronously reads a file and returns its content.

### `sleep`

**Description:**
Pauses the execution for a specified duration (milliseconds).

### `validateFileExtension`

**Description:**
Checks if a file has a valid extension based on allowed types.

## Hooks

### `useInfiniteScroll`

**Description:**
This hook implements infinite scroll functionality. It triggers an action to load more items when the user scrolls to the bottom of a container or the page.

### `useScreenHeightTracker`

**Description:**
This hook tracks and returns the height of the screen in real-time. It updates when the window is resized.

### `useChangeZodErrorLang`

**Description:**
This custom hook allows you to modify the language used for error messages returned by Zod validation schemas.
npm package: @meetinaxd/tinyframe-js
Description: TinyFrame
Author: MeetinaXD
Latest version: 1.0.1

# TinyFrameJS

TypeScript reimplementation of [MightyPork/TinyFrame](https://github.com/MightyPork/TinyFrame).

- Original author: `@cpsdqs`
- Current maintainer: [@MeetinaXD](https://github.com/MeetinaXD)

## Background

The original JavaScript port is no longer available, so this repository reconstructs the protocol runtime in TypeScript and adds a Vitest suite that exercises checksum variants, request/response flows, and all listener types.

During the rewrite several legacy issues were fixed:

- Frame assembly used bitwise `&` instead of `|`, corrupting peer flag propagation.
- After validating the header checksum the parser state was not reset, and it never entered the `data` phase correctly when payloads existed.
- Buffer length accounting included checksum bytes twice, so transmitted payloads were truncated.

## Development

```bash
pnpm install
pnpm run build  # produce ESM+CJS bundles via tsdown
pnpm test       # run vitest
```

## License

This project continues to use the [MIT](./LICENSE)  License defined by `@cpsdqs`.
npm package: @meetingmaker/generate-colors
Description: Get colors for a string with accessibility compliant
Author: Sudhir Mitharwal
Latest version: 1.3.6

# Get colors for strings

## Use case

To differentiate between UI elements of different categories, we can use colors. For example, a unique color per event
type can be used in a Calendar UI to differentiate between different type of events. Sometimes, we may need to show a
unique background color for user's avatar when we don't have a profile picture.

## Install

```bash
npm i -S generate-colors
```

## Usage

Usage are pretty simple. Just import the `getColorForString` method from the module and call it with a string that
uniquely identifies an object (User Account, Event Type). The method returns an array with `[R, G, B]` values.

```js
import { getColorForString } from "generate-colors"

const color = getColorForString("First Name and Last Name")
// color = [90, 39, 50]
```

> Passing the same string again will result in the same color.

### Available Method

```js
/**
 * Generate the color a string
 * @param {string} str String for which we want to get the colors
 * @param {{ contrast: number }} [config={ contrast: 30 }] - Configuration for the color
 * @returns {Array} Array with R,G,B values in sequence
 */
function getColorForString(str, config): [number, number, number]
```

Visit [Playground](https://sudkumar.github.io/generate-colors/) to see in section.

### CLI

This module also exposes a CLI tool to generate colors from command line itself.

```bash
npx generate-colors "unique@example.com" --contrast=35
```

## Contribution

Any kind of contribution is most welcome!!

### Setup

1. Fork the repository to your account.
2. Clone the repository and install dependencies.

```bash
git clone git@github.com:<your_username>/generate-colors
cd generate-colors
npm install
```

3. The source code exists in `/src` directory.

### Available Scripts

| Script   | Description                                |
| :------- | :----------------------------------------- |
| test     | Run all the tests                          |
| lint     | To run the linter                          |
| coverage | To create the test coverage report         |
| dev      | To start the development with docs website |
| release  | To release a new version                   |

> Any script can be executed by calling `npm run <script_name>`.

## Licence

MIT
npm package: @meetingmaker/material-ui-core
Description: React components that implement Google's Material Design.
Author: Material-UI Team
Latest version: 4.11.5

# @material-ui/core

React components that implement Google's Material Design.

## Installation

Install the package in your project directory with:

```sh
// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core
```

## Documentation

[The documentation](https://material-ui.com/)
npm package: @meetingmaker/material-ui-icons
Description: Material Design Svg Icons converted to Material-UI React components.
Author: Material-UI Team
Latest version: 4.11.2

# @material-ui/icons

This package provides the Google [Material icons](https://material.io/tools/icons/) packaged as a set of [React](https://facebook.github.io/react/) components.

## Installation

Install the package in your project directory with:

```sh
// with npm
npm install @material-ui/icons

// with yarn
yarn add @material-ui/icons
```

These components use the Material-UI [SvgIcon](https://material-ui.com/api/svg-icon/) component to
render the SVG path for each icon, and so a have a peer-dependency on the `next` release of Material-UI.

If you are not already using Material-UI in your project, you can add it with:

```sh
// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core
```

## Documentation

- [The documentation](https://material-ui.com/components/icons/#svg-material-icons)
- [The icons search](https://material-ui.com/components/material-icons/)
npm package: @meetingmaker/material-ui-lab
Description: Material-UI Lab - Incubator for Material-UI React components.
Author: Material-UI Team
Latest version: 4.0.0-alpha.58

# @material-ui/lab

This package hosts the incubator components that are not yet ready to move to `core`.

## Installation

Install the package in your project directory with:

```sh
// with npm
npm install @material-ui/lab

// with yarn
yarn add @material-ui/lab
```

The lab has a peer dependency on the core components.
If you are not already using Material-UI in your project, you can install it with:

```sh
// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core
```

## Documentation

[The documentation](https://material-ui.com/components/about-the-lab/)
npm package: @meetingmaker/pdfreader
Description: PDF Reader component using PDF.js library
Author: ngager-group
Latest version: 1.0.6

# ngager-pdfreader

> PDF Reader component using PDF.js library

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

## Install

```bash
npm install --save ngager-pdfreader
```
## Example
https://ngager-group.github.io/ngager-pdfreader/

## Usage

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

import PDF from 'ngager-pdfreader'

class Example extends Component {
  render () {
    return (
      <PDF
        popup
        src="https://nclong87.github.io/file-example_PDF_500_kB.pdf"
        downloadable
        onRequestClose={() => this.setState({ open: false })}
        onLastPage={() => console.log('onLastPage')}
        onPageChanged={(currentPage) => console.log('currentPage', currentPage)}
      />
    )
  }
}
```

## License

MIT © [ngager-group](https://github.com/ngager-group)
npm package: @meetingmaker/pdfwriter
Description: A ReactJS library for writing PDF file
Author: Long Nguyen
Latest version: 1.0.2

# @meetingmaker/pdfwriter

> Very simple ReactJS PDF Writer library using PDFKit

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

## Install

```bash
npm install --save @meetingmaker/pdfwriter
```

## Usage

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

import Pdf from '@meetingmaker/pdfwriter'

import { domToImage } from '@meetingmaker/pdfwriter/domUtils'

const html2canvas = require('html2canvas');

const text = '3. <b>Consultation Services</b>: The Recruitment team provides <b>consultation on </b>new and replacement positions - hiring  –  process, salary<b> range, </b> hehehe<br><br>   <b>availability, possible</b> challenges/risks and strategies <br>to close the roles.';

const text2 = 'The man who knows his worth respects his fellow man because he respects himself first. He does not boast; is not self-seeking; nor does he force his personal opinion on others.';

const text3 = '<span style="color: #FF6347;font-weight: bold;">#</span> What website or app has completely changed your life for better or for worse?'


class Example extends Component {
  async onClick() {
    const pdf = new Pdf({ defaultFontSize: 11, defaultColor: '#222222' });
    try {
      pdf.addText(text, { fontSize: 12, color: '#BBBBBB' });
      pdf.addText(' ');
      pdf.addIcon('', { color: '#BBBBBB' });
      pdf.moveUp();
      pdf.addText(text2, null, { indent: 16 });
      pdf.addText(' ');
      pdf.addText(text3);
      pdf.addText(' ');

      const dataUrl = await domToImage(this.chart);
      pdf.addImage(dataUrl);

      // add Page
      pdf.addPage();
    } catch (e) {
      console.log('ERROR', e);
    }
    // const blob = await pdf.output();
    // console.log('blob', blob);
    await pdf.save('test.pdf');
  }
  render () {
    return (
      <div>
        <div ref={el => {this.chart = el || this.chart; }} >
          {...chart}
        </div>
        <button onClick={() => this.onClick()}>Download PDF</button>
      </div>
    )
  }
}
```
## Example
https://meetingmaker.github.io/meetingmaker/pdfwriter/

## License

MIT © [meetingmaker](https://github.com/meetingmaker)
npm package: @meetio/meetio-colors
Description: The most delicious and wonderful colors for Meetio Theme
Author: Mauro Reis Vieira
Latest version: 4.2.1

# Meetio Colors

The most delicious and wonderful colors for [Meetio Theme](https://github.com/meetio-theme/sublime-meetio-theme)

### Installation

```bash
# NPM
$ npm install @meetio/meetio-colors -D

# YARN
$ yarn add @meetio/meetio-colors
```

## Use

```ts
import { base, lighter, darker, palenight, deepocean } from "@meetio/meetio-colors";
```
npm package: @meetio/meetio-icons
Description: The most delicious and wonderful icons for Meetio Theme
Author: Mauro Reis Vieira
Latest version: 1.12.0

# Meetio Icons

The most delicious and wonderful icons for Meetio Theme

[![GitHub tag](https://img.shields.io/github/release/meetio-theme/meetio-theme-icons.svg?style=for-the-badge)](https://github.com/meetio-theme/meetio-theme-icons/releases)
[![GitHub Issues](https://img.shields.io/github/issues/meetio-theme/meetio-theme-icons.svg?style=for-the-badge)](https://github.com/meetio-theme/meetio-theme-icons/issues)
[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge)](https://github.com/meetio-theme/meetio-theme-icons/blob/master/LICENSE)

### Installation

```bash
# NPM
$ npm install @meetio/meetio-icons --D

# YARN
$ yarn add @meetio/meetio-icons
```
npm package: @meetio/scheme-generator
Description: Easily generate schemes for Sublime Text
Author: Mauro Reis Vieira
Latest version: 3.4.3

# Sublime Text Scheme Generator

[![GitHub tag](https://img.shields.io/github/release/meetio-theme/scheme-generator.svg?style=for-the-badge)](https://github.com/meetio-theme/scheme-generator/releases)
![Sublime Version](https://img.shields.io/badge/built_for_sublimetext-3179-e79330?style=for-the-badge&logo=sublime-text)
[![GitHub Issues](https://img.shields.io/github/issues/meetio-theme/scheme-generator.svg?style=for-the-badge)](https://github.com/meetio-theme/scheme-generator/issues)
[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge)](https://github.com/meetio-theme/scheme-generator/blob/master/LICENSE)

## Getting started

```bash
# Using NPM
npm i @meetio/scheme-generator -D

# Using Yarn
yarn add @meetio/scheme-generator
```

In addition to the base settings, `SchemeSetting` provides more options for `colors`, `ui`, `rules`.
There is also an overrides property, which allows you to set any color key from the [Color Scheme Reference](https://www.sublimetext.com/docs/3/color_schemes.html) directly.

### Example

This is all that's needed to generate a great looking theme:

```ts
import { generateScheme, rules, ui } from '@meetio/scheme-generator';
import { SchemeSetting, UI } from '@meetio/scheme-generator/dist/types';

const colorPalette = {
    accent: '#80CBC4',
    cursor: '#FFCC00',
    foreground: '#EEFFFF',
    background: '#263238',
    comments: '#546E7A',
    deprecated: '#FFC777A1',
    invalid: '#D46C6C66',
    diffAdded: '#ADDB67',
    diffModified: '#E2B93D',
    diffDeleted: '#EF5350',
};

const uiSettings: UI = {
   line_diff_width: '3',
    brackets_options: 'underline, glow',
};

const mergedRules = Object.values(rules).flatMap(rule => rule);

const settings: SchemeSetting = {
    colors: colorPalette,
    ui: {
        ...ui,
        ...uiSettings,
    },
    rules: mergedRules,
};

generateScheme({
    name: 'Scheme Example',
    author: 'Mauro Reis Vieira <mauroreisvieira@gmail.com>',
    output: {
        filename: 'Scheme Example',
    },
    settings,
});

```

### Support

Support below means that the standard Sublime Text grammar has explicit support for the languages.
Other languages will probably still look alright but there is no guarantee that they will.

-   CSS/SASS/SCSS
-   HTML
-   JSON
-   JavaScript/JSX
-   TypeScript/TSX
-   Markdown
-   SQL
-   PHP
-   Python
-   YAML
-   Vue
-   Git

#### External Plugins Support

- [BetterFindBuffer](https://github.com/aziz/BetterFindBuffer)

#### Import default syntax:

```ts
import { generateScheme, SchemeSetting, options } from '@meetio/scheme-generator';

// options contains default styles for syntax scopes.
const { ui, ...rest } = options;

const settings: SchemeSetting = {
    colors: { ... },
    ui,
    rules: [].concat.apply([], Object.values(rest).map(item => item)),
};
```


### Development

```bash
# Using NPM
npm run watch

# Using Yarn
yarn run watch
```

> Project inspired on [code-theme-generator](https://github.com/moxer-theme/code-theme-generator) for VSCode.
npm package: @meetjs/element-plus-kit
Description: 我只是一个 Element-Plus 开发加速器
Author: jiuge
Latest version: 0.1.9


<p align="center">
  <img width="300px" src="https://element-plus-kit.netlify.app/logo.png">
</p>

Element-Plus-Kit 是一个基于 Element-Plus 二次封装的插件库，它可以帮助开发者快速构建高质量的 Vue 3 应用程序。

# Getting Started

使用文档地址：[element-plus-kit](https://element-plus-kit.netlify.app/)

## Installation

```bash
# npm
npm install @meetjs/element-plus-kit --save

# yarn
yarn add @meetjs/element-plus-kit

# pnpm
pnpm add @meetjs/element-plus-kit

```

## Usage

```ts
import ElementPlusKit from '@meetjs/element-plus-kit' 
import 'element-plus-kit/dist/index.css' 

app.use(ElementPlusKit)
```

```html
<template>
    <q-form ref="formRef" :model="FormValue" :form-options="formOptions" /> 
    <q-table  :data="data" :columns="columns"  /> 
</template>
```
npm package: @meetjs/vant4-kit
Description: 一款基于 Vant4.x 的增强组件库
Author: jiuge
Latest version: 1.0.1

<p align="center">
    <img alt="logo" src="https://vant4-kit.netlify.app/logo.png" width="220" height="220" style="margin-bottom: 10px;">
</p>

<h1 align="center">Vant4-Kit</h1>

<p align="center">一款基于Vant 4.x 的增强库，旨在加速开发，早点下班</p>

---
## Getting Started

文档地址：[vant4-kit](https://vant4-kit.netlify.app/)


## Installation
```bash
# npm
npm install vant4-kit --save

# yarn
yarn add vant4-kit

# pnpm
pnpm add vant4-kit

```

## Usage

```ts
import { createApp } from 'vue';
import Vant from 'vant';
// 1. Import the Vant
import Vant4Kit from 'vant4-kit';
// 2. Import the vant4-kit
import 'vant4-kit/dist/index.css';

const app = createApp();

// 3. Register the components 
app.use(Vant);
app.use(Vant4Kit);
```

```html
<template>
    <x-form ref="formRef" :model="FormValue" :items="formOptions" /> 
</template>
```