dataminr-react-components - Collection of reusable React Components and utility functions.

Overview

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

Issues
  • Column filtering

    Column filtering

    Adds the ability to filter by a value in a specified column in the table component.

    opened by Keara-Haley 9
  • Advanced filter changes: Namespace input ids, Place input before label

    Advanced filter changes: Namespace input ids, Place input before label

    Associate the input to the label implicityly

    • There was an issue when trying to place multiple tables on a single page where clicking a label would toggle the wrong checkbox. This fixes the problem.
    opened by josh-schlick 5
  • Fix cache key

    Fix cache key

    Use original searchTerm for cache key and include additionalFilters

    opened by scottwpage 3
  • remove componentWillReceiveProps from Table component

    remove componentWillReceiveProps from Table component

    calling TableStore.onDataReceived out of the normal data lifecycle can cause issues

    opened by jvswatson 3
  • Format data in different field

    Format data in different field

    Instead of reformatting the data in place, use the new field to save the formatted value. This should prevent issues related to re-rendering and re-formatting of already-formatted data.

    This change does impact the field that hoverProperty may wish to reference. For example, if you wish to have a hover property on a timestamp, you should probably reference fieldName, while before you would reference fieldNameTimestamp.

    opened by jvswatson 3
  • Cancel outstanding requests

    Cancel outstanding requests

    Historically, previous 'requests for term' were only cancelled if the current request was not coming from cache. This can cause a previous keystroke to overwrite the results of a current keystroke/search that was retrieved from the cache.

    opened by scottwpage 3
  • Added className to rowClasses

    Added className to rowClasses

    Support adding specified className to tableRowItem

    opened by scottwpage 2
  • Add footer to modal

    Add footer to modal

    Add a footer to the modal component. The footer is optional. To include it, send in a name for the button, and a callback method for when the button is clicked. The button will be displayed in a footer area in the bottom of the modal.

    opened by josh-schlick 2
  • formatting a string with moment is allowed

    formatting a string with moment is allowed

    this continues the revert of the componentDidUpdate changes, which tried to bypass 're-formatting' data by ignoring times that are strings

    opened by jvswatson 2
  • How to run the example

    How to run the example

    Please I want to run the example inside folder. I did grunt and bower install but anything works. The index.html file inside /src/js/examples folder requires /dist and src/. How do I generate this folders? Thanks

    opened by 0x7b1 2
  • Module not found: Can't resolve 'RequestHandler'

    Module not found: Can't resolve 'RequestHandler'

    I'm tried to create a basic piechart using static data in the component and I receive these compile errors:

    ./node_modules/dataminr-react-components/dist/lib/StoreBase.js
    Module not found: Can't resolve 'RequestHandler' in '.../node_modules/dataminr-react-components/dist/lib'
    

    full code: http://dpaste.com/17JP2Y4

    opened by bgits 2
Releases(1.4.0)
  • 1.4.0(Feb 19, 2019)

  • 1.3.1(Aug 30, 2018)

  • 1.3.0(Aug 29, 2018)

  • 1.2.0(Aug 27, 2018)

    • Put formatting data in a new field, rather than overwriting an existing field
    • This change does impact the field that hoverProperty may wish to reference. For example, if you wish to have a hover property on a timestamp, you should probably reference fieldName, while before you would reference fieldNameTimestamp.
    Source code(tar.gz)
    Source code(zip)
  • 1.1.8(Aug 21, 2018)

  • 1.1.7(Aug 9, 2018)

  • 1.1.6(Aug 3, 2018)

  • 1.1.5(Aug 3, 2018)

    • Use search term from original request in cache key instead of from state.inputValue, which may have changed.
    • Include additionalFilters in cache key.
    Source code(tar.gz)
    Source code(zip)
  • 1.1.4(Aug 2, 2018)

  • 1.0.2(Aug 2, 2017)

  • 1.0.0(May 12, 2017)

  • 0.9.1(Jan 5, 2017)

  • 0.9.0(Jan 3, 2017)

    • Removed jQuery as a library dependency.
    • Removed undocumented table component that was no longer maintained. Table component doesn't use any base classes anymore and is now just a normal React component.
    Source code(tar.gz)
    Source code(zip)
  • 0.8.5(Dec 1, 2016)

  • 0.8.4(Nov 22, 2016)

  • 0.8.3(Nov 18, 2016)

  • 0.8.2(Sep 23, 2016)

  • 0.8.1(Aug 22, 2016)

    • Added new optional HTML 'element' parameter to append PageMessage element to
    • Added disableTransition prop to PageMessage to remove transitions for message
    Source code(tar.gz)
    Source code(zip)
  • 0.8.0(Aug 10, 2016)

    Removed the selectedRowIndex prop and replaced it with the selectedRowPredicate prop, which takes an object predicate to determine if a row is selected (e.g. {id: 5}).

    Source code(tar.gz)
    Source code(zip)
  • 0.7.7(Aug 1, 2016)

    Added a new dataType option 'duration' to support spans of time. Read the durationFormat description on the Table component usage to understand how to use this new type.

    Source code(tar.gz)
    Source code(zip)
  • 0.7.5(Jul 20, 2016)

  • 0.7.4(Jun 22, 2016)

    Expanded callback parameters of the Table's action column to include props, state, and row index. This allows the row click and action column click to achieve similar functionality.

    Source code(tar.gz)
    Source code(zip)
  • 0.7.3(Jun 2, 2016)

    Adding Extra Options to Table and Modal

    Table: Advanced Filters now use icons instead of checkboxes. There is an option to send in an icon to overwrite the default icon.

    Modal: Can now pass in an option to not automatically set focus to the modal. This will be useful if a consumer wants to control what is focused when the modal opens.

    Source code(tar.gz)
    Source code(zip)
  • 0.7.2(May 25, 2016)

  • 0.7.1(May 4, 2016)

  • 0.7.0(May 3, 2016)

    Breaking Changes

    • Moment is now a peer dependency. Include moment as a dependency in your project to upgrade to this release.

    Other Changes

    • Allow React 15 as a peer dependency (0.14 is still accepted)
    • Upgrade React versions
    Source code(tar.gz)
    Source code(zip)
  • 0.6.0(Apr 21, 2016)

    Breaking Changes

    • Fix bug where clicking the advanced filter label was not correlating to the proper checkbox when there were multiple tables on a page. To fix this, the markup around the label and input was changed. This may break projects that had any style overwrites to the advanced filter markup.
    Source code(tar.gz)
    Source code(zip)
  • 0.5.5(Apr 14, 2016)

    Fixed regression in the table component where the rowIndex was off by 1 when clicking a checkbox and when triggering a row click callback. The rowIndex is now calculated and passed to the row click callback as a 4th parameter.

    Source code(tar.gz)
    Source code(zip)
  • 0.5.4(Apr 1, 2016)

  • 0.5.3(Mar 29, 2016)

