Merge pull request #118 from pierry01/jean/add-textarea

ADD TEXTAREA

Gemfile.lock

@@ -1,6 +1,6 @@
 GIT
   remote: https://github.com/rbui-labs/rbui.git
-  revision: abb3ec1e5971413d4930ce4a56f688b7acb66a5e
+  revision: 9428238764f51f5039dffcfa76ba4e90ab77f74b
   branch: main
   specs:
     rbui (1.0.0.pre.alpha.3)

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,44 @@
+# frozen_string_literal: true
+
+class Docs::TextareaView < ApplicationView
+  def view_template
+    component = "Textarea"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Textarea", description: "Displays a 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
+    end
+
+    render Docs::ComponentsTable.new(component_references(component, Docs::VisualCodeExample.collected_code), component_files(component))
+  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,32 @@
+# frozen_string_literal: true
+
+module RBUI
+  class TextareaPreview < Lookbook::Preview
+    # Default
+    # ---------------
+    def default
+      render(TestView.new) do
+        Textarea(placeholder: "Textarea")
+      end
+    end
+
+    # Disabled
+    def disabled
+      render(TestView.new) do
+        Textarea(disabled: true, placeholder: "Disabled")
+      end
+    end
+
+    # FormField
+    def with_error
+      render(TestView.new) do
+        FormField do
+          FormFieldLabel(for: "textarea") { "Textarea" }
+          FormFieldHint { "This is a textarea" }
+          Textarea(placeholder: "Textarea", id: "textarea")
+          FormFieldError { "This is an error message" }
+        end
+      end
+    end
+  end
+end