open-index/open-npm huggingface dataset:
npm package: @hyteinc/hierarchical-email
Description: Library for converting email addresses back and forth between normal, and hierarchical forms
Author: Joel Barnard
Latest version: 0.2.2

# hierarchical-email

Library used for taking a normal email address such as user@example.com, and converting the email address into the hierarchical email address format: com.example@user

## Why?

Allows for more logical sorting/ordering of email addresses based on domain. 

### DynamoDB
DynamoDB is a NoSQL database offered by Amazon AWS

DynamoDB allows for querying Sort Keys based on 'begins with'. 
If you wanted to find all users that belong to the same domain, example.com you could use hierarchical email format to ease your searching.
npm package: @hytromo/nx-s3-cache
Description: Nx s3 cache using GNU tar and multipart s3 uploads/downloads
Author: Alexandros Solanos
Latest version: 0.0.2

# Yet another nx cache library

## Why?

All the popular nx cache libraries, including the Nx Cloud's one, are using the npm tar package to tar/untar archives using Node.js.
With simple tests, I came to realize that this can be 12x slower than using system calls to GNU tar. This limits where this nx cache runner can work, but it should massively improve performance; enabling people to cache things like `node_modules` if need be in CI.

## Credits

This package is just a combination of [nx-remotecache-custom](https://www.npmjs.com/package/nx-remotecache-custom) and [@pellegrims/nx-remotecache-s3](https://www.npmjs.com/package/@pellegrims/nx-remotecache-s3) with the following changes:

1. Get rid of Node.js streams as much as possible.
2. Get rid of npm tar and use GNU tar.
npm package: @hytusium/eslint-config
Description: An eslint config for personal (kash / Hytus) projects, which contains all configs
Author: kash / Hytus
Latest version: 0.1.4

# @hytusium/eslint-config-common

[![npm version](https://badge.fury.io/js/@hytusium%2Feslint-config.svg)](https://badge.fury.io/js/@hytusium%2Feslint-config)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

An eslint config for personal (kash / Hytus) projects, which contains all configs

## Installation

on npm:

```sh
npm i --save-dev @hytusium/eslint-config
```

on yarn:

```sh
yarn add -D @hytusium/eslint-config
```

on pnpm:

```sh
pnpm add -D @hytusium/eslint-config
```

## LICENSE

MIT
npm package: @hytusium/eslint-config-common
Description: An eslint config for personal (kash / Hytus) projects, which defines common rules
Author: kash / Hytus
Latest version: 0.1.4

# @hytusium/eslint-config-common

[![npm version](https://badge.fury.io/js/@hytusium%2Feslint-config-common.svg)](https://badge.fury.io/js/@hytusium%2Feslint-config-common)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

An eslint config for personal (kash / Hytus) projects, which defines common rules

## Installation

on npm:

```sh
npm i --save-dev @hytusium/eslint-config-common
```

on yarn:

```sh
yarn add -D @hytusium/eslint-config-common
```

on pnpm:

```sh
pnpm add -D @hytusium/eslint-config-common
```

## LICENSE

MIT
npm package: @hytusium/eslint-config-react
Description: An eslint config for personal (kash / Hytus) projects, which defines React rules
Author: kash / Hytus
Latest version: 0.1.4

# @hytusium/eslint-config-react

[![npm version](https://badge.fury.io/js/@hytusium%2Feslint-config-react.svg)](https://badge.fury.io/js/@hytusium%2Feslint-config-react)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

An eslint config for personal (kash / Hytus) projects, which defines React rules

## Installation

on npm:

```sh
npm i --save-dev @hytusium/eslint-config-react
```

on yarn:

```sh
yarn add -D @hytusium/eslint-config-react
```

on pnpm:

```sh
pnpm add -D @hytusium/eslint-config-react
```

## LICENSE

MIT
npm package: @hytusium/eslint-config-typescript
Description: An eslint config for personal (kash / Hytus) projects, which defines TypeScript rules
Author: kash / Hytus
Latest version: 0.1.4

# @hytusium/eslint-config-typescript

[![npm version](https://badge.fury.io/js/@hytusium%2Feslint-config-typescript.svg)](https://badge.fury.io/js/@hytusium%2Feslint-config-typescript)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

An eslint config for personal (kash / Hytus) projects, which defines TypeScript rules

## Installation

on npm:

```sh
npm i --save-dev @hytusium/eslint-config-typescript
```

on yarn:

```sh
yarn add -D @hytusium/eslint-config-typescript
```

on pnpm:

```sh
pnpm add -D @hytusium/eslint-config-typescript
```
npm package: @hytusium/eslint-plugins
Description: eslint plugins for personal (kash / Hytus) projects
Author: kash / Hytus
Latest version: 0.1.4

# @hytusium/eslint-plugins

[![npm version](https://badge.fury.io/js/@hytusium%2Feslint-plugins.svg)](https://badge.fury.io/js/@hytusium%2Feslint-plugins)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

eslint plugins for personal (kash / Hytus) projects

## Installation

on npm:

```sh
npm i --save-dev @hytusium/eslint-plugins
```

on yarn:

```sh
yarn add -D @hytusium/eslint-plugins
```

on pnpm:

```sh
pnpm add -D @hytusium/eslint-plugins
```

## LICENSE

MIT
npm package: @hyu/s3-cnpm
Description: s3 wrapper for cnpm
Author: UnrealShadow
Latest version: 1.0.1

# s3-cnpm

[![Build Status](https://img.shields.io/travis/com/hyunrealshadow/s3-cnpm.svg?style=flat-square)](https://travis-ci.com/hyunrealshadow/s3-cnpm)
[![codecov](https://img.shields.io/codecov/c/gh/hyunrealshadow/s3-cnpm.svg?style=flat-square&logo=codecov)](https://codecov.io/gh/hyunrealshadow/s3-cnpm)

s3 wrapper for [cnpmjs.org NFS](https://github.com/cnpm/cnpmjs.org/wiki/NFS-Guide)

It can support the use of OSS COS S3

## Usage
```bash
npm install @hyu/s3-cnpm
```

```js
const s3 = require('@hyu/s3-cnpm')

const client = s3.create({
  mode: 'public or private'
  accessKeyId: 'S3 accessKeyId' // COS SecretId or OSS AccessKey ID
  secretAccessKey: 'S3 secretAccessKey' // COS SecretKey or OSS Access Key Secret
  endpoint: 'your service endpoint' // e.g. cos.ap-shanghai.myqcloud.com
  bucket: 'your service bucket name' // e.g. npm
  region: 'your service region' // e.g. ap-shanghai
})
```

## Test

Create an .env file in the project root directory

```ini
ACCESS_KEY_ID=SOMETHING
SECRET_ACCESS_KEY=SOMETHING
ENDPOINT=SOMETHING
BUCKET=SOMETHING
REGION=SOMETHING
```

## Liecnse

[MIT](LICENSE)
npm package: @hyu/vite-plugin-toml
Description: A plugin for rollup/vite to import a toml file.
Author: sapphi-red
Latest version: 0.5.2

# vite-plugin-toml

[![npm version](https://badge.fury.io/js/vite-plugin-toml.svg)](https://badge.fury.io/js/vite-plugin-toml) ![automatic deploy](https://github.com/sapphi-red/vite-plugin-toml/workflows/automatic%20deploy/badge.svg) [![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)

Toml file plugin for rollup/vite.

> The name starts with `vite-plugin-`, but this is a historical reason.
> This plugin **does** support rollup too.

Uses [`toml-eslint-parser` package](https://www.npmjs.com/package/toml-eslint-parser) for parsing.
Supports Toml 1.0.0.

## Install

```shell
npm i -D @hyu/vite-plugin-toml # yarn add -D vite-plugin-toml
```

Add plugin in `vite.config.js`.

```js
import { ViteToml } from '@hyu/vite-plugin-toml'

export default {
  plugins: [ViteToml()]
}
```

### Options

- `namedExports` (default: `false`)

Enable named exports.

### Typescript

I recommend using [typescript-plugin-toml](https://github.com/sapphi-red/typescript-plugin-toml).

Alternatively, add this global declaration.

```ts
declare module '*.toml' {
  const value: unknown
  export default value
}
```

## Example

`test.toml`

```toml
key = 'value'
```

`index.ts`

```ts
import test from './test.toml'

console.log(test.key) // 'value'
```
npm package: @hyukyu/grid
Description: A react component to display your Postgres table data. Used in Supabase Dashboard app. Modified by hkkang
Latest version: 1.0.0

# Supabase Grid

A react component to display your Postgresql table data.

[![release](https://img.shields.io/github/release/supabase/grid.svg)](https://github.com/supabase/grid/releases/)
[![CI](https://github.com/supabase/grid/workflows/CI/badge.svg)](https://github.com/supabase/grid/actions?query=workflow%3ACI)

## Install

```bash
npm i @supabase/grid
```

This package requires some peer dependencies, which you need to install by yourself.

```bash
npm i react react-dom @supabase/react-data-grid @supabase/ui
```

## Usage

```js
<SupabaseGrid
  table="countries"
  onSqlQuery={async (query: string) => {
    // run query and return the result
  }}
/>
```

## Properties

#### Required

- `table` SupaTable object or table/view name.
  - readonly mode: support both table and view
  - editable mode: only for table
- `onSqlQuery` run sql query.

#### Optional

- `editable` enable table editor.
- `headerActions` react node to display in grid header.
- `gridProps` props to config grid view.
- `schema` table/view schema. Defaults to 'public'.
- `storageRef` storageRef is used to save state on localstorage.
- `theme` grid theme.
- `onAddColumn` show create new column button if available.
- `onAddRow` show add row button if available.
- `onError` error handler.
- `onEditColumn` show edit column menu if available.
- `onEditRow` show edit row button if available.
- `onDeleteColumn` show delete column menu if available.

## Run example

1. Build library: `npm start`
2. Go to example folder: `cd example`
3. Create **.env** file: `cp .env.example .env`
4. Update **example/.env** file with your Supabase project settings
5. Run example app: `npm start`

## Contributing

- Fork the repo on [GitHub](https://github.com/supabase/grid)
- Clone the project to your own machine
- Commit changes to your own branch
- Push your work back up to your fork
- Submit a Pull request so that we can review your changes and merge

## License

This repo is licensed under MIT.
npm package: @hyune/react
Description: react utils library 
Author: cjh980120@gmail.com
Latest version: 1.0.1

A React utilities library.

```json
"react": ">=17.0.0 <19.0.0",
"react-dom": ">=17.0.0 <19.0.0"
```

## Installation

To install the package, run:

```bash
npm install @hyune/react
```

</br>
</br>

# Hooks

## `useDebounce`

```tsx
const [input, setInput] = useState("")

const handleChange = (e) => setInput(e.target.value)
const debounce = useDebounce(input, 300)
```

## `useObserver`

```tsx
const handleAlert=()=>alert("Find Element");
const divEl =useObserver(handleAlert)

<div ref={divEl}/>
```

## `useWindowSize`

```tsx
const { width, height } = useWindowSize()
```

## `useModal`

```tsx
import React from "react"
import { useModal } from "@hyune/react/hooks"

const ExampleComponent = () => {
	const { openModal, closeModal, Modal } = useModal()

	return (
		<div>
			<button onClick={openModal}>Open Modal</button>
			<Modal
				dismissOnOutsideClick={true}
				modalClassName="example-modal"
				overlay={true}
				overlayClassName="example-overlay"
			>
				<div>
					<h2>Modal Title</h2>
					<p>This is the content of the modal.</p>
					<button onClick={closeModal}>Close Modal</button>
				</div>
			</Modal>
		</div>
	)
}

export default ExampleComponent
```

# Utils

## `fetcher`

```tsx
try {
	const data = await fetcher("/api/data")
	console.log("Data:", data)
} catch (error) {
	console.error("Error fetching data:", error)
}
```
npm package: @hyune/react-carousel
Description: A React carousel banner component
Latest version: 1.0.5

# `@hyune/react-carousel`

A React component library for creating a customizable and responsive carousel.

## Installation

You can install the carousel component using npm:

```bash
npm install @hyune/react-carousel
```

### Compatibility

Ensure your project uses compatible versions of React:

```json
"react": "<19",
"react-dom": "<19"
```

### Usage

Here’s a basic example of how to use the Carousel component:

```tsx
import { Carousel } from '@hyune/react-carousel';

const content = [
  {
    imageUrl: 'https://example.com/image1.jpg',
    mobileImageUrl: 'https://example.com/mobile-image1.jpg',
  },
  {
    imageUrl: 'https://example.com/image2.jpg',
    landingUrl: 'https://example.com/landing-image2.jpg',
  },
  // Add more content items as needed
];

const config = {
  lazyLoad: true,
  autoplay: true,
  autoplayDelay: 3000,
  arrowShow: true,
  countShow: true,
  objectFit: 'cover',
  mobileManipulate: true,
  ratio: {
    breakPoint: 1600,
    pcRatio: 2 / 1,
    mobileRatio: 2.2 / 1,
  },
};

const App = () => (
  <div>
    <Carousel config={config} content={content} />
  </div>
);

export default App;
```

### Component Props

## Carousel

Props:

- config: Configuration object for the carousel. See below for detailed options.
- content: Array of objects defining each carousel item.
- className: Optional className to add custom styles.

> Config Type

```tsx
type Config = {
  lazyLoad?: boolean; // Enables lazy loading of images
  autoplay?: boolean; // Enables automatic cycling of items
  autoplayDelay?: number; // Delay between automatic transitions (in milliseconds)
  arrowShow?: boolean; // Displays navigation arrows
  countShow?: boolean; // Displays item count
  ratio?: BannerRatio; // Aspect ratio configuration
  layout?: 'fit'; // Layout option
  objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'; // Object fit style for images
  mobileManipulate?: boolean; // Enables touch manipulation on mobile
};
```

> BannerRatio Type

```tsx
type BannerRatio = {
  breakPoint: number; // Width at which to apply the ratio settings
  pcRatio: number; // Aspect ratio for desktop
  mobileRatio: number; // Aspect ratio for mobile
};
```
npm package: @hyunjin/babel-plugin-example
Description: 바벨 플러그인 예제 - console.log를 myLogger.log로 변환
Author: hyunjin
Latest version: 1.0.1

# @hyunjin/babel-plugin-example

console.log를 myLogger.log로 변환하는 Babel 플러그인 예제입니다.

## 설치

```bash
npm install --save-dev @hyunjin/babel-plugin-example
# 또는
pnpm add -D @hyunjin/babel-plugin-example
# 또는
yarn add -D @hyunjin/babel-plugin-example
```

## 사용법

### .babelrc 또는 babel.config.js 설정

```json
{
  "plugins": ["@hyunjin/babel-plugin-example"]
}
```

또는

```javascript
module.exports = {
  plugins: ['@hyunjin/babel-plugin-example'],
}
```

### 변환 예제

변환 전:

```javascript
console.log('Hello World!')
console.log('Debug:', value)
```

변환 후:

```javascript
myLogger.log('Hello World!')
myLogger.log('Debug:', value)
```

## myLogger 구현 예제

플러그인은 `console.log`를 `myLogger.log`로 변환하므로, 실행하려면 `myLogger` 객체를 구현해야 합니다:

```javascript
// myLogger.js
const myLogger = {
  log: (...args) => {
    const timestamp = new Date().toISOString()
    console.log(`[${timestamp}]`, ...args)
  },
}

// 전역으로 사용하려면
global.myLogger = myLogger
// 또는 window.myLogger = myLogger; (브라우저)

// 또는 모듈로 export
module.exports = myLogger
```

## 개발

```bash
# 의존성 설치
pnpm install

# 빌드
pnpm build

# 테스트
pnpm test:jest
```

## 라이선스

MIT
npm package: @hyunjin/hooks
Description: collection of useful hooks
Author: hyunjin
Latest version: 2.0.0

# [@hyunjin/hooks](https://www.npmjs.com/package/@hyunjin/hooks)

```
npm install @hyunjin/hooks
```

## Documentation

- [useBodyScrollLock](https://github.com/hyunjinee/hooks/blob/main/src/useBodyScrollLock/useBodyScrollLock.md)
- [useBoolean](https://github.com/hyunjinee/hooks/blob/main/src/useBoolean/useBoolean.md)
- [useCallbackOnce](https://github.com/hyunjinee/hooks/blob/main/src/useCallbackOnce/useCallbackOnce.md)
- [useCopyToClipboard](https://github.com/hyunjinee/hooks/blob/main/src/useCopyToClipboard/useCopyToClipboard.md)
- [useDebounce](https://github.com/hyunjinee/hooks/blob/main/src/useDebounce/useDebounce.md)
- [useDocumentTitle](https://github.com/hyunjinee/hooks/blob/main/src/useDocumentTitle/useDocumentTitle.md)
- [useIsClient](https://github.com/hyunjinee/hooks/blob/main/src/useIsClient/useIsClient.md)
- [useForceUpdate](https://github.com/hyunjinee/hooks/blob/main/src/useForceUpdate/useForceUpdate.md)
- [useIsFirstRender](https://github.com/hyunjinee/hooks/blob/main/src/useIsFirstRender/useIsFirstRender.md)
- [useIsomorphicLayoutEffect](https://github.com/hyunjinee/hooks/blob/main/src/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.md)
- [useOnClickOutside](https://github.com/hyunjinee/hooks/blob/main/src/useOnClickOutside/useOnClickOutside.md)
- [useOnlineStatus](https://github.com/hyunjinee/hooks/blob/main/src/useOnlineStatus/useOnlineStatus.md)
- [useOverlay](https://github.com/hyunjinee/hooks/blob/main/src/useOverlay/useOverlay.md)
- [useSafeContext](https://github.com/hyunjinee/hooks/blob/main/src/useSafeContext/useSafeContext.md)
- [useUpdateEffect](https://github.com/hyunjinee/hooks/blob/main/src/useUpdateEffect/useUpdateEffect.md)
- [useWindowSize](https://github.com/hyunjinee/hooks/blob/main/src/useWindowSize/useWindowSize.md)