Fortress Automation UI

Components - Demo app

Fortress Automation UI components. Built with React and styled-components 💅

Getting Started

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

# 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! 🚀

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:

$ yarn install

Start storybook:

$ yarn sb

Build library with rollup

Files will appear in lib directory.

$ yarn build

Publish library to NPM

Login to NPM:

$ npm login

Publish:

$ npm publish

Package is available here: https://www.npmjs.com/package/fortress-automation-ui