`. + +
+ +@## 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({iconName}
+ tag.
+// must provide full TextMate language scope: "text.html.basic"
+function highlight(fileContents, scopeName = DEFAULT_SCOPE) {
+ if (fileContents) {
+ return highlighter.highlightSync({ fileContents, scopeName });
+ }
+}
+
+// Marked configuration (https://github.com/chjj/marked)
+
+// custom renderer lets us change tag semantics
+const markedRenderer = new marked.Renderer();
+markedRenderer.code = (textContent, language) => {
+ // massage markdown language hint into TM language scope
+ if (language === "html") {
+ language = "text.html.handlebars";
+ } else if (language != null && !/^source\./.test(language)) {
+ language = `source.${language}`;
+ }
+ // highlights returns HTML already wrapped in a tag
+ return highlight(textContent, language);
+};
+
+module.exports = {
+ highlight,
+
+ // render the given text as markdown, using the custom rendering logic above.
+ // code blocks are highlighted using highlight() above.
+ markdown: (textContent) => marked(textContent, { markedRenderer }),
+
+ markedRenderer,
+};
+
diff --git a/src/docs-data/package.json b/src/docs-data/package.json
new file mode 100644
index 0000000..8a9f1a8
--- /dev/null
+++ b/src/docs-data/package.json
@@ -0,0 +1,31 @@
+{
+ "name": "@blueprintjs/docs-data",
+ "version": "3.0.0",
+ "main": "src/index.js",
+ "types": "src/index.d.ts",
+ "private": true,
+ "scripts": {
+ "clean": "rm -rf src/generated/*",
+ "compile": "node ./compile-docs-data.js",
+ "test": "exit 0"
+ },
+ "dependencies": {
+ "@blueprintjs/core": "^3.0.0",
+ "@blueprintjs/docs-theme": "^3.0.0",
+ "documentalist": "^1.4.0",
+ "better-handlebars": "github:wmeldon/better-handlebars",
+ "glob": "^7.1.2",
+ "highlights": "^3.1.1",
+ "language-less": "github:atom/language-less",
+ "marked": "^0.3.6",
+ "semver": "^5.4.1",
+ "tree-sitter-typescript": "^0.13.3"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git@github.com:palantir/blueprint.git",
+ "directory": "packages/docs-data"
+ },
+ "author": "Palantir Technologies",
+ "license": "Apache-2.0"
+}
diff --git a/src/docs-data/src/index.d.ts b/src/docs-data/src/index.d.ts
new file mode 100644
index 0000000..6511e83
--- /dev/null
+++ b/src/docs-data/src/index.d.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright 2017 Palantir Technologies, Inc. All rights reserved.
+ */
+
+import { INpmPluginData, IMarkdownPluginData, IKssExample, IKssPluginData, ITypescriptPluginData } from "documentalist/dist/client";
+
+export type IDocsCompleteData = IMarkdownPluginData & INpmPluginData & IKssPluginData & ITypescriptPluginData;
+
+export const docsData: IDocsCompleteData;
diff --git a/src/docs-data/src/index.js b/src/docs-data/src/index.js
new file mode 100644
index 0000000..80119df
--- /dev/null
+++ b/src/docs-data/src/index.js
@@ -0,0 +1,8 @@
+/**
+ * Copyright 2017 Palantir Technologies, Inc. All rights reserved.
+ * @fileoverview Exports JSON data for packages/docs-app
+ */
+
+module.exports = {
+ docsData: require("../../generated/docs.json"),
+};
diff --git a/src/generated/docs.json b/src/generated/docs.json
new file mode 100644
index 0000000..11aa9b2
--- /dev/null
+++ b/src/generated/docs.json
@@ -0,0 +1,716 @@
+{
+ "nav": [
+ {
+ "children": [
+ {
+ "title": "Quick start",
+ "level": 2,
+ "route": "blueprint.quick-start"
+ },
+ {
+ "title": "Browser support",
+ "level": 2,
+ "route": "blueprint.browser-support"
+ },
+ {
+ "children": [
+ {
+ "title": "Installing Blueprint",
+ "level": 3,
+ "route": "blueprint/getting-started.installing-blueprint"
+ },
+ {
+ "title": "JS environment",
+ "level": 3,
+ "route": "blueprint/getting-started.js-environment"
+ },
+ {
+ "title": "Language features",
+ "level": 4,
+ "route": "blueprint/getting-started.language-features"
+ },
+ {
+ "title": "DOM4",
+ "level": 4,
+ "route": "blueprint/getting-started.dom4"
+ },
+ {
+ "title": "TypeScript",
+ "level": 3,
+ "route": "blueprint/getting-started.typescript"
+ },
+ {
+ "title": "Vanilla JS APIs",
+ "level": 3,
+ "route": "blueprint/getting-started.vanilla-js-apis"
+ },
+ {
+ "title": "CDN consumption",
+ "level": 3,
+ "route": "blueprint/getting-started.cdn-consumption"
+ }
+ ],
+ "level": 2,
+ "reference": "getting-started",
+ "route": "blueprint/getting-started",
+ "title": "Getting started"
+ }
+ ],
+ "level": 1,
+ "reference": "blueprint",
+ "route": "blueprint",
+ "title": "Blueprint"
+ },
+ {
+ "children": [
+ {
+ "children": [
+ {
+ "children": [
+ {
+ "title": "Fixed to viewport top",
+ "level": 5,
+ "route": "react-json-blinkforms/renderers/ArrayDefault.fixed-to-viewport-top"
+ },
+ {
+ "title": "Fixed width",
+ "level": 5,
+ "route": "react-json-blinkforms/renderers/ArrayDefault.fixed-width"
+ },
+ {
+ "title": "Props",
+ "level": 4,
+ "route": "react-json-blinkforms/renderers/ArrayDefault.props"
+ },
+ {
+ "title": "CSS",
+ "level": 4,
+ "route": "react-json-blinkforms/renderers/ArrayDefault.css"
+ }
+ ],
+ "level": 3,
+ "reference": "ArrayDefault",
+ "route": "react-json-blinkforms/renderers/ArrayDefault",
+ "title": "ArrayDefault"
+ }
+ ],
+ "level": 2,
+ "reference": "renderers",
+ "route": "react-json-blinkforms/renderers",
+ "title": "Components"
+ }
+ ],
+ "level": 1,
+ "reference": "react-json-blinkforms",
+ "route": "react-json-blinkforms",
+ "title": "React-json-blinkforms"
+ }
+ ],
+ "pages": {
+ "_nav": {
+ "reference": "_nav",
+ "route": "_nav",
+ "sourcePath": "_nav.md",
+ "title": "(untitled)",
+ "contents": [
+ "\n",
+ {
+ "tag": "page",
+ "value": "blueprint"
+ },
+ {
+ "tag": "page",
+ "value": "react-json-blinkforms"
+ }
+ ],
+ "contentsRaw": "\n\n@page blueprint\n@page react-json-blinkforms",
+ "metadata": {}
+ },
+ "blueprint": {
+ "reference": "blueprint",
+ "route": "blueprint",
+ "sourcePath": "blueprint.md",
+ "title": "Blueprint",
+ "contents": [
+ {
+ "tag": "heading",
+ "value": "Blueprint",
+ "level": 1,
+ "route": "blueprint"
+ },
+ "Blueprint is a React-based UI toolkit for the web.
\nIt is optimized for building complex data-dense interfaces for desktop applications.
\n",
+ {
+ "tag": "reactDocs",
+ "value": "Welcome"
+ },
+ "\n Blueprint v3 is available now! See what's new.
\n\n\n",
+ {
+ "tag": "heading",
+ "value": "Quick start",
+ "level": 2,
+ "route": "blueprint.quick-start"
+ },
+ "Install
\n@blueprintjs/core is the primary Blueprint package on NPM and home to over 40 components.
\nyarn 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.
\nImport
\nImport React components from the appropriate package.
\n;
Don't forget to include the main CSS file from each Blueprint package!
\n<!-- in index.html, or however you manage your CSS files --><!-- blueprint-icons.css file must be included alongside blueprint.css! --><!-- add other blueprint-*.css files here -->
",
+ {
+ "tag": "heading",
+ "value": "Browser support",
+ "level": 2,
+ "route": "blueprint.browser-support"
+ },
+ "Blueprint supports Chrome, Firefox, Safari, IE 11, and Microsoft Edge.
\nYou may experience degraded visuals in IE.\nIE 10 and below are unsupported due to their lack of support for CSS Flexbox Layout.\nThese browsers were deprecated by Microsoft (end of support) in January 2016.
\n",
+ {
+ "tag": "page",
+ "value": "getting-started"
+ }
+ ],
+ "contentsRaw": "@# Blueprint\n\n#### Blueprint is a React-based UI toolkit for the web.\n\nIt is optimized for building complex data-dense interfaces for desktop applications.\n\n@reactDocs Welcome\n\n\n Blueprint v3 is available now! [See what's new.](#blueprint/whats-new-3.0)
\n\n\n@## Quick start\n\n### Install\n\n**@blueprintjs/core** is the primary Blueprint package on NPM and home to over 40 components.\n\n```sh\nyarn add @blueprintjs/core react react-dom\n```\n\nAdditional 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.\n\n### Import\n\nImport React components from the appropriate package.\n\n```tsx\nimport { Button } from \"@blueprintjs/core\";\n\n\n```\n\nDon't forget to include the **main CSS file** from each Blueprint package!\n\n```html\n\n\n\n\n\n\n```\n\n@## Browser support\n\n**Blueprint supports Chrome, Firefox, Safari, IE 11, and Microsoft Edge.**\n\nYou may experience degraded visuals in IE.\nIE 10 and below are unsupported due to their lack of support for CSS Flexbox Layout.\nThese browsers were deprecated by Microsoft (end of support) in [January 2016](https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support).\n\n@page getting-started",
+ "metadata": {}
+ },
+ "getting-started": {
+ "reference": "getting-started",
+ "route": "blueprint/getting-started",
+ "sourcePath": "getting-started.md",
+ "title": "Getting started",
+ "contents": [
+ {
+ "tag": "heading",
+ "value": "Getting started",
+ "level": 1,
+ "route": "blueprint/getting-started"
+ },
+ {
+ "tag": "heading",
+ "value": "Installing Blueprint",
+ "level": 2,
+ "route": "blueprint/getting-started.installing-blueprint"
+ },
+ "Blueprint is available as a collection of NPM packages under the @blueprintjs\nscope. Each package appears at the top level of the sidebar to the left, along\nwith its current version.
\nEach package contains a CSS file and a collection of CommonJS modules exposing React components.\nThe main module exports all symbols from all modules so you don't have to import individual files\n(though you can if you want to). The JavaScript components are stable and their APIs adhere to\nsemantic versioning.
\n\nInstall the core package and its peer dependencies with an NPM client like\nnpm or yarn, pulling in all relevant dependencies:
\nyarn add @blueprintjs/core react react-dom
After installation, you'll be able to import the React components in your application:
\n; // using JSX:; // use React.createElement if you're not using JSX.;
Don't forget to include the main CSS file from each Blueprint package! Additionally, the\nresources/ directory contains supporting media such as fonts and images.
\n// using node-style package resolution in a CSS file: ;;;
<!-- or using plain old HTML --> <!-- include dependencies manually --> <!-- NOTE: blueprint-icons.css file must be included alongside blueprint.css! -->
\n\n CDN-only usage
\n Blueprint can instead be quickly added to a page using the Unpkg CDN.\n See below for instructions.\n\n\n",
+ {
+ "tag": "heading",
+ "value": "JS environment",
+ "level": 2,
+ "route": "blueprint/getting-started.js-environment"
+ },
+ {
+ "tag": "heading",
+ "value": "Language features",
+ "level": 3,
+ "route": "blueprint/getting-started.language-features"
+ },
+ "Note that since the minimum supported version of React is v16,\nall of its JavaScript Environment Requirements apply to\nBlueprint as well. Blueprint components require the following ES2015 features:
\nMapSetArray.fillArray.fromWe recommend polyfilling these features using es6-shim or\ncore-js.
\n", + { + "tag": "heading", + "value": "DOM4", + "level": 3, + "route": "blueprint/getting-started.dom4" + }, + "Blueprint relies on a handful of DOM Level 4 API methods: el.closest() and el.contains().\n@blueprintjs/core depends on a polyfill library called dom4 to ensure\nthese methods are available. This module is conditionally loaded if Blueprint is used in a browser environment.
Blueprint is written in TypeScript and therefore its own .d.ts type definitions are distributed in\nthe NPM package and should be resolved automatically by the compiler. However, you'll need to\ninstall typings for Blueprint's dependencies before you can consume it:
# 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 = {}>.
JS components are built using React, but that does not limit their usage to just React applications.\nYou can render any component in any JavaScript application with ReactDOM.render. Think of it like\nusing a jQuery plugin.
;;// with JSX, myContainerElement;// with vanilla JS, use React.createElementSpinner,,myContainerElement;
To remove the component from the DOM and clean up, unmount it:
\nmyContainerElement;
Check out the React API docs for more details.
\n", + { + "tag": "heading", + "value": "CDN consumption", + "level": 2, + "route": "blueprint/getting-started.cdn-consumption" + }, + "Blueprint supports the venerable unpkg CDN. Each package provides a UMD\ndist/[name].bundle.js file containing the bundled source code. The UMD wrapper exposes each\nlibrary on the Blueprint global variable: Blueprint.Core, Blueprint.Datetime, etc.
These bundles do not include external dependencies; your application will need to ensure that\nnormalize.css, classnames, dom4, react, react-dom, react-transition-group, popper.js, and\nreact-popper are available at runtime.
" + ], + "contentsRaw": "@# Getting started\n\n@## Installing Blueprint\n\nBlueprint is available as a collection of NPM packages under the `@blueprintjs`\nscope. Each package appears at the top level of the sidebar to the left, along\nwith its current version.\n\nEach package contains a CSS file and a collection of CommonJS modules exposing React components.\nThe `main` module exports all symbols from all modules so you don't have to import individual files\n(though you can if you want to). The JavaScript components are stable and their APIs adhere to\n[semantic versioning](http://semver.org/).\n\n1. Install the core package and its peer dependencies with an NPM client like\n `npm` or `yarn`, pulling in all relevant dependencies:\n\n ```sh\n yarn add @blueprintjs/core react react-dom\n ```\n\n1. After installation, you'll be able to import the React components in your application:\n\n ```tsx\n import { Button, Intent, Spinner } from \"@blueprintjs/core\";\n\n // using JSX:\n const mySpinner =Blueprint Starter Kit<!-- Style dependencies --><!-- Blueprint stylesheets --><!-- 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><script>const button = React;ReactDOM;</script>
`.\n\n
Components elo
\n", + { + "tag": "page", + "value": "renderers" + } + ], + "contentsRaw": "\n@# React-json-blinkforms\n\nComponents elo\n\n@page renderers", + "metadata": { + "reference": "react-json-blinkforms" + } + }, + "ArrayDefault": { + "reference": "ArrayDefault", + "route": "react-json-blinkforms/renderers/ArrayDefault", + "sourcePath": "react-json-blinkforms\\src\\renderers\\ArrayDefault.md", + "title": "ArrayDefault", + "contents": [ + { + "tag": "heading", + "value": "ArrayDefault", + "level": 1, + "route": "react-json-blinkforms/renderers/ArrayDefault" + }, + "Navbars present useful navigation controls at the top of an application.
\n", + { + "tag": "reactExample", + "value": "ArrayDefaultExample" + }, + { + "tag": "heading", + "value": "Fixed to viewport top", + "level": 3, + "route": "react-json-blinkforms/renderers/ArrayDefault.fixed-to-viewport-top" + }, + "Enable the fixedToTop prop to attach a navbar to the top of the viewport using\nposition: fixed; top: 0;. This is so-called "sticky" behavior: the navbar\nstays at the top of the screen as the user scrolls through the document.
This modifier is not illustrated here because it breaks the document flow.
\n<body> element equal to the height of the navbar. Use the $pt-navbar-height Sass variable.\nIf your application is inside a fixed-width container (instead of spanning the\nentire viewport), you can align the navbar to match by wrap your navbar groups\nin an element with your desired width and margin: 0 auto; to horizontally\ncenter it.
The Navbar API includes four stateless React components:
NavbarNavbarGroup (aliased as Navbar.Group)NavbarHeading (aliased as Navbar.Heading)NavbarDivider (aliased as Navbar.Divider)These components are simple containers for their children. Each of them supports\nthe full range of HTML <div> props.
", + { + "tag": "interface", + "value": "INavbarProps" + }, + { + "tag": "interface", + "value": "INavbarGroupProps" + }, + { + "tag": "interface", + "value": "INavbarHeadingProps" + }, + { + "tag": "interface", + "value": "INavbarDividerProps" + }, + { + "tag": "heading", + "value": "CSS", + "level": 2, + "route": "react-json-blinkforms/renderers/ArrayDefault.css" + }, + "
Use the following classes to construct a navbar:
\nnav.bp3-navbar – The parent element. Use a <nav> element for accessibility..bp3-navbar-group.bp3-align-(left|right) – Left- or right-aligned group..bp3-navbar-heading – Larger text for your application title..bp3-navbar-divider – Thin vertical line that can be placed between groups of elements.