@cleanarc/react-gen v0.1.9-beta

react-gen

A tool for generating functional react components and stylesheets.

Usage

Install

go install github.com/cleanarc/react-gen

Run

react-gen --help

Examples

Generate a Card component in the current directory.

react-gen card .

Generate a Button component with a custom name.

react-gen button -n MyButton .

Generate a Modal in another directory.

react-gen modal ./src/components/common

Development

Testing

Unit Tests

make test

Test Coverage

make cover

Adding a Feature

For streamlining the process of adding a new feature, see the react-gen-add tool. The full architecture of the tool and the steps for manually adding a new feature (sub-command) are described below.

The most common changes made to this project involve adding new react component to the registry. This is made simple thanks to a set of Go interfaces we have defined. You'll need to implement each of these interfaces whenever adding a new React component to the registry of supported components.

Component Interface

Defined by the following behaviors, this interface defines the characteristics of a React component you'd like to generate. Add your implementation to internal/components.

// Component interface representing a specific type of React component (i.e. Card).
type Component interface {
	// Name the name of the React component type (i.e. Card)
	Name() string
	// Deps list of lower level components which a given component uses.
	// This must be generated recursively.
	Deps() []Component
	// Opts returns the options stored within a component. This is only
	// relevant to concrete types that embed Options and configure it in there
	// factory function. This is useful for mapping these options to an outcome
	// during the component generation routine.
	Opts() Options
}

Command Interface

Defined by the following behaviors, this interface defines the cli subcommand for generating your new component. Add your implementation to internal/cli within an appropriately named subpackage.

// Command interface representing commands within the cli
type Command interface {
	// Name the name of the command
	Name() string
	// Usage short description of the command
	Usage() string
	// UsageText format to use when using the command
	// (e.g. react-gen button [command options] <output-directory>)
	UsageText() string
	// Flags the options for the command
	Flags() []flags.Flag
	// Action the action to invoke for each command
	Action() func(ctx context.Context) error
}

Flag Interface

Defined by the following behaviors, this interface defines the characteristics of each flag of your component's subcommand. Add your implementation to internal/cli within an appropriately named subpackage.

// Flag interface for basic behaviors pertaining to cli options
type Flag interface {
	// Type denotes what type of cli option a flag represents.
	// May be one of String or Bool.
	Type() FlagType
	// Name the name of the cli option, as it should be used in the cli
	Name() string
	// Aliases any aliases for the option name, as defined by String
	Aliases() []string
	// Usage the usage message for the cli option
	Usage() string
	// Required whether a cli option must be specified
	Required() bool
	// DefaultValue the default value to use when none is specified.
	// Applies only to optional flags
	DefaultValue() string
}

Add to Registry

Once you have defined the implementation of your new component and its subsequent command and flags, you can add it to the following registry in main.go.

// commandRegistry Register subcommand implementations here...
func commandRegistry() []commands.Command {
	return []commands.Command{
		auth.Auth{},
		backdrop.Backdrop{},
		button.Button{},
		card.Card{},
		login.Login{},
		modal.Modal{},
		
		// Add your new component command here...
	}
}