# NearSt UI kit 🎨

**A universal UI framework for NearSt dashboard applications.**

💻 __[NearSt UI Library on Storybook](https://near-live.github.io/NearData)__

## 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](https://storybook.js.org/)

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:

```javascript
// Checkbox.stories.js

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

```
More documentation [here](https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy)


## 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](https://sass-lang.com/documentation)
- Keep our CSS/SCSS modular and organised by using[BEM](https://css-tricks.com/bem-101/)
- For anything that should be applied or accessible to all components, place it in the [global.scss](./src/styles/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](https://near-live.github.io/NearData)

📚Storybook deployer[docs](https://github.com/storybookjs/storybook-deployer)


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.

```jsx
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

```javascript
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

```css
.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.