From d9c8de767318074ea52ecd59a8cc62c13ff2d324 Mon Sep 17 00:00:00 2001 From: Shewart Date: Wed, 14 Jan 2026 17:10:45 +0200 Subject: [PATCH 01/40] docs: enhance COMPONENTS.md and README.md with detailed properties, usage examples, and updated ASCII logo for ShellUI Native --- docs/COMPONENTS.md | 176 +++++++++++++++++++++++++++++++++------------ docs/README.md | 18 ++++- 2 files changed, 148 insertions(+), 46 deletions(-) diff --git a/docs/COMPONENTS.md b/docs/COMPONENTS.md index 252ba91..c493ee0 100644 --- a/docs/COMPONENTS.md +++ b/docs/COMPONENTS.md @@ -15,100 +15,182 @@ shellui-native add button **Sizes:** Sm, Default, Lg, Icon +**Properties:** +| Property | Type | Default | Description | +|----------|------|---------|-------------| +| Variant | ButtonVariant | Default | Visual style variant | +| Size | ButtonSize | Default | Button size | +| Text | string | "" | Button text | +| IsLoading | bool | false | Shows loading indicator | +| IsEnabled | bool | true | Enable/disable button | + **Usage:** ```xml ``` +**Events:** `Clicked` + --- ### Input -*(Coming Soon)* - Text input field with validation support. ```bash shellui-native add input ``` ---- +**Properties:** +| Property | Type | Default | Description | +|----------|------|---------|-------------| +| Text | string | "" | Input value (two-way binding) | +| Placeholder | string | "" | Placeholder text | +| IsPassword | bool | false | Mask input as password | +| HasError | bool | false | Show error state | +| IsReadOnly | bool | false | Prevent editing | +| MaxLength | int | int.MaxValue | Maximum characters | -### Label -*(Coming Soon)* +**Usage:** +```xml + + + +``` -Text label for form fields. +**Events:** `TextChanged`, `Completed` + +--- + +### Label (ShellLabel) +Typography label with size, weight, and color variants. ```bash shellui-native add label ``` +**Properties:** +| Property | Type | Default | Description | +|----------|------|---------|-------------| +| Text | string | "" | Label text | +| Size | LabelSize | Default | Font size (Xs, Sm, Default, Lg, Xl, Xxl, Xxxl) | +| Weight | LabelWeight | Normal | Font weight (Light, Normal, Medium, Semibold, Bold) | +| Variant | LabelVariant | Default | Color variant (Default, Muted, Destructive, Success, Warning) | + +**Usage:** +```xml + + + +``` + --- -### Checkbox -*(Coming Soon)* +## Layout Components -Checkbox input for boolean values. +### Card +Container for grouping related content with header, content, and footer. ```bash -shellui-native add checkbox +shellui-native add card ``` ---- - -### Switch -*(Coming Soon)* +**Variants:** Default, Bordered, Elevated -Toggle switch for on/off states. +**Properties:** +| Property | Type | Default | Description | +|----------|------|---------|-------------| +| Variant | CardVariant | Default | Visual style variant | +| IsPressable | bool | false | Enable tap interactions | -```bash -shellui-native add switch +**Usage:** +```xml + + + + + + + + ``` +**Events:** `Clicked` (when IsPressable=true) + --- -## Layout Components +### CardHeader +Header section for Card with title and description. -### Card -*(Coming Soon)* +```bash +shellui-native add card-header +``` + +**Properties:** +| Property | Type | Default | Description | +|----------|------|---------|-------------| +| Title | string | "" | Header title text | +| Description | string | "" | Optional subtitle/description | + +--- -Container for grouping related content. +### CardContent +Main content section for Card. ```bash -shellui-native add card +shellui-native add card-content ``` -**Sub-components:** CardHeader, CardTitle, CardDescription, CardContent, CardFooter +**Properties:** +| Property | Type | Default | Description | +|----------|------|---------|-------------| +| NoPadding | bool | false | Remove default padding | --- -### Separator -*(Coming Soon)* - -Visual divider between content. +### CardFooter +Footer section for Card, typically used for actions. ```bash -shellui-native add separator +shellui-native add card-footer ``` +**Properties:** +| Property | Type | Default | Description | +|----------|------|---------|-------------| +| Orientation | StackOrientation | Horizontal | Layout direction | +| Justify | FooterJustify | End | Content alignment (Start, Center, End, SpaceBetween) | + --- ## Data Display ### Badge -*(Coming Soon)* - -Small label for status or counts. +Small status indicator with color variants. ```bash shellui-native add badge ``` +**Variants:** Default, Secondary, Destructive, Outline, Success, Warning + +**Properties:** +| Property | Type | Default | Description | +|----------|------|---------|-------------| +| Text | string | "" | Badge text | +| Variant | BadgeVariant | Default | Color variant | + +**Usage:** +```xml + + + +``` + --- ### Skeleton -*(Coming Soon)* - -Loading placeholder animation. +*(Coming Soon)* - Loading placeholder animation. ```bash shellui-native add skeleton @@ -117,9 +199,7 @@ shellui-native add skeleton --- ### Progress -*(Coming Soon)* - -Progress bar indicator. +*(Coming Soon)* - Progress bar indicator. ```bash shellui-native add progress @@ -130,9 +210,7 @@ shellui-native add progress ## Feedback ### Alert -*(Coming Soon)* - -Contextual feedback messages. +*(Coming Soon)* - Contextual feedback messages. ```bash shellui-native add alert @@ -143,9 +221,7 @@ shellui-native add alert ## Navigation ### Tabs -*(Coming Soon)* - -Tabbed navigation interface. +*(Coming Soon)* - Tabbed navigation interface. ```bash shellui-native add tabs @@ -162,7 +238,10 @@ shellui-native add button # Multiple components shellui-native add button input card -# With --force to overwrite +# Card with all sub-components +shellui-native add card card-header card-content card-footer + +# With --force to overwrite existing shellui-native add button --force ``` @@ -178,3 +257,12 @@ shellui-native list --installed # Only available (not installed) shellui-native list --available ``` + +## Component Dependencies + +When you add a component, its dependencies are automatically installed: + +| Component | Auto-installs | +|-----------|---------------| +| button | button-variants | +| card | card-header, card-content, card-footer | diff --git a/docs/README.md b/docs/README.md index ab52168..c6e734b 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,6 +1,20 @@ -# ShellUI Native +
-> One design system, every platform +``` +███████╗██╗ ██╗███████╗██╗ ██╗ ██╗ ██╗██╗ ███╗ ██╗ █████╗ ████████╗██╗██╗ ██╗███████╗ +██╔════╝██║ ██║██╔════╝██║ ██║ ██║ ██║██║ ████╗ ██║██╔══██╗╚══██╔══╝██║██║ ██║██╔════╝ +███████╗███████║█████╗ ██║ ██║ ██║ ██║██║ ██████╗ ██╔██╗ ██║███████║ ██║ ██║██║ ██║█████╗ +╚════██║██╔══██║██╔══╝ ██║ ██║ ██║ ██║██║ ╚═════╝ ██║╚██╗██║██╔══██║ ██║ ██║╚██╗ ██╔╝██╔══╝ +███████║██║ ██║███████╗███████╗███████╗╚██████╔╝██║ ██║ ╚████║██║ ██║ ██║ ██║ ╚████╔╝ ███████╗ +╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝╚══════╝ ╚═════╝ ╚═╝ ╚═╝ ╚═══╝╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚═══╝ ╚══════╝ +``` + +**One design system, every platform** + +[![NuGet](https://img.shields.io/nuget/v/ShellUI.Native.CLI.svg)](https://www.nuget.org/packages/ShellUI.Native.CLI) +[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](../LICENSE) + +
ShellUI Native is the native cross-platform extension of ShellUI, bringing the same design system and component philosophy to MAUI, WinUI, WPF, and other native platforms. Inspired by shadcn/ui's approach, ShellUI Native provides copy-and-own components for native desktop and mobile development. From 16a17373159334e92fbbf03b964d1d4e357fe097 Mon Sep 17 00:00:00 2001 From: Shewart Date: Wed, 14 Jan 2026 17:19:30 +0200 Subject: [PATCH 02/40] docs: update architecture, Blazor Hybrid, and README files to include links to ShellUI for improved clarity and consistency --- docs/ARCHITECTURE.md | 6 +++--- docs/BLAZOR_HYBRID.md | 8 ++++---- docs/PLAN.md | 4 ++-- docs/README.md | 8 ++++---- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md index c3c2bb4..0a1c7b2 100644 --- a/docs/ARCHITECTURE.md +++ b/docs/ARCHITECTURE.md @@ -2,13 +2,13 @@ ## Overview -ShellUI Native follows a modular architecture designed to support multiple native platforms while maintaining a consistent developer experience and design system. +ShellUI Native follows a modular architecture designed to support multiple native platforms while maintaining a consistent developer experience and design system. It is the native counterpart to [ShellUI (Blazor)](https://shellui.dev/), inspired by [shadcn/ui](https://ui.shadcn.com/)'s copy-and-own approach. ## Key Difference from ShellUI Blazor: No Tailwind! **ShellUI Native does NOT use Tailwind CSS.** Native platforms use XAML styles, not CSS. -| Aspect | ShellUI Blazor | ShellUI Native | +| Aspect | [ShellUI Blazor](https://shellui.dev/) | ShellUI Native | |--------|---------------|----------------| | Styling | Tailwind CSS | XAML Styles/ResourceDictionary | | Rendering | HTML/CSS in browser | Native platform controls | @@ -98,7 +98,7 @@ The CLI detects project types by examining the .csproj file: ## Theming System -Unlike ShellUI Blazor which uses CSS variables, ShellUI Native uses platform-native theming: +Unlike [ShellUI Blazor](https://shellui.dev/) which uses CSS variables, ShellUI Native uses platform-native theming: - **MAUI** - ResourceDictionary with Colors, Styles - **WinUI** - XAML Resources and ThemeResources diff --git a/docs/BLAZOR_HYBRID.md b/docs/BLAZOR_HYBRID.md index 836bf5d..e64822f 100644 --- a/docs/BLAZOR_HYBRID.md +++ b/docs/BLAZOR_HYBRID.md @@ -1,6 +1,6 @@ # Blazor MAUI Hybrid Guide -How to use ShellUI libraries in Blazor Hybrid applications. +How to use [ShellUI](https://shellui.dev/) libraries in Blazor Hybrid applications. ## Understanding Hybrid Architecture @@ -30,7 +30,7 @@ A Blazor Hybrid app has two distinct rendering contexts: ## Which Library to Use? -### Use ShellUI (Blazor) When: +### Use [ShellUI (Blazor)](https://shellui.dev/) When: - Building UI inside the `BlazorWebView` - Working with Razor components - Need Tailwind CSS styling @@ -48,7 +48,7 @@ A Blazor Hybrid app has two distinct rendering contexts: If your app is primarily Blazor with minimal native UI: ```bash -# Just install ShellUI Blazor +# Just install ShellUI Blazor (https://github.com/shellui-dev/shellui) dotnet tool install -g ShellUI.CLI cd YourHybridApp shellui init --yes @@ -132,7 +132,7 @@ YourHybridApp/ ## Recommendations -1. **Start with Blazor** - Most hybrid apps are Blazor-heavy. Start with ShellUI Blazor only. +1. **Start with Blazor** - Most hybrid apps are Blazor-heavy. Start with [ShellUI Blazor](https://shellui.dev/) only. 2. **Add Native as Needed** - Only add ShellUI Native when you need truly native controls. diff --git a/docs/PLAN.md b/docs/PLAN.md index a0789d9..347af35 100644 --- a/docs/PLAN.md +++ b/docs/PLAN.md @@ -2,9 +2,9 @@ ## Overview -**ShellUI Native** is the native cross-platform extension of ShellUI, bringing the same design system and component philosophy to MAUI, WinUI, WPF, and other native platforms. Inspired by shadcn/ui's approach, ShellUI Native provides copy-and-own components for native desktop and mobile development. +**ShellUI Native** is the native cross-platform extension of [ShellUI](https://shellui.dev/), bringing the same design system and component philosophy to MAUI, WinUI, WPF, and other native platforms. Inspired by [shadcn/ui](https://ui.shadcn.com/)'s approach, ShellUI Native provides copy-and-own components for native desktop and mobile development. -**ShellUI (Blazor) Reference:** This plan builds upon the successful ShellUI Blazor implementation, adapting its patterns and architecture for native platforms while maintaining design consistency. +**[ShellUI (Blazor)](https://shellui.dev/) Reference:** This plan builds upon the successful ShellUI Blazor implementation, adapting its patterns and architecture for native platforms while maintaining design consistency. ## Vision diff --git a/docs/README.md b/docs/README.md index c6e734b..e82ac05 100644 --- a/docs/README.md +++ b/docs/README.md @@ -16,20 +16,20 @@ -ShellUI Native is the native cross-platform extension of ShellUI, bringing the same design system and component philosophy to MAUI, WinUI, WPF, and other native platforms. Inspired by shadcn/ui's approach, ShellUI Native provides copy-and-own components for native desktop and mobile development. +ShellUI Native is the native cross-platform extension of [ShellUI](https://shellui.dev/), bringing the same design system and component philosophy to MAUI, WinUI, WPF, and other native platforms. Inspired by [shadcn/ui](https://ui.shadcn.com/)'s approach, ShellUI Native provides copy-and-own components for native desktop and mobile development. ## Features - **Copy & Own** - Components are copied to your project, giving you full control - **Platform Native** - Pure native controls, no web views, no CSS overhead - **Lightweight & Fast** - No Tailwind/CSS processing, native styling baked in -- **Consistent Design** - Same design tokens as ShellUI Blazor +- **Consistent Design** - Same design tokens as [ShellUI Blazor](https://shellui.dev/) - **CLI-First** - Simple command-line interface for adding components - **Composable** - Build complex UIs from simple components ## No Tailwind Required! -Unlike ShellUI Blazor, **ShellUI Native does not use Tailwind CSS**. Native platforms (MAUI/WinUI/WPF) use XAML styles and ResourceDictionaries, not CSS. The design tokens (colors, spacing, radii) are identical to ShellUI's Tailwind theme but implemented as native styles - making your app **lightweight and fast** with zero CSS processing overhead. +Unlike [ShellUI Blazor](https://shellui.dev/), **ShellUI Native does not use Tailwind CSS**. Native platforms (MAUI/WinUI/WPF) use XAML styles and ResourceDictionaries, not CSS. The design tokens (colors, spacing, radii) are identical to ShellUI's Tailwind theme but implemented as native styles - making your app **lightweight and fast** with zero CSS processing overhead. ## Quick Start @@ -71,7 +71,7 @@ For **Blazor Hybrid** apps, you can use both libraries: └─────────────────────────────────────────┘ ``` -- **ShellUI (Blazor)** - For components inside the BlazorWebView (HTML/CSS/Razor) +- **[ShellUI (Blazor)](https://shellui.dev/)** - For components inside the BlazorWebView (HTML/CSS/Razor) - **ShellUI Native** - For native MAUI controls outside the WebView They're separate rendering contexts with no conflict. Install what you need based on your app architecture. From 3e677bd71b32717bc40fe9ab3d1f8c26b722aef6 Mon Sep 17 00:00:00 2001 From: Shewart Date: Wed, 14 Jan 2026 17:22:16 +0200 Subject: [PATCH 03/40] docs: update ShellUINativeVersion in ARCHITECTURE.md and correct ShellUI link in PLAN.md for accuracy --- docs/ARCHITECTURE.md | 2 +- docs/PLAN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md index 0a1c7b2..16e3a53 100644 --- a/docs/ARCHITECTURE.md +++ b/docs/ARCHITECTURE.md @@ -143,7 +143,7 @@ public partial class Button : ContentView All packages share a single version defined in `Directory.Build.props`: ```xml -0.1.0 +0.0.1 ``` Component metadata reads this version at runtime, ensuring consistency across all installed components. diff --git a/docs/PLAN.md b/docs/PLAN.md index 347af35..119f41a 100644 --- a/docs/PLAN.md +++ b/docs/PLAN.md @@ -194,7 +194,7 @@ dotnet run ## Related Projects -- [ShellUI (Blazor)](https://github.com/shellui-dev/shellui) - Blazor component library +- [ShellUI (Blazor)](https://shellui.dev/) - Blazor component library - [shadcn/ui](https://ui.shadcn.com/) - The original inspiration ## License From 904631720979e9464c32c2cb7f392a5b557d8d6a Mon Sep 17 00:00:00 2001 From: Shewart Date: Wed, 14 Jan 2026 18:34:31 +0200 Subject: [PATCH 04/40] fix: update ASCII logo in ShellUI Native CLI for enhanced visual clarity and change markup method for logo display --- src/ShellUI.Native.CLI/Program.cs | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/ShellUI.Native.CLI/Program.cs b/src/ShellUI.Native.CLI/Program.cs index 6d3fd50..3cf0608 100644 --- a/src/ShellUI.Native.CLI/Program.cs +++ b/src/ShellUI.Native.CLI/Program.cs @@ -40,16 +40,22 @@ static Command CreateInitCommand() { try { + Console.OutputEncoding = System.Text.Encoding.UTF8; var logo = @" - ███████╗██╗ ██╗███████╗██╗ ██╗ ██╗ ██╗██╗ ███╗ ██╗ █████╗ ████████╗██╗██╗ ██╗███████╗ - ██╔════╝██║ ██║██╔════╝██║ ██║ ██║ ██║██║ ████╗ ██║██╔══██╗╚══██╔══╝██║██║ ██║██╔════╝ - ███████╗███████║█████╗ ██║ ██║ ██║ ██║██║ ██████╗ ██╔██╗ ██║███████║ ██║ ██║██║ ██║█████╗ - ╚════██║██╔══██║██╔══╝ ██║ ██║ ██║ ██║██║ ╚═════╝ ██║╚██╗██║██╔══██║ ██║ ██║╚██╗ ██╔╝██╔══╝ - ███████║██║ ██║███████╗███████╗███████╗╚██████╔╝██║ ██║ ╚████║██║ ██║ ██║ ██║ ╚████╔╝ ███████╗ - ╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝╚══════╝ ╚═════╝ ╚═╝ ╚═╝ ╚═══╝╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚═══╝ ╚══════╝ - + ███████╗██╗ ██╗███████╗██╗ ██╗ ██╗ ██╗██╗ + ██╔════╝██║ ██║██╔════╝██║ ██║ ██║ ██║██║ + ███████╗███████║█████╗ ██║ ██║ ██║ ██║██║ + ╚════██║██╔══██║██╔══╝ ██║ ██║ ██║ ██║██║ + ███████║██║ ██║███████╗███████╗███████╗╚██████╔╝██║ + ╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝╚══════╝ ╚═════╝ ╚═╝ + ███╗ ██╗ █████╗ ████████╗██╗██╗ ██╗███████╗ + ████╗ ██║██╔══██╗╚══██╔══╝██║██║ ██║██╔════╝ + ██╔██╗ ██║███████║ ██║ ██║██║ ██║█████╗ + ██║╚██╗██║██╔══██║ ██║ ██║╚██╗ ██╔╝██╔══╝ + ██║ ╚████║██║ ██║ ██║ ██║ ╚████╔╝ ███████╗ + ╚═╝ ╚═══╝╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚═══╝ ╚══════╝ "; - AnsiConsole.Markup($"[blue]{logo}[/]"); + AnsiConsole.MarkupLine($"[blue]{logo}[/]"); await InitService.InitializeAsync(style, force, nonInteractive); } catch (Exception ex) From 65aca0af07160246e984f37a7e02af21b8da325e Mon Sep 17 00:00:00 2001 From: Shewart Date: Wed, 14 Jan 2026 18:35:03 +0200 Subject: [PATCH 05/40] refactor: restructure MAUI.Demo application by introducing MainPage, updating AppShell, and removing unused components for improved organization and clarity --- examples/MAUI.Demo/App.xaml | 3 +- examples/MAUI.Demo/App.xaml.cs | 18 +- examples/MAUI.Demo/AppShell.xaml | 33 +- examples/MAUI.Demo/AppShell.xaml.cs | 10 +- examples/MAUI.Demo/Components/UI/Button.cs | 138 ------ .../Components/UI/Variants/ButtonVariants.cs | 108 ----- examples/MAUI.Demo/MAUI.Demo.csproj | 102 +++-- examples/MAUI.Demo/MainPage.xaml | 36 ++ examples/MAUI.Demo/MainPage.xaml.cs | 23 + examples/MAUI.Demo/MauiProgram.cs | 28 +- examples/MAUI.Demo/Pages/ButtonsPage.xaml | 71 ---- examples/MAUI.Demo/Pages/ButtonsPage.xaml.cs | 17 - examples/MAUI.Demo/Pages/CardsPage.xaml | 34 -- examples/MAUI.Demo/Pages/CardsPage.xaml.cs | 9 - examples/MAUI.Demo/Pages/FormsPage.xaml | 34 -- examples/MAUI.Demo/Pages/FormsPage.xaml.cs | 9 - examples/MAUI.Demo/Pages/HomePage.xaml | 89 ---- examples/MAUI.Demo/Pages/HomePage.xaml.cs | 24 -- .../Platforms/Android/AndroidManifest.xml | 6 + .../Platforms/Android/MainActivity.cs | 10 + .../Platforms/Android/MainApplication.cs | 15 + .../Android/Resources/values/colors.xml | 6 + .../Platforms/MacCatalyst/AppDelegate.cs | 9 + .../Platforms/MacCatalyst/Entitlements.plist | 14 + .../Platforms/MacCatalyst/Info.plist | 40 ++ .../Platforms/MacCatalyst/Program.cs | 15 + examples/MAUI.Demo/Platforms/Windows/App.xaml | 8 + .../MAUI.Demo/Platforms/Windows/App.xaml.cs | 24 ++ .../Platforms/Windows/Package.appxmanifest | 46 ++ .../MAUI.Demo/Platforms/Windows/app.manifest | 17 + .../MAUI.Demo/Platforms/iOS/AppDelegate.cs | 9 + examples/MAUI.Demo/Platforms/iOS/Info.plist | 32 ++ examples/MAUI.Demo/Platforms/iOS/Program.cs | 15 + .../iOS/Resources/PrivacyInfo.xcprivacy | 51 +++ .../MAUI.Demo/Resources/AppIcon/appicon.svg | 4 + .../MAUI.Demo/Resources/AppIcon/appiconfg.svg | 8 + .../Resources/Fonts/OpenSans-Regular.ttf | Bin 0 -> 107320 bytes .../Resources/Fonts/OpenSans-Semibold.ttf | Bin 0 -> 111208 bytes .../MAUI.Demo/Resources/Images/dotnet_bot.png | Bin 0 -> 92532 bytes .../MAUI.Demo/Resources/Raw/AboutAssets.txt | 15 + .../MAUI.Demo/Resources/Splash/splash.svg | 8 + .../MAUI.Demo/Resources/Styles/Colors.xaml | 33 +- .../Resources/Styles/ShellUITheme.xaml | 5 +- .../MAUI.Demo/Resources/Styles/Styles.xaml | 398 +++++++++++++++++- examples/MAUI.Demo/shellui-native.json | 12 + 45 files changed, 925 insertions(+), 661 deletions(-) delete mode 100644 examples/MAUI.Demo/Components/UI/Button.cs delete mode 100644 examples/MAUI.Demo/Components/UI/Variants/ButtonVariants.cs create mode 100644 examples/MAUI.Demo/MainPage.xaml create mode 100644 examples/MAUI.Demo/MainPage.xaml.cs delete mode 100644 examples/MAUI.Demo/Pages/ButtonsPage.xaml delete mode 100644 examples/MAUI.Demo/Pages/ButtonsPage.xaml.cs delete mode 100644 examples/MAUI.Demo/Pages/CardsPage.xaml delete mode 100644 examples/MAUI.Demo/Pages/CardsPage.xaml.cs delete mode 100644 examples/MAUI.Demo/Pages/FormsPage.xaml delete mode 100644 examples/MAUI.Demo/Pages/FormsPage.xaml.cs delete mode 100644 examples/MAUI.Demo/Pages/HomePage.xaml delete mode 100644 examples/MAUI.Demo/Pages/HomePage.xaml.cs create mode 100644 examples/MAUI.Demo/Platforms/Android/AndroidManifest.xml create mode 100644 examples/MAUI.Demo/Platforms/Android/MainActivity.cs create mode 100644 examples/MAUI.Demo/Platforms/Android/MainApplication.cs create mode 100644 examples/MAUI.Demo/Platforms/Android/Resources/values/colors.xml create mode 100644 examples/MAUI.Demo/Platforms/MacCatalyst/AppDelegate.cs create mode 100644 examples/MAUI.Demo/Platforms/MacCatalyst/Entitlements.plist create mode 100644 examples/MAUI.Demo/Platforms/MacCatalyst/Info.plist create mode 100644 examples/MAUI.Demo/Platforms/MacCatalyst/Program.cs create mode 100644 examples/MAUI.Demo/Platforms/Windows/App.xaml create mode 100644 examples/MAUI.Demo/Platforms/Windows/App.xaml.cs create mode 100644 examples/MAUI.Demo/Platforms/Windows/Package.appxmanifest create mode 100644 examples/MAUI.Demo/Platforms/Windows/app.manifest create mode 100644 examples/MAUI.Demo/Platforms/iOS/AppDelegate.cs create mode 100644 examples/MAUI.Demo/Platforms/iOS/Info.plist create mode 100644 examples/MAUI.Demo/Platforms/iOS/Program.cs create mode 100644 examples/MAUI.Demo/Platforms/iOS/Resources/PrivacyInfo.xcprivacy create mode 100644 examples/MAUI.Demo/Resources/AppIcon/appicon.svg create mode 100644 examples/MAUI.Demo/Resources/AppIcon/appiconfg.svg create mode 100644 examples/MAUI.Demo/Resources/Fonts/OpenSans-Regular.ttf create mode 100644 examples/MAUI.Demo/Resources/Fonts/OpenSans-Semibold.ttf create mode 100644 examples/MAUI.Demo/Resources/Images/dotnet_bot.png create mode 100644 examples/MAUI.Demo/Resources/Raw/AboutAssets.txt create mode 100644 examples/MAUI.Demo/Resources/Splash/splash.svg create mode 100644 examples/MAUI.Demo/shellui-native.json diff --git a/examples/MAUI.Demo/App.xaml b/examples/MAUI.Demo/App.xaml index 6f2f8b5..da92b41 100644 --- a/examples/MAUI.Demo/App.xaml +++ b/examples/MAUI.Demo/App.xaml @@ -1,4 +1,4 @@ - + - diff --git a/examples/MAUI.Demo/App.xaml.cs b/examples/MAUI.Demo/App.xaml.cs index 9fd151a..cc5cce1 100644 --- a/examples/MAUI.Demo/App.xaml.cs +++ b/examples/MAUI.Demo/App.xaml.cs @@ -1,10 +1,16 @@ +using Microsoft.Extensions.DependencyInjection; + namespace MAUI.Demo; public partial class App : Application { - public App() - { - InitializeComponent(); - MainPage = new AppShell(); - } -} + public App() + { + InitializeComponent(); + } + + protected override Window CreateWindow(IActivationState? activationState) + { + return new Window(new AppShell()); + } +} \ No newline at end of file diff --git a/examples/MAUI.Demo/AppShell.xaml b/examples/MAUI.Demo/AppShell.xaml index 2869f59..207a447 100644 --- a/examples/MAUI.Demo/AppShell.xaml +++ b/examples/MAUI.Demo/AppShell.xaml @@ -1,25 +1,14 @@ - - - - - - - - - - - - - - - - - + + + diff --git a/examples/MAUI.Demo/AppShell.xaml.cs b/examples/MAUI.Demo/AppShell.xaml.cs index d839509..32fdb08 100644 --- a/examples/MAUI.Demo/AppShell.xaml.cs +++ b/examples/MAUI.Demo/AppShell.xaml.cs @@ -1,9 +1,9 @@ -namespace MAUI.Demo; +namespace MAUI.Demo; public partial class AppShell : Shell { - public AppShell() - { - InitializeComponent(); - } + public AppShell() + { + InitializeComponent(); + } } diff --git a/examples/MAUI.Demo/Components/UI/Button.cs b/examples/MAUI.Demo/Components/UI/Button.cs deleted file mode 100644 index c663d4f..0000000 --- a/examples/MAUI.Demo/Components/UI/Button.cs +++ /dev/null @@ -1,138 +0,0 @@ -using MAUI.Demo.Components.UI.Variants; - -namespace MAUI.Demo.Components.UI; - -// Interactive button with variant and size support -public partial class Button : ContentView -{ - public static readonly BindableProperty VariantProperty = - BindableProperty.Create(nameof(Variant), typeof(ButtonVariant), typeof(Button), - ButtonVariant.Default, propertyChanged: OnVisualPropertyChanged); - - public static readonly BindableProperty SizeProperty = - BindableProperty.Create(nameof(Size), typeof(ButtonSize), typeof(Button), - ButtonSize.Default, propertyChanged: OnVisualPropertyChanged); - - public static readonly BindableProperty IsLoadingProperty = - BindableProperty.Create(nameof(IsLoading), typeof(bool), typeof(Button), - false, propertyChanged: OnVisualPropertyChanged); - - public static readonly BindableProperty TextProperty = - BindableProperty.Create(nameof(Text), typeof(string), typeof(Button), - string.Empty, propertyChanged: OnTextChanged); - - private readonly Border _border; - private readonly ActivityIndicator _loadingIndicator; - private readonly Label _textLabel; - private readonly HorizontalStackLayout _contentLayout; - - public ButtonVariant Variant - { - get => (ButtonVariant)GetValue(VariantProperty); - set => SetValue(VariantProperty, value); - } - - public ButtonSize Size - { - get => (ButtonSize)GetValue(SizeProperty); - set => SetValue(SizeProperty, value); - } - - public bool IsLoading - { - get => (bool)GetValue(IsLoadingProperty); - set => SetValue(IsLoadingProperty, value); - } - - public string Text - { - get => (string)GetValue(TextProperty); - set => SetValue(TextProperty, value); - } - - public event EventHandler? Clicked; - - public Button() - { - _loadingIndicator = new ActivityIndicator - { - IsRunning = false, - IsVisible = false, - WidthRequest = 16, - HeightRequest = 16, - Margin = new Thickness(0, 0, 8, 0) - }; - - _textLabel = new Label - { - VerticalOptions = LayoutOptions.Center, - HorizontalOptions = LayoutOptions.Center, - VerticalTextAlignment = TextAlignment.Center, - HorizontalTextAlignment = TextAlignment.Center - }; - - _contentLayout = new HorizontalStackLayout - { - HorizontalOptions = LayoutOptions.Center, - VerticalOptions = LayoutOptions.Center, - Children = { _loadingIndicator, _textLabel } - }; - - _border = new Border - { - Content = _contentLayout, - StrokeThickness = 0 - }; - - // Add tap gesture - var tapGesture = new TapGestureRecognizer(); - tapGesture.Tapped += OnTapped; - _border.GestureRecognizers.Add(tapGesture); - - Content = _border; - UpdateVisualState(); - } - - private void OnTapped(object? sender, TappedEventArgs e) - { - if (!IsLoading && IsEnabled) - { - Clicked?.Invoke(this, EventArgs.Empty); - } - } - - private static void OnVisualPropertyChanged(BindableObject bindable, object oldValue, object newValue) - { - if (bindable is Button button) - button.UpdateVisualState(); - } - - private static void OnTextChanged(BindableObject bindable, object oldValue, object newValue) - { - if (bindable is Button button) - button._textLabel.Text = newValue as string ?? string.Empty; - } - - private void UpdateVisualState() - { - var style = ButtonVariants.GetStyle(Variant, Size); - - _border.BackgroundColor = style.BackgroundColor; - _border.Stroke = style.BorderColor; - _border.StrokeThickness = style.BorderThickness; - _border.StrokeShape = new RoundRectangle { CornerRadius = style.CornerRadius }; - _border.Padding = style.Padding; - _border.HeightRequest = style.Height; - _border.MinimumWidthRequest = style.MinWidth; - - _textLabel.TextColor = style.TextColor; - _textLabel.FontSize = style.FontSize; - _textLabel.FontAttributes = FontAttributes.Bold; - - _loadingIndicator.Color = style.TextColor; - _loadingIndicator.IsVisible = IsLoading; - _loadingIndicator.IsRunning = IsLoading; - - Opacity = IsEnabled ? 1.0 : 0.5; - } -} diff --git a/examples/MAUI.Demo/Components/UI/Variants/ButtonVariants.cs b/examples/MAUI.Demo/Components/UI/Variants/ButtonVariants.cs deleted file mode 100644 index eacd289..0000000 --- a/examples/MAUI.Demo/Components/UI/Variants/ButtonVariants.cs +++ /dev/null @@ -1,108 +0,0 @@ -namespace MAUI.Demo.Components.UI.Variants; - -public enum ButtonVariant -{ - Default, - Destructive, - Outline, - Secondary, - Ghost -} - -public enum ButtonSize -{ - Default, - Sm, - Lg, - Icon -} - -// Style properties for button rendering -public class ButtonStyle -{ - public Color BackgroundColor { get; set; } = Colors.Transparent; - public Color TextColor { get; set; } = Colors.Black; - public Color BorderColor { get; set; } = Colors.Transparent; - public double BorderThickness { get; set; } = 0; - public CornerRadius CornerRadius { get; set; } = new(6); - public Thickness Padding { get; set; } = new(16, 10); - public double Height { get; set; } = 40; - public double MinWidth { get; set; } = 80; - public double FontSize { get; set; } = 14; -} - -public static class ButtonVariants -{ - // Design tokens - these mirror ShellUI Blazor CSS variables - private static readonly Color PrimaryColor = Color.FromArgb("#2563EB"); - private static readonly Color PrimaryForeground = Colors.White; - private static readonly Color DestructiveColor = Color.FromArgb("#EF4444"); - private static readonly Color DestructiveForeground = Colors.White; - private static readonly Color SecondaryColor = Color.FromArgb("#F4F4F5"); - private static readonly Color SecondaryForeground = Color.FromArgb("#18181B"); - private static readonly Color BorderColor = Color.FromArgb("#E4E4E7"); - private static readonly Color ForegroundColor = Color.FromArgb("#18181B"); - - public static ButtonStyle GetStyle(ButtonVariant variant = ButtonVariant.Default, ButtonSize size = ButtonSize.Default) - { - var style = new ButtonStyle(); - - // Apply variant styles - switch (variant) - { - case ButtonVariant.Default: - style.BackgroundColor = PrimaryColor; - style.TextColor = PrimaryForeground; - break; - case ButtonVariant.Destructive: - style.BackgroundColor = DestructiveColor; - style.TextColor = DestructiveForeground; - break; - case ButtonVariant.Outline: - style.BackgroundColor = Colors.Transparent; - style.TextColor = ForegroundColor; - style.BorderColor = BorderColor; - style.BorderThickness = 1; - break; - case ButtonVariant.Secondary: - style.BackgroundColor = SecondaryColor; - style.TextColor = SecondaryForeground; - break; - case ButtonVariant.Ghost: - style.BackgroundColor = Colors.Transparent; - style.TextColor = ForegroundColor; - break; - } - - // Apply size styles - switch (size) - { - case ButtonSize.Sm: - style.Height = 36; - style.Padding = new Thickness(12, 8); - style.FontSize = 13; - style.CornerRadius = new CornerRadius(4); - break; - case ButtonSize.Default: - style.Height = 40; - style.Padding = new Thickness(16, 10); - style.FontSize = 14; - style.CornerRadius = new CornerRadius(6); - break; - case ButtonSize.Lg: - style.Height = 44; - style.Padding = new Thickness(24, 12); - style.FontSize = 16; - style.CornerRadius = new CornerRadius(6); - break; - case ButtonSize.Icon: - style.Height = 40; - style.MinWidth = 40; - style.Padding = new Thickness(10); - style.CornerRadius = new CornerRadius(6); - break; - } - - return style; - } -} diff --git a/examples/MAUI.Demo/MAUI.Demo.csproj b/examples/MAUI.Demo/MAUI.Demo.csproj index 188cf15..9d19468 100644 --- a/examples/MAUI.Demo/MAUI.Demo.csproj +++ b/examples/MAUI.Demo/MAUI.Demo.csproj @@ -1,46 +1,64 @@ - - net8.0-android;net8.0-ios;net8.0-maccatalyst - $(TargetFrameworks);net8.0-windows10.0.19041.0 - Exe - MAUI.Demo - true - true - enable - enable - - - ShellUI Native Demo - - - com.shellui.native.demo - - - 1.0 - 1 - - 14.0 - 14.0 - 21.0 - 10.0.17763.0 - - - - - - - - - - - - - - - - - - + + net10.0-android;net10.0-ios;net10.0-maccatalyst + $(TargetFrameworks);net10.0-windows10.0.19041.0 + + + + + Exe + MAUI.Demo + true + true + enable + enable + + + MAUI.Demo + + + com.companyname.maui.demo + + + 1.0 + 1 + + + None + + 15.0 + 15.0 + 21.0 + 10.0.17763.0 + 10.0.17763.0 + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/examples/MAUI.Demo/MainPage.xaml b/examples/MAUI.Demo/MainPage.xaml new file mode 100644 index 0000000..57d53f8 --- /dev/null +++ b/examples/MAUI.Demo/MainPage.xaml @@ -0,0 +1,36 @@ + + + + + + + +