https://github.com/gabeduartem/copy-paste-component
A tool to create components, by copying and pasting existing ones.
https://github.com/gabeduartem/copy-paste-component
boilerplate cli component components convention conventions copy development front-end frontend generate generator paste pattern patterns scaffold tool web
Last synced: 9 months ago
JSON representation
A tool to create components, by copying and pasting existing ones.
- Host: GitHub
- URL: https://github.com/gabeduartem/copy-paste-component
- Owner: GabeDuarteM
- License: mit
- Created: 2018-01-14T03:07:58.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T19:15:34.000Z (about 3 years ago)
- Last Synced: 2023-12-19T17:57:07.824Z (over 2 years ago)
- Topics: boilerplate, cli, component, components, convention, conventions, copy, development, front-end, frontend, generate, generator, paste, pattern, patterns, scaffold, tool, web
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/copy-paste-component
- Size: 1.69 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 73
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# copy-paste-component
[](https://travis-ci.com/GabrielDuarteM/copy-paste-component)
[](https://ci.appveyor.com/project/GabrielDuarteM/copy-paste-component)
[](https://codecov.io/gh/GabrielDuarteM/copy-paste-component)
[](https://www.npmjs.com/package/copy-paste-component)
[](https://www.npmjs.com/package/copy-paste-component)
[](http://makeapullrequest.com)
[](https://github.com/prettier/prettier)
A tool to create components, by copying and pasting existing ones.
If you have the structure below:
```
src/components/App/App.js
src/components/App/App.test.js
src/components/App/App.stories.js
src/components/App/index.js
```
and run the tool, it will create the following structure, replacing occurrences of the word `App` inside the files to `NewApp`:
```
src/components/NewApp/NewApp.js
src/components/NewApp/NewApp.test.js
src/components/NewApp/NewApp.stories.js
src/components/NewApp/index.js
```
## Installation
`yarn global add copy-paste-component` or `npm i -g copy-paste-component`
## Editor integration
Are you looking for an editor extension? Check the ones available:
- [Visual Studio Code](https://github.com/GabrielDuarteM/copy-paste-component-vscode)
## Usage
On the root of your project, run `cpc` or `copy-paste-component`.
It will prompt you three questions:
- `Which component would you like to copy?`
- `What is the name of the new component?`
- `What is the location of the new component?`
When you answer those questions, it will generate a structure that is the same as the one that the selected component uses, but it will change the filename to the one you provided on the second question.
It will look too inside the file for occurrences of the filename, and if it finds, it replaces with the content of the second question.
So, given the following file:
### App.js
```js
import React from 'react'
const App = () =>
Hello World
export default App
```
Becomes the following:
### NewApp.js
```js
import React from 'react'
const NewApp = () =>
Hello World
export default NewApp
```
There is also an option to skip the questions, providing them directly when you call the package, using the `copy` command, like `cpc copy src/components/App/App.js NewApp src/components/NewApp`. The first argument is the `path of the component you want to copy`, the second is the `name of the new component`, and the last one is the `path where the component will be created`.
## Roadmap
See [Roadmap](https://github.com/GabrielDuarteM/copy-paste-component/projects/1)
## Changelog
See [Releases](https://github.com/GabrielDuarteM/copy-paste-component/releases)
## License
MIT