Added Story book for UI components

Inc.TeamAssistant.sln

@@ -100,6 +100,8 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Inc.TeamAssistant.Reviewer.
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Inc.TeamAssistant.CheckIn.Geo", "src\Inc.TeamAssistant.CheckIn.Geo\Inc.TeamAssistant.CheckIn.Geo.csproj", "{41B5195D-3C81-4501-9278-57FA95F973FD}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Inc.TeamAssistant.Stories", "src\Inc.TeamAssistant.Stories\Inc.TeamAssistant.Stories.csproj", "{DA961B87-B9F3-4A4E-8C2B-F91101FB07CB}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -256,6 +258,10 @@ Global
 		{41B5195D-3C81-4501-9278-57FA95F973FD}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{41B5195D-3C81-4501-9278-57FA95F973FD}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{41B5195D-3C81-4501-9278-57FA95F973FD}.Release|Any CPU.Build.0 = Release|Any CPU
+		{DA961B87-B9F3-4A4E-8C2B-F91101FB07CB}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{DA961B87-B9F3-4A4E-8C2B-F91101FB07CB}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{DA961B87-B9F3-4A4E-8C2B-F91101FB07CB}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{DA961B87-B9F3-4A4E-8C2B-F91101FB07CB}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(NestedProjects) = preSolution
 		{B9C88CA2-123E-4D55-A931-91B0CFA08447} = {BF819FCA-A383-4283-B680-4B80B7B5CA32}
@@ -304,5 +310,6 @@ Global
 		{E9547AEE-D2E2-4550-B95B-DFB1C0D7FFE8} = {406F731E-8D99-4D37-88F1-EE5D38C54662}
 		{504EF63F-2C47-44FC-BB22-F199C7DF7251} = {1943C11E-7A4A-4300-BDC1-DA333BD3EBED}
 		{41B5195D-3C81-4501-9278-57FA95F973FD} = {15DCF7E1-1D36-4C21-A623-35A1D037A4DA}
+		{DA961B87-B9F3-4A4E-8C2B-F91101FB07CB} = {8285EFA4-C244-455D-94D1-86994A904BFF}
 	EndGlobalSection
 EndGlobal

src/Inc.TeamAssistant.Gateway/Inc.TeamAssistant.Gateway.csproj

@@ -15,7 +15,7 @@
       <ProjectReference Include="..\Inc.TeamAssistant.Appraiser.DataAccess\Inc.TeamAssistant.Appraiser.DataAccess.csproj" />
     </ItemGroup>
     <ItemGroup>
-      <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="8.0.3" />
+      <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="8.0.8" />
       <PackageReference Include="Net.Codecrete.QrCodeGenerator" Version="2.0.4" />
       <PackageReference Include="prometheus-net.AspNetCore" Version="8.2.1" />
       <PackageReference Include="prometheus-net.AspNetCore.HealthChecks" Version="8.2.1" />

src/Inc.TeamAssistant.Gateway/Program.cs

@@ -96,7 +96,7 @@
 builder.Services
 	.AddHolidays(CachePolicies.CacheAbsoluteExpiration)
 	.AddServices(authOptions, openGraphOptions, builder.Environment.WebRootPath, CachePolicies.CacheAbsoluteExpiration)
-	.AddIsomorphic()
+	.AddIsomorphicServices()
 	.AddAppraiserApplication(linksOptions.ConnectToDashboardLinkTemplate)
 	.AddAppraiserDataAccess()
 	.AddCheckInApplication(linksOptions.ConnectToMapLinkTemplate)

src/Inc.TeamAssistant.Stories/App.razor

@@ -0,0 +1,6 @@
+<BlazingStoryApp
+    EnableHotReloading="true"
+    Title="TeamAssistUI docs"
+    Assemblies="[typeof(App).Assembly]"
+    DefaultLayout="typeof(DefaultLayout)"
+    AvailableColorSchemes="AvailableColorSchemes.Dark"/>

src/Inc.TeamAssistant.Stories/App.razor.css

@@ -0,0 +1 @@
+

src/Inc.TeamAssistant.Stories/Components/Button.stories.razor

