@financial-times/biz-ops-view NPM

@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