ui

Collection of presentational vdux components inspired by React's rebass.

Installation

$ npm install vdux-ui

Philosophy

All of the components in vdux-ui are statelish* and largely logicless. They are pure functions of their arguments (and your contextual theme). This makes them easy to test and easy to think about.

**They do depend on css-emulator, which adds local state for simulating hover, active, and focus states. However, they are otherwise stateless.

UI Components

• Avatar - Circular (by default) component for rendering a user's avatar
• Block - Box with some default padding/margin and optional borders
• Button - Just a button
• Card - Block with shadow and some extra styling.
• Divider - Dividers for menus
• DecoLine - Semi-transparent decorative line to put on top of visually rich backgrounds (similar to divider, but looks nicer on top of photos).
• Dropdown - Relatively positioned dropdown container.
• DropdownMenu - Dropdown menu component
• Fixed - Fixed position container.
• Grid - Grid, useful for pinterest-style tile feeds, etc.
• Icon - Font-based icon component
• IconButton - Button with an image/icon in it (useful for OAuth style buttons).
• Menu - Horizontal/vertical menus with spacing of menu items
• MenuItem - Menu items for use inside of Menu
• Text - Render text according to your theme and some convenience options
• Tooltip - Stateless tooltip component
• Base - The base component out of which all other vdux-ui components are made. Use this to create your own reusable components.

Layout

• Flex - A flexbox container component. Use it for rendering rows/columns.
• Box - Goes inside your flexbox container.

Theming

vdux-ui uses the uiTheme key in context to find its theme. It will look for theme properties here first, and secondly in its default theme. So you can do:

import myTheme from './my-theme'

render(<App state={state} />, {uiTheme: myTheme})

To override any of the default theming options or add your own.

Common options

The following are options provided by the <Base /> component and as such are available when using any vdux-ui component:

Rounding

You may pass:

• circle=true as a prop and you'll get a circular element (i.e. borderRadius=99999px)
• pill=true is an alias for circle
• rounded=true sets borderRadius to borderRadius from your theme

Padding/margin

Padding and margin are specified by indexing into the scale array of your theme. Each padding/margin property accepts an index into that array, like this:

<Base px={1} /> -> <div style='padding-left: 4px; padding-right: 4px'></div>

You may specify p or m for each of these, but for simplicity i'll just write it out for padding:

• p - Pad all sides
• px - Pad the x-axis (i.e. left/right)
• py - Pad the y-axis (i.e. top/bottom)
• pt - Pad the top
• pl - Pad the left side
• pr - Pad the right side
• pb - Pad the bottom

Colors

You can also specify colors in your theme, and then reference those colors by name in the color and bgColor props. E.g.

import Base from 'vdux-base'

function render ({props}) {
  return <Base color='red'>{props.errorMessage}</Base>
}

And then in the root of your file:

const {render} = vdux()

render(<App/>, {uiTheme: {colors: myColors}})

But you may also pass any valid color string and it will be passed on through if there is no corresponding key in the theme's color map.

Positioning

Positioning attributes, inspired by nib's position mixin allow you an expressive shorthand for specifying different types of positioning.

• absolute - Boolean|String|Object
• fixed - Boolean|String|Object
• relative - Boolean|String|Object

Each take a string of the form top|bottom [n] left|right [n]. For example:

import {Text} from 'vdux-ui'

function render () {
  return (
    <Text absolute='bottom left'>Invalid username</Text>
  )
}

You may also specify them as boolean attributes to solely set the position property. E.g.

<Text relative>Invalid username</Text>

Lastly, you can use object syntax if you want as well:

<Text relative={{right: '5px'}}>Invalid username</Text>

Miscellaneous

• wide - Sets width: 100%
• tall - Sets height: 100%
• fs - Font size. Sets the font-size css property.
• ellipsis - Boolean. Sets text-overflow: ellipsis.
• clear - Boolean|String. If true sets clear: both. Otherwise sets the clear attribute to the value passed.
• cursor - String. Set cursor.
• pointer - Boolean - shorthand for cursor='pointer'.
• transition - String. Set transition style.

But you may also pass any valid color string and it will be passed on through if there is no corresponding key in the theme's color map.

License

MIT