@@ -0,0 +1,45 @@
+@attribute [Stories("Components/Button")]
+
+<Stories TComponent="Button">
+    <ArgType For="c => c.ButtonMode" Control="ControlType.Select" />
+    <ArgType For="c => c.ButtonType" Control="ControlType.Select" />
+    <Story Name="Default" Layout="typeof(DarkLayout)">
+        <Arguments>
+            <Arg For="c => c.Content" Value='ToRenderFragment("Default")' />
+        </Arguments>
+        <Template>
+            <Button @attributes="context.Args"></Button>
+        </Template>
+    </Story>
+    <Story Name="Small" Layout="typeof(DarkLayout)">
+        <Arguments>
+            <Arg For="c => c.Content" Value='ToRenderFragment("Small")' />
+            <Arg For="c => c.ButtonMode" Value="ButtonMode.Small" />
+        </Arguments>
+        <Template>
+            <Button @attributes="context.Args"></Button>
+        </Template>
+    </Story>
+    <Story Name="Dark" Layout="typeof(LightLayout)">
+        <Arguments>
+            <Arg For="c => c.Content" Value='ToRenderFragment("Dark")' />
+            <Arg For="c => c.IsDark" Value="true" />
+        </Arguments>
+        <Template>
+            <Button @attributes="context.Args"></Button>
+        </Template>
+    </Story>
+    <Story Name="Disabled" Layout="typeof(DarkLayout)">
+        <Arguments>
+            <Arg For="c => c.Content" Value='ToRenderFragment("Disabled")' />
+            <Arg For="c => c.IsDisabled" Value="true" />
+        </Arguments>
+        <Template>
+            <Button @attributes="context.Args"></Button>
+        </Template>
+    </Story>
+</Stories>
+
+@code {
+    private RenderFragment ToRenderFragment(string value) => b => b.AddContent(0, value);
+}

src/Inc.TeamAssistant.Stories/Inc.TeamAssistant.Stories.csproj

@@ -0,0 +1,13 @@
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+  <PropertyGroup>
+    <GenerateDocumentationFile>True</GenerateDocumentationFile>
+  </PropertyGroup>
+  <ItemGroup>
+    <PackageReference Include="BlazingStory" Version="1.0.0-preview.41" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.8" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.8" PrivateAssets="all" />
+  </ItemGroup>
+  <ItemGroup>
+    <ProjectReference Include="..\Inc.TeamAssistant.WebUI\Inc.TeamAssistant.WebUI.csproj" />
+  </ItemGroup>
+</Project>

src/Inc.TeamAssistant.Stories/Program.cs

@@ -0,0 +1,12 @@
+using Inc.TeamAssistant.Stories;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
+builder.RootComponents.Add<App>("#app");
+builder.RootComponents.Add<HeadOutlet>("head::after");
+
+builder.Services
+    .AddScoped(_ => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+
+await builder.Build().RunAsync();

src/Inc.TeamAssistant.Stories/Properties/launchSettings.json

@@ -0,0 +1,14 @@
+{
+  "profiles": {
+    "Inc.TeamAssistant.Stories": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "applicationUrl": "http://localhost:5198",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}

src/Inc.TeamAssistant.Stories/Shared/DarkLayout.razor

@@ -0,0 +1,5 @@
+@inherits LayoutComponentBase
+
+<div class="dark-layout">
+    @Body
+</div>

src/Inc.TeamAssistant.Stories/Shared/DefaultLayout.razor

@@ -0,0 +1,3 @@
+@inherits LayoutComponentBase
+
+@Body

src/Inc.TeamAssistant.Stories/Shared/LightLayout.razor

@@ -0,0 +1,5 @@
+@inherits LayoutComponentBase
+
+<div class="light-light">
+    @Body
+</div>

src/Inc.TeamAssistant.Stories/_Imports.razor

@@ -0,0 +1,15 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.Web.Virtualization
+@using Microsoft.AspNetCore.Components.WebAssembly.Http
+@using Microsoft.JSInterop
+@using BlazingStory.Components
+@using BlazingStory.Types
+@using Inc.TeamAssistant.Stories
+@using Inc.TeamAssistant.Stories.Shared
+@using Inc.TeamAssistant.Stories.Components
+
+@using Inc.TeamAssistant.WebUI.Components

src/Inc.TeamAssistant.Stories/wwwroot/css/blazor-ui.css

@@ -0,0 +1,89 @@
+#blazor-error-ui {
+    background: #ffffe0;
+    bottom: 0;
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
+    display: none;
+    left: 0;
+    padding: .6rem 1.25rem .7rem 1.25rem;
+    position: fixed;
+    right: 0;
+    z-index: 1000
+}
+
+#blazor-error-ui .dismiss {
+    cursor: pointer;
+    position: absolute;
+    right: .75rem;
+    top: .5rem
+}
+
+.blazor-error-boundary {
+    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
+    padding: 1rem 1rem 1rem 3.7rem;
+    color: white;
+}
+
+.blazor-error-boundary::after {
+    content: "An error has occurred."
+}
+
+.loading-progress {
+    position: fixed;
+    inset: 0;
+    background: #f6f9fc;
+}
+
+.loading-progress svg {
+    position: relative;
+    display: block;
+    width: 8rem;
+    height: 8rem;
+    margin: 20vh auto 1rem auto;
+}
+
+.loading-progress svg circle {
+    fill: none;
+    stroke: #e0e0e0;
+    stroke-width: 0.6rem;
+    transform-origin: 50% 50%;
+    transform: rotate(-90deg);
+}
+
+.loading-progress svg circle:last-child {
+    stroke: #542fd4;
+    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
+    transition: stroke-dasharray 0.05s ease-in-out;
+}
+
+.loading-progress img {
+    position: absolute;
+    width: 44px;
+    height: 44px;
+    margin: auto;
+    inset: calc(20vh + 3.2rem - 22px) 0 auto 0;
+}
+
+.loading-progress .text {
+    position: absolute;
+    text-align: center;
+    font-weight: bold;
+    inset: calc(20vh + 4.8rem) 0 auto 0.2rem;
+}
+
+.loading-progress .text:after {
+    content: var(--blazor-load-percentage-text, "Loading");
+}
+
+@media (prefers-color-scheme: dark) {
+    .loading-progress {
+        background-color: #222425;
+    }
+
+    .loading-progress svg circle {
+        stroke: #393a3b;
+    }
+
+    .loading-progress .text {
+        color: #c9cdcf;
+    }
+}

