ui-component-converter

HTML to shadcn/ui Component Converter

HTML 구조를 분석하여 shadcn/ui 컴포넌트로 자동 변환하는 도구입니다.

주요 기능

• HTML 구조 파싱 및 분석
• JSON 기반 컴포넌트 매핑 워크플로우
• shadcn/ui 컴포넌트 코드 자동 생성
• TSX 파일 자동 생성
• 필요한 import 문 자동 생성

JSON 워크플로우

1. HTML에서 컴포넌트 추출 → JSON 생성
2. 사용자가 JSON 편집 → variant 선택
3. 편집된 JSON → shadcn 코드 생성

virtualenv setting

[WINDOWS]
python -m pip install virtualenv
python -m virtualenv venv
venv\Scripts\activate

[LINUX]
python -m pip install virtualenv
python -m virtualenv venv
. venv/bin/activate

Install requirement

pip install -r requirements.txt

Pre-commit 설정 (선택사항)

코드 품질을 유지하기 위해 pre-commit hook을 설정할 수 있습니다:

# pre-commit 설치
pip install pre-commit

# pre-commit hook 설치
pre-commit install

# 모든 파일에 대해 pre-commit 실행 (초기 설정 시)
pre-commit run --all-files

pre-commit이 설정되면 커밋할 때마다 자동으로 코드 스타일 검사 및 포맷팅이 실행됩니다.

사용 방법

JSON 기반 변환기 실행

# 기본 HTML 입력으로 변환
python shadcn_prompt_generator/json_based/json_converter.py

# 커스텀 HTML 입력으로 변환
python shadcn_prompt_generator/json_based/json_converter.py --input "your_html_string"

프로그래밍 방식 사용

from shadcn_prompt_generator.json_based.json_converter import JsonConverterApp

app = JsonConverterApp()

# HTML에서 컴포넌트 추출하여 JSON 생성
html_string = '''<div class="modal-wrap">...</div>'''
app.extract_components(html_string)

# JSON 설정을 사용하여 변환
result = app.convert_with_json(html_string)
print(result)

출력 파일

• extracted_components.json: 추출된 컴포넌트 설정
• GeneratedComponent.tsx: 생성된 shadcn/ui 컴포넌트