Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"presets": [
["@babel/preset-env", {"modules": false}],
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-syntax-dynamic-import"
],
"env": {
"production": {
"presets": ["minify"]
},
"test": {
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
}
}
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules/
**/node_modules/
7 changes: 5 additions & 2 deletions .gitmodules
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
[submodule "react-json-blinkforms"]
path = react-json-blinkforms
[submodule "blinkforms/react-json-blinkforms"]
path = blinkforms/react-json-blinkforms
url = https://github.com/json-blinkforms/react-json-blinkforms.git
[submodule "blinkforms/typescript-core"]
path = blinkforms/typescript-core
url = https://github.com/json-blinkforms/typescript-core.git
14 changes: 14 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# [Blueprint Documentation](http://blueprintjs.com/docs)

This project generates and aggregates the documentation from the packages
in this repo.

## Quick start

From the root of the repo:

1. Run `yarn`
1. Run `yarn dev`
1. Open your browser to http://localhost:9000/

*Note: if you want to run the development server on a different port, set the `PORT` environment variable.*
6 changes: 6 additions & 0 deletions blinkforms/_nav.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<!--
This file enumerates the exact order of root pages in the left sidebar.
-->

@page blueprint
@page react-json-blinkforms
54 changes: 54 additions & 0 deletions blinkforms/blueprint.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
@# Blueprint

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

It is optimized for building complex data-dense interfaces for desktop applications.

@reactDocs Welcome

