amber components

Янтарные компоненты

Реализация веб -компонентов системы проектирования Amber.

Этот репозиторий предназначен главным образом для разработчиков и участников для правильной документации и стиля, пожалуйста, обратитесь к https://amber.bitrock.it.

Вы можете предварительно просмотреть/попробовать компоненты в Life Story Wording.

Использование

Установить

$ yarn add @amber-ds/components
--- or ---
$ npm install @amber-ds/components

При желании вы можете добавить полифиллы веб -компонентов, чтобы поддержать предыдущие версии Firefox и Edge.

$ yarn add @webcomponents/webcomponentsjs
--- or ---
$ npm install @webcomponents/webcomponentsjs

Добавить в проект

Вы можете импортировать компоненты в своем проекте по -разному в зависимости от окружающей среды:

Как файлы JavaScript с помощью Bundler (например, WebPack)

 // 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' ,

в качестве файлов javaScript из HTML без бундлера

 <!-- 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 -интерфейсы браузера позволяют вам написать пользовательские HTML -теги W3C со своими собственными функциональными возможностями, стилями сферой и разметкой, которые работают в браузерах и фронтальных фреймворках.

Машинопись

Чтобы достичь лучшей устойчивости кода, все компоненты написаны в TypeScript, чтобы воспользоваться преимуществами в основном из проверки статического типа и синтаксиса декораторов. Он также используется для транспилирования кода в ES-2015.

На основе Lit-HTML & Litelement

Поскольку веб-компоненты в качестве стандарта не обрабатывают механику рендеринга и связывание данных, мы принимаем LIT-HTML и его класс веб-компонентов в качестве слоя фундамента для каждого сбора в этой библиотеке.

Внутренние утилиты

• triggerEvent(element, name, ?detail) - обертка для создания нового пользовательского события и отправить его с помощью дополнительного объекта detail . Пузырька уже включена.

Добавить новый компонент

Чтобы быстро создать необходимую (но минимальную) пакет для нового компонента AMBER, мы включили небольшую утилиту CLI:

$ yarn create:component [name]
--- or ---
$ npm run create:component [name]

Это создаст подпапку в папке ./src/components с двумя необходимыми для стартовых файлов index.ts и style.scss .

Вам нужно будет только импортировать новый компонент внутри файла ./src/components/library.ts для цепочки его в процессе разработки и сборки.

Стиль

Вы можете определить стили каждого компонента, используя SASS, основной файл index.scss в папке компонента обрабатывается компилятором, а затем вводится в теневой DOM.

Если вам нужно поделиться стилями, микшинами или чем -то еще между компонентами, вы должны создать отдельный файл, а затем импортировать его там, где они требуются.

Тесты

На данный момент только основные библиотеки ( Plain .ts -файлы в папке src/libs ) проходят тестирование через шутку.

Доступные задачи NPM

Запустите проект в режиме разработки с Live Reload

$ yarn start

Запустите проект в режиме разработки с простой HTML -страницей

$ yarn dev

Создайте статическую сборку сборника рассказов в папке ./dist

$ yarn build:storybook

Запустите модульные тесты

$ yarn test:unit

Политика ветвления

Этот проект следует за простой политикой ветвления:

• master содержит только стабильный код и не должен быть обновлен напрямую
• development , где написан эволютивный или экспериментальный код
• gh-pages , где развернуты разданные файлы сборка статических сборников рассказов

Не объединяйте непосредственно development в master ( это заблокирован администратором ... ), всегда отправляйте пиар, чтобы провести обзор.

Опубликовать новую версию

Прежде чем попытаться опубликовать новую версию пакета на NPM, сначала пройдите через этот контрольный список:

• Тесты проходят (это требуется для PRS)
• Номер версии приращения в файле package.json следующим образом
• Сообщите об изменениях в докторах из янтаря

Если релиз включает новый компонент :

• Управление версиями должно быть увеличено незначительной версией
• Обязательно добавьте новую точку входа webpack.config.js , это необходимо для создания автономного модуля
• Обязательно импортируйте компонент и добавьте его в файлах /src/components/library.ts , таким образом он будет доступен, когда пользователь импортирует всю библиотеку
• Добавьте имя тега компонента в массиве /src/elements.ts , это может помочь с совместимостью Vue.js в некоторых случаях

Когда новая выталкиваемая версия выдвигается в master ветвь, она автоматически запустит развертывание на NPM ( после всех автоматических проверок) проходов ) с использованием учетной записи Bitrock-Admin.

Лицензия

Код в этом репо и логотип Amber Design Sytem распространяется командой Bitrock UI Engineering, выпущенной по лицензии MIT.