Chd.AutoUI 1.0.0

Chd.AutoUI

Metadata-Driven UI Generation Framework

Chd.AutoUI is a framework that automatically generates CRUD interfaces using C# attributes. Simply add attributes to your DTO classes to generate all the necessary metadata for frontend consumption in JSON format.

🎯 Features

• C# Centric: Create UI metadata by writing only C# code
• Attribute-Based: Define UI with [AutoCRUD], [GridColumn], [FormField] attributes
• Framework Agnostic: Works with any frontend framework like React, Vue, Angular
• Type-Safe: Reflection-based metadata generation
• Extensible: Add your own attributes and field types

📦 Installation

dotnet add package Chd.AutoUI

🚀 Quick Start

1. Create Your DTO Class

using Chd.AutoUI.Attributes;

[AutoCRUD(Title = "Products", Icon = "📦", Route = "/products", Description = "Product management")]
public class ProductDto
{
    [GridColumn(Order = 1, Width = 80)]
    [FormField(ReadOnly = true)]
    public int Id { get; set; }

    [GridColumn(Order = 2, Width = 200)]
    [FormField(Label = "Product Name", Type = FieldType.Text, Required = true, MaxLength = 250, Order = 1)]
    public string Name { get; set; } = string.Empty;

    [GridColumn(Order = 3, Width = 150, Format = "currency")]
    [FormField(Label = "Price", Type = FieldType.Number, Required = true, Order = 2)]
    public decimal Price { get; set; }

    [GridColumn(Order = 4, Width = 100)]
    [FormField(Label = "Active", Type = FieldType.Checkbox, Order = 3)]
    public bool IsActive { get; set; }
}

2. Generate Metadata

using Chd.AutoUI.Services;

var generator = new MetadataGenerator();
var metadata = generator.GenerateMetadata<ProductDto>();

// metadata can be serialized as JSON
var json = JsonSerializer.Serialize(metadata);

3. Create API Endpoint

[ApiController]
[Route("api/[controller]")]
public class MetadataController : ControllerBase
{
    private readonly MetadataGenerator _generator;

    public MetadataController()
    {
        _generator = new MetadataGenerator();
    }

    [HttpGet]
    public IActionResult GetAllEntities()
    {
        var assembly = typeof(ProductDto).Assembly;
        var entities = _generator.ScanAssemblyForEntities(assembly);
        return Ok(entities);
    }

    [HttpGet("{entityName}")]
    public IActionResult GetEntityMetadata(string entityName)
    {
        var assembly = typeof(ProductDto).Assembly;
        var type = assembly.GetTypes()
            .FirstOrDefault(t => t.Name.Equals(entityName, StringComparison.OrdinalIgnoreCase));

        if (type == null)
            return NotFound($"Entity '{entityName}' not found");

        var metadata = _generator.GenerateMetadata(type);
        return Ok(metadata);
    }
}

📋 Attributes

AutoCRUDAttribute

Defines general UI settings for the entity.

[AutoCRUD(
    Title = "Products",           // Title displayed in UI
    Icon = "📦",                   // Icon (emoji or icon class)
    Route = "/products",           // Frontend route
    Description = "Product list"  // Description
)]
public class ProductDto { }

GridColumnAttribute

Defines grid/table columns.

[GridColumn(
    Order = 1,              // Sort order
    Width = 150,            // Width in pixels
    Sortable = true,        // Is sortable?
    Format = "currency",    // Format type: "currency", "date", "percent", "number"
    Hidden = false          // Is hidden?
)]
public decimal Price { get; set; }

Format Types:

• currency: Currency format (e.g., $1,234.56)
• date: Date format (e.g., 01/15/2024)
• percent: Percentage format (e.g., 75%)
• number: Number format (e.g., 1,234.56)

FormFieldAttribute

Defines form fields.

[FormField(
    Label = "Product Name",     // Form label
    Type = FieldType.Text,      // Field type
    Required = true,            // Is required?
    MaxLength = 250,            // Maximum length
    Placeholder = "Enter name", // Placeholder text
    Order = 1,                  // Form order
    ReadOnly = false            // Is read-only?
)]
public string Name { get; set; }

Field Types:

• Text: Text input
• Number: Number input
• Email: Email input
• Password: Password input
• Textarea: Multi-line text
• Date: Date picker
• Checkbox: Checkbox
• Select: Dropdown list
• File: File upload

🏗️ Architecture

┌─────────────────────────────────────────────────┐
│           C# DTO Classes                        │
│   [AutoCRUD] [GridColumn] [FormField]          │
└────────────────┬────────────────────────────────┘
                 │
                 ▼
┌─────────────────────────────────────────────────┐
│         MetadataGenerator (Reflection)          │
│   - ScanAssemblyForEntities()                   │
│   - GenerateMetadata<T>()                       │
└────────────────┬────────────────────────────────┘
                 │
                 ▼
┌─────────────────────────────────────────────────┐
│         JSON Metadata (REST API)                │
│   GET /api/metadata                             │
│   GET /api/metadata/{entityName}                │
└────────────────┬────────────────────────────────┘
                 │
                 ▼
┌─────────────────────────────────────────────────┐
│         Frontend (React/Vue/Angular)            │
│   - DynamicGrid Component                       │
│   - DynamicForm Component                       │
└─────────────────────────────────────────────────┘

📊 JSON Metadata Format

{
  "entityName": "ProductDto",
  "title": "Products",
  "icon": "📦",
  "route": "/products",
  "description": "Product management",
  "grid": {
    "columns": [
      {
        "propertyName": "Id",
        "title": "Id",
        "type": "number",
        "order": 1,
        "width": 80,
        "sortable": true,
        "format": null,
        "hidden": false
      },
      {
        "propertyName": "Name",
        "title": "Name",
        "type": "string",
        "order": 2,
        "width": 200,
        "sortable": true,
        "format": null,
        "hidden": false
      }
    ]
  },
  "form": {
    "fields": [
      {
        "propertyName": "Name",
        "label": "Product Name",
        "type": "text",
        "required": true,
        "maxLength": 250,
        "placeholder": "Enter name",
        "order": 1,
        "readOnly": false
      }
    ]
  }
}

🔧 Advanced Usage

Assembly Scanning

To automatically discover all DTOs:

var generator = new MetadataGenerator();
var assembly = typeof(ProductDto).Assembly;
var allEntities = generator.ScanAssemblyForEntities(assembly);

// allEntities: metadata for all classes with [AutoCRUD] attribute

Adding Custom Field Types

You can extend the FieldType enum to add your own field types:

public enum CustomFieldType
{
    // Standard types
    Text = 0,
    Number = 1,
    // ...

    // Custom types
    RichTextEditor = 100,
    ColorPicker = 101,
    ImageUploader = 102
}

🧪 Test Examples

Simple Entity

[AutoCRUD(Title = "Categories", Icon = "📁", Route = "/categories")]
public class CategoryDto
{
    [GridColumn(Order = 1, Width = 80)]
    [FormField(ReadOnly = true)]
    public int Id { get; set; }

    [GridColumn(Order = 2, Width = 200)]
    [FormField(Label = "Category Name", Type = FieldType.Text, Required = true, MaxLength = 100, Order = 1)]
    public string Name { get; set; } = string.Empty;
}

Related Entity

[AutoCRUD(Title = "Products", Icon = "📦", Route = "/products")]
public class ProductDto
{
    [GridColumn(Order = 1, Width = 80)]
    [FormField(ReadOnly = true)]
    public int Id { get; set; }

    [GridColumn(Order = 2, Width = 200)]
    [FormField(Label = "Product Name", Type = FieldType.Text, Required = true, Order = 1)]
    public string Name { get; set; } = string.Empty;

    [GridColumn(Order = 3, Width = 150)]
    [FormField(Label = "Category", Type = FieldType.Select, Required = true, Order = 2)]
    public int CategoryId { get; set; }

    [GridColumn(Order = 4, Width = 150)]
    public string? CategoryName { get; set; }
}

🛠️ Technologies

• .NET 8.0
• System.Reflection - For metadata generation
• Microsoft.EntityFrameworkCore - For entity support

🌐 Frontend Integration

React Components (npm)

For automatic UI generation in React, use our companion npm package:

npm install @mehmetyoldas/chd-auto-ui-react

Complete Integration Example:

// 1. Backend: C# DTO with attributes
[AutoCRUD(Title = "Products", Icon = "📦")]
public class ProductDto
{
    [GridColumn(Order = 1)] [FormField(Type = FieldType.Text)]
    public int Id { get; set; }

    [GridColumn(Order = 2)] [FormField(Type = FieldType.Text, Required = true)]
    public string Name { get; set; }
}

// 2. API Controller
[HttpGet("metadata")]
public IActionResult GetMetadata() => Ok(MetadataGenerator.GenerateMetadata<ProductDto>());

// 3. Frontend: React components
import { DynamicForm, DynamicGrid } from '@mehmetyoldas/chd-auto-ui-react';

function ProductManager() {
    return (
        <div>
            <DynamicForm 
                apiUrl="/api/products"
                metadataUrl="/api/products/metadata" 
            />
            <DynamicGrid 
                apiUrl="/api/products"
                metadataUrl="/api/products/metadata"
            />
        </div>
    );
}

📖 React Package Documentation: npm package

📝 License

MIT License

🤝 Contributing

1. Fork the project
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📞 Contact

Chd Framework - metadata-driven UI generation

🔗 Related Projects

• Chd.AutoUI.EF - Generic Repository Pattern
• Chd.Pos - POS Demo Application
• Chd.StockTracking - Stock Tracking Demo Application