Dotnetconf samples (#33)

* Basic example tests

* Add missing MarkupMatches overload

* Added docs to MockHttp extensions

* dotnet conf samples

Author: egil

.gitignore

@@ -328,3 +328,4 @@ ASALocalRun/
 
 # MFractors (Xamarin productivity tool) working folder 
 .mfractor/
+*.playlist

sample/src/Components/Alert.razor

@@ -0,0 +1,73 @@
+@inject IJSRuntime jsRuntime
+
+@if (IsVisible)
+{
+    <div role="alert" @attributes="AdditionalAttributes" class=@CssClass>
+        @if (Header is { })
+        {
+            <h4 class="alert-heading">@Localizer[Header]</h4>
+        }
+        <div class="alert-content">
+            @ChildContent
+        </div>
+        <button @onclick="DismissClicked" type="button" class="close" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+        </button>
+    </div>
+}
+
+@code {
+    private const string DefaultCssClass = "alert alert-info alert-dismissible fade";
+
+    private string ShowCssClass => Dismissing ? "" : "show";
+    private string CssClass => AdditionalAttributes?.ContainsKey("class") ?? false
+        ? $"{DefaultCssClass} {AdditionalAttributes["class"]} {ShowCssClass}"
+        : $"{DefaultCssClass} {ShowCssClass}";
+
+    private bool Dismissing { get; set; }
+
+    [CascadingParameter]
+    private Localizer Localizer { get; set; } = Localizer.Empty;
+
+    [Parameter(CaptureUnmatchedValues = true)]
+    public IReadOnlyDictionary<string, object>? AdditionalAttributes { get; set; }
+
+    [Parameter]
+    public string? Header { get; set; }
+
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    [Parameter]
+    public EventCallback<DismissingEventArgs> OnDismissing { get; set; }
+
+    [Parameter]
+    public EventCallback<Alert> OnDismissed { get; set; }
+
+    public bool IsVisible { get; private set; } = true;
+
+    public async Task Dismiss()
+    {
+        await DismissClicked();
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private async Task DismissClicked()
+    {
+        var dismissingArgs = new DismissingEventArgs(this);
+
+        await OnDismissing.InvokeAsync(dismissingArgs);
+
+        if (dismissingArgs.Cancel)
+            return;
+
+        Dismissing = true;
+
+        await jsRuntime.InvokeVoidAsync("window.transitionFinished");
+
+        Dismissing = false;
+        IsVisible = false;
+
+        await OnDismissed.InvokeAsync(this);
+    }
+}

sample/src/Components/DismissingEventArgs.cs

@@ -0,0 +1,20 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Egil.RazorComponents.Testing.SampleApp.Components
+{
+    public class DismissingEventArgs
+    {
+        public Alert Sender { get; }
+
+        public bool Cancel { get; set; }
+
+        public DismissingEventArgs(Alert sender)
+        {
+            Sender = sender;
+        }
+    }
+}

sample/src/Components/Paragraph.razor

@@ -0,0 +1,15 @@
+@if(ChildContent is { })
+{
+    <p class=@CssClass>
+        @ChildContent
+    </p>
+}
+@code{
+    private string CssClass => IsLast ? "mb-0" : string.Empty;
+
+    [Parameter]
+    public bool IsLast { get; set; }
+
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+}

sample/src/Components/WikiSearch.razor

@@ -1,6 +1,6 @@
 @inject IJSRuntime jsRuntime
 
-<p>@searchResult</p>
+<pre class="pre-scrollable w-50">@searchResult</pre>
 
 @code {
     string searchResult = string.Empty;

sample/src/Data/Localizer.cs

@@ -0,0 +1,30 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components;
+
+namespace Egil.RazorComponents.Testing.SampleApp.Data
+{
+    public class Localizer
+    {
+        private readonly Dictionary<string, string> _localizations
+            = new Dictionary<string, string>();
+
+        public string CultureCode { get; set; } = "en";
+
+        public string this[string key]
+        {
+            get => _localizations.TryGetValue(key, out var localized)
+                ? localized
+                : key;
+        }
+
+        public void Add(string key, string text)
+        {
+            _localizations.Add(key, text);
+        }
+
+        public static Localizer Empty { get; } = new Localizer();
+    }
+}

sample/src/Pages/DotNetConf.razor

@@ -0,0 +1,33 @@
+@page "/dotnetconf"
+
+<Alert Header="It is time to focus on Blazor"
+       OnDismissing="DissingAlert"
+       OnDismissed="DismissedAlert"
+       @ref="alert">
+    <p class="mb-0">.NET Conf: Focus on Blazor is a free, one-day livestream event that features speakers from the community and .NET product teams that are working on building web apps with C# and Blazor. You don't need to use JavaScript anymore with Blazor technology! Blazor lets you build interactive web UIs using C# instead of JavaScript.</p>
+</Alert>
+
+<h1>Hello .NET Conf</h1>
+<p><button @onclick="_ => alert?.Dismiss()" class="btn btn-primary">Dismiss alert</button></p>
+<h3>Alert status:</h3>
+<ol>
+    @foreach (var msg in dismissMessages)
+    {
+        <li class="h4">@msg</li>
+    }
+</ol>
+
+@code {
+    Alert? alert;
+    private List<string> dismissMessages = new List<string>();
+
+    private void DissingAlert(DismissingEventArgs dismissingEvent)
+    {
+        dismissMessages.Add($"Alert Dismissing");
+    }
+
+    private void DismissedAlert(Alert dismissedAlert)
+    {
+        dismissMessages.Add($"Alert Dismissed");
+    }
+}

sample/src/Pages/_Host.cshtml

@@ -23,6 +23,12 @@
             return fetch('https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&search=' + query)
                 .then(x => x.text());
         }
+
+        function transitionFinished() {
+            return new Promise(function (resolve, reject) {
+                setTimeout(resolve, 1000);
+            });
+        }
     </script>
 </body>
 </html>

sample/src/Shared/NavMenu.razor

@@ -27,6 +27,11 @@
                 <span class="oi oi-circle-check" aria-hidden="true"></span> Todos
             </NavLink>
         </li>
+        <li class="nav-item px-3">
+            <NavLink class="nav-link" href="dotnetconf">
+                <span class="oi oi-eye" aria-hidden="true"></span> Alert example
+            </NavLink>
+        </li>
     </ul>
 </div>