Skip to content

docs: add Home page with library usage examples #241

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
desmondinho merged 13 commits into from
Aug 20, 2025
Merged

docs: add Home page with library usage examples #241

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
c7facd8
feat(icons): add more icons
desmondinho Aug 17, 2025
398cab0
docs: add showcases on home page
desmondinho Aug 17, 2025
9114d81
chore(components): adjust some styles
desmondinho Aug 17, 2025
83c80be
docs(overview): update paths
desmondinho Aug 17, 2025
a860129
chore(docs): nits
desmondinho Aug 17, 2025
395e534
fix(components): add missing popover js parts
desmondinho Aug 17, 2025
124e019
chore(docs): nits
desmondinho Aug 17, 2025
8d55d98
fix(popover): use overlay to close instead of custom outside click event
desmondinho Aug 20, 2025
fb26f3d
fix(tooltip): remove pressed effect from on trigger hover
desmondinho Aug 20, 2025
788b4b7
chore(showcases): complete column visibility toggling in UserTable ex…
desmondinho Aug 20, 2025
10118ca
chore(showcases): adjust legend color in usage chart
desmondinho Aug 20, 2025
72ca33e
test(popover): update tests
desmondinho Aug 20, 2025
e305615
chore(docs): coderabbit suggestions
desmondinho Aug 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 13 additions & 7 deletions docs/LumexUI.Docs.Client/Components/Header.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@
@rendermode InteractiveWebAssembly

<LumexNavbar Sticky="@true"
Bordered="@true"
MaxWidth="@MaxWidth.XLarge"
Bordered="@Bordered"
MaxWidth="@MaxWidth"
Class="@Class"
Classes="@(new() { Wrapper = "gap-6" })">
<LumexNavbarBrand>
<LumexLink Href="/"
Expand All @@ -24,7 +25,7 @@
</LumexNavbarItem>
}

<LumexNavbarItem Class="h-6">
<LumexNavbarItem Class="h-5">
<LumexDivider Orientation="@Orientation.Vertical" />
</LumexNavbarItem>
@_headerActions
Expand All @@ -41,23 +42,28 @@
</LumexNavbar>

