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 class HelloWorld
shabi class HelloWorld/_Header -E
shabi class Projects --extra
shabi hook Task
shabi hook Note -E
shabi hook Note/Details -E
shabi form-class CreateIdea --extra
shabi form-hook CreateLight --extra
shabi page-class login
shabi page-hook register -E
shabi resource-class task
shabi resource-hook note
shabi RC Notes title,description
shabi RH Tasks name,description,assignee
shabi project default.json (you can find the default.json on sample folder, to see how you can use it)
shabi service NoteValidation (not implemented yet)

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
service	Create a service

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