Chakra UI에 기여하기

Chakra UI에 기여하기 (Contributing to Chakra UI)

Chakra UI v3.0에 기여하는 방법을 안내하는 가이드예요. 문서 개선, 버그 수정, 새로운 데모 추가, 코드 개선 등 어떤 규모의 기여든 환영합니다.

출처: 문서

Chakra UI에 기여해 주셔서 감사합니다 💖, 당신은 대단해요!

Chakra UI를 개선하는 데 도움을 줄 수 있는 몇 가지 방법이 있어요.

문서 개선: 새 데모를 추가하거나, 오타를 수정하거나, 누락된 정보를 추가합니다.
새 데모 추가: 웹사이트와 storybook에 새 컴포넌트 데모를 추가합니다. apps/compositions/src/examples에 PR을 열어주세요.
버그 수정: 버그를 리포트하거나, 수정하거나, 누락된 기능을 추가합니다.
코드에 기여: GitHub Discussion을 열어 새 기능을 제안하거나, 작업할 기존 버그를 찾습니다.
코드 개선: 코드를 개선하거나, 버그를 수정하거나, 누락된 기능을 추가합니다.

:::info

크든 작든 모든 기여를 환영합니다.

:::

Chakra v3.x는 Chakra 생태계의 두 프로젝트인 Ark UI와 Zag.js의 조합으로 구성돼요. 목표는 Chakra UI에 가능한 한 적은 코드를 유지하고, 무거운 작업은 이 프로젝트들에 위임하는 것입니다.

:::card-group

Zag.js — 컴포넌트 로직을 상태 머신으로 모델링 (https://github.com/chakra-ui/zag)
Ark UI — Zag.js의 상태 머신을 headless UI 컴포넌트로 변환 (https://github.com/chakra-ui/ark)

:::

취약점 보고: 공개 이슈로 보고하지 마세요. GitHub Security Advisories를 통해 비공개로 보고해 주세요. 이슈 유형, 영향받는 패키지와 버전, 재현 단계, 영향을 포함하세요.

전체 정책은 SECURITY.md를 참고하세요.

지원 버전: 최신 메이저 버전에 대한 보안 업데이트를 제공합니다.

보안 자세 (Security posture):

내부적으로 dangerouslySetInnerHTML을 사용하지 않아요—모든 것이 React의 JSX로 렌더링됩니다. 원시 HTML(예: 사용자 콘텐츠가 있는 Prose 또는 CodeBlock)을 전달한다면 먼저 새니타이즈하세요.
CodeBlock: 사용자 제공 코드를 렌더링할 때 구문 하이라이터가 HTML을 이스케이프하는지 확인하세요.
CSP: Emotion은 <style> 태그를 통해 스타일을 주입해요. 엄격한 CSP에서는 style-src 'unsafe-inline'을 추가하거나 nonce를 사용하세요(Emotion이 지원합니다).
Storage: localStorage, sessionStorage, 쿠키를 사용하지 않습니다.

Chakra v3.x에 이슈를 등록하는 마인드셋은 다음과 같아요.

Chakra v3.x에 기능을 요청하는 마인드셋은 다음과 같아요.

git clone https://github.com/chakra-ui/chakra-ui.git

pnpm install

pnpm build:fast

pnpm storybook

pnpm www dev

pnpm test

에디터에서 다음 확장을 사용할 것을 권장해요.