Exciting news!Announcing our $4.6M Series Seed. Learn more β†’
Socket
LoveBlogFAQ
Install
Log in

@nearst/ui

Package Overview
Dependencies
13
Maintainers
9
Versions
195
Issues
File Explorer

Advanced tools

@nearst/ui

UI framework for NearSt dashboard applications.

    0.10.79latest

Version published
Maintainers
9
Yearly downloads
10,341
decreased by-54.19%

Weekly downloads

Readme

Source

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.

FAQs

What is @nearst&#x2F;ui?

UI framework for NearSt dashboard applications.

Is @nearst&#x2F;ui popular?

The npm package @nearst&#x2F;ui receives a total of 211 weekly downloads. As such, @nearst&#x2F;ui popularity was classified as not popular.

Is @nearst&#x2F;ui well maintained?

We found that @nearst&#x2F;ui demonstrated a healthy version release cadence and project activity. It has 9 open source maintainers collaborating on the project.

Last updated on 16 Jul 2021
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚑️ by Socket Inc