BEEQ

Beeq，Web組件庫計劃

該存儲庫包含BEEQ設計系統中存在的Web組件的源代碼。

包裹	版本	文件
@beeq/core		讀書我
@beeq/angular		讀書我
@beeq/react		讀書我
@beeq/vue		讀書我
@beeq/tailwindcss		讀書我

配x開始之前配x

結構 ？

該項目已作為NX Monorepo結構：

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

在哪裡：

• 軟件包/beeq：核心庫（實現的所有元素/組件的來源）
• 包裝/beeq-angular： Beeq核心庫的角度特定包裝器
• 包裝/beeq-react：react.js特定包裝器Beeq核心庫
• 包裝/beeq-vue：vue.js特定的包裝器，用於beeq核心庫
• 包裝/beeq-tailwindcss： Beeq的自以為是的parwindcss配置

依賴性？

我們建議使用Volta來管理節點和NPM版本。安裝過程非常簡單，正如其官方網站所述：

使用Volta，您可以一次選擇一個節點引擎，然後停止擔心它。您可以在項目之間切換，而不必在節點之間手動切換。

安裝了Volta後，每當您在本地更改到Beeq文件夾時，它將切換到package.json中固定的右節點和NPM版本。

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

Volta不是強制性的，您仍然可以使用最適合您的節點/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進行單位測試，開玩笑和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文檔（https://stenciljs.com/）。

尾風CSS

我們將CSS用於組件的樣式，請在此處查看其文檔：（ https：//tailwindcss.com/docs/）

謝謝

我們要向色彩表達衷心的感謝，以提供視覺測試平台，使我們能夠審查UI的變化並確定視覺回歸。

感謝NX團隊幫助我們簡化了CI流程並有效地管理MonorePo。