Téléchargement de BEEQ - Téléchargement du code source BEEQ

BEEQ

Composants tiers

v1.8.1

Télécharger

BEEQ, une initiative de bibliothèque de composants Web

Ce référentiel contient le code source des composants Web présents dans le système de conception BEEQ.

Emballer	Version	Documentation
`@beeq/core`		Réadmettre
`@beeq/angular`		Réadmettre
`@beeq/react`		Réadmettre
`@beeq/vue`		Réadmettre
`@beeq/tailwindcss`		Réadmettre

️ Avant de commencer ️

Structure ?

Le projet a été structuré comme un NX Monorepo:

 ├── ? packages
  ├── ? beeq
  ├── ? beeq-angular
  ├── ? beeq-react
  ├── ? beeq-vue
  ├── ...
  ├── ? beeq-tailwindcss
  ├── ...
├── ? tools
├── package.json
├── package-lock.json

où:

Packages / BEEQ: Bibliothèque de base (source pour tous les éléments / composants implémentés)
Packages / BEEQ-Angular: wrapper spécifique angulaire pour la bibliothèque Core BEEQ
Packages / BEEQ-REACT: Wrapper spécifique à React.js pour la bibliothèque Core BEEQ
Packages / BEEQ-VUE: Wrapper spécifique à Vue.js pour la bibliothèque Core BEEQ
Packages / BEEQ-TAILWINDCSS: Configuration de Beeq TailwindCSS

Dépendances?

Nous recommandons l'utilisation de Volta pour gérer les versions Node et NPM. Le processus d'installation est assez simple et comme référencé sur leur site officiel:

Avec Volta, vous pouvez sélectionner un moteur de nœud une fois, puis arrêter de vous en soucier. Vous pouvez basculer entre les projets et cesser de devoir basculer manuellement entre les nœuds.

Une fois que Volta a installé, chaque fois que vous passez au dossier BEEQ localement, il passera aux versions du nœud et NPM de bonne droite épinglés dans le package.json :

  "volta" : {
    "node" : " 20.11.1 " ,
    "npm" : " 10.4.0 "
  }

Volta n'est pas obligatoire, vous pouvez toujours utiliser n'importe quelle configuration de nœud / npm qui vous convient le plus, gardez à l'esprit que vous aurez besoin:

NodeJS v18.x ou supérieur
NPM V8 ou plus

Usage

Les composants BEEQ sont publiés dans le registre NPM Package Manager. Vous pouvez utiliser @beeq/core ou l'un des emballages spécifiques au framework ( @beeq/angular , @beeq/react ) en fonction de la pile technologique de votre projet. Assurez-vous de suivre les instructions d'utilisation de chaque package:

Comment utiliser le package @beeq/core
? Comment utiliser le package @beeq/angular
Comment utiliser le package @beeq/react
? Comment utiliser le package @beeq/vue
? Comment utiliser le préréglage @beeq/tailwindcss

N'hésitez pas à consulter notre livre de contes pour voir tous les composants BEEQ sortis. Là, vous pouvez trouver toutes les API du composant (propriétés, événements et méthodes exposés) ainsi que les variations que chaque composant permet.

Exécuter le projet? ‍

Pour développer / étendre des composants sur le système de conception BEEQ, veuillez déborder ce dépôt dans GitHub et le cloner localement à un nouveau répertoire:

git clone https://github.com/ < YOUR_GITHUB_USERNAME > /BEEQ.git BEEQ-Design-System
cd BEEQ-Design-System
git checkout main

Installation

Courez simplement:

npm ci
# Make sure to build first the project before starting it
npm run build
npm start

Commencez à coder?!

Construire ?

Pour une construction de production, il suffit de courir:

npm run build

Test ?

BEEQ utilise une plaisanterie pour les tests unitaires et la plaisanterie et la marionnettiste pour les tests de bout en bout.

Vous pouvez exécuter tous les tests une fois, en exécutant:

npm run test

Si vous obtenez une erreur similaire à celle ci-dessous, essayez de consulter localement la branche main et exécutez à nouveau les tests .

fatal: Not a valid object name main
fatal: No such ref: ' main '
nx affected

Générer des composants

BEEQ est livré avec un générateur de composants qui vous fait gagner du temps lors de la création du squelette pour un nouveau composant. Pour utiliser le générateur, il vous suffit d'exécuter la commande suivante et de suivre les instructions de votre CLI rapide:

npm run g

Contributif

? Si vous êtes d'humeur et que vous souhaitez aider ?, Veuillez lire attentivement nos directives et nos normes de développement.

❗️ lorsque vous travaillez sur une correction de bogue, une nouvelle fonctionnalité, etc., veuillez remarquer que nous suivons un flux de travail Gitflow. Assurez-vous de suivre les instructions des directives de stratégie de branchement contributives sur la façon de créer votre branche lorsque vous commencez à travailler sur un bogue / correction à chaud, une nouvelle fonctionnalité, etc.

Documentation

Pochoir

Besoin d'aide? Consultez les documents STOCHJS ici (https://sticraljs.com/).

CSS du vent arrière

Nous utilisons CSS Tailwind pour le style des composants, veuillez jeter un œil à leur documentation ici: (https://tailwindcss.com/docs/)

Merci

Nous tenons à exprimer notre sincère gratitude à Chromatic pour avoir fourni la plate-forme de test visuelle qui nous permet de revoir les changements d'interface utilisateur et d'identifier les régressions visuelles.