Chd.AutoUI 8.0.3

Chd.AutoUI – Attribute-Driven UI Metadata for .NET

Chd (Cleverly Handle Difficulty) AutoUI helps you cleverly handle UI complexity, write less code, and keep your application maintainable. It enables rapid, type-safe, and maintainable UI development by generating rich metadata from C# attributes. Build dynamic forms and grids for your frontend with zero JavaScript or manual JSON.

📝 Table of Contents

• About
• Features
• Installation
• Usage
  • C# Metadata Generation
  • React Integration
• Attribute Reference
• Roadmap
• Contributing & License

About

Chd.AutoUI is a .NET library that lets you define UI structure, validation, and behavior directly in your C# DTOs using attributes. It generates JSON metadata for dynamic UI rendering in any frontend framework.

Features

• Attribute-driven: [AutoCRUD], [GridColumn], [FormField]
• 20+ field types: text, number, date, dropdown, multiselect, file, autocomplete, rich text editor, tag input, image preview, tree select, color picker, date range, stepper, etc.
• Type-safe, reflection-based metadata
• Works with any frontend (React, Vue, Angular, Blazor)
• Extensible: add custom field types/attributes
• Minimal configuration, rapid prototyping

Installation

dotnet add package Chd.AutoUI

Code review & Public API (quick reference)

If you are reviewing the codebase or integrating with the library, these are the most useful public-facing classes and methods to inspect:

• Chd.AutoUI.Services.MetadataGenerator

  • GenerateMetadata(Type type) (internal) — generates EntityMetadata for a given CLR Type. Important for understanding how attributes map to JSON metadata.
  • ScanAssemblyForEntities(Assembly assembly) (internal) — scans an assembly for types annotated with [AutoCRUD] and returns a list of EntityMetadata.
  • GetTypeScriptType(Type type) (private) — type mapping used for frontend type hints.

• Chd.AutoUI.Extensions.AutoUIExtensions (extension methods)

  • UseAutoUI(WebApplicationBuilder, Assembly, Func<UserModel, UserDTO>) — configures AutoUI endpoints and JWT-based identity endpoints.
  • MapAutoUIMetadata(IEndpointRouteBuilder, Assembly) — registers /api/metadata and /api/metadata/{entityName} routes.

Important files to review when customizing metadata or extending field types:

• Attributes/* — AutoCRUDAttribute, FormFieldAttribute, GridColumnAttribute, FieldType enum and permission attributes.
• Models/EntityMetadata.cs — JSON shape used by frontend libraries.
• Services/MetadataGenerator.cs — core reflection logic and permission extraction.

Tips:

• Extend FieldType enum and update FormFieldAttribute + FormMetadata if you need new frontend controls.
• When adding new attributes, ensure MetadataGenerator.GenerateMetadata maps them into FormMetadata/GridMetadata.

Authentication note: The library has internal support for JWT-based integration used in product deployments. Implementation details (token service, authorization middleware) are considered internal and are not documented in this public README. For integration guidance, see internal docs or ask the dev team.

I can generate a small example showing how to add a custom RichTextEditor field and register a custom React renderer if you want.

Usage

C# Metadata Generation

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; }
}

using Chd.AutoUI.Attributes;
using Chd.AutoUI.Services;

[AutoCRUD(Title = "Products", Icon = "📦", Route = "/products")]
public class ProductDto
{
    [GridColumn(Order = 1, Width = 80)]
    [FormField(Label = "Product Name", Type = FieldType.Text, Required = true, MaxLength = 250, Order = 1)]
    public string Name { get; set; } = string.Empty;
    [GridColumn(Order = 2, Width = 150, Format = "currency")]
    [FormField(Label = "Price", Type = FieldType.Number, Required = true, Order = 2)]
    public decimal Price { get; set; }
}

// Generate metadata
var generator = new MetadataGenerator();
var metadata = generator.GenerateMetadata<ProductDto>();
var json = JsonSerializer.Serialize(metadata);

API Endpoint Example

[ApiController]
[Route("api/[controller]")]
public class MetadataController : ControllerBase
{
    [HttpGet("metadata")]
    public IActionResult GetMetadata() => Ok(MetadataGenerator.GenerateMetadata<ProductDto>());
}

React Integration

Chd.AutoUI can be used seamlessly with modern frontend frameworks. For a complete React integration, see:

• chd-auto-ui-react on npm
• React Integration Guide (README)

Highlights:

• Instantly generate dynamic forms and grids in React using the metadata produced by Chd.AutoUI attributes.
• No manual field or validation code required in React—just use <DynamicForm /> and <DynamicGrid />.
• Role-based UI, validation, and all business rules are always in sync with your backend C# code.

Example React usage:

import { DynamicForm, DynamicGrid, setApiBase } from '@mehmetyoldas/chd-auto-ui-react';

setApiBase('https://localhost:5218/api');

function App() {
  return (
    <>
      <DynamicGrid endpoint="products" />
      <DynamicForm endpoint="products" />
    </>
  );
}

For more details and advanced usage, see the React README.

Attribute Reference

[AutoCRUD] (class)

Defines entity-level UI settings (title, icon, route, description).

[GridColumn] (property)

Defines grid/table columns (order, width, format, sortable, hidden).

[FormField] (property)

Defines form fields (label, type, required, maxLength, placeholder, order, readOnly).

Supported Field Types:

• Text, Number, Email, Password, TextArea, Date, DateTime, Checkbox, Select, MultiSelect, Radio, File

Additional supported/new Field Types:

• Autocomplete: remote search + selection (min chars, endpoint)
• RichTextEditor: HTML/WYSIWYG editor (editor config)
• TagInput: freeform tags with optional suggestions
• ImagePreview: image upload with preview/gallery support
• TreeSelect: hierarchical selection from related tree entities
• ColorPicker: color selection (hex/rgb)
• DateRangePicker: two-date range selection
• Stepper: multi-step/wizard grouping

Roadmap

• React integration (DynamicForm, DynamicGrid)
• Vue.js support (planned)
• Angular support (planned)
• Blazor support (planned)
• Svelte support (planned)
• Custom field type extensibility (advanced)
• Improved validation and localization
• More UI frameworks and themes
• Advanced grid features (grouping, export, etc.)
• Better documentation and samples

Contributing & License

Contributions are welcome! Please open issues or pull requests for bugfixes, features, or documentation.

Licensed under the MIT License.

📋 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

Permissions Attributes

The library includes class-level permission attributes that the metadata generator recognizes and maps into the permissions section of the emitted metadata. These live in Chd.AutoUI.Attributes.PermissionsAttributes and are:

• CreatePermissionAttribute(params string[] roles)
• UpdatePermissionAttribute(params string[] roles)
• DeletePermissionAttribute(params string[] roles)

Example usage on a DTO:

[AutoCRUD(Title = "Products")]
[CreatePermission("Admin", "Manager")]
[UpdatePermission("Admin", "Editor")]
[DeletePermission("Admin")]
public class ProductDto { /* ... */ }

What the metadata generator produces (fragment):

"permissions":{
  "create": ["Admin","Manager"],
  "read": [],
  "update": ["Admin","Editor"],
  "delete": ["Admin"]
}

Notes:

• MetadataGenerator also falls back to reading an [Authorize] attribute (roles or policy) if custom permission attributes are not provided.
• Frontend should consume permissions to show/hide actions (create/edit/delete) or disable UI controls according to the current user's roles.

🏗️ 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