feat(components): introduce Radio Group component (#113)

* Add Radio basis

* Add LumexRadioGroup

* Build out Radio and RadioGroup

And add styles

* Add styles and align with Blazor Radio control

* Clean up functionality

- Use appropriate base classes
- Improve link between Context-RadioGroup-Radio

* FIx circular reference/infinite loop

* Add test and docs

* Remove errant bracket

* More tests

* Add more RadioGroup tests

Fix missing name attribute too

* Update Description.razor

* Fix styles

* Add support for Orientation and fix rendering

Also build out more of the docs

* Code organization to fit within convention

And add more code comments and documentation

* Updated documentation

* Add custom style example to Radio

* Remove duplicate file declaration

* Fix build failure after merge

* Update NuGet non-breaking packages

Fixes vulnerability in System.Text.Json 8.0.0

* Fix issue preventing proper selection

* Documentation updates

* Fix failing tests

* Add docs footer

* Add more test coverage

* Update CustomStyles.razor

* PR comments and test updates

* docs: update navigation

* nits

* docs: simplified examples

* docs: add an example showcasing 2-way data binding

* chore: shorten the introduction in the README

* docs(footer): cleanup

---------

Co-authored-by: desmondinho <[email protected]>

.editorconfig

@@ -2,7 +2,7 @@
 root = true
 
 # C# files
-[*.cs]
+[*.{cs,cshtml,razor}]
 
 #### Core EditorConfig Options ####
 

.gitignore

@@ -402,3 +402,9 @@ FodyWeavers.xsd
 
 /docs/LumexUI.Docs/**/*/css
 /docs/LumexUI.Docs/**/*.exe
+
+# .idea Folder for Rider (IntelliJ IDEA)
+.idea/*
+
+# MacOS DS_Store files
+**/.DS_Store

LumexUI.sln

@@ -8,6 +8,8 @@ EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Items", "{F98196F8-3B41-461E-A47A-CC1B80E34C68}"
 	ProjectSection(SolutionItems) = preProject
 		.editorconfig = .editorconfig
+		.gitignore = .gitignore
+		README.md = README.md
 	EndProjectSection
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "LumexUI.Utilities", "src\LumexUI.Utilities\LumexUI.Utilities.csproj", "{92A1C629-AB3E-4264-B03D-407E09162902}"

README.md

@@ -16,6 +16,15 @@
   🚀 A versatile Blazor UI library built using Tailwind CSS.
 </p>
 
+## Introduction
+
+LumexUI is an open-source project that offers a diverse collection of Blazor UI components, 
+all fully built with Tailwind CSS for streamlined and modern web development.
+
+These components are designed to be not only aesthetically pleasing, but also highly customizable, 
+allowing you to tailor them to meet your specific needs. The library is optimized for performance, 
+ensuring that your applications remain fast and responsive.
+
 ## Documentation
 
 For full documentation, visit [lumexui.org](https://lumexui.org).

docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs

@@ -36,6 +36,7 @@ public class NavigationStore
             .Add( new( nameof( LumexNavbar ) ) )
             .Add( new( nameof( LumexNumbox<T> ) ) )
             .Add( new( nameof( LumexPopover ) ) )
+            .Add( new( nameof( LumexRadioGroup<T>), ComponentStatus.New ) )
             .Add( new( nameof( LumexSelect<T> ), ComponentStatus.New ) )
             .Add( new( nameof( LumexSwitch ) ) )
             .Add( new( nameof( LumexTextbox ) ) );

docs/LumexUI.Docs.Client/Components/DocsFooter.razor

@@ -1,7 +1,27 @@
 @namespace LumexUI.Docs.Client.Components
 
 <footer class="mt-12 text-sm leading-6">
-    <div class="pt-10 pb-28 border-t border-divider">
-        <p>.</p>
+    <div class="pt-10 pb-20 border-t border-divider flex flex-col justify-center items-center gap-1">
+        <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">
+                <LumexIcon Icon="@Icons.Brands.GitHub"
+                           viewBox="0 0 24 24" />
+                <span class="sr-only">GitHub</span>
+            </LumexLink>
+
+            <LumexLink Href="https://discord.gg/jjgMz3apcb"
+                       External="@true"
+                       Class="p-1 text-default-600">
+                <LumexIcon Icon="@Icons.Brands.Discord"
+                           viewBox="0 0 24 24" />
+                <span class="sr-only">Discord</span>
+            </LumexLink>
+        </div>
     </div>
 </footer>

docs/LumexUI.Docs.Client/Components/DocsSlotsSection.razor

@@ -1,8 +1,8 @@
 @namespace LumexUI.Docs.Client.Components
 
-<DocsSection Title="Custom Styles">
+<DocsSection Title="@Title">
     <p>
-        This component suppots named slots (represented as <code>data-*</code> attributes) that
+        This component supports named slots that
         allow you to apply custom CSS to specific parts of the component.
     </p>
     <ul>
@@ -23,5 +23,6 @@
 
 @code {
     [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string Title { get; set; } = "Custom Styles";
     [Parameter, EditorRequired] public Slot[] Slots { get; set; } = default!;
 }

docs/LumexUI.Docs.Client/LumexUI.Docs.Client.csproj

@@ -14,8 +14,8 @@
 
 	<ItemGroup>
 		<PackageReference Include="FluentValidation" Version="11.10.0" />
-		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.8" />
-		<PackageReference Include="Microsoft.Extensions.Http" Version="8.0.0" />
+		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.11" />
+		<PackageReference Include="Microsoft.Extensions.Http" Version="8.0.1" />
 	</ItemGroup>
 
 	<ItemGroup>

docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/Examples/Colors.razor

@@ -0,0 +1,9 @@
+<LumexRadioGroup TValue="string">
+    <LumexRadio Color="@ThemeColor.Default" Value="@("default")">Default</LumexRadio>
+    <LumexRadio Color="@ThemeColor.Primary" Value="@("primary")">Primary</LumexRadio>
+    <LumexRadio Color="@ThemeColor.Secondary" Value="@("secondary")">Secondary</LumexRadio>
+    <LumexRadio Color="@ThemeColor.Success" Value="@("success")">Success</LumexRadio>
+    <LumexRadio Color="@ThemeColor.Warning" Value="@("warning")">Warning</LumexRadio>
+    <LumexRadio Color="@ThemeColor.Danger" Value="@("danger")">Danger</LumexRadio>
+    <LumexRadio Color="@ThemeColor.Info" Value="@("info")">Info</LumexRadio>
+</LumexRadioGroup>

docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/Examples/CustomStyles.razor

@@ -0,0 +1,69 @@
+<LumexRadioGroup Label="Choose your preferred meal"
+                 Classes="@_groupSlots"
+                 RadioClasses="@_radioClasses" 
+                 @bind-Value="@_chosenFood">
+    <LumexRadio Value="@("Kebab")">
+        <div class="flex items-center gap-4">
+            <LumexIcon Icon="@Icons.Rounded.KebabDining"
+                       Size="@new("32")" />
+            <div>
+                <div class="font-semibold">Chicken Kebab</div>
+                <p class="text-sm text-primary">$11.99</p>
+            </div>
+        </div>
+    </LumexRadio>
+
+    <LumexRadio Value="@("Ramen")">
+        <div class="flex items-center gap-4">
+            <LumexIcon Icon="@Icons.Rounded.RamenDining"
+                       Size="@new("32")" />
+            <div>
+                <div class="font-semibold">Ramen Bowl</div>
+                <p class="text-sm text-primary">$12.99</p>
+            </div>
+        </div>
+    </LumexRadio>
+
+    <LumexRadio Value="@("Pizza")">
+        <div class="flex items-center gap-4">
+            <LumexIcon Icon="@Icons.Rounded.LocalPizza"
+                       Size="@new("32")" />
+            <div>
+                <div class="font-semibold">Pizza</div>
+                <p class="text-sm text-primary">$5.99</p>
+            </div>
+        </div>
+    </LumexRadio>
+
+    <LumexRadio Value="@("Nothing")">
+        <div class="flex items-center gap-4">
+            <LumexIcon Icon="@Icons.Rounded.NoFood"
+                       Size="@new("32")" />
+            <div>
+                <div class="font-semibold">No Food</div>
+                <p class="text-sm text-primary">No Cost</p>
+            </div>
+        </div>
+    </LumexRadio>
+</LumexRadioGroup>
+
+@code
+{
+    private string? _chosenFood;
+
+    private RadioGroupSlots _groupSlots = new()
+    {
+        Label = "text-neutral-700 font-medium"
+    };
+
+    private RadioSlots _radioClasses = new()
+    {
+        Root = ElementClass.Empty()
+            .Add("inline-flex m-0 bg-surface1 hover:bg-surface2 items-center justify-between")
+            .Add("flex-row-reverse max-w-[300px] rounded-lg gap-4 p-4 border-2 border-default-200")
+            .Add("data-[selected=true]:border-primary")
+            .Add("data-[selected=true]:bg-primary-100/25")
+            .Add("transition-colors")
+            .ToString()
+    };
+}

docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/Examples/Description.razor

@@ -0,0 +1,16 @@
+<LumexRadioGroup Label="Choose the Oscar winner"
+                 Description="@CalculatedDescription"
+                 @bind-Value="@_selectedActor">
+    <LumexRadio Value="@("Leonardo DiCaprio")">Leonardo DiCaprio</LumexRadio>
+    <LumexRadio Value="@("Denzel Washington")">Denzel Washington</LumexRadio>
+    <LumexRadio Value="@("Brad Pitt")">Brad Pitt</LumexRadio>
+    <LumexRadio Value="@("Joaquin Phoenix")">Joaquin Phoenix</LumexRadio>
+    <LumexRadio Value="@("Christian Bale")">Christian Bale</LumexRadio>
+</LumexRadioGroup>
+
+@code
+{
+    private string? _selectedActor;
+
+    private string CalculatedDescription => $"You chose {_selectedActor ?? "nobody"} to win the Oscar";
+}

docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/Examples/Disabled.razor

@@ -0,0 +1,7 @@
+<LumexRadioGroup TValue="string" Disabled="@true">
+    <LumexRadio Value="@("leo")">Leonardo DiCaprio</LumexRadio>
+    <LumexRadio Value="@("denzel")">Denzel Washington</LumexRadio>
+    <LumexRadio Value="@("brad")">Brad Pitt</LumexRadio>
+    <LumexRadio Value="@("joaquin")">Joaquin Phoenix</LumexRadio>
+    <LumexRadio Value="@("christian")">Christian Bale</LumexRadio>
+</LumexRadioGroup>

docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/Examples/Label.razor

@@ -0,0 +1,7 @@
+<LumexRadioGroup TValue="string" Label="Choose the Oscar winner">
+    <LumexRadio Value="@("leo")">Leonardo DiCaprio</LumexRadio>
+    <LumexRadio Value="@("denzel")">Denzel Washington</LumexRadio>
+    <LumexRadio Value="@("brad")">Brad Pitt</LumexRadio>
+    <LumexRadio Value="@("joaquin")">Joaquin Phoenix</LumexRadio>
+    <LumexRadio Value="@("christian")">Christian Bale</LumexRadio>
+</LumexRadioGroup>

docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/Examples/OptionDescriptions.razor

@@ -0,0 +1,14 @@
+<LumexRadioGroup TValue="string" Label="Choose Preferred Accommodations">
+    <LumexRadio Description="The best of the best, the lap of luxury." Value="@("first")">
+        First Class
+    </LumexRadio>
+    <LumexRadio Description="Almost First Class, but not quite." Value="@("second")">
+        Second Class
+    </LumexRadio>
+    <LumexRadio Description="You'll feel lucky to have a bed." Value="@("third")">
+        Third Class
+    </LumexRadio>
+    <LumexRadio Description="For the full stowaway experience." Value="@("steerage")">
+        Steerage
+    </LumexRadio>
+</LumexRadioGroup>

docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/Examples/ReadOnly.razor

@@ -0,0 +1,7 @@
+<LumexRadioGroup ReadOnly="@true" Value="@("leo")">
+    <LumexRadio Value="@("leo")">Leonardo DiCaprio</LumexRadio>
+    <LumexRadio Value="@("denzel")">Denzel Washington</LumexRadio>
+    <LumexRadio Value="@("brad")">Brad Pitt</LumexRadio>
+    <LumexRadio Value="@("joaquin")">Joaquin Phoenix</LumexRadio>
+    <LumexRadio Value="@("christian")">Christian Bale</LumexRadio>
+</LumexRadioGroup>

docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/Examples/Sizes.razor

@@ -0,0 +1,5 @@
+<LumexRadioGroup TValue="string">
+    <LumexRadio Size="@Size.Small" Value="@("sm")">Small</LumexRadio>
+    <LumexRadio Size="@Size.Medium" Value="@("md")">Medium</LumexRadio>
+    <LumexRadio Size="@Size.Large" Value="@("lg")">Large</LumexRadio>
+</LumexRadioGroup>

docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/Examples/TwoWayDataBinding.razor

@@ -0,0 +1,37 @@
+<div class="flex flex-col gap-2">
+    <LumexRadioGroup @bind-Value="@_valueOne">
+        <LumexRadio Value="@("leo")">Leonardo DiCaprio</LumexRadio>
+        <LumexRadio Value="@("denzel")">Denzel Washington</LumexRadio>
+        <LumexRadio Value="@("brad")">Brad Pitt</LumexRadio>
+        <LumexRadio Value="@("joaquin")">Joaquin Phoenix</LumexRadio>
+        <LumexRadio Value="@("christian")">Christian Bale</LumexRadio>
+    </LumexRadioGroup>
+    <p class="text-sm text-default-500">
+        Selected: @_valueOne
+    </p>
+</div>
+
+<div class="flex flex-col gap-2">
+    <LumexRadioGroup TValue="string"
+                     Value="@_valueTwo"
+                     ValueChanged="@OnValueChanged">
+        <LumexRadio Value="@("leo")">Leonardo DiCaprio</LumexRadio>
+        <LumexRadio Value="@("denzel")">Denzel Washington</LumexRadio>
+        <LumexRadio Value="@("brad")">Brad Pitt</LumexRadio>
+        <LumexRadio Value="@("joaquin")">Joaquin Phoenix</LumexRadio>
+        <LumexRadio Value="@("christian")">Christian Bale</LumexRadio>
+    </LumexRadioGroup>
+    <p class="text-sm text-default-500">
+        Selected: @_valueTwo
+    </p>
+</div>
+
+@code {
+    private string? _valueOne;
+    private string? _valueTwo;
+
+    private void OnValueChanged(string value)
+    {
+        _valueTwo = value;
+    }
+}

docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/Examples/Usage.razor

@@ -0,0 +1,7 @@
+<LumexRadioGroup TValue="string">
+    <LumexRadio Value="@("leo")">Leonardo DiCaprio</LumexRadio>
+    <LumexRadio Value="@("denzel")">Denzel Washington</LumexRadio>
+    <LumexRadio Value="@("brad")">Brad Pitt</LumexRadio>
+    <LumexRadio Value="@("joaquin")">Joaquin Phoenix</LumexRadio>
+    <LumexRadio Value="@("christian")">Christian Bale</LumexRadio>
+</LumexRadioGroup>

docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/Examples/_Orientation.razor

@@ -0,0 +1,6 @@
+<LumexRadioGroup TValue="string" Orientation="@Orientation.Horizontal">
+    <LumexRadio Value="@("first")">First Class</LumexRadio>
+    <LumexRadio Value="@("second")">Second Class</LumexRadio>
+    <LumexRadio Value="@("third")">Third Class</LumexRadio>
+    <LumexRadio Value="@("steerage")">Steerage</LumexRadio>
+</LumexRadioGroup>

docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/PreviewCodes/Colors.razor

@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new(name: null, snippet: "RadioGroup.Code.Colors")">
+    <LumexUI.Docs.Client.Pages.Components.RadioGroup.Examples.Colors />
+</PreviewCode>

docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/PreviewCodes/CustomStyles.razor

@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new(name: null, snippet: "RadioGroup.Code.CustomStyles")">
+    <LumexUI.Docs.Client.Pages.Components.RadioGroup.Examples.CustomStyles />
+</PreviewCode>

docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/PreviewCodes/Description.razor

@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new(name: null, snippet: "RadioGroup.Code.Description")">
+    <LumexUI.Docs.Client.Pages.Components.RadioGroup.Examples.Description />
+</PreviewCode>

docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/PreviewCodes/Disabled.razor

@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new(name: null, snippet: "RadioGroup.Code.Disabled")">
+    <LumexUI.Docs.Client.Pages.Components.RadioGroup.Examples.Disabled />
+</PreviewCode>

docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/PreviewCodes/Label.razor

@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new(name: null, snippet: "RadioGroup.Code.Label")">
+    <LumexUI.Docs.Client.Pages.Components.RadioGroup.Examples.Label />
+</PreviewCode>

docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/PreviewCodes/OptionDescriptions.razor

@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new(name: null, snippet: "RadioGroup.Code.OptionDescriptions")">
+    <LumexUI.Docs.Client.Pages.Components.RadioGroup.Examples.OptionDescriptions />
+</PreviewCode>

docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/PreviewCodes/Orientation.razor

@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new(name: null, snippet: "RadioGroup.Code._Orientation")">
+    <LumexUI.Docs.Client.Pages.Components.RadioGroup.Examples._Orientation />
+</PreviewCode>

docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/PreviewCodes/ReadOnly.razor

@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new(name: null, snippet: "RadioGroup.Code.ReadOnly")">
+    <LumexUI.Docs.Client.Pages.Components.RadioGroup.Examples.ReadOnly />
+</PreviewCode>

docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/PreviewCodes/Sizes.razor

@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new(name: null, snippet: "RadioGroup.Code.Sizes")">
+    <LumexUI.Docs.Client.Pages.Components.RadioGroup.Examples.Sizes />
+</PreviewCode>

docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/PreviewCodes/TwoWayDataBinding.razor

@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new(name: null, snippet: "RadioGroup.Code.TwoWayDataBinding")">
+    <LumexUI.Docs.Client.Pages.Components.RadioGroup.Examples.TwoWayDataBinding />
+</PreviewCode>

docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/PreviewCodes/Usage.razor

@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new(name: null, snippet: "RadioGroup.Code.Usage")">
+    <LumexUI.Docs.Client.Pages.Components.RadioGroup.Examples.Usage />
+</PreviewCode>