src/Inc.TeamAssistant.Stories/wwwroot/css/team-assistant-theme.css

@@ -0,0 +1,10 @@
+.dark-layout {
+    background-color: #616161;
+    padding: 20px;
+    min-height: 400px;
+}
+.light-light {
+    background-color: #dfdfdf;
+    padding: 20px;
+    min-height: 400px;
+}

src/Inc.TeamAssistant.Stories/wwwroot/iframe.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TeamAssistUI docs</title>
+    <base href="/" />
+    <!--
+    If you need to add <link> or <script> elements to include CSS
+    or JavaScript files for canvas views of your Stories, 
+    YOU SHOULD PLACE THEM HERE, not in the "index.html" file.
+    -->
+    <link rel="stylesheet" href="css/blazor-ui.css" />
+    <link rel="stylesheet" href="css/team-assistant-theme.css" />
+    <link rel="stylesheet" href="Inc.TeamAssistant.Stories.styles.css" />
+</head>
+
+<body>
+    <div id="app">
+    </div>
+
+    <div id="blazor-error-ui">
+        An unhandled error has occurred.
+        <a href="" class="reload">Reload</a>
+        <a class="dismiss">🗙</a>
+    </div>
+
+    <!--
+    If you need to add <script> elements to include 
+    JavaScript files for canvas views of your Stories, 
+    YOU SHOULD PLACE THEM HERE, not in the "index.html" file.
+    -->
+    <script src="_framework/blazor.webassembly.js"></script>
+</body>
+
+</html>

src/Inc.TeamAssistant.Stories/wwwroot/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TeamAssistUI docs</title>
+    <base href="/" />
+    <!--
+    DON'T PUT ANY ADDITIONAL CSS OR JAVASCRIPT LINKS IN THIS FILE.
+    Please do that in the "iframe.html" instead.
+    -->
+    <link rel="stylesheet" href="css/blazor-ui.css" />
+</head>
+
+<body>
+    <div id="app">
+        <div class="loading-progress">
+            <svg>
+                <circle r="40%" cx="50%" cy="50%" />
+                <circle r="40%" cx="50%" cy="50%" />
+            </svg>
+            <div class="text"></div>
+            <img src="_content/BlazingStory/images/icon.min.svg" />
+        </div>
+    </div>
+
+    <div id="blazor-error-ui">
+        An unhandled error has occurred.
+        <a href="" class="reload">Reload</a>
+        <a class="dismiss">🗙</a>
+    </div>
+
+    <!--
+    DON'T PUT ANY ADDITIONAL JAVASCRIPT LINKS IN THIS FILE.
+    Please do that in the "iframe.html" instead.
+    -->
+    <script src="_framework/blazor.webassembly.js"></script>
+</body>
+
+</html>