@nearst/ui
UI framework for NearSt dashboard applications.
Last updated 2 days ago by hannah2503 .
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

To view this as a Storybook on your local machine, run yarn start. This enables you to explore the existing components and see your code changes render (or not!) immediately. ????

Development :hammer:

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

Any changes you make will be visible through the Storybook running on your localhost. For more information on developing with Storybook, view the docs here

Deploy to Github Pages :book:

Just run deploy-storybook and it will execute the command storybook-to-ghpages :star:

You can find the deployed site here: https://near-live.github.io/NearData

If you already have a build folder then you might want to run storybook-to-ghpages -e instead but you can find out more in the docs

Guidelines ????

Some general things to consider when creating new components:

  • To create a new component, make a new folder in the "components" folder. Try to name the component as simply and semantically as possible.
  • Use SCSS
  • Try to make the names simple, semantic and scoped to the component (For discussion: follow BEM naming conventions?)
  • For anything that should be applied or accessible to all components, place it in the global.scss

Using components

Make sure you have installed @nearst/ui from our mono repo modules.

yarn add @nearst/ui

You can then start using the NearSt UI module in your app by importing the individual components as demonstrated below.

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

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

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.10.6-beta.3                                ...           beta (6 days ago)
  • 0.10.9                                ...           latest (2 days ago)

57 Versions

  • 0.10.9                                ...           2 days ago
  • 0.10.8                                ...           3 days ago
  • 0.10.6-beta.3                                ...           6 days ago
  • 0.10.6-beta.2                                ...           6 days ago
  • 0.10.6-beta.1                                ...           6 days ago
  • 0.10.6-beta.0                                ...           6 days ago
  • 0.10.5                                ...           14 days ago
  • 0.10.4                                ...           17 days ago
  • 0.10.3                                ...           a month ago
  • 0.10.2-beta.13                                ...           a month ago
  • 0.10.2-beta.12                                ...           a month ago
  • 0.10.2-beta.11                                ...           a month ago
  • 0.10.2-beta.10                                ...           a month ago
  • 0.10.2-beta.8                                ...           a month ago
  • 0.10.2-beta.7                                ...           a month ago
  • 0.10.2-beta.6                                ...           a month ago
  • 0.10.2-beta.5                                ...           a month ago
  • 0.10.2-beta.4                                ...           a month ago
  • 0.10.2-beta.3                                ...           a month ago
  • 0.10.2-beta.2                                ...           a month ago
  • 0.10.2-beta.1                                ...           a month ago
  • 0.10.2-beta.0                                ...           a month ago
  • 0.10.1                                ...           2 months ago
  • 0.9.6                                ...           3 months ago
  • 0.9.5                                ...           3 months ago
  • 0.9.4                                ...           3 months ago
  • 0.9.3                                ...           4 months ago
  • 0.9.2                                ...           5 months ago
  • 0.10.0                                ...           8 months ago
  • 0.9.1                                ...           9 months ago
  • 0.9.0                                ...           a year ago
  • 0.8.1                                ...           a year ago
  • 0.8.0                                ...           a year ago
  • 0.7.4                                ...           a year ago
  • 0.7.3                                ...           a year ago
  • 0.7.2                                ...           a year ago
  • 0.7.1                                ...           a year ago
  • 0.7.0                                ...           a year ago
  • 0.6.0                                ...           a year 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                                ...           2 years ago
  • 0.2.1                                ...           2 years ago
  • 0.2.0                                ...           2 years ago
  • 0.1.5                                ...           2 years ago
  • 0.1.4                                ...           2 years ago
  • 0.1.3                                ...           2 years ago
  • 0.1.2                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
  • 0.1.0                                ...           2 years ago
Downloads
Today 0
This Week 59
This Month 69
Last Day 3
Last Week 64
Last Month 210
Dependencies (7)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |