open-index/open-npm huggingface dataset:
npm package: @frontend-toolkit-js/components
Description: Declarative React UI components with type safety
Latest version: 0.2.0

# @frontend-toolkit-js/components

선언적이고 타입 안전한 React 컴포넌트 라이브러리

[![npm version](https://badge.fury.io/js/%40frontend-toolkit-js%2Fcomponents.svg)](https://www.npmjs.com/package/@frontend-toolkit-js/components)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## 설치

```bash
npm install @frontend-toolkit-js/components
# or
pnpm add @frontend-toolkit-js/components
# or
yarn add @frontend-toolkit-js/components
```

## 특징

- 선언적 API와 가벼운 번들
- React 외 의존성 없음 (zero-deps)
- Strict TypeScript 지원 및 자동 완성
- Tree-shaking 가능한 ESM 번들

---

## 포함 컴포넌트

| 컴포넌트           | 설명                                                                                        | 문서                                                             |
| ------------------ | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
| `InViewTrigger`    | Intersection Observer 기반 뷰포트 감지. 무한 스크롤, 지연 로딩, 애니메이션 트리거 등에 사용 | [문서](./src/InViewTrigger/README.md)                            |
| `SuspenseBoundary` | Suspense + ErrorBoundary 통합 컴포넌트. 로딩/에러/재시도 흐름을 선언적으로 처리             | [문서](./src/SuspenseBoundary/README.md)                         |
| `ErrorBoundary`    | Suspense 없이도 사용할 수 있는 독립 에러 경계. 재시도/자동 리셋/로깅 지원                   | [문서](./src/SuspenseBoundary/README.md#errorboundary-단독-사용) |

새로운 컴포넌트가 추가되어도 표 형태로 간단히 확장할 수 있도록 구성했습니다.

---

## 빠른 시작

```tsx
import {
  InViewTrigger,
  SuspenseBoundary,
} from '@frontend-toolkit-js/components';

function Example() {
  return (
    <SuspenseBoundary
      pendingFallback={<Spinner />}
      errorFallback={<ErrorState />}
    >
      <InViewTrigger onInView={() => console.log('보임!')}>
        <Article />
      </InViewTrigger>
    </SuspenseBoundary>
  );
}
```

---

## 스크립트

```bash
pnpm dev        # 개발 모드
pnpm build      # 빌드
pnpm test       # 테스트
```

---

## 관련 패키지

- [@frontend-toolkit-js/hooks](../hooks) - React Hooks 모음
- [@frontend-toolkit-js/utils](../utils) - 범용 유틸리티 함수

---

## 라이선스

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

---

## 라이선스

MIT © [rak517](https://github.com/rak517)
npm package: @frontend-toolkit-js/utils
Description: Type-safe utility functions for frontend development
Latest version: 0.1.0

# @frontend-toolkit/utils

🚧 **개발 중**

타입 안전한 유틸리티 함수 라이브러리

## 설치 (준비 중)

\`\`\`bash
npm install @frontend-toolkit/utils
\`\`\`

## 특징

- ✅ TypeScript strict mode 100%
- ✅ Zero dependencies
- ✅ Tree-shaking 지원
- ✅ 작은 번들 크기

## 유틸리티 목록 (개발 예정)

### String

- `capitalize` - 첫 글자 대문자
- `truncate` - 문자열 자르기

### Array

- `groupBy` - 배열 그룹화
- `unique` - 중복 제거

### Object

- `pick` - 속성 선택
- `omit` - 속성 제외

## 개발

\`\`\`bash
pnpm dev # watch mode
pnpm build # 빌드
pnpm test # 테스트
pnpm bench # 벤치마크
\`\`\`
npm package: @frontend-toolkit/bedrock
Description: Common rapid development tool library.
Author: Pwcong
Latest version: 0.0.6

# FrontEnd Toolkit - Bedrock
Common rapid development tool library.

## Setup

Install the dependencies:

```bash
pnpm run install
```

## Get Started

Run and debug the module:

```bash
pnpm run dev
```

Build the module for production:

```bash
pnpm run build
```

Enable optional features:

```bash
pnpm run new
```

Other commands:

```bash
pnpm run lint         # Lint and fix source files
pnpm run change       # Add a new changeset
pnpm run bump         # Update version and changelog via changeset
pnpm run release      # Release the package
```

For more information, see the [Modern.js Module documentation](https://modernjs.dev/module-tools/en).