react-cimpress-comment

react-cimpress-comment

This repository stores a react component that anyone can use to conveniently collect and display comments related to platform resources.

Usage

Install the npm package

npm install react-cimpress-comment --save

import the component

import { Comments } from 'react-cimpress-comment'

add the css dependencies

<link rel="stylesheet" href="https://static.ux.cimpress.io/mcp-ux-css/1.1/release/css/mcp-ux-css.min.css"/>
<link rel="stylesheet" href="//cloud.typography.com/7971714/6011752/css/fonts.css"/>

and then use wherever needed

render() {

    return (
      <div>
        <Comments resourceUri={"https://some_resource_server.cimpress.io/v0/resource/resourceId"}
                  newestFirst={false} editComments={true} accessToken={"accessToken"}/>
      </div>
    );
  }

which will result in something like

There is also a variant of the component that places the comments in a drawer, and provides a button with comment count as a badge that opens the drawer.

import { CommentsDrawerLink } from 'react-cimpress-comment'

render() {

    return (
      <div>
        <CommentsDrawerLink resourceUri={"https://some_resource_server.cimpress.io/v0/resource/resourceId"}
                  newestFirst={false} editComments={true} accessToken={"accessToken"} />
      </div>
    );
  }

Optional props:

• header allows overwriting the header/title part
• footer allows overwriting the footer part
• position, by default "right". Can also move the drawer to the "left" side.

Publishing a new version to NPM

New patch version: $ npm version patch [ && npm publish ] // minor changes

New minor version: $ npm version minor [ && npm publish ] // backwards compatible

New major version: $ npm version major [ && npm publish ] // breaking changes

Publish a module: $ npm publish

Note: The way we publish new versions is by using the command line tools.

Development

Make sure you have the up-to-date translation files by calling

`CLIENT_ID="<here the client id>" CLIENT_SECRET="<here the client secret>" npm run translate`

For developing you can use storybook

`npm run storybook`

will run both the mockserver and the storybook UI.

During and after development it is good to check or update BackstopJS data. Using the right commands, like

`backstop test`

to perform the generation of the test screenshots and their diffs to references and

`backstop approve`

to promote images to references if the breaking changes are intended.

Make sure you have backstop installed npm install -g backstopjs or use the one in node_modules.