npm package: @sul/cli
Description: A simple tool to help generate standardized components.
Author: Stiff Upper Lip | Andrew Smith
Latest version: 1.0.0

# SUL CLI
A simple tool to help generate standard SUL components.

[![CircleCI](https://circleci.com/gh/sul-lab/sul-cli.svg?style=shield&circle-token=7f451981c9bd2f258fb721d5e99a74545f191f06)](https://circleci.com/gh/sul-lab/sul-cli)
[![Maintainability](https://api.codeclimate.com/v1/badges/7ef94c4b2dd80efb9c58/maintainability)](https://codeclimate.com/repos/5bbde7dd5d0e0127090020e7/maintainability)
![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg?style=shield)

## Install:
```sh
$ npm install -g @sul/cli
```

## New Component
A utility to generate a React component.

```sh
$ sul nc <Component Name>
```

The following directory structure will be created:

```
Component/
  - Component.jsx
  - Component.test.jsx
  - index.js
```

#### Functional Component:
By default `nc` will generate a stateless functional component.

```sh
$ sul nc Header
```

```javascript
import React from 'react';
import PropTypes from 'prop-types';

const displayName = 'Header';

const propTypes = {
  children: PropTypes.node,
};

const defaultProps = {};

const Header = props => {
  return <div>{props.children}</div>;
};

Header.displayName = displayName;
Header.propTypes = propTypes;
Header.defaultProps = defaultProps;

export default Header;
```

#### Class Component:
If your component requires lifecycle methods or internal state, you can use the `--class` option to generate a class component:

```sh
$ sul nc Header -c
```

```
Header/
  - Header.jsx
  - Header.test.jsx
  - index.js
```

```javascript
import React from 'react';
import PropTypes from 'prop-types';

const displayName = 'Header';

const propTypes = {
  children: PropTypes.node,
};

const defaultProps = {};

class Header extends React.PureComponent {
  render() {
    return <div>{props.children}</div>;
  }
};

Header.displayName = displayName;
Header.propTypes = propTypes;
Header.defaultProps = defaultProps;

export default Header;
```

#### Styles:
SUL uses styled-components to handle styles. Use the `--style` option to generate a `.style.js` file and integrate styled-component syntax directly into your component.

```sh
$ sul nc Header -s
```

```sh
Component/
  - Header.jsx
  - Header.style.js
  - Header.test.jsx
  - index.js
```

`Header.jsx`

```javascript
...

import * as S from './Header.style.js';

...

const Header = props => {
  return <S.Header>{props.children}</S.Header>;
};
...
```

`Header.style.js`
```javascript
import styled from 'styled-components';

export const Header = styled.div``;
```
## Running Tests
SUL CLI comes bundled with a suite of unit tests.

To run tests:
```sh
$ npm run test
```
## Roadmap
If you want to see a new feature feel free to create a new Issue. Here are some features which are either under way or planned:

* Create website
* Create web app
* Create native app

## Contributing
Please read [CONTRIBUTING.md](https://github.com/sul-lab/sul-cli/blob/master/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.

## Versioning

We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/sul-lab/sul-cli/tags).

Please read [CHANGELOG.md](https://github.com/sul-lab/sul-cli/blob/master/CHANGELOG.md) for detailed changes to this project.

## Authors

* **Andrew Smith** - *Initial work* - [Stiff Upper Lip](https://github.com/sul-lab)

## License

This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/sul-lab/sul-cli/blob/master/LICENSE.md) file for details.