amber components

componistes ambre

Implémentation des composants Web du système de conception AMBER.

Ce référentiel s'adresse principalement aux développeurs et aux contributeurs, pour la documentation et le style de style appropriés, veuillez vous référer à https://amber.bitrock.it.

Vous pouvez prévisualiser / essayer les composants du livre de contes en direct.

Usage

Installer

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

Facultativement, vous souhaiterez peut-être ajouter les composants Web Polyfills pour prendre en charge les versions précédentes de Firefox et Edge.

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

Ajouter un projet

Vous pouvez importer les composants de votre projet de manière différente en fonction de l'environnement:

Comme les fichiers JavaScript avec un bundler (comme 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' ,

Comme les fichiers JavaScript de HTML sans 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 >

Ensuite, dans un fichier .html , ou un modèle qui produit une sortie HTML:

 <!-- myfile.html -->

< amber-button priority =" primary " >
  Get ready!
< amber-button > 

Développement

Une brève description de l'architecture de développement, de la pile et de la façon de travailler sur le code:

Webcomponents

La spécification WebComponents est un terme parapluie pour regrouper les spécifications des éléments personnalisés V1 et Shadow Dom V1. Ces API de navigateur vous permettent d'écrire des balises HTML personnalisées conformes au W3C avec leurs propres fonctionnalités, styles portée et balisage qui fonctionnent à travers les navigateurs et les cadres frontaux.

Manuscrit

Pour obtenir une meilleure résilience du code, tous les composants sont écrits en dactylographie pour profiter principalement de la vérification des types statiques et de la syntaxe des décorateurs. Il est également utilisé pour transpiler le code à ES-2015.

Basé sur Lit-HTML & Litelement

Étant donné que les composants Web en tant que norme ne gèrent pas les mécanismes de rendu et la liaison aux données, nous adoptons Lit-HTML et sa classe de composants Web Lietelement comme couche de fondation pour chaque comoPonent de cette bibliothèque.

Services publics internes

• triggerEvent(element, name, ?detail) - un wrapper pour créer un nouvel événement personnalisé et le répartir avec un objet detail facultatif. Le bouillonnement est déjà excité.

Ajouter un nouveau composant

Pour créer rapidement le chauffeur requis (mais minimal) pour un nouveau composant ambre, nous avons inclus un petit utilitaire CLI:

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

Cela créera un sous-dossier dans le dossier ./src/components avec les deux fichiers de démarrage requis index.ts et style.scss .

Vous n'aurez qu'à importer le nouveau composant dans le fichier ./src/components/library.ts pour le enchaîner dans la procédure Dev & Build.

Coiffage

Vous pouvez définir les styles de chaque composant à l'aide de SASS, le fichier principal index.scss dans le dossier du composant est traité par le compilateur puis est injecté dans l'ombre DOM.

Si vous avez besoin de partager des styles, des mixins ou quoi que ce soit entre les composants, vous devez créer un fichier séparé, puis l'importer là où ils sont nécessaires.

Tests

À l'heure actuelle, seules les bibliothèques principales ( fichiers .ts plaine dans le dossier src/libs ) sont testées via une plaisanterie.

Tâches NPM disponibles

Démarrez le projet en mode développement avec un livre de contes de rechargement en direct

$ yarn start

Démarrez le projet en mode développement avec une page HTML simple

$ yarn dev

Créez un livre de contes statique dans le dossier ./dist

$ yarn build:storybook

Exécutez les tests unitaires

$ yarn test:unit

Politique de branchement

Ce projet suit une politique de branchement simple:

• master ne contient que du code stable et ne doit pas être mis à jour directement
• development où le code évolutif ou expérimental est écrit
• gh-pages où les fichiers de construction de livres statiques statiques distribuables sont déployés

Ne fusionnez pas directement development dans master ( il est verrouillé par l'administrateur ... ), envoyez toujours un RP pour avoir un examen.

Publier une nouvelle version

Avant d'essayer de publier une nouvelle version du package sur NPM, exécutez d'abord cette liste de contrôle:

• Tests passe (il est nécessaire pour PRS)
• Numéro de version incrément dans le fichier package.json suivant les directives SEMVER
• Signaler les modifications sur les documents d'ambre-website

Si la version inclut un nouveau composant :

• Le versioning doit être incrémenté par une version mineure
• Assurez-vous d'ajouter un nouveau point d'entrée webpack.config.js , cela est nécessaire pour créer le module autonome
• Assurez-vous d'importer le composant et de l'ajouter dans les fichiers /src/components/library.ts , de cette façon, il sera accessible lorsque l'utilisateur importe toute la bibliothèque
• Ajoutez la balise du composant le nom dans le tableau /src/elements.ts , cela peut aider avec la compatibilité Vue.js dans certains cas

Lorsqu'une nouvelle version bossée est poussée vers la branche master , elle déclenchera automatiquement le déploiement sur NPM ( après toutes les chèques automatisées, les passes ) à l'aide du compte Bitrock-Admin.

Licence

Le code de ce dépôt et le logo Amber Design Sytem sont distribués par l'équipe d'ingénierie Bitrock UI, publiée sous la licence du MIT.