Unified Viewer Introduction
Unified Viewer for Procore
Installation
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
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 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:
yarn install
yarn build:deps
yarn storybook
And you're all set!