# Unified Viewer Introduction
<procore-status alpha />

Unified Viewer for Procore

## Installation
```shell script
yarn add @procore/labs-unified-viewer
```

### Dependencies
`@procore/core-react` and `react` are listed as external peer dependencies. The package will not bundle the code, and requires the app client to provide it as a `dependency`. The external peer dep is to assure React Context is consistent in a client's React tree, the child consumers can reference the correct parent provider. If the package uses latest features or bug fixes and a new minimum version of core-react is required, it should be considered a breaking change as the peer dependency version must be met.


### Usage
```js
import { UnifiedViewer } from '@procore/labs-unified-viewer'
```

### Translations
Translations are loaded via api through the usage of `@procore/labs-i18n-extensions` by specifying the name of the translation `js` file. i.e `document_viewer`.

To facilitate local development we point the api to load translations from a locally hosted file. This file is auto-generated by the `BuildTranslationsPlugin` using the json translations found in `src/__translations__/`.


## Building Storybook for local development
For local storybook development, environment keys are necessary to successfully build the Unified Viewer stories. This is because this package utilizes the library `@procore/labs-third-party-scripts`.  [Please follow the instructions](https://procore.github.io/core-labs/storybook/@procore/labs-third-party-scripts/index.html?path=/story/introduction-docs--page#local-development) listed on the Third Party Script library to correctly set up your local environment. Instead of creating a `.env` file within the `third-party-scripts` folder, create the `.env` file within the `unified-viewer` folder.

After adding the `.env` file, run the following commands:
```shell script
yarn install
yarn build:deps
yarn storybook
```

And you're all set!