Define default name structure to main file component

[Erick Rodriguez]

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
    }
  }
}