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 utilizingstyled-components
--type stateful
generates a component class extendingComponent
allowing access tosetState
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
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago