A CLI for creating styled-components for React projects quickly

Last update: Feb 15, 2022

Overview

new-component

Description

Welcome! This is a CLI for creating styled-components for React projects quickly.

Note: I've rewrote Josh W Comeau's new-component NPM 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 the import styled from "styled-components" in the new component.js file.
Adding a styled.Wrapper component definition (and making it .the parent html element in the React Component's render function)

Quickstart

❯ pipx install new-component
❯ new-component --help

That 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 Usage

The first and only argument is the name of the component to create.

❯ new-component Backdrop
Created a new Backdrop Component 💅 🚀!
/Users/iancleary/Personal/new-component/src/components/Test4

The 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.js src/components/Backdrop/Backdrop.js

The contents of the files will be as follows:

// `src/components/Backdrop/index.js`
export { default } from "./Backdrop"

{ return ( {children} ) }; const Wrapper = styled.div` /* CSS Goes Here */ ` export default Backdrop">

// `src/components/Backdrop/Backdrop.js`
import React from "react"
import styled from "styled-components"

const Backdrop = ({children}) => {
  return (
    <Wrapper>
      {children}
    </Wrapper>
  )
};

const Wrapper = styled.div`
  /* CSS Goes Here */
`

export default Backdrop

Further information

I will likely evolve this CLI as I learn more; I'm on my way 😊

Add different component types
Promote better patterns to ensure CSS (single source of styles, Isolated CSS)

Thanks to Josh W Comeau's blog post "The styled-components Happy Path for starting my education! Again, it puts this README in perspective.

Enjoy quickly creating styled components 💅 🚀 !

Contributing

I created this CLI for my opinionated uses and may not accept changes.

See CONTRIBUTING.md.

Comments

Bump typer[all] dependency to 0.6.1
Description

The commits in this pull request will bump typer[all] dependency to 0.6.1

[x] I have reviewed the Guidelines for Contributing and the Code of Conduct.

enhancement
opened by iancleary 1
Feat/#4 config file support
Description

This repository needs support for config files The commits in this pull request will

Changes

https://github.com/iancleary/new-component/pull/6/commits/a42570291d9c15ae6b9d0f756bd98ced6e34b61f Support for Config Files

https://github.com/iancleary/new-component/pull/6/commits/425bef8ecbf4b4e42ca1310804c6621e36433869 Testing (for previous functionality)!

https://github.com/iancleary/new-component/pull/6/commits/00d65f19ffab94a9729b2c4844f0be9149876f39 Updated docs and README for config file support

Testing for config file support!

https://github.com/iancleary/new-component/pull/6/commits/993c4ff1fbc0460c12c92de43c1ec99015dd0f99 Local

https://github.com/iancleary/new-component/pull/6/commits/2cfe1335441f487952177852c69fbb8062d48459 Global (including priority of local over global)

Related

Relates to #4

Closes #4

[x] I have reviewed the Guidelines for Contributing and the Code of Conduct.

documentation enhancement
opened by iancleary 1
Refactor typer confirms and echos into python modules
Description

This repository needs organization of typer echos and confirm prompts to make the main function more readable.

The commits in this pull request will move several sections of echos and confirms into _echos.py (exists) and _confirms.py (new), respectively

Changes

https://github.com/iancleary/new-component/pull/5/commits/01a9de8b0eb41fa89200be0a031d3c613af65ad3 move several sections of echos and confirms into _echos.py (exists) and _confirms.py (new), respectively

[x] I have reviewed the Guidelines for Contributing and the Code of Conduct.
opened by iancleary 1
Config File Support
Discussed in https://github.com/iancleary/new-component/discussions/3

^{Originally posted by iancleary February 2, 2022} new-component.json files in:

project (root level file)

home directory (look up spec on proper sub-folder)

Priority would be 1) CLI options, 2) project level config, 3) user level config, 4) CLI defaults
enhancement
opened by iancleary 1
Refactor App into Python Modules
Description

The commits in this pull request will refactor the internals of the CLI to make the App internals modular and easier to reason about.

Changes

