new-component


Namenew-component JSON
Version 0.6.0 PyPI version JSON
download
home_page
SummaryQuickly create opinionated Styled Components for React Projects
upload_time2023-05-23 23:13:59
maintainer
docs_urlNone
author
requires_python>=3.11
licenseMIT
keywords script javascript styled-components
VCS
bugtrack_url
requirements No requirements were recorded.
Travis-CI No Travis.
coveralls test coverage No coveralls.
            # new-component

[![pdm-managed](https://img.shields.io/badge/pdm-managed-blueviolet)](https://pdm.fming.dev)
[![Imports: isort](https://img.shields.io/badge/%20imports-isort-%231674b1?style=flat&labelColor=ef8336)](https://pycqa.github.io/isort/)
[![Code style: black](https://img.shields.io/badge/code%20style-black-000000.svg)](https://black.readthedocs.io/en/stable/)
[![pre-commit](https://img.shields.io/badge/pre--commit-enabled-brightgreen?logo=pre-commit&logoColor=white)](https://github.com/pre-commit/pre-commit)

Ian Cleary ([iancleary](https://iancleary.me))

## Description

**Welcome!** This is a CLI for creating [styled-components](https://styled-components.com) for React projects quickly.

> Note: I've rewrote Josh W Comeau's [new-component](https://www.npmjs.com/package/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](https://www.joshwcomeau.com/css/styled-components/)".

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

```sh
❯ 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.

```bash
❯ 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:

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

```js
// `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
```

## Configuration

Configuration can be done through 3 different ways:

* Creating a global `settings.json` in your home directory (`~/.config/new-component/settings.json`).
* Creating a local `.new-component-config.json` in your project's root directory.
* Command-line arguments.

The resulting values are merged, with command-line values overwriting local values, and local values overwriting global ones.

## API Reference

### Directory

Controls the desired directory for the created component. Defaults to src/components

Usage:

Command line: `--directory <value>` or `-d <value>`

JSON config: `{ "directory": <value> }`

### File Extension

Controls the file extension for the created components. Can be either js (default) or jsx.

Usage:

Command line: `--extension <value> or -e <value>`

JSON config: `{ "extension": <value> }`

## 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
](https://www.joshwcomeau.com/css/styled-components/) 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](.github/CONTRIBUTING.md).


            

Raw data

            {
    "_id": null,
    "home_page": "",
    "name": "new-component",
    "maintainer": "",
    "docs_url": null,
    "requires_python": ">=3.11",
    "maintainer_email": "",
    "keywords": "script,javascript,styled-components",
    "author": "",
    "author_email": "Ian Cleary <github@iancleary.me>",
    "download_url": "https://files.pythonhosted.org/packages/7a/9e/7e67bd531574a9c5d2c4ee40114fe2d12273b010fd251d02d2a23f30a88d/new-component-0.6.0.tar.gz",
    "platform": null,
    "description": "# new-component\n\n[![pdm-managed](https://img.shields.io/badge/pdm-managed-blueviolet)](https://pdm.fming.dev)\n[![Imports: isort](https://img.shields.io/badge/%20imports-isort-%231674b1?style=flat&labelColor=ef8336)](https://pycqa.github.io/isort/)\n[![Code style: black](https://img.shields.io/badge/code%20style-black-000000.svg)](https://black.readthedocs.io/en/stable/)\n[![pre-commit](https://img.shields.io/badge/pre--commit-enabled-brightgreen?logo=pre-commit&logoColor=white)](https://github.com/pre-commit/pre-commit)\n\nIan Cleary ([iancleary](https://iancleary.me))\n\n## Description\n\n**Welcome!** This is a CLI for creating [styled-components](https://styled-components.com) for React projects quickly.\n\n> Note: I've rewrote Josh W Comeau's [new-component](https://www.npmjs.com/package/new-component) NPM package in Python \ud83d\udc0d and adapted it to my preferences. It is an excellent project and you should check it out!\n\nI 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](https://www.joshwcomeau.com/css/styled-components/)\".\n\nAfter you read that article, you'll gather that this CLI aims to combine the wisdom of Josh's templates with my personal preferences.\n\n- Adding the `import styled from \"styled-components\"` in the new `component.js` file.\n- Adding a `styled.Wrapper` component definition (and making it .the parent html element in the React Component's `render` function)\n\n## Quickstart\n\n```sh\n\u276f pipx install new-component\n\u276f new-component --help\n```\n\nThat will output the following:\n\n```\nUsage: new_component [OPTIONS] NAME\n\n  Creates an new component directory in a React project, with opinionated\n  defaults for styled-components.\n\n  See https://styled-components.com/ for more information.\n\nArguments:\n  NAME  Name of component to create.  [required]\n\nOptions:\n  -d, --directory TEXT  The directory in which to create the component.\n                        [default: src/components/]\n  -e, --extension TEXT  The file extension for the created component files.\n                        [default: js]\n  -v, --version         Show the application's version and exit.\n  --install-completion  Install completion for the current shell.\n  --show-completion     Show completion for the current shell, to copy it or\n                        customize the installation.\n  --help                Show this message and exit.\n```\n\n## Example Usage\n\nThe first and only argument is the name of the component to create.\n\n```bash\n\u276f new-component Backdrop\nCreated a new Backdrop Component \ud83d\udc85 \ud83d\ude80!\n/Users/iancleary/Personal/new-component/src/components/Test4\n```\n\nThe path printed is the absolute path to new component folder.\n\n> It will very based upon your setup!\n\nThis command created two files:\n\n`src/components/Backdrop/index.js`\n`src/components/Backdrop/Backdrop.js`\n\nThe contents of the files will be as follows:\n\n```js\n// `src/components/Backdrop/index.js`\nexport { default } from \"./Backdrop\"\n```\n\n```js\n// `src/components/Backdrop/Backdrop.js`\nimport React from \"react\"\nimport styled from \"styled-components\"\n\nconst Backdrop = ({children}) => {\n  return (\n    <Wrapper>\n      {children}\n    </Wrapper>\n  )\n};\n\nconst Wrapper = styled.div`\n  /* CSS Goes Here */\n`\n\nexport default Backdrop\n```\n\n## Configuration\n\nConfiguration can be done through 3 different ways:\n\n* Creating a global `settings.json` in your home directory (`~/.config/new-component/settings.json`).\n* Creating a local `.new-component-config.json` in your project's root directory.\n* Command-line arguments.\n\nThe resulting values are merged, with command-line values overwriting local values, and local values overwriting global ones.\n\n## API Reference\n\n### Directory\n\nControls the desired directory for the created component. Defaults to src/components\n\nUsage:\n\nCommand line: `--directory <value>` or `-d <value>`\n\nJSON config: `{ \"directory\": <value> }`\n\n### File Extension\n\nControls the file extension for the created components. Can be either js (default) or jsx.\n\nUsage:\n\nCommand line: `--extension <value> or -e <value>`\n\nJSON config: `{ \"extension\": <value> }`\n\n## Further information\n\n> I will likely evolve this CLI as I learn more; I'm on my way \ud83d\ude0a\n\n- Add different component types\n- Promote better patterns to ensure CSS (single source of styles, Isolated CSS)\n\nThanks to Josh W Comeau's blog post \"[The styled-components Happy Path\n](https://www.joshwcomeau.com/css/styled-components/) for starting my education! Again, it puts this README in perspective.\n\n**Enjoy quickly creating styled components \ud83d\udc85 \ud83d\ude80!**\n\n## Contributing\n\nI created this CLI for my opinionated uses and may not accept changes.\n\nSee [CONTRIBUTING.md](.github/CONTRIBUTING.md).\n\n",
    "bugtrack_url": null,
    "license": "MIT",
    "summary": "Quickly create opinionated Styled Components for React Projects",
    "version": "0.6.0",
    "project_urls": {
        "Documentation": "https://new-component.iancleary.me",
        "Homepage": "https://new-component.iancleary.me",
        "Repository": "https://github.com/iancleary/new-component"
    },
    "split_keywords": [
        "script",
        "javascript",
        "styled-components"
    ],
    "urls": [
        {
            "comment_text": "",
            "digests": {
                "blake2b_256": "e44d9429f19247a98821cea921eeecb9e1ea63957b3a9b029f5957dcda16149b",
                "md5": "9f4b63bfe9ade4e4f23b5b2fa8be7730",
                "sha256": "10308a28cd0fa92b90e5144380ae9268153c5f4d8e59cdd067efa79c146e7bb6"
            },
            "downloads": -1,
            "filename": "new_component-0.6.0-py3-none-any.whl",
            "has_sig": false,
            "md5_digest": "9f4b63bfe9ade4e4f23b5b2fa8be7730",
            "packagetype": "bdist_wheel",
            "python_version": "py3",
            "requires_python": ">=3.11",
            "size": 10964,
            "upload_time": "2023-05-23T23:13:58",
            "upload_time_iso_8601": "2023-05-23T23:13:58.121774Z",
            "url": "https://files.pythonhosted.org/packages/e4/4d/9429f19247a98821cea921eeecb9e1ea63957b3a9b029f5957dcda16149b/new_component-0.6.0-py3-none-any.whl",
            "yanked": false,
            "yanked_reason": null
        },
        {
            "comment_text": "",
            "digests": {
                "blake2b_256": "7a9e7e67bd531574a9c5d2c4ee40114fe2d12273b010fd251d02d2a23f30a88d",
                "md5": "3afe1ec11c5d85d8a1b17949f7bccdb4",
                "sha256": "41c86d7d6a72021c7a43430bbcabe4dff4da8000c96b0240f4f19458616071eb"
            },
            "downloads": -1,
            "filename": "new-component-0.6.0.tar.gz",
            "has_sig": false,
            "md5_digest": "3afe1ec11c5d85d8a1b17949f7bccdb4",
            "packagetype": "sdist",
            "python_version": "source",
            "requires_python": ">=3.11",
            "size": 10831,
            "upload_time": "2023-05-23T23:13:59",
            "upload_time_iso_8601": "2023-05-23T23:13:59.505338Z",
            "url": "https://files.pythonhosted.org/packages/7a/9e/7e67bd531574a9c5d2c4ee40114fe2d12273b010fd251d02d2a23f30a88d/new-component-0.6.0.tar.gz",
            "yanked": false,
            "yanked_reason": null
        }
    ],
    "upload_time": "2023-05-23 23:13:59",
    "github": true,
    "gitlab": false,
    "bitbucket": false,
    "codeberg": false,
    "github_user": "iancleary",
    "github_project": "new-component",
    "travis_ci": false,
    "coveralls": false,
    "github_actions": true,
    "lcname": "new-component"
}
        
Elapsed time: 0.38626s