BEEQ

웹 구성 요소 라이브러리 이니셔티브 인 Beeq

이 저장소는 BEEQ 설계 시스템에 존재하는 웹 구성 요소의 소스 코드를 보유합니다.

패키지	버전	선적 서류 비치
@beeq/core		readme
@beeq/angular		readme
@beeq/react		readme
@beeq/vue		readme
@beeq/tailwindcss		readme

켈 시작하기 전에 켈

구조 ?

이 프로젝트는 NX Monorepo로 구성되었습니다.

 ├── ? packages
  ├── ? beeq
  ├── ? beeq-angular
  ├── ? beeq-react
  ├── ? beeq-vue
  ├── ...
  ├── ? beeq-tailwindcss
  ├── ...
├── ? tools
├── package.json
├── package-lock.json

어디:

• 패키지/BEEQ : 핵심 라이브러리 (구현 된 모든 요소/구성 요소의 소스)
• 패키지/Beeq-angular : Beeq 코어 라이브러리를위한 각도 특이 적 래퍼
• 패키지/beeq-react : react.js- 특이 적 래퍼 용 Beeq 코어 라이브러리
• 패키지/beeq-vue : vue.js-specific wapper for beeq 코어 라이브러리
• 패키지/BEEQ-TAILWINDCSS : BEEQ의 의견이 많은 TailWindcss 구성

의존성?

노드 및 NPM 버전을 관리하기 위해 Volta를 사용하는 것이 좋습니다. 설치 프로세스는 매우 간단하며 공식 사이트에서 언급 된 바와 같이.

Volta를 사용하면 노드 엔진을 한 번 선택한 다음 걱정을 중단 할 수 있습니다. 프로젝트를 전환하고 노드간에 수동으로 전환해야하지 않아도됩니다.

Volta가 설치되면 Beeq 폴더로 로컬로 변경할 때마다 package.json 에 고정 된 오른쪽 노드 및 NPM 버전으로 전환됩니다.

  "volta" : {
    "node" : " 20.11.1 " ,
    "npm" : " 10.4.0 "
  }

Volta는 필수가 아니며, 여전히 가장 적합한 노드/NPM 설정을 사용할 수 있습니다.

• NodeJS v18.x 이상
• NPM V8 이상

용법

BEEQ 구성 요소는 NPM 패키지 관리자 레지스트리에 게시됩니다. 프로젝트의 기술 스택에 따라 @beeq/core 또는 프레임 워크 별 포장지 ( @beeq/angular , @beeq/react )를 사용할 수 있습니다. 각 패키지의 사용 지침을 따르십시오.

• @beeq/core 패키지를 사용하는 방법
• ? @beeq/angular 패키지를 사용하는 방법
• @beeq/react 패키지를 사용하는 방법
• ? @beeq/vue 패키지를 사용하는 방법
• ? @beeq/tailwindcss preset를 사용하는 방법

스토리 북에서 모든 BEEQ 구성 요소가 출시 된 것을 확인하십시오. 여기에서 각 구성 요소가 허용하는 변형과 함께 모든 구성 요소의 API (속성, 이벤트 및 노출)를 찾을 수 있습니다.

프로젝트 실행? ‍

Beeq Design 시스템에서 구성 요소를 개발/확장하려면이 repo를 Github로 포크하고 새로운 디렉토리로 로컬로 복제하십시오.

git clone https://github.com/ < YOUR_GITHUB_USERNAME > /BEEQ.git BEEQ-Design-System
cd BEEQ-Design-System
git checkout main

설치

단순히 실행 :

npm ci
# Make sure to build first the project before starting it
npm run build
npm start

코딩 시작?!

짓다 ?

생산 빌드의 경우 그냥 실행하십시오.

npm run build

시험 ?

Beeq는 단위 테스트에 농담을 사용하고 엔드 투 엔드 테스트에는 농담 및 인형극을 사용합니다.

모든 테스트를 한 번 실행할 수 있습니다.

npm run test

아래의 오류와 비슷한 오류가 발생하면 main 분기를 로컬로 확인하고 테스트를 다시 실행하십시오 .

fatal: Not a valid object name main
fatal: No such ref: ' main '
nx affected

구성 요소를 생성합니다

Beeq에는 새로운 구성 요소의 골격을 만들 때 시간을 절약하는 구성 요소 생성기가 제공됩니다. 생성기를 사용하려면 다음 명령을 실행하고 프롬프트 CLI의 지침을 따라야합니다.

npm run g

기여

? 당신이 분위기에 있고 도움을주고 싶다면? 기고 가이드 라인 및 개발 표준을주의 깊게 읽으십시오.

❗️ 버그 수정, 새로운 기능 등을 작업 할 때는 GitFlow 워크 플로를 따릅니다. 버그/핫 고정, 새로운 기능 등에서 작업을 시작할 때 지점을 만드는 방법에 대한 기고 분기 전략 가이드 라인의 지침을 따라야합니다.

선적 서류 비치

Stenciljs

도움이 필요하십니까? 여기에서 Stenciljs 문서를 확인하십시오 (https://stenciljs.com/).

테일 윈드 CSS

우리는 구성 요소 스타일에 Tailwind CSS를 사용합니다. 여기에서 해당 문서를 살펴보십시오. (https://tailwindcss.com/docs/)

감사해요

우리는 UI 변경을 검토하고 시각적 회귀를 식별 할 수있는 시각적 테스트 플랫폼을 제공하기 위해 진심으로 감사를 표하고자합니다.

CI 프로세스를 간소화하고 Monorepo를 효율적으로 관리 할 수 있도록 NX 팀에 감사드립니다.