Migrate the themes components to align with Phlex conversions (#170)

Author: karinevieira

app/components/themes/copy_code.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Components
+  module Themes
+    class CopyCode < Components::Base
+      def initialize(theme:)
+        @theme = theme
+      end
+
+      def view_template
+        style do
+          Theme::CSS.retrieve(@theme, with_directive: false)
+        end
+        Sheet do
+          SheetTrigger do
+            Button(variant: :primary) { "Copy Code" }
+          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
+          end
+        end
+      end
+    end
+  end
+end

app/components/themes/customize_popover.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Components
+  module Themes
+    class 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
+          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
+
+      def render_color_picker(name, color_hash, selected: false)
+        Link(href: theme_path(name&.downcase), variant: :outline, class: ["!justify-start", ("ring-neutral-950 ring-1" 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
+      end
+    end
+  end
+end

app/components/themes/grid/calendar.rb

@@ -0,0 +1,14 @@
+module Components
+  module Themes
+    module Grid
+      class 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
+    end
+  end
+end

app/components/themes/grid/card.rb

@@ -0,0 +1,29 @@
+module Components
+  module Themes
+    module Grid
+      class Card < Components::Base
+        def view_template
+          RubyUI::Card(class: "w-full") do
+            CardHeader do
+              CardTitle { 'You might like "RubyUI"' }
+              CardDescription { "@joeldrapper" }
+            end
+            CardContent do
+              AspectRatio(aspect_ratio: "16/9", class: "rounded-md overflow-hidden border") do
+                img(
+                  alt: "Placeholder",
+                  loading: "lazy",
+                  src: 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
+    end
+  end
+end

app/components/themes/grid/chart.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Components
+  module Themes
+    module Grid
+      class Chart < Components::Base
+        def view_template
+          RubyUI::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
+            RubyUI::Chart(options: chart_options)
+          end
+        end
+
+        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
+                }
+              }
+            }
+          }
+        end
+      end
+    end
+  end
+end

app/components/themes/grid/chat.rb

@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+module Components
+  module Themes
+    module Grid
+      class Chat < Components::Base
+        MESSAGES = [
+          "You should checkout RubyUI's new release, it makes life sooo much easier",
+          "What's RubyUI?",
+          "Don't ask questions, just get on that ASAP and thank me later",
+          "Alright, alright, I'll check it out"
+        ]
+
+        def view_template
+          RubyUI::Card(class: "p-8 space-y-6") do
+            header
+            messages(MESSAGES)
+            message_form
+          end
+        end
+
+        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") { "[email protected]" }
+              end
+            end
+            Tooltip do
+              TooltipTrigger do
+                Button(variant: :outline, icon: true) do
+                  bookmark_icon
+                end
+              end
+              TooltipContent do
+                Text { "Save contact" }
+              end
+            end
+          end
+        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 message(content, right: false)
+          div(class: ["w-full flex", ("justify-end" if right)]) do
+            div(class: [
+              "rounded-2xl p-4 w-3/4",
+              (right ? "bg-primary text-primary-foreground rounded-br-sm" : "bg-muted text-foreground rounded-bl-sm")
+            ]) 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
+    end
+  end
+end

app/components/themes/grid/command.rb

@@ -0,0 +1,120 @@
+# frozen_string_literal: true
+
+module Components
+  module Themes
+    module Grid
+      class 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
+                  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
+        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
+
+        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: docs_accordion_path},
+            {name: "Alert", path: docs_alert_path},
+            {name: "Alert Dialog", path: docs_alert_dialog_path},
+            {name: "Aspect Ratio", path: docs_aspect_ratio_path},
+            {name: "Avatar", path: docs_avatar_path},
+            {name: "Badge", path: docs_badge_path}
+          ]
+        end
+
+        def settings_list
+          [
+            {name: "Profile", path: "#"},
+            {name: "Mail", path: "#"},
+            {name: "Settings", path: "#"}
+          ]
+        end
+      end
+    end
+  end
+end