ADD TEXTAREA

Author: pierry01

Gemfile.lock

@@ -1,8 +1,8 @@
 GIT
   remote: https://github.com/rbui-labs/rbui.git
-  revision: 19a1b5df2db0e000a21b9b2c5a573179c07506be
+  revision: abb3ec1e5971413d4930ce4a56f688b7acb66a5e
   specs:
-    rbui (0.2.0)
+    rbui (1.0.0.pre.alpha.3)
       phlex (~> 1.10)
       rouge (~> 4.2.0)
       tailwind_merge (>= 0.12)

README.md

@@ -43,7 +43,7 @@ Here is the list of components that are being built. For reference, see here htt
 ⚪️ Switch
 ⚪️ Table
 ✅ Tabs
-⚪️ Textarea
+✅ Textarea
 ⚪️ Toast
 ⚪️ Toggle
 ✅ Tooltip

app/controllers/docs_controller.rb

@@ -158,6 +158,10 @@ def tabs
     render Docs::TabsView.new
   end
 
+  def textarea
+    render Docs::TextareaView.new
+  end
+
   def theme_toggle
     render Docs::ThemeToggleView.new
   end

app/views/components/shared/menu.rb

@@ -92,6 +92,7 @@ def components
       {name: "Shortcut Key", path: helpers.docs_shortcut_key_path},
       {name: "Table", path: helpers.docs_table_path},
       {name: "Tabs", path: helpers.docs_tabs_path},
+      {name: "Textarea", path: helpers.docs_textarea_path},
       {name: "Theme Toggle", path: helpers.docs_theme_toggle_path},
       {name: "Tooltip", path: helpers.docs_tooltip_path},
       {name: "Typography", path: helpers.docs_typography_path}

app/views/docs/textarea_view.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+class Docs::TextareaView < ApplicationView
+  def view_template
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Textarea", description: "Displays a form textarea field or a component that looks like an textarea field.")
+
+      TypographyH2 { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Textarea", context: self) do
+        <<~RUBY
+          div(class: "grid w-full max-w-sm items-center gap-1.5") do
+            Textarea(placeholder: "Textarea")
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
+        <<~RUBY
+          div(class: "grid w-full max-w-sm items-center gap-1.5") do
+            Textarea(disabled: true, placeholder: "Disabled")
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "With FormField", context: self) do
+        <<~RUBY
+          div(class: "grid w-full max-w-sm items-center gap-1.5") do
+            FormField do
+              FormFieldLabel(for: "textarea") { "Textarea" }
+              FormFieldHint { "This is a textarea" }
+              Textarea(placeholder: "Textarea", id: "textarea")
+              FormFieldError()
+            end
+          end
+        RUBY
+      end
+
+      render Docs::ComponentsTable.new(components)
+    end
+  end
+
+  private
+
+  def components
+    [
+      Docs::ComponentStruct.new(name: "InputController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/input_controller.js", built_using: :stimulus),
+      Docs::ComponentStruct.new(name: "Textarea", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/input.rb", built_using: :phlex)
+    ]
+  end
+end

config/routes.rb

@@ -47,6 +47,7 @@
     get "shortcut_key", to: "docs#shortcut_key", as: :docs_shortcut_key
     get "table", to: "docs#table", as: :docs_table
     get "tabs", to: "docs#tabs", as: :docs_tabs
+    get "textarea", to: "docs#textarea", as: :docs_textarea
     get "theme_toggle", to: "docs#theme_toggle", as: :docs_theme_toggle
     get "tooltip", to: "docs#tooltip", as: :docs_tooltip
     get "typography", to: "docs#typography", as: :docs_typography

test/components/previews/rbui/textarea_preview.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module RBUI
+  class TextareaPreview < Lookbook::Preview
+    # Email Textarea
+    # ---------------
+    def email
+      render(TestView.new) do
+        Textarea(type: "email", placeholder: "Email", class: "max-w-sm")
+      end
+    end
+
+    # Disabled Textarea
+    def disabled
+      render(TestView.new) do
+        Textarea(disabled: true, type: "email", placeholder: "Email", class: "max-w-sm")
+      end
+    end
+
+    # with error
+    def with_error
+      render(TestView.new) do
+        Textarea(
+          type: "email",
+          placeholder: "Email",
+          id: "email1",
+          value: "joel@mail",
+          error: "Invalid email address"
+        )
+      end
+    end
+  end
+end