Blueprint

Blueprint 是一个基于 React 的网络 UI 工具包。

它专为构建复杂、数据密集的桌面应用程序网络界面而优化，可在现代浏览器中运行。这不是一个移动优先的 UI 工具包。

阅读介绍博文 ▸

查看完整文档 ▸

在 CodeSandbox 上试用 ▸

在 wiki 上阅读常见问题（FAQ）▸

更新日志

Blueprint 的更新日志和主要版本迁移指南位于仓库的 Github wiki。

包

该仓库在 packages/ 目录下包含多个项目，分为 3 类：

库

这些是我们发布到 NPM 的组件库。

– 设计系统颜色变量。
– 核心样式和组件。
– 用于与日期和时间交互的组件。
– 用于与日期和时间交互的下一代组件。
– 用于显示图标的 API（包含 SVG 和图标字体实现）。
– Monaco Editor 的主题（:warning: 实验性）。
– 用于从列表中选择项目的组件。
– 可扩展且交互式的电子表格类表格组件。

应用程序

这些作为静态网络应用程序托管在 GitHub Pages 上：

docs-app – 文档网站 blueprintjs.com/docs
landing-app – 登陆页面 blueprintjs.com

这些用作开发测试环境：

demo-app – 演示页面，在浅色和深色主题下展示了许多组件
table-dev-app – 演示页面，支持手动测试所有表格功能

构建工具

这些包定义了开发依赖项并包含构建配置。它们遵循标准的 NPM 包布局，这使我们能够为构建配置保持清晰的 API 边界，并隔离 devDependencies 组。它们发布到 NPM，以允许其他与 Blueprint 相关的项目在此 monorepo 之外使用这些基础设施。

- 用于 Documentalist 数据的文档主题。
- 本仓库使用的 ESLint 配置，推荐用于 Blueprint 相关项目。
- 实现自定义 ESLint 规则，以强制执行 Blueprint 使用的最佳实践。
- Karma 测试运行器配置。
- 各种实用程序脚本，用于构建 Sass 源文件、检查 Sass 和 TypeScript、生成 Sass 和 Less 变量，以及优化图标 SVG。
- 实现自定义 stylelint 规则，以强制执行 Blueprint 使用的最佳实践。
- Blueprint 测试套件中使用的各种实用函数。
- 本仓库使用的 TSLint 配置，推荐用于 Blueprint 相关项目（应通过 @blueprintjs/eslint-config 安装，而非直接安装）。
- Blueprint 项目的 Webpack 构建配置。

贡献

寻找可以为代码库做出贡献的地方？首先阅读贡献指南，然后查看"help wanted"标签。

开发

Yarn 管理这个 monorepo 中的第三方和包间依赖。构建通过 Nx 的任务运行器和 NPM 脚本进行编排。 Lerna-Lite 用于准备发布。

先决条件：Node.js v20.11+（参见 .nvmrc 中指定的版本），Yarn v4.x（参见 package.json 中指定的版本）

一次性设置

首先，确保已安装 nvm（Node 版本管理器）。

克隆此仓库后，运行：

nvm use 使用支持 Blueprint 开发的 Node 版本。
corepack enable 激活 Yarn 作为 Node 包管理器。
yarn 安装 monorepo 的所有依赖项。
1. 如果看到"Error when performing the request ..."这样的错误，可能是使用了需要禁用的 VPN 来安装依赖项。
如果在 Windows 上运行：
1. npm install -g windows-build-tools 全局安装构建工具
2. 通过运行以下命令确保 bash 是您配置的脚本 shell：
  npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"
yarn verify 确保所有构建工具正常工作。
1. 运行此步骤时可能目前会出现一些错误，即使一切设置正确，详见 https://github.com/palantir/blueprint/issues/6926 了解更多信息。

整合上游更改

如果您之前处于工作状态，刚刚从 develop 拉取了新代码：

如果有包依赖项更改，在根目录运行 yarn。
- 如果没有新的安装项，此命令执行很快。
运行 yarn compile 获取此仓库中库包的最新构建版本。
- 此命令比 yarn verify 更快，因为它不构建应用程序包（docs-app、landing-app 等）或运行测试

开发库

有几种运行开发脚本的方法，以下按从简单到高级用法列出：

从根目录运行 yarn dev，以监视所有包的更改并使用 webpack-dev-server 运行文档应用程序。
或者，大多数库都有一个 dev 脚本来运行文档应用程序并仅监视该包的更改：
- yarn dev:core
- yarn dev:docs
- yarn dev:datetime
- yarn dev:select
- yarn dev:table
最后，如果您想精确控制运行哪些 dev 脚本并以最清晰的方式查看控制台输出，我们建议打开单独的终端窗口或分割，并在每个窗口中运行本地包开发任务。这是常规贡献者和高级开发人员推荐的工作流程。例如，要测试核心和图标包的更改，您可以在单独的终端中运行以下命令：
- cd packages/core && yarn dev
- cd packages/icons && yarn dev
- cd packages/docs-app && yarn dev

更新文档

Blueprint的大部分文档以JSDoc注释的形式存在于.tsx文件中，以及以KSS标记的形式存在于.scss文件中。这些文档通过documentalist提取并转换为静态JSON数据。

如果你正在更新文档源（而不是存在于packages/docs-app中的文档UI代码或packages/docs-theme中的文档主题），你需要在packages/docs-data中运行yarn compile来查看应用中反映的更改。为简化操作，根目录中存在一个别名脚本yarn docs-data，以减少目录跳转。