amber components
v1.2 - still work in progress(bar)
Implementación de componentes web del sistema de diseño Amber.
Este repositorio está dirigido principalmente a desarrolladores y contribuyentes, para la documentación y la guía de estilo adecuadas, consulte https://amber.bitrock.it.
Puede obtener una vista previa/probar los componentes en el libro de cuentos en vivo.
$ yarn add @amber-ds/components
--- or ---
$ npm install @amber-ds/componentsOpcionalmente, es posible que desee agregar los componentes web que los pollos para admitir versiones anteriores de Firefox y Edge.
$ yarn add @webcomponents/webcomponentsjs
--- or ---
$ npm install @webcomponents/webcomponentsjsPuede importar los componentes de su proyecto de diferente manera dependiendo del entorno:
Como JavaScript se presenta con un Bundler (como 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' ,Como JavaScript se presenta desde HTML sin un Bundler
<!-- 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 > luego en un archivo .html , o una plantilla que produce una salida HTML:
<!-- myfile.html -->
< amber-button priority =" primary " >
Get ready!
< amber-button > Una breve descripción de la arquitectura de desarrollo, la pila y cómo trabajar en el código:
La especificación de componentes web es un término general para agrupar los elementos personalizados V1 y la especificación de Shadow DOM V1. Estas API del navegador le permiten escribir etiquetas HTML personalizadas compatibles con W3C con sus propias funcionalidades, estilos de alcance y marcado que funciona en los navegadores y los marcos frontend.
Para lograr una mejor resiliencia de código, todos los componentes se escriben en TypeScript para aprovechar principalmente la verificación de tipo estático y la sintaxis de los decoradores. También se usa para transmisar el código a ES-2015.
Dado que los componentes web como estándar no manejan la mecánica de representación y la unión de datos, estamos adoptando Lit-HTML y su litelemento de clase de componentes web como una capa de base para cada comoponente dentro de esta biblioteca.
triggerEvent(element, name, ?detail) : un contenedor para crear un nuevo evento personalizado y enviarlo con un objeto detail opcional. Bubbing ya está encendido.Para crear rápidamente la calderera requerida (pero mínima) para un nuevo componente Amber, hemos incluido una pequeña utilidad CLI:
$ yarn create:component [name]
--- or ---
$ npm run create:component [name] Esto creará una subcarpeta dentro de la carpeta ./src/components con los dos archivos de arranque requeridos index.ts y style.scss .
Solo necesitará importar el nuevo componente dentro del archivo ./src/components/library.ts para encadenarlo en el proceso de desarrollo y la construcción.
Puede definir los estilos de cada componente usando SASS, el archivo principal index.scss dentro de la carpeta de componentes es procesado por el compilador y luego se inyecta en la sombra DOM.
Si necesita compartir estilos, mezclas o cualquier otra cosa entre los componentes, debe crear un archivo separado y luego importarlo donde se requieran.
Por el momento, solo las bibliotecas centrales ( archivos .ts simples dentro de la carpeta src/libs ) se están probando a través de Jest.
Inicie el proyecto en modo de desarrollo con un libro de cuentos de recarga en vivo
$ yarn startInicie el proyecto en modo de desarrollo con una página HTML simple
$ yarn dev Crea un libro de cuentos estático construir en la carpeta ./dist
$ yarn build:storybookEjecutar las pruebas unitarias
$ yarn test:unitEste proyecto sigue una política de ramificación simple:
master contiene solo código estable, y no debe actualizarse directamentedevelopment donde se escribe el código evolutivo o experimentalgh-pages donde se implementan los archivos de compilación de Storysbook está distribuible No fusione directamente development en master ( está bloqueado por administrador ... ), siempre envíe un PR para tener una revisión.
Antes de intentar publicar una nueva versión del paquete en NPM, primero ejecute esta lista de verificación:
package.json después de las pautas de SemverSi el lanzamiento incluye un nuevo componente :
webpack.config.js , esto es necesario para crear el módulo independiente/src/components/library.ts , de esta manera se puede acceder cuando el usuario importe toda la biblioteca/src/elements.ts , esto puede ayudar con la compatibilidad de Vue.js en algunos casos Cuando se empuja una nueva versión golpeada a la rama master , activará automáticamente la implementación en NPM ( después de que pasen los cheques automatizados ) utilizando la cuenta BitRock-Admin.
El código en este repositorio y el logotipo de Sytem de diseño Amber son distribuidos por el equipo de Ingeniería de UI BitRock, lanzado bajo la licencia MIT.
