open-index/open-npm huggingface dataset:
npm package: @nation-a/icons
Description: Nation-A 디자인 시스템의 SVG 아이콘 컴포넌트 라이브러리입니다. Icona에서 추출된 SVG를 React 컴포넌트로 변환하여 제공합니다.
Latest version: 0.5.8

# @nation-a/icons

Nation-A 디자인 시스템의 SVG 아이콘 컴포넌트 라이브러리입니다. Icona에서 추출된 SVG를 React 컴포넌트로 변환하여 제공합니다.

## 특징

- **최적화된 SVG**: 불필요한 태그와 속성을 제거한 경량 SVG
- **React 컴포넌트**: 모든 아이콘이 React 컴포넌트로 제공됨
- **커스터마이징 가능**: 색상, 크기 등을 쉽게 변경 가능
- **타입 지원**: TypeScript 타입 정의 포함
- **자동 생성**: 자동화된 스크립트를 통한 아이콘 컴포넌트 생성

## 설치

```bash
# npm
npm install @nation-a/icons

# yarn
yarn add @nation-a/icons

# pnpm
pnpm add @nation-a/icons
```

## 사용법

```tsx
import { HomeIcon, SearchIcon, MenuIcon } from '@nation-a/icons'

function MyComponent() {
  return (
    <div>
      <HomeIcon size={24} color="blue" />
      <SearchIcon size={20} color="#FF5733" />
      <MenuIcon size="1.2em" />
    </div>
  )
}
```

## 아이콘 속성

모든 아이콘 컴포넌트는 다음 속성을 지원합니다:

| 속성  | 타입             | 기본값         | 설명          |
| ----- | ---------------- | -------------- | ------------- |
| size  | number \| string | '1em'          | 아이콘의 크기 |
| color | string           | 'currentColor' | 아이콘의 색상 |

추가로 모든 표준 SVG 속성을 지원합니다.

## 아이콘 파이프라인

1. 피그마에서 [Icona](https://www.figma.com/community/plugin/1246320822364150095) 플러그인을 통해 아이콘이 생성됩니다.
2. 생성된 `.icona/icons.json` 파일을 기반으로 SVG 파일을 추출합니다.
3. 추출된 SVG에서 불필요한 태그와 속성을 제거하고 최적화합니다.
4. 최적화된 SVG를 React 컴포넌트로 변환합니다.
5. 모든 아이콘에 대한 인덱스 파일을 자동 생성합니다.
6. 변환된 컴포넌트를 Vite로 번들링합니다.

## 개발

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

# 아이콘 생성 및 빌드
pnpm build
```

## 라이선스

MIT 라이선스
npm package: @nation-a/tokens
Description: Nation-A 디자인 시스템의 디자인 토큰 패키지입니다. 색상, 타이포그래피, 간격, 그림자 등 디자인 시스템의 핵심 값들을 관리합니다.
Latest version: 0.4.3

# @nation-a/tokens

Nation-A 디자인 시스템의 디자인 토큰 패키지입니다. 색상, 타이포그래피, 간격, 그림자 등 디자인 시스템의 핵심 값들을 관리합니다.

## 특징

- **다양한 포맷 지원**: JavaScript/TypeScript, CSS, JSON 등 다양한 포맷으로 토큰 변환
- **타입 안전**: TypeScript 타입 정의 포함
- **피그마 연동**: Tokens Studio에서 추출된 토큰 활용
- **PandaCSS 및 Emotion 지원**: 주요 스타일링 라이브러리와 호환

## 설치

```bash
# npm
npm install @nation-a/tokens

# yarn
yarn add @nation-a/tokens

# pnpm
pnpm add @nation-a/tokens
```

## 사용법

### PandaCSS에서 사용

```ts
// panda.config.ts
import { defineConfig } from '@pandacss/dev'
import { pandaTokens } from '@nation-a/tokens/pandacss'

export default defineConfig({
  theme: {
    extend: {
      tokens: pandaTokens.primitive,
      semanticTokens: pandaTokens.semantic,
      textStyles: pandaTokens.textStyles,
    },
  },
})
```

### Emotion에서 사용

```tsx
import { ThemeProvider } from '@emotion/react';
import { emotionTokens } from '@nation-a/tokens/emotion'

...
  <ThemeProvider theme={emotionTokens.dark}>
...
```

## 토큰 생성 프로세스

1. 피그마에서 [Tokens Studio](https://www.figma.com/community/plugin/843461159747178978/tokens-studio-for-figma-figma-tokens) 플러그인을 통해 토큰을 추출합니다.
2. 추출된 JSON 파일은 프로젝트 루트의 `tokens.json`에 저장됩니다.
3. 빌드 프로세스에서 이 JSON 파일을 다양한 포맷으로 변환합니다:
   - TypeScript 타입 정의 생성
   - PandaCSS 호환 포맷 생성
   - Emotion 호환 포맷 생성

## 개발

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

# 토큰 빌드
pnpm build
```

## 라이선스

MIT 라이선스
npm package: @nation-a/ui
Description: Nation-A 디자인 시스템의 UI 컴포넌트 라이브러리입니다. 모던하고 재사용 가능한 React 컴포넌트들을 제공합니다.
Latest version: 0.18.9

# @nation-a/ui

Nation-A 디자인 시스템의 UI 컴포넌트 라이브러리입니다. 모던하고 재사용 가능한 React 컴포넌트들을 제공합니다.

## 특징

- **PandaCSS 기반**: 타입 안전한 스타일링 시스템
- **접근성 중심**: Ark UI를 활용한 접근성 준수 컴포넌트
- **테마 지원**: 다크모드와 라이트모드를 포함한 테마 지원
- **Storybook 문서화**: 모든 컴포넌트에 대한 사용 예시와 문서
- **테스트**: 컴포넌트 테스트를 통한 품질 보장

## 설치

```bash
# npm
npm install @nation-a/ui

# yarn
yarn add @nation-a/ui

# pnpm
pnpm add @nation-a/ui
```

## 개발 환경 설정

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

# Storybook 실행
pnpm storybook

# PandaCSS 코드 생성
pnpm panda
```

## 빌드

```bash
# 라이브러리 빌드
pnpm build
```

## 테스트

```bash
# 모든 테스트 실행
pnpm test

# 감시 모드로 테스트 실행
pnpm test:watch

# 테스트 커버리지 확인
pnpm test:coverage

# 새 컴포넌트를 위한 테스트 파일 생성
pnpm generate-tests
```

### 테스트 환경

테스트 환경은 다음 도구를 사용합니다:

- Vitest - 테스트 실행기
- React Testing Library - React 컴포넌트 테스트
- Happy DOM - DOM 시뮬레이션
- Jest DOM - DOM 매처 확장

자세한 내용은 `src/test/README.md`를 참조하세요.

## 의존성

- React 18.x
- @ark-ui/react
- @react-spring/web
- PandaCSS
- @nation-a/tokens
- @nation-a/icons

## 라이선스

MIT 라이선스