@qualtrics/plugin-ui-react

Qualtrics Plugin React UI Component Library

Overview

This library contains components that are useful when developing XMT plugins, as well as general components for developing for Qualtrics using React.

Installation

Node JS v10.x or greater recommended (recommended to use nvm for versioning).

Install dependencies:

$ npm i

Development

To run the dev server and open a browser dev tab, run:

$ npm start

In your project (running with webpack-dev-server):

$ npm link /path/to/this/repo/qualtrics-plugin-ui-react

If you get an error about incorrect usage of Hooks in the browser dev console, you are most likely running two instances of react. To prevent this from happening, in your app add the following to the resolve option in webpack.config.js:

resolve: {      
  alias: {
    'react': path.resolve(__dirname, './node_modules/react'),
    'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
  }
}

This forces the locally linked component library to use your project's instance of React.

Production

To build, run:

$ npm run build

The production assets will be added to the /dist directory.

Troubleshooting

If you get errors from node-sass, node-gyp, or sass-related dependencies run:

$ rm package-lock.json && rm yarn.lock && rm -rf node_modules && npm i

If the problems persist, run:

$ npm rebuild

Deployment

Automated Alpha Version Deployment

• This project will automatically published if the package.json contains an alpha-tagged version when the feature branch is merged into the master branch
• Check the Jenkins job or #app-sdk-deploys Slack channel for deployment results

Deploying Non-Alpha Versions with Jenkins

• Create a PC ticket
  • Go to this Jenkins job
  • Set JOB_PARAMETER_PROJECT to plugin-ui-react
  • Set JOB_PARAMETER_RELEASE_STEP to pc tickets
  • Start the job
• Post the PC ticket in the slack channel #app-sdk-internal for approval
• Once approved, publish the target project through Jenkins
  • Go to this Jenkins job
  • Set JOB_PARAMETER_PROJECT to plugin-ui-react
  • Set JOB_PARAMETER_RELEASE_STEP to publish
  • Start the job
• Verify the new release

Deploying Non-Alpha Versions Manually

The projects in this repo can also be published manually.

• Follow the steps above to get the PC ticket created and approved
• In the top-level directory, run make test DIRECTORY=. to run all client unit tests
• Still in the top-level directory, run make publish-external INT_NPM_TOKEN=<yourNpmToken> DIRECTORY=. TAG=latest
  • NOTE: docker must be installed and running
• Verify the new release