@sul/cli v1.0.0

SUL CLI

A simple tool to help generate standard SUL components.

Install:

$ npm install -g @sul/cli

New Component

A utility to generate a React component.

$ 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.

$ sul nc Header

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:

$ sul nc Header -c

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

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.

$ sul nc Header -s

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

Header.jsx

...

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

...

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

Header.style.js

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:

$ 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 for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Please read CHANGELOG.md for detailed changes to this project.

Authors

• Andrew Smith - Initial work - Stiff Upper Lip

License

This project is licensed under the MIT License - see the LICENSE.md file for details.