diff --git a/.gitignore b/.gitignore index ba227880..9652e60e 100644 --- a/.gitignore +++ b/.gitignore @@ -38,5 +38,4 @@ .env* .tool-versions - -config/credentials/production.key +/config/credentials/production.key diff --git a/Gemfile b/Gemfile index 0f756115..bddfae4d 100644 --- a/Gemfile +++ b/Gemfile @@ -73,7 +73,7 @@ group :test do gem "selenium-webdriver" end -gem "phlex-rails" +gem "phlex-rails", "= 2.0.0.beta2" gem "ruby_ui", github: "ruby-ui/ruby_ui", branch: "main" # gem "ruby_ui", path: "../rbui" diff --git a/Gemfile.lock b/Gemfile.lock index de1296a6..20c3c11a 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,10 +1,10 @@ GIT remote: https://github.com/ruby-ui/ruby_ui.git - revision: 33dc56c7565e64080f976594b7a67eb0b7e2412f + revision: 9dc4378689fb7157091584108b7563371eab0cf9 branch: main specs: ruby_ui (1.0.0.pre.alpha.4) - phlex (~> 1.10, < 3) + phlex (>= 1.10, < 3) rouge (~> 4.2.0) tailwind_merge (~> 0.12) @@ -186,11 +186,10 @@ GEM parser (3.3.4.0) ast (~> 2.4.1) racc - phlex (1.11.0) - phlex-rails (1.1.1) - phlex (~> 1.9) + phlex (2.0.0.beta2) + phlex-rails (2.0.0.beta2) + phlex (= 2.0.0.beta2) railties (>= 6.1, < 8) - zeitwerk (~> 2.6) propshaft (0.9.0) actionpack (>= 7.0.0) activesupport (>= 7.0.0) @@ -348,7 +347,7 @@ DEPENDENCIES jsbundling-rails (= 1.3.0) lookbook (= 2.3.2) lucide-rails (= 0.4.0) - phlex-rails + phlex-rails (= 2.0.0.beta2) propshaft (= 0.9.0) pry puma (= 6.4.2) diff --git a/app/components/base.rb b/app/components/base.rb index 04f96683..f52a6cd9 100644 --- a/app/components/base.rb +++ b/app/components/base.rb @@ -1,23 +1,25 @@ +# frozen_string_literal: true + class Components::Base < Phlex::HTML - TAILWIND_MERGER = ::TailwindMerge::Merger.new.freeze unless defined?(TAILWIND_MERGER) + include RBUI + include ApplicationHelper - attr_reader :attrs + # Include any helpers you want to be available across all components + include Phlex::Rails::Helpers::Routes - def initialize(**user_attrs) - @attrs = mix(default_attrs, user_attrs) - @attrs[:class] = TAILWIND_MERGER.merge(@attrs[:class]) if @attrs[:class] - end + GITHUB_REPO_URL = "https://github.com/ruby-ui/ruby_ui/" + GITHUB_FILE_URL = "#{GITHUB_REPO_URL}blob/main/" +end - if defined?(Rails) && Rails.env.development? - def before_template - comment { "Before #{self.class.name}" } - super - end - end +class MethodCallFinder < Prism::Visitor + attr_reader :calls - private + def initialize(calls) + @calls = calls + end - def default_attrs - {} + def visit_call_node(node) + super + calls << node.name end end diff --git a/app/views/components/docs/components_table.rb b/app/components/docs/components_table.rb similarity index 98% rename from app/views/components/docs/components_table.rb rename to app/components/docs/components_table.rb index e9009d78..d3639c05 100644 --- a/app/views/components/docs/components_table.rb +++ b/app/components/docs/components_table.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -class Docs::ComponentsTable < ApplicationComponent +class Components::Docs::ComponentsTable < Components::Base def initialize(components, file_components = nil) @components = components.sort_by { |component| [component.built_using, component.name] } @file_components = file_components.sort_by { |component| [component.built_using, component.name] } if file_components diff --git a/app/views/components/docs/header.rb b/app/components/docs/header.rb similarity index 93% rename from app/views/components/docs/header.rb rename to app/components/docs/header.rb index 4348fa9d..85d58ed6 100644 --- a/app/views/components/docs/header.rb +++ b/app/components/docs/header.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -class Docs::Header < ApplicationComponent +class Components::Docs::Header < Components::Base def initialize(title: nil, description: nil) @title = title @description = description diff --git a/app/views/components/docs/tailwind_config.rb b/app/components/docs/tailwind_config.rb similarity index 98% rename from app/views/components/docs/tailwind_config.rb rename to app/components/docs/tailwind_config.rb index c98ee979..92dda65b 100644 --- a/app/views/components/docs/tailwind_config.rb +++ b/app/components/docs/tailwind_config.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -class Docs::TailwindConfig < ApplicationComponent +class Components::Docs::TailwindConfig < Components::Base def view_template Text(size: "4", weight: "semibold") { "Update Tailwind Configuration" } Text do diff --git a/app/views/components/docs/tailwind_css.rb b/app/components/docs/tailwind_css.rb similarity index 97% rename from app/views/components/docs/tailwind_css.rb rename to app/components/docs/tailwind_css.rb index 4a21120f..396d768c 100644 --- a/app/views/components/docs/tailwind_css.rb +++ b/app/components/docs/tailwind_css.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -class Docs::TailwindCss < ApplicationComponent +class Components::Docs::TailwindCss < Components::Base def view_template Text(size: "4", weight: "semibold") { "Add CSS variables" } Text do diff --git a/app/views/components/docs/visual_code_example.rb b/app/components/docs/visual_code_example.rb similarity index 97% rename from app/views/components/docs/visual_code_example.rb rename to app/components/docs/visual_code_example.rb index f53e8e6e..19772d20 100644 --- a/app/views/components/docs/visual_code_example.rb +++ b/app/components/docs/visual_code_example.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -class Docs::VisualCodeExample < ApplicationComponent +class Components::Docs::VisualCodeExample < Components::Base @@collected_code = [] def self.collected_code @@ -72,7 +72,7 @@ def render_preview_tab(&block) div(class: "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border") do div(class: "preview flex min-h-[350px] w-full justify-center p-10 items-center") do decoded_code = CGI.unescapeHTML(@display_code) - @context.instance_eval(decoded_code) + instance_eval(decoded_code) end end end diff --git a/app/components/heading.rb b/app/components/heading.rb index f4343175..83649e51 100644 --- a/app/components/heading.rb +++ b/app/components/heading.rb @@ -1,7 +1,7 @@ # frozen_string_literal: true module Components - class Heading < Base + class Heading < RBUI::Base def initialize(level: nil, as: nil, size: nil, **attrs) @level = level @as = as diff --git a/app/views/home_view/banner.rb b/app/components/home/banner.rb similarity index 69% rename from app/views/home_view/banner.rb rename to app/components/home/banner.rb index 8f0cdde4..909d8eed 100644 --- a/app/views/home_view/banner.rb +++ b/app/components/home/banner.rb @@ -1,12 +1,12 @@ # frozen_string_literal: true -class HomeView::Banner < ApplicationComponent +class Components::Home::Banner < Components::Base include Phlex::DeferredRender def view_template(&block) div(class: "relative overflow-hidden") do - render Shared::GridPattern.new(spacing: :md) - render HomeView::Shapes.new(size: :xl, color: :pink, class: "hidden sm:block absolute right-0 top-1/2 transform -translate-y-1/2 sm:translate-x-2/3 md:translate-x-1/2") + render Components::Shared::GridPattern.new(spacing: :md) + render Components::Home::Shapes.new(size: :xl, color: :pink, class: "hidden sm:block absolute right-0 top-1/2 transform -translate-y-1/2 sm:translate-x-2/3 md:translate-x-1/2") div(class: "relative container mx-auto max-w-3xl py-24 lg:py-32 px-4 sm:text-center flex flex-col sm:items-center gap-y-6") do Heading(level: 1) do plain "A UI component library, crafted precisely for Ruby devs" diff --git a/app/views/home_view/shapes.rb b/app/components/home/shapes.rb similarity index 97% rename from app/views/home_view/shapes.rb rename to app/components/home/shapes.rb index 89243673..b33d899c 100644 --- a/app/views/home_view/shapes.rb +++ b/app/components/home/shapes.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -class HomeView::Shapes < ApplicationComponent +class Components::Home::Shapes < Components::Base def initialize(size: :md, **attributes) @attributes = attributes @circle_sizes = { diff --git a/app/components/layouts/base.rb b/app/components/layouts/base.rb new file mode 100644 index 00000000..d98843dd --- /dev/null +++ b/app/components/layouts/base.rb @@ -0,0 +1,32 @@ +class Components::Layouts::Base < Phlex::HTML + # include Components + + if Rails.env.development? + def before_template + comment { "Before #{self.class.name}" } + super + end + end + + PageInfo = Data.define(:title) + + def around_template + doctype + + html do + render Components::Shared::Head.new(page_info) + + body do + render Components::Shared::Navbar.new + yield # This will render the content of child layouts/views + render Components::Shared::Flashes.new(notice: helpers.flash[:notice], alert: helpers.flash[:alert]) + end + end + end + + def page_info + PageInfo.new( + title: page_title + ) + end +end diff --git a/app/components/layouts/docs.rb b/app/components/layouts/docs.rb new file mode 100644 index 00000000..dd383ac9 --- /dev/null +++ b/app/components/layouts/docs.rb @@ -0,0 +1,20 @@ +# frozen_string_literal: true + +class Components::Layouts::Docs < Components::Layouts::Base + include ApplicationHelper + + def around_template + super do # Call the Base layout's template method + div(class: "flex-1") do + div(class: "border-b") do + div(class: "container px-4 flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10") do + render Components::Shared::Sidebar.new + main(class: "relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]") do + yield # This will render the content of views using this layout + end + end + end + end + end + end +end diff --git a/app/components/layouts/errors.rb b/app/components/layouts/errors.rb new file mode 100644 index 00000000..90c416fd --- /dev/null +++ b/app/components/layouts/errors.rb @@ -0,0 +1,31 @@ +class Components::Layouts::Errors < Components::Base + include Components + + PageInfo = Data.define(:title) + + include Phlex::Rails::Layout + + def view_template(&block) + doctype + + html do + render Components::Shared::Head.new(page_info) + + body do + main(class: "relative flex flex-col items-center justify-center gap-y-6 h-screen w-screen overflow-y-scroll") do + render Shared::GridPattern.new + ThemeToggle(class: "hidden") # In order for dark mode to work, we need to render the theme toggle somewhere in the DOM + render Shared::Logo.new + div(class: "container w-full max-w-md", &block) + end + render Shared::Flashes.new(notice: helpers.flash[:notice], alert: helpers.flash[:alert]) + end + end + end + + def page_info + PageInfo.new( + title: page_title + ) + end +end diff --git a/app/components/layouts/pages.rb b/app/components/layouts/pages.rb new file mode 100644 index 00000000..6e024b01 --- /dev/null +++ b/app/components/layouts/pages.rb @@ -0,0 +1,9 @@ +# frozen_string_literal: true + +class Components::Layouts::Pages < Components::Layouts::Base + def around_template + super do # Call the Base layout's template method + main(class: "relative") { yield } + end + end +end diff --git a/app/components/ruby_ui_base.rb b/app/components/ruby_ui_base.rb new file mode 100644 index 00000000..b80ce2b9 --- /dev/null +++ b/app/components/ruby_ui_base.rb @@ -0,0 +1,33 @@ +# frozen_string_literal: true + +class Components::RubyUiBase < Phlex::HTML + include RBUI + # include Components + include ApplicationHelper + + # Include any helpers you want to be available across all components + include Phlex::Rails::Helpers::Routes + + GITHUB_REPO_URL = "https://github.com/ruby-ui/ruby_ui/" + GITHUB_FILE_URL = "#{GITHUB_REPO_URL}blob/main/" + + if Rails.env.development? + def before_template + comment { "Before #{self.class.name}" } + super + end + end +end + +class MethodCallFinder < Prism::Visitor + attr_reader :calls + + def initialize(calls) + @calls = calls + end + + def visit_call_node(node) + super + calls << node.name + end +end diff --git a/app/views/components/shared/container.rb b/app/components/shared/container.rb similarity index 71% rename from app/views/components/shared/container.rb rename to app/components/shared/container.rb index 023c5b46..69221d31 100644 --- a/app/views/components/shared/container.rb +++ b/app/components/shared/container.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -class Shared::Container < ApplicationComponent +class Components::Shared::Container < Components::Base DEFAULT_CLASS = "container mx-auto w-full px-4" SIZE_CLASSES = { sm: "max-w-md", @@ -12,7 +12,7 @@ class Shared::Container < ApplicationComponent def initialize(size: "md", **attrs) @attrs = attrs - @attrs[:class] = tokens(DEFAULT_CLASS, SIZE_CLASSES[size].to_s, @attrs[:class]) + @attrs[:class] = [DEFAULT_CLASS, SIZE_CLASSES[size].to_s, @attrs[:class]] end def view_template(&) diff --git a/app/views/components/shared/flashes.rb b/app/components/shared/flashes.rb similarity index 91% rename from app/views/components/shared/flashes.rb rename to app/components/shared/flashes.rb index 5fb18b16..70dcd422 100644 --- a/app/views/components/shared/flashes.rb +++ b/app/components/shared/flashes.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -class Shared::Flashes < ApplicationComponent +class Components::Shared::Flashes < Components::Base def initialize(notice: nil, alert: nil) @notice = notice @alert = alert diff --git a/app/views/components/shared/grid_pattern.rb b/app/components/shared/grid_pattern.rb similarity index 93% rename from app/views/components/shared/grid_pattern.rb rename to app/components/shared/grid_pattern.rb index 2f3b6dac..6d54db3c 100644 --- a/app/views/components/shared/grid_pattern.rb +++ b/app/components/shared/grid_pattern.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -class Shared::GridPattern < ApplicationComponent +class Components::Shared::GridPattern < Components::Base def initialize(spacing: :md) sizes = { xs: 15, diff --git a/app/views/components/shared/head.rb b/app/components/shared/head.rb similarity index 72% rename from app/views/components/shared/head.rb rename to app/components/shared/head.rb index da908517..efeb81ab 100644 --- a/app/views/components/shared/head.rb +++ b/app/components/shared/head.rb @@ -1,11 +1,17 @@ # frozen_string_literal: true -class Shared::Head < ApplicationComponent +class Components::Shared::Head < Components::Base include Phlex::Rails::Layout + include Phlex::Rails::Helpers::CSRFMetaTags + include Phlex::Rails::Helpers::StylesheetLinkTag + + def initialize(page_info) + @page_info = page_info + end def view_template head do - title { "RBUI - Component Library" } + title { "RBUI - " + @page_info.title } meta name: "viewport", content: "width=device-width,initial-scale=1" meta name: "turbo-refresh-method", content: "morph" meta name: "turbo-refresh-scroll", content: "preserve" diff --git a/app/views/components/shared/logo.rb b/app/components/shared/logo.rb similarity index 91% rename from app/views/components/shared/logo.rb rename to app/components/shared/logo.rb index 66f5eb91..c68d8ec2 100644 --- a/app/views/components/shared/logo.rb +++ b/app/components/shared/logo.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -class Shared::Logo < ApplicationComponent +class Components::Shared::Logo < Components::Base def view_template a(href: helpers.root_url, class: "mr-6 flex items-center space-x-2") do Heading(level: 4, class: "flex items-center") { diff --git a/app/views/components/shared/menu.rb b/app/components/shared/menu.rb similarity index 87% rename from app/views/components/shared/menu.rb rename to app/components/shared/menu.rb index d3b8206d..efa8c78c 100644 --- a/app/views/components/shared/menu.rb +++ b/app/components/shared/menu.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -class Shared::Menu < ApplicationComponent +class Components::Shared::Menu < Components::Base def view_template div(class: "pb-4") do # Main routes (Docs, Components, Themes, Github, Discord, Twitter) @@ -70,7 +70,7 @@ def components {name: "Button", path: helpers.docs_button_path}, {name: "Card", path: helpers.docs_card_path}, {name: "Calendar", path: helpers.docs_calendar_path}, - # { name: "Chart", path: helpers.docs_chart_path, badge: "New" }, + {name: "Chart", path: helpers.docs_chart_path, badge: "New"}, {name: "Checkbox", path: helpers.docs_checkbox_path}, {name: "Clipboard", path: helpers.docs_clipboard_path}, {name: "Codeblock", path: helpers.docs_codeblock_path}, @@ -101,7 +101,12 @@ def components def menu_link(component) current_path = component[:path] == helpers.request.path - a(href: component[:path], class: tokens("group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline", -> { current_path } => "text-foreground font-medium", -> { !current_path } => "text-muted-foreground")) do + a(href: component[:path], class: [ + "group flex w-full items-center rounded-md border border-transparent px-2 py-1", + "hover:underline", + ("text-foreground font-medium" if current_path), + ("text-muted-foreground" unless current_path) + ]) do span(class: "flex items-center gap-x-1") do span { component[:name] } Badge(variant: :success, size: :sm, class: "ml-1") { component[:badge] } if component[:badge] @@ -111,7 +116,12 @@ def menu_link(component) def main_link(name, path) current_path = path == helpers.request.path - a(href: path, class: tokens("group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline", -> { current_path } => "text-foreground font-medium", -> { !current_path } => "text-muted-foreground")) do + a(href: path, class: [ + "group flex w-full items-center rounded-md border border-transparent px-2 py-1", + "hover:underline", + ("text-foreground font-medium" if current_path), + ("text-muted-foreground" unless current_path) + ]) do name end end diff --git a/app/views/components/shared/mobile_menu.rb b/app/components/shared/mobile_menu.rb similarity index 90% rename from app/views/components/shared/mobile_menu.rb rename to app/components/shared/mobile_menu.rb index 47b2e995..53e1abca 100644 --- a/app/views/components/shared/mobile_menu.rb +++ b/app/components/shared/mobile_menu.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -class Shared::MobileMenu < ApplicationComponent +class Components::Shared::MobileMenu < Components::Base def initialize(**attributes) @attributes = attributes end @@ -16,7 +16,7 @@ def view_template div(class: "flex flex-col h-full") do SheetHeader do div(class: "pl-2") do - render Shared::Logo.new + render Components::Shared::Logo.new end end div(class: "flex-grow overflow-y-scroll") do diff --git a/app/views/components/shared/navbar.rb b/app/components/shared/navbar.rb similarity index 97% rename from app/views/components/shared/navbar.rb rename to app/components/shared/navbar.rb index 6c5caa0a..68c37269 100644 --- a/app/views/components/shared/navbar.rb +++ b/app/components/shared/navbar.rb @@ -1,12 +1,12 @@ # frozen_string_literal: true -class Shared::Navbar < ApplicationComponent +class Components::Shared::Navbar < Components::Base def view_template header(class: "supports-backdrop-blur:bg-background/80 sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur-2xl backdrop-saturate-200") do div(class: "px-2 sm:px-4 sm:container flex h-14 items-center justify-between") do div(class: "mr-4 flex items-center") do - render Shared::MobileMenu.new(class: "md:hidden") - render Shared::Logo.new + render Components::Shared::MobileMenu.new(class: "md:hidden") + render Components::Shared::Logo.new Link(href: helpers.docs_introduction_path, variant: :ghost, class: "hidden md:inline-block") { "Docs" } Link(href: helpers.docs_accordion_path, variant: :ghost, class: "hidden md:inline-block") { "Components" } diff --git a/app/views/components/shared/sidebar.rb b/app/components/shared/sidebar.rb similarity index 90% rename from app/views/components/shared/sidebar.rb rename to app/components/shared/sidebar.rb index b55b612c..80cc9271 100644 --- a/app/views/components/shared/sidebar.rb +++ b/app/components/shared/sidebar.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -class Shared::Sidebar < ApplicationComponent +class Components::Shared::Sidebar < Components::Base def view_template aside(class: "fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block") do div(class: "relative overflow-hidden h-full py-6 pl-8 pr-6 lg:py-8", style: "position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px") do diff --git a/app/components/text.rb b/app/components/text.rb index 39361c33..8d2dd978 100644 --- a/app/components/text.rb +++ b/app/components/text.rb @@ -1,7 +1,7 @@ # frozen_string_literal: true module Components - class Text < Base + class Text < RBUI::Base def initialize(as: "p", size: "3", weight: "regular", **attrs) @as = as @size = size diff --git a/app/components/typography_list.rb b/app/components/typography_list.rb index 54cf50f4..341d2be5 100644 --- a/app/components/typography_list.rb +++ b/app/components/typography_list.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -class Components::TypographyList < Components::Base +class Components::TypographyList < RBUI::Base def initialize(items: [], numbered: false, **attrs) @items = items @numbered = numbered @@ -35,11 +35,11 @@ def not_numbered? = !numbered? def default_attrs { - class: tokens( + class: [ "my-6 ml-6 [&>li]:mt-2 [&>li]:pl-2", - numbered?: "list-decimal marker:font-medium", - not_numbered?: "list-disc" - ) + ("list-decimal marker:font-medium" if numbered?), + ("list-disc" if not_numbered?) + ] } end end diff --git a/app/components/typography_list_item.rb b/app/components/typography_list_item.rb index 7909eba9..46ebc7cd 100644 --- a/app/components/typography_list_item.rb +++ b/app/components/typography_list_item.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -class Components::TypographyListItem < Components::Base +class Components::TypographyListItem < RBUI::Base def view_template(&) li(**attrs, &) end diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index 09705d12..52b609d5 100644 --- a/app/controllers/application_controller.rb +++ b/app/controllers/application_controller.rb @@ -1,2 +1,3 @@ class ApplicationController < ActionController::Base + layout false end diff --git a/app/controllers/docs_controller.rb b/app/controllers/docs_controller.rb index a66dfca7..14e29d6b 100644 --- a/app/controllers/docs_controller.rb +++ b/app/controllers/docs_controller.rb @@ -1,176 +1,176 @@ # frozen_string_literal: true class DocsController < ApplicationController - layout -> { DocsLayout } + layout false # GETTING STARTED def introduction - render Docs::GettingStarted::IntroductionView.new + render Views::Docs::GettingStarted::Introduction.new end def installation - render Docs::GettingStarted::InstallationView.new + render Views::Docs::GettingStarted::Installation.new end def theming - render Docs::GettingStarted::ThemingView.new + render Views::Docs::GettingStarted::Theming.new end def dark_mode - render Docs::GettingStarted::DarkModeView.new + render Views::Docs::GettingStarted::DarkMode.new end def customizing_components - render Docs::GettingStarted::CustomizingComponentsView.new + render Views::Docs::GettingStarted::CustomizingComponents.new end # INSTALLATION def installation_rails_bundler - render Docs::Installation::RailsBundlerView.new + render Views::Docs::Installation::RailsBundler.new end def installation_rails_importmaps - render Docs::Installation::RailsImportmapsView.new + render Views::Docs::Installation::RailsImportmaps.new end # COMPONENTS def accordion - render Docs::AccordionView.new + render Views::Docs::Accordion.new end def alert_component # alert is a reserved word - render Docs::AlertView.new + render Views::Docs::Alert.new end def alert_dialog - render Docs::AlertDialogView.new + render Views::Docs::AlertDialog.new end def aspect_ratio - render Docs::AspectRatioView.new + render Views::Docs::AspectRatio.new end def avatar - render Docs::AvatarView.new + render Views::Docs::Avatar.new end def badge - render Docs::BadgeView.new + render Views::Docs::Badge.new end def button - render Docs::ButtonView.new + render Views::Docs::Button.new end def card - render Docs::CardView.new + render Views::Docs::Card.new end def calendar - render Docs::CalendarView.new + render Views::Docs::Calendar.new end def chart - render Docs::ChartView.new + render Views::Docs::Chart.new end def checkbox - render Docs::CheckboxView.new + render Views::Docs::Checkbox.new end def clipboard - render Docs::ClipboardView.new + render Views::Docs::Clipboard.new end def codeblock - render Docs::CodeblockView.new + render Views::Docs::Codeblock.new end def collapsible - render Docs::CollapsibleView.new + render Views::Docs::Collapsible.new end def combobox - render Docs::ComboboxView.new + render Views::Docs::Combobox.new end def command - render Docs::CommandView.new + render Views::Docs::Command.new end def context_menu - render Docs::ContextMenuView.new + render Views::Docs::ContextMenu.new end def date_picker - render Docs::DatePickerView.new + render Views::Docs::DatePicker.new end def dialog - render Docs::DialogView.new + render Views::Docs::Dialog.new end def dropdown_menu - render Docs::DropdownMenuView.new + render Views::Docs::DropdownMenu.new end def form - render Docs::FormView.new + render Views::Docs::Form.new end def hover_card - render Docs::HoverCardView.new + render Views::Docs::HoverCard.new end def input - render Docs::InputView.new + render Views::Docs::Input.new end def link - render Docs::LinkView.new + render Views::Docs::Link.new end def pagination - render Docs::PaginationView.new + render Views::Docs::Pagination.new end def popover - render Docs::PopoverView.new + render Views::Docs::Popover.new end def select - render Docs::SelectView.new + render Views::Docs::Select.new end def sheet - render Docs::SheetView.new + render Views::Docs::Sheet.new end def shortcut_key - render Docs::ShortcutKeyView.new + render Views::Docs::ShortcutKey.new end def table - render Docs::TableView.new + render Views::Docs::Table.new end def tabs - render Docs::TabsView.new + render Views::Docs::Tabs.new end def textarea - render Docs::TextareaView.new + render Views::Docs::Textarea.new end def theme_toggle - render Docs::ThemeToggleView.new + render Views::Docs::ThemeToggle.new end def tooltip - render Docs::TooltipView.new + render Views::Docs::Tooltip.new end def typography - render Docs::TypographyView.new + render Views::Docs::Typography.new end end diff --git a/app/controllers/errors_controller.rb b/app/controllers/errors_controller.rb index 0864e1f2..b346451e 100644 --- a/app/controllers/errors_controller.rb +++ b/app/controllers/errors_controller.rb @@ -1,13 +1,11 @@ # frozen_string_literal: true class ErrorsController < ApplicationController - layout -> { ErrorsLayout } - def not_found - render Errors::NotFoundView.new, status: :not_found + render Views::Errors::NotFoundView.new, status: :not_found end def internal_server_error - render Errors::InternalServerErrorView.new, status: :internal_server_error + render Views::Errors::InternalServerErrorView.new, status: :internal_server_error end end diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb index 3ccefd94..ad67c6a4 100644 --- a/app/controllers/pages_controller.rb +++ b/app/controllers/pages_controller.rb @@ -1,9 +1,9 @@ # frozen_string_literal: true class PagesController < ApplicationController - layout -> { PagesLayout } + layout false def home - render Pages::HomeView.new + render Views::Pages::HomeView.new end end diff --git a/app/controllers/themes_controller.rb b/app/controllers/themes_controller.rb index d9c0e9b3..d89ef46e 100644 --- a/app/controllers/themes_controller.rb +++ b/app/controllers/themes_controller.rb @@ -1,10 +1,10 @@ # frozen_string_literal: true class ThemesController < ApplicationController - layout -> { ApplicationLayout } + layout false # GET /themes/:theme def show - render Themes::ShowView.new(theme: params[:theme]) + render Views::Themes::Show.new(theme: params[:theme]) end end diff --git a/app/views/application.rb b/app/views/application.rb new file mode 100644 index 00000000..15f77b4c --- /dev/null +++ b/app/views/application.rb @@ -0,0 +1,5 @@ +class Views::Application < Components::Layouts::Docs + include RBUI + include Components + include ApplicationHelper +end diff --git a/app/views/application_view.rb b/app/views/application_view.rb deleted file mode 100644 index ea3e762d..00000000 --- a/app/views/application_view.rb +++ /dev/null @@ -1,33 +0,0 @@ -# frozen_string_literal: true - -class MethodCallFinder < Prism::Visitor - attr_reader :calls - - def initialize(calls) - @calls = calls - end - - def visit_call_node(node) - super - calls << node.name - end -end - -class ApplicationView < ApplicationComponent - # include RBUI - include Components - include ApplicationHelper - # The ApplicationView is an abstract class for all your views. - - # By default, it inherits from `ApplicationComponent`, but you - # can change that to `Phlex::HTML` if you want to keep views and - # components independent. - - GITHUB_REPO_URL = "https://github.com/rbui-labs/rbui/" - GITHUB_FILE_URL = "#{GITHUB_REPO_URL}blob/main/" - - def before_template - Docs::VisualCodeExample.reset_collected_code - super - end -end diff --git a/app/views/base.rb b/app/views/base.rb new file mode 100644 index 00000000..25f9eca1 --- /dev/null +++ b/app/views/base.rb @@ -0,0 +1,10 @@ +# frozen_string_literal: true + +class Views::Base < Components::Base + include Components + # The ApplicationView is an abstract class for all your views. + + # By default, it inherits from `Components::Base`, but you + # can change that to `Phlex::HTML` if you want to keep views and + # components independent. +end diff --git a/app/views/component.rb b/app/views/component.rb new file mode 100644 index 00000000..f19f9adc --- /dev/null +++ b/app/views/component.rb @@ -0,0 +1,5 @@ +class Views::Component < Components::Layouts::Pages + include RBUI + include ApplicationHelper + include Components +end diff --git a/app/views/component_view.rb b/app/views/component_view.rb deleted file mode 100644 index f5518b4d..00000000 --- a/app/views/component_view.rb +++ /dev/null @@ -1,4 +0,0 @@ -class ComponentView < ApplicationComponent - include RBUI - include ApplicationHelper -end diff --git a/app/views/components/animation.rb b/app/views/components/animation.rb index 6c40392c..eb5b8784 100644 --- a/app/views/components/animation.rb +++ b/app/views/components/animation.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -class Animation < ApplicationComponent +class Animation < Components::Base def initialize(path:, options: {}, delay: 0, **attrs) @path = path @options = options.to_json diff --git a/app/views/components/application_component.rb b/app/views/components/application_component.rb deleted file mode 100644 index b2c77bdb..00000000 --- a/app/views/components/application_component.rb +++ /dev/null @@ -1,13 +0,0 @@ -# frozen_string_literal: true - -class ApplicationComponent < Phlex::HTML - include RBUI - include Phlex::Rails::Helpers::Routes - - if Rails.env.development? - def before_template - comment { "Before #{self.class.name}" } - super - end - end -end diff --git a/app/views/components/shared/flash.rb b/app/views/components/shared/flash.rb index 81ff6673..59fe6a6d 100644 --- a/app/views/components/shared/flash.rb +++ b/app/views/components/shared/flash.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -class Shared::Flash < ApplicationComponent +class Shared::Flash < Components::Base # STYLE_CLASS = { # notice: 'bg-primary text-primary-foreground', # alert: 'bg-destructive text-destructive-foreground' diff --git a/app/views/components/steps/builder.rb b/app/views/components/steps/builder.rb index fd086e72..ac3e9803 100644 --- a/app/views/components/steps/builder.rb +++ b/app/views/components/steps/builder.rb @@ -1,7 +1,7 @@ # frozen_string_literal: true module Steps - class Builder < ApplicationComponent + class Builder < Components::Base include Phlex::DeferredRender def initialize(**attrs) diff --git a/app/views/components/steps/step.rb b/app/views/components/steps/step.rb index 0fe78bab..0b0adb5e 100644 --- a/app/views/components/steps/step.rb +++ b/app/views/components/steps/step.rb @@ -1,7 +1,7 @@ # frozen_string_literal: true module Steps - class Step < ApplicationComponent + class Step < Components::Base def initialize(number: 1, last: false) @number = number @last = last diff --git a/app/views/components/typography/inline_link.rb b/app/views/components/typography/inline_link.rb index 1114b089..0520cd6a 100644 --- a/app/views/components/typography/inline_link.rb +++ b/app/views/components/typography/inline_link.rb @@ -1,5 +1,5 @@ module Typography - class InlineLink < ApplicationComponent + class InlineLink < Components::Base def initialize(href:, **attrs) @href = href @attrs = attrs diff --git a/app/views/docs/accordion_view.rb b/app/views/docs/accordion.rb similarity index 92% rename from app/views/docs/accordion_view.rb rename to app/views/docs/accordion.rb index 4b90abe8..f9fee789 100644 --- a/app/views/docs/accordion_view.rb +++ b/app/views/docs/accordion.rb @@ -1,13 +1,15 @@ # frozen_string_literal: true -class Docs::AccordionView < ApplicationView +class Views::Docs::Accordion < Views::Application + def page_title = "Accordion" + def view_template div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do component = "Accordion" render Docs::Header.new(title: component, description: "A vertically stacked set of interactive headings that each reveal a section of content.") - Heading(level: 2) { "Usage" } + Components.Heading(level: 2) { "Usage" } render Docs::VisualCodeExample.new(title: "Example", context: self) do @@code = <<~RUBY diff --git a/app/views/docs/alert.rb b/app/views/docs/alert.rb new file mode 100644 index 00000000..2b1881a3 --- /dev/null +++ b/app/views/docs/alert.rb @@ -0,0 +1,117 @@ +# frozen_string_literal: true + +class Views::Docs::Alert < Views::Application + def page_title = "Accordion" + + def view_template + component = "Alert" + div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do + render Docs::Header.new(title: "Alert", description: "Displays a callout for user attention.") + + Heading(level: 2) { "Usage" } + + render Docs::VisualCodeExample.new(title: "Example", context: self) do + <<~RUBY + Alert do + svg( + xmlns: "http://www.w3.org/2000/svg", + viewbox: "0 0 24 24", + fill: "currentColor", + class: "w-5 h-5" + ) do |s| + s.path( + fill_rule: "evenodd", + d: + "M9.315 7.584C12.195 3.883 16.695 1.5 21.75 1.5a.75.75 0 01.75.75c0 5.056-2.383 9.555-6.084 12.436A6.75 6.75 0 019.75 22.5a.75.75 0 01-.75-.75v-4.131A15.838 15.838 0 016.382 15H2.25a.75.75 0 01-.75-.75 6.75 6.75 0 017.815-6.666zM15 6.75a2.25 2.25 0 100 4.5 2.25 2.25 0 000-4.5z", + clip_rule: "evenodd" + ) + s.path( + d: + "M5.26 17.242a.75.75 0 10-.897-1.203 5.243 5.243 0 00-2.05 5.022.75.75 0 00.625.627 5.243 5.243 0 005.022-2.051.75.75 0 10-1.202-.897 3.744 3.744 0 01-3.008 1.51c0-1.23.592-2.323 1.51-3.008z" + ) + end + AlertTitle { "Pro tip" } + AlertDescription { "With RBUI you'll ship faster." } + end + RUBY + end + + render Docs::VisualCodeExample.new(title: "Without Icon", context: self) do + <<~RUBY + Alert do + AlertTitle { "Pro tip" } + AlertDescription { "Simply, don't include an icon and your alert will look like this." } + end + RUBY + end + + render Docs::VisualCodeExample.new(title: "Warning", context: self) do + <<~RUBY + Alert(variant: :warning) do + svg( + xmlns: "http://www.w3.org/2000/svg", + viewbox: "0 0 24 24", + fill: "currentColor", + class: "w-5 h-5" + ) do |s| + s.path( + fill_rule: "evenodd", + d: + "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z", + clip_rule: "evenodd" + ) + end + AlertTitle { "Ship often" } + AlertDescription { "Shipping is good, your users will thank you for it." } + end + RUBY + end + + render Docs::VisualCodeExample.new(title: "Destructive", context: self) do + <<~RUBY + Alert(variant: :destructive) do + svg( + xmlns: "http://www.w3.org/2000/svg", + viewbox: "0 0 24 24", + fill: "currentColor", + class: "w-5 h-5" + ) do |s| + s.path( + fill_rule: "evenodd", + d: + "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z", + clip_rule: "evenodd" + ) + end + AlertTitle { "Oopsie daisy!" } + AlertDescription { "Your design system is non-existent." } + end + RUBY + end + + render Docs::VisualCodeExample.new(title: "Success", context: self) do + <<~RUBY + Alert(variant: :success) do + svg( + xmlns: "http://www.w3.org/2000/svg", + viewbox: "0 0 24 24", + fill: "currentColor", + class: "w-5 h-5" + ) do |s| + s.path( + fill_rule: "evenodd", + d: + "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z", + clip_rule: "evenodd" + ) + end + AlertTitle { "Installation successful" } + AlertDescription { "You're all set to start using RBUI in your application." } + end + RUBY + end + + render Docs::ComponentsTable.new(component_references(component, Docs::VisualCodeExample.collected_code), component_files(component)) + end + end +end diff --git a/app/views/docs/alert_dialog_view.rb b/app/views/docs/alert_dialog.rb similarity index 94% rename from app/views/docs/alert_dialog_view.rb rename to app/views/docs/alert_dialog.rb index 4a2e4959..762a293e 100644 --- a/app/views/docs/alert_dialog_view.rb +++ b/app/views/docs/alert_dialog.rb @@ -1,8 +1,11 @@ # frozen_string_literal: true -class Docs::AlertDialogView < ApplicationView +class Views::Docs::AlertDialog < Views::Application + def page_title = "Alert" + def view_template component = "AlertDialog" + div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do render Docs::Header.new(title: "Alert Dialog", description: "A modal dialog that interrupts the user with important content and expects a response.") diff --git a/app/views/docs/alert_view.rb b/app/views/docs/alert_view.rb deleted file mode 100644 index 441be606..00000000 --- a/app/views/docs/alert_view.rb +++ /dev/null @@ -1,133 +0,0 @@ -# frozen_string_literal: true - -class Docs::AlertView < ApplicationView - def view_template - component = "Alert" - div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do - render Docs::Header.new(title: "Alert", description: "Displays a callout for user attention.") - - Heading(level: 2) { "Usage" } - - render Docs::VisualCodeExample.new(title: "Example", context: self) do - <<~RUBY - Alert do - rocket_icon - AlertTitle { "Pro tip" } - AlertDescription { "With RBUI you'll ship faster." } - end - RUBY - end - - render Docs::VisualCodeExample.new(title: "Without Icon", context: self) do - <<~RUBY - Alert do - AlertTitle { "Pro tip" } - AlertDescription { "Simply, don't include an icon and your alert will look like this." } - end - RUBY - end - - render Docs::VisualCodeExample.new(title: "Warning", context: self) do - <<~RUBY - Alert(variant: :warning) do - info_icon - AlertTitle { "Ship often" } - AlertDescription { "Shipping is good, your users will thank you for it." } - end - RUBY - end - - render Docs::VisualCodeExample.new(title: "Destructive", context: self) do - <<~RUBY - Alert(variant: :destructive) do - alert_icon - AlertTitle { "Oopsie daisy!" } - AlertDescription { "Your design system is non-existent." } - end - RUBY - end - - render Docs::VisualCodeExample.new(title: "Success", context: self) do - <<~RUBY - Alert(variant: :success) do - check_icon - AlertTitle { "Installation successful" } - AlertDescription { "You're all set to start using RBUI in your application." } - end - RUBY - end - - render Docs::ComponentsTable.new(component_references(component, Docs::VisualCodeExample.collected_code), component_files(component)) - end - end - - private - - def rocket_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - viewbox: "0 0 24 24", - fill: "currentColor", - class: "w-5 h-5" - ) do |s| - s.path( - fill_rule: "evenodd", - d: - "M9.315 7.584C12.195 3.883 16.695 1.5 21.75 1.5a.75.75 0 01.75.75c0 5.056-2.383 9.555-6.084 12.436A6.75 6.75 0 019.75 22.5a.75.75 0 01-.75-.75v-4.131A15.838 15.838 0 016.382 15H2.25a.75.75 0 01-.75-.75 6.75 6.75 0 017.815-6.666zM15 6.75a2.25 2.25 0 100 4.5 2.25 2.25 0 000-4.5z", - clip_rule: "evenodd" - ) - s.path( - d: - "M5.26 17.242a.75.75 0 10-.897-1.203 5.243 5.243 0 00-2.05 5.022.75.75 0 00.625.627 5.243 5.243 0 005.022-2.051.75.75 0 10-1.202-.897 3.744 3.744 0 01-3.008 1.51c0-1.23.592-2.323 1.51-3.008z" - ) - end - end - - def alert_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - viewbox: "0 0 24 24", - fill: "currentColor", - class: "w-5 h-5" - ) do |s| - s.path( - fill_rule: "evenodd", - d: - "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z", - clip_rule: "evenodd" - ) - end - end - - def info_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - viewbox: "0 0 24 24", - fill: "currentColor", - class: "w-5 h-5" - ) do |s| - s.path( - fill_rule: "evenodd", - d: - "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z", - clip_rule: "evenodd" - ) - end - end - - def check_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - viewbox: "0 0 24 24", - fill: "currentColor", - class: "w-5 h-5" - ) do |s| - s.path( - fill_rule: "evenodd", - d: - "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z", - clip_rule: "evenodd" - ) - end - end -end diff --git a/app/views/docs/aspect_ratio_view.rb b/app/views/docs/aspect_ratio.rb similarity index 95% rename from app/views/docs/aspect_ratio_view.rb rename to app/views/docs/aspect_ratio.rb index 4eeb6ede..ad2ebfcb 100644 --- a/app/views/docs/aspect_ratio_view.rb +++ b/app/views/docs/aspect_ratio.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::AspectRatioView < ApplicationView +class Views::Docs::AspectRatio < Views::Application + def page_title = "Aspect Ratio" + def view_template component = "AspectRatio" div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do diff --git a/app/views/docs/avatar_view.rb b/app/views/docs/avatar.rb similarity index 97% rename from app/views/docs/avatar_view.rb rename to app/views/docs/avatar.rb index 077b8d95..0f907e6c 100644 --- a/app/views/docs/avatar_view.rb +++ b/app/views/docs/avatar.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::AvatarView < ApplicationView +class Views::Docs::Avatar < Views::Application + def page_title = "Avatar" + def view_template component = "Avatar" div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do diff --git a/app/views/docs/badge_view.rb b/app/views/docs/badge.rb similarity index 97% rename from app/views/docs/badge_view.rb rename to app/views/docs/badge.rb index c9b01800..1dc4b917 100644 --- a/app/views/docs/badge_view.rb +++ b/app/views/docs/badge.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::BadgeView < ApplicationView +class Views::Docs::Badge < Views::Application + def page_title = "Badge" + def view_template 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.") diff --git a/app/views/docs/button_view.rb b/app/views/docs/button.rb similarity index 98% rename from app/views/docs/button_view.rb rename to app/views/docs/button.rb index 15926ea9..91aad901 100644 --- a/app/views/docs/button_view.rb +++ b/app/views/docs/button.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::ButtonView < ApplicationView +class Views::Docs::Button < Views::Application + def page_title = "Button" + def view_template 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.") diff --git a/app/views/docs/calendar_view.rb b/app/views/docs/calendar.rb similarity index 94% rename from app/views/docs/calendar_view.rb rename to app/views/docs/calendar.rb index 4b444c59..37987ca9 100644 --- a/app/views/docs/calendar_view.rb +++ b/app/views/docs/calendar.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::CalendarView < ApplicationView +class Views::Docs::Calendar < Views::Application + def page_title = "Calendar" + def view_template component = "Calendar" div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do diff --git a/app/views/docs/card_view.rb b/app/views/docs/card.rb similarity index 74% rename from app/views/docs/card_view.rb rename to app/views/docs/card.rb index d834000f..1d8d0f77 100644 --- a/app/views/docs/card_view.rb +++ b/app/views/docs/card.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::CardView < ApplicationView +class Views::Docs::Card < Views::Application + def page_title = "Card" + def view_template component = "Card" div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do @@ -57,6 +59,24 @@ def view_template render Docs::VisualCodeExample.new(title: "Account balance", context: self) do <<~RUBY + def cash_icon(classes: nil) + svg( + xmlns: "http://www.w3.org/2000/svg", + fill: "none", + viewbox: "0 0 24 24", + stroke_width: "1.5", + stroke: "currentColor", + class: ["w-6 h-6", classes] + ) do |s| + s.path( + stroke_linecap: "round", + stroke_linejoin: "round", + d: + "M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" + ) + end + end + Card(class: 'w-96 overflow-hidden') do CardHeader do div(class: 'w-10 h-10 rounded-xl flex items-center justify-center bg-violet-100 text-violet-700 -rotate-6') do @@ -83,7 +103,7 @@ def arrow_icon(classes: nil) xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 20 20", fill: "currentColor", - class: tokens("w-4 h-4", classes) + class: ["w-4 h-4", classes] ) do |s| s.path( fill_rule: "evenodd", @@ -93,22 +113,4 @@ def arrow_icon(classes: nil) ) end end - - def cash_icon(classes: nil) - svg( - xmlns: "http://www.w3.org/2000/svg", - fill: "none", - viewbox: "0 0 24 24", - stroke_width: "1.5", - stroke: "currentColor", - class: tokens("w-6 h-6", classes) - ) do |s| - s.path( - stroke_linecap: "round", - stroke_linejoin: "round", - d: - "M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" - ) - end - end end diff --git a/app/views/docs/chart_view.rb b/app/views/docs/chart.rb similarity index 78% rename from app/views/docs/chart_view.rb rename to app/views/docs/chart.rb index 27452141..81c571af 100644 --- a/app/views/docs/chart_view.rb +++ b/app/views/docs/chart.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::ChartView < ApplicationView +class Views::Docs::Chart < Views::Application + def page_title = "Chart" + def view_template div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do render Docs::Header.new(title: "Chart", description: "Displays information in a visual way.") @@ -9,9 +11,9 @@ def view_template Text do plain "RBUI uses " - InlineLink(href: "https://www.chartjs.org/") { "Chart.js" } + RBUI.InlineLink(href: "https://www.chartjs.org/") { "Chart.js" } plain " to render charts. Chart.js is a free open-source JavaScript library for data visualization, which supports 8 chart types: bar, line, area, pie, bubble, radar, polar, and scatter. If you're unfamiliar with Chart.js. We recommend the " - InlineLink(href: "https://www.chartjs.org/docs/latest/getting-started/") { "Getting Started guide" } + RBUI.InlineLink(href: "https://www.chartjs.org/docs/latest/getting-started/") { "Getting Started guide" } plain ". " end @@ -98,7 +100,7 @@ def view_template RUBY end - render Docs::ComponentsTable.new(components) + render Docs::ComponentsTable.new(component_references(page_title, Docs::VisualCodeExample.collected_code), component_files(page_title)) end end @@ -106,8 +108,8 @@ def view_template def components [ - Docs::ComponentStruct.new(name: "ChartController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/chart_controller.js", built_using: :stimulus), - Docs::ComponentStruct.new(name: "Chart", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/chart.rb", built_using: :phlex) + ::Docs::ComponentStruct.new(name: "ChartController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/chart_controller.js", built_using: :stimulus), + ::Docs::ComponentStruct.new(name: "Chart", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/chart.rb", built_using: :phlex) ] end end diff --git a/app/views/docs/checkbox_view.rb b/app/views/docs/checkbox.rb similarity index 95% rename from app/views/docs/checkbox_view.rb rename to app/views/docs/checkbox.rb index 10b1d25e..cb7aa3c9 100644 --- a/app/views/docs/checkbox_view.rb +++ b/app/views/docs/checkbox.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::CheckboxView < ApplicationView +class Views::Docs::Checkbox < Views::Application + def page_title = "Checkbox" + def view_template component = "Checkbox" div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do diff --git a/app/views/docs/clipboard_view.rb b/app/views/docs/clipboard.rb similarity index 92% rename from app/views/docs/clipboard_view.rb rename to app/views/docs/clipboard.rb index f60595d4..2626b0a6 100644 --- a/app/views/docs/clipboard_view.rb +++ b/app/views/docs/clipboard.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::ClipboardView < ApplicationView +class Views::Docs::Clipboard < Views::Application + def page_title = "Clipboard" + def view_template component = "Clipboard" div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do diff --git a/app/views/docs/codeblock_view.rb b/app/views/docs/codeblock.rb similarity index 95% rename from app/views/docs/codeblock_view.rb rename to app/views/docs/codeblock.rb index 91b2d57d..7d1c44ed 100644 --- a/app/views/docs/codeblock_view.rb +++ b/app/views/docs/codeblock.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::CodeblockView < ApplicationView +class Views::Docs::Codeblock < Views::Application + def page_title = "Codeblock" + def view_template component = "Codeblock" div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do diff --git a/app/views/docs/collapsible_view.rb b/app/views/docs/collapsible.rb similarity index 64% rename from app/views/docs/collapsible_view.rb rename to app/views/docs/collapsible.rb index 41b59605..c20478a9 100644 --- a/app/views/docs/collapsible_view.rb +++ b/app/views/docs/collapsible.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::CollapsibleView < ApplicationView +class Views::Docs::Collapsible < Views::Application + def page_title = "Collapsible" + def view_template component = "Collapsible" div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do @@ -15,7 +17,19 @@ def view_template h4(class: "text-sm font-semibold") { " @joeldrapper starred 3 repositories" } CollapsibleTrigger do Button(variant: :ghost, icon: true) do - chevron_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + viewbox: "0 0 20 20", + fill: "currentColor", + class: "w-4 h-4" + ) do |s| + s.path( + fill_rule: "evenodd", + d: + "M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z", + clip_rule: "evenodd" + ) + end span(class: "sr-only") { "Toggle" } end end @@ -46,7 +60,19 @@ def view_template h4(class: "text-sm font-semibold") { " @joeldrapper starred 3 repositories" } CollapsibleTrigger do Button(variant: :ghost, icon: true) do - chevron_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + viewbox: "0 0 20 20", + fill: "currentColor", + class: "w-4 h-4" + ) do |s| + s.path( + fill_rule: "evenodd", + d: + "M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z", + clip_rule: "evenodd" + ) + end span(class: "sr-only") { "Toggle" } end end @@ -73,22 +99,4 @@ def view_template render Docs::ComponentsTable.new(component_references(component, Docs::VisualCodeExample.collected_code), component_files(component)) end end - - private - - def chevron_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - viewbox: "0 0 20 20", - fill: "currentColor", - class: "w-4 h-4" - ) do |s| - s.path( - fill_rule: "evenodd", - d: - "M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z", - clip_rule: "evenodd" - ) - end - end end diff --git a/app/views/docs/combobox_view.rb b/app/views/docs/combobox.rb similarity index 96% rename from app/views/docs/combobox_view.rb rename to app/views/docs/combobox.rb index 718108ff..d4d8ed9c 100644 --- a/app/views/docs/combobox_view.rb +++ b/app/views/docs/combobox.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::ComboboxView < ApplicationView +class Views::Docs::Combobox < Views::Application + def page_title = "Combobox" + @@code_example = nil def view_template diff --git a/app/views/docs/command.rb b/app/views/docs/command.rb new file mode 100644 index 00000000..49cd6119 --- /dev/null +++ b/app/views/docs/command.rb @@ -0,0 +1,204 @@ +# frozen_string_literal: true + +class Views::Docs::Command < Views::Application + def page_title = "Command" + + def view_template + component = "Command" + div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do + render Docs::Header.new(title: "Command", description: "Fast, composable, unstyled command menu for Phlex.") + + Heading(level: 2) { "Usage" } + + render Docs::VisualCodeExample.new(title: "Example", context: self) do + <<~RUBY + components_list = [ + {name: "Accordion", path: helpers.docs_accordion_path}, + {name: "Alert", path: helpers.docs_alert_path}, + {name: "Alert Dialog", path: helpers.docs_alert_dialog_path}, + {name: "Aspect Ratio", path: helpers.docs_aspect_ratio_path}, + {name: "Avatar", path: helpers.docs_avatar_path}, + {name: "Badge", path: helpers.docs_badge_path} + ] + + settings_list = [ + {name: "Profile", path: "#"}, + {name: "Mail", path: "#"}, + {name: "Settings", path: "#"} + ] + + CommandDialog do + CommandDialogTrigger do + Button(variant: "outline", class: 'w-56 pr-2 pl-3 justify-between') do + div(class: "flex items-center space-x-1") do + svg( + xmlns: "http://www.w3.org/2000/svg", + viewbox: "0 0 20 20", + fill: "currentColor", + class: "w-4 h-4 mr-1.5" + ) do |s| + s.path( + fill_rule: "evenodd", + d: + "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z", + clip_rule: "evenodd" + ) + end + span(class: "text-muted-foreground font-normal") do + plain "Search" + end + end + ShortcutKey do + span(class: "text-xs") { "⌘" } + plain "K" + end + end + end + CommandDialogContent do + Command do + CommandInput(placeholder: "Type a command or search...") + CommandEmpty { "No results found." } + CommandList do + CommandGroup(title: "Components") do + components_list.each do |component| + CommandItem(value: component[:name], href: component[:path]) do + svg( + xmlns: "http://www.w3.org/2000/svg", + viewbox: "0 0 24 24", + fill: "currentColor", + class: "w-5 h-5" + ) do |s| + s.path( + fill_rule: "evenodd", + d: + "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z", + clip_rule: "evenodd" + ) + end + plain component[:name] + end + end + end + CommandGroup(title: "Settings") do + settings_list.each do |setting| + CommandItem(value: setting[:name], href: setting[:path]) do + svg( + xmlns: "http://www.w3.org/2000/svg", + viewbox: "0 0 24 24", + fill: "currentColor", + class: "w-5 h-5" + ) do |s| + s.path( + fill_rule: "evenodd", + d: + "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z", + clip_rule: "evenodd" + ) + end + plain setting[:name] + end + end + end + end + end + end + end + RUBY + end + + render Docs::VisualCodeExample.new(title: "With keybinding", context: self) do + <<~RUBY + components_list = [ + {name: "Accordion", path: helpers.docs_accordion_path}, + {name: "Alert", path: helpers.docs_alert_path}, + {name: "Alert Dialog", path: helpers.docs_alert_dialog_path}, + {name: "Aspect Ratio", path: helpers.docs_aspect_ratio_path}, + {name: "Avatar", path: helpers.docs_avatar_path}, + {name: "Badge", path: helpers.docs_badge_path} + ] + + settings_list = [ + {name: "Profile", path: "#"}, + {name: "Mail", path: "#"}, + {name: "Settings", path: "#"} + ] + + CommandDialog do + CommandDialogTrigger(keybindings: ['keydown.ctrl+j@window', 'keydown.meta+j@window']) do + p(class: "text-sm text-muted-foreground") do + span(class: 'mr-1') { "Press" } + ShortcutKey do + span(class: "text-xs") { "⌘" } + plain "J" + end + end + end + CommandDialogContent do + Command do + CommandInput(placeholder: "Type a command or search...") + CommandEmpty { "No results found." } + CommandList do + CommandGroup(title: "Components") do + components_list.each do |component| + CommandItem(value: component[:name], href: component[:path]) do + svg( + xmlns: "http://www.w3.org/2000/svg", + viewbox: "0 0 24 24", + fill: "currentColor", + class: "w-5 h-5" + ) do |s| + s.path( + fill_rule: "evenodd", + d: + "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z", + clip_rule: "evenodd" + ) + end + plain component[:name] + end + end + end + CommandGroup(title: "Settings") do + settings_list.each do |setting| + CommandItem(value: setting[:name], href: setting[:path]) do + svg( + xmlns: "http://www.w3.org/2000/svg", + viewbox: "0 0 24 24", + fill: "currentColor", + class: "w-5 h-5" + ) do |s| + s.path( + fill_rule: "evenodd", + d: + "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z", + clip_rule: "evenodd" + ) + end + plain setting[:name] + end + end + end + end + end + end + end + RUBY + end + + render Docs::ComponentsTable.new(component_references(component, Docs::VisualCodeExample.collected_code), component_files(component)) + end + end + + private + + def components_list + end + + def settings_list + [ + {name: "Profile", path: "#"}, + {name: "Mail", path: "#"}, + {name: "Settings", path: "#"} + ] + end +end diff --git a/app/views/docs/command_view.rb b/app/views/docs/command_view.rb deleted file mode 100644 index 36d73d22..00000000 --- a/app/views/docs/command_view.rb +++ /dev/null @@ -1,152 +0,0 @@ -# frozen_string_literal: true - -class Docs::CommandView < ApplicationView - def view_template - component = "Command" - div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do - render Docs::Header.new(title: "Command", description: "Fast, composable, unstyled command menu for Phlex.") - - Heading(level: 2) { "Usage" } - - render Docs::VisualCodeExample.new(title: "Example", context: self) do - <<~RUBY - CommandDialog do - CommandDialogTrigger do - Button(variant: "outline", class: 'w-56 pr-2 pl-3 justify-between') do - div(class: "flex items-center space-x-1") do - search_icon - span(class: "text-muted-foreground font-normal") do - plain "Search" - end - end - ShortcutKey do - span(class: "text-xs") { "⌘" } - plain "K" - end - end - end - CommandDialogContent do - Command do - CommandInput(placeholder: "Type a command or search...") - CommandEmpty { "No results found." } - CommandList do - CommandGroup(title: "Components") do - components_list.each do |component| - CommandItem(value: component[:name], href: component[:path]) do - default_icon - plain component[:name] - end - end - end - CommandGroup(title: "Settings") do - settings_list.each do |setting| - CommandItem(value: setting[:name], href: setting[:path]) do - default_icon - plain setting[:name] - end - end - end - end - end - end - end - RUBY - end - - render Docs::VisualCodeExample.new(title: "With keybinding", context: self) do - <<~RUBY - CommandDialog do - CommandDialogTrigger(keybindings: ['keydown.ctrl+j@window', 'keydown.meta+j@window']) do - p(class: "text-sm text-muted-foreground") do - span(class: 'mr-1') { "Press" } - ShortcutKey do - span(class: "text-xs") { "⌘" } - plain "J" - end - end - end - CommandDialogContent do - Command do - CommandInput(placeholder: "Type a command or search...") - CommandEmpty { "No results found." } - CommandList do - CommandGroup(title: "Components") do - components_list.each do |component| - CommandItem(value: component[:name], href: component[:path]) do - default_icon - plain component[:name] - end - end - end - CommandGroup(title: "Settings") do - settings_list.each do |setting| - CommandItem(value: setting[:name], href: setting[:path]) do - default_icon - plain setting[:name] - end - end - end - end - end - end - end - RUBY - end - - render Docs::ComponentsTable.new(component_references(component, Docs::VisualCodeExample.collected_code), component_files(component)) - end - end - - private - - def search_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - viewbox: "0 0 20 20", - fill: "currentColor", - class: "w-4 h-4 mr-1.5" - ) do |s| - s.path( - fill_rule: "evenodd", - d: - "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z", - clip_rule: "evenodd" - ) - end - end - - def default_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - viewbox: "0 0 24 24", - fill: "currentColor", - class: "w-5 h-5" - ) do |s| - s.path( - fill_rule: "evenodd", - d: - "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z", - clip_rule: "evenodd" - ) - end - end - - def components_list - [ - {name: "Accordion", path: helpers.docs_accordion_path}, - {name: "Alert", path: helpers.docs_alert_path}, - {name: "Alert Dialog", path: helpers.docs_alert_dialog_path}, - {name: "Aspect Ratio", path: helpers.docs_aspect_ratio_path}, - {name: "Avatar", path: helpers.docs_avatar_path}, - {name: "Badge", path: helpers.docs_badge_path} - ] - end - - def settings_list - [ - {name: "Profile", path: "#"}, - {name: "Mail", path: "#"}, - {name: "Settings", path: "#"} - ] - end -end diff --git a/app/views/docs/context_menu_view.rb b/app/views/docs/context_menu.rb similarity index 97% rename from app/views/docs/context_menu_view.rb rename to app/views/docs/context_menu.rb index 280d82cf..37b4a496 100644 --- a/app/views/docs/context_menu_view.rb +++ b/app/views/docs/context_menu.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::ContextMenuView < ApplicationView +class Views::Docs::ContextMenu < Views::Application + def page_title = "Context_menu" + def view_template component = "ContextMenu" div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do diff --git a/app/views/docs/date_picker_view.rb b/app/views/docs/date_picker.rb similarity index 90% rename from app/views/docs/date_picker_view.rb rename to app/views/docs/date_picker.rb index b5eb72e6..ecaa10c3 100644 --- a/app/views/docs/date_picker_view.rb +++ b/app/views/docs/date_picker.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::DatePickerView < ApplicationView +class Views::Docs::DatePicker < Views::Application + def page_title = "Date_picker" + def view_template component = "Date Picker" @@ -16,7 +18,7 @@ def view_template PopoverTrigger(class: 'w-full') do div(class: 'grid w-full max-w-sm items-center gap-1.5') do label(for: "date") { "Select a date" } - Input(type: 'string', placeholder: "Select a date", class: 'rounded-md border shadow', id: 'date', data_controller: 'input') + Input(type: 'string', placeholder: "Select a date", class: 'rounded-md border shadow', id: 'date', data_controller: 'rbui--calendar_input') end end PopoverContent do diff --git a/app/views/docs/dialog_view.rb b/app/views/docs/dialog.rb similarity index 98% rename from app/views/docs/dialog_view.rb rename to app/views/docs/dialog.rb index 84db36e4..8cb7f4b2 100644 --- a/app/views/docs/dialog_view.rb +++ b/app/views/docs/dialog.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::DialogView < ApplicationView +class Views::Docs::Dialog < Views::Application + def page_title = "Dialog" + def view_template component = "Dialog" diff --git a/app/views/docs/dropdown_menu_view.rb b/app/views/docs/dropdown_menu.rb similarity index 99% rename from app/views/docs/dropdown_menu_view.rb rename to app/views/docs/dropdown_menu.rb index f34b289e..3be6d733 100644 --- a/app/views/docs/dropdown_menu_view.rb +++ b/app/views/docs/dropdown_menu.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::DropdownMenuView < ApplicationView +class Views::Docs::DropdownMenu < Views::Application + def page_title = "Dropdown_menu" + def view_template component = "DropdownMenu" div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do diff --git a/app/views/docs/form_view.rb b/app/views/docs/form.rb similarity index 98% rename from app/views/docs/form_view.rb rename to app/views/docs/form.rb index f9332853..66331cc4 100644 --- a/app/views/docs/form_view.rb +++ b/app/views/docs/form.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::FormView < ApplicationView +class Views::Docs::Form < Views::Application + def page_title = "Form" + def view_template component = "Form" div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do diff --git a/app/views/docs/getting_started/customizing_components_view.rb b/app/views/docs/getting_started/customizing_components.rb similarity index 98% rename from app/views/docs/getting_started/customizing_components_view.rb rename to app/views/docs/getting_started/customizing_components.rb index 851f2ef3..4f2eb697 100644 --- a/app/views/docs/getting_started/customizing_components_view.rb +++ b/app/views/docs/getting_started/customizing_components.rb @@ -1,6 +1,10 @@ # frozen_string_literal: true -class Docs::GettingStarted::CustomizingComponentsView < ApplicationView +class Views::Docs::GettingStarted::CustomizingComponents < Views::Application + def page_title = "Customizing components" + + def layout = Layouts::Docs + def view_template div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do render Docs::Header.new(title: "Customizing components", description: "When theming doesn't suffice, RBUI allows you to tailor the components to your specific needs.") diff --git a/app/views/docs/getting_started/dark_mode_view.rb b/app/views/docs/getting_started/dark_mode.rb similarity index 95% rename from app/views/docs/getting_started/dark_mode_view.rb rename to app/views/docs/getting_started/dark_mode.rb index a0b056ff..2cfc3497 100644 --- a/app/views/docs/getting_started/dark_mode_view.rb +++ b/app/views/docs/getting_started/dark_mode.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::GettingStarted::DarkModeView < ApplicationView +class Views::Docs::GettingStarted::DarkMode < Views::Application + def page_title = "Dark mode" + def view_template div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do render Docs::Header.new(title: "Dark mode", description: "How to use dark mode in your application") @@ -46,7 +48,7 @@ def view_template end div(class: "pt-4") do - render Docs::VisualCodeExample.new(title: "Toggle component", context: self) do + render Components::Docs::VisualCodeExample.new(title: "Toggle component", context: self) do <<~RUBY ThemeToggle do |toggle| toggle.light_mode do diff --git a/app/views/docs/getting_started/installation_view.rb b/app/views/docs/getting_started/installation.rb similarity index 91% rename from app/views/docs/getting_started/installation_view.rb rename to app/views/docs/getting_started/installation.rb index cf0d98c2..fc8dee4e 100644 --- a/app/views/docs/getting_started/installation_view.rb +++ b/app/views/docs/getting_started/installation.rb @@ -1,8 +1,12 @@ # frozen_string_literal: true -class Docs::GettingStarted::InstallationView < ApplicationView +class Views::Docs::GettingStarted::Installation < Views::Application include Phlex::DeferredRender + def page_title = "Installation" + + def layout = Layouts::Docs + def view_template div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do render Docs::Header.new(title: "Installation", description: "How to install dependencies and structure your app.") @@ -17,7 +21,7 @@ def view_template def framework_card(title:, link:, &block) a(href: link) do - Card(class: "flex flex-col items-center gap-y-4 p-6 py-10 hover:bg-accent hover:text-accent-foreground transition-colors duration-200 ease-in-out") do + RBUI.Card(class: "flex flex-col items-center gap-y-4 p-6 py-10 hover:bg-accent hover:text-accent-foreground transition-colors duration-200 ease-in-out") do block.call p(class: "text-lg font-medium") { title } end diff --git a/app/views/docs/getting_started/introduction_view.rb b/app/views/docs/getting_started/introduction.rb similarity index 81% rename from app/views/docs/getting_started/introduction_view.rb rename to app/views/docs/getting_started/introduction.rb index dd530e6b..f29fa230 100644 --- a/app/views/docs/getting_started/introduction_view.rb +++ b/app/views/docs/getting_started/introduction.rb @@ -1,19 +1,21 @@ # frozen_string_literal: true -class Docs::GettingStarted::IntroductionView < ApplicationView +class Views::Docs::GettingStarted::Introduction < Views::Application + def page_title = "Introduction" + def view_template div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do - render Docs::Header.new(title: "Introduction", description: "Reusable UI components for Ruby developers") + render Components::Docs::Header.new(title: "Introduction", description: "Reusable UI components for Ruby developers") div(class: "space-y-4") do Heading(level: 2) { "About" } Text do plain "RBUI is a UI framework for Ruby developers, built on top of " - InlineLink(href: "http://phlex.fun") { "Phlex" } + RBUI.InlineLink(href: "http://phlex.fun") { "Phlex" } plain ", " - InlineLink(href: "https://tailwindcss.com") { "TailwindCSS" } + RBUI.InlineLink(href: "https://tailwindcss.com") { "TailwindCSS" } plain " and " - InlineLink(href: "https://stimulus.hotwire.dev") { "Stimulus JS" } + RBUI.InlineLink(href: "https://stimulus.hotwire.dev") { "Stimulus JS" } plain ". It provides a set of components that are easy to use, and easy to customize." end end @@ -41,9 +43,9 @@ def view_template Heading(level: 2) { "Why I built RBUI" } Text do plain "Many Ruby developers are familiar with " - InlineLink(href: "https://rubyonrails.org") { "Rails" } + RBUI.InlineLink(href: "https://rubyonrails.org") { "Rails" } plain ", and the " - InlineLink(href: "https://guides.rubyonrails.org/layouts_and_rendering.html") { "convention over configuration" } + RBUI.InlineLink(href: "https://guides.rubyonrails.org/layouts_and_rendering.html") { "convention over configuration" } plain " approach it takes. RBUI is built on the same principles, providing a set of components that are easy to use, and easy to customize." end Text do @@ -77,9 +79,9 @@ def view_template end Text do plain "As an example, if you want to render a " - InlineCode { "

