Package: new-component
new-componentIan Cleary (iancleary)DescriptionWelcome!This is a CLI for creatingstyled-componentsfor React projects quickly.Note: I've rewrote Josh W Comeau'snew-componentNPM package in Python 🐍 and adapted it to my preferences. It is an excellent project and you should check it out!I didn't understand styled components at first. At the time of this writing, I'm looking to develop my understanding of CSS, upon the advice of Josh W Comeau's blog post "The styled-components Happy Path".After you read that article, you'll gather that this CLI aims to combine the wisdom of Josh's templates with my personal preferences.Adding theimport styled from "styled-components"in the newcomponent.jsfile.Adding astyled.Wrappercomponent definition (and making it .the parent html element in the React Component'srenderfunction)Quickstart❯pipxinstallnew-component
❯new-component--helpThat will output the following:Usage: new_component [OPTIONS] NAME

  Creates an new component directory in a React project, with opinionated
  defaults for styled-components.

  See https://styled-components.com/ for more information.

Arguments:
  NAME  Name of component to create.  [required]

Options:
  -d, --directory TEXT  The directory in which to create the component.
                        [default: src/components/]
  -e, --extension TEXT  The file extension for the created component files.
                        [default: js]
  -v, --version         Show the application's version and exit.
  --install-completion  Install completion for the current shell.
  --show-completion     Show completion for the current shell, to copy it or
                        customize the installation.
  --help                Show this message and exit.Example UsageThe first and only argument is the name of the component to create.❯new-componentBackdrop
CreatedanewBackdropComponent💅🚀!
/Users/iancleary/Personal/new-component/src/components/Test4The path printed is the absolute path to new component folder.It will very based upon your setup!This command created two files:src/components/Backdrop/index.jssrc/components/Backdrop/Backdrop.jsThe contents of the files will be as follows:// `src/components/Backdrop/index.js`export{default}from"./Backdrop"// `src/components/Backdrop/Backdrop.js`importReactfrom"react"importstyledfrom"styled-components"constBackdrop=({children})=>{return(<Wrapper>{children}</Wrapper>)};constWrapper=styled.div`/* CSS Goes Here */`exportdefaultBackdropConfigurationConfiguration can be done through 3 different ways:Creating a globalsettings.jsonin your home directory (~/.config/new-component/settings.json).Creating a local.new-component-config.jsonin your project's root directory.Command-line arguments.The resulting values are merged, with command-line values overwriting local values, and local values overwriting global ones.API ReferenceDirectoryControls the desired directory for the created component. Defaults to src/componentsUsage:Command line:--directory <value>or-d <value>JSON config:{ "directory": <value> }File ExtensionControls the file extension for the created components. Can be either js (default) or jsx.Usage:Command line:--extension <value> or -e <value>JSON config:{ "extension": <value> }Further informationI will likely evolve this CLI as I learn more; I'm on my way 😊Add different component typesPromote better patterns to ensure CSS (single source of styles, Isolated CSS)Thanks to Josh W Comeau's blog post "The styled-components Happy Pathfor starting my education! Again, it puts this README in perspective.Enjoy quickly creating styled components 💅 🚀!ContributingI created this CLI for my opinionated uses and may not accept changes.SeeCONTRIBUTING.md.