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 CLI tool for getting region-specific status of Logz.io components.

About A simple CLI tool for checking the current status of Logz.io components per region. Built With Python 3 The following packeges (see requirements

Yotam Bernaz 1 Dec 11, 2021
🎈 `st` is a CLI to quickly kick-off your new Streamlit project

?? st - a friendly Streamlit CLI st is a CLI that helps you kick-off a new Streamlit project so you can start crafting the app as soon as possible! Ho

Arnaud 18 Dec 19, 2022
A CLI tool for creating disposable environments.

dispenv - Disposable Python Environments ⚠️ WIP Need to make an environment to work on a GitHub issue? Want to try out a new package and not leave the

Peter Baumgartner 3 Mar 14, 2022
CLI tool to develop StarkNet projects written in Cairo

⛵ Nile Navigate your StarkNet projects written in Cairo. Installation pip install cairo-nile Usage Install Cairo Use nile to install a given version o

Martín Triay 305 Dec 30, 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
Proman is a simple tool for managing projects through cli.

proman proman is a project manager. It helps you manage your projects from a terminal. The features are listed below. Installation Step 1: Download or

Arjun Somvanshi 2 Dec 6, 2021
CLI tool for one-line installation of C++/CMake projects.

cmakip When working on virtual environments, Python projects can be installed with a single command invocation, for example pip install --no-deps . .

Artificial and Mechanical Intelligence 4 Feb 15, 2022
Sink is a CLI tool that allows users to synchronize their local folders to their Google Drives. It is similar to the Git CLI and allows fast and reliable syncs with the drive.

Sink is a CLI synchronisation tool that enables a user to synchronise local system files and folders with their Google Drives. It follows a git C

Yash Thakre 16 May 29, 2022
flora-dev-cli (fd-cli) is command line interface software to interact with flora blockchain.

Install git clone https://github.com/Flora-Network/fd-cli.git cd fd-cli python3 -m venv venv source venv/bin/activate pip install -e . --extra-index-u

null 14 Sep 11, 2022
AWS Interactive CLI - Allows you to execute a complex AWS commands by chaining one or more other AWS CLI dependency

AWS Interactive CLI - Allows you to execute a complex AWS commands by chaining one or more other AWS CLI dependency

Rafael Torres 2 Dec 10, 2021
Python-Stock-Info-CLI: Get stock info through CLI by passing stock ticker.

Python-Stock-Info-CLI Get stock info through CLI by passing stock ticker. Installation Use the following command to install the required modules at on

Ayush Soni 1 Nov 5, 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 4, 2022
Yts-cli-streamer - A CLI movie streaming client which works on yts.mx API written in python

YTSP It is a CLI movie streaming client which works on yts.mx API written in pyt

null 1 Feb 5, 2022
[WIP]An ani-cli like cli tool for movies and webseries

mov-cli A cli to browse and watch movies. Installation This project is a work in progress. However, you can try it out python git clone https://github

null 166 Dec 30, 2022
Command line tool for interacting and testing warehouse components

Warehouse debug CLI Example usage for Zumo debugging See all messages queued and handled. Enable by compiling the zumo-controller with -DDEBUG_MODE_EN

null 1 Jan 3, 2022
open a remote repo locally quickly

A command line tool to peek a remote repo hosted on github or gitlab locally and view it in your favorite editor. The tool handles cleanup of the repo once you exit your editor.

Rahul Nair 44 Dec 16, 2022
The project help you to quickly build layouts in terminal,cross-platform

The project help you to quickly build layouts in terminal,cross-platform

gojuukaze 133 Nov 30, 2022
Quickly open any path on your terminal window in your $EDITOR of choice!

Tmux fpp Plugin wrapper around Facebook PathPicker. Quickly open any path on your terminal window in your $EDITOR of choice! Demo Dependencies fpp - F

null 257 Dec 28, 2022