Merge pull request #1 from AathifMahir/initial

Initial Preview Release of Bridge
AathifMahir · Jun 25, 2024 · f5b5ff8 · f5b5ff8
2 parents 7ca17ec + f9544be
commit f5b5ff8
Show file tree

Hide file tree

Showing 100 changed files with 1,064 additions and 500 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,132 @@
-# MauiBlazorBridge
+# MauiBlazorBridge
+
+MauiBlazorBridge is a Helper Utitlity That Makes Easier for Maui Blazor Hybrid Developers to Seamlessly Detect Platform, FormFactor and Etc..
+
+|**Latest Stable** | **Latest Preview**|
+|  :---:     |    :---:   |
+|[![AathifMahir.Maui.MauiShakeDetector](https://img.shields.io/nuget/v/AathifMahir.MauiBlazor.MauiBlazorBridge)](https://www.nuget.org/packages/AathifMahir.MauiBlazor.MauiBlazorBridge/) | [![AathifMahir.Maui.MauiShakeDetector](https://img.shields.io/nuget/vpre/AathifMahir.MauiBlazor.MauiBlazorBridge)](https://nuget.org/packages/AathifMahir.MauiBlazor.MauiBlazorBridge/absoluteLatest) |
+
+# Get Started
+
+**1.** In order to use the **MauiBlazorHybrid** you need to call the extension method in your **Program.cs** file as follows: 
+
+```csharp
+builder.Services.AddMauiBlazorBridge();
+```
+
+**2.** In the `_imports.razor` file, you need to import the namespace as follows:
+
+```razor
+@using MauiBlazorBridge
+```
+
+**3.** In `MainLayout.razor` file, you need to add `BridgeProvider` to Initialize the Bridge. Additionally Setting `GlobalListener` Property to True Makes Bridge to Listen to FormFactor Changes Globaly Instead of Creating and Disposing Listener During the Usage of `BridgeFormFactor` Component
+
+```html
+@inherits LayoutComponentBase
+<div class="page">
+    <div class="sidebar">
+        <NavMenu />
+    </div>
+
+    <main>
+        <article class="content px-4">
+            @Body
+        </article>
+        <!-- Add BridgeProvider -->
+        <BridgeProvider/>
+    </main>
+</div>
+```
+
+**Disclaimer:** When it comes PreRendering Enabled Blazor Flavor, You don't need to add `BridgeProvider` in `MainLayout.razor` file, Instead you need to add `BridgeProvider` in all the different Blazor Components that Utilizes Bridge. Additionally you need to Enable Interactivity for that Specific Component or Page
+
+# Usage
+
+```html
+@inject IBridge Bridge
+
+<BridgeFormFactor>
+    <Mobile>
+        <h3>FormFactor : Mobile</h3>
+    </Mobile>
+    <Tablet>
+        <h3>FormFactor : Tablet</h3>
+    </Tablet>
+    <Desktop>
+        <h3>FormFactor : Desktop</h3>
+    </Desktop>
+    <Default>
+        <h3>FormFactor : Unknown</h3>
+    </Default>
+</BridgeFormFactor>
+
+<h3>Platform : @Bridge.Platform</h3>
+<h3>Platform Version : @Bridge.PlatformVersion</h3>
+<h3>FrameWork : @Bridge.Framework</h3>
+```
+
+# Components
+
+### BridgeFormFactor
+
+```html
+<BridgeFormFactor>
+    <Mobile>
+        <h3>FormFactor : Mobile</h3>
+    </Mobile>
+    <Tablet>
+        <h3>FormFactor : Tablet</h3>
+    </Tablet>
+    <Desktop>
+        <h3>FormFactor : Desktop</h3>
+    </Desktop>
+    <Default>
+        <h3>FormFactor : Unknown</h3>
+    </Default>
+</BridgeFormFactor>
+```
+
+### BridgePlatform
+
+```html
+<BridgePlatform>
+	<Android>
+		<h3>Platform : Android</h3>
+	</Android>
+	<IOS>
+		<h3>Platform : iOS</h3>
+	</IOS>
+	<Windows>
+		<h3>Platform : Windows</h3>
+	</Windows>
+	<Mac>
+		<h3>Platform : MacCatalyst</h3>
+	</Mac>
+	<Default>
+		<h3>Platform : Unknown</h3>
+	</Default>
+</BridgePlatform>
+ ```
+
+ ### BridgeFramework
+
+ ```html
+ <BridgeFramework>
+   <Maui>
+    <h3>Framework : Maui</h3>
+   </Maui>
+   <Blazor>
+   <h3>Framework : Blazor</h3>
+   </Blazor>
+ </BridgeFramework>
+ ```
+
+ # Note
+
+ The Documentation is Under Construction, More Features and Components will be Added Soon.
+
+ # License
+
+ MauiBlazorBridge is licensed under the **MIT** license
+
diff --git a/images/icon.png b/images/icon.png
diff --git a/sample/MauiBlazorBridge.Blazor.Sample/Layout/MainLayout.razor b/sample/MauiBlazorBridge.Blazor.Sample/Layout/MainLayout.razor
@@ -12,6 +12,6 @@
         <article class="content px-4">
             @Body
         </article>
-        <BridgeContainer EnableListener="true"/>
+        <BridgeProvider/>
     </main>
 </div>
diff --git a/sample/MauiBlazorBridge.Blazor.Sample/MauiBlazorBridge.Blazor.Sample.csproj b/sample/MauiBlazorBridge.Blazor.Sample/MauiBlazorBridge.Blazor.Sample.csproj
@@ -6,6 +6,22 @@
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
 
+  <ItemGroup>
+    <Content Remove="wwwroot\helloService.js" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <_ContentIncludedByDefault Remove="wwwroot\helloService.js" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Content Include="Services\HelloService.cs" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <None Include="wwwroot\helloService.js" />
+  </ItemGroup>
+
   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.5" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.5" PrivateAssets="all" />

diff --git a/sample/MauiBlazorBridge.Blazor.Sample/Pages/BridgePage.razor b/sample/MauiBlazorBridge.Blazor.Sample/Pages/BridgePage.razor
@@ -1,20 +1,21 @@
 @page "/bridge"
 @inject IBridge Bridge
 
-<BridgeIdiom>
+<BridgeFormFactor>
     <Mobile>
-        <h3>Current Idiom : Mobile</h3>
+        <h3>FormFactor : Mobile</h3>
     </Mobile>
     <Tablet>
-        <h3>Current Idiom : Tablet</h3>
+        <h3>FormFactor : Tablet</h3>
     </Tablet>
     <Desktop>
-        <h3>Current Idiom : Desktop</h3>
+        <h3>FormFactor : Desktop</h3>
     </Desktop>
     <Default>
-        <h3>Current Idiom : Unknown</h3>
+        <h3>FormFactor : Unknown</h3>
     </Default>
-</BridgeIdiom>
+</BridgeFormFactor>
 
-<h3>Current Platform : @Bridge.Platform</h3>
-<h3>Current FrameWork : @Bridge.Framework</h3>
+<h3>Platform : @Bridge.Platform</h3>
+<h3>Platform Version : @Bridge.PlatformVersion</h3>
+<h3>FrameWork : @Bridge.Framework</h3>
diff --git a/sample/MauiBlazorBridge.Blazor.Sample/Program.cs b/sample/MauiBlazorBridge.Blazor.Sample/Program.cs
@@ -9,6 +9,6 @@
 
 builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
 
-builder.Services.UseMauiBlazorBridge();
+builder.Services.AddMauiBlazorBridge();
 
 await builder.Build().RunAsync();
diff --git a/sample/MauiBlazorBridge.Blazor.Sample/_Imports.razor b/sample/MauiBlazorBridge.Blazor.Sample/_Imports.razor
@@ -9,4 +9,3 @@
 @using MauiBlazorBridge.Blazor.Sample
 @using MauiBlazorBridge.Blazor.Sample.Layout
 @using MauiBlazorBridge
-@using MauiBlazorBridge.Common
diff --git a/sample/MauiBlazorBridge.Blazor.Server.Sample/Components/App.razor b/sample/MauiBlazorBridge.Blazor.Server.Sample/Components/App.razor
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <base href="/" />
+    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
+    <link rel="stylesheet" href="app.css" />
+    <link rel="stylesheet" href="MauiBlazorBridge.Blazor.Server.Sample.styles.css" />
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <HeadOutlet />
+</head>
+
+<body>
+    <Routes/>
+    <script src="_framework/blazor.web.js"></script>
+</body>
+
+</html>
diff --git a/...Sample/Components/Layout/MainLayout.razor → ...Sample/Components/Layout/MainLayout.razor b/...Sample/Components/Layout/MainLayout.razor → ...Sample/Components/Layout/MainLayout.razor
@@ -1,5 +1,4 @@
 @inherits LayoutComponentBase
-@inject IBridge Bridge
 
 <div class="page">
     <div class="sidebar">
@@ -14,14 +13,12 @@
         <article class="content px-4">
             @Body
         </article>
+
     </main>
 </div>
 
-@code
-{
-    protected async override Task OnAfterRenderAsync(bool firstRender)
-    {
-        await Bridge.InitializeAsync(true);
-    }
-
-}
+<div id="blazor-error-ui">
+    An unhandled error has occurred.
+    <a href="" class="reload">Reload</a>
+    <a class="dismiss">🗙</a>
+</div>
diff --git a/...le/Components/Layout/MainLayout.razor.css → ...le/Components/Layout/MainLayout.razor.css b/...le/Components/Layout/MainLayout.razor.css → ...le/Components/Layout/MainLayout.razor.css
@@ -27,23 +27,23 @@ main {
         text-decoration: none;
     }
 
-        .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
-            text-decoration: underline;
-        }
+    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+        text-decoration: underline;
+    }
 
