feat(components): Add basic textarea component

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

@@ -39,6 +39,7 @@ public class NavigationStore
             .Add( new( nameof( LumexRadioGroup<T>), ComponentStatus.New ) )
             .Add( new( nameof( LumexSelect<T> ), ComponentStatus.New ) )
             .Add( new( nameof( LumexSwitch ) ) )
+            .Add( new( nameof( LumexTextarea ), ComponentStatus.New ) )
             .Add( new( nameof( LumexTextbox ) ) );
 
     private static NavigationCategory ComponentsApiCategory =>
@@ -78,6 +79,7 @@ public class NavigationStore
             .Add( new( nameof( LumexSelect<T> ) ) )
             .Add( new( nameof( LumexSelectItem<T> ) ) )
             .Add( new( nameof( LumexSwitch ) ) )
+            .Add( new( nameof( LumexTextarea ) ) )
             .Add( new( nameof( LumexTextbox ) ) )
             .Add( new( nameof( LumexThemeProvider ) ) );
 

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

@@ -28,4 +28,8 @@
 		<EmbeddedResource Include="Samples/**/*.html" />
 	</ItemGroup>
 
+	<ItemGroup>
+	  <Folder Include="Pages\Components\Textarea\Code\" />
+	</ItemGroup>
+
 </Project>

docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Controlled.razor

@@ -0,0 +1,19 @@
+<div class="w-full flex flex-col flex-wrap gap-4 md:flex-nowrap">
+	<LumexTextarea Placeholder="Enter your email" ValueChanged="@OnValueChanged" />
+	<div class="flex flex-col items-center text-sm">
+		<span>Changed Value:</span>
+		<span>@_newValue</span>
+	</div>
+</div>
+
+@code {
+
+	private string _value = string.Empty;
+	private string _newValue = string.Empty;
+
+	private void OnValueChanged( string value )
+	{
+		_newValue = value;
+		StateHasChanged();
+	}
+}

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

@@ -0,0 +1,4 @@
+<div class="w-full flex flex-wrap gap-4 md:flex-nowrap">
+    <LumexTextarea Disabled />
+    <LumexTextarea Disabled Placeholder="Enter your email" />
+</div>

docs/LumexUI.Docs.Client/Pages/Components/Textarea/Examples/Readonly.razor

@@ -0,0 +1,3 @@
+<div class="w-full flex flex-wrap gap-4 md:flex-nowrap">
+    <LumexTextarea Readonly Value="Lorem ipsum..." />
+</div>

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

@@ -0,0 +1,4 @@
+<div class="w-full flex flex-wrap gap-4 md:flex-nowrap">
+    <LumexTextarea Value="LumexUI Textarea sample text..." />
+    <LumexTextarea Placeholder="Enter your email" />
+</div>

docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Controlled.razor

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

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

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

docs/LumexUI.Docs.Client/Pages/Components/Textarea/PreviewCodes/Readonly.razor

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

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

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

docs/LumexUI.Docs.Client/Pages/Components/Textarea/Textarea.razor

@@ -0,0 +1,63 @@
+@page "/docs/components/textarea"
+@layout DocsContentLayout
+
+@using LumexUI.Docs.Client.Pages.Components.Textarea.PreviewCodes
+
+<DocsSection Title="Usage">
+	<p>The textarea component provides a simple way to input and edit multiline text data.</p>
+	<Usage />
+
+	<DocsSection Title="Disabled">
+		<p>
+			You can disable a textarea to prevent user interaction.
+			A disabled textarea is faded and does not respond to user clicks.
+		</p>
+
+		<Disabled />
+	</DocsSection>
+
+	<DocsSection Title="Readonly">
+		<p>
+			You can make a textareas value read only to prevent Changes.
+		</p>
+
+		<Readonly />
+	</DocsSection>
+
+	<DocsSection Title="Controlled">
+		<p>
+			It is possible to get an event after changing the value. If you set the Intermediate
+			flag, the event will be called on every input. Otherwise the event will be called after
+			leaving the textarea.
+		</p>
+
+		<Controlled />
+	</DocsSection>
+</DocsSection>
+
+@code {
+	[CascadingParameter] private DocsContentLayout Layout { get; set; } = default!;
+
+	private readonly Heading[] _headings =
+	[
+		new("Usage", [
+			new("Disabled"),
+			new("Readonly"),
+			new("Controlled"),
+		]),
+		new("Custom Styles"),
+		new("API")
+	];
+
+	protected override void OnInitialized()
+	{
+		Layout.Initialize(
+			title: "Textarea",
+			category: "Components",
+			description: "Textarea allows users to input multiline text data.",
+			headings: _headings,
+			linksProps: new ComponentLinksProps( "Textarea", isServer: false )
+		);
+	}
+
+}