c31572e (#1) fixes a typo in the pyproject.toml file

d6d3045 (#1) refactors the app's functions into submodules

d538b5d (#1) adds the option to specify the file extension used, with js being the default.

[x] I have reviewed the Guidelines for Contributing and the Code of Conduct.

enhancement
opened by iancleary 1

Releases(0.3.1)

0.3.1(Jul 13, 2022)
bump typer[all] dependency to 0.6.1

Source code(tar.gz)
Source code(zip)
0.3.0(Feb 5, 2022)
What's Changed

Refactor typer confirms and echos into python modules by @iancleary in https://github.com/iancleary/new-component/pull/5

Feat/#4 config file support by @iancleary in https://github.com/iancleary/new-component/pull/6

Full Changelog: https://github.com/iancleary/new-component/compare/0.2.1...0.3.0
Source code(tar.gz)
Source code(zip)
0.2.1(Feb 3, 2022)
What's Changed

https://github.com/iancleary/new-component/commit/5a8f6c7c99d3297488c19329f6e9d1bc8a5c6d1d adds a confirmation prompt when the components directory doesn't exist.

Full Changelog: https://github.com/iancleary/new-component/compare/0.2.0...0.2.1
Source code(tar.gz)
Source code(zip)
0.2.0(Feb 2, 2022)
What's Changed

Refactor App into Python Modules by @iancleary in https://github.com/iancleary/new-component/pull/1

c31572e (#1) fixes a typo in the pyproject.toml file

d6d3045 (#1) refactors the app's functions into submodules

d538b5d (#1) adds the option to specify the file extension used, with js being the default.

https://github.com/iancleary/new-component/commit/2bd24ea8f109e99f77da3aa86ba95232939a859d adds the Jinja2 dependency

New Contributors

@iancleary made their first contribution in https://github.com/iancleary/new-component/pull/1

Full Changelog: https://github.com/iancleary/new-component/compare/0.1.1...0.2.0
Source code(tar.gz)
Source code(zip)

0.1.1(Feb 2, 2022)

Welcome! This is a CLI for creating styled-components for React projects quickly.

Note: I've rewrote Josh W Comeau's new-component NPM package in Python and adapted it to my preferences. It is an excellent project and you should check it out!

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 the import styled from "styled-components" in the new component.js file.
Adding a styled.Wrapper component definition (and making it .the parent html element in the React Component's render function)

Quickstart

❯ pipx install new-component
❯ new-component --help

That 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/]
  -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 Usage

The first and only argument is the name of the component to create.

❯ new-component Backdrop
Created a new Backdrop Component 💅 🚀!
/Users/iancleary/Personal/new-component/src/components/Test4

The 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.js src/components/Backdrop/Backdrop.js

The contents of the files will be as follows:

// `src/components/Backdrop/index.js`
export { default } from "./Backdrop"

// `src/components/Backdrop/Backdrop.js`
import React from "react"
import styled from "styled-components"

const Backdrop = ({children}) => {
  return (
    <Wrapper>
      {children}
    </Wrapper>
  )
};

const Wrapper = styled.div`
  /* CSS Goes Here */
`

export default Backdrop

Source code(tar.gz)
Source code(zip)

0.1.0(Feb 2, 2022)

Welcome! This is a CLI for creating styled-components for React projects quickly.

Note: I've rewrote Josh W Comeau's new-component NPM package in Python and adapted it to my preferences. It is an excellent project and you should check it out!

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 the import styled from "styled-components" in the new component.js file.
Adding a styled.Wrapper component definition (and making it .the parent html element in the React Component's render function)

Quickstart

❯ pipx install new-component
❯ new-component --help

That 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/]
  -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 Usage

The first and only argument is the name of the component to create.

❯ new-component Backdrop
Created a new Backdrop Component 💅 🚀!
/Users/iancleary/Personal/new-component/src/components/Test4

The 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.js src/components/Backdrop/Backdrop.js

The contents of the files will be as follows:

// `src/components/Backdrop/index.js`
export { default } from "./Backdrop"

// `src/components/Backdrop/Backdrop.js`
import React from "react"
import styled from "styled-components"

const Backdrop = ({children}) => {
  return (
    <Wrapper>
      {children}
    </Wrapper>
  )
};

const Wrapper = styled.div`
  /* CSS Goes Here */
`

export default Backdrop

Full Changelog: https://github.com/iancleary/new-component/commits/0.1.0

Source code(tar.gz)
Source code(zip)