npm - @polymorphism-tech/morph-spec - Versions diffs - 4.7.2 → 4.8.1 - Mend

@polymorphism-tech/morph-spec 4.7.2 → 4.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (346) hide show

package/.morph/framework/standards/frontend/blazor/fluent-ui-setup.md DELETED Viewed

@@ -1,595 +0,0 @@
-# Fluent UI Blazor - Setup e Padrões (.NET 10)
-> **Scope:** blazor-azure
-> **Layer:** 2 (on keyword)
-> **Keywords:** fluent ui, setup, azure, blazor, components
-> **Load When:** fluent ui setup keywords detected
-Biblioteca de UI recomendada para projetos **AI-first** e micro-SaaS no MORPH-SPEC.
----
-## 🎯 Por Que Fluent UI Blazor?
-### Para Projetos AI-First
-| Vantagem | Descrição |
-|----------|-----------|
-| **Componentes AI nativos** | Chat containers, streaming, typing indicators |
-| **Microsoft Stack** | Integração perfeita com Agent Framework, Aspire, .NET 10 |
-| **Design Copilot-like** | UX patterns da Microsoft para AI assistants |
-| **Futuro-proof** | Microsoft evolui junto com AI capabilities |
-| **Performance** | ~200KB gzipped (vs 500KB MudBlazor) |
-| **Aspire Dashboard** | Mesma lib - consistência visual |
-### Para Micro-SaaS
-- **Design System moderno** - Microsoft 365 style
-- **Acessibilidade nativa** - WCAG compliant
-- **Dark mode** - Built-in
-- **Responsive** - Mobile-first
-- **Grátis** - MIT License, sem custos
----
-## 📦 Setup
-### 1. Instalar Package
-```bash
-dotnet add package Microsoft.FluentUI.AspNetCore.Components --version 4.0.0
-```
-### 2. Configurar Program.cs
-```csharp
-var builder = WebApplication.CreateBuilder(args);
-// Blazor
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-// Fluent UI
-builder.Services.AddFluentUIComponents();
-var app = builder.Build();
-// Pipeline
-app.UseStaticFiles();
-app.UseAntiforgery();
-app.MapRazorComponents<App>()
-    .AddInteractiveServerRenderMode()
-    .AddAdditionalAssemblies(typeof(Microsoft.FluentUI.AspNetCore.Components._Imports).Assembly);
-app.Run();
-```
-### 3. Configurar _Imports.razor
-```razor
-@* Components/_Imports.razor *@
-@using Microsoft.AspNetCore.Components.Web
-@using Microsoft.FluentUI.AspNetCore.Components
-@using Microsoft.FluentUI.AspNetCore.Components.Icons
-```
-### 4. Adicionar CSS e JS
-```html
-<!-- Components/App.razor -->
-<!DOCTYPE html>
-<html lang="pt-BR">
-<head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <base href="/" />
-    <!-- Fluent UI CSS -->
-    <link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
-    <link href="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.min.css" rel="stylesheet" />
-    <HeadOutlet />
-</head>
-<body>
-    <Routes />
-    <!-- Fluent UI JS -->
-    <script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module"></script>
-</body>
-</html>
-```
----
-## 🎨 Layout SaaS Padrão
-### Layout Principal
-```razor
-@* Components/Layout/MainLayout.razor *@
-@inherits LayoutComponentBase
-<FluentLayout>
-    <!-- Header -->
-    <FluentHeader>
-        <FluentStack Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.SpaceBetween">
-            <FluentStack Orientation="Orientation.Horizontal">
-                <FluentIcon Value="@(new Icons.Regular.Size24.AppGeneric())" Color="Color.Accent" />
-                <FluentLabel Typo="Typography.H5">Meu SaaS</FluentLabel>
-            </FluentStack>
-            <FluentStack Orientation="Orientation.Horizontal">
-                <FluentButton Appearance="Appearance.Stealth" IconStart="@(new Icons.Regular.Size20.DarkTheme())">
-                    Dark Mode
-                </FluentButton>
-                <FluentPersona Name="@_userName" Image="@_userAvatar" />
-            </FluentStack>
-        </FluentStack>
-    </FluentHeader>
-    <!-- Sidebar -->
-    <FluentNavMenu Width="250">
-        <FluentNavLink Icon="@(new Icons.Regular.Size20.Home())" Href="/" Match="NavLinkMatch.All">
-            Dashboard
-        </FluentNavLink>
-        <FluentNavLink Icon="@(new Icons.Regular.Size20.People())" Href="/customers">
-            Clientes
-        </FluentNavLink>
-        <FluentNavLink Icon="@(new Icons.Regular.Size20.Cart())" Href="/orders">
-            Pedidos
-        </FluentNavLink>
-        <FluentNavLink Icon="@(new Icons.Regular.Size20.Chat())" Href="/ai-assistant">
-            AI Assistant
-        </FluentNavLink>
-        <FluentDivider />
-        <FluentNavLink Icon="@(new Icons.Regular.Size20.Settings())" Href="/settings">
-            Configurações
-        </FluentNavLink>
-    </FluentNavMenu>
-    <!-- Main Content -->
-    <FluentMain>
-        <FluentBodyContent>
-            @Body
-        </FluentBodyContent>
-    </FluentMain>
-</FluentLayout>
-@code {
-    private string _userName = "Usuário";
-    private string _userAvatar = "";
-}
-```
----
-## 📋 Componentes Essenciais
-### Data Grid
-```razor
-@page "/customers"
-<FluentStack Orientation="Orientation.Vertical">
-    <FluentStack Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.SpaceBetween">
-        <FluentLabel Typo="Typography.H4">Clientes</FluentLabel>
-        <FluentButton Appearance="Appearance.Accent" IconStart="@(new Icons.Regular.Size20.Add())">
-            Novo Cliente
-        </FluentButton>
-    </FluentStack>
-    <FluentDataGrid Items="@_customers" GridTemplateColumns="1fr 2fr 2fr 1fr">
-        <PropertyColumn Property="@(c => c.Id)" />
-        <PropertyColumn Property="@(c => c.Name)" Title="Nome" />
-        <PropertyColumn Property="@(c => c.Email)" />
-        <TemplateColumn Title="Ações">
-            <FluentButton Appearance="Appearance.Stealth" IconStart="@(new Icons.Regular.Size16.Edit())">
-                Editar
-            </FluentButton>
-        </TemplateColumn>
-    </FluentDataGrid>
-</FluentStack>
-@code {
-    private IQueryable<Customer> _customers = new List<Customer>
-    {
-        new() { Id = 1, Name = "João Silva", Email = "joao@example.com" },
-        new() { Id = 2, Name = "Maria Santos", Email = "maria@example.com" }
-    }.AsQueryable();
-}
-```
-### Formulários
-```razor
-@page "/customers/new"
-<EditForm Model="@_model" OnValidSubmit="HandleSubmit">
-    <DataAnnotationsValidator />
-    <FluentStack Orientation="Orientation.Vertical">
-        <FluentLabel Typo="Typography.H4">Novo Cliente</FluentLabel>
-        <FluentTextField @bind-Value="_model.Name" Label="Nome" Required />
-        <FluentValidationMessage For="@(() => _model.Name)" />
-        <FluentTextField @bind-Value="_model.Email" Label="Email" TextFieldType="TextFieldType.Email" Required />
-        <FluentValidationMessage For="@(() => _model.Email)" />
-        <FluentTextField @bind-Value="_model.Phone" Label="Telefone" />
-        <FluentStack Orientation="Orientation.Horizontal">
-            <FluentButton Type="ButtonType.Submit" Appearance="Appearance.Accent">
-                Salvar
-            </FluentButton>
-            <FluentButton Appearance="Appearance.Neutral" OnClick="Cancel">
-                Cancelar
-            </FluentButton>
-        </FluentStack>
-    </FluentStack>
-</EditForm>
-@code {
-    private CustomerFormModel _model = new();
-    private async Task HandleSubmit()
-    {
-        // Salvar cliente
-    }
-    private void Cancel() => NavigationManager.NavigateTo("/customers");
-}
-```
-### Dialogs e Mensagens
-```razor
-@inject IDialogService DialogService
-@inject IMessageService MessageService
-<FluentButton OnClick="ShowDialog">Abrir Dialog</FluentButton>
-<FluentButton OnClick="ShowMessage">Mostrar Mensagem</FluentButton>
-@code {
-    private async Task ShowDialog()
-    {
-        var dialog = await DialogService.ShowDialogAsync<ConfirmDialog>(new DialogParameters
-        {
-            Title = "Confirmar ação",
-            PrimaryAction = "Confirmar",
-            SecondaryAction = "Cancelar"
-        });
-        var result = await dialog.Result;
-        if (!result.Cancelled)
-        {
-            // Ação confirmada
-        }
-    }
-    private void ShowMessage()
-    {
-        MessageService.ShowMessageBar(options =>
-        {
-            options.Intent = MessageIntent.Success;
-            options.Title = "Sucesso!";
-            options.Body = "Operação realizada com sucesso.";
-        });
-    }
-}
-```
----
-## 🤖 Componentes AI-Specific
-### Chat Container
-```razor
-@page "/ai-assistant"
-@inject IDocumentAssistantAgent Assistant
-<FluentStack Orientation="Orientation.Vertical" Style="height: 100vh;">
-    <FluentLabel Typo="Typography.H4">AI Assistant</FluentLabel>
-    <!-- Messages Area -->
-    <FluentScrollArea Style="flex: 1; overflow-y: auto;">
-        <FluentStack Orientation="Orientation.Vertical">
-            @foreach (var message in _messages)
-            {
-                <FluentMessageBar Intent="@(message.IsUser ? MessageIntent.Info : MessageIntent.Success)">
-                    <FluentLabel Weight="FontWeight.Bold">
-                        @(message.IsUser ? "Você" : "AI Assistant")
-                    </FluentLabel>
-                    <FluentLabel>@message.Content</FluentLabel>
-                </FluentMessageBar>
-            }
-            @if (_isTyping)
-            {
-                <FluentProgress />
-                <FluentLabel Typo="Typography.Caption">AI está digitando...</FluentLabel>
-            }
-        </FluentStack>
-    </FluentScrollArea>
-    <!-- Input Area -->
-    <FluentStack Orientation="Orientation.Horizontal">
-        <FluentTextField @bind-Value="_userInput"
-                        Placeholder="Digite sua pergunta..."
-                        Style="flex: 1;"
-                        @onkeypress="HandleKeyPress" />
-        <FluentButton Appearance="Appearance.Accent"
-                     IconStart="@(new Icons.Regular.Size20.Send())"
-                     OnClick="SendMessage"
-                     Disabled="@_isTyping">
-            Enviar
-        </FluentButton>
-    </FluentStack>
-</FluentStack>
-@code {
-    private List<ChatMessage> _messages = new();
-    private string _userInput = "";
-    private bool _isTyping;
-    private async Task SendMessage()
-    {
-        if (string.IsNullOrWhiteSpace(_userInput)) return;
-        // Adicionar mensagem do usuário
-        _messages.Add(new ChatMessage { Content = _userInput, IsUser = true });
-        var question = _userInput;
-        _userInput = "";
-        _isTyping = true;
-        // Obter resposta do AI
-        var response = await Assistant.AskQuestionAsync(question);
-        _messages.Add(new ChatMessage { Content = response, IsUser = false });
-        _isTyping = false;
-    }
-    private async Task HandleKeyPress(KeyboardEventArgs e)
-    {
-        if (e.Key == "Enter" && !e.ShiftKey)
-        {
-            await SendMessage();
-        }
-    }
-    public class ChatMessage
-    {
-        public string Content { get; set; } = "";
-        public bool IsUser { get; set; }
-    }
-}
-```
-### Streaming Response
-```razor
-@page "/ai-stream"
-<FluentStack Orientation="Orientation.Vertical">
-    <FluentTextField @bind-Value="_prompt" Label="Prompt" />
-    <FluentButton OnClick="GenerateStream">Gerar (Streaming)</FluentButton>
-    <FluentCard>
-        <FluentLabel>@_streamedContent</FluentLabel>
-        @if (_isStreaming)
-        {
-            <FluentProgressRing />
-        }
-    </FluentCard>
-</FluentStack>
-@code {
-    private string _prompt = "";
-    private string _streamedContent = "";
-    private bool _isStreaming;
-    private async Task GenerateStream()
-    {
-        _streamedContent = "";
-        _isStreaming = true;
-        // Simular streaming (substituir com Agent Framework real)
-        var words = "Esta é uma resposta simulada do AI assistant em streaming.".Split(' ');
-        foreach (var word in words)
-        {
-            _streamedContent += word + " ";
-            StateHasChanged();
-            await Task.Delay(200);
-        }
-        _isStreaming = false;
-    }
-}
-```
----
-## 🎨 Temas e Dark Mode
-### Configurar Theme Provider
-```razor
-<!-- App.razor -->
-<FluentDesignTheme @bind-Mode="@_theme"
-                   StorageName="theme-preference"
-                   OfficeColor="OfficeColor.Default" />
-<FluentLayout>
-    <!-- Conteúdo -->
-</FluentLayout>
-@code {
-    private DesignThemeModes _theme = DesignThemeModes.System;
-}
-```
-### Toggle Dark Mode
-```razor
-<FluentSwitch @bind-Value="_isDarkMode"
-              @bind-Value:after="ToggleTheme"
-              Label="@(_isDarkMode ? "Dark Mode" : "Light Mode")" />
-@code {
-    private bool _isDarkMode;
-    private void ToggleTheme()
-    {
-        _theme = _isDarkMode ? DesignThemeModes.Dark : DesignThemeModes.Light;
-    }
-}
-```
----
-## 🔄 Abordagem Híbrida (Fluent UI + MudBlazor)
-### Quando Adicionar MudBlazor
-Use MudBlazor para:
-- **DataGrid complexo** - filtros avançados, agrupamento, export
-- **Charts** - MudChart para dashboards analytics
-- **Calendar/Scheduler** - se precisar de componentes avançados
-### Setup Híbrido
-```bash
-dotnet add package Microsoft.FluentUI.AspNetCore.Components
-dotnet add package MudBlazor
-```
-```csharp
-// Program.cs
-builder.Services.AddFluentUIComponents();
-builder.Services.AddMudServices();
-```
-```html
-<!-- App.razor -->
-<!-- Fluent UI CSS -->
-<link href="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.min.css" rel="stylesheet" />
-<!-- MudBlazor CSS -->
-<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
-```
-### Exemplo de Uso Combinado
-```razor
-@* Layout com Fluent UI *@
-<FluentLayout>
-    <FluentHeader>...</FluentHeader>
-    <FluentMain>
-        @* Grid complexo com MudBlazor *@
-        <MudDataGrid T="Order"
-                     Items="@_orders"
-                     Filterable="true"
-                     Groupable="true"
-                     Dense="true">
-            <Columns>
-                <PropertyColumn Property="x => x.OrderNumber" Title="Número" />
-                <PropertyColumn Property="x => x.Total" Title="Total" Format="C2" />
-            </Columns>
-        </MudDataGrid>
-        @* Chat com Fluent UI *@
-        <FluentMessageBar Intent="MessageIntent.Success">
-            Pedido criado com sucesso!
-        </FluentMessageBar>
-    </FluentMain>
-</FluentLayout>
-```
----
-## 📊 Performance Tips
-### Bundle Size
-```xml
-<!-- .csproj -->
-<PropertyGroup>
-    <!-- Trimming para reduzir bundle -->
-    <PublishTrimmed>true</PublishTrimmed>
-    <TrimMode>link</TrimMode>
-</PropertyGroup>
-```
-### Lazy Loading de Componentes
-```razor
-@* Carregar MudBlazor só quando necessário *@
-@if (_showComplexGrid)
-{
-    <MudDataGrid ... />
-}
-else
-{
-    <FluentDataGrid ... />
-}
-```
----
-## ✅ Checklist de Implementação
-- [ ] Package `Microsoft.FluentUI.AspNetCore.Components` instalado
-- [ ] `AddFluentUIComponents()` no Program.cs
-- [ ] CSS e JS referenciados no App.razor
-- [ ] _Imports.razor atualizado
-- [ ] Layout principal criado com FluentLayout
-- [ ] Navegação configurada com FluentNavMenu
-- [ ] Theme provider configurado
-- [ ] Dark mode funcional
-- [ ] Componentes AI (chat) implementados se aplicável
-- [ ] (Opcional) MudBlazor adicionado para grids/charts complexos
----
-## 🚫 O Que NÃO Fazer
-❌ Misturar estilos - use Fluent UI OU MudBlazor consistentemente
-❌ Importar todas as libs sem necessidade (bundle size)
-❌ Ignorar acessibilidade (Fluent UI tem nativa)
-❌ Criar componentes customizados sem checar se já existem
-❌ Usar JavaScript customizado (Fluent UI tem tudo em C#)
----
-## 📚 Recursos
-| Recurso | URL |
-|---------|-----|
-| Documentação Oficial | [fluentui-blazor.net](https://www.fluentui-blazor.net/) |
-| GitHub | [github.com/microsoft/fluentui-blazor](https://github.com/microsoft/fluentui-blazor) |
-| Exemplos | [fluentui-blazor.net/examples](https://www.fluentui-blazor.net/examples) |
-| Icons Explorer | [fluentui-blazor.net/icon-explorer](https://www.fluentui-blazor.net/icon-explorer) |
-| MudBlazor (complemento) | [mudblazor.com](https://mudblazor.com/) |
----
-## 🎓 Comparativo Rápido
-| Feature | Fluent UI | MudBlazor | Recomendação |
-|---------|-----------|-----------|--------------|
-| AI Components | ✅ Nativo | ❌ Não | **Fluent UI** |
-| DataGrid | ⚠️ Básico | ✅ Avançado | **MudBlazor** |
-| Charts | ❌ Não | ✅ Sim | **MudBlazor** |
-| Performance | ✅ Leve | ⚠️ Pesado | **Fluent UI** |
-| Microsoft Integration | ✅ Nativo | ❌ Não | **Fluent UI** |
-| Templates Prontos | ⚠️ Poucos | ✅ Muitos | **MudBlazor** |
-| Futuro AI | ✅ Garantido | ❓ Incerto | **Fluent UI** |
----
-*MORPH-SPEC by Polymorphism Tech*