muir-react

MarkLogic-UI-Resource (Muir) React Components

This library provides a set of React components useful for building applications backed by a MarkLogic database.

Getting Started

Installation

npm install --save ml-treehouse-react

or

yarn add ml-treehouse-react

Implementation

You will need to create a React container in your host application to pass the necessary props and callback functions to the ML-Treehouse components that you are importing. See the MLSearchContainer in the reference application for an example of doing this, using Redux modules. Also, look at App.js and index.js to see how selectors and actions are passed to MLSearchContainer.

Components

Storybook

We are creating a storybook for all the components present in this library. To see it, for the moment, clone this repository and run:

npm run storybook

Contributing

Local Development of ml-treehouse-react

We need just one version of React, so, assuming your host application is at ../ml-treehouse-react-reference, run the following. (If your host application is in a different directory, you will need to make appropriate changes.)

npm link ../ml-treehouse-react
cd ../ml-treehouse-react
npm link ../ml-treehouse-react-reference/client/node_modules/react

Tests

npm run test

To run the tests continuously as you change files:

npm run test:watch

To get a report on test coverage:

npm run test:coverage
open coverage/html/index.html

Stories

Best practice is to add a story for each component that gets exported from this library. We are using Storybook for this, which is a form of live documentation. At least, there should be a story example for each supported state of the component. It is also possible to make interactive examples, though this is more work. See for an example.

Eventually, we may tie stories together with testing. This could follow the model described in this article.

To create a story for a component, save it as a new file ending with '.story.js'. See the codebase for examples.

Code-Style and Linting

TODO: Describe ESLint, benefits of linting javascript, and the benefits of a common code-style. Also, how to set up editor-support.

TODO: We should enforce linting as part of the build.

Optional Badges

TODO: Evaluate which to keep.