{"id":15578136,"url":"https://github.com/iancleary/new-component","last_synced_at":"2026-02-14T13:03:46.089Z","repository":{"id":167403794,"uuid":"643004673","full_name":"iancleary/new-component","owner":"iancleary","description":" ⚛ ⚡ CLI utility to create new components in React projects. ⚡ ⚛ ","archived":false,"fork":false,"pushed_at":"2023-07-10T21:20:45.000Z","size":67,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-06T13:56:01.129Z","etag":null,"topics":["components","javascript","react","script","styled-components","typescript"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iancleary.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["iancleary"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2023-05-19T21:13:31.000Z","updated_at":"2023-07-10T21:20:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"d8309099-719c-4073-a62f-fbfc173f1761","html_url":"https://github.com/iancleary/new-component","commit_stats":{"total_commits":23,"total_committers":1,"mean_commits":23.0,"dds":0.0,"last_synced_commit":"bd3f9da95a2ae681b0c5080c6bd0b45fc0967b26"},"previous_names":["iancleary/new-component"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/iancleary/new-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iancleary%2Fnew-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iancleary%2Fnew-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iancleary%2Fnew-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iancleary%2Fnew-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iancleary","download_url":"https://codeload.github.com/iancleary/new-component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iancleary%2Fnew-component/sbom","scorecard":{"id":478304,"data":{"date":"2025-08-11","repo":{"name":"github.com/iancleary/new-component","commit":"bd3f9da95a2ae681b0c5080c6bd0b45fc0967b26"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.9,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/11 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/iancleary/new-component/publish.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/iancleary/new-component/publish.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/iancleary/new-component/publish.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/iancleary/new-component/test.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/iancleary/new-component/test.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/iancleary/new-component/test.yml/main?enable=pin","Info:   0 out of   4 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   2 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/publish.yml:1","Warn: no topLevel permission defined: .github/workflows/test.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":4,"reason":"6 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: PYSEC-2024-48 / GHSA-fj7x-q9j7-g6q6","Warn: Project is vulnerable to: GHSA-cpwx-vrp4-4pq7","Warn: Project is vulnerable to: GHSA-gmj6-6f8f-6699","Warn: Project is vulnerable to: GHSA-h5c8-rqwp-cp95","Warn: Project is vulnerable to: GHSA-h75v-3vvj-5mfj","Warn: Project is vulnerable to: GHSA-q2x7-8rv6-6q7h"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 26 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-19T15:54:01.397Z","repository_id":167403794,"created_at":"2025-08-19T15:54:01.398Z","updated_at":"2025-08-19T15:54:01.398Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29444072,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T12:43:28.304Z","status":"ssl_error","status_checked_at":"2026-02-14T12:43:14.160Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","javascript","react","script","styled-components","typescript"],"created_at":"2024-10-02T19:06:14.039Z","updated_at":"2026-02-14T13:03:46.072Z","avatar_url":"https://github.com/iancleary.png","language":"Python","funding_links":["https://github.com/sponsors/iancleary"],"categories":[],"sub_categories":[],"readme":"# 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\u0026labelColor=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\u0026logoColor=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\u003e 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!\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❯ pipx install new-component\n❯ 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❯ new-component Backdrop\nCreated a new Backdrop Component 💅 🚀!\n/Users/iancleary/Personal/new-component/src/components/Test4\n```\n\nThe path printed is the absolute path to new component folder.\n\n\u003e 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}) =\u003e {\n  return (\n    \u003cWrapper\u003e\n      {children}\n    \u003c/Wrapper\u003e\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 \u003cvalue\u003e` or `-d \u003cvalue\u003e`\n\nJSON config: `{ \"directory\": \u003cvalue\u003e }`\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 \u003cvalue\u003e or -e \u003cvalue\u003e`\n\nJSON config: `{ \"extension\": \u003cvalue\u003e }`\n\n## Further information\n\n\u003e I will likely evolve this CLI as I learn more; I'm on my way 😊\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 💅 🚀!**\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiancleary%2Fnew-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiancleary%2Fnew-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiancleary%2Fnew-component/lists"}