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 - 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:
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.
Hamburger
Hamburger icon, used in Drawer
component.
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
Tabs
Tab
Checkbox