From 92266c105b3906de614b3854968ef53f7ec19646 Mon Sep 17 00:00:00 2001
From: Karine Vieira <62672837+karinevieira@users.noreply.github.com>
Date: Tue, 17 Sep 2024 09:13:33 -0300
Subject: [PATCH] feat: Cria componente Text Area (#53)

---
 .../forms/text_area/component.html.erb        |  1 +
 .../forms/text_area/component.rb              | 28 +++++++++++++++++++
 .../ink_components/forms/text_area/preview.rb | 17 +++++++++++
 .../forms/text_area_component_spec.rb         | 11 ++++++++
 spec/dummy/tailwind.config.js                 |  1 +
 5 files changed, 58 insertions(+)
 create mode 100644 app/components/ink_components/forms/text_area/component.html.erb
 create mode 100644 app/components/ink_components/forms/text_area/component.rb
 create mode 100644 app/components/ink_components/forms/text_area/preview.rb
 create mode 100644 spec/components/ink_components/forms/text_area_component_spec.rb

diff --git a/app/components/ink_components/forms/text_area/component.html.erb b/app/components/ink_components/forms/text_area/component.html.erb
new file mode 100644
index 00000000..b9c77cc0
--- /dev/null
+++ b/app/components/ink_components/forms/text_area/component.html.erb
@@ -0,0 +1 @@
+<%= tag.textarea(**attributes) { attributes[:value] } %>
diff --git a/app/components/ink_components/forms/text_area/component.rb b/app/components/ink_components/forms/text_area/component.rb
new file mode 100644
index 00000000..af6181a7
--- /dev/null
+++ b/app/components/ink_components/forms/text_area/component.rb
@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module InkComponents
+  module Forms
+    module TextArea
+      class Component < ApplicationComponent
+        style do
+          base {
+            %w[
+              block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300
+              focus:ring-pink-500 focus:border-pink-500 dark:bg-gray-700 dark:border-gray-600
+              dark:placeholder-gray-400 dark:text-white dark:focus:ring-pink-500 dark:focus:border-pink-500
+            ]
+          }
+        end
+
+        def initialize(**extra_attributes)
+          super(**extra_attributes)
+        end
+
+        private
+        def default_attributes
+          { class: style }
+        end
+      end
+    end
+  end
+end
diff --git a/app/components/ink_components/forms/text_area/preview.rb b/app/components/ink_components/forms/text_area/preview.rb
new file mode 100644
index 00000000..bf3b22e8
--- /dev/null
+++ b/app/components/ink_components/forms/text_area/preview.rb
@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module InkComponents
+  module Forms
+    module TextArea
+      class Preview < Lookbook::Preview
+        # @param placeholder text
+        # @param value text
+        # @param rows number
+        # @param cols number
+        def playground(placeholder: "Write your thoughts here...", value: nil, rows: nil, cols: nil)
+          render InkComponents::Forms::TextArea::Component.new(placeholder:, value:, rows:, cols:)
+        end
+      end
+    end
+  end
+end
diff --git a/spec/components/ink_components/forms/text_area_component_spec.rb b/spec/components/ink_components/forms/text_area_component_spec.rb
new file mode 100644
index 00000000..24fb8a78
--- /dev/null
+++ b/spec/components/ink_components/forms/text_area_component_spec.rb
@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+RSpec.describe InkComponents::Forms::TextArea::Component, type: :component do
+  it "renders component" do
+    component = render_inline(described_class.new(placeholder: "Write something"))
+
+    expect(component.to_html).to include("textarea", "placeholder=\"Write something\"")
+  end
+end
diff --git a/spec/dummy/tailwind.config.js b/spec/dummy/tailwind.config.js
index 84b733b2..4f99bc0c 100644
--- a/spec/dummy/tailwind.config.js
+++ b/spec/dummy/tailwind.config.js
@@ -1,6 +1,7 @@
 const inkComponentsConfig = require("./ink_components.tailwind.config.js")
 
 module.exports = {
+  plugins: [require("flowbite/plugin")],
   darkMode: "class",
   content: [
     './app/views/**/*.html.erb',