added docs files

BlazorFormBuilder.sln

@@ -9,6 +9,9 @@ EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Docs", "Docs", "{110FAC20-0129-403C-9946-1529A61D5960}"
 	ProjectSection(SolutionItems) = preProject
 		README.md = README.md
+		docs\integration-guide.md = docs\integration-guide.md
+		docs\form-renderer.md = docs\form-renderer.md
+		docs\api-reference.md = docs\api-reference.md
 	EndProjectSection
 EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Scripts", "Scripts", "{1CF934BD-6E84-458A-8BA9-B35C6CB684D5}"

docs/api-reference.md

@@ -0,0 +1,14 @@
+# Form Builder REST API Reference
+
+The Form Builder REST API provides endpoints to manage forms and list of values (LOV).
+You can use the Form Builder API to create, update, delete, and retrieve forms and LOV data.
+
+## Form API
+- `GET /api/forms`: Get all forms in the form of paged response.
+    - Query Parameters:
+        - `page`: The non-zero-based page number. Default is 1.
+        - `pageSize`: The number of items per page. Default is 10.
+    - Response:
+        - `pageSize`: The number of items per page.
+        - `pagesCount`: The total number of available pages.
+        - `data`: An array of form data.

docs/form-renderer.md

@@ -0,0 +1,51 @@
+# Form Renderer Component Reference
+
+The Form Renderer component is used to render forms in that designed by the `FormEditor` component.
+You can specify either the `FormId` or `FormJson` property to render a form.
+
+## FormRenderer Properties
+- `FormId`: The ID of the form to render. It fetches form data from the API based on the ID.
+- `FormJson`: The JSON data of the form to render. You can pass the JSON data of the form directly to the component.
+- `IsLoadingForm`: A boolean value that indicates whether the form is loading and rendering.
+
+## FormRenderer Events
+- `IsLoadingFormChanged`: An event that is triggered when the `IsLoadingForm` property changes. You can use this event to perform additional actions when the form is loading.
+- `FormLoaded`: An event that is triggered when the form is loaded and rendered. You can use this event to perform additional actions when the form is loaded.
+
+## FormRenderer public methods
+- `LoadFormFromIdAsync(string formId)`: A method that loads the form data from the API based on the form ID.
+- `LoadFormFromJsonAsync(string formJson)`: A method that loads the form data from the JSON data.
+- `GetFormAsJsonAsync()`: A method that returns the JSON data of the rendered form.
+
+## Examples
+## Render a form using FormId or FormJson properties
+```html
+<FormRenderer FormId="1" />
+```
+```html
+<FormRenderer FormJson="@formJson" />
+```
+
+## Render a form dynamically using methods
+```html
+<FormRenderer @ref="formRendererRef" />
+
+<RadzenTextBox @bind-Value="_formId" />
+<RadzenButton Text="Load Form" Click="@LoadForm" />
+```
+```csharp
+@code {
+    private FormRenderer? formRendererRef;
+    private string? _formId;
+
+    private async Task LoadForm()
+    {
+        if (formRendererRef is null || string.IsNullOrEmpty(_formId))
+        {
+            return;
+        }
+
+        await formRenderer.LoadFormFromIdAsync(_formId);
+    }
+}
+```

docs/integration-guide.md

