Descargar BEEQ - Descargar el código fuente de BEEQ

BEEQ

Componentes de terceros

v1.8.1

Descargar

Beeq, una iniciativa de biblioteca de componentes web

Este repositorio contiene el código fuente de los componentes web presentes en el sistema de diseño BEEQ.

Paquete	Versión	Documentación
`@beeq/core`		Readme
`@beeq/angular`		Readme
`@beeq/react`		Readme
`@beeq/vue`		Readme
`@beeq/tailwindcss`		Readme

️ Antes de comenzar ️

Estructura ?

El proyecto ha sido estructurado como un Monorepo NX:

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

dónde:

paquetes/beeq: biblioteca central (fuente para todos los elementos/componentes implementados)
paquetes/beeq-angular: envoltura angular específica para la biblioteca de núcleo de Beeq
paquetes/beeq-react: react.js wrapper específico para biblioteca beeq nore
paquetes/beeq-vue: vue.js wrapper para biblioteca core beeq
paquetes/beeq-tailwindcss: configuración de revestimientos de cola de Beeq

Dependencias?

Recomendamos el uso de Volta para administrar las versiones de Node y NPM. El proceso de instalación es bastante sencillo, y como se hace referencia en su sitio oficial:

Con Volta, puede seleccionar un motor de nodo una vez y luego dejar de preocuparse por ello. Puede cambiar entre proyectos y dejar de tener que cambiar manualmente entre nodos.

Una vez que tenga instalado Volta, cada vez que cambie a la carpeta Beeq localmente, cambiará a las versiones de nodo y NPM adecuadas en el package.json :

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

Volta no es obligatorio, aún puede usar cualquier configuración de nodo/npm que más le quede bien, solo tenga en cuenta que necesitará:

NodeJS v18.x o superior
Npm v8 o superior

Uso

Los componentes BEEQ se publican en el Registro de Administrador de paquetes NPM. Puede usar el @beeq/core o cualquiera de los envoltorios específicos del marco ( @beeq/angular , @beeq/react ) dependiendo de la pila de tecnología de su proyecto. Asegúrese de seguir las instrucciones de uso para cada paquete:

Cómo usar el paquete @beeq/core
? Cómo usar el paquete @beeq/angular
Cómo usar el paquete @beeq/react
? Cómo usar el paquete @beeq/vue
? Cómo usar el preajuste @beeq/tailwindcss

Siéntase libre de consultar nuestro libro de cuentos para ver todos los componentes de Beeq lanzados. Allí puede encontrar todas las API del componente (propiedades, eventos y métodos expuestos) junto con las variaciones que cada componente permite.

Ejecutando el proyecto? ‍

Para desarrollar/extender los componentes en el sistema de diseño Beeq, desembolse este repositorio en GitHub y clono localmente a un nuevo directorio:

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

Instalación

Simplemente ejecute:

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

Empiece a codificar?!

Construir ?

Para una construcción de producción, simplemente ejecute:

npm run build

Prueba ?

Beeq usa broma para pruebas unitarias y broma y titiritero para pruebas de extremo a extremo.

Puede ejecutar todas las pruebas una vez, ejecutando:

npm run test

Si recibe un error similar al siguiente, intente verificar localmente la rama main y ejecutar las pruebas nuevamente .

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

Generar componente

Beeq viene con un generador de componentes que le ahorra tiempo al crear el esqueleto para un nuevo componente. Para usar el generador, solo necesita ejecutar el siguiente comando y seguir las instrucciones en su solicitud de CLI:

npm run g

Que contribuye

? Si está de humor y quiere ayudar, lea cuidadosamente nuestras pautas y estándares de desarrollo que contribuyen.

❗️ Al trabajar en una solución de errores, una nueva función, etc., tenga en cuenta que seguimos un flujo de trabajo Gitflow. Asegúrese de seguir las instrucciones de las pautas de estrategia de ramificación que contribuyen sobre cómo crear su rama cuando comience a trabajar en una solución de error/en caliente, nueva función, etc.

Documentación

Plantilla

¿Necesitar ayuda? Mira los documentos de Stenciljs aquí (https://stenciljs.com/).

CSS de viento de cola

Utilizamos CSS Tailwind para el estilo de los componentes, eche un vistazo a su documentación aquí: (https://tailwindcss.com/docs/)

Gracias

Nos gustaría expresar nuestra sincera gratitud a la cromática por proporcionar la plataforma de prueba visual que nos permite revisar los cambios en la interfaz de usuario e identificar regresiones visuales.