open-index/open-npm huggingface dataset:
npm package: @jjsoft2018/donna-awesome-form
Description: custom version of vue-awesome-form
Author: jjpark@jjsoft.kr
Latest version: 1.7.0

# vue-awesome-form

> a vue form component just like json-editor

## Install

``` bash
# npm/yarn
npm install vue-awesome-form 
yarn add vue-awesome-form
```

## Use

register the component
``` js
import Vue from 'vue'
import SchemaForm from 'vue-awesome-form'
import 'vue-awesome-form/dist/main.css'

Vue.component('schema-form', SchemaForm)
```

use in component
```html
<schema-form
  ref="schemaForm"
  :schema="formData.schema"
  :value="formData.value"
></schema-form>
```

CDN
```html
<script src="https://unpkg.com/vue-awesome-form@latest/dist/main.js"></script>
<script src="https://unpkg.com/vue-awesome-form@latest/dist/main.css"></script>
```

Props:

schema:an object like this

```json
    "register": {
        "type": "TheTree",
        "title": "register",
        "properties": {
            "name": {
                "type": "TheInput",
                "title": "name",
                "rules": {
                    "required": true,
                    "message": "The name cannot be empty"
                }
            },
            "location": {
                "type": "TheTree",
                "title": "address",
                "propertyOrder": 3,
                "properties": {
                    "province": {
                        "type": "TheInput",
                        "title": "province",
                        "rules": {
                            "required": true,
                            "message": "The province cannot be empty"
                        }
                    },
                    "city": {
                        "type": "TheInput",
                        "title": "city",
                        "rules": {
                            "required": true,
                            "message": "The city cannot be empty"
                        }
                    }
                }
            }
        }
    }
```

value: the initValue of the form

```json
"register": {
    "name": "wqe",
    "location": {
      "province": "beijing",
      "city": "beijing"
    }
}
```

methods:

validate: validate the form and return the result and the value of the form

resetFields: reset the form to init value

```js
handleSubmit() {
  this.$refs.schemaForm.validate((err, values) => {
    if(err) {
      console.log('fail');
    } else {
      console.log('succ', values);
    }
  })
},
handleReset() {
  this.$refs.schemaForm.resetFields();
}
```

## Demo

the following demo contains all the functions of the component and the supported form items.

demo： <http://jsrun.net/bKgKp/embedded/all/light/>

