Installation

npm i react-crud-generator --save-dev
OR
yarn add react-crud-generator --save-dev

Usage with example project

You can also read this guide: https://medium.com/@bans.cowboy/rhino-react-crud-generator-complete-guide-bfc5e71e812a

For easier understanding how can you use this package, you can download the example project from here.
https://github.com/WingsDevelopment/rhino-consumer
After downloading the project, you can run it by following the instructions in the README.md file.

Usage

After adding config files you can list all the available commands by running:
npx rhino -h

Command list:
-i --init                               : Initialize dependency components
-f featureName or --feature featureName : Feature name
-a dtoName or --all dtoName             : Add Read All (table) to the feature
-d dtoName or --details dtoName         : Add Details (page) to the feature
-c dtoName or --create dtoName          : Add Create (form) to the feature
-u dtoName or --update dtoName          : Add Update (form) to the feature

First you can add all dependency components implementation by running the following command:
npx rhino -i

Then you can generate the CRUD by running the following command (if you copied json schema from example this exact command will work, if not you might need to change your schema model name):
npx rhino -f tag -c Tag -u Tag -d Tag -a Tag

Imports inside of components and prittier doesn't come out of the box for at this moment, so you need to add import on save to vscode settings.json file:
or import manually.

Config

Add rhinoConfig.json and rhinoOpenApiSchema.json files to your root directory More about how to config those files can after about.

About

Rhino is a code generator for React projects. It generates a CRUD for a given feature.
Rhino is currently very opiniated with data fetching and state management technologies, it uses axios and react-query for data fetching and state management.

Folder structure and architecture is semi opiniated, but also very configurable.
By default this is the folder structure:

features/tag
├── infrastructure
│   ├── DTOs                    # Data transfer objects - generated from OpenAPI schema
|   ├── interfaces              # Interfaces for the - repository
│   └── repositories            # Data fetching - axios implementation
├── models                      # Models - also generated from OpenAPI schema, used in views, extendable with your needs.
├── pages                       # Views - generated depending on the commands you run and DTOs from schema.
|   ├── Create
|   |   ├── components          # Components used in the view
|   |   └── CreateTagPage.tsx   # Page that contains Form component
|   ├── Details
|   |   ├── components
|   |   └── DetailsTagPage.tsx  # Page that contains Details component
|   ├── Update
|   |   ├── components
|   |   └── UpdateTagPage.tsx   # Page that contains Form component
|   └── Index
|       ├── components
|       └── IndexTagPage.tsx    # Page that contains Table component
|── routes                      # Routes for the feature & RouteObject, used for navigation
|   └── TagRoutes.tsx
└── state                       # State management - react-query implementation
    ├── hooks                   # Hooks for the feature
    └── queries                 # Queries for the feature

This folder structure can be configured! if you take a look at the rhinoConfig.json file you will see that you can change the folder structure. notice this part of configuration:

"basePath": "src/features",
"stateQueriesPath": "/state/queries",
"stateMutationsPath": "/state/mutations",
"repositoryPath": "/infrastructure/repositories",
"repositoryInterfacePath": "/infrastructure/interfaces",
"dtosPath": "/infrastructure/DTOs",
"modelsPath": "/models",
"detailsPath": "/pages/Details",
"listPath": "/pages/Index",
"createPath": "/pages/Create",
"updatePath": "/pages/Update",
"routesPath": "/routes",
"contextPath": "/context",

by changing the values you can change the folder structure.

Dependencies

Rhino won't work without the following dependencies:
axios
react-query
react-router-dom
typescript
react-hook-form

Also you will need to provide few components, wrappers for the generated components.
You can eaither implement it yourself, or generate it by running init command.

Coming soon:
Configurable renaming of the components.
Configurable file extensions, enabling jsx & js files instead of tsx & ts

Config rhinoOpenApiSchema

rhinoOpenApiSchema configuration is very straightforward.
copy the open api schema from the swagger editor and paste it in rhinoOpenApiSchema.json

swagger open api schema example: https://petstore.swagger.io/v2/swagger.json
for quick test,
copy json from this link and paste it in rhinoOpenApiSchema.json
copy json from under Config rhinoConfig section into rhinoConfig.json and
run the command: npx rhino -f anyName -c Tag

Config rhinoConfig

This is default config that is suggested to be a starting point.

{
  "schemaDTOPath": "definitions",
  "envApiUrl": "`${import.meta.env.VITE_WEB_API_URL}`",
  "basePath": "src/features",
  "initComponentsBasePath": "src/rComponents",
  "stateQueriesPath": "/state/queries",
  "stateMutationsPath": "/state/mutations",
  "repositoryPath": "/infrastructure/repositories",
  "repositoryInterfacePath": "/infrastructure/interfaces",
  "dtosPath": "/infrastructure/DTOs",
  "modelsPath": "/models",
  "detailsPath": "/pages/Details",
  "listPath": "/pages/Index",
  "createPath": "/pages/Create",
  "updatePath": "/pages/Update",
  "routesPath": "/routes",
  "contextPath": "/context",
  "useTemplate": "reactQuery",
  "generateRepository": true,
  "generateContext": false,
  "generateRepositoryInterface": true,
  "generateOnlyFolderStructure": false,
  "DTOExtensionAdd": "DTO",
  "DTOExtensionRemove": "",
  "ModelExtensionAdd": "",
  "ModelExtensionRemove": "DTO",
  "overrideNamings": {
    "initialData": "initData"
  }
}