@@ -0,0 +1,58 @@
+# How to integrate FormBuilder with your Blazor application
+
+This guide explains how to integrate the Blazor Form Builder with your existing Blazor application. The integration process involves the following steps:
+
+1. **Add the FormBuilder Razor class library to your Blazor application**:
+    Add the `FormBuilder` Razor class library to your Blazor application as a project reference.
+
+2. **Register the FormBuilder services**:
+    Add `AddFormBuilder()` to the service collection in the `Program.cs` file. 
+    Also, you need to pass `FormApiUrl` to the `AddFormBuilder()` method. The `FormApiUrl` is the URL of the Form Builder API.
+    For example:
+    ```csharp
+    builder.Services.AddFormBuilder(options =>
+    {
+        options.FormApiUrl = "https://localhost:8000";
+    });
+    ```
+
+3. **Add styles and scripts**:
+    Include the required styles and scripts in the `index.html` file.
+    Add the following styles to the `head` section:
+    ```html
+    <link href="_content/FormBuilder/css/app.css" rel="stylesheet" />
+    ```
+    The `app.css` file includes styles for Radzen components and Bootstrap 5.
+    Alternatively, you can directly include Radzen styles and Bootstrap in your application.
+    For example:
+    ```html
+    <link href="_content/Radzen.Blazor/css/standard-base.css" rel="stylesheet" /> <!-- Radzen standard theme -->
+    <link href="_content/{YOUR_APPLICATION_NAME}/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
+    ```
+    Add the following scripts to the `body` section:
+    ```html
+    <script src="_content/FormBuilder/js/app.js"></script>
+    ```
+    The `app.js` file includes scripts for Radzen components.
+    Alternatively, you can directly include Radzen scripts in your application.
+    For example:
+    ```html
+    <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
+    ```
+4. **Use FormEditor component**:
+    Use the `FormEditor` component in your Blazor application to design forms.
+    For example:
+    ```html
+    <FormEditor />
+    ```
+
+5. **Use FormRenderer component**:
+    Use the `FormRenderer` component in your Blazor application to render forms.
+    For example:
+    ```html
+    <FormRenderer FormId="1" />
+    ```
+
+You can view a sample Blazor application that integrates the Blazor Form Builder in the `src/FormBuilder.DesignerApp` project. 
+The sample application demonstrates how to design and render forms using the Blazor Form Builder components.
+

src/FormBuilder.DesignerApp/Program.cs

@@ -9,7 +9,7 @@
 
 var formBuilderOptions = new FormBuilderOptions
 {
-    FormApiUrl = builder.Configuration["FormBuilderOptions:FormApiUrl"]
+    FormApiHost = builder.Configuration["FormBuilder:FormApiHost"]
 };
 
 builder.Services.AddFormBuilder(formBuilderOptions);

src/FormBuilder.DesignerApp/wwwroot/appsettings.json

@@ -1,5 +1,5 @@
 {
-  "FormBuilderOptions": {
-    "FormApiUrl": "https://localhost:7000"
+  "FormBuilder": {
+    "FormApiHost": "https://localhost:7000"
   }
 }

src/FormBuilder/Components/FormField.razor

@@ -55,6 +55,7 @@
             <RadzenText TextStyle="TextStyle.Caption">
                 <span class="text-danger">*</span> required
             </RadzenText>
+            <RadzenRequiredValidator Component="@Field.Name" />
         }
     </Helper>
 </RadzenFormField>

src/FormBuilder/FormBuilderOptions.cs

@@ -2,5 +2,5 @@
 
 public record FormBuilderOptions
 {
-    public string? FormApiUrl { get; init; }
+    public string? FormApiHost { get; init; }
 }

src/FormBuilder/Services/FormService.cs

@@ -19,16 +19,16 @@ public class FormService
 
     public FormService(FormBuilderOptions options, IMemoryCache cache)
     {
-        if (string.IsNullOrEmpty(options.FormApiUrl))
+        if (string.IsNullOrEmpty(options.FormApiHost))
         {
-            throw new ArgumentException(nameof(options.FormApiUrl));
+            throw new ArgumentException(nameof(options.FormApiHost));
         }
 
         _cache = cache;
 
         _httpClient = new HttpClient
         {
-            BaseAddress = new Uri(options.FormApiUrl)
+            BaseAddress = new Uri(options.FormApiHost)
         };
 
         _jsonSerializerDefaultOptions = new JsonSerializerOptions

src/FormBuilder/Services/IFormService.cs

@@ -0,0 +1,6 @@
+namespace FormBuilder.Services;
+
+public interface IFormService
+{
+
+}