arminbro/generate-react-cli

A simple React CLI to generate components instantly and more.

generate-react-cli's Issues

Generated tests always use FollowBtn

Describe the bug
The autogenerated testing-library test file always uses FollowBtn when you getBy*.

To Reproduce
Steps to reproduce the behavior:

1. npx generate-react-cli component FancyComponent
2. Open FancyComponent.test.js
3. See const FollowBtn = ...

Expected behavior
const FollowBtn = getByText('FancyComponent Component'); should be const FancyComponent = getByText('FancyComponent Component');

Add context, custom hook and redux toolkits modules templates

generate-react-cli is a fantastic tool for React developers, especially when working on large-scale applications. However, I believe that it could be improved by adding the ability to automatically generate custom hook modules, context modules, and Redux toolkit modules, along with their respective testing files.

Additional Config Options

Describe the solution you'd like

1. An option to specify CSS naming convention

For example if I generated a new component called MyButton and specified kebab case for the css it would change this:

const TemplateName = () => <div className="TemplateName">TemplateName Component</div>

to this:

const MyButton = () => <div className="my-button">MyButton Component</div>

and CSS file would be:

.my-button {}

2. Be able to specify an array for multiple files in the "customTemplates" option

Most of the time I use a MyComponent.stories.css file for extra Storybook styling. Would be great to be able to generate multiple CSS files using an array like this:

