@nearst/ui

NearSt UI kit 🎨

A universal UI framework for NearSt dashboard applications.

💻 NearSt UI Library on Storybook

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 🔨

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

Complete components need to be imported into the src/index.js (via their own component level index.js) and exported for bundling.

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

It is possible to group related components in an expandable interface in order to help with Storybook organization. To do so, use the / as a separator:

// Checkbox.stories.js

export default {
  title: 'Design System/Atoms/Checkbox'
}

More documentation here

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.
• Make sure you have an index.js in your component folder - this will be the point of entry for exporing the component(s) into the final npm module.
• Use SCSS
• Keep our CSS/SCSS modular and organised by usingBEM
• For anything that should be applied or accessible to all components, place it in the global.scss

Deploy Storybook to GitHub Pages 📖

CircleCI will automatically deploy Storybook to GitHub Pages when you merge your changes into master.

To do this manually run yarn deploy-storybook

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

📚Storybook deployerdocs

Run npm publish to publish to npm.

💡 Make sure your UI Lib has an updated package.json version number which has been merged into Master alongside running this command.

Publish the UI Library to NPM

Publish with Beta Tags

If you want to test your branch code with a front-end property, publish the UI Library with a beta tag and make sure the version follows this format: "version": "0.10.10-beta.0"

To publish a beta version of the UI Library run npm publish --tag beta

Publish Final Version

When you are happy with your code and the PR has been approved.

• Check you have updated your UI Lib package json with an increased version number ( following this format: "version": "0.10.10" ) and that this is part of your merge into Master.
• Run npm publish to publish your branch to NPM.

Importing 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 { Block, Drawer } from '@nearst/ui'

const app = () => (
    <Block title={'A title for this block of info'}>
        <Drawer title='Test app'>
            <DrawerLink to='/' title='Dashboard' />
        </Drawer>
    </Block>
)

You will also need to import the UI Library CSS by adding the following to your top level file - usually the index.js or App.js

import '@nearst/ui/dist/ui.css';

Using Colours

You can access the colours from the UI library in your CSS files by using the following syntax

.kanban-text {
    color: var(--dark-blue);
}

You just need to check the variable names in story book and add "--" beforhand. var(--color-name). Simples!

Component Docs

Please see the Notes section of each component in Storybook for further information on implementation.