README

Markup Toolbar

A library that contains components for a viewer, toolbars, and tools to interact with pages.

Installation

yarn add @procore/labs-markup-toolbars

Requirements

Peer dependencies

core-react >10.6
react >17
react-dom >17
styled-components >5.0
@procore/labs-jsskit >3.0

Translations

Include these translations in your bundle from Procore views.global.* views.generic.document_markup.* views.generic.keyboard_shortcuts.* views.utilities.* core.labs.loadable_content.*

Providers

To use most components within this library, you must wrap this component (root level of your app) in these providers

I18nProvider from @procore/core-react

import { I18nProvider } from '@procore/core-react';

<I18nProvider locale={locale} translations={translations}>
  <App />
</I18nProvider>

Analytics from @procore/core-react

import { Analytics } from '@procore/core-react';
const analytics = new Analytics.Client({
  endpoint: 'https://somewhere.cool',
  headers: { Authorization: 'Bearer 1239120' },
  // bodyParams are included in the body of every request
  bodyParams: {
    companyId: 1,
    properties: {
      attachment_id: 970,
      file_type: "image/jp2",
      item_type: 'SubmittalLog',
      item_id: 8,
      markup_domain: 'submittals',
    },
  },
  // client is optional and conforms to the fetch API (url, options)
  client: (url, options) => {
    console.log('analytics::trackEvent::request', url, options);
  },
});
return (
  <Analytics.Provider analytics={analytics}>
    <App />
  </Analytics.Provider>
);

ThemeProvider from styled-components

import { ThemeProvider } from 'styled-components';
import { createTheme } from '@procore/labs-jsskit';

<ThemeProvider theme={createTheme()}>
  <App/>
</ThemeProvider>

Full Example

import { I18nProvider, Analytics } from '@procore/core-react';
import { ThemeProvider } from 'styled-components';
import { createTheme } from '@procore/labs-jsskit';
import { BaseViewer } from '@procore/labs-markup-toolbars';
const analytics = new Analytics.Client({
  endpoint: 'https://somewhere.cool',
  headers: { Authorization: 'Bearer 1239120' },
  // bodyParams are included in the body of every request
  bodyParams: {
    companyId: 1,
    properties: {
      attachment_id: 970,
      file_type: "image/jp2",
      item_type: 'SubmittalLog',
      item_id: 8,
      markup_domain: 'submittals',
    },
  },
  // client is optional and conforms to the fetch API (url, options)
  client: (url, options) => {
    console.log('analytics::trackEvent::request', url, options);
  }
});

const App = () => (
  <Analytics.Provider analytics={analytics}>
    <ThemeProvider theme={createTheme()}>
      <I18nProvider locale={locale} translations={translations}>
        <BaseViewer/>
      </I18nProvider>
    </ThemeProvider>
  </Analytics.Provider>
);

Usage no npm install needed!