BEEQ

Beeq、Webコンポーネントライブラリイニシアチブ

このリポジトリは、Beeq設計システムに存在するWebコンポーネントのソースコードを保持しています。

パッケージ	バージョン	ドキュメント
@beeq/core		readme
@beeq/angular		readme
@beeq/react		readme
@beeq/vue		readme
@beeq/tailwindcss		readme

ショ和始める前にショ和

構造 ？

このプロジェクトは、NXモノレポとして構成されています。

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

どこ：

• パッケージ/beeq：コアライブラリ（実装されたすべての要素/コンポーネントのソース）
• パッケージ/beeq-angular： beeqコアライブラリの角度特異的ラッパー
• パッケージ/beeq反応： beeqコアライブラリ用のReact.js固有のラッパー
• パッケージ/beeq-vue： vueqコアライブラリ用のvue.js固有のラッパー
• パッケージ/beeq-tailwindcss： beeqの意見のあるtailwindcss構成

依存関係？

NodeおよびNPMバージョンを管理するためにVoltaを使用することをお勧めします。インストールプロセスは非常に簡単で、公式サイトで参照されています。

Voltaを使用すると、ノードエンジンを1回選択してから、心配するのを停止できます。プロジェクトを切り替えて、手動でノードを切り替えるのを停止できます。

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を使用し、エンドツーエンドテストにはJestとPuppetererを使用します。

実行して、すべてのテストを1回実行できます。

npm run test

以下のエラーと同様のエラーが発生した場合は、 mainブランチをローカルでチェックして、テストを再度実行してください。

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

コンポーネントを生成します

Beeqには、新しいコンポーネント用のスケルトンを作成するときに時間を節約するコンポーネントジェネレーターが付属しています。ジェネレーターを使用するには、次のコマンドを実行し、プロンプトCLIの指示に従う必要があります。

npm run g

貢献

？気分が良くて助けたい場合は、貢献ガイドラインと開発基準を注意深くお読みください。

Bug修正、新機能などに取り組んでいる場合、GitFlowワークフローに従っていることに注意してください。バグ/ホットフィックス、新機能などの作業を開始したときにブランチを作成する方法についての貢献分岐戦略ガイドラインの指示に従ってください。

ドキュメント

ステンシルジ

助けが必要ですか？ Stenciljsドキュメントはこちら（https://stenciljs.com/）をご覧ください。

Tailwind CSS

コンポーネントのスタイルにTailwind CSSを使用します。こちらのドキュメントをご覧ください：（https://tailwindcss.com/docs/）

ありがとう

UIの変更を確認し、視覚回帰を特定できるようにする視覚的なテストプラットフォームを提供してくれたChromaticに心から感謝します。

CIプロセスを合理化し、モノレポを効率的に管理してくれたNXチームに感謝します。