Blueprint Table (#30)

* Blueprint Table

Blueprint Table is a highly configurable UI component that provides standard UX
for presenting tabular data. It is built using [React](https://facebook.github.io/react/)
but usable with any front end framework.

**Features**

- Fixed column headers and row indices columns
- Resizable columns and rows
  - Double-click column resize handles for auto-sizing
- Viewport-only rendering for scale (a.k.a. _lazy_ rendering)
- Robust selections (columns, rows, or multiple cell regions)
- Right-click to copy cell region contents
- Inline editable column headers & cells
- Unit test covered
- Documented
- Feature gallery

CONTRIBUTING.md

@@ -0,0 +1,156 @@
+# Contributing
+
+:+1: :confetti_ball: :tada: Thanks for taking the time to contribute! :tada: :confetti_ball: :+1:
+
+#### Table Of Contents
+
+[Getting Started](#getting-started)
+  - [Installation](#installation)
+
+[Developing](#developing)
+  - [Running](#running)
+  - [Coding](#coding)
+  - [Submitting](#submitting)
+
+[Releasing](#releasing)
+
+
+## Getting Started
+
+### Installation
+
+First, clone the Blueprint monorepo:
+
+```sh
+git clone git@github.com:palantir/blueprint.git
+```
+
+> **Install Node.js**
+>
+> If you haven't already, you'll need to install node.js. Use an [official
+> installer](https://nodejs.org/en/download/), or use a utility for managing
+> versions such as [Node Version Manager](https://github.com/creationix/nvm).
+
+Go to the root directory of this repository and
+install its dependencies:
+
+```sh
+cd blueprint
+npm install
+npm run bootstrap
+```
+
+## Developing
+
+Start a new feature branch. We use a format like `[your-intials]/[short-name]`.
+
+For example:
+ * `bd/laser-beams`
+ * `bd/jittery-cells`
+ * `bd/css-class-renames`
+
+To create a new branch for development, run:
+
+```sh
+git fetch
+git checkout -b your-initials/your-branch-name origin/master
+```
+
+
+### Running
+
+Many of the packages have their own compile-and-watch preview tasks which will
+help you confirm that your features are working.
+
+To start the compile-and-watch task, run the default script in the package
+directory.
+
+```sh
+cd packages/table
+npm start
+```
+
+Once the preview server is running, navigate to
+[http://localhost:8080](http://localhost:8080).
+
+
+### Coding
+
+While reviewing your changes, we use
+[`previews`](https://github.com/palantir/blueprint/blob/master/packages/table/preview)
+to demonstrate the functionality of various table features. The relevant package
+previews will also be automatically added to your pull request.
+
+Feel free to modify the examples in the previews to test your code changes. When
+you modify the code in `src/` or `preview/`, the code will be automatically
+recompiled and you can simply refresh to see the result.
+
+
+### Submitting
+
+Once you're satisfied with your changes, you'll need to make sure your code
+will pass code review.
+
+Your code must be **test covered** and **lint free**.
+
+Run all unit tests and measure code coverage:
+
+```sh
+npm run test
+```
+
+If the coverage check fails, you may have to add a new suite of tests or
+modify existing tests in `test/`.
+
+Run code and style linters across all code:
+
+```sh
+npm run lint
+```
+
+These commands must complete successfully, otherwise our CI will automatically
+fail your pull-request.
+
+
+### Submit a pull-request
+
+Once your code works and the tests and linter pass, you can submit your
+code for review!
+
+```sh
+git add --all .
+git commit
+git push
+```
+
+When committing, write a thorough description of your work so that reviewers
+and future developers can understand your code changes.
+
+Once pushed, navigate to the [code tab of the Github site](https://github.com/palantir/blueprint)
+and you should see an option to create a pull request from the recently pushed
+commit.
+
+After your PR is created, our CI server will pick it up, run tests, and run a
+server with your version of the preview so that other engineers can verify
+your feature works as intended.
+
+After this point, you may be asked to make modification to your code to adhere
+to coherent code style or to fix bugs you may have not noticed. Once you get
+approvals from 1 or 2 repository owners, we will merge your code!
+:confetti_ball: :tada:
+
+
+## Releasing
+
+:warning: These steps should only be done by a repository owner.
+
+
+#### Publishing to the NPM registry
+
+The library is automatically published to the NPM registry via `scripts/publish.sh` from CI nodes.
+
+To cut a new NPM release, run these steps.
+
+1. Update the version number in `package.json`.
+2. Commit, push, pull-request, and merge.
+3. [Draft a new release](https://github.com/palantir/blueprint/releases/new) from that commit.

Gulpfile.js

@@ -6,14 +6,14 @@
 const projects = [
     {
         id: "core",
-        cwd: "packages/core",
+        cwd: "packages/core/",
         dependencies: [],
         sass: true,
         typescript: true,
         karma: true,
     }, {
         id: "datetime",
-        cwd: "packages/datetime",
+        cwd: "packages/datetime/",
         dependencies: ["core"],
         sass: true,
         typescript: true,
@@ -46,6 +46,13 @@ const projects = [
         cwd: "packages/landing/",
         dependencies: ["core"],
         sass: true,
+    }, {
+        id: "table",
+        cwd: "packages/table/",
+        dependencies: ["core"],
+        karma: true,
+        sass: true,
+        typescript: true,
     },
 ];
 

circle.yml

@@ -3,7 +3,8 @@ general:
     - packages/core/coverage
     - packages/datetime/coverage
     - packages/docs
-    - packages/landing
+    - packages/landing/dist
+    - packages/table/preview
 machine:
   node:
     version: 6.1.0
@@ -12,6 +13,7 @@ dependencies:
     - packages/core/node_modules
     - packages/datetime/node_modules
     - packages/docs/node_modules
+    - packages/table/node_modules
     - packages/landing/node_modules
   # non-zero exit codes in dependencies will fail the build early
   # so these following commands will block the build and prevent tests

package.json

@@ -3,6 +3,9 @@
   "version": "3.4.0",
   "private": true,
   "description": "Omnibus project for Palantir's UI library for web applications.",
+  "scripts": {
+    "bootstrap": "lerna bootstrap"
+  },
   "dependencies": {
     "@types/assertion-error": "1.0.30",
     "@types/chai": "3.4.34",

packages/docs/package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "@blueprint/core": "*",
     "@blueprint/datetime": "*",
+    "@blueprint/table": "*",
     "chroma-js": "^1.1.1",
     "classnames": "^2.2.5",
     "dom4": "^1.8.3",

packages/docs/src/common/resolveExample.ts

@@ -7,10 +7,12 @@ import * as React from "react";
 
 import * as CoreExamples from "@blueprint/core/examples";
 import * as DateExamples from "@blueprint/datetime/examples";
+import * as TableExamples from "@blueprint/table/examples";
 
 const Examples: ExampleMap = {
     core: CoreExamples as any,
     datetime: DateExamples as any,
+    table: TableExamples as any,
 };
 
 export type ExampleComponentClass = React.ComponentClass<{ getTheme: () => string }>;

packages/docs/src/docs.scss

@@ -5,6 +5,7 @@
 
 @import "../node_modules/@blueprint/core/dist/blueprint.css";
 @import "../node_modules/@blueprint/datetime/dist/blueprint-datetime.css";
+@import "../node_modules/@blueprint/table/dist/table.css";
 
 @import "../node_modules/blueprint-syntax/dist/atom-blueprint-syntax-light.css";
 @import "../node_modules/blueprint-syntax/dist/atom-blueprint-syntax-dark.css";

packages/table/README.md

@@ -0,0 +1,21 @@
+Table
+---
+
+Blueprint Table is a highly configurable UI component that provides standard UX
+for presenting tabular data. It is built using [React](https://facebook.github.io/react/)
+but usable with any front end framework.
+
+#### Features
+
+- Fixed column headers and row indices columns
+- Resizable columns and rows
+  - Double-click column resize handles for auto-sizing
+- Viewport-only rendering for scale (a.k.a. _lazy_ rendering)
+- Robust selections (columns, rows, or multiple cell regions)
+- Right-click to copy cell region contents
+- Inline editable column headers & cells
+
+#### Roadmap (upcoming features)
+
+- Column reordering
+- Paging component

packages/table/config/webpack.config.preview.js

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+ * Licensed under the Apache License, Version 2.0 - http://www.apache.org/licenses/LICENSE-2.0
+ */
+
+const path = require("path");
+const resolve = (p) => path.join(__dirname, "..", p);
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+module.exports = {
+
+    entry: {
+         index: resolve("preview/index.tsx"),
+         perf: resolve("preview/perf.tsx")
+    },
+
+    resolve: {
+        extensions: ["", ".js", ".ts", ".tsx"],
+        alias: {
+            react: resolve("/node_modules/react"),
+        },
+    },
+
+    ts: {
+        compilerOptions: { declaration: false },
+    },
+
+    module: {
+        loaders: [
+            {
+                test: /\.tsx?$/,
+                loader: "ts-loader"
+            }, {
+                test: /\.css$/,
+                loader: ExtractTextPlugin.extract("style", "css"),
+            }, {
+                test: /\.(eot|ttf|woff|woff2)$/,
+                // We need to resolve to an absolute path so that this loader
+                // can be applied to CSS in other projects (i.e. packages/core)
+                loader: require.resolve("file-loader") + "?name=fonts/[name].[ext]"
+            },
+        ],
+    },
+
+    plugins: [
+        new ExtractTextPlugin("[name].css"),
+    ],
+
+    output: {
+        filename: "[name].bundle.js",
+        path: resolve("preview/dist/")
+    }
+};

packages/table/examples/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+ * Licensed under the Apache License, Version 2.0 - http://www.apache.org/licenses/LICENSE-2.0
+ */
+
+export * from "./tableDollarExample";
+export * from "./tableEditableExample";
+export * from "./tableSortableExample";