npm package: @hiro-ui/bootstrap
Description: Hiro UI - Bootstrap
Latest version: 8.3.12

# 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.

## Publish

```
yarn lerna publish
```

## 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/

## [ESLint Configuration](https://github.com/arago/hiro-ui-conf/edit/master/packages/eslint-config)

### Usage

First, install this package, ESLint and the necessary plugins.

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

Then create a file named `.eslintrc.json` with following contents in the root folder of your project:

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

## [Prettier Configuration](packages/prettier-config)

### Usage

**Install**:

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

**Edit `package.json`**:

```jsonc
{
  // ...
  "prettier": "@hiro-ui/prettier-config"
}
```

## [Husky Configuration](packages/husky-config)

### Usage

**Install**:

```bash
yarn add --dev husky @hiro-ui/husky-config
```

**Create `.huskyrc.js`**:

```js
module.exports = require('@hiro-ui/husky-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 ./storybook-files && git commit -m "Your commit" && git push origin gh-pages`
- `rm -rf ../docs`