This [article](https://juejin.im/post/5b1cdd29e51d4506bb3a771d) introduces the detailed implementation of this component.
npm package: @jjsoft2018/graphql-harmony
Description: [![pipeline status](https://gitlab.jjsoft.kr/DONNA/graphql-harmony/badges/master/pipeline.svg)](https://gitlab.jjsoft.kr/DONNA/graphql-harmony/commits/master) [![coverage report](https://gitlab.jjsoft.kr/DONNA/graphql-harmony/badges/master/coverage.svg)](
Author: BichiKim
Latest version: 1.2.3-alpha

# Graphql Harmony

[![pipeline status](https://gitlab.jjsoft.kr/DONNA/graphql-harmony/badges/master/pipeline.svg)](https://gitlab.jjsoft.kr/DONNA/graphql-harmony/commits/master)
[![coverage report](https://gitlab.jjsoft.kr/DONNA/graphql-harmony/badges/master/coverage.svg)](https://gitlab.jjsoft.kr/DONNA/graphql-harmony/commits/master)

## feature & complete
- [x] graphql endpoint
- [x] graphql playground 
- [x] graphql cache
- [x] net server
- [x] error handling
- [ ] cache

## How to start server
```typescript
import {GraphqlServer} from './src'
const server = new GraphqlServer()
server.start({
  // see ./src/GraphqlServer/__types.ts IGraphqlServerOptions
}).then(({address}) => {
  const info = address()
  console.log(`server was started at ${info.address}::${info.port}`)
  server.stop().then(() => {
    console.log('server stopped')
  })
})

```

## How to create query
```typescript
import {Query, Resolver, Arg} from 'type-graphql'
import {HarmonyError, Err, ErrorGroup, ErrorItem} from './src'

class MyResolverError extends ErrorGroup {
  @Err() justError: ErrorItem = 'just error' as any
}

const myErrors = new MyResolverError()

@Resolver()
class MyResolver {
  @Query()
  getSomething(@Arg() name: string) {
    if(name === 'bichi'){
      // how to throw error
      throw new HarmonyError(myErrors.justError)
    }
    return name
  }
}
```

## using suggestion

refer to `./exapmles`


## Options
> see src/GraphqlServer/types.ts>IGraphqlServerOptions

## docs
```bash
yarn docs
# and see files in ./docs
```
npm package: @jjuidev/esm-package-json
Description: A utility package for working with ESM package.json files
Author: jjuidev
Latest version: 1.0.3

# @jjuidev/esm-package-json

A utility CLI tool that automatically generates a minimal `package.json` file with `"type": "module"` in your `dist/esm` folder to ensure proper ESM module resolution.

## Installation

### Global Installation (Recommended)

```bash
npm install -g @jjuidev/esm-package-json
```

### Local Installation

```bash
npm install --save-dev @jjuidev/esm-package-json
```

## Usage

### CLI Usage

After building your TypeScript project, run:

```bash
esm-package-json
```

Or specify a custom dist folder:

```bash
esm-package-json --dist ./build
esm-package-json -d ./output
```

### What it does

This tool scans your dist folder and:

1. Looks for an `esm` subdirectory
2. Creates a `package.json` file inside the `esm` folder if it doesn't exist
3. The generated `package.json` contains: `{"type": "module"}`

This ensures that your ESM modules are properly recognized by Node.js and bundlers.

### Example

Given this project structure:

```
your-project/
├── dist/
│   ├── cjs/
│   │   └── index.cjs
│   └── esm/
│       └── index.js
└── package.json
```

Running `esm-package-json` will create:

```
your-project/
├── dist/
│   ├── cjs/
│   │   └── index.cjs
│   └── esm/
│       ├── index.js
│       └── package.json  ← Generated with {"type": "module"}
└── package.json
```

## Options

| Option   | Alias | Description                  | Default  |
| -------- | ----- | ---------------------------- | -------- |
| `--dist` | `-d`  | Specify the dist folder path | `./dist` |

## Integration with Build Tools

### With tsup

Add to your `package.json` scripts:

```json
{
	"scripts": {
		"build": "tsup",
		"postbuild": "esm-package-json"
	}
}
```

### With npm scripts

```json
{
	"scripts": {
		"build": "tsc && esm-package-json",
		"build:watch": "tsc --watch & esm-package-json --dist ./dist"
	}
}
```

## Why do you need this?

When building dual-package libraries (both CommonJS and ESM), you often have separate output folders:

- `dist/cjs/` for CommonJS files
- `dist/esm/` for ESM files

Node.js determines module type based on the nearest `package.json` file. Without a `package.json` with `"type": "module"` in the ESM folder, Node.js might not correctly identify your ESM modules, leading to import/export issues.

## Requirements

- Node.js >= 16.0.0

## Repository

- **GitHub**: [https://github.com/jjuidev/esm-package-json](https://github.com/jjuidev/esm-package-json)
- **Issues**: [https://github.com/jjuidev/esm-package-json/issues](https://github.com/jjuidev/esm-package-json/issues)

## License

MIT © [jjuidev](https://github.com/jjuidev)

## Contributing

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## Changelog

### 1.0.0

- Initial release
- CLI tool to generate ESM package.json files
- Support for custom dist folder paths
npm package: @jjuidev/jss-devtools
Description: Development tools CLI for Javascript stack like React, RN, NextJS, Nest, etc.
Latest version: 0.3.1

# @jjuidev/jss-devtools

Development tools CLI for JavaScript stack like React, React Native, NextJS, Nest, etc.

## Quick Start

- Support npm, yarn, pnpm, bun package manager.

```bash
npm install --save-dev @jjuidev/jss-devtools
npx @jjuidev/jss-devtools init
```

## Commands

| Command             | Description                       |
| ------------------- | --------------------------------- |
| `jss-devtools`      | Display banner and help           |
| `jss-devtools init` | Initialize project with dev tools |
| `jss-devtools ls`   | List available commands           |

### `init` Command

Setup that configures your project with:

- **Framework selection**: Node.js, React, React Native, Next.js
- **Tailwind CSS** support (conditional)
- **Storybook** support (conditional)
- **TypeScript alias imports** (`@/*` paths)
- **Husky** git hooks (`pre-commit`, `commit-msg`, `prepare-commit-msg`)
- **Commitlint** with emoji-based commit types
- **ESLint + Prettier** configuration

#### Interactive Mode

```bash
# Interactive prompts (default)
jss-devtools init

# or using npx/yarn/pnpm/bunx
npx @jjuidev/jss-devtools init
```

#### Non-Interactive Mode

For CI/CD pipelines and automation scripts:

```bash
# Use default configuration
jss-devtools init -y

# Specify framework
jss-devtools init --framework react

# Full control with all flags
jss-devtools init --framework nextjs --tailwind --storybook --aliasImport
```

**Available Flags:**

| Flag            | Alias | Type    | Description                                                 |
| --------------- | ----- | ------- | ----------------------------------------------------------- |
| `--yes`         | `-y`  | boolean | Use default configuration                                   |
| `--framework`   |       | string  | Target framework: `node`, `react`, `react-native`, `nextjs` |
| `--tailwind`    |       | boolean | Enable Tailwind CSS                                         |
| `--storybook`   |       | boolean | Enable Storybook                                            |
| `--aliasImport` |       | boolean | Enable alias imports (`@/*`)                                |

**Default Configuration (when using `-y`):**

```json
{
	"framework": "node",
	"tailwind": true,
	"storybook": false,
	"aliasImport": true
}
```

## Library Exports

This package also exports reusable config helpers:

### Commitlint Config

```javascript
const { commitlintConfigRecommend, defineCommitlintConfig } = require('@jjuidev/jss-devtools');

// Option 1: Use recommended config
module.exports = commitlintConfigRecommend;

// Option 2: Customize config
module.exports = defineCommitlintConfig((emojiList) => {
	return emojiList.filter((item) => item.type !== 'wip');
});
```

### ESLint Config Helpers

```javascript
const { defineEslintConfig, eslintConfigNode } = require('@jjuidev/jss-devtools');

// Use with ESLint flat config
export default defineEslintConfig({
	...eslintConfigNode
	// your custom rules
});
```

## License

MIT

## Author

jjuidev <hi@jjuidev.com>
npm package: @jjvaamonde/react-native-acuant-sdk
Description: React native Acuant bridge
Author: jose120293
Latest version: 1.0.6

# react-native-acuant-sdk-bridge

React native Acuant brdge

## Installation

```sh
npm install @jjvaamonde/react-native-acuant-sdk
```

## Usage

```js
import AcuantSdkBridge from "@jjvaamonde/react-native-acuant-sdk";

// ...

const result = await AcuantSdkBridge.callAcuant();
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @jjwesterkamp/remove-assets-webpack-plugin
Description: A simple webpack plugin to remove assets from compilations.
Author: Jeffrey Westerkamp
Latest version: 0.1.4

# @jjwesterkamp/remove-assets-webpack-plugin

A simple webpack plugin to remove assets from compilations.

[![npm](https://badgen.net/npm/v/@jjwesterkamp/remove-assets-webpack-plugin?color=green)][npm]
[![MIT](https://badgen.net/badge/license/MIT/green)][license file]

## Installation

```
$ npm install --save-dev @jjwesterkamp/remove-assets-webpack-plugin
```

## Usage

Add a new plugin instance to your webpack configuration:

```javascript
const RemoveAssetsWebpackPlugin = require('@jjwesterkamp/remove-assets-webpack-plugin');

module.exports = {
    plugins: [
        new RemoveAssetsWebpackPlugin({
            enablelog: true,
            patterns: [
                // To remove .js and .js.map output from CSS entries:
                // (matches output files within /css/, ending with .js or .js.map)
                /^css\/.+\.js(\.map)?$/,
            ],
        }),
    ],
};
```

When `enableLog` is set to `true`, the plugin will output the used patterns and removed matching assets to the console like in the following image.
This can be handy for debugging your webpack configuration:

<img width="723" alt="Screenshot 2021-04-21 at 13 07 39" src="https://user-images.githubusercontent.com/12270687/115546240-1032cb80-a2a5-11eb-8c62-5b627ed8bc04.png">

## License

The MIT License (MIT). See [license file] for more information.

[license file]: https://github.com/JJWesterkamp/remove-assets-webpack-plugin/blob/master/LICENSE
[npm]: https://www.npmjs.com/package/@jjwesterkamp/remove-assets-webpack-plugin
npm package: @jjwesterkamp/sass-utils
Description: Generic SCSS utilities for web projects.
Author: Jeffrey Westerkamp
Latest version: 3.0.0-beta1

# @jjwesterkamp/sass-utils [![npm version](https://badge.fury.io/js/%40jjwesterkamp%2Fsass-utils.svg)](https://badge.fury.io/js/%40jjwesterkamp%2Fsass-utils)
**Generic SCSS utilities for web projects.** This package provides several utilities in the form of sass mixins that help with writing common repetitive CSS rule sets. [View changelog](https://github.com/JJWesterkamp/sass-utils/blob/master/CHANGELOG.md).
## Installation

Install the package from npm:

```
$ npm install --save-dev @jjwesterkamp/sass-utils
```

## Usage


### 1. Setup required SCSS variables

A few variables are required by this package. Copy [the config file](scss/config.scss) into your project, and modify the variables to your needs. Then import it into your SCSS project:

```scss
@import 'sass-utils.config';
```

### 2. Import functions & mixins

To get started quickly import the index files importing all functions and mixins:

```scss
@import 'sass-utils.config';

@import '~@jjwesterkamp/sass-utils/scss/functions.index';
@import '~@jjwesterkamp/sass-utils/scss/mixins.index';
```

Alternatively you may import only the specific mixins that you need:

```scss
@import "~@jjwesterkamp/sass-utils/scss/mixins/absolute-block-pseudo";
@import "~@jjwesterkamp/sass-utils/scss/mixins/absolute-overlay";
@import "~@jjwesterkamp/sass-utils/scss/mixins/autofill-style";
// ...
```

## License

The MIT licence (MIT). See the [license file](https://github.com/JJWesterkamp/sass-utils/blob/master/LICENSE) for more information.
npm package: @jjwesterkamp/typedoc-theme
Description: A Typedoc theme optimized for the nord highlight theme
Author: Jeffrey Westerkamp
Latest version: 1.2.0

# @jjwesterkamp/typedoc-theme

The [Typedoc] theme that I use for my projects. You can find examples here:

- [lambda-dom documentation](https://jjwesterkamp.github.io/lambda-dom)
- [event-delegation documentation](https://jjwesterkamp.github.io/event-delegation)

## Usage

```
npm install --save-dev @jjwesterkamp/typedoc-theme
```

Add the theme to your `typedoc.json` file. This theme is optimized for the _nord_ highlight theme, so it's recommended to add that too:

```json
{
    "theme": "./node_modules/@jjwesterkamp/typedoc-theme",
    "highlightTheme": "nord"
}
```

## License

The MIT License (MIT). See [license file] for more information.

[Typedoc]: https://typedoc.org/
[license file]: https://github.com/JJWesterkamp/lambda-dom/blob/master/LICENSE
npm package: @jjxtools/open-invscode
Description: this extenison was created to open file/fold in a new vscode instance
Latest version: 1.0.8

#  open-invscode

this extenison was created to open file/fold in a new vscode instance  

[![@jijiaxin](https://img.shields.io/badge/%40jjxtools-open--invscode-gree)](https://www.npmjs.com/package/@jjxtools/open-invscode)

### directives

| directives | function | key-bind |
| --- | --- | --- |
| openfile | open the file  you are ediing  | ctrl + alt(cmd) + o|
| openfolder | open folder  you selected on explorer | ctrl + alt(cmd) + m|
|selectfolder | open folder where you selectd folder in folders picker | undefined |

### demos
#### openfile demo
![image](https://github.com/jijiaxin1808/vscode-tools-jjx/blob/main/packages/open-invscode/public/openfile.gif)
<br>
<br>

#### openfolder demo
![avatar](https://github.com/jijiaxin1808/vscode-tools-jjx/blob/main/packages/open-invscode/public/openfolder.gif)

#### selectfolder demo
![avatar](https://github.com/jijiaxin1808/vscode-tools-jjx/blob/main/packages/open-invscode/public/selectfolder.gif)
npm package: @jjy/canvas-sprite-animations
Description: A library for animating sprites on HTML Canvas.  Original code by Isaac Sukin (IceCreamYou on GitHub) --- I am uploading his library to npm for convenience.
Author: jjayeon
Latest version: 1.0.0

# Note:

This package/repo is a fork of Isaac Sukin's original code.  I (jjayeon) will attempt to maintain it, but detailed questions about how it operates should be directed to Isaac Sukin (IceCreamYou on GitHub and npm).

To use this package with npm, enter:

    npm install @jjy/canvas-sprite-animations
	
Or the equivalent in Yarn, of course.

To use, import as so:

    import { Sprite, SpriteMap } from "@jjy/canvas-sprite-animations":
	
And use Sprite and SpriteMap as constructors.  I recommend using Webpack + the file-loader plugin for managing images, which I have done in src/test.js (in the GitHub repo).

# Original:

Sprite.js is a powerful, easy-to-use Sprite animation library for HTML5 Canvas.

Two classes are provided:

 - **SpriteMap**: Manages multiple animation sequences in a sprite sheet.
 - **Sprite**: Handles a single animation sequence.

You can
[read the full documentation](http://icecreamyou.github.com/Canvas-Sprite-Animations/docs/)
for a complete explanation of every available method.


Usage
------

Put the script in your HTML document:

```html
<script src="sprite.min.js"></script>
```

There are several ways to use sprite.js. At its simplest:

```javascript
// Create the sprite.
var sprite = new Sprite('sprite.png', {
  frameW: 60,
  frameH: 60,
  postInitCallback: function() { // Runs when the sprite is ready.
    // Start animating.
    sprite.startLoop();
  },
});

// Draw the sprite. You should do this every time you repaint the canvas.
// Frames update automatically.
// var context = document.getElementById('canvas').getContext('2d');
sprite.draw(context, 100, 100); // x and y position on canvas
```

There are many more options you can use for finer-grained control, including
using multiple animation sequences on one sprite sheet. See index.html for a
full example of using a SpriteMap or
[read the full documentation](http://icecreamyou.github.com/Canvas-Sprite-Animations/docs/).


Caching
-------

Sprite images are cached by default. If you would like to use an alternative
caching system, you can override several static methods:

 - **Sprite.preloadImages(files, options)**: Pre-load images into the cache so
   you don't have to deal with a delay to load them from disk later.
 - **Sprite.getImageFromCache(src)**: Retrieve an image from the cache.
 - **Sprite.saveImageToCache(src, image)**: Save a loaded image into the cache.


License/Credits
---------------

Created by [Isaac Sukin](http://www.isaacsukin.com/) (IceCreamYou).

The centipede-sprite.png image used for the
[demo](http://icecreamyou.github.com/Canvas-Sprite-Animations/) is from Atari.

All resources are MIT licensed: http://opensource.org/licenses/mit-license.php
npm package: @jjyepez/platzom
Description: Proyecto Platzom del curso de Fundamentos de Javascript en Platzi
Author: jjyepez
Latest version: 0.1.1

# Platzom

Platzom es un idioma inventado para el [Curso de Fundamentos de Javascript](https://platzi.com/js) de [Platzi](https://platzi.com), el mejor lugar de educación online 

## Descripción del idioma

- Si la palabra termina en "ar", se le quitan esas dos letras
- Si la palabra inicia con "Z", se le añade "pe" al final
- Si la palabra traducida tiene 10 o mas letras se debe partir en dos por la mitad y unir con un guion
- Si la palabra es un palindromo se aplica un formato de mayusculas y minusculas intercaladas

## Instalación

```
npm i @jjyepez/platzom
```

## Uso

```
import platzom from 'platzom'

platzom( 'Programar' ) // Program
platzom( 'Zorro' ) // Zorrope
platzom( 'Zarpar' ) // Zarppe
platzom( 'abecedario' ) // abece-dario
platzom( 'caracteristicas' ) // caracte-risticas
platzom( 'sometemos' ) // SoMeTeMoS
```

## Créditos

- [@jjyepez](https://twitter.com/jjyepez)

## Licencia

[MIT](https://opensource.org/licenses/MIT)
npm package: @jk-core/hooks
Description: hooks for jk
Author: KimKyungYun
Latest version: 1.0.6

# @jk-core/hooks

jk-core 프로젝트를 위한 React 커스텀 훅 모음입니다.

<br/>

## 설치
```bash
npm install @jk-core/hooks // npm 사용 가능
yarn add @jk-core/hooks // npm 대신 yarn 사용 가능
pnpm add @jk-core/hooks // npm 대신 pnpm 사용 가능
```

<br/>



## useIntersectionObserver

무한 스크롤을 구현하기 위한 Intersection Observer API를 사용하는 훅입니다.

<br/>

#### Props
- `parent` : 관찰할 대상 요소의 부모 요소
- `target`: 관찰할 대상 요소
- `callback`: () => void - 교차점 관찰 시 실행될 함수
- `options`: IntersectionObserver의 옵션

<br/>

#### 사용법

```typescript
import { useIntersectionObserver } from '@jk-core/hooks';
function MyComponent() {
const observerRef= useRef();
const parentRef= useRef();

const loadMoreItems = () => {
// 추가 아이템을 로드하는 로직
};

useIntersectionObserver({target: targetRef,callback:loadMoreItems, options:{root:parentRef.current, threshold:1, rootmargin: '5px'}});
return (
<div ref={parentRef}>
{/ 아이템 목록 /}
<div ref={observerRef}>로딩 중...</div>
</div>
);
};
```
<br/>
<br/>

## useInterectOutside

클릭한 위치가 요소 바깥인지 확인하는 훅입니다.

<br/>

#### Props
- `targetRef`: RefObject<HTMLElement> - 대상 요소의 ref
- `eventList`: string[] - 감지할 이벤트 목록
- `handler`: () => void - 요소 외부 클릭 시 실행될 함수

<br/>

#### 사용법

```typescript
import { useInterectOutside } from '@jk-core/hooks';
const MyComponent = () => {
const handleClickOutside = () => {
// 클릭한 위치가 요소 바깥일 때 실행되는 로직
};
const { ref } = useInterectOutside(handleClickOutside);
return <div ref={ref}>Click outside to trigger</div>;
};
```
<br/>
<br/>

## useMediaQuery

미디어 쿼리를 사용하여 화면 크기를 확인하는 훅입니다.

<br/>

#### Props
- `width`: number - 기준이 되는 화면 너비 (픽셀)


#### Return
- `boolean`: 현재 화면 크기가 지정된 너비보다 작은지 여부

<br/>

#### 사용법

```typescript
import { useMediaQuery } from '@jk-core/hooks';
const MyComponent = () => {
const isMobile = useMediaQuery(768);
return <div>{isMobile ? 'Mobile' : 'Desktop'}</div>;
};
``` 
<br/>
<br/>


## useHistory

브라우저의 history API를 사용하여 페이지 내비게이션을 관리하는 훅입니다.

<br/>

#### Return
- `push`: (path: string) => void - 현재 path에 가상의 path를 추가하는 함수 
- `back`: () => void - 이전 페이지로 이동하는 함수
<br/>

#### 사용법

```typescript
import { useHistory } from '@jk-core/hooks';
const MyComponent = () => {
const { push, back } = useHistory();
return (
<div>
<button onClick={() => push('/page1')}>Page 1</button>
<button onClick={() => back()}>Back</button>
</div>
);
};
```

<br/>
<br/>

## useHistoryEvent

브라우저의 history 이벤트를 관리하는 훅입니다.

<br/>

#### Props
- `listener`: (update: Update) => void - history 이벤트 처리 함수

#### Update 객체
- `action`: 'POP' | 'PUSH' | 'REPLACE' - 수행된 history 액션
- `location`: Location - 현재 location 객체

<br/>

#### 사용법

```typescript
import { useHistoryEvent } from '@jk-core/hooks';
const MyComponent = () => {

// history 이벤트 처리 로직
const handleHistoryEvent = ((update: Update) =>{
  if(event.action === 'PUSH') {
     // history push 이벤트 처리 로직
  }
  if(event.action === 'REPLACE') {
     // history replace 이벤트 처리 로직
  }
  if(event.action === 'POP') {
     // history pop 이벤트 처리 로직
  }
};

useHistoryEvent(handleHistoryEvent);
return <div>History Event Listener</div>;
};
```
npm package: @jk-core/utils
Description: utils for jk
Author: KimKyungYun
Latest version: 1.0.0

# @jk-core/utils

jk-core 프로젝트를 위한 React 커스텀 유틸 모음입니다.

<br/>

## 설치
```bash
npm install @jk-core/utils // npm 사용시
yarn add @jk-core/utils // yarn 사용시
pnpm add @jk-core/utils // pnpm 사용시
```

<br/>

## 사용 가능한 기능

### cn

css module을 사용할 때, `cn({[classname]: boolean})` 과 같이 조건부에 따라 className을 부여할 수 있는 기능입니다.

#### 사용법
```typescript
import { cn } from '@jk-core/utils';

const MyComponent = ({ className, ...props }) => (
  <div className={cn({
    [className]: true,
    'some-class': true,
  })}>
    {/* ... */}
  </div>
);
```
<br/>
<br/>

### roundNum

숫자를 지정된 소수점 자리까지 반올림하는 함수입니다. null 값이 들어오면 0을 반환합니다.

#### Props

| Prop name | Description | Default value | Example values |
|-----------|-------------|---------------|----------------|
| num       | 반올림할 숫자입니다. | -             | `1234.5678`, `null` |
| scale     | 반올림할 소수점 자리수입니다. | `2`           | `0`, `3`            |

#### 사용법
```typescript
const rounded = roundNum(1234.5678, 2); // 1234.57
const rounded2 = roundNum(null, 2); // 0
```
<br/>
<br/>

### displayRoundNum

숫자를 지정된 소수점 자리까지 반올림하는 함수입니다. null 값이나 undefined가 들어오면 "-"을 반환합니다.

#### Props

| Prop name | Description | Default value | Example values |
|-----------|-------------|---------------|----------------|
| num       | 반올림할 숫자입니다. | -             | `1234.5678`, `null`, `undefined` |
| scale     | 반올림할 소수점 자리수입니다. | `2`           | `0`, `3`            |

#### 사용법
```typescript
const rounded = displayRoundNum(1234.5678, 2); // 1234.57
const rounded2 = displayRoundNum(null, 2); // "-"
const rounded3 = displayRoundNum(undefined, 2); // "-"
```
<br/>
<br/>

### checkIsMobile

사용자의 기기가 모바일인지 확인하는 함수입니다.

#### 사용법
```typescript
const isMobile = checkIsMobile(); // true 또는 false 반환
```
<br/>
<br/>

### isDefined

값이 null 또는 undefined인지 확인하는 함수입니다.

#### 사용법
```typescript
const isDefined = isDefined(value); // true 또는 false 반환
```
npm package: @jk-me/practicenpm
Description: Functions to modify string by removing whitespace, or by removing symbols and punctuation
Latest version: 2.0.0

# @jk-me/practicenpm

Functions to modify string by removing whitespace, or remove symbols and punctuation.

## Install

```
$ npm install @jk-me/practicenpm
```

## Usage

```js
const pie = require("@jk-me/practicenpm");

pie.tiny("String with spaces.");
//=> "Stringwithspaces."

pie.tiny(101);
//=> Uncaught TypeError: Tiny wants a string!
//    at tiny (<anonymous>:2:41)
//    at <anonymous>:1:1

pie.removeSym("String with symbols.?><!@#$:&*^(); keep spaces and characters");
//=> "String with symbols keep spaces and characters"

pie.removeSym(101);
//=> Uncaught TypeError: Tiny wants a string!
//    at tiny (<anonymous>:2:41)
//    at <anonymous>:1:1
```
npm package: @jk2908/cxx
Description: Utilities for generating styles in React 19
Author: Jerome Kenway
Latest version: 0.1.8

cxx

library based on experiments with React 19 suspenseful style hoisting and deduping. `cxx` intakes CSS via a template literal arg and returns a three item tuple; the processed CSS, if configured (on by default) a CSS Modules exports object, and also optionally for usage, an id to pass to the href attribute of a style tag for deduping see [React docs](https://react.dev/reference/react-dom/components/style#noun-labs-1201738-(2)). The function actually just returns placeholders for the above items which will be replaced at build time. No string interpolation is supported within the CSS template tag.

example usage:
In ui templates `cmp.tsx`:
```
  import { cxx } from '@jk2908/cxx'

  const [css, styles, href] = cxx`
    .header {
      display: flex;
    }
  ` 

  function Cmp() {
    return (
      <header className={styles.header}>
        ...

        <style href={href} precedence="medium">
          {css}
        </style>
      </header>
    )
  }
```

CSS is transformed using [lightningcss](https://www.npmjs.com/package/lightningcss). There is access to the full lightningcss config. 

vite `vite.config.ts`:
```
  import cxx from '@jk2908/cxx/vite-plugin-cxx'

  export default defineConfig({
    plugins: [react(), cxx({ ...optional cxx config })],
  })

  // turn off default config
  export default defineConfig({
    plugins: [cxx({
      lightningcss: {
        minify: false,
        cssModules: false,
        ...other transform options
      }
    })]
  })
```

next `next.config.ts`:
```
  import { withCxx } from '@jk2908/cxx/next'

  const nextConfig = {}

  export default withCxx(nextConfig, { ...optional cxx config })
```