Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More β†’
Socket
Sign inDemoInstall
Socket

@nearst/ui

Package Overview
Dependencies
Maintainers
9
Versions
195
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@nearst/ui

UI framework for NearSt dashboard applications.

  • 0.10.56
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
81
decreased by-76.66%
Maintainers
9
Weekly downloads
Β 
Created
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

Package last updated on 04 Nov 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚑️ by Socket Inc