npm package: @hubspire/react-hub-cli
Description: A CLI tool created by Hubspire for bootstraping React apps
Author: Hubspire
Latest version: 1.0.8

# React Hub CLI 🚀

A powerful CLI tool created by Hubspire for bootstrapping React applications with best practices, essential configurations, and common functionalities.

## ✨ Features

- 🏗️ **Quick Project Setup** - Scaffold a new React project with all the essential configurations
- 🧩 **Component Generation** - Generate reusable components with proper structure
- 📝 **Type-Safe** - Built with TypeScript for better developer experience
- 🔄 **CRUD Operations** - Generate CRUD pages with minimal effort
- 🔐 **Authentication** - Quickly add login and other authentication pages
- 📱 **Responsive Layouts** - Built-in responsive layouts and components
- 🎨 **UI Components** - Integration with ShadCn UI for beautiful, accessible components
- 🧪 **Testing Setup** - Pre-configured with testing tools
- 📊 **GraphQL Support** - Integrated with Apollo Client for GraphQL operations

## 📦 Installation

```bash
npm install -g @hubspire/react-hub-cli
```

## 🚀 Quick Start

### Create a new React app

```bash
rhc create-app my-awesome-app
```

### Generate routes

```bash
rhc create-routes home,about,contact
```

### Create login page

```bash
rhc create-login path/to/config.json
```

### Generate CRUD pages

```bash
rhc create-crud path/to/config.json
```

### Generate a complete project from a JSON file

```bash
rhc generate path/to/config.json
```

## 📄 Configuration

React Hub CLI uses JSON configuration files to generate complex projects. Here's a basic example:

```json
{
  "app": {
    "name": "my-app",
    "description": "My awesome app",
    "author": "Hubspire",
    "branding": {
      "brandName": "MyApp",
      "primaryColor": "#38b2ac",
      "secondaryColor": "#f0f2f5",
      "logo": "https://example.com/logo.svg"
    },
    "apiEndpoint": "https://api.example.com"
  },
  "modules": [
    {
      "name": "auth",
      "pages": [
        {
          "type": "EmailPassword",
          "name": "LoginPage",
          "route": "/login",
          "isPrivate": false,
          "api": [
            {
              "type": "login",
              "graphqlHook": "useLoginMutation",
              "queryString": "mutation Login($data: LoginInput!) { login(data: $data) { refreshToken accessToken } }"
            }
          ]
        }
      ]
    },
    {
      "name": "users",
      "pages": [
        {
          "type": "Listing",
          "name": "UserListPage",
          "route": "/users",
          "isPrivate": true,
          "api": [
            {
              "type": "list",
              "graphqlHook": "useGetAllUsersQuery",
              "queryString": "query GetAllUsers { getAllUsers { id name email } }"
            }
          ],
          "columns": [
            { "field": "id", "label": "ID" },
            { "field": "name", "label": "Name" },
            { "field": "email", "label": "Email" }
          ],
          "actions": ["create", "edit", "delete"]
        }
      ]
    }
  ]
}
```

## 🛠️ Commands

| Command         | Alias    | Description                                  |
| --------------- | -------- | -------------------------------------------- |
| `create-app`    | `ca`     | Create a new React app                       |
| `create-routes` | `cr`     | Create new routes for the application        |
| `create-login`  | `clogin` | Create login page and setup authentication   |
| `create-crud`   | `crud`   | Create CRUD pages for a module               |
| `generate`      | `g`      | Generate a complete project from a JSON file |
| `info`          | `i`      | Display system and CLI information           |

## 🧰 Project Structure

When you create a new project with React Hub CLI, it sets up the following structure:

```
my-awesome-app/
├── src/
│   ├── assets/          # Static assets
│   ├── components/      # Reusable UI components
│   ├── config/          # Configuration files
│   │   ├── apollo/      # Apollo Client setup
│   ├── hooks/           # Custom React hooks
│   ├── layout/          # Layout components
│   ├── lib/             # Utility functions
│   ├── pages/           # Page components
│   ├── routes/          # Routing configuration
│   ├── types/           # TypeScript type definitions
│   ├── vars/            # Apollo reactive variables
│   ├── App.tsx          # Main App component
│   └── main.tsx         # Entry point
├── .eslintrc.js         # ESLint configuration
├── .husky/              # Git hooks
├── .prettierrc.js       # Prettier configuration
├── codegen.ts           # GraphQL code generation
├── tsconfig.json        # TypeScript configuration
└── vite.config.ts       # Vite configuration
```

## 🔄 Development Workflow

React Hub CLI sets up a project with the following development tools:

- **Vite** - Fast development server and build tool
- **TypeScript** - Type-safe code
- **ESLint** - Code linting
- **Prettier** - Code formatting
- **Husky** - Git hooks
- **Commitizen** - Standardized commit messages
- **GraphQL Codegen** - Generate TypeScript types from GraphQL schema

## 🎨 UI Components

The CLI integrates with ShadCn UI, a component library built on top of Tailwind CSS. It provides:

- Form components (inputs, buttons, selects)
- Layout components (cards, drawers, dialogs)
- Navigation components (sidebar, pagination)
- Data display components (tables, lists)
- Feedback components (alerts, toasts)

## 🔌 API Integration

React Hub CLI sets up Apollo Client for GraphQL API integration, including:

- Authentication flow with token management
- Error handling and token refresh
- Code generation for type-safe GraphQL operations
- Reactive variables for client-side state management

## 🙏 Acknowledgments

- [Vite](https://vitejs.dev/)
- [React](https://reactjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Apollo Client](https://www.apollographql.com/docs/react/)
- [ShadCn UI](https://ui.shadcn.com/)
- [Tailwind CSS](https://tailwindcss.com/)