@code {
[Parameter] public MaxWidth MaxWidth { get; set; } = MaxWidth.XLarge;
[Parameter] public bool Bordered { get; set; } = true;
[Parameter] public string? Class { get; set; }

private readonly RenderFragment _headerActions =
@<text>
<LumexNavbarItem Class="flex">
<ThemeToggle />
</LumexNavbarItem>
<LumexNavbarItem Class="flex">
<LumexLink Href="https://github.com/LumexUI/lumexui"
External="@true"
Class="text-foreground-500 hover:text-foreground-600 hover:opacity-100">
<GithubIcon Size="20" />
<span class="ml-1.5 text-small font-medium">294</span>
</LumexLink>
</LumexNavbarItem>
<LumexNavbarItem Class="flex">
<ThemeToggle />
</LumexNavbarItem>
</text>;

private readonly NavItem[] _navItems = new NavItem[]
{
new("/", "Docs"),
new("/docs/getting-started", "Docs"),
Copy link

@coderabbitai coderabbitai bot Aug 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Verify updated route exists and is linked correctly.

Ensure a page is bound to “/docs/getting-started” and that any previous "/" or "/docs" routes redirect appropriately.

Run this to confirm the route and find potential stale routes:

🏁 Script executed:

#!/bin/bash
# Confirm a page exists for /docs/getting-started and inspect related pages.
rg -nP -C2 '^\s*@page\s+"?/docs/getting-started"?\s*$' --type=cshtml --type=razor
rg -nP -C2 '^\s*@page\s+"?/(docs(/getting-started)?|)$' --type=cshtml --type=razor

Length of output: 228

🏁 Script executed:

#!/bin/bash
# Confirm @page directives exist for /docs/getting-started and related routes
rg -nP -C2 '@page\s+"/docs/getting-started"' -g '*.razor' -g '*.cshtml'
rg -nP -C2 '@page\s+"/docs"'              -g '*.razor' -g '*.cshtml'
rg -nP -C2 '@page\s+"/"'                  -g '*.razor' -g '*.cshtml'

Length of output: 692

Missing /docs route redirect

  • docs/LumexUI.Docs.Client/Pages/Getting Started/Overview.razor defines
    • @page "/docs/getting-started"
    • @page "/docs/getting-started/overview"
  • No @page "/docs" endpoint was found—requests to /docs will 404 unless you add a redirect or stub page.
  • The root route (/) is still served by Home.razor.

Please add a page or redirect for /docs (for example, a Razor component with @page "/docs" that forwards to /docs/getting-started) so old links don’t break.

🤖 Prompt for AI Agents 
In docs/LumexUI.Docs.Client/Components/Header.razor around line 66, the app
links to "/docs/getting-started" but there is no "/docs" route, so requests to
"/docs" 404; add a new Razor component with @page "/docs" (e.g.,
Pages/Docs/Index.razor) that immediately redirects to "/docs/getting-started"
using NavigationManager.NavigateTo("/docs/getting-started", true) or an
equivalent server-side redirect, and ensure the new component is included in the
project so legacy "/docs" links resolve.

new("/docs/components", "Components"),
};

Expand Down
33 changes: 33 additions & 0 deletions docs/LumexUI.Docs.Client/Components/Layouts/HomeLayout.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
@namespace LumexUI.Docs.Client.Components
@inherits LayoutComponentBase
@layout MainLayout

<Header Bordered="@false"
MaxWidth="@MaxWidth.XXLarge"
Class="before:backdrop-saturate-100" />

@Body

<footer class="mt-12 text-small/6">
<div class="py-10 flex flex-col justify-center items-center gap-3">
<p class="text-default-500">
&copy; @(DateTimeOffset.UtcNow.ToString( "yyyy" )) LumexUI. All rights reserved.
</p>

<div class="flex items-center gap-1">
<LumexLink Href="https://github.com/LumexUI/lumexui"
External="@true"
Class="p-1 text-default-600">
<GithubIcon Size="20" />
<span class="sr-only">GitHub</span>
</LumexLink>

<LumexLink Href="https://discord.gg/jjgMz3apcb"
External="@true"
Class="p-1 text-default-600">
<DiscordIcon Size="20" />
<span class="sr-only">Discord</span>
</LumexLink>
</div>
</div>
</footer>
54 changes: 54 additions & 0 deletions docs/LumexUI.Docs.Client/Components/ThemeSelector.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
@namespace LumexUI.Docs.Client.Components
@rendermode InteractiveWebAssembly

<LumexSelect TValue="ThemeColor"
LabelPlacement="@LabelPlacement.Outside"
Value="@_themeColor"
ValueChanged="@HandleThemeChange"
Class="max-w-40">
<ChildContent>
@foreach( var color in Enum.GetValues<ThemeColor>()[1..] )
{
<LumexSelectItem @key="@color" Value="@color">
<div class="flex gap-2 items-center">
<span class="w-4 h-4 border border-default-900/10 rounded-full shrink-0 @_themeColorMap[color]" />
@color.ToString()
</div>
</LumexSelectItem>
}
</ChildContent>
<ValueContent Context="color">
<div class="flex gap-2 items-center">
<span class="w-4 h-4 border border-default-900/10 rounded-full shrink-0 @_themeColorMap[color]" />
@color.ToString()
</div>
</ValueContent>
</LumexSelect>

@code {
[Inject] private DocsThemeService ThemeService { get; set; } = default!;

private readonly Dictionary<ThemeColor, string> _themeColorMap = new()
{
[ThemeColor.Default] = "bg-default",
[ThemeColor.Primary] = "bg-primary",
[ThemeColor.Secondary] = "bg-secondary",
[ThemeColor.Success] = "bg-success",
[ThemeColor.Warning] = "bg-warning",
[ThemeColor.Danger] = "bg-danger",
[ThemeColor.Info] = "bg-info"
};

private ThemeColor _themeColor = ThemeColor.Default;

private void HandleThemeChange( ThemeColor color )
{
if( color is ThemeColor.None )
{
return;
}

_themeColor = color;
ThemeService.SetThemeColor( color );
}
}
2 changes: 1 addition & 1 deletion docs/LumexUI.Docs.Client/Pages/Getting Started/Overview.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@page "/"
@page "/docs/getting-started"
@page "/docs/getting-started/overview"
@layout DocsContentLayout

Expand Down
51 changes: 51 additions & 0 deletions docs/LumexUI.Docs.Client/Pages/Home/Examples/ActivityGoal.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
@rendermode InteractiveWebAssembly
@inherits ExampleComponentBase

<LumexCard Classes="@(new()
{
Header = "flex-col items-start p-6 pb-0 gap-1",
Body = "px-6 py-5 gap-4",
Footer = "p-6 pt-0"
})">
<LumexCardHeader>
<div class="font-semibold text-foreground-900">Move Goal</div>
<p class="text-small text-foreground-500">Set your daily activity goal.</p>
</LumexCardHeader>

<LumexCardBody>
<div class="flex items-center justify-center gap-4">
<LumexButton IconOnly="@true"
Disabled="@(_caloriesDay <= _minCalories)"
Size="@LumexUI.Common.Size.Small"
Radius="@Radius.Full"
Variant="@Variant.Light"
OnClick="@DecrementCalories"
Class="size-7 min-w-7 border border-default-900/10">
<MinusIcon Size="16" />
</LumexButton>

<div class="text-center">
<div class="text-foreground-900 text-4xl font-bold tracking-tighter tabular-nums">@_caloriesDay</div>
<div class="text-foreground text-tiny uppercase">Calories/day</div>
</div>

