# A custom built UI Library for Submittable.

<img src="https://codebuild.us-east-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoib0Q1VDBEYXBkeFVrNE9hL2IrZGQxZjJrd3VUUmV3ZFJqMjJ1enZsL2tSUkZiekE0S1F6Q1d2VHRKdm0zQmxSVWNvNkVCRU1pTGxQbzZ6MzV0c3gzblI4PSIsIml2UGFyYW1ldGVyU3BlYyI6InNmVnY4N0hFeERDU0M5N0wiLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=master"/>

[View Components Here](https://submittable.github.io/ui-components/)

## Getting Started

To get started, pull down the repository and install dependencies

```bash
$ git clone git@github.com:submittable/ui-components.git
$ cd ui-components
$ yarn
```

## Development and Storybook

Docs are built using Storybook. To run the local server, simply run:

```bash
$ yarn
$ yarn sb
```

Navigate to [http://localhost:9001](http://localhost:9001) to view your stories. They should automatically update as you develop.

Storybook will pick up any story from the `stories.js` file in a component folder.

## Deploy Storybook docs

After you have an approved component you can rebuild the docs and push the updated version to GitHub.

```bash
$ yarn sb:build
```

To veiw your build docs:

```bash
$ npx serve docs/
```
## Publish a release

If you are an admin in the repository you can release a new version of the library.

To do so simply run:

```bash
$ yarn release
```

## Test UI components locally

To use the local node package as a project dependency, `yalc` acts as a local repository for locally developed packages you can share with your local dev environment. Running `yalc publish` in a package directory grabs files that should be published and puts them in a global store.

To install yalc:

```bash
$ yarn global add yalc
```

In your ui-components branch:

```bash
$ yalc publish
```

After committing changes on ui-components branch:

```bash
$ yarn build
$ yalc push
```

The first time you use yalc, in the manager-frontend root directory:

```bash
$ yalc add sbm-ui-components
```

In manager-frontend/src after making changes in ui-components:

```bash
$ yarn
```

More on using local Node packages as project dependencies: https://www.viget.com/articles/how-to-use-local-unpublished-node-packages-as-project-dependencies/