
# 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`:
```javascript
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](https://jenkins.eng.qops.net/job/appsdk/job/packages/job/qualtrics-plugin-ui-react-job/) or #app-sdk-deploys Slack channel for deployment results

### Deploying Non-Alpha Versions with Jenkins
1. Create a PC ticket 
   1. Go to this [Jenkins job](https://jenkins.eng.qops.net/job/appsdk/job/packages/job/qualtrics-plugin-ui-react-job/)
   2. Set `JOB_PARAMETER_PROJECT` to `plugin-ui-react`
   3. Set `JOB_PARAMETER_RELEASE_STEP` to `pc tickets`
   4. Start the job
2. Post the PC ticket in the slack channel #app-sdk-internal for approval
3. Once approved, publish the target project through Jenkins
   1. Go to this [Jenkins job](https://jenkins.eng.qops.net/job/appsdk/job/packages/job/qualtrics-plugin-ui-react-job/)
   2. Set `JOB_PARAMETER_PROJECT` to `plugin-ui-react`
   3. Set `JOB_PARAMETER_RELEASE_STEP` to `publish`
   4. Start the job
4. Verify the new release

### Deploying Non-Alpha Versions Manually
The projects in this repo can also be published manually. 

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