# fortress-automation-ui

> UI components library for Fortress Automation

Latest version **1.0.13** (published 2021-06-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install fortress-automation-ui
pnpm add fortress-automation-ui
yarn add fortress-automation-ui
bun add fortress-automation-ui
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.13 |
| Published | 2021-06-09 |
| First published | 2021-04-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 6.7 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Paweł Fidelus |
| Maintainers | pawelfidelus |

## Links

- npm: https://www.npmjs.com/package/fortress-automation-ui
- Repository: https://github.com/qmasters-ltd/fortress-automation-ui
- Homepage: https://github.com/qmasters-ltd/fortress-automation-ui#readme
- Issues: https://github.com/qmasters-ltd/fortress-automation-ui/issues
- npm.io page: https://npm.io/package/fortress-automation-ui

## Dependencies (9)

- [moment](https://npm.io/package/moment.md) ^2.29.1
- [bootstrap](https://npm.io/package/bootstrap.md) ^4.6.0
- [node-sass](https://npm.io/package/node-sass.md) ^5.0.0
- [reactstrap](https://npm.io/package/reactstrap.md) ^8.9.0
- [react-table](https://npm.io/package/react-table.md) ^7.7.0
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.2.0
- [react-grid-layout](https://npm.io/package/react-grid-layout.md) ^1.2.5
- [bootstrap-daterangepicker](https://npm.io/package/bootstrap-daterangepicker.md) ^3.1.0
- [react-infinite-scroll-component](https://npm.io/package/react-infinite-scroll-component.md) ^6.1.0

## Recent versions

- 1.0.13 (latest) — 2021-06-09
- 1.0.12 — 2021-06-08
- 1.0.11 — 2021-05-26
- 1.0.10 — 2021-05-26
- 1.0.9 — 2021-05-26
- 1.0.8 — 2021-05-25
- 1.0.7 — 2021-05-25
- 1.0.6 — 2021-05-25
- 1.0.5 — 2021-05-25
- 1.0.4 — 2021-05-25
- 1.0.3 — 2021-05-25
- 1.0.2 — 2021-05-25
- 1.0.1 — 2021-05-25
- 1.0.0 — 2021-04-30

## README

<h1 align="center">Fortress Automation UI</h1>
<p align="center">
  <a href="https://www.npmjs.com/package/fortress-automation-ui"><img src="https://flat.badgen.net/npm/dt/fortress-automation-ui" alt="NPM" /></a>
  <a href="https://www.npmjs.com/package/fortress-automation-ui"><img src="https://flat.badgen.net/npm/v/fortress-automation-ui" alt="fortress-automation-ui version" /></a>
</p>

<h3 align="center"> 
<a href="https://fortress-storybook.netlify.app">Components</a> -
  <a href="https://fortress-automation.netlify.app">Demo app</a>
</h3>

<p align="center">Fortress Automation UI components. Built with React and styled-components 💅</p>

![MainView](https://raw.githubusercontent.com/qmasters-ltd/fortress-automation-ui/master/src/images/Readme/mockUp.png?token=AEG4AP2VHQH3GOZN5QEE5MDAW5YGM)

# Getting Started

First, install component library and styled-components in your project directory:

```sh
# yarn
$ yarn add fortress-automation-ui styled-components

# npm
$ npm i fortress-automation-ui styled-components
```

Apply styles, wrap your app with ThemeProvider with theme from package... and you are ready to go! 🚀

```tsx
import React from 'react';
import { createGlobalStyle, ThemeProvider } from 'styled-components';
import theme from 'fortress-automation-ui/lib/themes/theme'
import 'fortress-automation-ui/lib/style/style.scss'
import { Button } from 'fortress-automation-ui'

const GlobalStyle = createGlobalStyle`
  main {
    height: 100%;
  }
  body {
    background: #EFF2F5;
    width: 100%;
    height: 100%;
  }
  div {
    box-sizing: border-box;
  }
  ul {
    list-style: none;
    padding: 0;
  }
  body, h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    font-weight: normal;
    font-family: BarlowRegular,serif;
    color: #212121;
  }
  a {
    font-family: BarlowRegular,serif;
    text-decoration: none;
  }
  button {
    cursor: pointer;
    outline: none;
    border: none;
    background: none;
  }
  input {
    color: #FAFAFA;
    outline: none;
    border: none;
  }
  label {
    margin: 0;
  }
`

const App = () => (
    <div>
        <GlobalStyle />
        <ThemeProvider theme={theme}>
            <Button>Hello, I Am Button</Button>
        </ThemeProvider>
    </div>
);

export default App;
```
# Working with library
Install dependencies:
```sh
$ yarn install
```
Start storybook:
```sh
$ yarn sb
```

## Build library with `rollup`

Files will appear in `lib` directory.

```sh
$ yarn build
```

## Publish library to NPM

Login to NPM:  
```sh
$ npm login
```
Publish:
```sh
$ npm publish
```
Package is available here: https://www.npmjs.com/package/fortress-automation-ui

---
_Source: https://npm.io/package/fortress-automation-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._