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 and easy-to-use CLI parse tool.

A simple and easy-to-use CLI parse tool.

AbsentM 1 Mar 04, 2022
Another (unofficial) Qt CLI Installer on multi-platforms

Another Qt installer(aqt) Release: Documentation: Test status: and Coverage: This is a utility alternative to the official graphical Qt installer, for

Hiroshi Miura 528 Jan 02, 2023
CLI client for FerrisChat

A CLI Client for @FerrisChat using FerrisWheel

FerrisChat 2 Apr 01, 2022
Output Analyzer for you terminal commands

Output analyzer (OZER) You can specify a few words inside config.yaml file and specify the color you want to be used. installing: Install command usin

Ehsan Shirzadi 1 Oct 21, 2021
pypyr task-runner cli & api for automation pipelines.

pypyr task-runner cli & api for automation pipelines. Automate anything by combining commands, different scripts in different languages & applications into one pipeline process.

pypyr 471 Dec 15, 2022
A terminal tool for git. When we use git, do you feel very uncomfortable with too long commands

PIGIT A terminal tool for git. When we use git, do you feel very uncomfortable with too long commands. For example: git status --short, this project c

Zachary 1 Apr 09, 2022
Create argparse subcommands with decorators.

python-argparse-subdec This is a very simple Python package that allows one to create argparse's subcommands via function decorators. Usage Create a S

Gustavo José de Sousa 7 Oct 21, 2022
Simple command-line implementation of minesweeper

minesweeper This is a Python implementation of 2-D Minesweeper! Check out the tutorial here: https://youtu.be/Fjw7Lc9zlyU You start a game by running

Kylie 49 Dec 10, 2022
Convert shellcode into :sparkles: different :sparkles: formats!

Bluffy Convert shellcode into ✨ different ✨ formats! Bluffy is a utility which was used in experiments to bypass Anti-Virus products (statically) by f

pre.empt.dev 305 Dec 17, 2022
A CLI application for storing contacts as a csv file written in Python.

Contacter A CLI application for storing contacts as a csv file written in Python. You can use this to save your contacts with a special relations tag

nostalgicnerdpenguin 1 Oct 23, 2021
A simple cli tool to commit Conventional Commits

convmoji A simple cli tool to commit Conventional Commits. Requirements Install pip install convmoji convmoji --help Examples A conventianal commit co

3 Jul 04, 2022
A simple discord slash command handler for for discord.py.

A simple discord slash command handler for discord.py About ⦿ Installation ⦿ Disclaimer ⦿ Examples ⦿ Documentation ⦿ Discussions Note that master bran

641 Jan 03, 2023
Bringing emacs' greatest feature to neovim - Tetris!

nvim-tetris Bringing emacs' greatest feature to neovim - Tetris! This plugin is written in Fennel using Olical's project Aniseed for creating the proj

129 Dec 26, 2022
Command-line interface to PyPI Stats API to get download stats for Python packages

pypistats Python 3.6+ interface to PyPI Stats API to get aggregate download statistics on Python packages on the Python Package Index without having t

Hugo van Kemenade 140 Jan 03, 2023
adds flavor of interactive filtering to the traditional pipe concept of UNIX shell

percol __ ____ ___ ______________ / / / __ \/ _ \/ ___/ ___/ __ \/ / / /_/ / __/ / / /__/ /_/ / / / .__

Masafumi Oyamada 3.2k Jan 07, 2023
A simple command-line tracert implementation in Python 3 using ICMP packets

Traceroute A simple command-line tracert implementation in Python 3 using ICMP packets Details Traceroute is a networking tool designed for tracing th

James 3 Jul 16, 2022
A python CLI app that converts a mp4 file into a gif with ASCII effect added.

Video2ASCIIgif This CLI app takes in a mp4 format video, converts it to a gif with ASCII effect applied. This also includes full control over: backgro

Sriram R 6 Dec 31, 2021
A simple CLI based any Download Tool, that find files and let you stream or download thorugh WebTorrent CLI or Aria or any command tool

Privateer A simple CLI based any Download Tool, that find files and let you stream or download thorugh WebTorrent CLI or Aria or any command tool How

Shreyash Chavan 2 Apr 04, 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 terminal written in Python.

PyDOS Read the title and then you'll figure out what this actually is. Running First, download or clone this repo. Next, run run.py. After this, you c

TechStudent10 2 Mar 01, 2022