Palantir Blueprintは、デスクトップ向けのデータ密度が高いWebアプリ構築を想定したReact UIツールキットです。colors・icons・core・datetime・select・tableなど複数パッケージをpnpmワークスペースで管理するモノレポ構成になっています。npmに公開される@blueprintjs/*ライブラリ群と、それを使うdocs-app・landing-appなどのアプリケーションを同一リポジトリに収めています。
各パッケージ(packages/core, packages/colors など)はsrc配下にTypeScriptコンポーネントとSassスタイルを持ち、tsc(esm/cjs/esnext)とsass-compileでlib/へビルドされます。packages/core/package.jsonのcompile:cssスクリプトはbuild:tokens(design-tokens/build.ts)を先に実行し、デザイントークンからCSS変数とSCSS変数を生成してからコンポーネントのスタイルをコンパイルします。ビルド全体の実行順序とパッケージ間依存はNxのタスクランナー(nx.json、ルートpackage.jsonのnx run-many -t compile/dist/test)が解決し、リリース準備はLerna-Liteが担います。コンポーネントはStorybook(.storybook/main.ts)でpnpmワークスペース内のソースを直接エイリアス解決し、コンパイル前のsrcをそのまま確認できる仕組みです。テストはvitestとenzyme、testing-libraryを併用し、props.test.tsやutils.test.tsxのように個々のユーティリティ関数を細かく検証しています。
- STEP 01
pnpm installを実行すると、.nvmrcで指定されたNode.js v24系とpnpm 11.3.0のバージョン一致が求められ、合わないと即座に警告が出ます。
- STEP 02
nx run-many -t compileを走らせると、colorsやicons、coreの順に依存関係が解決されながらesm cjs esnextの3種類の出力とCSSが生成されます。
- STEP 03
pnpm run dev:coreを使うとcore icons docs-appが同時にウォッチモードで立ち上がり、コンポーネントの編集結果をドキュメントサイトでリアルタイム確認できます。
- STEP 04
pnpm run test(内部でnx run-many -t test)を実行すると、各パッケージごとにvitestのtypeCheckとisotest、通常テストが順番に走り、button.test.tsxやdialog.test.tsxなど数百件規模のテストが流れます。
- STEP 05
pnpm run storybookを起動すると、.storybook/main.tsのエイリアス設定によりcore datetime select tableの各stories.tsxがビルド前のsrcから直接読み込まれ、ブラウザでコンポーネント一覧が見られます。
ビルドを通すと各パッケージのlib/cjs、lib/esm、lib/css(blueprint.cssなど)が手に入り、Reactアプリに組み込めるコンポーネント群とスタイルシートが得られます。Storybookを起動すればButtonやDialog、Table、CheckboxCardなど実装済みコンポーネントの見た目と挙動を実際に操作して確認できます。テストを走らせればprops処理やユーティリティ関数、各コンポーネントの振る舞いがvitestでパスすることを自分の環境で検証できます。
Node.js v24.11以上かつpnpm 11.3.0固定というバージョン要件があり、合わない環境ではNxタスクが失敗しやすいです。
モノレポ全体のcompile/dist/testをフルで回すとパッケージ数が多く、ビルド時間とディスク使用量がかなりかかります。
README抜粋にはprerequisitesの続きが途中で切れており、pnpm以外の前提条件の全文はこの資料だけでは確認できません。
業務システムなど情報量の多いデスクトップ向けWeb管理画面をReactで作るチームが、ダークテーマやアクセシビリティ、デザイントークンまで含めて一式揃ったコンポーネント基盤を使いたい場合に向いています。npm公開版のバージョン表記(core 6.21.0など)、Nx・pnpm・Lerna-Liteによる明確なビルド手順、vitestとenzymeを併用した粒度の細かいテストファイル群が実在することから、構成の信頼性は高いと判断できます。実際にcloneしてpnpm install後にnx run-many -t compileとtestを流せば、ここで説明した手順通りの挙動が再現できるはずです。