@nearst/ui
UI framework for NearSt dashboard applications.
Last updated 10 days ago by tschoffelen .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @nearst/ui 
SYNC missed versions from official npm registry.

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.

Current Tags

  • 0.9.6                                ...           latest (10 days ago)

34 Versions

  • 0.9.6                                ...           10 days ago
  • 0.9.5                                ...           11 days ago
  • 0.9.4                                ...           24 days ago
  • 0.9.3                                ...           2 months ago
  • 0.9.2                                ...           3 months ago
  • 0.10.0                                ...           6 months ago
  • 0.9.1                                ...           7 months ago
  • 0.9.0                                ...           9 months ago
  • 0.8.1                                ...           9 months ago
  • 0.8.0                                ...           9 months ago
  • 0.7.4                                ...           10 months ago
  • 0.7.3                                ...           10 months ago
  • 0.7.2                                ...           10 months ago
  • 0.7.1                                ...           10 months ago
  • 0.7.0                                ...           10 months ago
  • 0.6.0                                ...           10 months ago
  • 0.5.4                                ...           a year ago
  • 0.5.3                                ...           a year ago
  • 0.5.2                                ...           a year ago
  • 0.5.1                                ...           a year ago
  • 0.5.0                                ...           a year ago
  • 0.4.1                                ...           a year ago
  • 0.4.0                                ...           a year ago
  • 0.3.1                                ...           a year ago
  • 0.3.0                                ...           a year ago
  • 0.2.2                                ...           a year ago
  • 0.2.1                                ...           a year ago
  • 0.2.0                                ...           a year ago
  • 0.1.5                                ...           a year ago
  • 0.1.4                                ...           a year ago
  • 0.1.3                                ...           a year ago
  • 0.1.2                                ...           a year ago
  • 0.1.1                                ...           a year ago
  • 0.1.0                                ...           a year ago
Downloads
Today 0
This Week 0
This Month 41
Last Day 0
Last Week 27
Last Month 5
Dependencies (9)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |