diegohaz / generact

Generate React components by replicating your own

Tool for generating React components by replicating your own.
It's intended to work no matter how your file structure is.

 Are you looking for a VS Code extension? Try vscode-generact.

It already works with boilerplates such as create-react-app (above example), react-boilerplate, react-starter-kit and ARc (ok, I'm self-promoting here 😆). So, most likely this will work for you with your current project.

Install

$ npm install -g generact

Motivation

I usually work on different projects with different file structures. Whenever I needed to create a new component, the approach I used was to copy and paste a similar or very basic component and start writing the new component from it. Talking with other developers, this seemed like a very common process.

However, I've never been satisfied with that. It looked like I was doing a robot job. So why not create a robot to do that?

Usage

$ cd ~/my-projects/my-react-project
$ generact

That will scan ~/my-projects/my-react-project for components to replicate.

Specify another root path to find components

If you want to replicate components from another directory, you can do that by using root option:

$ generact --root relative/or/absolute/path/to/any/react/project

Specify component path to replicate

generact will probably find all component files inside the root path automagically (using list-react-files). But, if it doesn't, you can still pass in the component path:

$ generact relative/or/absolute/path/to/component.js

Contributing

PRs are welcome.

Use npm run watch while coding.

License

MIT © Diego Haz

generact's Issues

Feature: renaming imports from current folder

Feature proposal:

rename imports from './{sourceComponentName}' to './{destinationComponentName}'

Component doesn't replace file name

Hi,

Thanks for creating this library. I am having one issue. After generating new component I am getting same file name. For example AppAnything is new component. But it file name is Button.js. Please note folder name change AppAnything after generating new component.

I am using windows machine.

Edit contents on .json files

react-static-boilerplate has a package.json inside component folder. We need to change that as well as we do with .css, .js etc.

Thank you

Just wanted to say thank you for this app, has improved my workflow so much! Appreciate your work 🥇

Support for react native

Does it support react native project? I added the extension to my vs code and tried in react native project but it was not working not even creating the directory. I also tried with installing generact globally but no use.

String replace in copied file?

Tried this for the first time. I was expecting it to string replace all the names in the new file, but it seems that's not currently a feature unless something broke for me.

Is is something you'd consider?

1. generact BigDogs
2. Set new name SmallDogs
3. generact auto replaces all versions of BigDog with SmallDog (so bigDog->smallDog, big_dog->small_dog, etc)

Edit contents on .md files

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

BEM CSS Classes are not completly updated

Hello,

I tried to copy a Dashboard component into a new Configuration one. I use CSS BEM notation in this project, so CSS classes are like Dasboard__JobList. The issue is that classes are not updated:

render() {
  return <section className="Configuration">
    <Content>
      <Title>Jobs</Title>
      <div className="Dashboard__JobList">
        { /* ... */ }
      </div>
    </Content>
  </section>;
};

I'll create a PR soon solving this issue. Can you give me any hint to keep in mind for developing your library?

Thanks!

Generating Store Logic - Actions, Reducers, Selectors and Sagas

Maybe this might be integrated in one of the tools you published, but I really like the Redux store approach in the Arc repo.

In addition to generating Generact creating components, would you be open to adding support for Generact generating Redux store logic: actions, reducers, selectors and sagas into the Generact CLI?

I would love to contribute and help write the code if you're open to a pull request?

Create vscode/atom/sublime plugins

To do that, we will probably need to expose replicate here.

react-slingshot

Some boilerplates, such as react-slingshot and electron-react-boilerplate, have flat structure like the following:

components
├── AboutPage.js
├── AboutPage.spec.js
├── App.js
├── FuelSavingsForm.js
├── FuelSavingsForm.spec.js
├── FuelSavingsResults.js
├── FuelSavingsResults.spec.js
├── FuelSavingsTextInput.js
├── FuelSavingsTextInput.spec.js
├── HomePage.js
├── NotFoundPage.js
└── Root.js

generact can find component files, but it doesn't replicate .spec ones together. We need to cover this case.

It also happens with create-react-app, for App.js, App.css and App.test.js. Currently, we only replicate App.js.

If original filename is in lowercase, generate new file in lowercase

Currently, if we find home.jsx, for example, and replicate it as Foo, the new file will be Foo.jsx, instead of foo.jsx.

Boilerplate that uses that pattern: https://github.com/jedireza/aqua

The tool should pick up both capitalized and uncapitalized files

My component folder have 5 files:

• index.js
• SignUp.js
• signUp.styles.js
• signUp.duck.js
• signUp.saga.js
  and the cli only picks up SignUp.js and index.js (please correct me if I'm wrong, thanks).

I checked the getFiles function inside utils.js and saw that it could be tweaked a little bit to support detecting both capitalized and uncapitalized files.
Any idea is highly appreciated.

Typescript (.tsx) components support?

Is there one? If not, is it planned to be implemented?

It could order by component name, not by file name

I've got files structure, where child components of some main components are in sub-folders.

eg

TaskEditor/index.tsx, TaskEditor/Comments/index.tsx etc.

So when I search for TaskEditor

I've got

(and actually it was not 4th, I had to arrow down as it was like 20th)

I think it could take all files matching, and then order by component name match

Error: Source and destination must not be the same.

I couldn't generate a new Component at the same folder.

Bug: Windows generact

This shouldn't be happening. It works perfect in a unix environment but not my windows 10

Stucked In Windows as shown in Figure