buildcom
A component generator for react
Last updated 13 days ago by foxleigh81 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install buildcom -g
SYNC missed versions from official npm registry.

Logo

A component generator for React

NPM Version GitHub issues Code Climate coverage Code Climate maintainability Travis (.org) npm Snyk Vulnerabilities for GitHub Repo

Getting Started

The easiest way to use this is with npx:

npx buildcom

If you wish to use it without an internet connection or if you are planning to use it multiple times (NPX is slower) then you can install and use it locally:

npm install -g buildcom

Then you can run it by typing buildcom

This will generate a react component in your current working directory.

Screenshot

How buildcom runs

Options

If you call buildcom without any arguments, the component folder will be created in your current working directory, it will also ask you some questions in order to build the component out properly.

You can also supply it with the following arguments:

Argument Description default
--output , -o where to generate your new component (relative to your current working directory) current directory
--name, -n The name you want to call your component n/a (required field)
--dirs, -d Add extra directories as comma separated values empty
--storybook, -s Generate storybook file false
--mdx, -mdx Override the default CSF format and us MDX format for Storybook stories false
--jest, -j Generate jest test file false
--css, -c Generate stylesheet file (see 'CSS Generation' for details) 'css'
--modules, -m Usee CSS Modules (see 'CSS generation' for details) false
--typescript, -t Generate files with TypeScript extensions false
--readme, -r Generate files with TypeScript extensions false
--blank, -b Don't add example code, just create empty files false
--force, -f Ignore existing folders and overwrite/create component files anyway false
--help, -h Displays the help text
--version Displays version number

CSS Generation

The following options exist for CSS usage:

  • CSS
  • SASS
  • SCSS
  • Stylus
  • LESS

If you are using the questionnaire, this is covered in the questions. If using arguments then you can choose from the following options:

Stylesheet type option
CSS --css "css"
SCSS --css "scss"
SASS --css "sass"
Stylus --css "stylus"
LESS --css "less"

Each file is also available as a css module by adding an additional --modules or -m argument.

e.g.

The following will output a CSS Module file (styles.modules.css)

buildcom --name "My Component" --css "css" -m 

Project Assumptions

Buildcom makes the following assumptions about your dependencies:

  • That you are using React
  • If you generate a CSS file for a particular pre-processor, that you already have that pre-processor configured for use in your project
  • If you generate a test file, that you are using Jest for unit tests, that you have 'react-test-renderer' installed for DOM tests and that you are using .spec.* as your file extension
  • If you generate a storybook file, that you have Storybook installed and configured to use the appropriate plugins for the type of stories you are generating.
  • If you opt to use any variation of CSS modules that your project is already configured to make use of them.
  • If you generate TypeScript files, that your project is already configured to use them

If in doubt, feel free to look through our sample configs which can be found here

Storybook

This project can output Storybook files for each component, for those of you who don't know what storybook is, here is a breif introduction:

Storybook intro video on YouTube

By default, buildcom outputs storybook files in the CSF format but if you would prefer to use the MDX syntax instead, you can do this by either selecting it in the buildcom form or adding the --mdx flag to the command

Example

You can see an example output of this buildcom here: https://github.com/foxleigh81/buildcom/tree/master/example-component

The command used to generate that component was:

buildcom --name "example component" -sjr -d 'images' --css "scss"

Possible future developments

  • Add the ability to generate for frameworks other than React

Current Tags

  • 0.4.5                                ...           latest (13 days ago)

19 Versions

  • 0.4.5                                ...           13 days ago
  • 0.4.3                                ...           3 months ago
  • 0.4.2                                ...           3 months ago
  • 0.4.1                                ...           3 months ago
  • 0.4.0                                ...           3 months ago
  • 0.3.1                                ...           3 months ago
  • 0.3.0                                ...           3 months ago
  • 0.2.7                                ...           3 months ago
  • 0.2.6                                ...           3 months ago
  • 0.2.5                                ...           3 months ago
  • 0.2.4                                ...           3 months ago
  • 0.2.3                                ...           3 months ago
  • 0.2.2                                ...           3 months ago
  • 0.2.1                                ...           3 months ago
  • 0.2.0                                ...           3 months ago
  • 0.1.4                                ...           3 months ago
  • 0.1.3                                ...           3 months ago
  • 0.1.2                                ...           3 months ago
  • 0.1.1                                ...           3 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 11
Last Day 0
Last Week 0
Last Month 0
Dependencies (9)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |