A CLI for creating styled-components for React projects quickly

Overview

new-component

Imports: isort Code style: black pre-commit ci

Ian Cleary (iancleary)

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

    Bump typer[all] dependency to 0.6.1

    opened by iancleary 1
  • Feat/#4 config file support

    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

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

    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

    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

    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

    enhancement 
    opened by iancleary 1
Releases(0.3.1)
  • 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!

    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
    
    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!

    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

    Source code(tar.gz)
    Source code(zip)
Owner
Ian Cleary (he/him/his)
Digital Subsystem Lead working on Satellite Payloads @viasat
Ian Cleary (he/him/his)
A simple command line tool for changing the icons of folders or files on MacOS.

Mac OS File Icon Changer Description A small and simple script to quickly change large amounts or a few files and folders icons to easily customize th

Eroxl 3 Jan 02, 2023
πŸ—ƒοΈ Fileio-cli wrapper for fileioapi.py with fire.py, inspiration DOS

πŸ—ƒοΈ File.io File.io simply upload a file, share the link, and after it is downloaded, the file is completely deleted. An API wrapper for the file.io w

nkot56297 2 May 12, 2022
A simple command line tool written in python to manage a to-do list

A simple command line tool written in python to manage a to-do list Dependencies: python Commands: todolist (-a | --add) [(-p | --priority)] [(-l | --

edwloef 0 Nov 02, 2021
Command line parser for common log format (Nginx default).

Command line parser for common log format (Nginx default).

Lucian Marin 138 Dec 19, 2022
Terminal-based keyboard testing

kbdtest kbdtest is a simple Python program that tests keyboard input using an interactive, terminal-based, visual keyboard display. It was originally

Ruunyox 12 Jul 19, 2022
Wordle-cli - Command-line clone of Josh Wardle's WORDLE

Command-line clone of Josh Wardle's WORDLE, inspired by Paul Battley's Ruby vers

Klipspringer 32 Jan 03, 2023
A command-line based, minimal torrent streaming client made using Python and Webtorrent-cli.

ABOUT A command-line based, minimal torrent streaming client made using Python and Webtorrent-cli. Installation pip install -r requirements.txt It use

Janardon Hazarika 17 Dec 11, 2022
Custom 64 bit shellcode encoder that evades detection and removes some common badchars (\x00\x0a\x0d\x20)

x64-shellcode-encoder Custom 64 bit shellcode encoder that evades detection and removes some common badchars (\x00\x0a\x0d\x20) Usage Using a generato

Cole Houston 2 Jan 26, 2022
Fun project to generate The Matrix Code effect on you terminal.

Fun project to generate The Matrix Code effect on you terminal.

Henrique Bastos 11 Jul 13, 2022
Command-line search tool for GitHub

cligh is a command-line search tool for GitHub.

1 Oct 02, 2022
A command line tool to query source code from your current Python env

wxc wxc (pronounced "which") allows you to inspect source code in your Python environment from the command line. It is based on the inspect module fro

ClΓ©ment Robert 13 Nov 08, 2022
slipit is a command line utility for creating archives with path traversal elements.

slipit is a command line utility for creating archives with path traversal elements. It is basically a successor of the famous evilarc utility with an extended feature set and improved base functiona

usd AG 35 Dec 23, 2022
PyArmor is a command line tool used to obfuscate python scripts

PyArmor is a command line tool used to obfuscate python scripts, bind obfuscated scripts to fixed machine or expire obfuscated scripts.

Dashingsoft 2k Jan 07, 2023
Python wrapper and CLI utility to render LaTeX markup and equations as SVG using dvisvgm and svgo.

latex2svg Python wrapper and CLI utility to render LaTeX markup and equations as SVG using dvisvgm and svgo. Based on the original work by Tino Wagner

Matthias C. Hormann 4 Feb 18, 2022
Terminal with builtin ortholinear keyboard and touch screen as a home automation interface.

OLKB-Terminal Terminal with builtin ortholinear keyboard and touch screen as a home automation interface. Features Step and STLs available for non-com

Jeff Eberl 50 Oct 07, 2022
CLI tool to develop StarkNet projects written in Cairo

OpenZeppelin Nile β›΅ Navigate your StarkNet projects written in Cairo. Getting started Create a folder for your project and cd into it: mkdir myproject

OpenZeppelin 305 Dec 30, 2022
Code for "Salient Deconvolutional Networks, Aravindh Mahendran, Andrea Vedaldi, ECCV 2016"

deconvnet_analysis Code for "Salient Deconvolutional Networks, Aravindh Mahendran, Andrea Vedaldi, ECCV 2016" Parts of this code Generate figures in t

Aravindh Mahendran 12 Jan 25, 2021
A python Ethereum utilities command-line tool.

peth-cli A python Ethereum utilities command-line tool. After wasting the all day trying to install seth and failed, I took another day to write this.

Moon 55 Nov 15, 2022
Konsave lets use save your KDE Plasma customizatios and restore them very easily!

Konsave (Save Plasma Customization) A CLI program that will let you save and apply your KDE Plasma customizations with just one command! Als

439 Jan 02, 2023
A command-line based, minimal torrent streaming client made using Python and Webtorrent-cli. Stream your favorite shows straight from the command line.

A command-line based, minimal torrent streaming client made using Python and Webtorrent-cli. Installation pip install -r requirements.txt It use

Jonardon Hazarika 17 Dec 11, 2022