diff --git a/app/components/component_setup/cli_steps.rb b/app/components/component_setup/cli_steps.rb new file mode 100644 index 00000000..36a15360 --- /dev/null +++ b/app/components/component_setup/cli_steps.rb @@ -0,0 +1,53 @@ +module Components + module ComponentSetup + class CLISteps < Components::Base + def initialize(component_name:) + @component_name = component_name + end + + private + + attr_reader :component_name + + def view_template + div(class: "max-w-2xl mx-auto w-full py-10 space-y-6") do + Heading(level: 4, class: "pb-4 border-b") { "Using RubyUI CLI" } + Text do + "We provide a Ruby gem with useful generators to help you to setup RubyUI components in your apps." + end + + render Steps::Builder.new do |steps| + steps.add_step do + render Steps::Container do + Text(size: "4", weight: "semibold") do + plain "Add RubyUI gem to your Gemfile if you don't have it yet" + end + + code = <<~CODE + bundle add ruby_ui --group development --require false + CODE + div(class: "w-full") do + Codeblock(code, syntax: :javascript) + end + end + end + steps.add_step do + render Steps::Container do + Text(size: "4", weight: "semibold") do + "Run the install command" + end + + code = <<~CODE + rails g ruby_ui:component #{component_name.camelcase} + CODE + div(class: "w-full") do + Codeblock(code, syntax: :javascript) + end + end + end + end + end + end + end + end +end diff --git a/app/components/component_setup/tabs.rb b/app/components/component_setup/tabs.rb new file mode 100644 index 00000000..f5d20dfa --- /dev/null +++ b/app/components/component_setup/tabs.rb @@ -0,0 +1,32 @@ +module Components + module ComponentSetup + class Tabs < Components::Base + def initialize(component_name:) + @component_name = component_name + end + + private + + attr_reader :component_name + + def view_template + Heading(level: 2) { "Installation" } + + Tabs(default_value: "cli", class: "w-full") do + TabsList do + TabsTrigger(value: "cli") { "CLI" } + TabsTrigger(value: "manual") { "Manual" } + end + + TabsContent(value: "cli") do + render CLISteps.new(component_name:) + end + + TabsContent(value: "manual") do + Text { "Coming soon" } + end + end + end + end + end +end diff --git a/app/views/components/shared/menu.rb b/app/views/components/shared/menu.rb index cf1cb976..8834421e 100644 --- a/app/views/components/shared/menu.rb +++ b/app/views/components/shared/menu.rb @@ -68,8 +68,8 @@ def components {name: "Avatar", path: helpers.docs_avatar_path}, {name: "Badge", path: helpers.docs_badge_path}, {name: "Button", path: helpers.docs_button_path}, - {name: "Card", path: helpers.docs_card_path}, {name: "Calendar", path: helpers.docs_calendar_path}, + {name: "Card", path: helpers.docs_card_path}, # { name: "Chart", path: helpers.docs_chart_path, badge: "New" }, {name: "Checkbox", path: helpers.docs_checkbox_path}, {name: "Checkbox Group", path: helpers.docs_checkbox_group_path}, @@ -83,8 +83,8 @@ def components {name: "Dialog / Modal", path: helpers.docs_dialog_path}, {name: "Dropdown Menu", path: helpers.docs_dropdown_menu_path}, {name: "Form", path: helpers.docs_form_path}, - {name: "Input", path: helpers.docs_input_path}, {name: "Hover Card", path: helpers.docs_hover_card_path}, + {name: "Input", path: helpers.docs_input_path}, {name: "Link", path: helpers.docs_link_path}, {name: "Masked Input", path: helpers.masked_input_path}, {name: "Pagination", path: helpers.docs_pagination_path, badge: "New"}, diff --git a/app/views/components/steps/container.rb b/app/views/components/steps/container.rb new file mode 100644 index 00000000..a4742307 --- /dev/null +++ b/app/views/components/steps/container.rb @@ -0,0 +1,9 @@ +# frozen_string_literal: true + +module Steps + class Container < ApplicationComponent + def view_template(&) + div(class: "space-y-4", &) + end + end +end diff --git a/app/views/docs/accordion_view.rb b/app/views/docs/accordion_view.rb index 8250aad2..55165878 100644 --- a/app/views/docs/accordion_view.rb +++ b/app/views/docs/accordion_view.rb @@ -45,6 +45,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/alert_dialog_view.rb b/app/views/docs/alert_dialog_view.rb index 4a47b14a..99cd6f36 100644 --- a/app/views/docs/alert_dialog_view.rb +++ b/app/views/docs/alert_dialog_view.rb @@ -27,6 +27,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/alert_view.rb b/app/views/docs/alert_view.rb index 8ac39af8..de05f443 100644 --- a/app/views/docs/alert_view.rb +++ b/app/views/docs/alert_view.rb @@ -57,6 +57,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/aspect_ratio_view.rb b/app/views/docs/aspect_ratio_view.rb index 17bcf419..acb0083b 100644 --- a/app/views/docs/aspect_ratio_view.rb +++ b/app/views/docs/aspect_ratio_view.rb @@ -60,6 +60,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/avatar_view.rb b/app/views/docs/avatar_view.rb index f0151abc..4189a18d 100644 --- a/app/views/docs/avatar_view.rb +++ b/app/views/docs/avatar_view.rb @@ -84,6 +84,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/badge_view.rb b/app/views/docs/badge_view.rb index e6566c78..ef3abae2 100644 --- a/app/views/docs/badge_view.rb +++ b/app/views/docs/badge_view.rb @@ -2,6 +2,8 @@ class Docs::BadgeView < ApplicationView def view_template + component = "Badge" + div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do render Docs::Header.new(title: "Badge", description: "Displays a badge or a component that looks like a badge.") @@ -69,8 +71,10 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + # components - render Docs::ComponentsTable.new(component_files("Badge")) + render Docs::ComponentsTable.new(component_files(component)) end end end diff --git a/app/views/docs/button_view.rb b/app/views/docs/button_view.rb index 22771e4b..1cc22171 100644 --- a/app/views/docs/button_view.rb +++ b/app/views/docs/button_view.rb @@ -2,6 +2,8 @@ class Docs::ButtonView < ApplicationView def view_template + component = "Button" + div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do render Docs::Header.new(title: "Button", description: "Displays a button or a component that looks like a button.") @@ -121,7 +123,9 @@ def view_template RUBY end - render Docs::ComponentsTable.new(component_files("Button")) + render Components::ComponentSetup::Tabs.new(component_name: component) + + render Docs::ComponentsTable.new(component_files(component)) end end end diff --git a/app/views/docs/calendar_view.rb b/app/views/docs/calendar_view.rb index 59d16761..65afd006 100644 --- a/app/views/docs/calendar_view.rb +++ b/app/views/docs/calendar_view.rb @@ -26,6 +26,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/card_view.rb b/app/views/docs/card_view.rb index f7292eb6..2b1d85f3 100644 --- a/app/views/docs/card_view.rb +++ b/app/views/docs/card_view.rb @@ -74,6 +74,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/chart_view.rb b/app/views/docs/chart_view.rb index ef24af28..9ba2077f 100644 --- a/app/views/docs/chart_view.rb +++ b/app/views/docs/chart_view.rb @@ -98,6 +98,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: "Chart") + render Docs::ComponentsTable.new(components) end end diff --git a/app/views/docs/checkbox_group_view.rb b/app/views/docs/checkbox_group_view.rb index 89858288..85f504be 100644 --- a/app/views/docs/checkbox_group_view.rb +++ b/app/views/docs/checkbox_group_view.rb @@ -71,6 +71,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/checkbox_view.rb b/app/views/docs/checkbox_view.rb index 96ccea57..412de5f1 100644 --- a/app/views/docs/checkbox_view.rb +++ b/app/views/docs/checkbox_view.rb @@ -33,6 +33,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/clipboard_view.rb b/app/views/docs/clipboard_view.rb index fc4a3f61..4d711c21 100644 --- a/app/views/docs/clipboard_view.rb +++ b/app/views/docs/clipboard_view.rb @@ -22,6 +22,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/codeblock_view.rb b/app/views/docs/codeblock_view.rb index 546c5f54..38b3c825 100644 --- a/app/views/docs/codeblock_view.rb +++ b/app/views/docs/codeblock_view.rb @@ -47,6 +47,8 @@ def hello_world RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/collapsible_view.rb b/app/views/docs/collapsible_view.rb index a94ac86a..c53565d6 100644 --- a/app/views/docs/collapsible_view.rb +++ b/app/views/docs/collapsible_view.rb @@ -70,6 +70,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/combobox_view.rb b/app/views/docs/combobox_view.rb index bf26cbab..162052ec 100644 --- a/app/views/docs/combobox_view.rb +++ b/app/views/docs/combobox_view.rb @@ -53,6 +53,9 @@ def view_template end RUBY end + + render Components::ComponentSetup::Tabs.new(component_name: "Combobox") + render Docs::ComponentsTable.new(component_files("Combobox")) end end diff --git a/app/views/docs/command_view.rb b/app/views/docs/command_view.rb index 6df16cad..dac3facd 100644 --- a/app/views/docs/command_view.rb +++ b/app/views/docs/command_view.rb @@ -93,6 +93,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/context_menu_view.rb b/app/views/docs/context_menu_view.rb index 88f06e10..7546a65c 100644 --- a/app/views/docs/context_menu_view.rb +++ b/app/views/docs/context_menu_view.rb @@ -77,6 +77,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/date_picker_view.rb b/app/views/docs/date_picker_view.rb index ee858685..28a84499 100644 --- a/app/views/docs/date_picker_view.rb +++ b/app/views/docs/date_picker_view.rb @@ -27,6 +27,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/dialog_view.rb b/app/views/docs/dialog_view.rb index 54976dff..7292872e 100644 --- a/app/views/docs/dialog_view.rb +++ b/app/views/docs/dialog_view.rb @@ -97,6 +97,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/dropdown_menu_view.rb b/app/views/docs/dropdown_menu_view.rb index 4e2a0d1b..01de6dff 100644 --- a/app/views/docs/dropdown_menu_view.rb +++ b/app/views/docs/dropdown_menu_view.rb @@ -222,6 +222,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/form_view.rb b/app/views/docs/form_view.rb index fefaf29d..8f4c991d 100644 --- a/app/views/docs/form_view.rb +++ b/app/views/docs/form_view.rb @@ -140,6 +140,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/hover_card_view.rb b/app/views/docs/hover_card_view.rb index 5f1bab67..82ed987c 100644 --- a/app/views/docs/hover_card_view.rb +++ b/app/views/docs/hover_card_view.rb @@ -52,6 +52,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/input_view.rb b/app/views/docs/input_view.rb index 0ce2027a..22bd624a 100644 --- a/app/views/docs/input_view.rb +++ b/app/views/docs/input_view.rb @@ -52,6 +52,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/link_view.rb b/app/views/docs/link_view.rb index 8189f3e0..d1ff35d9 100644 --- a/app/views/docs/link_view.rb +++ b/app/views/docs/link_view.rb @@ -56,6 +56,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/masked_input_view.rb b/app/views/docs/masked_input_view.rb index 82619a2e..ab1a7167 100644 --- a/app/views/docs/masked_input_view.rb +++ b/app/views/docs/masked_input_view.rb @@ -39,6 +39,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/pagination_view.rb b/app/views/docs/pagination_view.rb index f8c3c7cd..a28c1353 100644 --- a/app/views/docs/pagination_view.rb +++ b/app/views/docs/pagination_view.rb @@ -43,6 +43,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/popover_view.rb b/app/views/docs/popover_view.rb index d8ed08e9..05aac92a 100644 --- a/app/views/docs/popover_view.rb +++ b/app/views/docs/popover_view.rb @@ -963,6 +963,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/select_view.rb b/app/views/docs/select_view.rb index e6d9792f..acf7af4a 100644 --- a/app/views/docs/select_view.rb +++ b/app/views/docs/select_view.rb @@ -31,6 +31,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/sheet_view.rb b/app/views/docs/sheet_view.rb index 269f7078..96a6b91e 100644 --- a/app/views/docs/sheet_view.rb +++ b/app/views/docs/sheet_view.rb @@ -68,6 +68,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/shortcut_key_view.rb b/app/views/docs/shortcut_key_view.rb index 7841d40e..85bec7c8 100644 --- a/app/views/docs/shortcut_key_view.rb +++ b/app/views/docs/shortcut_key_view.rb @@ -21,6 +21,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/table_view.rb b/app/views/docs/table_view.rb index 05de731c..1efb5465 100644 --- a/app/views/docs/table_view.rb +++ b/app/views/docs/table_view.rb @@ -44,6 +44,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/tabs_view.rb b/app/views/docs/tabs_view.rb index 24d0e565..a62b083a 100644 --- a/app/views/docs/tabs_view.rb +++ b/app/views/docs/tabs_view.rb @@ -107,6 +107,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/textarea_view.rb b/app/views/docs/textarea_view.rb index 969e1090..5572fce0 100644 --- a/app/views/docs/textarea_view.rb +++ b/app/views/docs/textarea_view.rb @@ -39,6 +39,8 @@ def view_template end end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/theme_toggle_view.rb b/app/views/docs/theme_toggle_view.rb index 75d9e754..605a356b 100644 --- a/app/views/docs/theme_toggle_view.rb +++ b/app/views/docs/theme_toggle_view.rb @@ -63,6 +63,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/tooltip_view.rb b/app/views/docs/tooltip_view.rb index 2e8786be..4e27eb13 100644 --- a/app/views/docs/tooltip_view.rb +++ b/app/views/docs/tooltip_view.rb @@ -24,6 +24,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/app/views/docs/typography_view.rb b/app/views/docs/typography_view.rb index f6f111eb..135de517 100644 --- a/app/views/docs/typography_view.rb +++ b/app/views/docs/typography_view.rb @@ -99,6 +99,8 @@ def view_template RUBY end + render Components::ComponentSetup::Tabs.new(component_name: component) + render Docs::ComponentsTable.new(component_files(component)) end end diff --git a/config/initializers/inflections.rb b/config/initializers/inflections.rb index 3860f659..ddf7cf8e 100644 --- a/config/initializers/inflections.rb +++ b/config/initializers/inflections.rb @@ -11,6 +11,6 @@ # end # These inflection rules are supported but not enabled by default: -# ActiveSupport::Inflector.inflections(:en) do |inflect| -# inflect.acronym "RESTful" -# end +ActiveSupport::Inflector.inflections(:en) do |inflect| + inflect.acronym "CLI" +end