Shabi CLI
A React CLI to make your life easier.
Using the CLI to create pages should be done from your main directory (where package.json is located)
Installation
Using npm:
npm i -g shabi-cli
CLI Arguments
- First Argument -
shabi
- [default] - Second Argument -
class
|hook
|service
- What you're trying to generate! - Third Argument -
HelloWorld
|Task
|Note
- Name - Fourth Argument -
--extra
|-E
- Add Extras to the content you're generating! -name,description,title,assignee
- Add Extras to the content you're generating!
Options
shabi shabi /_Header -Eshabi --extrashabi hook Taskshabi hook Note -Eshabi hook Note/Details -Eshabi form- --extrashabi form-hook CreateLight --extrashabi page-shabi page-hook register -Eshabi resource-shabi resource-hook noteshabi RC Notes titledescriptionshabi RH Tasks namedescriptionassigneeshabi project defaultshabi service
Commands | Functionality |
---|---|
class | Create a class |
hook | Create a hook |
form-class | Create a class with a form |
form-hook | Create a hook with a form |
page-class | Create a page (class) |
page-hook | Create a page (hook) |
resource-class | Create a Resource (class) |
resource-hook | Create a Resource (hook) |
RC | Create a Resource (class) with fields |
RH | Create a Resource (hook) with fields |
project | Create a Multiple Components based on the provided json config |
Options Usage
class
ex. shabi class HelloWorld
import "./styles/HelloWorld.scss"; import React, {Component} from "react"; class HelloWorld extends Component { render(){ return ( <div className="HelloWorld"> </div> ); }} export default HelloWorld;
hook
ex. shabi hook HelloWorld
import "./styles/HelloWorld.scss"; import React from "react"; const HelloWorld = () => { return ( <div className="HelloWorld"> </div> );} export default HelloWorld;
Resource Structure
ex. shabi resource notes
- This command create those files
notes/
resources/
CreateNote.js
DeleteNote.js
EditNote.js
ListNotes.js
ShowNote.js
Notes.js
_Header.js
_Note.js
Main React Folder Structure
src/
assets/
components/
containers/
pages/
services/
store/
API/
actions/
reducers/
App.js
index.js
package.json
Components Structure
components/
notes/
resources/
CreateNote.js
DeleteNote.js
EditNote.js
ListNotes.js
ShowNote.js
Notes.js
_Header.js
_Note.js
projects/
resources/
CreateProject.js
DeleteProject.js
EditProject.js
ListProject.js
ShowProject.js
Projects.js
_Header.js
_Project.js
Containers Structure
containers/
AuthWrapper.container.js
Navbar.container.js
Pages Structure
pages/
auth/
Login.page.js
Register.page.js
ForgotPassword.page.js
Home.page.js
Services Structure
services/
validation.service.js
sortById.service.js
Redux Structure
store/
API/
axios/
axiosRequest.js
axiosWrapper.js
dispatcher.js
tasks/
tasks.API.js - (using tasks as a sample)
actions/
tasks/
tasks.actions.js
taskMembers.actions.js
index.js
reducers/
tasks/
tasks.reducers.js
taskMembers.reducers.js
index.js