horseman-cli v1.4.2

Horseman CLI

The horseman command line application is intended to simplify component based development by simplifying the creation of component boilerplate.

Horseman generates es6 react components in several different formats.

Horseman is a part of the Blend Marketing development toolchain and as a result is pretty opinionated. Our component organizational strategy follows atomic design principles and creates components in the following directory structure.

src/
├── components/
│   ├── atoms/
│   |   ├── Component/
│   |   |   ├── Component.jsx
│   |   |   ├── Component.md
│   ├── molecules/
│   |   ├── Component/
│   |   |   ├── Component.jsx
│   |   |   ├── Component.md
│   ├── organisims/
│   |   ├── Component/
│   |   |   ├── Component.jsx
│   |   |   ├── Component.md
│   ├── layout/
│   |   ├── Component/
│   |   |   ├── Component.jsx
│   |   |   ├── Component.md

If that pattern works for you, you might find this library helpful, if not, we may decide to allow some configuration options in the future to manipulate this pattern (although we find it pretty swell).

Installation

Horsmen CLI can be installed on a per project basis or globally. If installed locally you can access the horseman commands with ./node_modules/.bin/horseman. or $(npm bin)/horseman

Local

yarn add horseman-cli --dev

or

npm -i horseman-cli --save-dev

Global

yarn global add horseman-cli

or

npm -i -g horseman-cli

Available Actions

horseman new <level> <name>

Creates a new component in the corresponding level directory with the name specified. Will also generate a markdown file for documentation purposes. Internally we use React Styleguidist to consume these documentation files and generate a styleguide.

Level

The level of component you request specifies the parent in which the component is generated.

Valid Levels

• atom
• molecule
• organism
• layout

Name

The component name. Names should begin with a capital letter.

Type

You may specify the --type flag to control the style of component that is generated. By default horseman new will create a stateless functional component for all commands with one exception. horseman new atom will always generate a styled component.

Valid Types

• --type stateless default generates a stateless functional component
• --type styled generates a component utilizing styled-components
• --type stateful generates a component class extending Component allowing access to setState and all lifecycle methods

Wrap

When generating a styled component you should specify the component that you are styling, or wrapping. By default horseman will generate a styled.div. To specify a different element to wrap you can use the --wrap flag.

horseman new atom Button --wrap button

Will generate the following styled component.

const Button = styled.button\`
\`;

Examples

• horseman new atom Button --wrap button
• horseman new molecule InputGroup
• horseman new organism UserInputForm --type=stateful