feat(docs): add the Numbox page (#114)

* fix(input-field): set validation message on value change * feat(docs): add the Numbox page * test: fix broken ones * chore(docs): nits
LumexUI · Nov 29, 2024 · ccc3573 · ccc3573
1 parent d8efd0f
commit ccc3573
Show file tree

Hide file tree

Showing 44 changed files with 789 additions and 23 deletions.
diff --git a/docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs b/docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs
@@ -33,7 +33,7 @@ public class NavigationStore
             .Add( new( nameof( LumexIcon ) ) )
             .Add( new( nameof( LumexLink ) ) )
             .Add( new( nameof( LumexNavbar ) ) )
-            .Add( new( nameof( LumexNumbox<T> ), NavItemStatus.Soon ) )
+            .Add( new( nameof( LumexNumbox<T> ) ) )
             .Add( new( nameof( LumexPopover ) ) )
             .Add( new( nameof( LumexSwitch ) ) )
             .Add( new( nameof( LumexTextbox ) ) );

diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/ClearButton.razor b/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/ClearButton.razor
@@ -0,0 +1,30 @@
+<div class="w-full">
+    <LumexNumbox TValue="double?"
+                 Clearable="@true"
+                 Label="Temperature °C"
+                 Placeholder="Enter the temperature"
+                 Value="@_value"
+                 Variant="@InputVariant.Outlined"
+                 OnCleared="@Notify"
+                 Class="max-w-xs" />
+</div>
+<p class="text-sm text-default-500">@_text</p>
+
+@code {
+    private string? _text;
+    private double? _value = 25;
+
+    private void Notify()
+    {
+        _value = default;
+
+        if( string.IsNullOrEmpty( _text ) )
+        {
+            _text = "Input is cleared!";
+        }
+        else
+        {
+            _text += " ..and again..";
+        }
+    }
+}
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/Colors.razor b/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/Colors.razor
@@ -0,0 +1,25 @@
+<div class="w-full grid grid-cols-1 gap-4 md:grid-cols-2">
+    @foreach( var color in _colors )
+    {
+        <div>
+            <LumexNumbox TValue="double?"
+                         Color="@color"
+                         Label="Temperature °C"
+                         Placeholder="Enter the temperature"
+                         Value="25" />
+            <small class="text-default-400 mt-1">@color</small>
+        </div>
+    }
+</div>
+
+@code {
+    private ThemeColor[] _colors = [
+        ThemeColor.Default,
+        ThemeColor.Primary,
+        ThemeColor.Secondary,
+        ThemeColor.Success,
+        ThemeColor.Warning,
+        ThemeColor.Danger,
+        ThemeColor.Info
+    ];
+}
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/CustomStyles.razor b/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/CustomStyles.razor
@@ -0,0 +1,35 @@
+<LumexNumbox TValue="double?"
+             Label="Temperature °C"
+             Placeholder="Enter the temperature"
+             Radius="@Radius.Large"
+             Clearable="@true"
+             StartContent="@_thermometer"
+             Value="25"
+             Classes="@_classes" />
+
+@code {
+    private RenderFragment _thermometer =
+        @<LumexIcon Icon="@Icons.Rounded.Thermometer"
+                    Size="@new("20")"
+                    Class="text-secondary-400 shrink-0">
+        </LumexIcon>;
+
+    private InputFieldSlots _classes = new()
+    {
+        Label = "text-default-700",
+        InnerWrapper = "bg-transparent",
+        InputWrapper = ElementClass.Empty()
+            .Add( "shadow-xl" )
+            .Add( "bg-default-200/50" )
+            .Add( "backdrop-blur-xl" )
+            .Add( "backdrop-saturate-200" )
+            .Add( "hover:bg-default-200/70" )
+            .Add( "group-data-[focus=true]:bg-default-200/85" )
+            .ToString(),
+        Input = ElementClass.Empty()
+            .Add( "bg-transparent" )
+            .Add( "text-default-900" )
+            .Add( "placeholder:text-default-500" )
+            .ToString()
+    };
+}
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/DebounceDelay.razor b/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/DebounceDelay.razor
@@ -0,0 +1,18 @@
+<div class="w-full flex flex-col gap-2">
+    <LumexNumbox TValue="double?"
+                 DebounceDelay="250"
+                 Behavior="@InputBehavior.OnInput"
+                 Label="Temperature °C"
+                 Placeholder="Enter the temperatute"
+                 Clearable="@true"
+                 Class="max-w-xs"
+                 @bind-Value="@_value" />
+
+    <p class="text-sm text-default-500">
+        Value: @_value
+    </p>
+</div>
+
+@code {
+    private double? _value = 25;
+}
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/Description.razor b/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/Description.razor
@@ -0,0 +1,5 @@
+<LumexNumbox TValue="double?"
+             Label="Temperature °C"
+             Placeholder="Enter the temperature"
+             Description="The temperature is used to calculate the process time."
+             Class="max-w-xs" />
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/Disabled.razor b/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/Disabled.razor
@@ -0,0 +1,5 @@
+<LumexNumbox TValue="double?"
+             Disabled="@true"
+             Label="Temperature °C"
+             Placeholder="Enter the temperature" 
+             Class="max-w-xs" />
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/ErrorMessage.razor b/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/ErrorMessage.razor
@@ -0,0 +1,63 @@
+@using FluentValidation
+@using FluentValidation.Results
+
+<LumexNumbox TValue="double?"
+             Variant="@InputVariant.Outlined"
+             Label="Temperature °C"
+             Required="@true"
+             ErrorMessage="@_userValidator.TempErrorMessage"
+             Invalid="@(!string.IsNullOrEmpty(_userValidator.TempErrorMessage))"
+             Color="@(!string.IsNullOrEmpty(_userValidator.TempErrorMessage) ? ThemeColor.Danger : ThemeColor.Success)"
+             Value="@_user.Temperature"
+             ValueChanged="@OnAgeChange"
+             Class="max-w-xs" />
+
+@code {
+    private User _user = new();
+    private UserValidator _userValidator = new();
+
+    protected override void OnInitialized()
+    {
+        _user.Temperature = -274.15;
+        Validate();
+    }
+
+    private void OnAgeChange( double? value )
+    {
+        _user.Temperature = value;
+        Validate();
+    }
+
+    private void Validate()
+    {
+        var result = _userValidator.Validate( _user );
+        if( !result.IsValid )
+        {
+            _userValidator.TempErrorMessage = result.Errors
+                .Where( failure => failure.PropertyName == nameof( User.Temperature ) )
+                .Select( failure => failure.ErrorMessage )
+                .FirstOrDefault();
+        }
+        else
+        {
+            _userValidator.TempErrorMessage = null;
+        }
+    }
+
+    public class User
+    {
+        public double? Temperature { get; set; }
+    }
+
+    public class UserValidator : AbstractValidator<User>
+    {
+        public string? TempErrorMessage { get; set; }
+
+        public UserValidator()
+        {
+            RuleFor( user => user.Temperature )
+                .NotNull().WithMessage( "Temperature can't be null" )
+                .GreaterThan( -273.15 ).WithMessage( "Temperature cannot be lower than or equal to absolute zero" );
+        }
+    }
+}
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/LabelPlacements.razor b/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/LabelPlacements.razor
@@ -0,0 +1,19 @@
+<div class="w-full grid grid-cols-1 gap-4">
+    @foreach( var placement in _labelPlacements )
+    {
+        <div>
+            <div class="w-full flex flex-wrap gap-4 md:flex-nowrap">
+                <LumexNumbox TValue="double?" LabelPlacement="@placement" Label="Temperature °C" />
+                <LumexNumbox TValue="double?" LabelPlacement="@placement" Label="Temperature °C" Placeholder="Enter the temperature" />
+            </div>
+            <small class="text-default-400 mt-1">@placement</small>
+        </div>
+    }
+</div>
+
+@code {
+    private LabelPlacement[] _labelPlacements = [
+        LabelPlacement.Inside,
+        LabelPlacement.Outside
+    ];
+}
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/MinMax.razor b/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/MinMax.razor
@@ -0,0 +1,7 @@
+<LumexNumbox TValue="double?"
+             Label="Temperature °C"
+             Placeholder="Enter the temperature"
+             Class="max-w-xs"
+             min="10"
+             max="20"
+             step="0.5" />
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/ReadOnly.razor b/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/ReadOnly.razor
@@ -0,0 +1,6 @@
+<LumexNumbox TValue="double?"
+             ReadOnly="@true"
+             Label="Temperature °C"
+             Placeholder="Enter the temperature"
+             Class="max-w-xs"
+             Value="25" />
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/Required.razor b/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/Required.razor
@@ -0,0 +1,5 @@
+<LumexNumbox TValue="double?"
+             Required="@true"
+             Label="Temperature °C"
+             Placeholder="Enter the temperature"
+             Class="max-w-xs" />
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/Sizes.razor b/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/Sizes.razor
@@ -0,0 +1,20 @@
+<div class="w-full grid grid-cols-1 gap-4">
+    @foreach( var size in _sizes )
+    {
+        <div>
+            <div class="w-full flex flex-wrap gap-4 md:flex-nowrap">
+                <LumexNumbox TValue="double?" Size="@size" Label="Temperature °C" />
+                <LumexNumbox TValue="double?" Size="@size" Label="Temperature °C" Placeholder="Enter the temperature" />
+            </div>
+            <small class="text-default-400 mt-1">@size</small>
+        </div>
+    }
+</div>
+
+@code {
+    private Size[] _sizes = [
+        Size.Small,
+        Size.Medium,
+        Size.Large
+    ];
+}
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/StartEndContent.razor b/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/StartEndContent.razor
@@ -0,0 +1,122 @@
+<div class="grid gap-4">
+    <div class="w-full grid grid-cols-1 gap-4">
+        <div>
+            <div class="w-full flex flex-wrap gap-4 md:flex-nowrap">
+                <LumexNumbox TValue="double?"
+                             Label="Temperature °C"
+                             Placeholder="25"
+                             LabelPlacement="@LabelPlacement.Outside"
+                             StartContent="@_thermometerIcon" />
+
+                <LumexNumbox TValue="double?"
+                             Label="Distance"
+                             Placeholder="100"
+                             LabelPlacement="@LabelPlacement.Outside"
+                             StartContent="@_distanceIcon" />
+
+                <LumexNumbox TValue="decimal?"
+                             Label="Price"
+                             Placeholder="0.00"
+                             LabelPlacement="@LabelPlacement.Outside"
+                             StartContent="@_euroSymbolIcon" />
+            </div>
+            <small class="text-default-500 mt-1">Start</small>
+        </div>
+    </div>
+
+    <div class="w-full grid grid-cols-1 gap-4">
+        <div>
+            <div class="w-full flex flex-wrap gap-4 md:flex-nowrap">
+                <LumexNumbox TValue="double?"
+                             Label="Temperature °C"
+                             Placeholder="25"
+                             LabelPlacement="@LabelPlacement.Outside"
+                             EndContent="@_thermometerIcon" />
+
+                <LumexNumbox TValue="double?"
+                             Label="Distance"
+                             Placeholder="100"
+                             LabelPlacement="@LabelPlacement.Outside"
+                             EndContent="@_distanceIcon" />
+
+                <LumexNumbox TValue="decimal?"
+                             Label="Price"
+                             Placeholder="0.00"
+                             LabelPlacement="@LabelPlacement.Outside"
+                             EndContent="@_euroSymbolIcon" />
+            </div>
+            <small class="text-default-500 mt-1">End</small>
+        </div>
+    </div>
+
+    <div class="w-full grid grid-cols-1 gap-4">
+        <div>
+            <div class="w-full flex flex-wrap gap-4 md:flex-nowrap">
+                <LumexNumbox TValue="double?"
+                             Label="Temperature °C"
+                             Placeholder="25"
+                             LabelPlacement="@LabelPlacement.Outside"
+                             StartContent="@_thermometerIcon"
+                             EndContent="@_tempCelsiusContent" />
+
+                <LumexNumbox TValue="double?"
+                             Label="Distance"
+                             Placeholder="100"
+                             LabelPlacement="@LabelPlacement.Outside"
+                             StartContent="@_distanceIcon"
+                             EndContent="@_kmContent" />
+
+                <LumexNumbox TValue="decimal?"
+                             Label="Price"
+                             Placeholder="0.00"
+                             LabelPlacement="@LabelPlacement.Outside"
+                             StartContent="@_euroSymbolIcon"
+                             EndContent="@_currenciesContent" />
+            </div>
+            <small class="text-default-500 mt-1">Both</small>
+        </div>
+    </div>
+</div>
+
+@code {
+    private RenderFragment _thermometerIcon =
+    @<LumexIcon Icon="@Icons.Rounded.Thermometer"
+                Size="@new("20")"
+                Class="text-default-400 shrink-0">
+    </LumexIcon>;
+
+    private RenderFragment _distanceIcon =
+    @<LumexIcon Icon="@Icons.Rounded.Distance"
+                Size="@new("20")"
+                Class="text-default-400 shrink-0">
+    </LumexIcon>;
+
+    private RenderFragment _euroSymbolIcon =
+    @<LumexIcon Icon="@Icons.Rounded.EuroSymbol"
+                Size="@new("16")"
+                Class="text-default-400 shrink-0">
+    </LumexIcon>;
+
+    private RenderFragment _tempCelsiusContent =
+    @<div class="pointer-events-none flex items-center">
+        <span class="text-default-400 text-small">°C</span>
+    </div>;
+
+    private RenderFragment _kmContent =
+    @<div class="pointer-events-none flex items-center">
+        <span class="text-default-400 text-small">km</span>
+    </div>;
+
+    private RenderFragment _currenciesContent =
+    @<div class="flex items-center">
+        <label class="sr-only" for="currency">Currency</label>
+        <select class="outline-none border-0 bg-transparent text-default-400 text-small"
+                id="currency"
+                name="currency"
+                @onclick:stopPropagation="@true">
+            <option>USD</option>
+            <option>ARS</option>
+            <option>EUR</option>
+        </select>
+    </div>;
+}
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/Step.razor b/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Examples/Step.razor
@@ -0,0 +1,5 @@
+<LumexNumbox TValue="double?"
+             Label="Temperature °C"
+             Placeholder="Enter the temperature"
+             Class="max-w-xs"
+             step="0.5" />