open-index/open-npm huggingface dataset:
npm package: @hyeon/spec
Description: Specification pattern for TypeScript
Author: hyeon
Latest version: 1.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

[Specification pattern - Wikipedia](https://en.wikipedia.org/wiki/Specification_pattern#TypeScript) 

- ts 에제가있지만 항상 타입이 unkown인 문제가있다.
- 제네릭타입으로 받아올수있도록 타입을 추가하였다.
- Spec 클래스를 추가하였다.

```ts
import { Spec, type ISpecification } from '@hyeon/spec'

const product = new Product()

// 새롭게 추가된 상품인지 확인하는 스펙
const isNewSpec: ISpecification<Product> = new Spec(
  (candidate) => candidate.isNew === true
)
// 상품의 갯수가 0개이상인지 확인하는 스펙
const isQtyChangedSpec: ISpecification<Product> = new Spec(
  (candidate) => candidate.qty > 0
)
// 새롭게 추가된 상품이 아니고 기존 상품이면서 갯수가 변경되고 1개 이상일때
const isOriginalAndQtyChangedSpec: ISpecification<Product> =
  isNewSpec
    .not()
    .and(isQtyChangedSpec)

if (isNewSpec.isSatisfiedBy(product)) {
  return 'A'
}
if (isOriginalAndQtyChangedSpec.isSatisfiedBy(product)) {
  return 'B'
}
```
npm package: @hyeon/tailwindcss-animate
Description: - [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate) - [tailwindcss-animated](https://github.com/new-data-services/tailwindcss-animated)
Author: Hansanghyeon
Latest version: 1.1.6

- [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
- [tailwindcss-animated](https://github.com/new-data-services/tailwindcss-animated)

해당 라이브러리들을 가져와서 커스텀
npm package: @hyeon/tailwindcss-layer-shadow
Description: <div align="center">   <img src="https://github.com/Hansanghyeon/tailwindcss-layer-shadow/assets/42893446/cb0fc285-cdaf-427d-8f51-01f613aee938" alt="" width="128" />
Author: Hansanghyeon
Latest version: 1.0.22

<div align="center">
  <img src="https://github.com/Hansanghyeon/tailwindcss-layer-shadow/assets/42893446/cb0fc285-cdaf-427d-8f51-01f613aee938" alt="" width="128" />

  ### tailwindcss-layer-shadow

  ![](https://img.shields.io/badge/tailwindcss-0F172A?&logo=tailwindcss)
</div>

## using

layer-shadow는 after와 before로 구성됩니다. 적용할 element에 relative 속성이 필요합니다!

## example

```html
<div class="tailwindcss-layer-shadow-t-red-500">
```

## Feature

- [ ] size
- [ ] opacity
- [ ] example page
- [ ] auto deploy ci/cd
npm package: @hyeongi-hooks/use-title
Description: React Hook to update your document's title
Author: kimhyeongi
Latest version: 1.0.0

# @hyeongi-hooks/use-title

## React Hook to update your document's title

in package.json...
peerDependencies
> 만약 유저가 이미 필요한 dependencies를 설치한 상태라면 useTitle은 추가적으로 그 dependencies를 중복적으로 설치하지 않음.
npm package: @hyeonwoo/js-tree
Description: JavaScript Tree Library
Author: Hyeonwoo Kim
Latest version: 0.2.0
Deprecated: false

# JavaScript Tree Library

A Library for Tree data structure.

## Features

- Iterative traversals (no recursion) for better stack safety and performance
- Supports Binary Search Tree (BST) and B-Tree

## Installation

```bash
npm i @hyeonwoo/js-tree

# or

yarn add @hyeonwoo/js-tree
```

# BSTree (Binary Search Tree)

## Usage

```javascript
const { BSTree } = require("@hyeonwoo/js-tree");

// if you using TypeScript
import { BSTree } from "@hyeonwoo/js-tree";

// initial data using make BSTree instance (optional)
const initialData = {
  key: 1,
  data: null,
  left: null,
  right: {
    key: 2,
    data: null,
    left: null,
    right: null,
  },
};

const tree = new BSTree(initialData);

tree.insert(3, "any custom data (optional)");

tree.search(3);

tree.traverse("pre", (node) => console.log(node));

const inOrderedKeyList = tree.traverse("in");
console.log(inorderedKeyList); // [1, 2, 3]

const outOrderedKeyList = tree.traverse("out");
console.log(inorderedKeyList); // [3, 2, 1]

tree.traverse("post");

tree.deleteByKey(3);

tree.deleteByKey(2, { cascade: true }); // it will delete 2 and its chilren: 3.
```

# BTree (Balanced Tree)

## usage

```javascript
const { BTree } = require("@hyeonwoo/js-tree");

// if you using TypeScript
import { BTree } from "@hyeonwoo/js-tree";

const tree = new BTree();

tree.insert(3, "any custom data (optional)");

tree.search(3);

tree.traverse("pre", (node) => console.log(node));

const inOrderedKeyList = tree.traverse("in");
console.log(inorderedKeyList); // [1, 2, 3]

const outOrderedKeyList = tree.traverse("out");
console.log(inorderedKeyList); // [3, 2, 1]

tree.traverse("post");

tree.deleteByKey(3);

tree.toPng({ dir: "directory_to_save_png", fileName: "png_file_name" });
```
npm package: @hyeonwoo/react-aspect-ratio-box
Description: > 원하는 비율의 박스를 제공하는 컴포넌트입니다.   > (English) It is the component give you a box have the ratio you want.
Latest version: 1.0.2

# @hyeonwoo/react-aspect-ratio-box

> 원하는 비율의 박스를 제공하는 컴포넌트입니다.  
> (English) It is the component give you a box have the ratio you want.

> 본 README 파일에서는 한국어와 영어 두 가지로 모두 설명합니다.  
> (English) This README file give you either Korean and English description. If you can't read Korean, plz scroll down to English section.

## 설치

```shell
npm i @hyeonwoo/react-aspect-ratio-box
```

## 사용 방법 및 유의 사항

- ratio라는 props에 원하는 비율을 아래 예시 코드와 같은 형식의 문자열로 넣어주세요. 형식이 잘못되거나 prop를 넣지 않을 경우, 에러 메시지가 콘솔에 표시되며 자동으로 1:1 비율이 됩니다.

```javascript
<AspectRatioBox ratio="16:9">...</AspectRatioBox>
```

- `<div>` 태그에 넣을 수 있는 모든 props를 그대로 적용할 수 있습니다. (onClick, style, className 등)

- 기본적으로 부모 노드의 100% width를 가지며, 계산된 비율의 height 값은 해당 컴포넌트에 인라인 스타일로 적용되어 다른 스타일에 영향을 받지 않습니다.

<br />
감사합니다.
<br />

## Installation

```shell
npm i @hyeonwoo/react-aspect-ratio-box
```

## Usage and Precaution

- Enter the ratio you want to 'ratio' props as the following code, or else there is a console.warn() and the ratio will become 1:1 automatically.

```javascript
<AspectRatioBox ratio="16:9">...</AspectRatioBox>
```

- You can enter the whole props that can be in `<div>` tag. (onClick, style, className, etc.)

- This have the width 100% of the parentNode. Calculated height is inserted in 'inline-style' so it'll be not affected another height value.

<br />
Thank you
<br />
npm package: @hyeonwoo/util-frontend-js
Description: javascript util for front-end
Author: hyeonwoo
Latest version: 1.0.2

# austin-util-js Library

웹 프론트 단을 개발하면서 조금 더 효율적이고 빠르게 로직이나 코드를 완성할 수 있도록 도와주는 라이브러리입니다.

- `main.min.js` 파일을 복사 후 `<script>`태그에 코드를 직접 삽입하여 사용할 수 있습니다.
- `npm i austin-util-js` 명령으로 패키지를 설치 후 import하여 사용할 수 있습니다. (**프로토타입이 완성된 후 패키지 등록 예정입니다. 현재는 npm을 통해 사용할 수 없습니다.**)

## 메인 함수

`$_(selector)`: document.querySelector(selector)로 DOM 객체를 찾아, 여러 유틸 메서드를 추가하여 반환합니다.

> $\_()함수가 반환하는, 여러 메서드가 추가된 DOM 객체를 **`Austin객체`**로 부르며 설명을 이어가겠습니다.

## Austin 객체에서 사용할 수 있는 메서드

- `hide()`: 객체의 스타일을 `display: none`으로 변경합니다.
- `show(displayMode='block')`: 객체의 display 스타일을 인자값으로 변경합니다.

## 객체의 메서드가 아닌, 일반 호출 함수들

### \_observe

`_observe(doms, fnAppear = null, fnDisappear = null, options = {})`  
화면 영역에 특정 DOM 객체가 나타나거나 사라질 때마다 작업할 내용을 예약합니다.

**doms**  
화면에 나타나거나 사라지는지 감시당하는 DOM 객체들입니다. 여러 객체를 배열에 담아 넘겨도 되고, 배열에 담지 않고 하나의 객체만 넘겨도 됩니다.

**fnApear, fnDisappear**  
감시당하는 DOM객체가 화면에 나타났을 때 실행할 콜백 함수, 화면에서 사라졌을 때 실행할 콜백 함수입니다. 두 함수 모두 실행 시에는 인자를 하나만 넘기도록 구현되었으며, 해당 인자는 감시당하는 DOM객체를 말합니다. 아래는 예시 코드입니다.

```javascript
const fnO = (dom) => {
  // #root 엘리먼트가 뷰포트 영역에 들어올 때마다 실행됩니다.
  console.log("Appear: ", dom.nodeName);
};

const fnX = (dom) => {
  // #root 엘리먼트가 뷰포트 영역에서 사라질 때마다 실행됩니다.
  console.log("Disappear: ", dom.nodeName);
};

_observe(document.querySelector("#root"), fnO, fnX);
```

**options**  
\_observe 함수는 내부적으로 intersectingObsever API를 이용하여 구현됩니다. options 객체는 intersectinObserver 객체를 생성할 때 넣을 옵션을 의미합니다.

### \_unobserve

`_unobserve(doms)`  
특정 객체가 화면 영역에 나타나거나 사라지는지 더이상 감시하지 않습니다. 성능 측면에서 불필요한 감시를 없애기 위해 사용합니다.

**doms**  
화면에 나타나거나 사라지는지 더이상 감시 당하지 않을 DOM 객체들입니다. 여러 객체를 배열에 담아 넘겨도 되고, 배열에 담지 않고 하나의 객체만 넘겨도 됩니다.

### \_scroll

`_scroll(mode, fn)`
화면을 scroll 했을 때 실행할 함수를 등록합니다.

**mode**  
스크롤의 방향으로 'up', 'down' 둘 중 하나를 지정해야 합니다. up은 위쪽, down은 아래쪽입니다.

**fn**  
mode에 지정한 방향으로 스크롤이 일어났을 때 실행될 함수입니다.
npm package: @hyesungoh/eslint-plugin
Description: eslint and prettier configuration
Author: hyesungoh
Latest version: 1.1.0

# @hyesungoh/eslint-plugin

[![Publish package](https://github.com/hyesungoh/eslint-plugin/actions/workflows/publish.yml/badge.svg)](https://github.com/hyesungoh/eslint-plugin/actions/workflows/publish.yml)

Eslint configuration with below packages

```bash
@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint-config-prettier
eslint-plugin-import
eslint-plugin-jsx-a11y
eslint-plugin-prettier
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-simple-import-sort
eslint-plugin-unused-imports
```

## How to use it

1. Make sure `eslint` and `prettier` is installed

```
yarn add prettier eslint -D
# or
npm install prettier eslint --dev
```

2. install `@hyesungoh/eslint-plugin`

3. set eslint configuration file

```js
// .eslintrc.js
module.exports = {
  plugins: ["@hyesungoh"],
  extends: [
    "plugin:@hyesungoh/base",
    "plugin:@hyesungoh/react",
    "plugin:@hyesungoh/typescript",
  ],
};
```

## Inspired

inspired below project

- [junghyeonsu/configs](https://github.com/junghyeonsu/configs)