blueprint - Web用のReactベースのUIツールキット

(A React-based UI toolkit for the web)

Created at: 2016-10-26 05:17:50
Language: TypeScript
License: Apache-2.0

設計図 CircleCI

ブループリントは、Web用のReactベースのUIツールキットです。

最新のブラウザとIE11で実行されるデスクトップアプリケーション用の複雑でデータ密度の高いWebインターフェイスを構築するために最適化されています。これはモバイルファーストのUIツールキットではありません。

紹介ブログ投稿を読む▸

完全なドキュメントを表示する▸

CodeSandboxで試してみてください▸

ウィキでよくある質問(FAQ)を読む▸

変更ログ

ブループリントのメジャーバージョンの変更ログと移行ガイドは、リポジトリのGithubwikiに掲載されています。

パッケージ

このリポジトリには、次の

packages/
3つのカテゴリに分類されるディレクトリ内の複数のプロジェクトが含まれています。

ライブラリ

これらは、NPMに公開するコンポーネントライブラリです。

  • npm–コアスタイルとコンポーネント。
  • npm–日付と時刻を操作するためのコンポーネント。
  • npm–アイコンを生成および表示するためのコンポーネント。
  • npm–Popover2およびTooltip2コンポーネント。
  • npm–リストからアイテムを選択するためのコンポーネント。
  • npm–スケーラブルなインタラクティブテーブルコンポーネント。
  • npm–タイムゾーンを選択するためのコンポーネント。

アプリケーション

これらは、静的WebアプリケーションとしてGitHubPagesでホストされています。

  • docs-app
    –blueprintjs.com/docsのドキュメントサイト
  • landing-app
    –blueprintjs.comのランディングページ

これらは、開発プレイグラウンド環境として使用されます。

  • table-dev-app
    –すべてのテーブル機能の手動テストをサポートするデモページ

ビルドツール

これらのパッケージは開発の依存関係を定義し、ビルド構成を含みます。これらは標準のNPMパッケージレイアウトに準拠しているため、ビルド構成のAPI境界を明確に保ち、​​のグループを分離できます

devDependencies
。他のBlueprint関連プロジェクトがこのモノレポの外部でこのインフラストラクチャを使用できるようにするために、これらはNPMに公開されます。

  • npm–ドキュメンタリストデータのドキュメンタリストテーマ。
  • npm–このリポジトリで使用され、ブループリント関連のプロジェクトに推奨されるESLint構成
  • npm–ブループリントの使用に関するベストプラクティスを適用するカスタムESLintルールの実装
  • npm
  • npm–リンティング、CSS変数の操作、アイコンの作成のためのさまざまなユーティリティスクリプト
  • npm–ブループリントの使用に関するベストプラクティスを適用するカスタムstylelintルールの実装
  • npm–ブループリントテストスイートで使用されるさまざまなユーティリティ関数
  • npm–このリポジトリで使用され、ブループリント関連のプロジェクトに推奨されるTSLint構成(
    @blueprintjs/eslint-config
    直接ではなく、によってインストールする必要があります)
  • npm

貢献

コードベースに貢献する場所をお探しですか?最初に投稿ガイドラインを読み、次に「ヘルプ募集」ラベルを確認してください

発達

Lernaは、このモノリポジトリでパッケージ間の依存関係を管理します。ビルドは

lerna run
、NPMスクリプトを介して調整されます。

前提条件:Node.js v12 +、Yarn v1.22 +

1回限りのセットアップ

このリポジトリのクローンを作成したら、次のコマンドを実行します。

  1. yarn
    すべての依存関係をインストールします。
  2. Windowsで実行している場合:
    1. npm install -g windows-build-tools
      ビルドツールをグローバルにインストールする
    2. 次のコマンドを実行して、構成済みのスクリプトシェルが正しいことを確認
      bash
      します。
      npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"
  3. yarn verify
    すべてのビルドツールが正しく機能していることを確認します。

アップストリームの変更を組み込む

以前に作業状態にあり、次のコードから新しいコードを取得したばかりの場合

develop

  • パッケージの依存関係が変更された場合
    yarn
    は、ルートで実行します。
    • インストールする新しいものがない場合、このコマンドは非常に高速です。
  • 実行
    yarn compile
    して、このリポジトリ内のライブラリパッケージの最新のビルドバージョンを取得します。
    • このコマンドは、アプリケーションパッケージ( 、など)
      yarn verify
      をビルドしたり、テストを実行したりしないため、より高速です。
      docs-app
      landing-app

ライブラリの開発

ルートディレクトリから実行

yarn dev
してすべてのパッケージの変更を監視し、webpack-dev-serverを使用してdocsアプリケーションを実行します。

または、各ライブラリには、ドキュメントアプリを実行し、そのパッケージ(およびその依存関係)への変更を監視するための独自の開発スクリプトがあります:

yarn dev:core
yarn dev:datetime
など。1つの例外は
table
、独自の開発アプリケーションがあるため、ドキュメントの代わりに
dev:table
スクリプトが実行されることです。
table-dev-app

ドキュメントの更新

ブループリントのドキュメントの多くは、JSDocが

.tsx
ファイルにコメントし、KSSマークアップが
.scss
ファイルにあるため、ソースコード内にあります。このドキュメントは、 documentalistを使用して抽出され、静的JSONデータに変換されます。

ドキュメントソース(にあるドキュメントUIコードやのドキュメントテーマではない)を更新する場合は、から実行して、アプリケーションに反映された変更を確認する必要があります。簡単にするために、ディレクトリホッピングを最小限に抑えるためにエイリアススクリプトがルートに存在します。

packages/docs-app
packages/docs-theme
yarn compile
packages/docs-data
yarn docs-data

アイコンの更新

ワンタイムセットアップとアップストリーム変更の組み込み手順により、アイコンドキュメントの作成に使用されるこのリポジトリに生成されたソースコードが生成されます。これは、ほとんどの開発ワークフローで十分です。

アイコンを更新したり、新しいアイコンを追加したりする場合は、開発スクリプトを実行する前に、これらの変更が反映されていることを確認するために実行

yarn compile
する必要があります。
packages/icons

ライセンス

このプロジェクトは、Apache2.0ライセンスの下で利用可能になります。