precise ui

Zeiss가 전원을 공급하는 최소 의존성을 갖춘 완전한 의견이 많은 반응 구성 요소 라이브러리.

UI 구성 요소 라이브러리에는 매우 낮은 수준의 디자인 요소와 결합 된 고급 설계 요소가 모두 포함되어 있습니다. 일반적으로 라이브러리의 의도는 설계 사양을 만족시키고 프로그래밍을 쉽게 제공하는 구성 요소를 노출시켜 개발을 단순화하는 것입니다. 따라서 반복 가능한 UI 디자인은 몇 시간 대신 몇 분 밖에 걸리지 않아야합니다.

주방 싱크에 대해서는 https://precise-ui.io를 참조하십시오 (즉, 문서를 포함한 모든 구성 요소를 설명하는 데모 페이지).

시작하기

기본적으로 일반적인 사용은 암시되어야하며 유연성은 명시 적 진술에 의해 제공됩니다. 따라서 우리는 가능한 한 많이 사용자 정의 할 수 있지만 (의견이 많은) 단순성을 목표로합니다. 표준 디자인은 우리 자신의 주요 목표를 위해 거의 설정되어 있지만 해당 영역에서 완전한 자유를 얻고 싶습니다. 이러한 이유로 우리는 테마를 수행하는 방법과 구성 요소를 노출하여 원하는 종류의 사용자 정의를 가능하게하는 방법을 지속적으로 개선하고 있습니다.

NPM 또는 원사를 사용하여 Precise UI를 프론트 엔드 프로젝트에 쉽게 통합 할 수 있습니다. 사용을 시작하려면 아래 지침을 따르십시오.

설치

1. 먼저 설치해야합니다.

npm i precise-ui

또는 원사를 사용하여

yarn add precise-ui

2. 그런 다음 모든 피어 종속성이 설치되어 있는지 확인하십시오.

npm i react styled-components

용법

모든 것이 준비되면 이제 정확한 UI 구성 요소를 가져올 수 있습니다.

 import { TextField } from 'precise-ui' ;

< TextField label = "Label" />

당사 웹 사이트에서 사용 가능한 모든 구성 요소 목록을 볼 수 있습니다.

기여

모든 사람은 정확한 UI에 기여할 수 있습니다. 그러나 시작하기 전에 기여 지침을 읽으십시오.

기여 해야하는지 여부가 확실하지 않다고 생각되면 우리의 행동 강령이 도움이 될 수 있습니다.

문제 및 지원

사용법과 일반적인 질문이 있으면 precise-ui 태그를 사용하여 스택 오버플로 에 대한 질문을 할 수 있으며 가능한 빨리 도움을 받게됩니다.

또한 여기에서 새 문제를 만들 때 제공된 템플릿 중 하나를 사용하십시오.

• 버그 보고서
• 기능 제안

개발

다음 섹션에서는 정확한 UI를 개발하는 과정을 안내합니다.

설치

개발하려면 NPM 및 Node.js 8+가 필요합니다. 복제 후 저장소를 통해 모든 종속성을 설치하십시오

npm install

다음은 시작하는 빠른 예입니다. 필요한 것은 다음과 같습니다.

npm start

결과적으로 이것은 주방 싱크 (데모 응용 프로그램)를 실행하는 개발 서버가 시작되며 로컬로 실행되며 LocalHost : 6060을 통해 도달 할 수 있습니다. 참고 :이 포트는 변경할 수 있습니다. 사용 가능한 페이지에는 포함 된 모든 구성 요소가 포함되어 있으며 이에 대한 희망적으로 유용한 문서가 포함되어 있습니다.

버전 작성

npm 을 통해 버전을 증가시킬 수 있습니다.

npm version

이것은 현재 버전을 표시하고 새 버전을 요구합니다. 결과적으로 package.json의 정보가 업데이트됩니다. 또한 GIT 태그는 정보로 작성됩니다 ( "V"를 사용하여 자동으로 접두사). 새 버전을 직접 지정하여 프로세스를 자동화 할 수도 있습니다. 예를 들어 새 버전이 "1.2.3"인 경우 다음 명령 만 사용합니다.

npm version --new-version 1.2.3

규칙

우리는 기본 수출을 사용하지 않습니다. 대신 모든 수출은 올바르게 지정되어야합니다. 구성 요소의 경우 내보내기 이름은 파일 또는 폴더의 이름과 같습니다.

폴더

노출 된 모든 주 구성 요소는 components 아래 자체 폴더에 배치해야합니다. *.part.tsx 파일에 배치 된 구성 요소는 일부 (필요한) 내부 구조를 제공하기 위해 만 만든 내부 구성 요소로 간주됩니다.

노출 된 모든 디자인 도우미 구성 요소는 quarks 폴더의 파일에 배치해야합니다. 디자인 도우미는 일반 스타일 구성 요소와 마찬가지로 Styled 접두사로 시작합니다.

HOC (Highoder Component)는 hoc 폴더에 위치해야합니다. 이름 지정 규칙은 with 사용하여 HOC를 노출시키는 것입니다.

컨텍스트 관련 구성 요소는 contexts 폴더에 있습니다.

