# react-component-files-generator

> A CLI that helps developers generating react folder structure for your project

Latest version **1.0.8** (published 2022-12-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-component-files-generator
pnpm add react-component-files-generator
yarn add react-component-files-generator
bun add react-component-files-generator
```

Provides the command `rcfg`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2022-12-07 |
| First published | 2022-12-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 39.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Amine Abdelli |
| Maintainers | amine-abdelli |
| Keywords | react, cli, react cli, builder, structure, react structure, react architecture, architecture |

## Links

- npm: https://www.npmjs.com/package/react-component-files-generator
- npm.io page: https://npm.io/package/react-component-files-generator

## Dependencies (3)

- [chalk](https://npm.io/package/chalk.md) ^4.1.2
- [inquirer](https://npm.io/package/inquirer.md) ^8.0.0
- [ts-node-dev](https://npm.io/package/ts-node-dev.md) ^2.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.8 (latest) — 2022-12-07
- 1.0.7 — 2022-12-07
- 1.0.6 — 2022-12-05
- 1.0.5 — 2022-12-05
- 1.0.4 — 2022-12-04
- 1.0.3 — 2022-12-04
- 1.0.2 — 2022-12-04
- 1.0.1 — 2022-12-04
- 1.0.0 — 2022-12-04

## README

# react-component-files-generator

> **Warning**
> This documentation is still being drafted

### react-component-files-generator is a CLI tool helping developers creating react components faster with a simple command.

## Usage
### Install rcfg using npm :
```typescript
  npm install react-component-files-generator
```
### Init rcfg to an existing react project by running the following command:
```
  npx rcfg --init
```
![carbon](https://user-images.githubusercontent.com/77112257/205501760-78b104a0-013c-4074-baf0-10b7c98b3960.png)
#### By default, components are generated in the same folder but you can change it by editing the config file:
```
|-- /src
    |-- /components
        |-- /Button
            |-- Button.component.js
            |-- Button.props.js
            |-- Button.style.scss
            |-- Button.test.js
```
### You can now generate components by running:
```
  npx rcfg --build
```
![carbon (3)](https://user-images.githubusercontent.com/77112257/205502405-ecd6bfb4-b694-4260-bf5c-d822f60a662a.png)

### Files generated are autofilled with generic content and the imports needed :
##### Component - (e.g. Button.component.tsx)
```jsx
import React from 'react';
import './Button.module.scss';
import { ButtonProps } from './Button.props.ts';

const Button = (): ButtonProps => {
  return (
    <div>Button</div>
  )
}

export { Button };
```
##### Testing file - (e.g. Button.test.tsx)
```jsx
import { render } from '@testing-library/react';
import { Button } from './Button.component.tsx';

const component = () => {
    return <Button />;
};

describe('[Component] Button', () => {
    let container: any = null;

    beforeEach(() => {
        container = document.createElement('div');
        document.body.appendChild(container);
    });

    afterEach(() => {
        container.remove();
        container = null;
    });

    it('should render Button component', () => {
        render(component(), container);
    });
})
```

## Config File

When you run --init for the first time, it will ask you a series of questions to customize the cli to your needs and will generate a "rcfg.config.json" config file.

#### Example of the **rfsb.config.json** config file:

```json
{
    "name": "my project",
    "componentEntryPoint": "./src/components",
    "component": {
        "extension": ".tsx",
        "nameExtension": ".component.tsx",
        "export": "default"
    },
    "style": {
        "extension": ".less",
        "nameExtension": ".module.less",
        "module": true
    },
    "test": {
        "extension": ".tsx",
        "nameExtension": ".test.tsx"
    },
    "props": {
        "extension": ".ts",
        "nameExtension": ".props.ts"
    },
    "fixture": {
        "extension": ".ts",
        "nameExtension": ".fixture.ts"
    }
}
```

---
_Source: https://npm.io/package/react-component-files-generator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._