Owner
Dataminr
Dataminr
Reusable component Reactjs for Mazer Template, Free and Open-Source

React Mazer UI React Mazer UI is React Wrapper for Mazer Template, see more about Mazer Installation Using NPM $ npm install react-mazer-ui --save Usi

Muhammad Fahriansyah 26 Jan 14, 2022
A reusable React implementation of accessible footnotes.

react-a11y-footnotes react-a11y-dialog is a thin React component to ease the use of accessible footnotes in React applications. This implementation is

Kitty Giraudel 19 Jan 10, 2022
@project-serum/swap-ui: A reusable React component for swapping on the Serum DEX.

@project-serum/swap-ui A reusable React component for swapping on the Serum DEX. The Solana program can be found here. Usage Install First install the

MauriceWells 1 Jan 20, 2022
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web Fluent UI web represents a collection of utilities, React components, and web components for building web applications. This repo is hom

Microsoft 12.7k Jan 14, 2022
Nextjs-components - A collection of React components

nextjs-components A collection of React components, transcribed from https://vercel.com/design. 1 Motivation TBD Todo's Unit test coverage Unit tests

null 22 Jan 15, 2022
React utility component primitives & UI framework for use with Tailwind CSS

Tailwind React UI NB: As the 0.#.# version number suggests this is still very much work in progress, so semantic versioning will not be followed until

Ed Mortlock 244 Jan 12, 2022
A collection of React components for Topcoat.

react-topcoat A collection of React components for Topcoat. See test.js for sample usage. Demo Go here: http://arnemart.github.io/react-topcoat/ Or ch

Arne Martin Aurlien 7 Feb 9, 2017
A collection of JetBrains Web UI components

Ring UI — JetBrains Web UI components This collection of UI components aims to provide all of the necessary building blocks for web-based products bui

JetBrains 2.9k Jan 13, 2022
Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System

Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit System.

Timeless 154 Jan 8, 2022
A collection of JetBrains Web UI components

This collection of UI components aims to provide all of the necessary building blocks for web-based products built inside JetBrains, as well as third-party plugins developed for JetBrains' products.

JetBrains 2.7k Sep 16, 2021
🧩 Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

?? Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

Medly 63 Jan 10, 2022
Mantine is a MIT licensed open source react components and hooks library with focus on usability, accessibility and developer experience.

React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience

Mantine 3.8k Jan 17, 2022
ClearX is an alternative way to Redux and MobX to maintain the application state and provides a simple interface to bind it to UI components

ClearX is an alternative way to Redux and MobX to maintain the application state and provides a simple interface to bind it to UI components. It has utilities to set or get deep properties of nested data using paths.

Autodesk 18 Nov 10, 2021
React UI Components for macOS High Sierra and Windows 10

React UI Components for macOS High Sierra and Windows 10. npm install react-desktop --save Help wanted! I am looking for developers to help me develop

Gabriel Bull 9.3k Jan 14, 2022
React components and demo for the Tabler UI theme.

Update - June 2019: Version 2 Alpha now available on NPM: npm install [email protected] yarn add [email protected] Check out the latest progress and

Tabler 1.8k Jan 18, 2022
React components for easier customization and smooth development flow.

Sha-el-design React components for easier customization and smooth development flow. ?? Features ?? Material inspired design. ?? A complete package of

null 29 Jan 10, 2022
An opinionated UI Workbench featuring tools like react, styled components, typescript, webpack, jest and storybook all bundled into an easy to use interface

An opinionated UI Workbench featuring tools like react, styled components, typescript, webpack, jest and storybook all bundled into an easy to use interface

Alex Wright 17 Dec 18, 2021
Opinionated React UI library, built with styled-components and TypeScript.

Opinionated React UI library, built with styled-components and TypeScript.

Lapidist 0 Jan 10, 2022
Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps.

?? Pancake UIkit Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps. It also contains a theme file for dark an

PolyPup 1 Nov 4, 2021