added basic renderer component

src/FormBuilder.DesignerApp/Pages/Renderer.razor

@@ -1,3 +1,20 @@
 @page "/renderer"
 
 <RadzenText TextStyle="TextStyle.H3">Renderer</RadzenText>
+
+<RadzenStack Class="vh-100" Orientation="Orientation.Vertical" Gap="1rem">
+    <FormRenderer></FormRenderer>
+
+    <RadzenText TextStyle="TextStyle.Subtitle1">
+        Specify either Form ID or JSON design to load into renderer
+    </RadzenText>
+    <RadzenFormField Text="Form ID">
+        <RadzenTextBox Value="@_formId" ReadOnly="true"/>
+    </RadzenFormField>
+    <RadzenFormField Text="Form JSON">
+        <RadzenTextArea @bind-Value="_formJson" Rows="20"/>
+    </RadzenFormField>
+    <div>
+        <RadzenButton Text="Load Form" Click="LoadFormAsync" Disabled="_isLoading"/>
+    </div>
+</RadzenStack>

src/FormBuilder.DesignerApp/Pages/Renderer.razor.cs

@@ -1,7 +1,67 @@
-using Microsoft.AspNetCore.Components;
+using FormBuilder.Services;
+using Microsoft.AspNetCore.Components;
+using Radzen;
 
 namespace FormBuilder.DesignerApp.Pages;
 
 public partial class Renderer : ComponentBase
 {
+    private string? _formId;
+    private string? _formJson;
+    private bool _isLoading;
+
+    #region Injected Services
+
+    [Inject]
+    private FormService FormService { get; set; } = default!;
+
+    [Inject] 
+    private NotificationService NotificationService { get; set; } = default!;
+
+    #endregion
+
+    private Task LoadFormAsync()
+    {
+        if (!string.IsNullOrEmpty(_formId))
+        {
+            return LoadFormByIdAsync(_formId);
+        }
+
+        if (!string.IsNullOrEmpty(_formJson))
+        {
+            return HandleFormDeserialization(_formJson);
+        }
+
+        return Task.CompletedTask;
+    }
+
+    private async Task LoadFormByIdAsync(string id)
+    {
+        _isLoading = true;
+        var result = await FormService.GetFormByIdAsync(id);
+
+        if (result is { Success: true, Data.FormDesign: not null })
+        {
+            await HandleFormDeserialization(result.Data.FormDesign);
+        }
+        else
+        {
+            NotificationService.NotifyError(result.Error!);
+        }
+
+        _isLoading = false;
+    }
+
+    private async Task HandleFormDeserialization(string formDesign)
+    {
+        var formDefinition = await FormService.DeserializeFormDesignAsync(formDesign);
+        if (formDefinition != null)
+        {
+            NotificationService.NotifySuccess("Form loaded successfully.");
+        }
+        else
+        {
+            NotificationService.NotifyError("Failed to deserialize form design.");
+        }
+    }
 }

src/FormBuilder/Components/FormBuilder.razor

@@ -1,6 +1,6 @@
 @using global::FormBuilder.Models
 
-<RadzenRow class="vh-100">
+<RadzenRow Class="vh-100">
     <RadzenColumn Size="12" SizeMD="9" SizeLG="10">
         <RadzenStack Orientation="Orientation.Vertical" Gap="1rem">
             @if (_formId is not null)

src/FormBuilder/Components/FormBuilder.razor.cs

