autoworkflow 3.1.5 → 3.5.0

package/.claude/skills/blazor.md

@@ -0,0 +1,456 @@
+# Blazor Skill
+
+## Component with Parameters
+\`\`\`razor
+@page "/users/{Id}"
+@inject IUserService UserService
+@inject NavigationManager Navigation
+
+<PageTitle>User Details</PageTitle>
+
+@if (_loading)
+{
+    <LoadingSpinner />
+}
+else if (_user is null)
+{
+    <div class="alert alert-danger">User not found</div>
+}
+else
+{
+    <div class="card">
+        <h1>@_user.Name</h1>
+        <p>@_user.Email</p>
+        <Badge IsActive="@_user.IsActive" />
+        <button class="btn btn-primary" @onclick="HandleEdit">Edit</button>
+    </div>
+}
+
+@code {
+    [Parameter]
+    public string Id { get; set; } = null!;
+
+    [Parameter]
+    public EventCallback<User> OnUserUpdated { get; set; }
+
+    private User? _user;
+    private bool _loading = true;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadUser();
+    }
+
+    protected override async Task OnParametersSetAsync()
+    {
+        // Called when parameters change (e.g., route changes)
+        await LoadUser();
+    }
+
+    private async Task LoadUser()
+    {
+        _loading = true;
+        try
+        {
+            _user = await UserService.GetByIdAsync(Id);
+        }
+        finally
+        {
+            _loading = false;
+        }
+    }
+
+    private void HandleEdit()
+    {
+        Navigation.NavigateTo($"/users/{Id}/edit");
+    }
+}
+\`\`\`
+
+## Forms with Validation
+\`\`\`razor
+@page "/users/create"
+@inject IUserService UserService
+@inject NavigationManager Navigation
+
+<h1>Create User</h1>
+
+<EditForm Model="@_model" OnValidSubmit="HandleSubmit">
+    <DataAnnotationsValidator />
+    <ValidationSummary class="text-danger" />
+
+    <div class="mb-3">
+        <label class="form-label">Email</label>
+        <InputText @bind-Value="_model.Email" class="form-control" />
+        <ValidationMessage For="@(() => _model.Email)" class="text-danger" />
+    </div>
+
+    <div class="mb-3">
+        <label class="form-label">Name</label>
+        <InputText @bind-Value="_model.Name" class="form-control" />
+        <ValidationMessage For="@(() => _model.Name)" class="text-danger" />
+    </div>
+
+    <div class="mb-3">
+        <label class="form-label">Role</label>
+        <InputSelect @bind-Value="_model.Role" class="form-select">
+            <option value="">Select a role...</option>
+            @foreach (var role in _roles)
+            {
+                <option value="@role">@role</option>
+            }
+        </InputSelect>
+    </div>
+
+    <div class="mb-3">
+        <label class="form-label">Active</label>
+        <InputCheckbox @bind-Value="_model.IsActive" class="form-check-input" />
+    </div>
+
+    <button type="submit" class="btn btn-primary" disabled="@_submitting">
+        @if (_submitting)
+        {
+            <span class="spinner-border spinner-border-sm"></span>
+        }
+        Create User
+    </button>
+
+    @if (_error is not null)
+    {
+        <div class="alert alert-danger mt-3">@_error</div>
+    }
+</EditForm>
+
+@code {
+    private CreateUserModel _model = new();
+    private bool _submitting;
+    private string? _error;
+    private readonly string[] _roles = ["User", "Admin", "Moderator"];
+
+    private async Task HandleSubmit()
+    {
+        _submitting = true;
+        _error = null;
+
+        try
+        {
+            var user = await UserService.CreateAsync(_model);
+            Navigation.NavigateTo($"/users/{user.Id}");
+        }
+        catch (Exception ex)
+        {
+            _error = ex.Message;
+        }
+        finally
+        {
+            _submitting = false;
+        }
+    }
+
+    public class CreateUserModel
+    {
+        [Required, EmailAddress, MaxLength(255)]
+        public string Email { get; set; } = "";
+
+        [Required, MinLength(2), MaxLength(100)]
+        public string Name { get; set; } = "";
+
+        [Required]
+        public string Role { get; set; } = "";
+
+        public bool IsActive { get; set; } = true;
+    }
+}
+\`\`\`
+
+## Component Communication
+\`\`\`razor
+// Parent Component
+@page "/users"
+
+<UserList Users="_users" OnUserSelected="HandleUserSelected" />
+
+@if (_selectedUser is not null)
+{
+    <UserDetails User="_selectedUser" OnDelete="HandleDelete" />
+}
+
+@code {
+    private List<User> _users = new();
+    private User? _selectedUser;
+
+    protected override async Task OnInitializedAsync()
+    {
+        _users = await UserService.GetAllAsync();
+    }
+
+    private void HandleUserSelected(User user)
+    {
+        _selectedUser = user;
+    }
+
+    private async Task HandleDelete(User user)
+    {
+        await UserService.DeleteAsync(user.Id);
+        _users.Remove(user);
+        _selectedUser = null;
+    }
+}
+
+// Child Component - UserList.razor
+<ul class="list-group">
+    @foreach (var user in Users)
+    {
+        <li class="list-group-item @(user == SelectedUser ? "active" : "")"
+            @onclick="() => OnUserSelected.InvokeAsync(user)">
+            @user.Name
+        </li>
+    }
+</ul>
+
+@code {
+    [Parameter, EditorRequired]
+    public List<User> Users { get; set; } = null!;
+
+    [Parameter]
+    public User? SelectedUser { get; set; }
+
+    [Parameter]
+    public EventCallback<User> OnUserSelected { get; set; }
+}
+
+// Child Component - UserDetails.razor
+<div class="card">
+    <h3>@User.Name</h3>
+    <button class="btn btn-danger" @onclick="HandleDelete">Delete</button>
+</div>
+
+@code {
+    [Parameter, EditorRequired]
+    public User User { get; set; } = null!;
+
+    [Parameter]
+    public EventCallback<User> OnDelete { get; set; }
+
+    private async Task HandleDelete()
+    {
+        await OnDelete.InvokeAsync(User);
+    }
+}
+\`\`\`
+
+## State Management with Cascading Values
+\`\`\`razor
+// App.razor or layout
+<CascadingValue Value="_authState">
+    <Router AppAssembly="@typeof(App).Assembly">
+        <!-- ... -->
+    </Router>
+</CascadingValue>
+
+@code {
+    private AuthState _authState = new();
+}
+
+// Consuming component
+@code {
+    [CascadingParameter]
+    public AuthState Auth { get; set; } = null!;
+
+    private bool IsAuthenticated => Auth.User is not null;
+}
+
+// State container service (for complex state)
+public class AppState
+{
+    public User? CurrentUser { get; private set; }
+    public event Action? OnChange;
+
+    public void SetUser(User user)
+    {
+        CurrentUser = user;
+        NotifyStateChanged();
+    }
+
+    public void ClearUser()
+    {
+        CurrentUser = null;
+        NotifyStateChanged();
+    }
+
+    private void NotifyStateChanged() => OnChange?.Invoke();
+}
+
+// Register as scoped service
+builder.Services.AddScoped<AppState>();
+
+// Usage in component
+@inject AppState State
+@implements IDisposable
+
+@code {
+    protected override void OnInitialized()
+    {
+        State.OnChange += StateHasChanged;
+    }
+
+    public void Dispose()
+    {
+        State.OnChange -= StateHasChanged;
+    }
+}
+\`\`\`
+
+## JavaScript Interop
+\`\`\`razor
+@inject IJSRuntime JS
+
+<button @onclick="ShowAlert">Show Alert</button>
+<button @onclick="CopyToClipboard">Copy</button>
+
+<div @ref="_chartContainer"></div>
+
+@code {
+    private ElementReference _chartContainer;
+
+    private async Task ShowAlert()
+    {
+        await JS.InvokeVoidAsync("alert", "Hello from Blazor!");
+    }
+
+    private async Task CopyToClipboard()
+    {
+        await JS.InvokeVoidAsync("navigator.clipboard.writeText", "Copied text");
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Initialize JS library after first render
+            await JS.InvokeVoidAsync("initChart", _chartContainer);
+        }
+    }
+
+    // Calling .NET from JS
+    [JSInvokable]
+    public static Task<string> GetDataFromDotNet()
+    {
+        return Task.FromResult("Data from .NET");
+    }
+
+    // Instance method
+    private DotNetObjectReference<MyComponent>? _dotNetRef;
+
+    protected override void OnInitialized()
+    {
+        _dotNetRef = DotNetObjectReference.Create(this);
+    }
+
+    [JSInvokable]
+    public void HandleJsCallback(string data)
+    {
+        // Handle callback from JS
+        StateHasChanged();
+    }
+
+    public void Dispose()
+    {
+        _dotNetRef?.Dispose();
+    }
+}
+\`\`\`
+
+## Lifecycle Methods
+\`\`\`razor
+@implements IAsyncDisposable
+
+@code {
+    // Called once when component is initialized
+    protected override void OnInitialized() { }
+    protected override async Task OnInitializedAsync() { }
+
+    // Called when parameters are set/changed
+    protected override void OnParametersSet() { }
+    protected override async Task OnParametersSetAsync() { }
+
+    // Called after each render
+    protected override void OnAfterRender(bool firstRender) { }
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Only runs once after first render
+            // Good for JS interop initialization
+        }
+    }
+
+    // Control when component re-renders
+    protected override bool ShouldRender()
+    {
+        return _dataChanged;  // Return false to skip render
+    }
+
+    // Cleanup
+    public async ValueTask DisposeAsync()
+    {
+        // Cleanup subscriptions, JS interop, etc.
+    }
+}
+\`\`\`
+
+## Render Fragments and Templated Components
+\`\`\`razor
+// DataGrid.razor - Templated component
+@typeparam TItem
+
+<table class="table">
+    <thead>
+        <tr>@HeaderTemplate</tr>
+    </thead>
+    <tbody>
+        @foreach (var item in Items)
+        {
+            <tr>@RowTemplate(item)</tr>
+        }
+    </tbody>
+</table>
+
+@code {
+    [Parameter, EditorRequired]
+    public List<TItem> Items { get; set; } = null!;
+
+    [Parameter, EditorRequired]
+    public RenderFragment HeaderTemplate { get; set; } = null!;
+
+    [Parameter, EditorRequired]
+    public RenderFragment<TItem> RowTemplate { get; set; } = null!;
+}
+
+// Usage
+<DataGrid Items="_users">
+    <HeaderTemplate>
+        <th>Name</th>
+        <th>Email</th>
+    </HeaderTemplate>
+    <RowTemplate Context="user">
+        <td>@user.Name</td>
+        <td>@user.Email</td>
+    </RowTemplate>
+</DataGrid>
+\`\`\`
+
+## ✅ DO
+- Use \`@key\` directive in loops for optimal diffing
+- Use \`EventCallback<T>\` for component communication
+- Use \`[EditorRequired]\` for required parameters
+- Use \`OnAfterRenderAsync\` for JS interop initialization
+- Dispose event handlers and JS references
+- Use \`StateHasChanged()\` only when necessary
+
+## ❌ DON'T
+- Don't call \`StateHasChanged()\` in lifecycle methods (automatic)
+- Don't do heavy work in \`OnInitialized\` - use \`OnInitializedAsync\`
+- Don't use \`@bind\` and \`@onchange\` on same element
+- Don't forget \`@implements IDisposable\` when subscribing to events
+- Don't use \`IJSRuntime\` in \`OnInitialized\` - wait for \`OnAfterRender\`