@marklogic-community/grove-core-react-components N

MarkLogic-UI-Resource (Grove) React Components

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

Getting Started

Installation

npm install @marklogic-components/grove-core-react-components --save

yarn add @marklogic-components/grove-core-react-components

Implementation

If you are using these React components as stand-alone components, rather than as part of a Grove Project generated by the grove-cli, you will need to create a React container in your host application to pass the necessary props and callback functions to the Grove React components that you are importing. See the MLSearchContainer in the Grove React UI Template 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

TODO: update the list, or just refer to the public storybook?

This component provides a default view of a single document, together with some error handling. It can be customized. See: https://wiki.marklogic.com/display/SAL/Grove+React+Developer+Starter+Guide

The default behavior of the SearchResults component is to offer a choice between a CardResult and a ListResult. It can be customized. See: https://wiki.marklogic.com/display/SAL/Grove+React+Developer+Starter+Guide

Storybook

A storybook for all the components present in this library is provided as part of this project. There is a public copy available at:

http://grove-components.demo.marklogic.com/

Or you can view it locally by cloning this project, and running:

npm install && npm run storybook

After that you can typically open it in your browser at:

http://localhost:9001/

Updating Public Storybook

Make sure all changes are committed and pushed. Also make sure you have installed pm2 (sudo npm install -g pm2), that you can update all necessary files on the server (they might be published by someone else), and just run:

pm2 deploy production

Post-install should install, test, and build the components and the storybook. A browser refresh is all one need after that.

Contributing

Local Development of `grove-core-react-components`

You can use npm to link your local version of grove-core-react-components into an existing Grove React UI Application. First go into your grove-core-react-components directory and run the following to create a link on your machine from the name grove-core-react-components to this directory:

cd {path-to-your-copy-of-grove-core-react-components}
npm link

We need just one version of React. Because of the way the Node package manager (npm) can duplicate dependencies, this means we have to link your local grove-core-react-components's version of React to your host application's.

npm link {path-to-your-grove-project}/ui/node_modules/react

To complete the link, go into your Grove Project's /ui directory and run:

cd {path-to-your-grove-project}/ui
npm link grove-core-react-components

In order to see your changes to grove-core-react-components in your Grove Project, you will have to build grove-core-react-components:

cd {path-to-your-copy-of-grove-core-react-components}
npm run build

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.