hsds react

HSDS : 반응

Help Scout의 디자인 시스템에 대한 구성 요소에 반응합니다

라이브 데모

HSDS의 스토리 북 : https://hsds.helpscout.com/을 확인하십시오.

설치하다

 npm install @helpscout/hsds-react --save

시작하기

이 repo를 복제 한 후 실행하십시오.

 npm install

모든 것이 설치되면 실행 :

 npm start

브라우저에서 http : // localhost : 8900/에서 HSDS의 스토리 북을 확인하십시오!

SVG 어댑터

v2.18.0 기준으로 svg 세트는 옵트 인입니다. 이것은 컴파일 된 번들 크기를 줄이기 위해 수행되었습니다. svg 아이콘을로드하려면 적절한 어댑터를 앱에 추가하십시오.

메인 진입 점 (예 : src/index.js ) 내에 어댑터를로드하는 것이 좋습니다.

 // src/index.js
// For a lighter-weight svg set for embeddables
import '@helpscout/hsds-react/adapters/embed'
// For the complete svg set
import '@helpscout/hsds-react/adapters/app'

참고 : 이것은 Icon 및 Illo 포함한 모든 svg 이미지를로드합니다.

테스트

시계 모드에서 농담을 실행하려면 실행하십시오.

 npm run dev

모든 테스트 (적용 범위보고 포함)를 실행하려면 실행하십시오.

 npm run test

출판

PR 병합

릴리스가 완료되면 PR을 병합하려면 스쿼시를하고 PR 페이지에서 병합하십시오 . 메인 지점에서 역사를 깨끗하게 유지합니다.

가능하면 당시에는 단 하나의 PR으로 릴리스를하는 경향이 있습니다.

NPM 방출

메인 출시 또는 베타 빌드 출시에 대해 자세히 알아볼 수 있습니다.

새 버전의 HSD를 게시하고 출시하려면 다음 명령을 실행하십시오.

 npm run release

옵션이있는 CLI 프롬프트가 제공됩니다. 당신이 원하는 것을 선택하십시오. 스크립트는 테스트에서 출판에 이르기까지 나머지를 처리합니다.

스토리 북 배포

스토리 북을 배포하려면 다음 명령을 실행하십시오.

 npm run deploy

학습

• HSDS 문서 : https://hsds.helpscout.com/
• 개발자 심층 문서 : Dev Docs
• 또한 더 많은 학습 리소스는 비디오를 확인하십시오

파란색?

2018 년 11 월 8 일, 우리는 파란색을 HSDS : React?

원래 블루 라이브러리는 여전히 NPM에 존재하며 여전히 설치할 수 있습니다.

 npm install @helpscout/blue --save

그러나이 구성 요소 라이브러리의 지속적인 개발은 다음을 통해 설치할 수있는 HSDS : React에서 계속 될 것입니다.

 npm install @helpscout/hsds-react --save

Blue에 참여한 모든 사람들에게 큰 감사를드립니다! 블루는 항상 당신의 아들이 될까요? .