ui-components

UI components used in development of MONETA's web applications. See the project vision in the ROADMAP.md file and a more detailed description on Confluence.

Click here to see the components!

Useful commands

Install dependencies: yarn

Start the development environment: yarn start

Generate a new component: yarn run generate

Specific features of the library

Message prop

Because we use react-intl in all of our projects, you can pass a message descriptor to any component for convenience as the message (or messages) prop.

Usage example

const message = {
  id: 'react.intl.example.id',
  defaultMessage: 'Hi!'
}

<BButton message={message}>

// alternatively, you may pass a string!
// this is convenient for debugging

<BButton message="Hi!">

// if you can pass more messages to the component,
// use the plural version

<BSelect messages={{ error: message, label: message }}>

Theme prop

Because ui-components are supposed to be used primarily with CSS modules, all components feature the theme prop. The theme prop allows you to pass a prioritised CSS module (or an array of CSS modules) or a string, which will be used in addition to all other class names.

A CSS Module is an object, where the keys specify the source class and the values the hashed/minified class.

Usage example

/* styles.css file in a React app */

.btn {
  composes: btn from '<business>';
  color: salmon;
}

// part of a component file in a React app

import styles from './styles.css'

// ...

<BButton theme={styles} />

// `btn` would otherwise be applied from `ui-styles`
// instead, it is applied from the theme.

// this is how the `styles` import looks:

// { btn: 'styles__btn___3idho' }

You can also create your own CSS modules of sorts! This is useful if you want to use predefined global class names throughout your application.

const styles = {
  btn: 'button',
  'btn-primary': 'button-primary',
  // ...
}

export default styles

And in your application root:

import React from 'react'
import { BButton, injectTheme, ThemeProvider } from '@prague-digi/ui-components'
import styles from './styles'

const Button = injectTheme(BButton)

// ...

<ThemeProvider theme={styles}>
  <Button message="I look pretty!" />
</ThemeProvider>

You can even pass the theme prop to the Button itself! Everything will work just fine. The priority is right-to-left, meaning that if you choose to pass an array of CSS modules, the rightmost one will have priority.

This is the priority list for almost all use cases (from highest to lowest priority). Remember that the resolution is not chained! Once the class name is found in a CSS module, the search STOPS.

1. theme prop
2. context theme from <ThemeProvider />
3. @prague-digi/ui-styles or a styles.css file
4. the string is used as-is