@@ -13,7 +13,6 @@ namespace FormBuilder.Components;
 public partial class FormBuilder : ComponentBase
 {
     private FormDefinition _formDefinition = new();
-
     private string _formDesignJson = "{}";
     private string? _formId;
     private bool _isLoading;
@@ -152,11 +151,11 @@ private Task OpenLoadFormDialogAsync()
     {
         return DialogService.OpenAsync<LoadFormDialog>("Load Form", new Dictionary<string, object>
         {
-            { "FormLoaded", EventCallback.Factory.Create<FormCreatedEventArgs>(this, LoadForm) }
+            { "FormLoaded", EventCallback.Factory.Create<FormLoadedEventArgs>(this, LoadForm) }
         });
     }
 
-    private Task LoadForm(FormCreatedEventArgs args)
+    private Task LoadForm(FormLoadedEventArgs args)
     {
         _formId = args.FormId;
         _formDefinition = args.FormDefinition;

src/FormBuilder/Components/FormRenderer.razor

@@ -0,0 +1,11 @@
+<RadzenTemplateForm TItem="object">
+    <RadzenFieldset Text="@GetFormTitle()" Style="max-height: 600px; overflow-y: auto">
+        <RadzenStack Orientation="Orientation.Vertical" Gap="0.5rem">
+            @foreach (var field in _formDefinition.Fields)
+            {
+            <FormField Field="field">
+            </FormField>
+            }
+        </RadzenStack>
+    </RadzenFieldset>
+</RadzenTemplateForm>

src/FormBuilder/Components/FormRenderer.razor.cs

@@ -0,0 +1,55 @@
+using FormBuilder.Models;
+using FormBuilder.Services;
+using Microsoft.AspNetCore.Components;
+using Radzen;
+
+namespace FormBuilder.Components;
+
+public partial class FormRenderer : ComponentBase
+{
+    private FormDefinition _formDefinition = new();
+    private bool _isLoading;
+
+    #region Injected Services
+
+    [Inject]
+    private FormService FormService { get; set; } = default!;
+
+    [Inject] 
+    private NotificationService NotificationService { get; set; } = default!;
+
+    #endregion
+
+    #region Parameters
+
+    [Parameter]
+    public string? FormId { get; set; }
+
+    [Parameter]
+    public string? FormJson { get; set; }
+
+    [Parameter]
+    public EventCallback<string?> FormIdChanged { get; set; }
+
+    [Parameter]
+    public EventCallback<string?> FormJsonChanged { get; set; }
+
+    #endregion
+
+    private string GetFormTitle()
+    {
+        return $"Form: {_formDefinition.Name}, ID: {FormId}";
+    }
+
+    private async Task UpdateFormDesignJsonAsync()
+    {
+        FormJson = await FormService.SerializeFormDesignAsync(_formDefinition, true);
+    }
+
+    private Task LoadForm(FormLoadedEventArgs args)
+    {
+        FormId = args.FormId;
+        _formDefinition = args.FormDefinition;
+        return UpdateFormDesignJsonAsync();
+    }
+}

src/FormBuilder/Components/LoadFormDialog.razor.cs

@@ -25,7 +25,7 @@ public partial class LoadFormDialog : ComponentBase
     #region Parameters
 
     [Parameter]
-    public EventCallback<FormCreatedEventArgs> FormLoaded { get; set; }
+    public EventCallback<FormLoadedEventArgs> FormLoaded { get; set; }
 
     #endregion
 
@@ -54,7 +54,7 @@ private Task LoadFormAsync()
 
         if (!string.IsNullOrEmpty(_formModel.FormDesign))
         {
-            return HandleFormDesignDeserialization(_formModel.FormDesign, null);
+            return HandleFormDeserialization(_formModel.FormDesign, null);
         }
 
         return Task.CompletedTask;
@@ -68,7 +68,7 @@ private async Task LoadFormByIdAsync(string id)
 
         if (result is { Success: true, Data.FormDesign: not null })
         {
-            await HandleFormDesignDeserialization(result.Data.FormDesign, _formModel.Id);
+            await HandleFormDeserialization(result.Data.FormDesign, _formModel.Id);
         }
         else
         {
@@ -78,12 +78,12 @@ private async Task LoadFormByIdAsync(string id)
         _isLoading = false;
     }
 
-    private async Task HandleFormDesignDeserialization(string formDesign, string? id)
+    private async Task HandleFormDeserialization(string formDesign, string? id)
     {
-        var formDefinition = FormService.DeserializeFormDesign(formDesign);
+        var formDefinition = await FormService.DeserializeFormDesignAsync(formDesign);
         if (formDefinition != null)
         {
-            await FormLoaded.InvokeAsync(new FormCreatedEventArgs(id, formDefinition));
+            await FormLoaded.InvokeAsync(new FormLoadedEventArgs(id, formDefinition));
             NotificationService.NotifySuccess("Form loaded successfully.");
         }
         else
@@ -93,4 +93,4 @@ private async Task HandleFormDesignDeserialization(string formDesign, string? id
     }
 }
 
-public record FormCreatedEventArgs(string? FormId, FormDefinition FormDefinition);
+public record FormLoadedEventArgs(string? FormId, FormDefinition FormDefinition);

src/FormBuilder/Services/FormService.cs

@@ -1,4 +1,5 @@
 using System.Net.Http.Json;
+using System.Text;
 using System.Text.Json;
 using System.Text.Json.Serialization;
 using FormBuilder.Models;
@@ -8,7 +9,7 @@
 
 namespace FormBuilder.Services;
 
-internal class FormService
+public class FormService
 {
     private readonly HttpClient _httpClient;
     private readonly JsonSerializerOptions _jsonSerializerDefaultOptions;
@@ -72,6 +73,29 @@ public FormService(FormBuilderOptions options, IMemoryCache cache)
             return null;
         }
     }
+
+    /// <summary>
+    /// Asynchronously deserializes the form design JSON string into a FormDefinition object.
+    /// </summary>
+    /// <param name="formDesign">
+    /// Serialized form design JSON string from FormDefinition object.
+    /// </param>
+    /// <returns>
+    /// FormDefinition object if deserialization is successful, otherwise null.
+    /// </returns>
+    public async Task<FormDefinition?> DeserializeFormDesignAsync(string formDesign)
+    {
+        try
+        {
+            using var ms = new MemoryStream(Encoding.UTF8.GetBytes(formDesign));
+            return await JsonSerializer.DeserializeAsync<FormDefinition>(ms, _jsonSerializerDefaultOptions);
+        }
+        catch (JsonException e)
+        {
+            Console.WriteLine("Failed to deserialize form design. Error: {0}", e);
+            return null;
+        }
+    }
 
     /// <summary>
     /// Serializes the FormDefinition object into a JSON string.