From 22fafcc857f7face600ab8f0d0fb6dd7e3ff6b8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Pierry=20de=20Souza=20Mendon=C3=A7a?= Date: Mon, 23 Sep 2024 20:15:12 -0300 Subject: [PATCH 1/8] ADD TEXTAREA --- Gemfile.lock | 4 +- README.md | 2 +- app/controllers/docs_controller.rb | 4 ++ app/views/components/shared/menu.rb | 1 + app/views/docs/textarea_view.rb | 51 +++++++++++++++++++ config/routes.rb | 1 + .../previews/rbui/textarea_preview.rb | 33 ++++++++++++ 7 files changed, 93 insertions(+), 3 deletions(-) create mode 100644 app/views/docs/textarea_view.rb create mode 100644 test/components/previews/rbui/textarea_preview.rb diff --git a/Gemfile.lock b/Gemfile.lock index 0d570a9..439e3a6 100644 --- a/Gemfile.lock +++ b/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) 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..093b278 --- /dev/null +++ b/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 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..2eaa6b9 --- /dev/null +++ b/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 From bdcacb7fa5bb18e0d8a8c5bf5b610776e5753d76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Pierry=20de=20Souza=20Mendon=C3=A7a?= Date: Mon, 23 Sep 2024 20:18:06 -0300 Subject: [PATCH 2/8] 1st OK --- app/views/docs/textarea_view.rb | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/app/views/docs/textarea_view.rb b/app/views/docs/textarea_view.rb index 093b278..fef54c1 100644 --- a/app/views/docs/textarea_view.rb +++ b/app/views/docs/textarea_view.rb @@ -3,7 +3,7 @@ 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.") + render Docs::Header.new(title: "Textarea", description: "Displays a textarea field.") TypographyH2 { "Usage" } @@ -44,8 +44,7 @@ def view_template 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) + Docs::ComponentStruct.new(name: "Textarea", source: "https://github.com/rbui-labs/rbui/blob/main/lib/rbui/textarea/textarea.rb", built_using: :phlex) ] end end From 0222e47b99ded525349d62817d4e88ce5d4d261e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Pierry=20de=20Souza=20Mendon=C3=A7a?= Date: Mon, 23 Sep 2024 20:18:37 -0300 Subject: [PATCH 3/8] gcm .lock --- Gemfile.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index 439e3a6..0d570a9 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,8 +1,8 @@ GIT remote: https://github.com/rbui-labs/rbui.git - revision: abb3ec1e5971413d4930ce4a56f688b7acb66a5e + revision: 19a1b5df2db0e000a21b9b2c5a573179c07506be specs: - rbui (1.0.0.pre.alpha.3) + rbui (0.2.0) phlex (~> 1.10) rouge (~> 4.2.0) tailwind_merge (>= 0.12) From cf7aa403f5e63b390dfc8873b93e56adfb7aca02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Pierry=20de=20Souza=20Mendon=C3=A7a?= Date: Mon, 23 Sep 2024 20:20:46 -0300 Subject: [PATCH 4/8] 1st OK --- .../previews/rbui/textarea_preview.rb | 25 +++++++++---------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/test/components/previews/rbui/textarea_preview.rb b/test/components/previews/rbui/textarea_preview.rb index 2eaa6b9..8e1aba5 100644 --- a/test/components/previews/rbui/textarea_preview.rb +++ b/test/components/previews/rbui/textarea_preview.rb @@ -2,31 +2,30 @@ module RBUI class TextareaPreview < Lookbook::Preview - # Email Textarea + # Default # --------------- - def email + def default render(TestView.new) do - Textarea(type: "email", placeholder: "Email", class: "max-w-sm") + Textarea(placeholder: "Textarea") end end - # Disabled Textarea + # Disabled def disabled render(TestView.new) do - Textarea(disabled: true, type: "email", placeholder: "Email", class: "max-w-sm") + Textarea(disabled: true, placeholder: "Disabled") end end - # with error + # FormField def with_error render(TestView.new) do - Textarea( - type: "email", - placeholder: "Email", - id: "email1", - value: "joel@mail", - error: "Invalid email address" - ) + 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 From 96771dcc5fbfa8b31b057e095e564a65352474e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Pierry=20de=20Souza=20Mendon=C3=A7a?= Date: Mon, 23 Sep 2024 20:24:44 -0300 Subject: [PATCH 5/8] standardrb --- test/components/previews/rbui/textarea_preview.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/components/previews/rbui/textarea_preview.rb b/test/components/previews/rbui/textarea_preview.rb index 8e1aba5..fb72eb9 100644 --- a/test/components/previews/rbui/textarea_preview.rb +++ b/test/components/previews/rbui/textarea_preview.rb @@ -21,7 +21,7 @@ def disabled def with_error render(TestView.new) do FormField do - FormFieldLabel(for: "textarea") { "Textarea"} + FormFieldLabel(for: "textarea") { "Textarea" } FormFieldHint { "This is a textarea" } Textarea(placeholder: "Textarea", id: "textarea") FormFieldError { "This is an error message" } From e42c965700f744d71a38cc63d85af11c18e0a078 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Pierry=20de=20Souza=20Mendon=C3=A7a?= Date: Wed, 25 Sep 2024 09:17:20 -0300 Subject: [PATCH 6/8] ATT RBUI --- Gemfile.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index 0d570a9..5a2672e 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,8 +1,8 @@ GIT remote: https://github.com/rbui-labs/rbui.git - revision: 19a1b5df2db0e000a21b9b2c5a573179c07506be + revision: 9428238764f51f5039dffcfa76ba4e90ab77f74b specs: - rbui (0.2.0) + rbui (1.0.0.pre.alpha.3) phlex (~> 1.10) rouge (~> 4.2.0) tailwind_merge (>= 0.12) From 5bda043e679b1e9b1bda6f56fbbf397fca2cd2eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Pierry=20de=20Souza=20Mendon=C3=A7a?= Date: Wed, 25 Sep 2024 09:21:53 -0300 Subject: [PATCH 7/8] FIX SOURCE --- app/views/docs/textarea_view.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/docs/textarea_view.rb b/app/views/docs/textarea_view.rb index fef54c1..7b46fb4 100644 --- a/app/views/docs/textarea_view.rb +++ b/app/views/docs/textarea_view.rb @@ -44,7 +44,7 @@ def view_template def components [ - Docs::ComponentStruct.new(name: "Textarea", source: "https://github.com/rbui-labs/rbui/blob/main/lib/rbui/textarea/textarea.rb", built_using: :phlex) + Docs::ComponentStruct.new(name: "Textarea", source: "lib/rbui/textarea/textarea.rb", built_using: :phlex) ] end end From 73e697e777fdfc133f792666d14f9bb8fbd53020 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Pierry=20de=20Souza=20Mendon=C3=A7a?= Date: Tue, 1 Oct 2024 17:32:12 -0300 Subject: [PATCH 8/8] Docs::ComponentsTable --- app/views/docs/textarea_view.rb | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/app/views/docs/textarea_view.rb b/app/views/docs/textarea_view.rb index 7b46fb4..e20bc87 100644 --- a/app/views/docs/textarea_view.rb +++ b/app/views/docs/textarea_view.rb @@ -2,6 +2,8 @@ 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.") @@ -35,16 +37,8 @@ def view_template end RUBY end - - render Docs::ComponentsTable.new(components) end - end - - private - def components - [ - Docs::ComponentStruct.new(name: "Textarea", source: "lib/rbui/textarea/textarea.rb", built_using: :phlex) - ] + render Docs::ComponentsTable.new(component_references(component, Docs::VisualCodeExample.collected_code), component_files(component)) end end