<div style="text-align: center">
	<img src=".github/pinpoint.png" />
</div>

# UI Components

> Component library and house styles

## Getting Started

_Note: this module is not yet published_

1. Install via npm:

```bash
npm install --save @pinpt/ui-components
```

2. Import `global.less` into less style sheets to use house styles:

```less
@import (reference) '@pinpt/ui-components/global.less';
```

Note: you may need to update the host project build configuration.

3. [Icon fonts](/webfonts) must be served from `/webfonts`. Clone the project and copy them to `project_root/public/webfont`.

## Usage

```js
import React from 'react';

import { Container, Semantic } from '@pinpt/ui-components';

const { Icon: SemanticIcon } = Semantic;

class Example extends React.Component {
    render () {
        return (
            <>
                <Container>
                    <SemanticIcon className="user-icon user" />
                </Container>
            </>
        );
    }
}
```

```less
@import (reference) '@pinpt/ui-components/global.less';

.user-icon {
    color: @primary;
}
```

### Semantic UI

Semantic UI components are limited to those used in this library (see [semantic.json](/semantic.json)). To use a component not currently used, you must update the Semantic UI configuration and re-build both the Semantic UI CSS and this library.

### Icon Fonts

To use icon fonts, inherit the relevant style class:

```js
import React from 'react';

import { Semantic } from '@pinpt/ui-components';

const { Icon: SemanticIcon } = Semantic;

class Example extends React.Component {
    render () {
        return (
            <>
                <SemanticIcon className="solid-icon lock" />
            </>
        );
    }
}
```

```less
@import (reference) '@pinpt/ui-components/global.less';

.solid-icon {
    .fas();
    color: @primary;
}
```

## Development

This project was created using [https://github.com/transitive-bullshit/create-react-library](create-react-library) and is packaged using [https://rollupjs.org](rollup.js).

For local development, link the module:

```bash
[sudo] npm link
cd path/to/app/project
npm link @pinpt/ui-components
```

Start watching for changes:

```bash
npm run watch
```

Any changes made will automatically build and link the module.

Alternatively you can build the module using:

```bash
npm run build
```

### House Styles

Global brand styles are defined in [theme.less](theme.less). On change, Semantic UI CSS must be generated and the module rebuilt.

### Storybook

This project uses [https://storybook.js.org](Storybook) for testing components in isolation. All components should include a `stories.js` file containing stories to run. To run Storybook book:

```bash
npm run storybook
```

### Semantic UI

Semantic UI provides the underlying set of components. Sepcifically, [Semantic-UI-React](https://github.com/Semantic-Org/Semantic-UI-React) provides the implementation and [Semantic-UI](https://github.com/semantic-org/semantic-ui/) provides the themed styling. Included component styles are listed in [semantic.json](/semantic.json), to use and expose any additional component it must be added here.

The themed CSS file (`semantic/semantic[.min].css`) can be generated using:

```bash
npm run build:semantic
```

## License

All of this code is proprietary and Copyright © 2017-2019 by Pinpoint Software, Inc.