zag

Zag는 접근 가능한 UI 컴포넌트를 구축하기 위한 유한 상태 기계 JavaScript 라이브러리입니다. 탭, 메뉴, 모달, 툴팁 등 일반적인 컴포넌트 패턴을 각 프레임워크마다 별도로 구현하는 문제를 방지하기 위해 상호작용 로직을 프레임워크 독립적으로 모델링하는 것을 목적으로 합니다. README에서 소개하는 핵심 아이디어: - 한번 작성하면 어디서나 사용: 컴포넌트 상호작용을 모든 프레임워크와 독립적으로 모델링하며 React, Solid, Svelte, Vue용 어댑터를 제공합니다. - 접근성 중점: 키보드 상호작용, 포커스 관리, ARIA 역할 및 속성 등을 처리합니다. - 헤드리스: 기계 API가 완전히 스타일 없이 제공되어 스타일링 선택은 개발자에게 맡깁니다. - 상태 기계:StateMachine 구현은 상태차트 개념을 기반으로 하지만 SCXML 명세를 따르지는 않습니다. 사용 모델: 기계는 @zag-js/dialog, @zag-js/tooltip과 같이 컴포넌트별로 별도 패키지로 출판되며 npm 또는 yarn으로 설치됩니다. @zag-js/react, @zag-js/vue, @zag-js/solid, @zag-js/svelte 같은 프레임워크 래퍼를 통해 애플리케이션 내부에서 기계를 소비할 수 있습니다. React 예시는 useMachine을 컴포넌트 패키지와 함께 사용하고 connect(service, normalizeProps)로 props API를 생성해 루트 컨테이너 및 각 항목에 펼치는 방식을 보여줍니다. README에 명시된 지침 원칙: 기계와 테스트는 WAI-ARIA 작성 관례를 기준으로 모델링되며 동작이 프레임워크 간 일관되도록 모든 컴포넌트에 대한 엔드투엔드 테스트가 작성됩니다. 기계는 spawn, 중첩 상태 같은 복잡한 상태 기계 개념을 피하며 경량이고 단순하게 유지됩니다. 저장소 및 워크플로우 안내: - README에서 zagjs.com과 CHANGELOG.md로 문서와 변경 로그에 링크됩니다. - 빌드는 esbuild와 turborepo를 사용해 패키지 간 병렬 빌드를 수행하며 CJS, ESM, DTS 출력을 생성합니다. - React(Next.js TypeScript), Vue 3, Solid, Svelte용 시작 예제가 존재합니다. - 엔드투엔드 테스트는 Playwright로 작성되며 React, Vue, Solid 프레임워크별로 실행됩니다. - 새 기계 패키지 또는 유틸리티 패키지를 scaffold하는 생성자 명령이 제공됩니다. - 기타 명령으로 테스트 실행, 린팅, 빌드, 웹사이트 시작이 가능합니다. README는 Chakra UI의 React와 Vue 구현 간 중복 코드, 순수 UI 패턴, Material Components Web, Radix UI, XState, Vue.js, Lit, Sonner로부터 영감을 얻었음을 명시합니다. 기여 안내는 Good First Issue 라벨, 버그 및 문서 격차 보고 이슈, 기능 요청을 가리킵니다. 이 프로젝트는 MIT 라이선스로 Chakra Systems Inc.에서 운영됩니다.