# Hiro UI - Bootstrap [![npm (scoped)](https://img.shields.io/npm/v/@hiro-ui/bootstrap.svg)](https://www.npmjs.com/package/@hiro-ui/bootstrap)

This project provides standardised components, themes and rendering for Hiro Apps.
By rendering your React app as a Hiro App; Authentication, ORM, Redux store and Routing are all handled for you.
Additionally, Hiro UI Themes are provided and work in conjunction with the underlying Semantic UI components to provide re-usable React components.

## Usage

First create your React app using the [create-react-app](https://github.com/facebook/create-react-app) tool.

```
yarn create react-app my-app --typescript
```

Follow the given instructions.

Then import components as normal and use:

```jsx
import { Container, Menu, MenuItem, Segment } from '@hiro-ui/bootstrap';
import HiroLogo from './hiro-logo.svg';

const MyApp = () => (
  <Container>
    <GlobalStyle />
    <Menu bordered>
      <MenuItem border="right">
        <img src={HiroLogo} width={35} height={35} alt="HIRO Login" />
      </MenuItem>
      <MenuItem>Welcome</MenuItem>
    </Menu>
    <p>Hello world!</p>
  </Container>
);
```

<Preview>
  <Container>
    <GlobalStyle />
    <Menu bordered>
      <MenuItem border="right">
        <img src={HiroLogo} width={35} height={35} alt="HIRO Login" />
      </MenuItem>
      <MenuItem>Welcome</MenuItem>
    </Menu>
    <p>Hello world!</p>
  </Container>
</Preview>

See the docs for examples of components and their props: https://arago.github.io/hiro-ui/

## Linting

Install the linting config:

```
yarn add -D @hiro-ui/eslint-config
```

Update eslint config in `package.json`:

```json
"eslintConfig": {
    "extends": "@hiro-ui"
},
```

## Prettier

Install the prettier config:

```
yarn add --dev @hiro-ui/prettier-config
```

Add prettier to`package.json`:

```json
"prettier": "@hiro-ui/prettier-config"
```

## Storybook

Run the storybook locally:

```
yarn storybook
```
Storybook exists remotely on [arago.github.io](https://arago.github.io/hiro-ui/storybook/).
Once you update any story, you will need to publish it there.

The main idea is that you need to generate files in `docs` folder of bootstrap on `master` branch,
copy it somewhere, checkout to `gh-pages` branch, replace all the files
in `storybook-files` folder with the generated ones and push updated `gh-pages`.

#### Steps to publish storybook over terminal:

- `git checkout master && git pull`
- `cd packages/bootstrap/`

Generate files and folders inside of `docs` folder that will be used in the future:

- `yarn docs`

Create a folder located over `hiro-ui`:

- `cd ../../ && mkdir ../docs`

Copy all the generated files into created on the previous step folder:

- `cp -r docs/* ../docs`
- `rm -r docs/*`

Pull `gh-pages` branch:

- `git checkout gh-pages && git pull`

Remove existing files:

- `rm -r storybook-files/*`

Populate `storybook-files` with new files:

- `cp -r ../docs/* ./storybook-files`
- `git add . &&
   git commit -m "Your commit" &&
   git push origin gh-pages`
- `rm -rf ../docs`
