FractalDataWorks.UI.Components 0.1.0-preview.28

FractalDataWorks.UI.Components

Backend-agnostic UI data models for configuration forms.

Overview

This package provides concrete component model implementations including TextInput, Select, MultiSelect, Numeric, DatePicker, Checkbox, and Page models. These models are framework-independent and can be rendered by Spectre.Console, RazorConsole, Blazor, or other UI backends.

Installation

dotnet add package FractalDataWorks.UI.Components

Component Models

This package provides data models that implement the interfaces from FractalDataWorks.UI.Abstractions.

TextInputModel

From TextInputModel.cs:9-59:

public sealed class TextInputModel : IInputComponentModel<string>
{
    public string Id { get; set; } = "";
    public string? Label { get; set; }
    public string? HelpText { get; set; }
    public string? Placeholder { get; set; }
    public bool IsRequired { get; set; }
    public bool IsReadOnly { get; set; }
    public bool IsVisible { get; set; } = true;
    public int Order { get; set; }
    public string? Value { get; set; }
    public string? DefaultValue { get; set; }
    public int? MaxLength { get; set; }
    public int? MinLength { get; set; }
    public string? Pattern { get; set; }
    public bool IsPassword { get; set; }
    public bool IsMultiline { get; set; }
    public Type ValueType => typeof(string);
}

PageModel

From PageModel.cs:13-72:

public sealed class PageModel : IPageModel
{
    private readonly List<SectionModel> _sections = [];

    public string Id { get; set; } = "";
    public string Title { get; set; } = "";
    public string? Description { get; set; }
    public IReadOnlyList<ISectionModel> Sections => _sections.AsReadOnly();
    public IPageMode Mode { get; set; } = PageModes.View;
    public bool HasChanges { get; set; }

    public void AddSection(SectionModel section)
    {
        _sections.Add(section);
    }

    public ValidationResult Validate()
    {
        var results = _sections
            .SelectMany(s => s.AllComponents)
            .Select(c => c.Validate())
            .ToList();

        return ValidationResult.Combine(results.ToArray());
    }
}

SectionModel Factory Methods

From PageModel.cs:132-166:

// Single column section
var section = SectionModel.SingleColumn("basics", "Basic Information",
    new TextInputModel { Id = "name", Label = "Name", IsRequired = true },
    new TextInputModel { Id = "description", Label = "Description" });

// Two column section
var twoColSection = SectionModel.TwoColumns(
    "details",
    "Details",
    leftComponents: new IComponentModel[] { /* left column */ },
    rightComponents: new IComponentModel[] { /* right column */ });

Validation

Component models implement validation via ValidationResult. From TextInputModel.cs:91-129:

public ValidationResult Validate()
{
    if (IsRequired && string.IsNullOrWhiteSpace(Value))
    {
        return ValidationResult.Error($"{Label ?? Id} is required.");
    }

    if (MinLength.HasValue && Value?.Length < MinLength.Value)
    {
        return ValidationResult.Error($"{Label ?? Id} must be at least {MinLength.Value} characters.");
    }

    if (MaxLength.HasValue && Value?.Length > MaxLength.Value)
    {
        return ValidationResult.Error($"{Label ?? Id} must not exceed {MaxLength.Value} characters.");
    }

    if (CustomValidator != null)
    {
        return CustomValidator(Value);
    }

    return ValidationResult.Success();
}

Key Types

IRenderMode (TypeCollection)

Render modes are defined as a TypeCollection in FractalDataWorks.UI.Abstractions. From IRenderMode.cs:9-20:

public interface IRenderMode : ITypeOption<int, RenderModeBase>
{
    bool AllowsEditing { get; }
    bool ShowsView { get; }
}

Available modes (from TypeOptions in the Abstractions package):

Access via TypeCollection lookup: RenderModes.ByName("Edit") or RenderModes.View.

IComponentModel

From IComponentModel.cs:18-63:

public interface IComponentModel
{
    string Id { get; }
    string? Label { get; }
    string? HelpText { get; }
    bool IsRequired { get; }
    bool IsReadOnly { get; }
    bool IsVisible { get; }
    int Order { get; }
    ValidationResult Validate();
}

Dependencies

• FractalDataWorks.UI.Abstractions - Core interfaces and base classes
• FractalDataWorks.Collections - TypeCollection support

Related Packages

• FractalDataWorks.UI.Components.Blazor - Blazor component implementations
• FractalDataWorks.UI.Components.TUI - Spectre.Console TUI components
• FractalDataWorks.UI.Components.RazorConsole - Razor-based console rendering
• FractalDataWorks.UI.Rendering.Spectre - Spectre page renderers
• FractalDataWorks.UI.DependencyInjection - Service registration

Next Steps

• See FractalDataWorks.UI.Abstractions for base classes and interfaces
• See FractalDataWorks.UI.Rendering.Spectre for console rendering
• See FractalDataWorks.UI.Components.Blazor for web rendering