<LumexButton IconOnly="@true"
Disabled="@(_caloriesDay >= _maxCalories)"
Size="@LumexUI.Common.Size.Small"
Radius="@Radius.Full"
Variant="@Variant.Light"
OnClick="@IncrementCalories"
Class="size-7 min-w-7 border border-default-900/10">
<PlusIcon Size="16" />
</LumexButton>
</div>

<div class="h-20 @_chartCssVariables[ThemeColor]">
<div id="chart-activity" />
</div>
</LumexCardBody>

<LumexCardFooter>
<LumexButton FullWidth="@true" Variant="@Variant.Flat">Set goal</LumexButton>
</LumexCardFooter>
</LumexCard>
43 changes: 43 additions & 0 deletions docs/LumexUI.Docs.Client/Pages/Home/Examples/ActivityGoal.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
// Copyright (c) LumexUI 2024
// LumexUI licenses this file to you under the MIT license
// See the license here https://github.com/LumexUI/lumexui/blob/main/LICENSE

using LumexUI.Common;

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

namespace LumexUI.Docs.Client.Pages.Home.Examples;

public partial class ActivityGoal : ExampleComponentBase
{
private const int _minCalories = 200;
private const int _maxCalories = 400;

private readonly Dictionary<ThemeColor, string> _chartCssVariables = new()
{
[ThemeColor.Default] = "[--chart:var(--lumex-default-900)]",
[ThemeColor.Primary] = "[--chart:var(--lumex-primary)]",
[ThemeColor.Secondary] = "[--chart:var(--lumex-secondary)]",
[ThemeColor.Success] = "[--chart:var(--lumex-success)]",
[ThemeColor.Warning] = "[--chart:var(--lumex-warning)]",
[ThemeColor.Danger] = "[--chart:var(--lumex-danger)]",
[ThemeColor.Info] = "[--chart:var(--lumex-info)]",
};

private int _caloriesDay = 350;

[Inject] private IJSRuntime JSRuntime { get; set; } = default!;

protected override async Task OnAfterRenderAsync( bool firstRender )
{
if( firstRender )
{
await JSRuntime.InvokeVoidAsync( "charts.activity.initialize" );
}
}

private void DecrementCalories() => SetCalories( -10 );
private void IncrementCalories() => SetCalories( +10 );
private void SetCalories( int value ) => _caloriesDay += value;
}
70 changes: 70 additions & 0 deletions docs/LumexUI.Docs.Client/Pages/Home/Examples/Authentication.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
@rendermode InteractiveWebAssembly
@inherits ExampleComponentBase

<LumexCard Classes="@(new()
{
Header = "p-6 pb-0",
Body = "flex-col p-6 gap-4",
Footer = "p-6 pt-0 justify-center"
})">
<LumexCardHeader>
<div class="text-xl text-foreground-900 font-medium">
Sign in to your account
</div>
</LumexCardHeader>

<LumexCardBody>
@if( !_isEmailLogin )
{
<LumexButton Color="@ThemeColor"
OnClick="@(() => _isEmailLogin = true)">
<StartContent>
<EnvelopeFilledIcon Size="20" />
</StartContent>
<ChildContent>Continue with email</ChildContent>
</LumexButton>
}
else
{
<EditForm Model="@LoginModel" FormName="login" class="flex flex-col gap-4">
<LumexTextbox Type="@InputType.Email"
Label="Email"
@bind-Value="@LoginModel.Email" />
<LumexButton Type="@ButtonType.Submit"
Color="@ThemeColor">
Continue
</LumexButton>
</EditForm>
}

<div class="flex items-center gap-4 py-2">
<LumexDivider />
<p class="shrink-0 text-tiny text-default-500">OR</p>
<LumexDivider />
</div>

<LumexButton Variant="@Variant.Flat">
<StartContent>
<GoogleIcon Size="20" />
</StartContent>
<ChildContent>Continue with Google</ChildContent>
</LumexButton>

<LumexButton Variant="@Variant.Flat">
<StartContent>
<GithubIcon Size="20" />
</StartContent>
<ChildContent>Continue with Github</ChildContent>
</LumexButton>
</LumexCardBody>

<LumexCardFooter>
<p class="text-small text-foreground-500">
Need to create an account?
<LumexLink Color="@ThemeColor"
Class="@($"font-medium {(ThemeColor is ThemeColor.Default ? "text-foreground" : default)}")">
Sign Up
</LumexLink>
</p>
</LumexCardFooter>
</LumexCard>
18 changes: 18 additions & 0 deletions docs/LumexUI.Docs.Client/Pages/Home/Examples/Authentication.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
using Microsoft.AspNetCore.Components;

namespace LumexUI.Docs.Client.Pages.Home.Examples;

public partial class Authentication : ExampleComponentBase
{
[SupplyParameterFromForm]
private Login LoginModel { get; set; } = new();

private bool _isEmailLogin;

private void Submit() { }

public sealed record Login
{
public string? Email { get; set; }
}
}
Loading
Loading