m-dash-ui

Purpose

m-dash-ui is a UI library from Mudano built with React. Its objective is to be an aggregate of beatiful and useful general components to be re-used across teams to build new features. Each component should cover most of the general use-cases and avoid getting into specifics of the features it's being used on.

Documentation

Avatar

A simple user avatar component, with support for showing name initials.

Props

| prop | requiredness | type | description | | --- | --- | --- | --- | | name | required | string | Name of the user | | url | optional | string | Url or base64 for the image | | base64 | optional | boolean | Whether url is base64 or not | | showLabel | optional | boolean | Whether to show a label with the user's name below the avatar | | size | optional | string | Can be either nothing, sm, md or lg. Default size is 42px, sm is 22px, md is 32px and lg is 64px | | renderTooltip | optional | function | A function that returns jsx or a component with the content of a tooltip | | style | optional | object | An object with valid custom css for the avatar | | className | optional | string | A custom class for the avatar wrapper | | onMouseLeave | optional | function | Function to be called when mouse leaves the avatar | onMouseEnter | optional | function | Function to be called when mouse enters the avatar | onClick | optional | function | Function to be called the avatar is clicked

Iso

Isotope grid component

Props

| prop | requiredness | type | description | | --- | --- | --- | --- | | data | required | array | Array of items to be rendered on the grid | | itemToKey | required | function | Function that transforms each item on a key that's passed to react, so the component doesn't need to infer anything about the items structure | | renderItem | optional | function | Recommended way of customizing the items rendering. The function receives the following signature: ({ item, removeItem }) | | comp | optional | function | Unrecommended way of customizing the items rendering. The component receives the item data spread into its props and a removeMe props for removing the item | | vertical | optional | boolean | Transforms the grid view into a vertical list | | filter | optional | string | String following the isotope format for filtering the rendered items | | itemClassName | optional | string | CSS class to be passed to the items wrapper | | className | optional | string | CSS class to be passed to the grid wrapper |