npm package: @fixt/components
Description: ![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)
Author: Fixt, Inc.
Latest version: 1.1.69

# [Fixt Component Library](https://fixt.github.io/component-library)
![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)
![npm version](https://img.shields.io/npm/v/@fixt/components.svg?style=flat)
[![Codeship Status for fixt/component-library](https://app.codeship.com/projects/c0672770-824b-0136-4c4d-4a0d9bed5c54/status?branch=master)](https://app.codeship.com/projects/301887)


<center>
  <img src="./assets/fixt-react.png" width=300/>
</center>

Welcome to the Fixt Component Library. A shared repository of React components.

# Usage
1. Install
```bash
  npm install @fixt/components
  npm install styled-components --save
```

2. Include these stylesheets in your html file
```html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
```

3. Wrap your root component with the styled-components ThemeProvider

```js
import React from 'react';
import { ThemeProvider } from 'styled-components'
import { themes } from '@fixt/components';

import App from './index'

const Root = () => (
<ThemeProvider theme={themes.standard}>
  <App />
</ThemeProvider>);
```

4. Using the React components
```js
import React from ‘react’;
import { Button } from '@fixt/components';

const BoringButton = () => (
  <Button />
);
```

# Storybook Development

1. Install & Build dependencies
```bash
  npm run build
```

2. Start the Storybook server
  ```bash
    npm run storybook:dev
  ```

3. Runs storybook at [http://localhost:6006](http://localhost:6006)

# Storybook Deployment to Github Pages
```bash
  npm run storybook:deploy
```

# Publish New Versions
```bash
  npm run publish
```
# Updating Versions

## Make version changes to package.json: 
1. Create a branch of component-library. Open the package.json file and locate the package to be modified. Change the version number to the new version number.

```json
  "material-table": {
      "version": "1.64.0", 
```
2. Go to the top of the file and find the version number of the component-library. Bump the version up by 1 point (1.1.8 will be changed to 1.1.9).
```json
    {
  "name": "@fixt/components",
  "version": "1.1.13",
```
3. After modifying the file,  be sure to update the .lock file with
```markdown
yarn install
```
4. Push changes of branch (git add, git commit, git push) and submit a pull request to be merged into master.


## Publish changes to @fixt/components using npm: 
1. If you are not already logged into npm, in the terminal command line
```markdown
    npm login
```
This will bring up a prompt for _Username:_ and  _Password:_

2. Change into the component-library master directory (make sure it is not the branch) and type in the command 
  ```markdown
    npm publish
  ```
3. This should start the process of  publishing the new version. Check at https://www.npmjs.com/settings/fixt/packages to make sure the new version is published.

## Update the version number in HQ:
1. Create a branch of HQ. Go to the client directory and in the package.json file locate @fixt/components. Change the version to match the new published version.
```json
    "@fixt/components": "^1.1.8",
```
2. After modifying the file,  be sure to update the .lock file with
```markdown
    yarn install
```
3. Push the changes and submit a pull request to merge into HQ.