Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Keara-Haley Merge pull request #71 from dataminr/utah-dependency-upgrades
Updating request handler reference so utah dependencies can be updated
Latest commit 0aa29ed Feb 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Dependency upgrades. May 11, 2017
examples updating request handler reference so utah can be updated Feb 14, 2019
grunt Changed order of grunt build Aug 3, 2018
src updating request handler reference so utah can be updated Feb 14, 2019
.eslintignore add optional valueFormat field to PieChart definition to override dis… Nov 22, 2016
.eslintrc add optional valueFormat field to PieChart definition to override dis… Nov 22, 2016
.gitignore Convert library over to modern tooling. Change to use CommonJS module… Jan 7, 2016
.npmignore
.travis.yml Update travis CI commands to npm only Jan 7, 2016
Gruntfile.js Convert library over to modern tooling. Change to use CommonJS module… Jan 7, 2016
LICENSE Convert library over to modern tooling. Change to use CommonJS module… Jan 7, 2016
README.md Remove jquery dep. Remove GroupedActionsTable and consolidate tables … Dec 29, 2016
package.json updating version Feb 15, 2019
tests.webpack.js Convert library over to modern tooling. Change to use CommonJS module… Jan 7, 2016
webpack.config.js Convert library over to modern tooling. Change to use CommonJS module… Jan 7, 2016

README.md

react-components

A collection of reusable React components with their own Flux lifecycle.

NPM version MIT License Build Status

What's inside react-components?

Table Component

From a simple table to multi-column filtering, column sorting, row selection, client side pagination, and more.

Search Component

Search against large sets of data, populate results, and take action with all the sweet hot keys your power users are after.

Pie Chart Component

Display complex data with our pie chart's drill in/out functionality, hover animations, and result list.

Modal Component

A simple single page modal that renders in it's own DOM tree and operates outside the render cycles of an application.

Confirm Dialog Component

A page level component that displays a confirmation dialog to the user with OK/Cancel buttons.

Page Message Component

A page level component that animates in and out for success, error, warning, info, and custom messages.

Getting Started

NPM Install react-components

$ npm install dataminr-react-components --save

If using a component which requests data from your APIs, add a mapping to your webpack config for the component which will be responsible for making requests

resolve: {
    alias: {
        RequestHandler$: path.join(__dirname, 'path', 'to', 'request', 'library'),
    }
},

Add external style sheet

<link type="text/css" rel="stylesheet" href="/node_modules/react-components/dist/react-components.css" />

Submitting Issues

If you are submitting a bug, please create a jsfiddle demonstrating the issue if possible.

Contributing

Fork the library and follow the Install Dependencies steps below.
$ git clone https://github.com/dataminr/react-components.git
$ git checkout master

Important Notes

  • Pull requests should be made to the master branch with proper unit tests.
  • Do not include the distribution files in your pull request. These are only sent to NPM

We use the following libraries within our project

  • React JavaScript library for building user interfaces
  • Flux Application architecture for building user interfaces
  • lodash JavaScript utility library
  • Moment Parse, validate, manipulate, and display dates in JavaScript
  • d3 Manipulate documents based on data with Data-Driven Documents
Style
  • Compass Css authoring framework
  • Sass CSS with superpowers
Unit testing and style checking
  • Jasmine Behavior-driven development framework for testing JavaScript code
  • Istanbul JavaScript statement, line, function, and branch code coverage when running unit tests
  • ESLint The pluggable linting utility for JavaScript and JSX

Install Dependencies

Node

node.js.org

Compass & Sass
$ gem install compass
Grunt command line interface
$ npm install -g grunt-cli
Finally, install third-party dependencies and start watchers:
$ cd ~/path/to/react-components/root
$ npm install
$ grunt

If you find your css build results are empty, update your sass gem.

Use the sample app in your browser to develop

/react-components/examples/index.html

Grunt Tasks

The default grunt task will start webpack to compile all JS/Sass and startup webpack dev server to serve combined files.

$ grunt

Run Karma unit tests and eslint

$ grunt test

Same as grunt test, however, this task will run code coverage and launch the code coverage in your browser.

$ grunt test:cov

License

MIT

Special Thanks To:

The developers that made this project possible by contributing to the the following libraries and frameworks:

React, Flux, Compass, Sass, Require, Grunt, Jasmine, Istanbul, ESLint, Watch, d3, lodash, and Moment

You can’t perform that action at this time.