• bump typer[all] dependency to 0.6.1

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

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

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

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

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