-        .top-row ::deep a:first-child {
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
+    .top-row ::deep a:first-child {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 
 @media (max-width: 640.98px) {
     .top-row {
         justify-content: space-between;
     }
 
-        .top-row ::deep a, .top-row ::deep .btn-link {
-            margin-left: 0;
-        }
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        margin-left: 0;
+    }
 }
 
 @media (min-width: 641px) {
@@ -64,14 +64,33 @@ main {
         z-index: 1;
     }
 
-        .top-row.auth ::deep a:first-child {
-            flex: 1;
-            text-align: right;
-            width: 0;
-        }
+    .top-row.auth ::deep a:first-child {
+        flex: 1;
+        text-align: right;
+        width: 0;
+    }
 
     .top-row, article {
         padding-left: 2rem !important;
         padding-right: 1.5rem !important;
     }
 }
+
+#blazor-error-ui {
+    background: lightyellow;
+    bottom: 0;
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
+    display: none;
+    left: 0;
+    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
+    position: fixed;
+    width: 100%;
+    z-index: 1000;
+}
+
+    #blazor-error-ui .dismiss {
+        cursor: pointer;
+        position: absolute;
+        right: 0.75rem;
+        top: 0.5rem;
+    }
diff --git a/...ed.Sample/Components/Layout/NavMenu.razor → ...er.Sample/Components/Layout/NavMenu.razor b/...ed.Sample/Components/Layout/NavMenu.razor → ...er.Sample/Components/Layout/NavMenu.razor
@@ -1,39 +1,35 @@
 <div class="top-row ps-3 navbar navbar-dark">
     <div class="container-fluid">
-        <a class="navbar-brand" href="">MauiBlazorBridge.SingleProject.Sample</a>
-        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
-            <span class="navbar-toggler-icon"></span>
-        </button>
+        <a class="navbar-brand" href="">MauiBlazorBridge.Blazor.Server.Sample</a>
     </div>
 </div>
 
-<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
+<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
+
+<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
     <nav class="flex-column">
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                 <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
             </NavLink>
         </div>
+
         <div class="nav-item px-3">
-            <NavLink class="nav-link" href="bridge">
-                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Bridge
+            <NavLink class="nav-link" href="counter">
+                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
             </NavLink>
         </div>
+
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="weather">
                 <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
             </NavLink>
         </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="bridge">
+                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Bridge
+            </NavLink>
+        </div>
     </nav>
 </div>
 
-@code {
-    private bool collapseNavMenu = true;
-
-    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
-
-    private void ToggleNavMenu()
-    {
-        collapseNavMenu = !collapseNavMenu;
-    }
-}