일반 기능 유틸리티는 utils 폴더에 배치해야합니다. 편의를 위해 UTIL의 모든 내용이 내보내지만 모듈은 모든 구성 요소에서 직접 참조해야합니다. 유틸리티는 거의 자체적으로 유지되어야하며, 즉 참조적인 구성 요소는 금지되어야합니다.

이름 지정

상태 부족 구성 요소는 const 로 만들어야하지만 StateFull 구성 요소는 class 로 생성되어야합니다. 전자의 경우 소품이 접미사 된 구성 Props 이름을 가진 인터페이스 만 생성해야합니다 (소품의 유형을 선언하기 위해). 후자의 경우 State 가 접미사 인 구성 요소 이름을 가진 추가 인터페이스도 생성되어야합니다. 이 인터페이스는 구성 요소의 내부 상태에 대한 유형 정보를 전달합니다.

입력 필드 구성 요소는 항상 Field 와 접미사해야합니다. 그들의 소품은 InputProps 인터페이스를 확장해야합니다.

이벤트 소품은 on 과 접두사를해야하며 단일 인수 만 있어야합니다. 이 인수는 인터페이스를 따르는 객체이어야하며, 이벤트의 이름, 일반적으로 구성 요소의 이름, 이벤트 유형으로 구성되며 Event 와 onChange TextField 가 TextFieldChangeEvent 있습니다.

다양한 구성 요소 클래스가 있습니다. 구성 요소의 접미사를 보면서 다른 클래스의 구성 요소를 쉽게 구별 할 수 있어야합니다. 우리는 다음과 같습니다.

• *Control , 상태의 기능적 구성 요소
• *Panel , 레이아웃을 사용할 레이아웃
• *Field , 입력 필드

이 협약에 대한 예외는 여러 가지 이유 (역사적, 미학적, ...)로 인해 발생할 수 있지만 항상 제대로 추론하고 논의해야합니다.

코드 형식

글을 많이 쓰지 않습니다. 우리는 더 예쁘게 사용하고 코드가 제대로 예전 된 경우 빌드 점검을 사용합니다. 그냥 실행

npm run prettier

의심스럽지 않은 경우 코드 변경이 원하는 서식에 적합합니다.

단위 테스트

모든 변경 사항은 해당 단위 테스트를 통해 회사에 있어야합니다. 테스트를 실행하려면 다음 명령을 사용합니다.

npm run test

이것은 또한 린터를 실행합니다. 독립형 단위 테스트는 test:unit 통해 사용할 수 있습니다. 마찬가지로 코드 적용 범위를 쉽게보고 할 수도 있습니다.

npm run test:unit --coverage

단위 테스트의 경우 Jest를 사용합니다. 스냅 샷 테스트 (효소 및 일부 JSON 스냅 샷 시리얼 라이저를 통해 수행)를 사용하는 것이 좋습니다.

시각적 테스트

시각적 스냅 샷은 /integration/__image_snapshots__ 에 있습니다.

테스트가 실행되면 [componentName]/Example.md 에서 구성 요소를 렌더링하고 스크린 샷을 만들고 이전 버전 스크린 샷과 비교합니다.

로컬로 테스트를 실행하려면 Docker를 설치해야합니다.

npm run test:visual

구성 요소가 변경되거나 추가 또는 제거되면 스냅 샷을 업데이트해야합니다. 스냅 샷을 업데이트하려면 :

npm run test:visual -- -u

경우에 따라 (즉, 애니메이션이있는 구성 요소) 테스트를 건너 뛰는 것이 필요합니다. 다음 방식으로 수행 할 수 있습니다. update example.md 파일 :

 ```js { "props": { "data-skip": true } }

<Component />

어떤 경우에는 스냅 샷을하기 전에 대기하도록 시각적 테스트를 지시해야합니다. 다음 방식으로 수행 할 수 있습니다. update example.md 파일 :

 ```js { "props": { "data-wait": 500 } }

<Component />

새 아이콘 추가

가져온 모든 아이콘 목록은 /tools/icongen.config 에 있습니다. 목록을 수정 한 후 npm run icongen 실행해야합니다. 그렇지 않으면 Prepush에서 실행됩니다.

출시

모든 릴리스 가능한 코드는 develop 지점에서 집계됩니다. 릴리스를하려면 단순히 GitHub 릴리스를 만듭니다 (일반적으로 CHANGELOG.md 파일에서 현재 항목을 복사).

따라서 표준 워크 플로는 다음과 같습니다.

1. 저장소를 복제하십시오
2. 지점을 만드십시오
3. 일을하십시오
4. 변경 사항을 밀어냅니다
5. 포크 / 브랜치의 PR을 develop 수 있습니다.
6. 일단 "충분한"기능이 develop 에 집계 된 기능은 Github 릴리스를 만들기
7. 다음 변경 사항을 develop 하려면 버전 번호를 변경 / 증가하십시오.

현재 출시 된 버전에 대해 알아 보려면 두 가지 옵션이 있습니다. NPM 페이지로 이동하거나 GitHub 릴리스를 사용하십시오. 둘 다 readme.md 위에 연결되어 있습니다.

특허

Precise UI는 MIT 라이센스를 사용하여 릴리스됩니다. 자세한 내용은 라이센스 파일을 참조하십시오.

우리는 재료 UI 아이콘의 아이콘을 사용하고 있습니다. 그들의 코드와 디자인은 MIT (Material UI)의 각 라이센스에 포함됩니다.