Download de BEEQ - Download do código -fonte BEEQ

BEEQ

Componentes de terceiros

v1.8.1

Baixar

Beeq, uma iniciativa de biblioteca de componentes da Web

Este repositório mantém o código -fonte dos componentes da Web presentes no sistema de design Beeq.

Pacote	Versão	Documentação
`@beeq/core`		Readme
`@beeq/angular`		Readme
`@beeq/react`		Readme
`@beeq/vue`		Readme
`@beeq/tailwindcss`		Readme

️ Antes de começar ️

Estrutura?

O projeto foi estruturado como um NX Monorepo:

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

onde:

Pacotes/Beeq: Core Library (fonte de todos os elementos/componentes implementados)
Pacotes/Beeq-Angular: wrapper específico para a Biblioteca Core Beeq
Pacotes/Beeq-react: React.js específico para a biblioteca Core Beeq Core
Pacotes/Beeq-Vue: Vue.js Wrapper específico para a Biblioteca Core Beeq
Pacotes/Beeq-TailWindcss: Configuração de Tailwindcss da BEEQ

Dependências?

Recomendamos o uso do Volta para gerenciar versões de nó e NPM. O processo de instalação é bem direto e, conforme referenciado em seu site oficial:

Com o Volta, você pode selecionar um motor de nós uma vez e depois parar de se preocupar com ele. Você pode alternar entre projetos e parar de alternar manualmente entre nós.

Depois de instalar o Volta, sempre que você mudar para a pasta Beeq localmente, ele mudará para o nó certo e as versões NPM fixadas no package.json :

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

O Volta não é obrigatório, você ainda pode usar qualquer configuração de nó/npm que mais se encaixe em você, lembre -se de que você precisará:

NodeJS v18.x ou superior
NPM V8 ou superior

Uso

Os componentes do BEEQ são publicados no registro do NPM Package Manager. Você pode usar o @beeq/core ou qualquer um dos invólucros específicos da estrutura ( @beeq/angular , @beeq/react ), dependendo da pilha de tecnologia do seu projeto. Certifique -se de seguir as instruções de uso para cada pacote:

Como usar o pacote @beeq/core
? Como usar o pacote @beeq/angular
Como usar o pacote @beeq/react
? Como usar o pacote @beeq/vue
? Como usar a predefinição @beeq/tailwindcss

Sinta -se à vontade para verificar nosso livro de histórias para ver todos os componentes do BEEQ lançados. Lá você pode encontrar todas as APIs do componente (propriedades, eventos e métodos expostos), juntamente com as variações que cada componente permite.

Executando o projeto? ‍

Para desenvolver/estender componentes no Sistema de Design Beeq, pegue este repositório no Github e clone -o localmente para um novo diretório:

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

Instalação

Basta correr:

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

Comece a codificar?!

Construir ?

Para uma construção de produção, basta correr:

npm run build

Teste ?

O BEEQ usa o brinde para testes de unidade e brincadeira e marionetista para testes de ponta a ponta.

Você pode executar todos os testes uma vez, executando:

npm run test

Se você receber um erro semelhante ao abaixo, tente conferir localmente a ramificação main e execute os testes novamente .

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

Gerar componente

O BEEQ vem com um gerador de componentes que economiza tempo ao criar o esqueleto para um novo componente. Para usar o gerador, você só precisa executar o seguinte comando e seguir as instruções em sua cli pronta:

npm run g

Contribuindo

? Se você está de bom humor e deseja ajudar?, Leia cuidadosamente nossas diretrizes contribuintes e padrões de desenvolvimento.

❗️ Ao trabalhar em uma correção de bug, novo recurso, etc., observe que seguimos um fluxo de trabalho do GitFlow. Certifique -se de seguir as instruções das diretrizes de estratégia de ramificação que contribuem sobre como criar sua filial ao começar a trabalhar em uma fixação de bug/hot, novo recurso, etc.

Documentação

STENCISKJS

Precisar de ajuda? Confira os documentos do StencilJS aqui (https://stegiljs.com/).

Tailwind CSS

Usamos o CSS do Tailwind para o estilo dos componentes, dê uma olhada na documentação deles aqui: (https://tailwindcss.com/docs/)

Obrigado

Gostaríamos de expressar nossa sincera gratidão ao Chomatic por fornecer a plataforma de teste visual que nos permite revisar as alterações da interface do usuário e identificar regressões visuais.