<div class="@ns-callout @ns-intent-success @ns-icon-endorsed">
<h4 class="@ns-heading">Blueprint v3 is available now! [See what's new.](#blueprint/whats-new-3.0)</h4>
</div>

@## Quick start

### Install

**@blueprintjs/core** is the primary Blueprint package on NPM and home to over 40 components.

```sh
yarn add @blueprintjs/core react react-dom
```

Additional components live in the **@blueprintjs/icons**, **@blueprintjs/datetime**, **@blueprintjs/select**, **@blueprintjs/table**, and **@blueprintjs/timezone** packages, separated by use case and significant dependencies. All have peer dependencies on **react** and **react-dom**, so these two packages must be installed alongside Blueprint.

### Import

Import React components from the appropriate package.

```tsx
import { Button } from "@blueprintjs/core";

<Button intent="success" text="button content" onClick={incrementCounter} />
```

Don't forget to include the **main CSS file** from each Blueprint package!

```html
<!-- in index.html, or however you manage your CSS files -->
<link href="path/to/node_modules/normalize.css/normalize.css" rel="stylesheet" />
<!-- blueprint-icons.css file must be included alongside blueprint.css! -->
<link href="path/to/node_modules/@blueprintjs/icons/lib/css/blueprint-icons.css" rel="stylesheet" />
<link href="path/to/node_modules/@blueprintjs/core/lib/css/blueprint.css" rel="stylesheet" />
<!-- add other blueprint-*.css files here -->
```

@## Browser support

**Blueprint supports Chrome, Firefox, Safari, IE 11, and Microsoft Edge.**

You may experience degraded visuals in IE.
IE 10 and below are unsupported due to their lack of support for CSS Flexbox Layout.
These browsers were deprecated by Microsoft (end of support) in [January 2016](https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support).

@page getting-started
183 changes: 183 additions & 0 deletions blinkforms/getting-started.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
@# Getting started

@## Installing Blueprint

Blueprint is available as a collection of NPM packages under the `@blueprintjs`
scope. Each package appears at the top level of the sidebar to the left, along
with its current version.

Each package contains a CSS file and a collection of CommonJS modules exposing React components.
The `main` module exports all symbols from all modules so you don't have to import individual files
(though you can if you want to). The JavaScript components are stable and their APIs adhere to
[semantic versioning](http://semver.org/).

1. Install the core package and its peer dependencies with an NPM client like
`npm` or `yarn`, pulling in all relevant dependencies:

```sh
yarn add @blueprintjs/core react react-dom
```

1. After installation, you'll be able to import the React components in your application:

```tsx
import { Button, Intent, Spinner } from "@blueprintjs/core";

// using JSX:
const mySpinner = <Spinner intent={Intent.PRIMARY} />;

// use React.createElement if you're not using JSX.
const myButton = React.createElement(Button, { intent: Intent.SUCCESS }, "button content");
```

1. **Don't forget to include the main CSS file from each Blueprint package!** Additionally, the
`resources/` directory contains supporting media such as fonts and images.

```css.scss
// using node-style package resolution in a CSS file:
@import "~normalize.css";
@import "~@blueprintjs/core/lib/css/blueprint.css";
@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";
```

```html
<!-- or using plain old HTML -->
<head>
<!-- include dependencies manually -->
<link href="path/to/node_modules/normalize.css/normalize.css" rel="stylesheet" />
<link href="path/to/node_modules/@blueprintjs/core/lib/css/blueprint.css" rel="stylesheet" />
<link href="path/to/node_modules/@blueprintjs/icons/lib/css/blueprint-icons.css" rel="stylesheet" />
<!-- NOTE: blueprint-icons.css file must be included alongside blueprint.css! -->
</head>
```

<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
<h4 class="@ns-heading">CDN-only usage</h4>
Blueprint can instead be quickly added to a page using the Unpkg CDN.
[See below for instructions](#blueprint/getting-started.cdn-consumption).
</div>

@## JS environment

@### Language features

Note that since the minimum supported version of React is [v16](https://reactjs.org/blog/2017/09/26/react-v16.0.html),
all of its [JavaScript Environment Requirements](https://reactjs.org/docs/javascript-environment-requirements.html) apply to
Blueprint as well. Blueprint components require the following ES2015 features:

- `Map`
- `Set`
- `Array.fill`
- `Array.from`

We recommend polyfilling these features using [es6-shim](https://github.com/paulmillr/es6-shim) or
[core-js](https://github.com/zloirock/core-js).

@### DOM4

Blueprint relies on a handful of DOM Level 4 API methods: `el.closest()` and `el.contains()`.
`@blueprintjs/core` depends on a [polyfill library called `dom4`](https://webreflection.github.io/dom4/) to ensure
these methods are available. This module is conditionally loaded if Blueprint is used in a browser environment.

@## TypeScript

Blueprint is written in TypeScript and therefore its own `.d.ts` type definitions are distributed in
the NPM package and should be resolved automatically by the compiler. However, you'll need to
install typings for Blueprint's dependencies before you can consume it:

```sh
# required for all @blueprintjs packages:
npm install --save @types/react @types/react-dom

# @blueprintjs/timezone requires:
npm install --save @types/moment-timezone
```

Blueprint's declaration files require **TypeScript 2.3+** for default generic parameter arguments: `<P = {}>`.

<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
For more information, see [Understanding TypeScript](#blueprint/reading-the-docs.understanding-typescript).
</div>

@## Vanilla JS APIs

JS components are built using React, but that does not limit their usage to just React applications.
You can render any component in any JavaScript application with `ReactDOM.render`. Think of it like
using a jQuery plugin.

```tsx
import { Classes, Intent, Spinner } from "@blueprintjs/core";

const myContainerElement = document.getElementById("container");

// with JSX
ReactDOM.render(<Spinner className={Classes.SMALL} intent={Intent.PRIMARY} />, myContainerElement);

// with vanilla JS, use React.createElement
ReactDOM.render(
React.createElement(Spinner, {
className: Classes.SMALL,
intent: Intent.PRIMARY
}),
myContainerElement
);
```

To remove the component from the DOM and clean up, unmount it:

```tsx
ReactDOM.unmountComponentAtNode(myContainerElement);
```

Check out the [React API docs](https://facebook.github.io/react/docs/react-api.html) for more details.

@## CDN consumption

Blueprint supports the venerable [unpkg CDN](https://unpkg.com). Each package provides a UMD
`dist/[name].bundle.js` file containing the bundled source code. The UMD wrapper exposes each
library on the `Blueprint` global variable: `Blueprint.Core`, `Blueprint.Datetime`, etc.

These bundles _do not include_ external dependencies; your application will need to ensure that
`normalize.css`, `classnames`, `dom4`, `react`, `react-dom`, `react-transition-group`, `popper.js`, and
`react-popper` are available at runtime.

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Blueprint Starter Kit</title>

<!-- Style dependencies -->
<link href="https://unpkg.com/normalize.css@^7.0.0" rel="stylesheet" />
<!-- Blueprint stylesheets -->
<link href="https://unpkg.com/@blueprintjs/icons@^3.4.0/lib/css/blueprint-icons.css" rel="stylesheet" />
<link href="https://unpkg.com/@blueprintjs/core@^3.10.0/lib/css/blueprint.css" rel="stylesheet" />
</head>
<body>
<!-- Blueprint dependencies -->
<script src="https://unpkg.com/classnames@^2.2"></script>
<script src="https://unpkg.com/dom4@^1.8"></script>
<script src="https://unpkg.com/tslib@^1.9.0"></script>
<script src="https://unpkg.com/react@^16.2.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@^16.2.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-transition-group@^2.2.1/dist/react-transition-group.min.js"></script>
<script src="https://unpkg.com/popper.js@^1.14.1/dist/umd/popper.js"></script>
<script src="https://unpkg.com/react-popper@^1.0.0/dist/index.umd.min.js"></script>
<script src="https://unpkg.com/resize-observer-polyfill@^1.5.0"></script>
<!-- Blueprint packages (note: icons script must come first) -->
<script src="https://unpkg.com/@blueprintjs/icons@^3.4.0"></script>
<script src="https://unpkg.com/@blueprintjs/core@^3.10.0"></script>

<div id="btn"></div>
<script>
const button = React.createElement(Blueprint.Core.Button, {
icon: "cloud",
text: "CDN Blueprint is go!",
});
ReactDOM.render(button, document.querySelector("#btn"));
</script>
</body>
</html>
```
59 changes: 59 additions & 0 deletions blinkforms/index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
/*!

Copyright 2015-present Palantir Technologies, Inc. All rights reserved.
Licensed under the Apache License, Version 2.0.

*/

@import "~normalize.css/normalize.css";

// import these first because they're the base layer
@import "~@blueprintjs/core/lib/css/blueprint.css";
@import "~@blueprintjs/datetime/lib/css/blueprint-datetime.css";
@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";
@import "~@blueprintjs/labs/lib/css/blueprint-labs.css";
@import "~@blueprintjs/select/lib/css/blueprint-select.css";
@import "~@blueprintjs/table/lib/css/table.css";
@import "~@blueprintjs/timezone/lib/css/blueprint-timezone.css";

// then the docs theme styles
@import "~@blueprintjs/docs-theme/lib/css/docs-theme.css";
@import "~@blueprintjs/docs-theme/src/styles/variables";

// then our own styles
@import "styles/colors";
@import "styles/examples";
@import "styles/icons";
@import "styles/nav";
@import "styles/resources";
@import "styles/welcome";


.docs-releases-menu .#{$ns}-menu {
min-width: 270px;
}

// remove padding on left side of tables in documentation
.docs-section .#{$ns}-running-text table {
margin: $content-padding 0;

th {
padding-top: 0;
}

th:first-child,
td:first-child {
padding-right: 0;
padding-left: 0;
}
}

.docs-root,
.docs-nav,
.docs-content-wrapper,
.docs-example,
.docs-example-options,
.editor,
code {
transition: background-color $pt-transition-duration $pt-transition-ease;
}
1 change: 1 addition & 0 deletions blinkforms/react-json-blinkforms
Submodule react-json-blinkforms added at 8229d9
1 change: 1 addition & 0 deletions blinkforms/typescript-core
Submodule typescript-core added at b963ca
Loading