amber components
v1.2 - still work in progress(bar)
앰버 설계 시스템의 웹 구성 요소 구현.
이 저장소는 주로 개발자 및 기고자를 대상으로합니다. 적절한 문서 및 Styleguide는 https://amber.bitrock.it를 참조하십시오.
라이브 스토리 북에서 구성 요소를 미리보기/시도 할 수 있습니다.
$ yarn add @amber-ds/components
--- or ---
$ npm install @amber-ds/components선택적으로, 이전 버전의 Firefox 및 Edge를 지원하기 위해 Web Components Polyfills를 추가 할 수 있습니다.
$ yarn add @webcomponents/webcomponentsjs
--- or ---
$ npm install @webcomponents/webcomponentsjs환경에 따라 프로젝트의 구성 요소를 다른 방식으로 가져올 수 있습니다.
Bundler (Webpack)와 함께 JavaScript 파일로
// myfile.js
// import the whole components library
import AmberComponents from '@amber-ds/components' ;
// import a single component (button for instance)
import '@amber-ds/components/button' ,번들이없는 HTML의 JavaScript 파일로
<!-- mypage.html -->
<!-- import the whole components library -->
< script type =" module " src =" ./node_modules/@amber-ds/components/index.js " > </ script >
<!-- import a single component (button for instance) -->
< script type =" module " src =" ./node_modules/@amber-ds/components/button.js " > </ script > 그런 다음 .html 파일 또는 html 출력을 생성하는 템플릿에서 다음과 같습니다.
<!-- myfile.html -->
< amber-button priority =" primary " >
Get ready!
< amber-button > 개발 아키텍처, 스택 및 코드 작업 방법에 대한 간단한 설명 :
WebComponents 사양은 사용자 정의 요소 v1 및 Shadow Dom V1 사양을 그룹화하는 우산 용어입니다. 이 브라우저 API를 사용하면 브라우저 및 프론트 엔드 프레임 워크에서 작동하는 자체 기능, 스코프 스타일 및 마크 업이있는 W3C 호환 사용자 정의 HTML 태그를 작성할 수 있습니다.
더 나은 코드 탄력성을 달성하기 위해 모든 구성 요소는 주로 정적 유형 검사 및 Decorators 구문을 활용하기 위해 TypeScript로 작성됩니다. 또한 코드를 ES-2015로 변환하는 데 사용됩니다.
표준으로서의 웹 구성 요소는 렌더링 메커니즘 및 데이터 바인딩을 처리하지 않기 때문에 Lit-HTML과 웹 구성 요소 클래스 라이트를이 라이브러리 내의 모든 동시 모노 핀에 대한 기초 계층으로 채택하고 있습니다.
triggerEvent(element, name, ?detail) - 새로운 사용자 정의 이벤트를 만들고 옵션 detail 객체로 발송하는 래퍼. 버블 링이 이미 켜져 있습니다.새로운 앰버 구성 요소에 필요한 (그러나 최소한) 보일러 플레이트를 신속하게 만들려면 작은 CLI 유틸리티가 포함되어 있습니다.
$ yarn create:component [name]
--- or ---
$ npm run create:component [name] 이렇게하면 필요한 두 스타터 파일 index.ts 및 style.scss 와 함께 ./src/components 폴더 내에 하위 폴더가 생성됩니다.
./src/components/library.ts 파일 내부의 새 구성 요소 만 가져와 Dev & Build Processess에서이를 체인하면됩니다.
구성 요소 폴더의 Main index.scss 파일 인 Sass를 사용하여 각 구성 요소의 스타일을 정의 할 수 있습니다. 컴파일러에 의해 처리 된 다음 Shadow Dom에 주입됩니다.
스타일, 믹스 인 또는 구성 요소 간의 다른 것을 공유 해야하는 경우 분리 된 파일을 작성한 다음 필요한 곳에서 가져와야합니다.
현재 핵심 라이브러리 ( src/libs 폴더 내의 일반 .ts 파일 ) 만 농담을 통해 테스트됩니다.
라이브 재 장전 스토리 북으로 개발 모드에서 프로젝트 시작
$ yarn start간단한 HTML 페이지로 개발 모드에서 프로젝트 시작
$ yarn dev ./dist 폴더에서 정적 스토리 북 빌드를 만듭니다
$ yarn build:storybook단위 테스트를 실행하십시오
$ yarn test:unit이 프로젝트는 간단한 분기 정책을 따릅니다.
master 안정적인 코드 만 포함되어 있으며 직접 업데이트해서는 안됩니다.developmentgh-pages 직접 development master 로 병합하지 말고 ( 관리자가 잠금 ... ) 항상 PR을 보내 검토를 받으십시오.
NPM에 새 버전의 패키지를 게시하기 전에 먼저이 체크리스트를 실행하십시오.
package.json 파일의 증분 버전 번호릴리스에 새로운 구성 요소가 포함 된 경우
webpack.config.js 추가하십시오. 독립형 모듈을 작성하는 데 필요합니다./src/components/library.ts 파일에 추가하십시오. 사용자가 전체 라이브러리를 가져올 때 액세스 할 수 있습니다./src/elements.ts 배열에서 이름을 추가하십시오. 경우에 따라 vue.js 호환성에 도움이 될 수 있습니다. 새 범프 버전이 master 브랜치로 푸시되면 BitRock-Admin 계정을 사용하여 NPM ( 모든 자동 점검이 통과 된 후 )에 배포를 자동으로 트리거합니다.
이 Repo와 Amber Design Sytem 로고의 코드는 MIT 라이센스에 따라 릴리스 된 Bitrock UI 엔지니어링 팀이 배포합니다.
