From 563e12c72857bbb8440208b707e17e0b54ef568b Mon Sep 17 00:00:00 2001
From: Denis Voituron <dvoituron@outlook.com>
Date: Thu, 12 Sep 2024 12:33:32 +0200
Subject: [PATCH] Update the designer

---
 .../Documentation/Theme/TokenEditor.razor     | 74 ++++++++++++-------
 .../Documentation/Theme/TokenEditor.razor.cs  | 22 ++++--
 .../Documentation/Theme/TokenEditor.razor.css |  7 ++
 .../Documentation/Theme/TokenItem.cs          | 47 ++++++++++++
 4 files changed, 119 insertions(+), 31 deletions(-)
 create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenEditor.razor.css
 create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenItem.cs

diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenEditor.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenEditor.razor
index 5b3ca51cd..78e3494f2 100644
--- a/examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenEditor.razor
+++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenEditor.razor
@@ -1,30 +1,54 @@
 @using Microsoft.AspNetCore.Components.Forms
 
-<div style="@Style">
-    <table>
-        <thead>
-            <tr>
-                <th>Name</th>
-                <th>Value</th>
-            </tr>
-        </thead>
-        <tbody>
-            @foreach (var token in Tokens)
-            {
-                var name = token.Key;
-                var item = token.Value;
+<div style="@Style" class="theme-token-editor">
 
-                <tr>
-                    <td>
-                        <strong>@name</strong>
-                    </td>
-                    <td>
-                        <InputText type="@(item.Type == "number" ? "number" : "text")"
-                                   @bind-Value="@item.ValueAsString"
-                                   @bind-Value:after="@ApplyThemeAsync" />
-                    </td>
-                </tr>
+    @foreach (var mainSection in Tokens.Select(i => i.Value.MainSection).Distinct())
+    {
+        <details>
+            <summary>
+                @mainSection
+            </summary>
+
+            @foreach (var subSection in Tokens.Where(i => i.Value.MainSection == mainSection).Select(i => i.Value.SubSection).Distinct())
+            {
+                <details style="margin-left: 24px;">
+                    <summary>
+                        @subSection
+                    </summary>
+
+                    <table>
+                        <tbody>
+                            @foreach (var token in Tokens.Where(i => i.Value.MainSection == mainSection && i.Value.SubSection == subSection))
+                            {
+                                var name = token.Key;
+                                var item = token.Value;
+
+                                <tr>
+                                    <td>
+                                        <strong>@name</strong>
+                                    </td>
+                                    <td style="display: flex;">
+                                        @if (GetInputType(item) == "color")
+                                        {
+                                            <InputText @bind-Value="@item.ValueAsString"
+                                                       @bind-Value:after="@ApplyThemeAsync" />
+                                            <InputText type="color"
+                                                       @bind-Value="@item.ValueAsString"
+                                                       @bind-Value:after="@ApplyThemeAsync" />
+                                        }
+                                        else
+                                        {
+                                            <InputText type="@GetInputType(item)"
+                                                       @bind-Value="@item.ValueAsString"
+                                                       @bind-Value:after="@ApplyThemeAsync" />
+                                        }
+                                    </td>
+                                </tr>
+                            }
+                        </tbody>
+                    </table>
+                </details>
             }
-        </tbody>
-    </table>
+        </details>
+    }
 </div>
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenEditor.razor.cs b/examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenEditor.razor.cs
index 36010223a..596cee865 100644
--- a/examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenEditor.razor.cs
+++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenEditor.razor.cs
@@ -41,18 +41,28 @@ public partial class TokenEditor
         {
             var tokensJson = await JSRuntime.InvokeAsync<JsonElement>("Blazor.theme.getAllTokensValues");
             Tokens = JsonSerializer.Deserialize<Dictionary<string, TokenItem>>(tokensJson.GetRawText(), JsonOptions) ?? [];
+
+            foreach (var token in Tokens)
+            {
+                token.Value.Name = token.Key;
+            }
+
             StateHasChanged();
         }
     }
 
-    private class TokenItem
+    private static string GetInputType(TokenItem token)
     {
-        public string Type { get; set; } = string.Empty;
-        public object Value { get; set; }= string.Empty;
-        public string ValueAsString
+        if (token.Type == "number")
         {
-            get => Value?.ToString() ?? string.Empty;
-            set => Value = value;
+            return "number";
         }
+
+        if (token.MainSection == "color")
+        {
+            return "color";
+        }
+
+        return "text";
     }
 }
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenEditor.razor.css b/examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenEditor.razor.css
new file mode 100644
index 000000000..74be71a59
--- /dev/null
+++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenEditor.razor.css
@@ -0,0 +1,7 @@
+.theme-token-editor ::deep input {
+  width: 100px;
+}
+
+.theme-token-editor ::deep input[type='color'] {
+  width: 24px;
+}
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenItem.cs b/examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenItem.cs
new file mode 100644
index 000000000..d9762c5d9
--- /dev/null
+++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenItem.cs
@@ -0,0 +1,47 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
+using System.Text.RegularExpressions;
+
+namespace FluentUI.Demo.Client.Documentation.Theme;
+
+internal class TokenItem
+{
+    private string? _mainSection;
+    private string? _subSection;
+
+    public string Name { get; set; } = string.Empty;
+
+    public string Type { get; set; } = string.Empty;
+
+    public object Value { get; set; } = string.Empty;
+
+    public string ValueAsString
+    {
+        get => Value?.ToString() ?? string.Empty;
+        set => Value = value;
+    }
+
+    public string MainSection => _mainSection ??= GetMainSectionName(Name);
+
+    public string SubSection => _subSection ??= GetSubSectionName(Name);
+
+    private static string GetMainSectionName(string value)
+    {
+        var pattern = @"^[a-z]+";
+        var match = Regex.Match(value, pattern);
+
+        return match.Success ? match.Value : string.Empty;
+    }
+
+    private static string GetSubSectionName(string value)
+    {
+        var pattern = @"^[a-z]+([A-Z][a-z]+)";
+        var match = Regex.Match(value, pattern);
+
+        return match.Success && match.Groups.Count > 1
+            ? match.Groups[1].Value
+            : string.Empty;
+    }
+}