Need help with blueprint?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

palantir
17.0K Stars 1.8K Forks Apache License 2.0 2.0K Commits 534 Opened issues

Description

A React-based UI toolkit for the web

Services available

!
?

Need anything else?

Contributors list

Blueprint CircleCI

Blueprint is a React-based UI toolkit for the web.

It is optimized for building complex, data-dense web interfaces for desktop applications which run in modern browsers and IE11. This is not a mobile-first UI toolkit.

Read the introductory blog post ▸

View the full documentation ▸

Try it out on CodeSandbox ▸

Read frequently asked questions (FAQ) on the wiki ▸

Changelog

Blueprint's change log and migration guides for major versions live on the repo's Github wiki.

Packages

This repository contains multiple projects in the

packages/
directory that fall into 3 categories:

Libraries

These are the component libraries we publish to NPM.

  • npm – Core styles & components.
  • npm – Components for interacting with dates and times.
  • npm – Components for generating and displaying icons.
  • npm – Components for selecting items from a list.
  • npm – Scalable interactive table component.
  • npm – Components for picking timezones.

Applications

These are hosted on GitHub Pages as static web applications:

  • docs-app
    – Documentation site at blueprintjs.com/docs
  • landing-app
    – Landing page at blueprintjs.com

These are used as development playground environments:

  • table-dev-app
    – demo page that supports manual testing of all table features

Build tooling

These packages define development dependencies and contain build configuration. They adhere to the standard NPM package layout, which allows us to keep clear API boundaries for build configuration and isolate groups of

devDependencies
. They are published to NPM in order to allow other Blueprint-related projects to use this infrastructure outside this monorepo.
  • npm – Documentation theme for Documentalist data.
  • npm – ESLint configuration used in this repo and recommended for Blueprint-related projects
  • npm – implementations for custom ESLint rules which enforce best practices for Blueprint usage
  • npm
  • npm – various utility scripts for linting, working with CSS variables, and building icons
  • npm – various utility functions used in Blueprint test suites
  • npm – TSLint configuration used in this repo and recommended for Blueprint-related projects (should be installed by
    @blueprintjs/eslint-config
    , not directly)
  • npm

Contributing

Looking for places to contribute to the codebase? First read the contribution guidelines, then check out the "help wanted" label.

Development

Lerna manages inter-package dependencies in this monorepo. Builds are orchestrated via

lerna run
and NPM scripts.

Prerequisites: Node.js v12+, Yarn v1.22+

One-time setup

After cloning this repo, run:

  1. yarn
    to install all dependencies.
  2. If running on Windows:
    1. npm install -g windows-build-tools
      to install build tools globally
    2. Ensure
      bash
      is your configured script-shell by running:
      npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"
  3. yarn verify
    to ensure you have all the build tooling working properly.

Incorporating upstream changes

If you were previously in a working state and have just pulled new code from

develop
:
  • If there were package dependency changes, run
    yarn
    at the root.
    • This command is very quick if there are no new things to install.
  • Run
    yarn compile
    to get the latest built versions of the library packages in this repo.
    • This command is quicker than
      yarn verify
      since it doesn't build the application packages (
      docs-app
      ,
      landing-app
      , etc.) or run tests

Developing libraries

Run

yarn dev
from the root directory to watch changes across all packages and run the docs application with webpack-dev-server.

Alternately, each library has its own dev script to run the docs app and watch changes to just that package (and its dependencies):

yarn dev:core
,
yarn dev:datetime
, etc. One exception is
table
: since it has its own dev application, the
dev:table
script runs
table-dev-app
instead of the docs.

Updating documentation

Much of Blueprint's documentation lives inside source code as JSDoc comments in

.tsx
files and KSS markup in
.scss
files. This documentation is extracted and converted into static JSON data using documentalist.

If you are updating documentation sources (not the docs UI code which lives in

packages/docs-app
or the docs theme in
packages/docs-theme
), you'll need to run
yarn compile
from
packages/docs-data
to see changes reflected in the application. For simplicity, an alias script
yarn docs-data
exists in the root to minimize directory hopping.

Updating icons

The One-time setup and Incorporating upstream changes steps should produce the generated source code in this repo used to build the icons documentation. This is sufficient for most development workflows.

If you are updating icons or adding new ones, you'll need to run

yarn compile
in
packages/icons
to see those changes reflected before running any of the dev scripts.

License

This project is made available under the Apache 2.0 License.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.