Netherworld's Pretend Minibar

    @prague-digi/ui-components

    7.12.3 • Public • Published

    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

    Keywords

    none

    Install

    npm i @prague-digi/ui-components

    DownloadsWeekly Downloads

    567

    Version

    7.12.3

    License

    UNLICENSED

    Unpacked Size

    930 kB

    Total Files

    794

    Last publish

    Collaborators

    • machy
    • roman.hala
    • kakin
    • josefzamrzla