ReadMe UI
===

<p>
  <a class="cicd-badge" href="https://github.com/readmeio/ui/actions">
    <img align=right src="https://github.com/readmeio/ui/workflows/CI/CD/badge.svg" alt="Owlblocks!">
  </a>
  <a href="https://readmeio.github.io/ui/#!/">
    UI component library and design system for ReadMe's front end.
  </a>
</p>

```bash
npm install -S @readme/ui
```

## Workflow <img width="25%" align="right" src="https://owlbert.io/images/owlberts-png/Blocks.psd.png">

Run these commands to develop and document UI components locally:

```bash
npm start     # start the local Styleguidist dev server
npm test      # run tests against the UI library
npm run watch # watch and rebuild, for local linked dev
```

### Creating New Components

Use the `elem` command to quickly scaffold out a new component or composition:

```bash
npm run elem -- MyUIElement "composition" # or "component" by default
```

This generates the JSX file, stylesheet, tests, and markdown docs for your new element all in one go.

## Architecture

```bash
src/
│ ui/             # UI component library:
│ ├ components/   # - lower-level UI building blocks
│ └ compositions/ # - higher-order UI constructs
└ styles/         # SCSS vars, mixins; CSS resets; etc.
```

### Under the Hood

This repository brings together a number of utilities and tools for various front end development workflows:

| Dependencies                                                                      |                                        |
|:----------------------------------------------------------------------------------|:---------------------------------------|
| _React & Sass_                                                                    | for components and styling             |
| _[Styleguidist](https://github.com/readmeio/ui/tree/master/styleguide.config.js)_ | to power our living documentation      |
| _Babel & Webpack/[NWB](https://github.com/insin/nwb)_                             | for transpiling and compilation        |
| _Lodash_                                                                          | for various Javascript utility methods |