# SDK for React Web Applications

Software Development Kit / API for developing React Web applications. Implements cross cutting concerns as reusable APIs

Build: [![Build Status](https://jenkinsbuild.elliemae.cloud/job/UIPlatform/job/app-sdk/job/master/)](https://jenkins.dco.elmae/job/UIPlatform/job/Dev/job/AppSDK/job/build/job/master/) Deploy: [![Build Status](https://jenkins.dco.elmae/buildStatus/icon?job=UIPlatform/Dev/AppSDK/deploy)](https://jenkins.dco.elmae/job/UIPlatform/Dev/AppSDK/deploy) Test: [![Build Status](https://jenkins.dco.elmae/buildStatus/icon?job=UIPlatform/QA/AppSDK/test)](https://jenkins.dco.elmae/job/UIPlatform/QA/AppSDK/test) SecScan: [![Build Status](https://jenkins.dco.elmae/buildStatus/icon?job=UIPlatform/Dev/AppSDK/secscan)](https://jenkins.dco.elmae/job/UIPlatform/job/Dev/job/AppSDK/job/secscan/)

[SonarQube Report](https://sonar.ellielabs.com/overview?id=elliemae.pui.app.sdk-master)

[API Documentation](http://git.elliemae.io/pages/platform-ui/pui-app-sdk)

[QA Environment](https://appsdk.pui.mortgagetech.d1.ice.com/)

## Major Version Changelog

### v3 to v4

[ChangeLog](https://confluence.elliemae.io/display/FEAE/App+SDK+ChangeLog#AppSDKChangeLog-v4)

### v2 to v3

[ChangeLog](https://confluence.elliemae.io/display/FEAE/App+SDK+ChangeLog)

### v1 to v2

Following are the major breaking changes in v2

- App React Dependencies upgraded to v2
- React hook form has been upgraded from v6 to v7. If you are using forms, fields or control components from App SDK please regress the functionalities in your application after the upgrade. In case, if you are using watch, trigger, reset, setError, touched api of react-hook-form, in your app, there are breaking changes. Please read the guide [here](https://react-hook-form.com/migrate-v6-to-v7/)

- Fully supports Typescript
- Removal of following unused apis

  - loginService

- Addition of following new apis
  - useAppDispatch
  - useAppSelector

## Local Development Setup

- `npm run setup`
- `npm run storybook`

## FAQ

- What is the difference between the Form Controls in App SDK vs Dimsum ?

  App SDK uses Dimsum form controls and provided additional functionalities such as state management for individual fields and for the entire Form. Also it provides a framework to do field level & form level validation.

  App SDK uses [React Hook Form](https://react-hook-form.com/) open source library to achieve the above functionalities.

- How do i use App SDK Form control and Form components ?

  Please see [code examples](https://qa.appsdk.rd.elliemae.io/?path=/story/components-form--watch-form-controls)

- How do i do field validation during field blur event ?

  Please see [code samples](https://qa.appsdk.rd.elliemae.io/?path=/story/components-form--form-validation-on-blur)

- How do i do field validation during form submit ?

  Please see [code samples](https://qa.appsdk.rd.elliemae.io/?path=/story/components-form--form-validation-on-submit)

- How do i refresh API auth tokens when my session expires ?

  Subscribe to the Authorization failure callback and implement logic to refresh your API Auth token. Pass the authorization header back to sdk. SDK will resubmit the failed request with new token.

  Sample code snippet

  ```javascript
  import { onAuthorizationFailure } from '@elliemae/pui-app-sdk';
  const refreshToken = () =>
    new Promise((resolve) => {
      //get your new token
      const authorizationHeader = 'xyz'; //store new header value;
      sessionStorage.setItem('Authorization', authorizationHeader);
      resolve(authorizationHeader);
    });
  onAuthorizationFailure(refreshToken);
  ```
