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

#### UI-Components is a set of commonly used React elements
</div>

## Setup

- `git clone` this repo in a directory as a sibling to any web projects
- `cd` in to project and run `npm install && npm link`
- `cd` into your web project and run `npm link ui-components`

#### Alternate to `npm link`

If `npm link` doesn't work, use the normal sym link command:

`cd` in to `node_modules` and run 
`ln -s ../../ui-components ui-components` where `../../ui-components` is the relative path to the UI-Components repository.

#### Non-sibling Installation

If you do not clone this repo into a location that is a sibling of your web projects, you'll need to ensure the web project's Babel can find the component. Edit the `config/paths.js` file to update the location.

## Usage

### Basic

```jsx
import { MyComponentName } from 'ui-components';

<MyComponentName data={...} />
```

Each component has it's own corresponding README.

### Semantic UI

This component library wraps the [React Semantic UI](https://react.semantic-ui.com) library. Rather than doing this:

```javascript
import { Button } from 'semantic-ui-react'
```

Do this:

```javascript
import { Semantic } from 'ui-components';
const { SemanticButton } = Semantic;
```

## Styles & Theming

### Variables

Global variables for styling in LESS can be found in `/styling/theme/globals/site.variables`. This file includes color and font definitions, as well as other less important variables such as spacing.

### Overrides

A few default Semantic UI styles are overridden; these can be found in the `/styling/theme/*/*.overrides` files.

### Icon Library Override

Because Semantic UI uses an out-of-date version of FontAwesome (and doesn't include the Pro version), we add overrides to `/styling/theme/elements/icon.overrides`. This file is generated by a script available [here](https://github.com/fomantic/icon-script).

## Storybook View

To see all of the components in action, run `npm run storybook` and visit `http://localhost:9001/`.

### Knobs

A `KNOBS` tab is available alongside the `README` tab, which allows you to toggle various component settings to preview each possible configuration.

More information is available on the [Storybook Knobs](https://github.com/storybooks/storybook/tree/master/addons/knobs) repository.

## Developing components

### Create a New Component

To create a new component, copy and rename the `template` component.

## Testing

```shell
npm run test
```

## License

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