@procore/documents-shared-components

Documents Shared Components Introduction

The Collaborative Documents Shared Components Library

Installation

yarn add @procore/documents-shared-components

Dependencies

react, styled-components, and @procore/core-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 { MetadataPanel } from '@procore/documents-shared-components';

const App = () => {
  return (
    <MetadataPanel
      companyId="111"
      projectId="8"
      documentId="9zdsl3m19sk3eio8uzh"
      hostUrl="https://app.procore.com"
      locale="en"
    >
      <MetadataPanel.Header onClose={() => {}} />
      <MetadataPanel.Content enableEdit={true} />
    </MetadataPanel>
  );
};

Note: <MetadataPanel/> must wrap its subcomponents in order to work properly.

Translations

The translations are currently hosted on the monolith under views.project.cdm_shared_components. In order to successfully load the translations, consumers must add the translation file to their app's hosted translations js file. This will be i18n-js.yml on the procore/procore monolith.

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

yarn install
yarn build:deps
yarn storybook

And you're all set!