@financial-times/biz-ops-view

@financial-times/biz-ops-view

Components for displaying data retrieved from the Biz Ops graph.

Requirements

• node 18+
• npm 8+

Installation

npm i @financial-times/biz-ops-view

API

Styles

Using a build that is able to extract CSS files required by JS files require('@financial-times/biz-ops-view/main.css') in your main browser JS file.

typeComponents

An object containing a range of components for rendering a wide variety of Biz Ops types

labels

Object containing the following components and functions: (To be documented)

• Label,
• getSmartLabel,
• getBooleanLabel,
• IsActiveLabel,

componentAssigner(propDef)

Given a Biz Ops Schema property definition, returns the most appropriate choice of component to display a value contained in that property.

// TODO should be possible to pass in type + propName tuples as input

BizOpsLink

React component that displays a link to a Biz Ops record

Props

• id - optional id attribute for the link
• type - type of the record to link to
• value - a value, containing at least a code for the record, and ideally a name too retrieved from Biz Ops
• baseUrl [default: ''] - optional base url for the link

BizOpsDataListRow

React component that displays a value from Biz Ops using the appropriate choice of component for the data type and a label to the left of it, marked up as follows:

<dt>Label</dt>
<dd>value</dd>

Suitable for placing in a <dl class="biz-ops-data-list">

Props

Note that these can typically be provided as follows:

<BizOpsDataListRow value={value} {...propDef} id={propDef.name} />

Where propDef is the property definition from Biz Ops schema

• id - optional id attribute for the component used to display the value
• value - a value stored in a Biz Ops property
• type, showInactive, description, label - All taken from the Biz Ops schema property definition

BizOpsComponent

React component that displays a value from Biz Ops using the appropriate choice of component for the data type

Props

Same as BizOpsDataListRow