Phlex. Same same, but different.

" } + RBUI.InlineCode { "

Phlex. Same same, but different.

" } plain " element, you can do it like this " - InlineCode { "p(class: 'text-sm font-muted-foreground') { 'Phlex. Same same, but different.' }" } + RBUI.InlineCode { "p(class: 'text-sm font-muted-foreground') { 'Phlex. Same same, but different.' }" } plain "." end Text do @@ -94,23 +96,23 @@ def view_template Text { "I'd like to thank the following projects and people for helping me build RBUI" } Components.TypographyList do Components.TypographyListItem do - InlineLink(href: "https://github.com/joeldrapper") { "Joel Drapper" } + RBUI.InlineLink(href: "https://github.com/joeldrapper") { "Joel Drapper" } plain " - Thanks for creating Phlex, and for your support and advice." end Components.TypographyListItem do - InlineLink(href: "https://phlex.fun") { "Phlex" } + RBUI.InlineLink(href: "https://phlex.fun") { "Phlex" } plain " - The foundation of RBUI." end Components.TypographyListItem do - InlineLink(href: "https://stimulus.hotwired.dev") { "Stimulus JS" } + RBUI.InlineLink(href: "https://stimulus.hotwired.dev") { "Stimulus JS" } plain " - A quicker way to write JavaScript." end Components.TypographyListItem do - InlineLink(href: "http://tailwindcss.com") { "TailwindCSS" } + RBUI.InlineLink(href: "http://tailwindcss.com") { "TailwindCSS" } plain " - I wouldn't build without it." end Components.TypographyListItem do - InlineLink(href: "https://twitter.com/george_kettle") { "My Twitter followers" } + RBUI.InlineLink(href: "https://twitter.com/george_kettle") { "My Twitter followers" } plain " - Thanks for all the ideas, feedback and support." end end diff --git a/app/views/docs/getting_started/theming_view.rb b/app/views/docs/getting_started/theming.rb similarity index 99% rename from app/views/docs/getting_started/theming_view.rb rename to app/views/docs/getting_started/theming.rb index 3f8abbc8..cbce7d72 100644 --- a/app/views/docs/getting_started/theming_view.rb +++ b/app/views/docs/getting_started/theming.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::GettingStarted::ThemingView < ApplicationView +class Views::Docs::GettingStarted::Theming < Views::Application + def page_title = "Theming" + def view_template div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do render Docs::Header.new(title: "Theming", description: "Using CSS variables for theming.") diff --git a/app/views/docs/hover_card_view.rb b/app/views/docs/hover_card.rb similarity index 98% rename from app/views/docs/hover_card_view.rb rename to app/views/docs/hover_card.rb index 0fa80570..3e78ea5e 100644 --- a/app/views/docs/hover_card_view.rb +++ b/app/views/docs/hover_card.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::HoverCardView < ApplicationView +class Views::Docs::HoverCard < Views::Application + def page_title = "Hover_card" + def view_template component = "HoverCard" diff --git a/app/views/docs/input_view.rb b/app/views/docs/input.rb similarity index 96% rename from app/views/docs/input_view.rb rename to app/views/docs/input.rb index 7c355c35..2227b243 100644 --- a/app/views/docs/input_view.rb +++ b/app/views/docs/input.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::InputView < ApplicationView +class Views::Docs::Input < Views::Application + def page_title = "Input" + def view_template component = "Input" diff --git a/app/views/docs/installation/rails_bundler_view.rb b/app/views/docs/installation/rails_bundler.rb similarity index 97% rename from app/views/docs/installation/rails_bundler_view.rb rename to app/views/docs/installation/rails_bundler.rb index 93c5bee2..a0904b35 100644 --- a/app/views/docs/installation/rails_bundler_view.rb +++ b/app/views/docs/installation/rails_bundler.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::Installation::RailsBundlerView < ApplicationView +class Views::Docs::Installation::RailsBundler < Views::Application + def page_title = "Rails - JS Bundler" + def initialize @phlex_rails_link = "https://www.phlex.fun/rails/" @phlex_ui_pro_private_key = ENV["BUNDLE_PHLEXUI__FURY__SITE"] @@ -84,7 +86,7 @@ def view_template plain " file" end code = <<~CODE - class ApplicationComponent < Phlex::HTML + class Components::Base < Phlex::HTML include RBUI end CODE diff --git a/app/views/docs/installation/rails_importmaps_view.rb b/app/views/docs/installation/rails_importmaps.rb similarity index 97% rename from app/views/docs/installation/rails_importmaps_view.rb rename to app/views/docs/installation/rails_importmaps.rb index 37bfd031..21770120 100644 --- a/app/views/docs/installation/rails_importmaps_view.rb +++ b/app/views/docs/installation/rails_importmaps.rb @@ -1,6 +1,10 @@ # frozen_string_literal: true -class Docs::Installation::RailsImportmapsView < ApplicationView +class Views::Docs::Installation::RailsImportmaps < Views::Application + include RBUI + + def page_title = "Rails - Importmaps" + def initialize @phlex_rails_link = "https://www.phlex.fun/rails/" @phlex_ui_pro_private_key = ENV["BUNDLE_PHLEXUI__FURY__SITE"] @@ -90,7 +94,7 @@ def view_template plain " file" end code = <<~CODE - class ApplicationComponent < Phlex::HTML + class Components::Base < Phlex::HTML include RBUI end CODE diff --git a/app/views/docs/link_view.rb b/app/views/docs/link.rb similarity index 62% rename from app/views/docs/link_view.rb rename to app/views/docs/link.rb index 04f58066..877737c4 100644 --- a/app/views/docs/link_view.rb +++ b/app/views/docs/link.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::LinkView < ApplicationView +class Views::Docs::Link < Views::Application + def page_title = "Link" + def view_template component = "Link" @@ -36,7 +38,19 @@ def view_template render Docs::VisualCodeExample.new(title: "Icon", description: "This is the icon variant of a Link", context: self) do <<~RUBY Link(href: "#", variant: :outline, icon: true) do - chevron_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + viewbox: "0 0 20 20", + fill: "currentColor", + class: "w-5 h-5" + ) do |s| + s.path( + fill_rule: "evenodd", + d: + "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z", + clip_rule: "evenodd" + ) + end end RUBY end @@ -44,7 +58,22 @@ def view_template render Docs::VisualCodeExample.new(title: "With Icon", description: "This is the primary variant of a Link with an icon", context: self) do <<~RUBY Link(href: "#", variant: :primary) do - email_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + fill: "none", + viewbox: "0 0 24 24", + stroke_width: "1.5", + stroke: "currentColor", + class: "w-4 h-4 mr-2" + ) do |s| + s.path( + stroke_linecap: "round", + stroke_linejoin: "round", + d: + "M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" + ) + end + # email_icon span { "Login with Email" } end RUBY @@ -59,40 +88,4 @@ def view_template render Docs::ComponentsTable.new(component_references(component, Docs::VisualCodeExample.collected_code), component_files(component)) end end - - private - - def chevron_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - viewbox: "0 0 20 20", - fill: "currentColor", - class: "w-5 h-5" - ) do |s| - s.path( - fill_rule: "evenodd", - d: - "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z", - clip_rule: "evenodd" - ) - end - end - - def email_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - fill: "none", - viewbox: "0 0 24 24", - stroke_width: "1.5", - stroke: "currentColor", - class: "w-4 h-4 mr-2" - ) do |s| - s.path( - stroke_linecap: "round", - stroke_linejoin: "round", - d: - "M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" - ) - end - end end diff --git a/app/views/docs/pagination.rb b/app/views/docs/pagination.rb new file mode 100644 index 00000000..b77c2282 --- /dev/null +++ b/app/views/docs/pagination.rb @@ -0,0 +1,116 @@ +# frozen_string_literal: true + +class Views::Docs::Pagination < Views::Application + def page_title = "Pagination" + + def view_template + component = "Pagination" + + div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do + render Docs::Header.new(title: "Pagination", description: "Pagination with page navigation, next and previous links.") + + Heading(level: 2) { "Usage" } + + render Docs::VisualCodeExample.new(title: "Example", description: "This is the default appearance of a Pagination", context: self) do + <<~RUBY + Pagination do + PaginationContent do + PaginationItem(href: "#") do + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewbox: "0 0 24 24", + stroke_width: "1.5", + stroke: "currentColor", + fill: "none", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "h-4 w-4" + ) do |s| + s.path(stroke: "none", d: "M0 0h24v24H0z", fill: "none") + s.path(d: "M11 7l-5 5l5 5") + s.path(d: "M17 7l-5 5l5 5") + end + + # chevrons_left_icon + plain "First" + end + PaginationItem(href: "#") do + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewbox: "0 0 24 24", + stroke_width: "1.5", + stroke: "currentColor", + fill: "none", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "h-4 w-4" + ) do |s| + s.path(stroke: "none", d: "M0 0h24v24H0z", fill: "none") + s.path(d: "M15 6l-6 6l6 6") + end + + # chevron_left_icon + plain "Prev" + end + + PaginationEllipsis + + PaginationItem(href: "#") { "4" } + PaginationItem(href: "#", active: true) { "5" } + PaginationItem(href: "#") { "6" } + + PaginationEllipsis + + PaginationItem(href: "#") do + plain "Next" + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewbox: "0 0 24 24", + stroke_width: "1.5", + stroke: "currentColor", + fill: "none", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "h-4 w-4" + ) do |s| + s.path(stroke: "none", d: "M0 0h24v24H0z", fill: "none") + s.path(d: "M9 6l6 6l-6 6") + end + # chevron_right_icon + end + PaginationItem(href: "#") do + plain "Last" + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewbox: "0 0 24 24", + stroke_width: "1.5", + stroke: "currentColor", + fill: "none", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "h-4 w-4" + ) do |s| + s.path(stroke: "none", d: "M0 0h24v24H0z", fill: "none") + s.path(d: "M7 7l5 5l-5 5") + s.path(d: "M13 7l5 5l-5 5") + end + + # chevrons_right_icon + end + end + end + RUBY + end + + render Docs::ComponentsTable.new(component_references(component, Docs::VisualCodeExample.collected_code), component_files(component)) + end + end +end diff --git a/app/views/docs/pagination_view.rb b/app/views/docs/pagination_view.rb deleted file mode 100644 index 990fce6f..00000000 --- a/app/views/docs/pagination_view.rb +++ /dev/null @@ -1,125 +0,0 @@ -# frozen_string_literal: true - -class Docs::PaginationView < ApplicationView - def view_template - component = "Pagination" - - div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do - render Docs::Header.new(title: "Pagination", description: "Pagination with page navigation, next and previous links.") - - Heading(level: 2) { "Usage" } - - render Docs::VisualCodeExample.new(title: "Example", description: "This is the default appearance of a Pagination", context: self) do - <<~RUBY - Pagination do - PaginationContent do - PaginationItem(href: "#") do - chevrons_left_icon - plain "First" - end - PaginationItem(href: "#") do - chevron_left_icon - plain "Prev" - end - - PaginationEllipsis - - PaginationItem(href: "#") { "4" } - PaginationItem(href: "#", active: true) { "5" } - PaginationItem(href: "#") { "6" } - - PaginationEllipsis - - PaginationItem(href: "#") do - plain "Next" - chevron_right_icon - end - PaginationItem(href: "#") do - plain "Last" - chevrons_right_icon - end - end - end - RUBY - end - - render Docs::ComponentsTable.new(component_references(component, Docs::VisualCodeExample.collected_code), component_files(component)) - end - end - - private - - def chevrons_left_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - width: "24", - height: "24", - viewbox: "0 0 24 24", - stroke_width: "1.5", - stroke: "currentColor", - fill: "none", - stroke_linecap: "round", - stroke_linejoin: "round", - class: "h-4 w-4" - ) do |s| - s.path(stroke: "none", d: "M0 0h24v24H0z", fill: "none") - s.path(d: "M11 7l-5 5l5 5") - s.path(d: "M17 7l-5 5l5 5") - end - end - - def chevron_left_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - width: "24", - height: "24", - viewbox: "0 0 24 24", - stroke_width: "1.5", - stroke: "currentColor", - fill: "none", - stroke_linecap: "round", - stroke_linejoin: "round", - class: "h-4 w-4" - ) do |s| - s.path(stroke: "none", d: "M0 0h24v24H0z", fill: "none") - s.path(d: "M15 6l-6 6l6 6") - end - end - - def chevrons_right_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - width: "24", - height: "24", - viewbox: "0 0 24 24", - stroke_width: "1.5", - stroke: "currentColor", - fill: "none", - stroke_linecap: "round", - stroke_linejoin: "round", - class: "h-4 w-4" - ) do |s| - s.path(stroke: "none", d: "M0 0h24v24H0z", fill: "none") - s.path(d: "M7 7l5 5l-5 5") - s.path(d: "M13 7l5 5l-5 5") - end - end - - def chevron_right_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - width: "24", - height: "24", - viewbox: "0 0 24 24", - stroke_width: "1.5", - stroke: "currentColor", - fill: "none", - stroke_linecap: "round", - stroke_linejoin: "round", - class: "h-4 w-4" - ) do |s| - s.path(stroke: "none", d: "M0 0h24v24H0z", fill: "none") - s.path(d: "M9 6l6 6l-6 6") - end - end -end diff --git a/app/views/docs/popover_view.rb b/app/views/docs/popover.rb similarity index 99% rename from app/views/docs/popover_view.rb rename to app/views/docs/popover.rb index 37dcb853..85d1afa3 100644 --- a/app/views/docs/popover_view.rb +++ b/app/views/docs/popover.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::PopoverView < ApplicationView +class Views::Docs::Popover < Views::Application + def page_title = "Popover" + def view_template component = "Popover" diff --git a/app/views/docs/select_view.rb b/app/views/docs/select.rb similarity index 94% rename from app/views/docs/select_view.rb rename to app/views/docs/select.rb index b92ffb16..7595f4fb 100644 --- a/app/views/docs/select_view.rb +++ b/app/views/docs/select.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::SelectView < ApplicationView +class Views::Docs::Select < Views::Application + def page_title = "Select" + def view_template component = "Select" diff --git a/app/views/docs/sheet_view.rb b/app/views/docs/sheet.rb similarity index 93% rename from app/views/docs/sheet_view.rb rename to app/views/docs/sheet.rb index 072a4ad6..07d2c6ff 100644 --- a/app/views/docs/sheet_view.rb +++ b/app/views/docs/sheet.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::SheetView < ApplicationView +class Views::Docs::Sheet < Views::Application + def page_title = "Sheet" + def view_template component = "Sheet" @@ -44,7 +46,7 @@ def view_template SheetTrigger do Button(variant: :outline, class: 'w-full justify-center') { :top } end - SheetContent(side: :top, class: tokens(-> { [:left, :right].include?(:top) } => "sm:max-w-sm")) do + SheetContent(side: :top, class: [("sm:max-w-sm" if [:left, :right].include?(:top)) ]) do SheetHeader do SheetTitle { "Edit profile" } SheetDescription { "Make changes to your profile here. Click save when you're done." } diff --git a/app/views/docs/shortcut_key_view.rb b/app/views/docs/shortcut_key.rb similarity index 91% rename from app/views/docs/shortcut_key_view.rb rename to app/views/docs/shortcut_key.rb index 221c1142..d251bc89 100644 --- a/app/views/docs/shortcut_key_view.rb +++ b/app/views/docs/shortcut_key.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::ShortcutKeyView < ApplicationView +class Views::Docs::ShortcutKey < Views::Application + def page_title = "Shortcut_key" + def view_template component = "ShortcutKey" diff --git a/app/views/docs/table.rb b/app/views/docs/table.rb new file mode 100644 index 00000000..26d8e926 --- /dev/null +++ b/app/views/docs/table.rb @@ -0,0 +1,131 @@ +# frozen_string_literal: true + +class Views::Docs::Table < Views::Application + def page_title = "Table" + + def view_template + component = "Table" + + div(class: "max-w-2xl mx-auto w-full py-10 space-y-8") do + render Docs::Header.new(title: "Table", description: "A responsive table component.") + + Heading(level: 2) { "Usage" } + + render Docs::VisualCodeExample.new(title: "Invoice Example", context: self) do + <<~RUBY + Invoice = Struct.new(:identifier, :status, :method, :amount, keyword_init: true) + + invoices = [ + Invoice.new(identifier: "INV-0001", status: "Active", method: "Credit Card", amount: 100), + Invoice.new(identifier: "INV-0002", status: "Active", method: "Bank Transfer", amount: 230), + Invoice.new(identifier: "INV-0003", status: "Pending", method: "PayPal", amount: 350), + Invoice.new(identifier: "INV-0004", status: "Inactive", method: "Credit Card", amount: 100) + ] + + def render_status_badge(status) + case status.downcase + when "active" + Badge(variant: :success, size: :sm) { status } + when "inactive" + Badge(variant: :destructive, size: :sm) { status } + when "pending" + Badge(variant: :warning, size: :sm) { status } + end + end + + def format_amount(amount) + "$" + amount.to_s + ".00" + end + + Table do + TableCaption { "Employees at Acme inc." } + TableHeader do + TableRow do + TableHead { "Name" } + TableHead { "Email" } + TableHead { "Status" } + TableHead(class: "text-right") { "Role" } + end + end + TableBody do + invoices.each do |invoice| + TableRow do + TableCell(class: 'font-medium') { invoice.identifier } + TableCell { render_status_badge(invoice.status) } + TableCell { invoice.method } + TableCell(class: "text-right") { format_amount(invoice.amount) } + end + end + end + TableFooter do + TableRow do + TableHead(class: "font-medium", colspan: 3) { "Total" } + TableHead(class: "font-medium text-right") { format_amount(invoices.sum(&:amount)) } + end + end + end + RUBY + end + + render Docs::VisualCodeExample.new(title: "Users Example", context: self) do + <<~RUBY + User = Struct.new(:avatar_url, :name, :username, :commits, :github_url, keyword_init: true) + + users = [ + User.new(avatar_url: "https://avatars.githubusercontent.com/u/246692?v=4", name: "Joel Drapper", username: "joeldrapper", commits: 404), + User.new(avatar_url: "https://avatars.githubusercontent.com/u/33979976?v=4", name: "Alexandre Ruban", username: "alexandreruban", commits: 16), + User.new(avatar_url: "https://avatars.githubusercontent.com/u/77887?v=4", name: "Will Cosgrove", username: "willcosgrove", commits: 12), + User.new(avatar_url: "https://avatars.githubusercontent.com/u/3025661?v=4", name: "Stephann V.", username: "stephannv", commits: 8), + User.new(avatar_url: "https://avatars.githubusercontent.com/u/6411752?v=4", name: "Marco Roth", username: "marcoroth", commits: 8) + ] + + def format_amount(amount) + "$" + amount.to_s + ".00" + end + + def github_link(user) + "https://github.com/" + user.username + end + + Table do + TableCaption { "Top contributors" } + TableHeader do + TableRow do + TableHead { "Name" } + TableHead { "Commits" } + TableHead(class: "text-right") { "Links" } + end + end + TableBody do + users.each do |user| + TableRow do + TableCell(class: 'font-medium') do + Avatar do + AvatarImage(src: user.avatar_url, alt: "joeldrapper") + AvatarFallback { "JD" } + end + end + TableCell { user.commits } + TableCell(class: "text-right") do + Link(href: github_link(user), variant: :outline, size: :sm) do + svg(viewbox: "0 0 438.549 438.549", class: "h-4 w-4") do |s| + s.path( + fill: "currentColor", + d: + "M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z" + ) + end + + span(class: 'ml-2') { "See profile" } + end + end + end + end + end + end + RUBY + end + render Docs::ComponentsTable.new(component_references(component, Docs::VisualCodeExample.collected_code), component_files(component)) + end + end +end diff --git a/app/views/docs/table_view.rb b/app/views/docs/table_view.rb deleted file mode 100644 index e8c767c0..00000000 --- a/app/views/docs/table_view.rb +++ /dev/null @@ -1,100 +0,0 @@ -# frozen_string_literal: true - -class Docs::TableView < ApplicationView - Invoice = Struct.new(:identifier, :status, :method, :amount, keyword_init: true) - User = Struct.new(:avatar_url, :name, :username, :commits, :github_url, keyword_init: true) - - def view_template - component = "Table" - - div(class: "max-w-2xl mx-auto w-full py-10 space-y-8") do - render Docs::Header.new(title: "Table", description: "A responsive table component.") - - Heading(level: 2) { "Usage" } - - render Docs::VisualCodeExample.new(title: "Without builder", context: self) do - <<~RUBY - Table do - TableCaption { "Employees at Acme inc." } - TableHeader do - TableRow do - TableHead { "Name" } - TableHead { "Email" } - TableHead { "Status" } - TableHead(class: "text-right") { "Role" } - end - end - TableBody do - invoices.each do |invoice| - TableRow do - TableCell(class: 'font-medium') { invoice.identifier } - TableCell { render_status_badge(invoice.status) } - TableCell { invoice.method } - TableCell(class: "text-right") { format_amount(invoice.amount) } - end - end - end - TableFooter do - TableRow do - TableHead(class: "font-medium", colspan: 3) { "Total" } - TableHead(class: "font-medium text-right") { format_amount(invoices.sum(&:amount)) } - end - end - end - RUBY - end - - render Docs::ComponentsTable.new(component_references(component, Docs::VisualCodeExample.collected_code), component_files(component)) - end - end - - private - - def invoices - [ - Invoice.new(identifier: "INV-0001", status: "Active", method: "Credit Card", amount: 100), - Invoice.new(identifier: "INV-0002", status: "Active", method: "Bank Transfer", amount: 230), - Invoice.new(identifier: "INV-0003", status: "Pending", method: "PayPal", amount: 350), - Invoice.new(identifier: "INV-0004", status: "Inactive", method: "Credit Card", amount: 100) - ] - end - - def users - [ - User.new(avatar_url: "https://avatars.githubusercontent.com/u/246692?v=4", name: "Joel Drapper", username: "joeldrapper", commits: 404), - User.new(avatar_url: "https://avatars.githubusercontent.com/u/33979976?v=4", name: "Alexandre Ruban", username: "alexandreruban", commits: 16), - User.new(avatar_url: "https://avatars.githubusercontent.com/u/77887?v=4", name: "Will Cosgrove", username: "willcosgrove", commits: 12), - User.new(avatar_url: "https://avatars.githubusercontent.com/u/3025661?v=4", name: "Stephann V.", username: "stephannv", commits: 8), - User.new(avatar_url: "https://avatars.githubusercontent.com/u/6411752?v=4", name: "Marco Roth", username: "marcoroth", commits: 8) - ] - end - - def github_link(user) - "https://github.com/#{user.username}" - end - - def github_icon - svg(viewbox: "0 0 438.549 438.549", class: "h-4 w-4") do |s| - s.path( - fill: "currentColor", - d: - "M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z" - ) - end - end - - def format_amount(amount) - "$#{amount}.00" - end - - def render_status_badge(status) - case status.downcase - when "active" - Badge(variant: :success, size: :sm) { status } - when "inactive" - Badge(variant: :destructive, size: :sm) { status } - when "pending" - Badge(variant: :warning, size: :sm) { status } - end - end -end diff --git a/app/views/docs/tabs.rb b/app/views/docs/tabs.rb new file mode 100644 index 00000000..099c929f --- /dev/null +++ b/app/views/docs/tabs.rb @@ -0,0 +1,154 @@ +# frozen_string_literal: true + +class Views::Docs::Tabs < Views::Application + def page_title = "Tabs" + + def view_template + component = "Tabs" + + div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do + render Docs::Header.new(title: "Tabs", description: "A set of layered sections of content—known as tab panels—that are displayed one at a time.") + + Heading(level: 2) { "Usage" } + + render Docs::VisualCodeExample.new(title: "Example", context: self) do + <<~RUBY + Tabs(default_value: "account", class: 'w-96') do + TabsList do + TabsTrigger(value: "account") { "Account" } + TabsTrigger(value: "password") { "Password" } + end + TabsContent(value: "account") do + div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do + div(class: "space-y-0") do + Text(size: "4", weight: "semibold") { "Account" } + Text(size: "2", class: "text-muted-foreground") { "Update your account details." } + end + end + end + TabsContent(value: "password") do + div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do + div do + Text(size: "4", weight: "semibold") { "Password" } + Text(size: "2", class: "text-muted-foreground") { "Change your password here. After saving, you'll be logged out." } + end + end + end + end + RUBY + end + + render Docs::VisualCodeExample.new(title: "Full width", context: self) do + <<~RUBY + Tabs(default_value: "overview", class: 'w-96') do + TabsList(class: 'w-full grid grid-cols-2') do + TabsTrigger(value: "overview") do + svg( + xmlns: "http://www.w3.org/2000/svg", + fill: "none", + viewbox: "0 0 24 24", + stroke_width: "2", + stroke: "currentColor", + class: "w-4 h-4 text-muted-foreground" + ) do |s| + s.path( + stroke_linecap: "round", + stroke_linejoin: "round", + d: + "M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" + ) + end + span(class: 'ml-2') { "Overview" } + end + TabsTrigger(value: "repositories") do + svg( + xmlns: "http://www.w3.org/2000/svg", + fill: "none", + viewbox: "0 0 24 24", + stroke_width: "2", + stroke: "currentColor", + class: "w-4 h-4 text-muted-foreground" + ) do |s| + s.path( + stroke_linecap: "round", + stroke_linejoin: "round", + d: + "M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" + ) + end + span(class: 'ml-2') { "Repositories" } + end + end + TabsContent(value: "overview") do + div(class: "rounded-lg border p-6 bg-background text-foreground flex justify-between space-x-4") do + Avatar do + AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper") + AvatarFallback { "JD" } + end + div(class: "space-y-4") do + div do + Text(size: "4", weight: "semibold") { "Joel Drapper" } + Text(size: "2", class: "text-muted-foreground") { "Creator of Phlex Components. Ruby on Rails developer." } + end + Link(href: "https://github.com/joeldrapper", variant: :outline, size: :sm) do + svg(viewbox: "0 0 438.549 438.549", class: "h-4 w-4") do |s| + s.path( + fill: "currentColor", + d: + "M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z" + ) + end + span(class: 'ml-2') { "View profile" } + end + end + end + end + TabsContent(value: "repositories") do + div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do + Repo = Struct.new(:github_url, :name, :stars, :version, keyword_init: true) + + repositories = [ + Repo.new(github_url: "https://github.com/phlex-ruby/phlex", name: "phlex", stars: 961, version: "v1.8.1"), + Repo.new(github_url: "https://github.com/joeldrapper/green_dots", name: "green_dots", stars: 40, version: "Pre Release"), + Repo.new(github_url: "https://github.com/joeldrapper/literal", name: "literal", stars: 96, version: "v0.1.0") + ] + repo = repositories.first + Link(href: repo.github_url, variant: :link, class: "pl-0") { repo.name } + Badge { repo.version } + end + end + end + RUBY + end + + render Docs::VisualCodeExample.new(title: "Change default value", context: self) do + <<~RUBY + Tabs(default: "password", class: 'w-96') do + TabsList do + TabsTrigger(value: "account") { "Account" } + TabsTrigger(value: "password") { "Password" } + end + TabsContent(value: "account") do + div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do + div(class: "space-y-0") do + Text(size: "4", weight: "semibold") { "Account" } + Text(size: "2", class: "text-muted-foreground") { "Update your account details." } + end + end + end + TabsContent(value: "password") do + div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do + div do + Text(size: "4", weight: "semibold") { "Password" } + Text(size: "2", class: "text-muted-foreground") { "Change your password here. After saving, you'll be logged out." } + end + end + end + end + RUBY + end + + render Docs::ComponentsTable.new(component_references(component, Docs::VisualCodeExample.collected_code), component_files(component)) + end + end +end diff --git a/app/views/docs/tabs_view.rb b/app/views/docs/tabs_view.rb deleted file mode 100644 index 470db2bd..00000000 --- a/app/views/docs/tabs_view.rb +++ /dev/null @@ -1,187 +0,0 @@ -# frozen_string_literal: true - -class Docs::TabsView < ApplicationView - Repo = Struct.new(:github_url, :name, :stars, :version, keyword_init: true) - - def view_template - component = "Tabs" - - div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do - render Docs::Header.new(title: "Tabs", description: "A set of layered sections of content—known as tab panels—that are displayed one at a time.") - - Heading(level: 2) { "Usage" } - - render Docs::VisualCodeExample.new(title: "Example", context: self) do - <<~RUBY - Tabs(default_value: "account", class: 'w-96') do - TabsList do - TabsTrigger(value: "account") { "Account" } - TabsTrigger(value: "password") { "Password" } - end - TabsContent(value: "account") do - div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do - div(class: "space-y-0") do - Text(size: "4", weight: "semibold") { "Account" } - Text(size: "2", class: "text-muted-foreground") { "Update your account details." } - end - end - end - TabsContent(value: "password") do - div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do - div do - Text(size: "4", weight: "semibold") { "Password" } - Text(size: "2", class: "text-muted-foreground") { "Change your password here. After saving, you'll be logged out." } - end - end - end - end - RUBY - end - - render Docs::VisualCodeExample.new(title: "Full width", context: self) do - <<~RUBY - Tabs(default_value: "overview", class: 'w-96') do - TabsList(class: 'w-full grid grid-cols-2') do - TabsTrigger(value: "overview") do - book_icon - span(class: 'ml-2') { "Overview" } - end - TabsTrigger(value: "repositories") do - repo_icon - span(class: 'ml-2') { "Repositories" } - end - end - TabsContent(value: "overview") do - div(class: "rounded-lg border p-6 bg-background text-foreground flex justify-between space-x-4") do - Avatar do - AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper") - AvatarFallback { "JD" } - end - div(class: "space-y-4") do - div do - Text(size: "4", weight: "semibold") { "Joel Drapper" } - Text(size: "2", class: "text-muted-foreground") { "Creator of Phlex Components. Ruby on Rails developer." } - end - Link(href: "https://github.com/joeldrapper", variant: :outline, size: :sm) do - github_icon - span(class: 'ml-2') { "View profile" } - end - end - end - end - TabsContent(value: "repositories") do - div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do - repo = repositories.first - Link(href: repo.github_url, variant: :link, class: "pl-0") { repo.name } - Badge { repo.version } - end - end - end - RUBY - end - - render Docs::VisualCodeExample.new(title: "Change default value", context: self) do - <<~RUBY - Tabs(default: "password", class: 'w-96') do - TabsList do - TabsTrigger(value: "account") { "Account" } - TabsTrigger(value: "password") { "Password" } - end - TabsContent(value: "account") do - div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do - div(class: "space-y-0") do - Text(size: "4", weight: "semibold") { "Account" } - Text(size: "2", class: "text-muted-foreground") { "Update your account details." } - end - end - end - TabsContent(value: "password") do - div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do - div do - Text(size: "4", weight: "semibold") { "Password" } - Text(size: "2", class: "text-muted-foreground") { "Change your password here. After saving, you'll be logged out." } - end - end - end - end - RUBY - end - - render Docs::ComponentsTable.new(component_references(component, Docs::VisualCodeExample.collected_code), component_files(component)) - end - end - - private - - def book_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - fill: "none", - viewbox: "0 0 24 24", - stroke_width: "2", - stroke: "currentColor", - class: "w-4 h-4 text-muted-foreground" - ) do |s| - s.path( - stroke_linecap: "round", - stroke_linejoin: "round", - d: - "M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" - ) - end - end - - def repo_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - fill: "none", - viewbox: "0 0 24 24", - stroke_width: "2", - stroke: "currentColor", - class: "w-4 h-4 text-muted-foreground" - ) do |s| - s.path( - stroke_linecap: "round", - stroke_linejoin: "round", - d: - "M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" - ) - end - end - - def github_icon - svg(viewbox: "0 0 438.549 438.549", class: "h-4 w-4") do |s| - s.path( - fill: "currentColor", - d: - "M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z" - ) - end - end - - def star_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - fill: "none", - viewbox: "0 0 24 24", - stroke_width: "2", - stroke: "currentColor", - class: "w-4 h-4 text-amber-500" - ) do |s| - s.path( - stroke_linecap: "round", - stroke_linejoin: "round", - d: - "M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" - ) - end - end - - def repositories - [ - Repo.new(github_url: "https://github.com/phlex-ruby/phlex", name: "phlex", stars: 961, version: "v1.8.1"), - Repo.new(github_url: "https://github.com/joeldrapper/green_dots", name: "green_dots", stars: 40, version: "Pre Release"), - Repo.new(github_url: "https://github.com/joeldrapper/literal", name: "literal", stars: 96, version: "v0.1.0") - ] - end -end diff --git a/app/views/docs/textarea_view.rb b/app/views/docs/textarea.rb similarity index 94% rename from app/views/docs/textarea_view.rb rename to app/views/docs/textarea.rb index 670ce9ba..747ed224 100644 --- a/app/views/docs/textarea_view.rb +++ b/app/views/docs/textarea.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::TextareaView < ApplicationView +class Views::Docs::Textarea < Views::Application + def page_title = "Textarea" + def view_template component = "Textarea" diff --git a/app/views/docs/theme_toggle_view.rb b/app/views/docs/theme_toggle.rb similarity index 97% rename from app/views/docs/theme_toggle_view.rb rename to app/views/docs/theme_toggle.rb index 11166d9e..17bd5ac2 100644 --- a/app/views/docs/theme_toggle_view.rb +++ b/app/views/docs/theme_toggle.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::ThemeToggleView < ApplicationView +class Views::Docs::ThemeToggle < Views::Application + def page_title = "Theme_toggle" + def view_template component = "ThemeToggle" diff --git a/app/views/docs/tooltip_view.rb b/app/views/docs/tooltip.rb similarity index 56% rename from app/views/docs/tooltip_view.rb rename to app/views/docs/tooltip.rb index 669b1131..8f73f0ab 100644 --- a/app/views/docs/tooltip_view.rb +++ b/app/views/docs/tooltip.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::TooltipView < ApplicationView +class Views::Docs::Tooltip < Views::Application + def page_title = "Tooltip" + def view_template component = "Tooltip" @@ -14,7 +16,21 @@ def view_template Tooltip do TooltipTrigger do Button(variant: :outline, icon: true) do - bookmark_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + fill: "none", + viewbox: "0 0 24 24", + stroke_width: "1.5", + stroke: "currentColor", + class: "w-4 h-4" + ) do |s| + s.path( + stroke_linecap: "round", + stroke_linejoin: "round", + d: + "M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" + ) + end end end TooltipContent do @@ -29,22 +45,4 @@ def view_template end private - - def bookmark_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - fill: "none", - viewbox: "0 0 24 24", - stroke_width: "1.5", - stroke: "currentColor", - class: "w-4 h-4" - ) do |s| - s.path( - stroke_linecap: "round", - stroke_linejoin: "round", - d: - "M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" - ) - end - end end diff --git a/app/views/docs/typography_view.rb b/app/views/docs/typography.rb similarity index 90% rename from app/views/docs/typography_view.rb rename to app/views/docs/typography.rb index c711c396..c87161a4 100644 --- a/app/views/docs/typography_view.rb +++ b/app/views/docs/typography.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Docs::TypographyView < ComponentView +class Views::Docs::Typography < Views::Application + def page_title = "Typography" + def view_template component = "Typography" @@ -52,20 +54,20 @@ def view_template render Docs::VisualCodeExample.new(title: "List", context: self) do <<~RUBY Components.TypographyList(items: [ - 'Phlex is fast', - 'Phlex is easy to use', - 'Phlex is awesome', - ]) + 'Phlex is fast', + 'Phlex is easy to use', + 'Phlex is awesome', + ]) RUBY end render Docs::VisualCodeExample.new(title: "Numbered List", context: self) do <<~RUBY Components.TypographyList(items: [ - 'Copy', - 'Paste', - 'Customize', - ], numbered: true) + 'Copy', + 'Paste', + 'Customize', + ], numbered: true) RUBY end diff --git a/app/views/errors/internal_server_error_view.rb b/app/views/errors/internal_server_error_view.rb index a3cb2b01..18eaf941 100644 --- a/app/views/errors/internal_server_error_view.rb +++ b/app/views/errors/internal_server_error_view.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -class Errors::InternalServerErrorView < ApplicationView +class Views::Errors::InternalServerErrorView < Components::Layouts::Errors def view_template Card(class: "p-8 space-y-6 flex flex-col items-center") do div(class: "space-y-2") do diff --git a/app/views/errors/not_found_view.rb b/app/views/errors/not_found_view.rb index 88612b0c..c3bb93a4 100644 --- a/app/views/errors/not_found_view.rb +++ b/app/views/errors/not_found_view.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Errors::NotFoundView < ApplicationView +class Views::Errors::NotFoundView < Components::Layouts::Errors + def page_title = "404 Not Found" + def view_template Card(class: "p-8 space-y-6 flex flex-col items-center") do div(class: "space-y-2") do diff --git a/app/views/home_view/card.rb b/app/views/home_view/card.rb index acad8ad5..905a236c 100644 --- a/app/views/home_view/card.rb +++ b/app/views/home_view/card.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -class HomeView::Card < ApplicationComponent +class Views::HomeView::Card < Components::Base include Phlex::DeferredRender def initialize(attributes = {}) @@ -23,7 +23,10 @@ def initialize(attributes = {}) end def view_template(&block) - div(**@attributes, class: tokens("relative flex flex-col p-6 md:p-10 rounded-2xl space-y-8 overflow-hidden", @attributes[:class], @color_classes[@color.to_sym])) do + div(**@attributes, class: [ + "relative flex flex-col p-6 md:p-10 rounded-2xl space-y-8", + "overflow-hidden", @attributes[:class], @color_classes[@color.to_sym] + ]) do if @icon div(&@icon) end diff --git a/app/views/home_view/steps.rb b/app/views/home_view/steps.rb index 9e116a9d..010d3328 100644 --- a/app/views/home_view/steps.rb +++ b/app/views/home_view/steps.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -class HomeView::Steps < ApplicationComponent +class Views::HomeView::Steps < Components::Base def initialize(attributes = {}) @attributes = attributes @steps = attributes.delete(:steps) || [] diff --git a/app/views/layout.rb b/app/views/layout.rb new file mode 100644 index 00000000..8205d364 --- /dev/null +++ b/app/views/layout.rb @@ -0,0 +1,17 @@ +# frozen_string_literal: true + +class Views::Layout < Components::Base + def around_template + doctype + + html do + render Shared::Head.new + + body do + render Components::Shared::Navbar.new + main(class: "relative") { yield } + render Components::Shared::Flashes.new(notice: helpers.flash[:notice], alert: helpers.flash[:alert]) + end + end + end +end diff --git a/app/views/layouts/docs_layout.rb b/app/views/layouts/docs.rb similarity index 89% rename from app/views/layouts/docs_layout.rb rename to app/views/layouts/docs.rb index 40c14b49..a58719df 100644 --- a/app/views/layouts/docs_layout.rb +++ b/app/views/layouts/docs.rb @@ -1,7 +1,7 @@ # frozen_string_literal: true -class DocsLayout < ApplicationView - include Phlex::Rails::Layout +class Views::Layouts::Docs < Views::Component + # include Phlex::Rails::Layout def view_template(&block) doctype diff --git a/app/views/layouts/pages_layout.rb b/app/views/layouts/pages_layout.rb index c4c71ec2..fc500928 100644 --- a/app/views/layouts/pages_layout.rb +++ b/app/views/layouts/pages_layout.rb @@ -1,7 +1,7 @@ # frozen_string_literal: true class PagesLayout < ApplicationView - include Phlex::Rails::Layout + # include Phlex::Rails::Layout def view_template(&block) doctype diff --git a/app/views/mailers/base_mailer.rb b/app/views/mailers/base_mailer.rb index 7a5a84e6..dd9c11f3 100644 --- a/app/views/mailers/base_mailer.rb +++ b/app/views/mailers/base_mailer.rb @@ -1,42 +1,40 @@ # Provides helper method for rendering CTA links -module Mailers - class BaseMailer < Phlex::HTML - private +class Views::Mailers::BaseMailer < Phlex::HTML + private - def para(&) - p(&) # See mailer_layout.rb to change styles - end + def para(&) + p(&) # See mailer_layout.rb to change styles + end - def subheader(&) - h2(&) # See mailer_layout.rb to change styles - end + def subheader(&) + h2(&) # See mailer_layout.rb to change styles + end - def cta(href:, &block) - table( - role: "presentation", - border: "0", - cellpadding: "0", - cellspacing: "0", - class: "btn btn-primary" - ) do - tbody do - tr do - td(align: "left") do - table( - role: "presentation", - border: "0", - cellpadding: "0", - cellspacing: "0" - ) do - tbody do - tr do - td do - a( - href: href, - target: "_blank" - ) { block.call } - end + def cta(href:, &block) + table( + role: "presentation", + border: "0", + cellpadding: "0", + cellspacing: "0", + class: "btn btn-primary" + ) do + tbody do + tr do + td(align: "left") do + table( + role: "presentation", + border: "0", + cellpadding: "0", + cellspacing: "0" + ) do + tbody do + tr do + td do + a( + href: href, + target: "_blank" + ) { block.call } end end end diff --git a/app/views/pages/home_view.rb b/app/views/pages/home_view.rb index 8e7fce6a..8857c547 100644 --- a/app/views/pages/home_view.rb +++ b/app/views/pages/home_view.rb @@ -1,8 +1,10 @@ # frozen_string_literal: true -class Pages::HomeView < ApplicationView +class Views::Pages::HomeView < Views::Component + def page_title = "Introduction" + def view_template - render HomeView::Banner.new do |banner| + render Components::Home::Banner.new do |banner| banner.cta do Link(variant: :outline, href: helpers.docs_accordion_path, class: "text-center justify-center") { "Browse Components" } Link(variant: :primary, href: helpers.docs_introduction_path, class: "text-center justify-center") do @@ -26,7 +28,7 @@ def view_template div(class: "overflow-hidden") do div(class: "relative z-10 container mx-auto max-w-5xl pt-16 lg:pt-16 py-24 lg:py-32 px-4") do div(class: "grid grid-cols-6 gap-4") do - render HomeView::Card.new(class: "col-span-6 sm:col-span-3 md:col-span-4", title: "Built for Speed", subtitle: "Dive into a world where your Rails UI development happens at light speed. Phlex is not just fast - it's blazing fast.", color: :secondary) do |card| + render Views::HomeView::Card.new(class: "col-span-6 sm:col-span-3 md:col-span-4", title: "Built for Speed", subtitle: "Dive into a world where your Rails UI development happens at light speed. Phlex is not just fast - it's blazing fast.", color: :secondary) do |card| card.icon do svg( xmlns: "http://www.w3.org/2000/svg", @@ -43,7 +45,7 @@ def view_template end end end - render HomeView::Card.new(class: "col-span-6 sm:col-span-3 md:col-span-2", color: :sky) do |card| + render Views::HomeView::Card.new(class: "col-span-6 sm:col-span-3 md:col-span-2", color: :sky) do |card| card.content do div(class: "flex flex-col items-center justify-center text-center space-y-4 h-full") do p(class: "text-6xl font-semibold") { "12x" } @@ -51,12 +53,12 @@ def view_template end end end - render HomeView::Card.new(class: "col-span-6", color: :card, title: "Speed Tests", subtitle: "Huge thanks to @KonnorRogers for running these tests") do |card| + render Views::HomeView::Card.new(class: "col-span-6", color: :card, title: "Speed Tests", subtitle: "Huge thanks to @KonnorRogers for running these tests") do |card| card.content do render_speed_tests end end - render HomeView::Card.new(class: "col-span-6 sm:col-span-3", title: "UI that... Wow!", subtitle: "Design stunning, streamlined, and customizable UIs that not only look great but sell your app without you lifting a finger.", color: :violet) do |card| + render Views::HomeView::Card.new(class: "col-span-6 sm:col-span-3", title: "UI that... Wow!", subtitle: "Design stunning, streamlined, and customizable UIs that not only look great but sell your app without you lifting a finger.", color: :violet) do |card| card.icon do svg( xmlns: "http://www.w3.org/2000/svg", @@ -73,7 +75,7 @@ def view_template end end end - render HomeView::Card.new(class: "col-span-6 sm:col-span-3", title: "Stay Organized", subtitle: "Say goodbye to clutter. With Phlex, your UI components are not only organized, but also easy to manage and track.", color: :secondary) do |card| + render Views::HomeView::Card.new(class: "col-span-6 sm:col-span-3", title: "Stay Organized", subtitle: "Say goodbye to clutter. With Phlex, your UI components are not only organized, but also easy to manage and track.", color: :secondary) do |card| card.icon do svg( xmlns: "http://www.w3.org/2000/svg", @@ -101,7 +103,7 @@ def view_template end end div(class: "relative col-span-6") do - render HomeView::Shapes.new(color: :violet, class: "hidden md:block absolute top-0 left-0 rotate-90 -translate-x-1/2 translate-y-full", size: :lg) + render Components::Home::Shapes.new(color: :violet, class: "hidden md:block absolute top-0 left-0 rotate-90 -translate-x-1/2 translate-y-full", size: :lg) div(class: "mx-auto max-w-lg py-28") do steps = [ { @@ -117,10 +119,10 @@ def view_template description: "Every component is built entirely out of Tailwind utility classes, so you can easily dive in and adjust anything you want to better fit your use case." } ] - render HomeView::Steps.new(steps: steps) + render Views::HomeView::Steps.new(steps: steps) end end - render HomeView::Card.new(class: "col-span-6 md:col-span-4", title: "Customer-Centric UX", subtitle: "Create an app experience your users will rave about. RBUI ensures that your user's journey is nothing less than memorable.", color: :pink) do |card| + render Views::HomeView::Card.new(class: "col-span-6 md:col-span-4", title: "Customer-Centric UX", subtitle: "Create an app experience your users will rave about. RBUI ensures that your user's journey is nothing less than memorable.", color: :pink) do |card| card.icon do svg( xmlns: "http://www.w3.org/2000/svg", @@ -135,7 +137,7 @@ def view_template end end end - render HomeView::Card.new(class: "col-span-6 md:col-span-2", title: "Completely Customisable", subtitle: "Have full control over the design of all components.", color: :amber) do |card| + render Views::HomeView::Card.new(class: "col-span-6 md:col-span-2", title: "Completely Customisable", subtitle: "Have full control over the design of all components.", color: :amber) do |card| card.icon do svg( xmlns: "http://www.w3.org/2000/svg", @@ -152,7 +154,7 @@ def view_template end end end - render HomeView::Card.new(class: "col-span-6 sm:col-span-3", title: "Minimal Dependencies", subtitle: "Keep your app lean and mean. With RBUI, we use custom built Stimulus.js controllers wherever possible - less package dependencies to worry about.", color: :secondary) do |card| + render Views::HomeView::Card.new(class: "col-span-6 sm:col-span-3", title: "Minimal Dependencies", subtitle: "Keep your app lean and mean. With RBUI, we use custom built Stimulus.js controllers wherever possible - less package dependencies to worry about.", color: :secondary) do |card| card.icon do svg( xmlns: "http://www.w3.org/2000/svg", @@ -167,7 +169,7 @@ def view_template end end end - render HomeView::Card.new(class: "col-span-6 sm:col-span-3", title: "Reuse with Ease", subtitle: "Avoid the hassle of constantly reconstructing components. With Phlex, once built, use them seamlessly as needed.", color: :lime) do |card| + render Views::HomeView::Card.new(class: "col-span-6 sm:col-span-3", title: "Reuse with Ease", subtitle: "Avoid the hassle of constantly reconstructing components. With Phlex, once built, use them seamlessly as needed.", color: :lime) do |card| card.icon do svg( xmlns: "http://www.w3.org/2000/svg", diff --git a/app/views/themes/copy_code.rb b/app/views/themes/copy_code.rb index 74250e88..6001b70c 100644 --- a/app/views/themes/copy_code.rb +++ b/app/views/themes/copy_code.rb @@ -1,27 +1,25 @@ # frozen_string_literal: true -module Themes - class CopyCode < ApplicationComponent - def initialize(theme:) - @theme = theme - end +class Views::Themes::CopyCode < Components::Base + def initialize(theme:) + @theme = theme + end - def view_template - style do - Theme::CSS.retrieve(@theme, with_directive: false) + def view_template + style do + Theme::CSS.retrieve(@theme, with_directive: false) + end + Sheet do + SheetTrigger do + Button(variant: :primary) { "Copy Code" } end - Sheet do - SheetTrigger do - Button(variant: :primary) { "Copy Code" } + SheetContent(class: "sm:max-w-md w-screen flex flex-col h-screen overflow-y-scroll") do + SheetHeader do + SheetTitle { "Theme" } + SheetDescription { "Copy and paste the following code into your CSS file." } end - SheetContent(class: "sm:max-w-md w-screen flex flex-col h-screen overflow-y-scroll") do - SheetHeader do - SheetTitle { "Theme" } - SheetDescription { "Copy and paste the following code into your CSS file." } - end - SheetMiddle(class: "flex-1 relative") do - Codeblock(Theme::CSS.retrieve(@theme, with_directive: true), syntax: :css, class: "h-full max-h-none") - end + SheetMiddle(class: "flex-1 relative") do + Codeblock(Theme::CSS.retrieve(@theme, with_directive: true), syntax: :css, class: "h-full max-h-none") end end end diff --git a/app/views/themes/customize_popover.rb b/app/views/themes/customize_popover.rb index 309713a6..8d7e665c 100644 --- a/app/views/themes/customize_popover.rb +++ b/app/views/themes/customize_popover.rb @@ -1,57 +1,58 @@ # frozen_string_literal: true -module Themes - class CustomizePopover < ApplicationComponent - def initialize(theme:) - @theme = theme - end +class Views::Themes::CustomizePopover < Components::Base + def initialize(theme:) + @theme = theme + end - def view_template - Popover(options: {trigger: "click", placement: "bottom-end"}) do - PopoverTrigger do - Button(variant: :outline) do - color_swatch_icon - plain "Customize Theme" - end + def view_template + Popover(options: {trigger: "click", placement: "bottom-end"}) do + PopoverTrigger do + Button(variant: :outline) do + color_swatch_icon + plain "Customize Theme" end - PopoverContent(class: "w-96 p-6") do - div(class: "space-y-0") do - Text(size: "4", weight: "semibold") { "Customize" } - Text(class: "text-muted-foreground") { "Choose how your app looks" } - end - div(class: "grid grid-cols-3 gap-2 mt-4") do - Theme::CSS.all_themes.each do |name, color_hash| - render_color_picker(name, color_hash, selected: name.to_s.downcase == @theme) - end + end + PopoverContent(class: "w-96 p-6") do + div(class: "space-y-0") do + Text(size: "4", weight: "semibold") { "Customize" } + Text(class: "text-muted-foreground") { "Choose how your app looks" } + end + div(class: "grid grid-cols-3 gap-2 mt-4") do + Theme::CSS.all_themes.each do |name, color_hash| + render_color_picker(name, color_hash, selected: name.to_s.downcase == @theme) end end end end + end - private + private - def render_color_picker(name, color_hash, selected: false) - Link(href: helpers.theme_path(name&.downcase), variant: :outline, class: tokens("!justify-start", -> { selected } => "ring-neutral-950 ring-1")) do - div(class: "w-4 h-4 rounded-full shrink-0 mr-2 ring-white dark:hidden", style: "background-color: hsl(#{color_hash[:root][:primary].split.join(",")})") do - end - div(class: "w-4 h-4 rounded-full shrink-0 mr-2 ring-white hidden dark:block", style: "background-color: hsl(#{color_hash[:dark][:primary].split.join(",")})") do - end - plain name&.capitalize + def render_color_picker(name, color_hash, selected: false) + Link(href: helpers.theme_path(name&.downcase), variant: :outline, class: [ + "!justify-start", + ("!bg-neutral-950 text-neutral-100" if selected) + ]) do + div(class: "w-4 h-4 rounded-full shrink-0 mr-2 ring-white dark:hidden", style: "background-color: hsl(#{color_hash[:root][:primary].split.join(",")})") do end + div(class: "w-4 h-4 rounded-full shrink-0 mr-2 ring-white hidden dark:block", style: "background-color: hsl(#{color_hash[:dark][:primary].split.join(",")})") do + end + plain name&.capitalize end + end - def color_swatch_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - fill: "currentColor", - viewbox: "0 0 256 256", - class: "w-5 h-5 shrink-0 mr-2 -ml-1" - ) do |s| - s.path( - d: - "M200.77,53.89A103.27,103.27,0,0,0,128,24h-1.07A104,104,0,0,0,24,128c0,43,26.58,79.06,69.36,94.17A32,32,0,0,0,136,192a16,16,0,0,1,16-16h46.21a31.81,31.81,0,0,0,31.2-24.88,104.43,104.43,0,0,0,2.59-24A103.28,103.28,0,0,0,200.77,53.89Zm13,93.71A15.89,15.89,0,0,1,198.21,160H152a32,32,0,0,0-32,32,16,16,0,0,1-21.31,15.07C62.49,194.3,40,164,40,128a88,88,0,0,1,87.09-88h.9a88.35,88.35,0,0,1,88,87.25A88.86,88.86,0,0,1,213.81,147.6ZM140,76a12,12,0,1,1-12-12A12,12,0,0,1,140,76ZM96,100A12,12,0,1,1,84,88,12,12,0,0,1,96,100Zm0,56a12,12,0,1,1-12-12A12,12,0,0,1,96,156Zm88-56a12,12,0,1,1-12-12A12,12,0,0,1,184,100Z" - ) - end + def color_swatch_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + fill: "currentColor", + viewbox: "0 0 256 256", + class: "w-5 h-5 shrink-0 mr-2 -ml-1" + ) do |s| + s.path( + d: + "M200.77,53.89A103.27,103.27,0,0,0,128,24h-1.07A104,104,0,0,0,24,128c0,43,26.58,79.06,69.36,94.17A32,32,0,0,0,136,192a16,16,0,0,1,16-16h46.21a31.81,31.81,0,0,0,31.2-24.88,104.43,104.43,0,0,0,2.59-24A103.28,103.28,0,0,0,200.77,53.89Zm13,93.71A15.89,15.89,0,0,1,198.21,160H152a32,32,0,0,0-32,32,16,16,0,0,1-21.31,15.07C62.49,194.3,40,164,40,128a88,88,0,0,1,87.09-88h.9a88.35,88.35,0,0,1,88,87.25A88.86,88.86,0,0,1,213.81,147.6ZM140,76a12,12,0,1,1-12-12A12,12,0,0,1,140,76ZM96,100A12,12,0,1,1,84,88,12,12,0,0,1,96,100Zm0,56a12,12,0,1,1-12-12A12,12,0,0,1,96,156Zm88-56a12,12,0,1,1-12-12A12,12,0,0,1,184,100Z" + ) end end end diff --git a/app/views/themes/grid/calendar.rb b/app/views/themes/grid/calendar.rb index d80b503e..503df866 100644 --- a/app/views/themes/grid/calendar.rb +++ b/app/views/themes/grid/calendar.rb @@ -1,12 +1,8 @@ -module Themes - module Grid - class Calendar < ApplicationComponent - def view_template - div(class: "space-y-4 w-full") do - Input(type: "string", placeholder: "Select a date", class: "rounded-md border shadow", id: "formatted-date", data_controller: "input") - Calendar(input_id: "#formatted-date", date_format: "PPPP", class: "rounded-md border shadow") - end - end +class Views::Themes::Grid::Calendar < Components::Base + def view_template + div(class: "space-y-4 w-full") do + Input(type: "string", placeholder: "Select a date", class: "rounded-md border shadow", id: "formatted-date", data_controller: "input") + Calendar(input_id: "#formatted-date", date_format: "PPPP", class: "rounded-md border shadow") end end end diff --git a/app/views/themes/grid/card.rb b/app/views/themes/grid/card.rb index 0d23d276..1e9d7b0e 100644 --- a/app/views/themes/grid/card.rb +++ b/app/views/themes/grid/card.rb @@ -1,28 +1,24 @@ -module Themes - module Grid - class Card < ApplicationComponent - def view_template - Card(class: "w-full") do - CardHeader do - CardTitle { 'You might like "RBUI"' } - CardDescription { "@joeldrapper" } - end - CardContent do - AspectRatio(aspect_ratio: "16/9", class: "rounded-md overflow-hidden border") do - img( - alt: "Placeholder", - loading: "lazy", - src: - helpers.image_url("pattern.jpg") - ) - end - end - CardFooter(class: "flex justify-end gap-x-2") do - Button(variant: :outline) { "See more" } - Button(variant: :primary) { "Buy now" } - end +class Views::Themes::Grid::Card < Components::Base + def view_template + Card(class: "w-full") do + CardHeader do + CardTitle { 'You might like "RBUI"' } + CardDescription { "@joeldrapper" } + end + CardContent do + AspectRatio(aspect_ratio: "16/9", class: "rounded-md overflow-hidden border") do + img( + alt: "Placeholder", + loading: "lazy", + src: + helpers.image_url("pattern.jpg") + ) end end + CardFooter(class: "flex justify-end gap-x-2") do + Button(variant: :outline) { "See more" } + Button(variant: :primary) { "Buy now" } + end end end end diff --git a/app/views/themes/grid/chart.rb b/app/views/themes/grid/chart.rb index 2579acf5..0ab970c6 100644 --- a/app/views/themes/grid/chart.rb +++ b/app/views/themes/grid/chart.rb @@ -1,40 +1,36 @@ # frozen_string_literal: true -module Themes - module Grid - class Chart < ApplicationComponent - def view_template - Card(class: "p-8 space-y-6") do - div do - Text(size: "4", weight: "semibold") { "Phlex Speed Tests" } - Text(size: "2", class: "text-muted-foreground") { "Render time for a simple page" } - end - Chart(options: chart_options) - end +class Views::Themes::Grid::Chart < Components::Base + def view_template + Card(class: "p-8 space-y-6") do + div do + Text(size: "4", weight: "semibold") { "Phlex Speed Tests" } + Text(size: "2", class: "text-muted-foreground") { "Render time for a simple page" } end + Chart(options: chart_options) + end + end - private + private - def chart_options - { - type: "bar", - data: { - labels: ["Phlex", "VC", "ERB"], - datasets: [{ - label: "render time (ms)", - data: [100, 520, 1200] - }] - }, - options: { - indexAxis: "y", - scales: { - y: { - beginAtZero: true - } - } + def chart_options + { + type: "bar", + data: { + labels: ["Phlex", "VC", "ERB"], + datasets: [{ + label: "render time (ms)", + data: [100, 520, 1200] + }] + }, + options: { + indexAxis: "y", + scales: { + y: { + beginAtZero: true } } - end - end + } + } end end diff --git a/app/views/themes/grid/chat.rb b/app/views/themes/grid/chat.rb index 364ebedc..dcc06a26 100644 --- a/app/views/themes/grid/chat.rb +++ b/app/views/themes/grid/chat.rb @@ -1,91 +1,87 @@ # frozen_string_literal: true -module Themes - module Grid - class Chat < ApplicationComponent - MESSAGES = [ - "You should checkout RBUI's new release, it makes life sooo much easier", - "What's RBUI?", - "Don't ask questions, just get on that ASAP and thank me later", - "Alright, alright, I'll check it out" - ] +class Views::Themes::Grid::Chat < Components::Base + MESSAGES = [ + "You should checkout RBUI's new release, it makes life sooo much easier", + "What's RBUI?", + "Don't ask questions, just get on that ASAP and thank me later", + "Alright, alright, I'll check it out" + ] - def view_template - Card(class: "p-8 space-y-6") do - header - messages(MESSAGES) - message_form - end - end + def view_template + Card(class: "p-8 space-y-6") do + header + messages(MESSAGES) + message_form + end + end - private + private - def header - div(class: "flex items-center justify-between") do - div(class: "flex items-center space-x-4") do - div do - Text(class: "font-medium") { "Joel Drapper" } - Text(size: "2", class: "text-muted-foreground") { "joel@drapper.me" } - end - end - Tooltip do - TooltipTrigger do - Button(variant: :outline, icon: true) do - bookmark_icon - end - end - TooltipContent do - Text { "Save contact" } - end - end + def header + div(class: "flex items-center justify-between") do + div(class: "flex items-center space-x-4") do + div do + Text(class: "font-medium") { "Joel Drapper" } + Text(size: "2", class: "text-muted-foreground") { "joel@drapper.me" } end end - - def messages(messages) - div(class: "space-y-4") do - messages.each_with_index do |message, index| - message(message, right: index.odd?) + Tooltip do + TooltipTrigger do + Button(variant: :outline, icon: true) do + bookmark_icon end end - end - - def message(content, right: false) - div(class: tokens("w-full flex", -> { right } => "justify-end")) do - div(class: - tokens( - "rounded-2xl p-4 w-3/4", - -> { right } => "bg-primary text-primary-foreground rounded-br-sm", - -> { !right } => "bg-muted text-foreground rounded-bl-sm" - )) do - content - end + TooltipContent do + Text { "Save contact" } end end + end + end - def message_form - div(class: "flex w-full items-center space-x-2") do - Input(type: "message", placeholder: "Write something...") - Button { "Send" } - end + def messages(messages) + div(class: "space-y-4") do + messages.each_with_index do |message, index| + message(message, right: index.odd?) end + end + end - def bookmark_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - fill: "none", - viewbox: "0 0 24 24", - stroke_width: "1.5", - stroke: "currentColor", - class: "w-4 h-4" - ) do |s| - s.path( - stroke_linecap: "round", - stroke_linejoin: "round", - d: - "M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" - ) - end + def message(content, right: false) + div(class: [("w-full flex" if right)]) do + div(class: + [ + "rounded-2xl p-4 w-3/4", + ("bg-primary text-primary-foreground rounded-bl-sm" if right), + ("bg-muted text-foreground rounded-br-sm" unless right) + ]) do + content end end end + + def message_form + div(class: "flex w-full items-center space-x-2") do + Input(type: "message", placeholder: "Write something...") + Button { "Send" } + end + end + + def bookmark_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + fill: "none", + viewbox: "0 0 24 24", + stroke_width: "1.5", + stroke: "currentColor", + class: "w-4 h-4" + ) do |s| + s.path( + stroke_linecap: "round", + stroke_linejoin: "round", + d: + "M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" + ) + end + end end diff --git a/app/views/themes/grid/command.rb b/app/views/themes/grid/command.rb index 82815155..d79f7905 100644 --- a/app/views/themes/grid/command.rb +++ b/app/views/themes/grid/command.rb @@ -1,118 +1,110 @@ # frozen_string_literal: true -module Themes - module Grid - class Command < ApplicationComponent - def view_template - CommandDialog do - CommandDialogTrigger do - Button(variant: "outline", class: "w-full pr-2 pl-3 justify-between") do - div(class: "flex items-center space-x-1") do - search_icon - span(class: "text-muted-foreground font-normal") do - plain "Search" - end - end - ShortcutKey do - span(class: "text-xs") { "⌘" } - plain "K" - end +class Views::Themes::Grid::Command < Components::Base + def view_template + CommandDialog do + CommandDialogTrigger do + Button(variant: "outline", class: "w-full pr-2 pl-3 justify-between") do + div(class: "flex items-center space-x-1") do + svg( + xmlns: "http://www.w3.org/2000/svg", + viewbox: "0 0 20 20", + fill: "currentColor", + class: "w-4 h-4 mr-1.5" + ) do |s| + s.path( + fill_rule: "evenodd", + d: + "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z", + clip_rule: "evenodd" + ) end + span(class: "text-muted-foreground font-normal") do + plain "Search" + end + end + ShortcutKey do + span(class: "text-xs") { "⌘" } + plain "K" end - CommandDialogContent do - Command do - CommandInput(placeholder: "Type a command or search...") - CommandEmpty { "No results found." } - CommandList do - CommandGroup(title: "Components") do - components_list.each do |component| - CommandItem(value: component[:name], href: component[:path]) do - default_icon - plain component[:name] - end - end + end + end + CommandDialogContent do + Command do + CommandInput(placeholder: "Type a command or search...") + CommandEmpty { "No results found." } + CommandList do + CommandGroup(title: "Components") do + components_list.each do |component| + CommandItem(value: component[:name], href: component[:path]) do + default_icon + plain component[:name] end - CommandGroup(title: "Settings") do - settings_list.each do |setting| - CommandItem(value: setting[:name], href: setting[:path]) do - default_icon - plain setting[:name] - end - end + end + end + CommandGroup(title: "Settings") do + settings_list.each do |setting| + CommandItem(value: setting[:name], href: setting[:path]) do + default_icon + plain setting[:name] end end end end end end + end + end - private - - def components - [ - Docs::ComponentStruct.new(name: "CommandController", source: "https://github.com/PhlexUI/phlex_ui_stimulus_pro/blob/main/controllers/command_controller.js", built_using: :stimulus), - Docs::ComponentStruct.new(name: "CommandDialog", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/dialog.rb", built_using: :phlex), - Docs::ComponentStruct.new(name: "CommandDialogTrigger", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/dialog_trigger.rb", built_using: :phlex), - Docs::ComponentStruct.new(name: "CommandDialogContent", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/dialog_content.rb", built_using: :phlex), - Docs::ComponentStruct.new(name: "Command", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command.rb", built_using: :phlex), - Docs::ComponentStruct.new(name: "CommandInput", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/input.rb", built_using: :phlex), - Docs::ComponentStruct.new(name: "CommandEmpty", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/empty.rb", built_using: :phlex), - Docs::ComponentStruct.new(name: "CommandList", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/list.rb", built_using: :phlex), - Docs::ComponentStruct.new(name: "CommandGroup", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/group.rb", built_using: :phlex), - Docs::ComponentStruct.new(name: "CommandItem", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/item.rb", built_using: :phlex) - ] - end + private - def search_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - viewbox: "0 0 20 20", - fill: "currentColor", - class: "w-4 h-4 mr-1.5" - ) do |s| - s.path( - fill_rule: "evenodd", - d: - "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z", - clip_rule: "evenodd" - ) - end - end + def components + [ + Docs::ComponentStruct.new(name: "CommandController", source: "https://github.com/PhlexUI/phlex_ui_stimulus_pro/blob/main/controllers/command_controller.js", built_using: :stimulus), + Docs::ComponentStruct.new(name: "CommandDialog", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/dialog.rb", built_using: :phlex), + Docs::ComponentStruct.new(name: "CommandDialogTrigger", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/dialog_trigger.rb", built_using: :phlex), + Docs::ComponentStruct.new(name: "CommandDialogContent", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/dialog_content.rb", built_using: :phlex), + Docs::ComponentStruct.new(name: "Command", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command.rb", built_using: :phlex), + Docs::ComponentStruct.new(name: "CommandInput", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/input.rb", built_using: :phlex), + Docs::ComponentStruct.new(name: "CommandEmpty", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/empty.rb", built_using: :phlex), + Docs::ComponentStruct.new(name: "CommandList", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/list.rb", built_using: :phlex), + Docs::ComponentStruct.new(name: "CommandGroup", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/group.rb", built_using: :phlex), + Docs::ComponentStruct.new(name: "CommandItem", source: "https://github.com/PhlexUI/phlex_ui_pro/blob/main/lib/phlex_ui_pro/command/item.rb", built_using: :phlex) + ] + end - def default_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - viewbox: "0 0 24 24", - fill: "currentColor", - class: "w-5 h-5" - ) do |s| - s.path( - fill_rule: "evenodd", - d: - "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z", - clip_rule: "evenodd" - ) - end - end + def default_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + viewbox: "0 0 24 24", + fill: "currentColor", + class: "w-5 h-5" + ) do |s| + s.path( + fill_rule: "evenodd", + d: + "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z", + clip_rule: "evenodd" + ) + end + end - def components_list - [ - {name: "Accordion", path: helpers.docs_accordion_path}, - {name: "Alert", path: helpers.docs_alert_path}, - {name: "Alert Dialog", path: helpers.docs_alert_dialog_path}, - {name: "Aspect Ratio", path: helpers.docs_aspect_ratio_path}, - {name: "Avatar", path: helpers.docs_avatar_path}, - {name: "Badge", path: helpers.docs_badge_path} - ] - end + def components_list + [ + {name: "Accordion", path: helpers.docs_accordion_path}, + {name: "Alert", path: helpers.docs_alert_path}, + {name: "Alert Dialog", path: helpers.docs_alert_dialog_path}, + {name: "Aspect Ratio", path: helpers.docs_aspect_ratio_path}, + {name: "Avatar", path: helpers.docs_avatar_path}, + {name: "Badge", path: helpers.docs_badge_path} + ] + end - def settings_list - [ - {name: "Profile", path: "#"}, - {name: "Mail", path: "#"}, - {name: "Settings", path: "#"} - ] - end - end + def settings_list + [ + {name: "Profile", path: "#"}, + {name: "Mail", path: "#"}, + {name: "Settings", path: "#"} + ] end end diff --git a/app/views/themes/grid/create_event.rb b/app/views/themes/grid/create_event.rb index 054554aa..3cd453a6 100644 --- a/app/views/themes/grid/create_event.rb +++ b/app/views/themes/grid/create_event.rb @@ -1,42 +1,38 @@ # frozen_string_literal: true -module Themes - module Grid - class CreateEvent < ApplicationComponent - def view_template - Card(class: "p-8 space-y-4") do - div do - Text(size: "4", weight: "semibold") { "Create an Event" } - Text(size: "2", class: "text-muted-foreground") { "Enter your event details below" } - end - event_form - end +class Views::Themes::Grid::CreateEvent < Components::Base + def view_template + Card(class: "p-8 space-y-4") do + div do + Text(size: "5", weight: "semibold") { "Create an Event" } + Text(size: "2", class: "text-muted-foreground") { "Enter your event details below" } end + event_form + end + end - private + private - def event_form - Form(class: "w-full") do - FormField do - FormFieldLabel(for: "name") { "Name" } - Input(type: "string", value: "RuSki conf. Japan", id: "name") - end - FormField do - Popover(options: {trigger: "focusin"}) do - PopoverTrigger(class: "w-full") do - div(class: "grid w-full max-w-sm items-center gap-1.5") do - FormFieldLabel(for: "date") { "Select a date" } - Input(type: "string", placeholder: "Select a date", class: "rounded-md border shadow", id: "date", data_controller: "input") - end - end - PopoverContent do - Calendar(input_id: "#date") - end + def event_form + Form(class: "w-full") do + FormField do + FormFieldLabel(for: "name") { "Name" } + Input(type: "string", value: "RuSki conf. Japan", id: "name") + end + FormField do + Popover(options: {trigger: "focusin"}) do + PopoverTrigger(class: "w-full") do + div(class: "grid w-full max-w-sm items-center gap-1.5") do + FormFieldLabel(for: "date") { "Select a date" } + Input(type: "string", placeholder: "Select a date", class: "rounded-md border shadow", id: "date", data_controller: "input") end end - Button(type: "submit", class: "w-full") { "Create Event" } + PopoverContent do + Calendar(input_id: "#date") + end end end + Button(type: "submit", class: "w-full") { "Create Event" } end end end diff --git a/app/views/themes/grid/line_graph.rb b/app/views/themes/grid/line_graph.rb index 061f361e..e4c84558 100644 --- a/app/views/themes/grid/line_graph.rb +++ b/app/views/themes/grid/line_graph.rb @@ -1,44 +1,40 @@ # frozen_string_literal: true -module Themes - module Grid - class LineGraph < ApplicationComponent - def view_template - Card(class: "p-8 space-y-6") do - div do - Text(size: "4", weight: "semibold") { "Phlex Success" } - Text(size: "2", class: "text-muted-foreground") { "Number of stars on the Phlex Github repo" } - end - Chart(options: chart_options) - end +class Views::Themes::Grid::LineGraph < Components::Base + def view_template + Card(class: "p-8 space-y-6") do + div do + Text(size: "4", weight: "semibold") { "Phlex Success" } + Text(size: "2", class: "text-muted-foreground") { "Number of stars on the Phlex Github repo" } end + Chart(options: chart_options) + end + end - private + private - def chart_options - { - type: "line", - data: { - labels: ["Feb", "Mar", "Apr", "May", "Jun", "Jul"], - datasets: [{ - label: "Github Stars", - data: [40, 30, 79, 140, 290, 550] - }] - }, - options: { - scales: { - y: { - beginAtZero: true - } - }, - plugins: { - legend: { - display: false - } - } + def chart_options + { + type: "line", + data: { + labels: ["Feb", "Mar", "Apr", "May", "Jun", "Jul"], + datasets: [{ + label: "Github Stars", + data: [40, 30, 79, 140, 290, 550] + }] + }, + options: { + scales: { + y: { + beginAtZero: true + } + }, + plugins: { + legend: { + display: false } } - end - end + } + } end end diff --git a/app/views/themes/grid/repo_tabs.rb b/app/views/themes/grid/repo_tabs.rb index 723c6182..c938d509 100644 --- a/app/views/themes/grid/repo_tabs.rb +++ b/app/views/themes/grid/repo_tabs.rb @@ -1,126 +1,122 @@ # frozen_string_literal: true -module Themes - module Grid - class RepoTabs < ApplicationComponent - Repo = Struct.new(:github_url, :name, :stars, :version, keyword_init: true) +class Views::Themes::Grid::RepoTabs < Components::Base + Repo = Struct.new(:github_url, :name, :stars, :version, keyword_init: true) - def view_template - Tabs(default_value: "overview", class: "w-full") do - TabsList(class: "w-full grid grid-cols-2") do - TabsTrigger(value: "overview") do - book_icon - span(class: "ml-2") { "Overview" } - end - TabsTrigger(value: "repositories") do - repo_icon - span(class: "ml-2") { "Repositories" } - end + def view_template + Tabs(default_value: "overview", class: "w-full") do + TabsList(class: "w-full grid grid-cols-2") do + TabsTrigger(value: "overview") do + book_icon + span(class: "ml-2") { "Overview" } + end + TabsTrigger(value: "repositories") do + repo_icon + span(class: "ml-2") { "Repositories" } + end + end + TabsContent(value: "overview") do + Card(class: "p-6 space-y-4 shadow-none") do + Avatar do + AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper") + AvatarFallback { "JD" } end - TabsContent(value: "overview") do - Card(class: "p-6 space-y-4 shadow-none") do - Avatar do - AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper") - AvatarFallback { "JD" } - end - div(class: "space-y-4") do - div do - Text(size: "4", weight: "semibold") { "Joel Drapper" } - Text(size: "2", class: "text-muted-foreground") { "Creator of Phlex Components. Ruby on Rails developer." } - end - Link(href: "https://github.com/joeldrapper", variant: :outline, size: :sm) do - github_icon - span(class: "ml-2") { "View profile" } - end - end + div(class: "space-y-4") do + div do + Text(size: "4", weight: "semibold") { "Joel Drapper" } + Text(size: "2", class: "text-muted-foreground") { "Creator of Phlex Components. Ruby on Rails developer." } + end + Link(href: "https://github.com/joeldrapper", variant: :outline, size: :sm) do + github_icon + span(class: "ml-2") { "View profile" } end end end end + end + end - private - - def components - [ - Docs::ComponentStruct.new(name: "TabsController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/tabs_controller.js", built_using: :stimulus), - Docs::ComponentStruct.new(name: "Tabs", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tabs.rb", built_using: :phlex), - Docs::ComponentStruct.new(name: "TabsList", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tabs/list.rb", built_using: :phlex), - Docs::ComponentStruct.new(name: "TabsTrigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tabs/trigger.rb", built_using: :phlex), - Docs::ComponentStruct.new(name: "TabsContent", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tabs/content.rb", built_using: :phlex) - ] - end + private - def book_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - fill: "none", - viewbox: "0 0 24 24", - stroke_width: "2", - stroke: "currentColor", - class: "w-4 h-4 text-muted-foreground shrink-0" - ) do |s| - s.path( - stroke_linecap: "round", - stroke_linejoin: "round", - d: - "M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" - ) - end - end + def components + [ + Docs::ComponentStruct.new(name: "TabsController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/tabs_controller.js", built_using: :stimulus), + Docs::ComponentStruct.new(name: "Tabs", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tabs.rb", built_using: :phlex), + Docs::ComponentStruct.new(name: "TabsList", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tabs/list.rb", built_using: :phlex), + Docs::ComponentStruct.new(name: "TabsTrigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tabs/trigger.rb", built_using: :phlex), + Docs::ComponentStruct.new(name: "TabsContent", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/tabs/content.rb", built_using: :phlex) + ] + end - def repo_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - fill: "none", - viewbox: "0 0 24 24", - stroke_width: "2", - stroke: "currentColor", - class: "w-4 h-4 text-muted-foreground shrink-0" - ) do |s| - s.path( - stroke_linecap: "round", - stroke_linejoin: "round", - d: - "M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" - ) - end - end + def book_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + fill: "none", + viewbox: "0 0 24 24", + stroke_width: "2", + stroke: "currentColor", + class: "w-4 h-4 text-muted-foreground shrink-0" + ) do |s| + s.path( + stroke_linecap: "round", + stroke_linejoin: "round", + d: + "M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" + ) + end + end - def github_icon - svg(viewbox: "0 0 438.549 438.549", class: "h-4 w-4 shrink-0") do |s| - s.path( - fill: "currentColor", - d: - "M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z" - ) - end - end + def repo_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + fill: "none", + viewbox: "0 0 24 24", + stroke_width: "2", + stroke: "currentColor", + class: "w-4 h-4 text-muted-foreground shrink-0" + ) do |s| + s.path( + stroke_linecap: "round", + stroke_linejoin: "round", + d: + "M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" + ) + end + end - def star_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - fill: "none", - viewbox: "0 0 24 24", - stroke_width: "2", - stroke: "currentColor", - class: "w-4 h-4 text-primary shrink-0" - ) do |s| - s.path( - stroke_linecap: "round", - stroke_linejoin: "round", - d: - "M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" - ) - end - end + def github_icon + svg(viewbox: "0 0 438.549 438.549", class: "h-4 w-4 shrink-0") do |s| + s.path( + fill: "currentColor", + d: + "M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z" + ) + end + end - def repositories - [ - Repo.new(github_url: "https://github.com/phlex-ruby/phlex", name: "phlex", stars: 961, version: "v1.8.1"), - Repo.new(github_url: "https://github.com/joeldrapper/green_dots", name: "green_dots", stars: 40, version: "Pre Release"), - Repo.new(github_url: "https://github.com/joeldrapper/literal", name: "literal", stars: 96, version: "v0.1.0") - ] - end + def star_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + fill: "none", + viewbox: "0 0 24 24", + stroke_width: "2", + stroke: "currentColor", + class: "w-4 h-4 text-primary shrink-0" + ) do |s| + s.path( + stroke_linecap: "round", + stroke_linejoin: "round", + d: + "M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" + ) end end + + def repositories + [ + Repo.new(github_url: "https://github.com/phlex-ruby/phlex", name: "phlex", stars: 961, version: "v1.8.1"), + Repo.new(github_url: "https://github.com/joeldrapper/green_dots", name: "green_dots", stars: 40, version: "Pre Release"), + Repo.new(github_url: "https://github.com/joeldrapper/literal", name: "literal", stars: 96, version: "v0.1.0") + ] + end end diff --git a/app/views/themes/grid/signin.rb b/app/views/themes/grid/signin.rb index 34704050..c8171c3b 100644 --- a/app/views/themes/grid/signin.rb +++ b/app/views/themes/grid/signin.rb @@ -1,79 +1,75 @@ # frozen_string_literal: true -module Themes - module Grid - class Signin < ApplicationComponent - def view_template - Card(class: "p-8 space-y-4") do - div do - Text(size: "4", weight: "semibold") { "Create an account" } - Text(size: "2", class: "text-muted-foreground") { "Enter your email below to create your account" } - end - oauth_buttons - or_continue_with - # signin_form - end +class Views::Themes::Grid::Signin < Components::Base + def view_template + Card(class: "p-8 space-y-4") do + div do + Text(size: "4", weight: "semibold") { "Create an account" } + Text(size: "2", class: "text-muted-foreground") { "Enter your email below to create your account" } end + oauth_buttons + or_continue_with + # signin_form + end + end - private + private - def oauth_buttons - div(class: "grid grid-cols-2 gap-4 mt-4") do - # github - Button(variant: :outline, class: "w-full") do - github_icon - span(class: "ml-2") { "Github" } - end - # google - Button(variant: :outline, class: "w-full") do - google_icon - span(class: "ml-2") { "Google" } - end - end + def oauth_buttons + div(class: "grid grid-cols-2 gap-4 mt-4") do + # github + Button(variant: :outline, class: "w-full") do + github_icon + span(class: "ml-2") { "Github" } + end + # google + Button(variant: :outline, class: "w-full") do + google_icon + span(class: "ml-2") { "Google" } end + end + end - def or_continue_with - div(class: "relative") do - div(class: "absolute inset-0 flex items-center") do - span(class: "w-full border-t") - end - div(class: "relative flex justify-center text-xs uppercase") do - span(class: "bg-background px-2 text-muted-foreground") { "Or continue with" } - end - end + def or_continue_with + div(class: "relative") do + div(class: "absolute inset-0 flex items-center") do + span(class: "w-full border-t") + end + div(class: "relative flex justify-center text-xs uppercase") do + span(class: "bg-background px-2 text-muted-foreground") { "Or continue with" } end + end + end - # def signin_form - # Form::Builder.new(class: "w-full") do |f| - # f.input "email", type: :email, placeholder: "joel@drapper.me" - # f.input "password", type: :password, placeholder: "**********" - # div(class: "flex items-center space-x-3 py-2") do - # Checkbox.new(id: "terms") - # label(for: "terms", class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") { "Accept terms and conditions" } - # end - # f.button(class: "w-full") { "Create account" } - # end - # end + # def signin_form + # Form::Builder.new(class: "w-full") do |f| + # f.input "email", type: :email, placeholder: "joel@drapper.me" + # f.input "password", type: :password, placeholder: "**********" + # div(class: "flex items-center space-x-3 py-2") do + # Checkbox.new(id: "terms") + # label(for: "terms", class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") { "Accept terms and conditions" } + # end + # f.button(class: "w-full") { "Create account" } + # end + # end - def github_icon - svg(viewbox: "0 0 438.549 438.549", class: "h-4 w-4") do |s| - s.path( - fill: "currentColor", - d: - "M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z" - ) - end - end + def github_icon + svg(viewbox: "0 0 438.549 438.549", class: "h-4 w-4") do |s| + s.path( + fill: "currentColor", + d: + "M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z" + ) + end + end - def google_icon - svg(role: "img", viewbox: "0 0 24 24", class: "h-4 w-4") do |s| - s.path( - fill: "currentColor", - d: - "M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" - ) - end - end + def google_icon + svg(role: "img", viewbox: "0 0 24 24", class: "h-4 w-4") do |s| + s.path( + fill: "currentColor", + d: + "M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" + ) end end end diff --git a/app/views/themes/grid/table.rb b/app/views/themes/grid/table.rb index 6d83b0b1..013f0057 100644 --- a/app/views/themes/grid/table.rb +++ b/app/views/themes/grid/table.rb @@ -1,60 +1,56 @@ # frozen_string_literal: true -module Themes - module Grid - class Table < ApplicationComponent - User = Struct.new(:avatar_url, :name, :username, :commits, :github_url, keyword_init: true) +class Views::Themes::Grid::Table < Components::Base + User = Struct.new(:avatar_url, :name, :username, :commits, :github_url, keyword_init: true) - # def view_template - # render PhlexUI::Card.new(class: "p-6") do - # render PhlexUI::Table::Builder.new(users) do |t| - # t.column("Name") do |user| - # div(class: "flex items-center space-x-3") do - # render PhlexUI::Avatar::Builder.new(src: user.avatar_url, size: :md) - # div do - # p(class: "text-sm font-medium") { user.name } - # p(class: "text-sm text-gray-500") { user.username } - # end - # end - # end - # t.column("Commits", &:commits) - # t.column("Links", header_attrs: {class: "text-right"}, footer_attrs: {class: "text-right"}) do |user| - # div(class: "flex items-center justify-end space-x-2") do - # render PhlexUI::Link.new(href: github_link(user), variant: :outline, size: :sm) do - # github_icon - # span(class: "ml-2") { "See profile" } - # end - # end - # end - # end - # end - # end + # def view_template + # render PhlexUI::Card.new(class: "p-6") do + # render PhlexUI::Table::Builder.new(users) do |t| + # t.column("Name") do |user| + # div(class: "flex items-center space-x-3") do + # render PhlexUI::Avatar::Builder.new(src: user.avatar_url, size: :md) + # div do + # p(class: "text-sm font-medium") { user.name } + # p(class: "text-sm text-gray-500") { user.username } + # end + # end + # end + # t.column("Commits", &:commits) + # t.column("Links", header_attrs: {class: "text-right"}, footer_attrs: {class: "text-right"}) do |user| + # div(class: "flex items-center justify-end space-x-2") do + # render PhlexUI::Link.new(href: github_link(user), variant: :outline, size: :sm) do + # github_icon + # span(class: "ml-2") { "See profile" } + # end + # end + # end + # end + # end + # end - private + private - def users - [ - User.new(avatar_url: "https://avatars.githubusercontent.com/u/246692?v=4", name: "Joel Drapper", username: "joeldrapper", commits: 404), - User.new(avatar_url: "https://avatars.githubusercontent.com/u/33979976?v=4", name: "Alexandre Ruban", username: "alexandreruban", commits: 16), - User.new(avatar_url: "https://avatars.githubusercontent.com/u/77887?v=4", name: "Will Cosgrove", username: "willcosgrove", commits: 12), - User.new(avatar_url: "https://avatars.githubusercontent.com/u/3025661?v=4", name: "Stephann V.", username: "stephannv", commits: 8), - User.new(avatar_url: "https://avatars.githubusercontent.com/u/6411752?v=4", name: "Marco Roth", username: "marcoroth", commits: 8) - ] - end + def users + [ + User.new(avatar_url: "https://avatars.githubusercontent.com/u/246692?v=4", name: "Joel Drapper", username: "joeldrapper", commits: 404), + User.new(avatar_url: "https://avatars.githubusercontent.com/u/33979976?v=4", name: "Alexandre Ruban", username: "alexandreruban", commits: 16), + User.new(avatar_url: "https://avatars.githubusercontent.com/u/77887?v=4", name: "Will Cosgrove", username: "willcosgrove", commits: 12), + User.new(avatar_url: "https://avatars.githubusercontent.com/u/3025661?v=4", name: "Stephann V.", username: "stephannv", commits: 8), + User.new(avatar_url: "https://avatars.githubusercontent.com/u/6411752?v=4", name: "Marco Roth", username: "marcoroth", commits: 8) + ] + end - def github_link(user) - "https://github.com/#{user.username}" - end + def github_link(user) + "https://github.com/#{user.username}" + end - def github_icon - svg(viewbox: "0 0 438.549 438.549", class: "h-4 w-4") do |s| - s.path( - fill: "currentColor", - d: - "M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z" - ) - end - end + def github_icon + svg(viewbox: "0 0 438.549 438.549", class: "h-4 w-4") do |s| + s.path( + fill: "currentColor", + d: + "M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z" + ) end end end diff --git a/app/views/themes/show_view.rb b/app/views/themes/show.rb similarity index 62% rename from app/views/themes/show_view.rb rename to app/views/themes/show.rb index 1cd14a6d..c6b036ff 100644 --- a/app/views/themes/show_view.rb +++ b/app/views/themes/show.rb @@ -1,6 +1,8 @@ # frozen_string_literal: true -class Themes::ShowView < ApplicationView +class Views::Themes::Show < Components::Layouts::Base + def page_title = "Themes" + def initialize(theme:) @theme = theme end @@ -13,25 +15,25 @@ def view_template Text(as: "p", size: "5", weight: "medium") { "Customize your app fast with hand-picked themes." } end div(class: "flex gap-x-2 mt-4") do - render Themes::CustomizePopover.new(theme: @theme) - render Themes::CopyCode.new(theme: @theme) + render Views::Themes::CustomizePopover.new(theme: @theme) + render Views::Themes::CopyCode.new(theme: @theme) end end div(class: "flex flex-wrap justify-between -mx-2 pt-12") do div(class: "flex flex-col gap-y-6 p-3 w-full sm:w-1/2 xl:w-1/3") do - render Themes::Grid::RepoTabs.new - render Themes::Grid::LineGraph.new - render Themes::Grid::Card.new + render Views::Themes::Grid::RepoTabs.new + render Views::Themes::Grid::LineGraph.new + render Views::Themes::Grid::Card.new end div(class: "flex flex-col gap-y-6 p-3 w-full sm:w-1/2 xl:w-1/3") do - render Themes::Grid::Chat.new - render Themes::Grid::Chart.new - render Themes::Grid::CreateEvent.new + render Views::Themes::Grid::Chat.new + render Views::Themes::Grid::Chart.new + render Views::Themes::Grid::CreateEvent.new end div(class: "flex flex-col gap-y-6 p-3 w-full sm:w-1/2 xl:w-1/3") do # render Themes::Grid::Command.new - render Themes::Grid::Signin.new + render Views::Themes::Grid::Signin.new # render Themes::Grid::Table.new end end diff --git a/config/initializers/phlex.rb b/config/initializers/phlex.rb index 5f264138..13fd15ae 100644 --- a/config/initializers/phlex.rb +++ b/config/initializers/phlex.rb @@ -7,9 +7,9 @@ module Components extend Phlex::Kit end -# Rails.autoloaders.main.push_dir( -# "#{Rails.root}/app/views", namespace: Views -# ) +Rails.autoloaders.main.push_dir( + "#{Rails.root}/app/views", namespace: Views +) Rails.autoloaders.main.push_dir( "#{Rails.root}/app/components", namespace: Components diff --git a/lib/docs/component_struct.rb b/lib/docs/component_struct.rb index 6a24b262..9c8dbcec 100644 --- a/lib/docs/component_struct.rb +++ b/lib/docs/component_struct.rb @@ -6,7 +6,7 @@ Docs::ComponentStruct = Struct.new(:name, :source, :builder, :built_using) do def initialize(name:, source:, builder: false, built_using: :phlex) - source = ApplicationView::GITHUB_FILE_URL + source + source = Components::Base::GITHUB_FILE_URL + source super(name, source, builder, built_using) end end diff --git a/package.json b/package.json index 3c619ef0..6dce2218 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "esbuild": "0.23.0", "lottie-web": "5.12.2", "postcss": "8.4.40", - "ruby_ui_js": "ruby-ui/ruby_ui", + "ruby_ui_js": "../rbui", "tailwindcss": "3.4.7", "tailwindcss-animate": "1.0.7" }, diff --git a/test/controllers/components_controller_test.rb b/test/controllers/components_controller_test.rb index 148c5811..8cb36f8b 100644 --- a/test/controllers/components_controller_test.rb +++ b/test/controllers/components_controller_test.rb @@ -19,7 +19,10 @@ def self.all_docs_routes all_docs_routes.each do |route| test "should get #{route[:action]}" do get route[:path] - assert_response :success + assert_response :success, lambda { + "Route failed: #{route[:method]} #{route[:path]} (#{route[:controller]}##{route[:action]})\n" \ + "Expected response to be a <2XX: success>, but was a <#{response.code}: #{Rack::Utils::HTTP_STATUS_CODES[response.code.to_i]}>" + } end end end diff --git a/yarn.lock b/yarn.lock index fddfb9f2..a921cd11 100644 --- a/yarn.lock +++ b/yarn.lock @@ -852,6 +852,18 @@ reusify@^1.0.4: resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz" integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw== +ruby_ui_js@../rbui: + version "1.0.0-alpha.4" + dependencies: + "@floating-ui/dom" "^1.6.8" + "@hotwired/stimulus" "^3.2.2" + chart.js "^4.4.1" + date-fns "^2.30.0" + fuse.js "^7.0.0" + motion "^10.16.4" + mustache "^4.2.0" + tippy.js "^6.3.7" + ruby_ui_js@ruby-ui/ruby_ui: version "1.0.0-alpha.4" resolved "https://codeload.github.com/ruby-ui/ruby_ui/tar.gz/0ae3ed06e7ce56f17c67e2aa530f7fc2c806dc74"