MVCube

MVCube is a CLI tool that simplifies the creation of MVC structures and reusable components in Next.js projects. It helps to quickly set up Models, Controllers, Views, and Components (both global and local).

Installation

Install globally with:

npm install -g mvcube

Usage

Create an MVC structure for a resource

mvcube create <resource-name>

Example:

mvcube create product

This will generate the necessary files for creating a Model, Controller, and Views for a resource.

Componentize a section of your code into a reusable component

mvcube componentize <component-name>

Example:

mvcube componentize button

This will extract a section of your code into a reusable component and place it in the appropriate components folder. You will then choose whether the component is global or local.

Generated Structure

The CLI generates the following structure for the create command:

src/
  ├── models/
  │     └── product.ts
  ├── controllers/
  │     └── productController.ts
  └── app/
        └── product/
              ├── page.tsx
              └── [id]/
                    └── page.tsx

For the componentize command, the CLI creates a component in the components/ folder:

src/
  └── components/
        └── <component-name>.tsx

Explanation:

1. Model (product.ts): Defines the resource's type in TypeScript.
2. Controller (productController.ts): Implements CRUD operations.
3. Next.js Pages:
   • List Page (page.tsx): Displays a list of resources.
   • Details Page ([id]/page.tsx): Displays details of a specific resource.
4. Component (<component-name>.tsx): A reusable UI component. You can choose whether the component will be global (used throughout the entire application with the alias @/components/{Componente}) or local (used only within the current page with a relative import ./components/{Componente}).

Example: product

When you run:

mvcube create product

The following files will be created:

1. Model (src/models/product.ts)

export type Product = {
  id: string;
  name: string;
  description?: string;
  price: number;
  stock: number;
  category: string;
};

2. Controller (src/controllers/productController.ts)

import { Product } from "../models/product";

// List all products
export const getAllProducts = async () => {
  return [{ id: "1", name: "Product A", price: 100 }];
};

// Get a product by ID
export const getProductById = async (id) => {
  return { id, name: "Product A", price: 100 };
};

// Create a product
export const createProduct = async (data: Product) => {
  const newProduct = { id: Date.now().toString(), ...data };
  return newProduct;
};

// Update a product
export const updateProduct = async (id, data) => {
  const updatedProduct = { id, ...data };
  return updatedProduct;
};

// Delete a product
export const deleteProduct = async (id) => {
  return { success: true, id };
};

3. List Page (src/app/product/page.tsx)

import { getAllProducts } from "../../controllers/productController";

export default async function ProductPage() {
  const products = await getAllProducts();

  return (
    <div>
      <h1>Product List</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            {product.name} - ${product.price}
          </li>
        ))}
      </ul>
    </div>
  );
}

4. Details Page (src/app/product/[id]/page.tsx)

import { getProductById } from "../../../controllers/productController";

type Params = {
  params: {
    id: string;
  };
};

export default async function ProductDetailPage({ params }: Params) {
  const product = await getProductById(params.id);

  return (
    <div>
      <h1>Product Details</h1>
      <p>Name: {product.name}</p>
      <p>Price: ${product.price}</p>
    </div>
  );
}

Example: componentize

When you run:

mvcube componentize button

The CLI will prompt you to choose whether the component should be global or local. Based on your choice, the component will be placed in the components/ folder, and it will either be imported globally or locally.

Global Component

• Global components are stored in the src/components/ directory and can be used throughout the entire application.

• The import path for global components will be:

  import Button from "@/components/button";

  Example structure:

  src/
    └── components/
          └── button.tsx

Local Component

• Local components are also stored in the src/components/ directory but are used only within the page where they are located.

• The import path for local components will be:

  import Button from "./components/button";

  Example structure:

  src/
    └── components/
          └── button.tsx

1. Global Component Example (src/components/button.tsx)

export default function Button({ label }: { label: string }) {
  return <button>{label}</button>;
}

2. Local Component Example (src/components/button.tsx)

export default function Button({ label }: { label: string }) {
  return <button>{label}</button>;
}

Contributing

Feel free to contribute! Open an issue or submit a pull request on the GitHub repository.

License

This project is licensed under the MIT License.