src/LumexUI/Components/Textarea/LumexTextarea.razor

@@ -0,0 +1,16 @@
+@namespace LumexUI
+@inherits LumexComponentBase
+
+<textarea
+	class="@RootClass"
+	style="@RootStyle"
+	disabled="@Disabled"
+	readonly="@Readonly"
+	placeholder="@Placeholder"
+	required="@Required"
+	data-disabled="@Disabled.ToAttributeValue()"
+	@bind="Value" 
+	@bind:event="@(Behavior == InputBehavior.OnInput ? "oninput" : "onchange")" 
+	@bind:after="OnValueChanged"
+	@attributes="@AdditionalAttributes" >
+</textarea>

src/LumexUI/Components/Textarea/LumexTextarea.razor.cs

@@ -0,0 +1,71 @@
+using LumexUI.Common;
+using LumexUI.Styles;
+
+using Microsoft.AspNetCore.Components;
+
+namespace LumexUI;
+
+public partial class LumexTextarea : LumexComponentBase
+{
+	/// <summary>
+	/// Gets or sets a value indicating whether the textarea is disabled.
+	/// </summary>
+	[Parameter] public bool Disabled { get; set; }
+
+	/// <summary>
+	/// Gets or sets a value indicating whether the textareas value is readonly.
+	/// </summary>
+	[Parameter] public bool Readonly { get; set; }
+
+	/// <summary>
+	/// Gets or sets a value indicating whether the textareas value is required.
+	/// </summary>
+	[Parameter] public bool Required { get; set; }
+
+	/// <summary>
+	/// Gets or sets a value indicating wether the ValueChanged event will be fired on input or change.
+	/// </summary>
+	[Parameter] public InputBehavior Behavior { get; set; } = InputBehavior.OnChange;
+
+	/// <summary>
+	/// Gets or sets a value indicating whether the textarea has full width.
+	/// </summary>
+	[Parameter] public bool FullWidth { get; set; }
+
+	/// <summary>
+	/// Gets or sets the text value.
+	/// </summary>
+	[Parameter] public string? Value { get; set; }
+
+	/// <summary>
+	/// Gets or sets the placeholder to show if the value is empty.
+	/// </summary>
+	[Parameter] public string? Placeholder { get; set; }
+
+	/// <summary>
+	/// Gets or sets Value changed event.
+	/// </summary>
+	[Parameter] public Action<string?>? ValueChanged { get; set; }
+
+	/// <summary>
+	/// Get the merged style of this instance.
+	/// </summary>
+	private protected override string? RootClass =>
+		TwMerge.Merge( Textarea.GetStyles( this ) );
+
+	/// <summary>
+	/// Initializes a new instance of the <see cref="LumexTextarea"/>.
+	/// </summary>
+	public LumexTextarea()
+	{
+		As = "textarea";
+	}
+
+	/// <summary>
+	/// Event wrapper function.
+	/// </summary>
+	private void OnValueChanged()
+	{
+		ValueChanged?.Invoke( Value );
+	}
+}

src/LumexUI/Styles/Textarea.cs

