diff --git a/Gemfile.lock b/Gemfile.lock index fb727b7..8330e3f 100644 --- a/Gemfile.lock +++ b/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) diff --git a/README.md b/README.md index 65bd4cf..ff393ef 100644 --- a/README.md +++ b/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 diff --git a/app/controllers/docs_controller.rb b/app/controllers/docs_controller.rb index 6348b60..a66dfca 100644 --- a/app/controllers/docs_controller.rb +++ b/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 diff --git a/app/views/components/shared/menu.rb b/app/views/components/shared/menu.rb index 62c8643..d3b8206 100644 --- a/app/views/components/shared/menu.rb +++ b/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} diff --git a/app/views/docs/textarea_view.rb b/app/views/docs/textarea_view.rb new file mode 100644 index 0000000..e20bc87 --- /dev/null +++ b/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 diff --git a/config/routes.rb b/config/routes.rb index eed62a4..2a06953 100644 --- a/config/routes.rb +++ b/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 diff --git a/test/components/previews/rbui/textarea_preview.rb b/test/components/previews/rbui/textarea_preview.rb new file mode 100644 index 0000000..fb72eb9 --- /dev/null +++ b/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