{
  ...,
  "component": {
    "default": {
      "customTemplates": {
        "component": "src/components/__template__/Template.js",
        "story": "src/components/__template__/Template.stories.js",
        "style": ["src/components/__template__/Template.css", "src/components/__template__/Template.stories.css"],
        "test": "src/components/__template__/Template.test.js"
      },
  ...
}

styled components

Nice tool, thanks!

would be great to include 'styled' for cssPreprocessor (see https://styled-components.com/) which generates a simple style.ts for the component imports, perhaps with a default Container just to get started:

// style.ts
import styled from 'styled-components';
const Container = styled.div`
  padding: 5px;
`
const Styles = {
  Container,
};

export default Styles;

`

Make 'GRC' more configurable (multi-configuration).

Is your feature request related to a problem? Please describe.

Hi, thank you for this superb and very practical library.
I would like to suggest an improvement.
currently in version 4.0.2, I can do generate-react component <MyComponent>
which makes MyApp / src / components / <Mycomponent> / <Mycomponent>.js + <Mycomponent>.css + <Mycomponent>.test.js

Describe the solution you'd like

I would like to have the possibility of creating a 2nd (or more) configuration like generate-react page Home which does MyApp / src / pages / Home / Home.js + Home.css + Home.test.js

Describe alternatives you've considered

see this example configuration file

{
  "component": {
    "path": "src/components",
    "css": {
      "preprocessor": "css",
      "module": true,
      "withStyle": true
    },
    "test": {
      "library": "None",
      "withTest": true
    },
    "withStory": false,
    "withLazy": false
  },
  "page": {
    "path": "src/pages",
    "css": {
      "preprocessor": "css",
      "module": true,
      "withStyle": true
    },
    "test": {
      "library": "None",
      "withTest": true
    },
    "withStory": false,
    "withLazy": false
  },
  "usesTypeScript": false
}

Thanks for read my issue. thanks for this project !

Support for custom extension like .mdx for stories instead of defaulted to .tsx

Is your feature request related to a problem? Please describe.
I am using .mdx format for storybook stories, but config will generate file with .tsx extension for my stories.

Describe the solution you'd like
If custom template file extension is not .js, do not convert to .tsx but use existing file extension instead.

Describe alternatives you've considered
Alternatively is to manually rename, but defeats the benefit of using the cli.

Additional context
Related to Support for .jsx extension but different use case.

I can potentially do this and make a PR.

Make 'GRC' more configurable (multi custom component commands)

Is your feature request related to a problem? Please describe.

GRC only supports two static commands to generate a component (component & page) at the moment.

Describe the solution you'd like

GRC should be more configurable by allowing the developer to extend the generate-react-cli.json config file with additional custom component commands dynamically.

By default, GRC comes with the one static component command out of the box.
This is what the generate-react-cli.json config file looks like initially:

{
  "usesTypeScript": false,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "testLibrary": "Testing Library",
  "component": {
    "path": "src/components",
    "withLazy": false,
    "withStory": true,
    "withStyle": true,
    "withTest": true
  }
}

So with the above config example, you can run a command like this:

npx generate-react-cli component Box

And that will generate a component for you in the component.path that you have specified and with the corresponding files that you have set to true in the component property.

But let's say you also wanted to generate components with the page and layout command that have their own config rules. You can extent the generate-react-cli.json config file like this:

{
  "usesTypeScript": false,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "testLibrary": "Testing Library",
  "component": {
    "path": "src/components",
    "withStyle": true,
    "withTest": true,
    "withStory": true,
    "withLazy": false
  },
  "page": {
    "path": "src/modules",
    "withStyle": true,
    "withTest": true,
    "withStory": true,
    "withLazy": false
  },
  "layout": {
    "customTemplates": {
      "component": "templates/layout/template.js",
      "test": "templates/laylout/testTemplate.js"
    },
    "path": "src/components",
    "withStyle": true,
    "withTest": true,
    "withStory": true,
    "withLazy": false
  }
}

You will need to include the required properties listed below when creating the custom component commands. Otherwise, the CLI will not register it as a custom component command.

The required properties are as follows:

• path
• withStyle
• withTest
• withStory
• withLazy

Once you have done that, you should be able to run the custom component commands like this:
npx generate-react-cli page HomePage
npx generate-react-cli layout BoxLayout

Originally posted by @arminbro in #12 (comment)

Custom templated filenames cannot be formatted to different cases

Custom templated filenames cannot be formatted to different cases.

If "*template-name.jsx" is used as a template file, GRC will ignore it and produce that filename without replacing it with the component name in kebab-case.

Only Pascal casing seems to work for custom templates

Describe the bug
When I try to use anything other than Pascal-case for the files in my custom templates, they are not replaced.

To Reproduce
Steps to reproduce the behavior:

1. Create a custom template for component
2. name it template-name.tsx
3. Add the custom template in generate-react-cli.json
   "component": { "default": { "customTemplates": { "component": "./templates/template-name.tsx" },
4. Run the cli, e.g. npx generate-react-cli component MyComponent
5. The component file in the created component has not been changed from template.name.tsx
   Expected behavior
   The filename should be my-component.tsx but is template-name.tsx

Machine (please complete the following information):

• OS: [e.g. macOS Mojave]
• Node Version [e.g. v10.16.1]

Additional context
Add any other context about the problem here.

Screenshots
If applicable, add screenshots to help explain your problem.

Define default name structure to main file component

Thank you for reading. As you might know, The resultant component follows the following pattern:

.
└── src
    └── components
        └── MyCustomComponent
            ├── MyCustomComponent.tsx
            ├── MyCustomComponent.test.tsx
            └── MyCustomComponent.module.scss

the resultant code while importing the component suppose more characters:

import MyCustomComponent from "@/components/MyCustomComponent/MyCustomComponent";

Hypotetical ideal Scenario

Leave the Main file as index.tsx rather than the name of the component:

.
└── src
    └── components
        └── MyCustomComponent
            ├── index.tsx
            ├── MyCustomComponent.test.tsx
            └── MyCustomComponent.module.scss

By doing that the import becomes more simpler:

import MyCustomComponent from "@/components/MyCustomComponent";

Editing the text after generating the refactor stills consume time. Ideally, it should not be like that.

By adding an option on the config, you should enable/disable the switch to use the name of the component in the main file, or use the index naming convention:

{
  "usesTypeScript": true,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "testLibrary": "Testing Library",
  "component": {
    "default": {
      "customTemplates": {
        "component": "scripts/templates/component.tsx",
        "test": "scripts/templates/test.tsx"
      },
      "path": "src/Components",
      "withStyle": true,
      "withTest": true,
      "withStory": false,
      "withLazy": false,
      "useIndexName:" true // false will use the name of the component
    }
  }
}

Pascal case component generation broken

Describe the bug
Pascal case components produce broken naming conventions. Example:

import React, { FC } from 'react';
import styles from './TempTest.module.css';

interface TEMP TESTProps {}

const TEMP TEST: FC<TEMP TESTProps> = () => (
  <div className={styles.TEMP TEST} data-testid="TEMP TEST">
    TEMP TEST Component
  </div>
);

export default TEMP TEST;

To Reproduce
In a new npm project run npx generate-react-cli component TempTest and accept all default cli options.

Expected behavior
Naming should be TempTest.

Machine (please complete the following information):
Node 18.12.0

Custom template reference.

Is your feature request related to a problem? Please describe.
We want to generate another custom file, something like "component.default.scss" that will hold our "!default" values. But we can't find a way to do it, looking through the code, component types are strictly defined.

Describe the solution you'd like
We would like that to be dynamic, meaning we can add any type of component to be generated given it's path. Like array of paths pointing to templates which will be generated and replaced with keywords.

Describe alternatives you've considered
Additional tool for generation, or custom command to generate it. But we would like to have everything in 1 package for convenience.

Additional context
Making this feature could possibly break compatibility with previous versions of the package if it has to be clean and things like component or lazy would be defined in array and not as constants. But it's also possible to make this as a side feature and keep these types as strict to keep backwards compatibility.

If no one else wants to implement this feature we would like to take it as a good first issue and implement it ourselves, but it would take some time for us to do because it's not a pressing matter right now. But we just need a heads up about if you are ok with this feature and you would accept our pull request.

Thank you!

Make getByTestId the default

Is your feature request related to a problem? Please describe.
My tests tend to fail when moving away from the default component template since I don't use the ComponentName Component text in them.

Describe the solution you'd like
Move away from getByText and use getByTestId instead.

// Component.js
import React from 'react';
import PropTypes from 'prop-types';
import styles from './Component.module.scss';

const Component = () => (
  <div className={styles.Component} data-testid="Component">
    Component Component
  </div>
);

Component.propTypes = {};

Component.defaultProps = {};

export default Component;


// Component.test.js
import React from 'react';
import { cleanup, render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Component from './Component';

describe('<Component />', () => {
  afterEach(cleanup);

  test('it should mount', () => {
    const { getByTestId } = render(<Component />);
    const component = getByTestId('Component');

    expect(component).toBeInTheDocument();
  });
});

This way, tests won't immediately fail after editing the component.

Capitalization issues with component names

1st Capitalization issue:
npx generate-react-cli component -f test --path src/components/base

Issue:
creates test.tsx, but test.test.tsx imports ./Test, which fails

Details:
results in files called
test.tsx
test.test.tsx

test.test.tsx looks like this

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Test from './Test';

describe('<Test />', () => {
  test('it should mount', () => {
    render(<Test />);
    
    const test = screen.getByTestId('Test');

    expect(test).toBeInTheDocument();
  });
});

this line fails because ./Test doesn't exist
import Test from './Test'; 

2nd Capitalization issue:
npx generate-react-cli component -f ABTest --path src/components/base

Issues:
Changes component name to AbTest, with AbTestProps instead of ABTest
File name is ABTest.tsx, but ABTest.test.tsx imports ./AbTest, which fails

provide a config file to the custom-template

Is your feature request related to a problem? Please describe.
I mean, it helps a lot when you can add a custom template. But if it is possible to provide a config file to our custom templates, like a regular exp replace or to generate a comonent with more options

for example
there are so many pages with the same layout, but diff in some details like a seach form with different fields , or table with unlike columns

A withStoryStyle configuration item is needed

Thank you for this brilliant work, it helps a lot!

I wonder if I can use arbitrary templates for files generating? For example, When using storybook, quite often I need a TemplateName.stories.css file for styling the story. So, it'll be good to have a wihtStoryStyle configuration item for adding this file template. Or maybe consider removing all the with*** configuration items and just generating all files from templates under the customTemplates directory?

Thank you.

`ReDoS` security vulnerability in minimatch -> replace

There is a ReDoS security vulnerability found in minimatch package. It was used replace. We uses replace. The @1.2.2 version of has the fix.

So, we need to update it our project.

--flat isn't working

run: npx generate-react-cli component MyComp --flat
Result: error: unknown option '--flat'

Also shows up in npx generate-react-cli help component, where --flat doesn't appear
Result:
Usage: generate-react component|c [options] [names...]

Options:
-p, --path The path where the component will get generated in. (default:
"src/components")
--type You can pass a component type that you have configured in your GRC config
file. (default: "default")
--withStyle With corresponding Style file. (default: false)
--withTest With corresponding Test file. (default: false)
--withStory With corresponding Story file. (default: false)
--withLazy With corresponding Lazy file. (default: false)
--dry-run Show what will be generated without writing to disk
-h, --help display help for command

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update npm to v10.5.2
• chore(deps): update dependency eslint to v9

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency semantic-release to v23.0.8
• fix(deps): update dependency inquirer to v9.2.19
• chore(deps): update commitlint monorepo (@commitlint/cli, @commitlint/config-conventional)
• chore(deps): update semantic-release monorepo (major) (@semantic-release/commit-analyzer, @semantic-release/github, @semantic-release/npm, @semantic-release/release-notes-generator)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/publish.yml

• actions/checkout v4
• actions/setup-node v4

npm

package.json

• chalk 5.3.0
• commander 12.0.0
• deep-keys 0.5.0
• dotenv 16.4.5
• fs-extra 11.2.0
• inquirer 9.2.15
• lodash 4.17.21
• replace 1.2.2
• @commitlint/cli 19.0.3
• @commitlint/config-conventional 19.0.3
• @semantic-release/commit-analyzer 11.1.0
• @semantic-release/git 10.0.1
• @semantic-release/github 9.2.6
• @semantic-release/npm 11.0.3
• @semantic-release/release-notes-generator 12.1.0
• eslint 8.57.0
• eslint-config-airbnb-base 15.0.0
• eslint-config-prettier 9.1.0
• eslint-plugin-prettier 5.1.3
• husky 9.0.11
• prettier 3.2.5
• pretty-quick 4.0.0
• semantic-release 23.0.2
• node >=10.x
• npm >= 6.x

---

• Check this box to trigger a request for Renovate to run again on this repository

using uppercase and lowercase TemplateName in the same file

I need to use TemplateName and templateName in the same template file.

Is there a way to do this?

Here an example of the custom template I'd like to make.

// TemplateName.ts
export interface TemplateNameProperties {
 	templateNameReference: TemplateNameReferenceInterface;
}

const TemplateName: React.FC<TemplateNameProperties> = ({
	templateNameReference,
}: TemplateNameProperties) => {
    ...
}

Dealing with branches

Is your feature request related to a problem? Please describe.

Concise description
How to keep directory generate-react-cli/templates/components + conf file generate-react-cli.json on any new branch, given that I require to have these included in the .gitignore file ?

Full description
For instance, I am ready to develop a new feature on my project, so I create a new branch from my staging branch.
Say I just found out about the package generate-react-cli, and by reading the docs I realise that I have to include the above mentioned directory and conf file. Since these cannot end up in my staging branch when the Pull Request merges my new feature, next time a develop on a new branch, for a new feature, I have to create the files again, before I can issue the command npx generate-react-cli component [MyComponentName].

Describe the solution you'd like
An idea that pops into my mind is :
Could I place the above mentioned directory and conf file into my home/user directory, and from the root directory of my local git project, issue the command npx generate-react-cli component [MyComponentName] ?

This way, I wouldn't have to :

1. add the above mentioned files into my .gitignore,
2. create those files again everytime I create a new git branch in the project I want to use generate-react-cli in.

Thanks and great work !

Add "index.js" option

Hi,

When you don't have an index.js you always need to import with double inner layer e.g.:
import Logo from './components/Logo/Logo'

It'll be much easier if we had an index file created in the components' directory so we can shortly import with one layer like this:
import Logo from './components/Logo'

Thanks! Love the tool!

Shorten commands with aliases

Hi

1. I would like to shorten the length of the command, for example like this:

npx grc c Box --test=false

2. I also want to be able to write the component type without the flag, for example like this:

npx grc page BoxPage
npx grc p BoxPage

where page/p is the alias to the component -type=page command

3. I want custom operators, for example I want to add "withStore" which will add a file with storeApi for redux toolkit query

4. I also want to be able to configure aliases for component types, for example:

// config.json

{
...
 "aliases": {
    "page": "p"
    ...
  }
}

Whenever i try to create a component in a subfolder the subfolder declarations appear on the component declaration.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Machine (please complete the following information):

• OS: [e.g. macOS Mojave]
• Node Version [e.g. v10.16.1]

Additional context
Add any other context about the problem here.

Screenshots
If applicable, add screenshots to help explain your problem.

Support for .jsx extension

Is your feature request related to a problem? Please describe.
Currently this generates .js files. It would be better if it by default exported .jsx files as this is the filetype that's supposed to be used for React components. Could an option be added to support this?

Describe the solution you'd like
A clear and concise description of what you want to happen.
Either:

• JSX turned on by default
• Option in config to allow JSX export

Add a "BUY ME A BEER/COFFEE" button

Literally love this tool so much. You should add that button somewhere so that I can buy you a beer/coffee (depending your preferences I guess :) )

Built-in scripts to improve user experience

Adding new components by npx generate-react-cli component Box command is easy enough, but there is definitely room for improvement to make the experience even more user-friendly. Maybe adding scripts to package.json is a good way to make it better. I just wrote this script to handle it better in my projects:

// create.js
const readline = require('readline').createInterface({
  input: process.stdin,
  output: process.stdout,
})

readline.question('Enter component name(PaskalCase):', (name) => {
  readline.question('Enter component type(component, page, layout):', (type) => {
    const { exec } = require('child_process')
    if (type === 'component') {
      exec(`npx generate-react-cli component ${name}`, (error, stdout, stderr) => {
        if (error) {
          console.log(`Error: ${error.message}`)
          return
        }
        if (stderr) {
          console.log(`stderr: ${stderr}`)
          return
        }
        console.log(`stdout: ${stdout}`)
      })
    } else if (type === 'layout' || type === 'page') {
      exec(`npx generate-react-cli component ${name} --type=${type}`, (error, stdout, stderr) => {
        if (error) {
          console.log(`Error: ${error.message}`)
          return
        }
        if (stderr) {
          console.log(`stderr: ${stderr}`)
          return
        }
        console.log(`stdout: ${stdout}`)
      })
    } else {
      console.log(`Invalid component type: ${type}`)
    }
    readline.close()
  })
})

// package.json
  "scripts": {
    "create": "node ./create.js"
  },

So I and no other developer in the project have not to remember npx generate-react-cli component Box script to create a new component and we can easily run yarn run create.
But I know that it's not enough, so you can definitely make it better by refactoring and adding a built-in script for react-generate-cli.

Component template with internal folder structure

How to create a component based on a template with a structure of empty folders. If not, is it planned to add such functionality?

Creating componentENOENT: no such file or directory rg.config.json

Describe the bug
No such file or directory, rg.config.json in npx cache, after run npx react-generate-cli component X

To Reproduce
npx react-generate-cli component X

Expected behavior
Create the component

Machine (please complete the following information):

• OS Windows
• Node Version 20.x

Custom template where user decide files and content

Is your feature request related to a problem? Please describe.
Would be amazing if we could configure the output .

For many projects the components style is different , what if you could add custom generating functions and save them?

example in terminal ,
npx g-r-c Footer tailwind ,

then it create a folder “Footer” with a tsx, index, test and story file. No questions , no extra parameters . Only thing i did was i made a tailwind template to include these files and a specific content in them. It might take 4-5 extra minutes but when you have 30-50 components in a new project this would be such a time saver !

Adding an option to provide file extension, i.e. jsx, in the template

Is your feature request related to a problem? Please describe.
I like my jsx files to have an extension of jsx.
I couldnt find how to specify this in the template (named the component template "component.jsx" but that did nothing

Describe the solution you'd like
a config that would allow us to state the name of teh extension required

Describe alternatives you've considered
renaming manually

Consider adding an option to generate index.js file (with template override option)

Is your feature request related to a problem? Please describe.
In my projects I usually add an index.js or index.ts file to each React component folder, and re-export the relevant files:

|-- /src
    |-- /components
        |-- /Box
            |-- Box.js
            |-- Box.css
            |-- Box.test.js
            |-- index.js

In this index file I usually do this:

import Box from './Box';
export default Box;

This allows me to write code in my application like this:

import Button from './components/Button';

instead of

import Button from './components/Button/Button';

Describe the solution you'd like
My suggestion is to add an withIndex option to the configuration, which imports the default from the associated component file, then re-exports it as shown above. Configuration could look something like this:

{
  ...
  "component": {
    "default": {
      "path": "src/components",
      "withIndex": true
    }
  },
  ...
}

and with customTemplate

{
  ...
  "component": {
    "default": {
      "customTemplates": {
        "index": "templates/index.js",
      },
      "path": "src/components",
      "withIndex": true
    }
  },
  ...
}

Describe alternatives you've considered
Maybe having a default template for withIndex doesn't make sense, if so this option could require a template file to work.

Additional context
This index file is especially useful when writing design systems or other libraries in my opinion, where you want to export pretty much all the files.

Allow to add non-scss module stylesheet

Thank you for reading. As you might know, The resultant component follows the following pattern:

.
└── src
    └── components
        └── MyCustomComponent
            ├── MyCustomComponent.tsx
            ├── MyCustomComponent.test.tsx
            └── MyCustomComponent.module.scss

In certain scenarios, you might need to use non-scss modules, which are quite useful if you are generating a complex structure that requires styling a global layout rather than an individual component like in the module approach.

Hypotetical ideal Scenario

Add an option into the configuration that allows you to generate a non-module scss file:

.
└── src
    └── components
        └── MyCustomComponent
            ├── MyCustomComponent.tsx
            ├── MyCustomComponent.test.tsx
            ├── MyCustomComponent.scss << Non-module SCSS file
            └── MyCustomComponent.module.scss

By doing that allows more flexibility for the component to be edited in a scenario where the component is rendered several times. This prevents resultant scss bloating when you build the component for production.

A component should look like this (in my case, a typescript one):

import styles from './MyCustomComponent.module.scss';
import styles from './MyCustomComponent.scss';

const MyCustomComponent: React.FC = () => (
  <div className={styles.MyCustomComponent} data-testid="MyCustomComponent">
    Test Component
  </div>
);

export default MyCustomComponent;

The suggested configuration is shown below:

{
  "usesTypeScript": true,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "testLibrary": "Testing Library",
  "component": {
    "default": {
      "customTemplates": {
        "component": "scripts/templates/component.tsx",
        "test": "scripts/templates/test.tsx"
      },
      "path": "src/Components",
      "withStyle": true, 
      "withNonModuleStyle": true, // this will add a non-scss module stylesheet
      "nonModuleStyleFName": "default", // with "default" it will take the name of the component, otherwise you can name it the way you want, like "style" which will become "style.scss"
      "withTest": true,
      "withStory": false,
      "withLazy": false,
    }
  }
}

Could not determine executable to run

Describe the bug
npm raises an issue and produces a log instead of creating generate-react-cli .json and folder's name component

To Reproduce
Steps to reproduce the behavior:

1. Create project via Create React App using command npx create-react-app projectName --template redux-typescript
2. Install generate-react-cli via command npm i generate-react-cli
3. Try to create a component via grc (e.g. npx generate-react-cli component Login)
4. See error

Expected behavior
Creation of grc .json template and component name folder

Machine (please complete the following information):

• macOS Mojave 10.14.6
• Node Version 15.0.1
• NPM 7.0.3
• VS Code 1.50.1
• Create React App 4.0.0
• generate-react-cli 5.1.0

Log Example
0 verbose cli [ 0 verbose cli '/Users/diobrando/.nvm/versions/node/v15.0.1/bin/node', 0 verbose cli '/Users/diobrando/.nvm/versions/node/v15.0.1/lib/node_modules/npm/bin/npm-cli.js', 0 verbose cli 'exec', 0 verbose cli '--', 0 verbose cli 'generate-react-cli', 0 verbose cli 'c', 0 verbose cli 'Login' 0 verbose cli ] 1 info using [email protected] 2 info using [email protected] 3 timing config:load:defaults Completed in 2ms 4 timing config:load:file:/Users/diobrando/.nvm/versions/node/v15.0.1/lib/node_modules/npm/npmrc Completed in 1ms 5 timing config:load:builtin Completed in 1ms 6 timing config:load:cli Completed in 2ms 7 timing config:load:env Completed in 0ms 8 timing config:load:file:/Users/diobrando/Src/cra-ts-redux-login/.npmrc Completed in 0ms 9 timing config:load:project Completed in 1ms 10 timing config:load:file:/Users/diobrando/.npmrc Completed in 0ms 11 timing config:load:user Completed in 0ms 12 timing config:load:file:/Users/diobrando/.nvm/versions/node/v15.0.1/etc/npmrc Completed in 0ms 13 timing config:load:global Completed in 0ms 14 timing config:load:cafile Completed in 0ms 15 timing config:load:validate Completed in 1ms 16 timing config:load:setUserAgent Completed in 0ms 17 timing config:load:setEnvs Completed in 1ms 18 timing config:load Completed in 8ms 19 verbose npm-session ba5fa4d42bd9b664 20 timing npm:load Completed in 21ms 21 http fetch GET 200 https://registry.npmjs.org/generate-react-cli 23ms (from cache) 22 timing command:exec Completed in 53ms 23 verbose stack Error: could not determine executable to run 23 verbose stack at getBinFromManifest (/Users/diobrando/.nvm/versions/node/v15.0.1/lib/node_modules/npm/lib/exec.js:247:23) 23 verbose stack at exec (/Users/diobrando/.nvm/versions/node/v15.0.1/lib/node_modules/npm/lib/exec.js:130:15) 24 verbose cwd /Users/diobrando/Src/cra-ts-redux-login 25 verbose Darwin 18.7.0 26 verbose argv "/Users/diobrando/.nvm/versions/node/v15.0.1/bin/node" "/Users/diobrando/.nvm/versions/node/v15.0.1/lib/node_modules/npm/bin/npm-cli.js" "exec" "--" "generate-react-cli" "c" "Login" 27 verbose node v15.0.1 28 verbose npm v7.0.3 29 error could not determine executable to run 30 verbose exit 1 <img width="581" alt="Screenshot 2020-11-03 at 02 49 57" src="https://user-images.githubusercontent.com/16334866/97937541-4aec8a00-1d7f-11eb-8ea1-d81ee612bbca.png">

Create React App package.json
{ "name": "cra-ts-redux-login", "version": "0.1.0", "private": true, "dependencies": { "@reduxjs/toolkit": "^1.4.0", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "@types/jest": "^24.9.1", "@types/node": "^12.19.3", "@types/react": "^16.9.55", "@types/react-dom": "^16.9.9", "@types/react-redux": "^7.1.10", "generate-react-cli": "^5.1.0", "react": "^17.0.1", "react-dom": "^17.0.1", "react-redux": "^7.2.2", "react-scripts": "4.0.0", "typescript": "~3.8.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

Screenshots
If applicable, add screenshots to help explain your problem.

instead of using given name for folder name uses undefined

Describe the bug
while creating a custom component that the folder didn't exist creates a folder with the undefined name

also as u can see it didn't create the style shit and test file while it's equal to true in config file
"withStyle": true,
"withTest": true,
"withStory": false,
"withLazy": false

To Reproduce
create a component with a custom type that the src/path of folders doesn't exist

Expected behavior
expected to create a folder with the pathname

Machine (please complete the following information):

• OS: Linux open Suse
• Node Version 17.8.0

Additional context
generate-react-cli.json

{
  "usesTypeScript": true,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "testLibrary": "Testing Library",
  "component": {
    "default": {
      "customTemplates": {
        "test": "templates/TemplateName.test.tsx"
      },
      "path": "src/components",
      "withStyle": true,
      "withTest": true,
      "withStory": false,
      "withLazy": false
    },
    "page": {
      "default": {
        "customTemplates": {
          "test": "templates/TemplateName.test.tsx"
        },
        "path": "src/pages",
        "withStyle": true,
        "withTest": true,
        "withStory": false,
        "withLazy": false
      }
    }
  }
}

Screenshots

allow to customize folder naming convention

First of all, this is a great and useful tool :)

How about adding the ability to customize the folder naming convention (snake_case/kebab-case/camelCase/PascalCase/....)

at the moment you can only control both the folder name AND the file name.

but if I were to need a kebab-case-folder-name/KebabCaseComponentName.tsx structure it cannot be controlled at the moment.

Page creation using existing directory

Please give the option to create the page in the existing folder path, rather than creating the new folder for it.
Configuration: "page": { "customTemplates": { "component": "src/app/templates/page/TemplateName.js" }, "path": "src/app/pages/user", "withStyle": false, "withTest": false, "withStory": false, "withLazy": false }

When we run npx generate-react-cli component Test --type=page it creates the page in src/pages/Test/Test.js
I wanted that should not create a new directory for it, because it is a page. It should use existing directory to add the new page which we are created.

Allow to generate from relative paths flag

it would be nice to allow relative paths flag

example

{
  "usesTypeScript": true,
  "usesStyledComponents": true,
  "testLibrary": "Testing Library",
  "component": {
    "util": {
      "path": "utils",
      "withStyle": false,
      "withTest": true,
      "withStory": true,
      "withLazy": true
    }
  }
}

and then let's say you are in src/feature/A
running this command npx generate-react-cli component strBuilder --type=util -someFlagSaysRelative

and it would generate everything relative to CWD

Param issue

Description
Hello, guys! Today I've faced an issue with --flat param, cli just knows nothing about it, or am I doing something wrong?

Packages

• generate-react-cli: [v8.0.1]
• Node Version [v16.15.1]

Define extension into customTemplates

Hello i loved this project!!!

Describe the solution you'd like
i think some ppl use diferente kind of structure name into files, why not in customTemplate we can define the extension of the files ?

Describe alternatives you've considered
My suggestion are, we build more details then
instead

"customTemplates": {
  "style": "templates/component/style.styles.tsx"
},

we put someting liked that

"customTemplates": {
  "style": {
    "path": "templates/component/style.styles.tsx",
    "extension": "TemplateName.styles.tsx"
  }
},

then into contruction of component we gonna got
TemplanteName.styles.tsx instead TemplanteName.module.scss for styles

Allow custom file templates

Is your feature request related to a problem? Please describe.
I've a unique testing setup that works quite well for me and I don't want to stick to the pre-configured ones.

Describe the solution you'd like
Allow custom file templates by configuration. It would be nice if a cli argument like --withTemplate=~/templates/componentTestCustomTemplate.js or just by adding a custom entry to generate-react-cli.json

{
  "component": {
    "path": "src/components",
    "template": "~/templates/componentTestCustomTemplate.js"
    "withStyle": false,
    "withTest": true,
    "withStory": false,
    "withLazy": false
  }
}

Adding custom command generator

I need to generate non-component files base on custom templates.

Based on the current docs, this is how I tried to add the command actions to create action files and folders.

// generate-react-cli.json
{
  "usesTypeScript": true,
  "usesCssModule": false,
  "cssPreprocessor": "None",
  "testLibrary": "None",
  "component": {
    "default": {
      "path": "src/components",
      "withStory": true,
      "withStyle": true,
      "withTest": false,
      "withLazy": false
    }
  },
  "action": {
    "default": {
      "path": "src/actions",
      "withIndex": true,
      "customTemplates": {
        "index": "src/templates/actions/index.tsx"
      }
    }
  }
}

Then running npx generate-react-cli action Test I expected to see the folder Test with the file index.tsx into src/actions.
At the moment, running this command throws an error: unknown command 'action'.

I also tried to add the configuration into component.action and run npx generate-react-cli component Test --type=action but the command generates default component files and I don't want them.

Think about adding custom generator command support or disable default files creation.