BEEQ скачать - скачать исходный код BEEQ

BEEQ

Сторонние компоненты

v1.8.1

Скачать

Beeq, инициатива библиотеки веб -компонентов

Этот репозиторий содержит исходный код веб -компонентов, присутствующих в системе проектирования Beeq.

Упаковка	Версия	Документация
`@beeq/core`		Ридме
`@beeq/angular`		Ридме
`@beeq/react`		Ридме
`@beeq/vue`		Ридме
`@beeq/tailwindcss`		Ридме

️ Перед началом ️

Структура?

Проект был структурирован как NX Monorepo:

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

где:

Пакеты/Beeq: Core Library (источник для всех реализованных элементов/компонентов)
Пакеты/Ангулярный: Агола-специфическая обертка для библиотеки Beeq Core Library
Пакеты/Beeq-React: React.js-специфическая обертка для библиотеки Core Beeq
Пакеты/Beeq-Vue: Vue.js-специфическая обертка для библиотеки Beeq Core
Пакеты/beeq-tailwindcss: конфигурация Beeq's Tailwindcss

Зависимости?

Мы рекомендуем использовать Volta для управления версиями узла и NPM. Процесс установки довольно прост, и, как упоминалось на их официальном сайте:

С Volta вы можете выбрать двигатель узла один раз, а затем перестать беспокоиться об этом. Вы можете переключаться между проектами и остановить необходимость вручную переключаться между узлами.

После того, как вы установили Volta, всякий раз, когда вы переходите в папку Beeq локально, она переключается на версии правого узла и NPM, закрепленные в package.json :

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

Вольта не обязательна, вы все равно можете использовать любую настройку узла/NPM, которая вам больше всего подходит, просто имейте в виду, что вам понадобится:

NodeJS v18.x или выше
NPM V8 или выше

Использование

Компоненты BEEQ публикуются в реестре менеджеров пакетов NPM. Вы можете использовать @beeq/core или любой из специфичных для фреймворта ( @beeq/angular , @beeq/react ) в зависимости от стека технологий вашего проекта. Убедитесь, что следуйте инструкциям по использованию для каждого пакета:

Как использовать пакет @beeq/core
? Как использовать пакет @beeq/angular
Как использовать пакет @beeq/react
? Как использовать пакет @beeq/vue
? Как использовать предустановку @beeq/tailwindcss

Не стесняйтесь проверять наш сборник рассказов, чтобы увидеть все выпущенные компоненты Beeq. Там вы можете найти все API компонента (свойства, события и выставленные методы) вместе с изменениями, которые позволяет каждый компонент.

Запуск проекта? ‍

Чтобы разработать/расширить компоненты в системе проектирования Beeq, пожалуйста, разделите этот репо в GitHub и клонируйте его локально в новый каталог:

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

Установка

Просто беги:

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

Начать кодирование?!

Строить ?

Для производственной сборки просто беги:

npm run build

Тест ?

Beeq использует Jest для модульных тестов и Jest и Puppeteer для сквозных тестов.

Вы можете запустить все тесты один раз, выполнив:

npm run test

Если вы получите ошибку, аналогичную приведенной ниже, попробуйте проверить локально main ветвь и снова запустить тесты .

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

Генерировать компонент

Beeq поставляется с генератором компонентов, который экономит ваше время при создании скелета для нового компонента. Чтобы использовать генератор, вам просто нужно запустить следующую команду и следовать инструкциям в вашем приглашном CLI:

npm run g

Внося

? Если у вас настроение и хотите помочь?, Пожалуйста, внимательно прочитайте наши рекомендации и стандарты развития.

❗ При работе над исправлением ошибки, новой функцией и т. Д., Пожалуйста, обратите внимание, что мы следуем рабочему процессу Gitflow. Обязательно следуйте инструкциям из руководящих принципов стратегии ветвления о том, как создать свою филиал при начале работы над ошибкой/горячим исправлением, новой функцией и т. Д.

Документация

Stenciljs

Нужна помощь? Проверьте документы Stenciljs здесь (https://stenceljs.com/).

Tailwind CSS

Мы используем Tailwind CSS для стиля компонентов, пожалуйста, посмотрите на их документацию здесь: (https://tailwindcss.com/docs/)

Спасибо

Мы хотели бы выразить нашу искреннюю благодарность Chromatic за предоставление платформы визуального тестирования, которая позволяет нам просматривать изменения пользовательского интерфейса и идентифицировать визуальные регрессии.