@nearst/ui

NearSt UI kit

A universal UI framework for NearSt dashboard applications.

Getting started

This UI framework is meant to be used in a React application. The easiest way to set up such an application is to use create-react-app. After creating a new project, add the @nearst/ui and the styled-components dependency:

npm i @nearst/ui styled-components

You can then start using the NearSt UI components in your app:

import { Root, Drawer } from '@nearst/ui'

const app = () => (
    <Root>
        <Drawer title='Test app'>
            <DrawerLink to='/' title='Dashboard' />
        </Drawer>
    </Root>
)

Development

All files in src/lib/ will be part of the NPM package.

The file src/index.js is used as a living example of the components. You can view it by running:

npm start

Guidelines

Some general things to consider when creating new components:

• Components should not have style props. When you need custom styles, you should either take care of this by generalizing those styles and adding them as prop options (i.e. a Button with a color prop), or simply wrap them into a <div> in your client application where you can style children of that div by class name.
• Every component should have propTypes, and where applicable sensible defaultProps values.
• Try to be consistent with prop name usage. I.e. we use title as the name of the prop for a header-type value, so don't suddenly start using a name prop for that same purpose.

Components

Root

Base application wrapper.

Container

Wrapper for content.

Drawer

Responsive menu bar.

Props:

• string title - title to display above the menu items
• string color - background color of drawer (optional)
• node children - a collection of Drawerlink elements

DrawerLink

Menu item for inside Drawer.

Depending on the props passed to this component, the resulting component that is rendered becomes a style <NavLink>, <a> or <div>.

Props:

• string title - Link title (required)
• string to - React router to prop
• string href - HTML link href
• function onClick - Onclick handler
• bool exact - React router exact prop
• bool hidden - Whether to hide the menu itme
• bool disable - Whether to disable the menu item

Block

Responsive page content container.

Props:

• string title - Page title
• string description - Page subtitle
• string className - Custom content classname
• bool loading - Whether to show loading indicator
• function before - Content to show above/before page title
• node children - Page content
• bool wide - Whether the block should take the full available width of the page (defaults to false)

Button

Generic button, works with react-router by specifying a to prop, or a normal <a> by specifying a href or onClick.

Props:

• string to: react-router target
• string href: a tag target

Style modifier props:

• bool primary
• bool secondary
• bool success
• bool link

Size modifier props:

• bool small
• bool mini

Card

Page section, often used to group input fields.

Props:

• string title - Page title
• string description - Page subtitle
• node children - Page content

Loader

Animated loading indicator.

Logo

SVG version of the NearSt Logo.

Props:

• string color - Color (optional)

Icon

Google Material Icons helper.

Props:

• string children - Icon name (required)
• string color - Icon color, defaults to text color of parent
• string className - Extra class name to append
• object style - Custom CSS
• func onClick - Custom onclick handler

Table

We have a bespoke table component which takes the following props:

• loading boolean
• selectable boolean
• fields array
• data array
• onRowSelect func
• perPage number
• defaultSort number
• defaultSortAsc boolean
• update boolean
• setUpdate func

For a quick altenative we have started using Material UI tables in HQ (Dec 2019) which we recommend we use going forwards.

Tabs

Props:

• children array of Tab props only
• reverse boolean

Tab

Props:

• path string
• title string
• passProps object
• component object/func,
• children any

Checkbox

Takes props:

• selected boolean
• onClick func

Material UI Theme

We have a basic theme for easy use in future front end development. We already use Material UI icons and tables and provided we have the correct fonts and primary/secondary colours, we can quickly spin up new front end features by using this library as appropriate.