@@ -0,0 +1,51 @@
+// 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.Utilities;
+
+namespace LumexUI.Styles;
+
+internal class Textarea
+{
+	private readonly static string _base = ElementClass.Empty()
+		.Add( "flex" )
+		.Add( "min-h-[60px]" )
+		.Add( "rounded-medium" )
+		.Add( "border" )
+		.Add( "border-input" )
+		.Add( "bg-default-100" ) 
+		.Add( "px-3" )
+		.Add( "py-2" )
+		.Add( "text-sm" )
+		.Add( "shadow-sm" )
+		.Add( "text-default-600" )
+		.Add( "placeholder:text-muted-foreground" ) 
+		.ToString();
+
+	private readonly static string _focus = ElementClass.Empty()
+		.Add( "focus-visible:outline-none" )
+		.Add( "focus-visible:ring-0" )
+		.ToString();
+
+	private readonly static string _disabled = ElementClass.Empty()
+		.Add( "opacity-disabled" )
+		.Add( "opacity-50" )
+		.Add( "cursor-not-allowed" )
+		.Add( "pointer-events-none" )
+		.ToString();
+
+	private readonly static string _fullWidth = ElementClass.Empty()
+		.Add( "w-full" )
+		.ToString();
+
+	public static string GetStyles( LumexTextarea textarea )
+	{
+		return ElementClass.Empty()
+			.Add( _base )
+			.Add( _focus )
+			.Add( _disabled, when: textarea.Disabled )
+			.Add( _fullWidth, when: textarea.FullWidth )
+			.ToString();
+	}
+}

tests/LumexUI.Tests/Components/Textarea/TextareaTests.razor

@@ -0,0 +1,77 @@
+@namespace LumexUI.Tests.Components
+@inherits TestContext
+@using LumexUI.Common
+@using TailwindMerge
+@using Microsoft.Extensions.DependencyInjection
+
+@code {
+    public TextareaTests()
+    {
+        Services.AddSingleton<TwMerge>();
+        var module = JSInterop.SetupModule( "./_content/LumexUI/js/components/input.js" );
+        module.Setup<string>( "input.getValidationMessage", _ => true );
+    }
+
+    [Fact]
+    public void ShouldRenderCorrectly()
+    {
+        var action = () => Render(@<LumexTextarea Placeholder="Test" />);
+
+        action.Should().NotThrow();
+    }
+
+    [Fact]
+    public void ShouldRenderWithPlaceholder()
+    {
+	    var cut = Render(@<LumexTextarea Placeholder="Test" />);
+
+	    var input = cut.Find( "textarea" );
+
+	    input.HasAttribute( "placeholder" ).Should().BeTrue();
+	    input.GetAttribute( "placeholder" ).Should().Be( "Test" );
+    }
+
+    [Fact]
+    public void ShouldRenderWithPlaceholderButShowsValue()
+    {
+	    var cut = Render(@<LumexTextarea Placeholder="Test" Value="Hello World!" />);
+
+	    var input = cut.Find( "textarea" );
+
+	    input.HasAttribute( "placeholder" ).Should().BeTrue();
+	    input.GetAttribute( "placeholder" ).Should().Be( "Test" );
+	    input.HasAttribute( "value" ).Should().BeTrue();
+	    input.GetAttribute( "value" ).Should().Be( "Hello World!" );
+    }
+
+    [Fact]
+    public void ShouldRenderReadonly()
+    {
+	    var cut = Render(@<LumexTextarea Placeholder="Test" Value="Hello World!" Readonly />);
+
+	    var input = cut.Find( "textarea" );
+
+	    input.HasAttribute( "readonly" ).Should().BeTrue();
+    }
+
+    [Fact]
+    public void ShouldRenderDisabled()
+    {
+	    var cut = Render(@<LumexTextarea Placeholder="Test" Value="Hello World!" Disabled />);
+
+	    var input = cut.Find( "textarea" );
+
+	    input.HasAttribute( "disabled" ).Should().BeTrue();
+    }
+
+    [Fact]
+    public void ShouldChangeValueOnInput()
+    {
+	    var cut = Render<LumexTextarea>( @<LumexTextarea Value="Test" Behavior="@InputBehavior.OnInput" />);
+
+	    var input = cut.Find( "textarea" );
+
+	    input.Input( "test 2" );
+	    cut.Instance.Value.Should().Be( "test 2" );
+    }
+}