m9sh 0.1.0 → 0.2.0

data/app/components/m9sh/color_customizer_component.rb

@@ -0,0 +1,624 @@
+# frozen_string_literal: true
+
+module M9sh
+  class ColorCustomizerComponent < BaseComponent
+    include Utilities
+
+    SEMANTIC_COLORS = {
+      'Core' => %w[background foreground],
+      'Components' => %w[card card-foreground popover popover-foreground],
+      'Interactive' => %w[primary primary-foreground secondary secondary-foreground],
+      'State' => %w[muted muted-foreground accent accent-foreground],
+      'Feedback' => %w[destructive destructive-foreground],
+      'Form' => %w[border input ring],
+      'Sidebar' => %w[sidebar-background sidebar-foreground sidebar-primary sidebar-primary-foreground
+                    sidebar-accent sidebar-accent-foreground sidebar-border sidebar-ring]
+    }.freeze
+
+    def initialize(theme_name: 'neutral', **extra_attrs)
+      @theme_name = theme_name
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.div(
+        **component_attrs("h-full flex flex-col overflow-hidden"),
+        data: {
+          controller: "color-customizer m9sh--tabs",
+          color_customizer_theme_value: @theme_name,
+          m9sh__tabs_default_value: "preview"
+        }
+      ) do
+        safe_join([
+          render_header,
+          render_content,
+          render_footer
+        ])
+      end
+    end
+
+    private
+
+    def render_header
+      tag.div(class: "border-b border-border p-6") do
+        safe_join([
+          tag.h2(class: "text-2xl font-semibold") do
+            "Theme Customizer"
+          end,
+          tag.p(class: "text-sm text-muted-foreground mt-2") do
+            "Preview colors, adjust values, and export your custom theme configuration"
+          end,
+          tag.div(class: "mt-4") do
+            render_tab_list
+          end
+        ])
+      end
+    end
+
+    def render_content
+      tag.div(class: "flex-1 overflow-hidden p-6 flex flex-col") do
+        render_tab_panels
+      end
+    end
+
+    def render_tab_list
+      tag.div(
+        class: "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+        role: "tablist",
+        data: { m9sh__tabs_target: "list" }
+      ) do
+        safe_join([
+          render_tab_button("preview", "Color Preview", true),
+          render_tab_button("export", "Export Config", false)
+        ])
+      end
+    end
+
+    def render_tab_button(value, label, selected)
+      tag.button(
+        label,
+        type: "button",
+        role: "tab",
+        class: "inline-flex items-center justify-center whitespace-nowrap rounded-md px-2.5 py-1 text-xs font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+        data: {
+          m9sh__tabs_target: "trigger",
+          action: "click->m9sh--tabs#selectTab",
+          value: value
+        },
+        "aria-selected": selected ? "true" : "false"
+      )
+    end
+
+    def render_tab_panels
+      tag.div(class: "flex-1 overflow-hidden w-full mx-1") do
+        safe_join([
+          render_tab_panel("preview", render_color_preview, true),
+          render_tab_panel("export", render_export_section, false)
+        ])
+      end
+    end
+
+    def render_tab_panel(value, content, visible)
+      tag.div(
+        content,
+        role: "tabpanel",
+        class: "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 overflow-visible h-full",
+        data: {
+          m9sh__tabs_target: "panel",
+          value: value
+        },
+        style: visible ? "" : "display: none;"
+      )
+    end
+
+    def render_color_preview
+      tag.div(class: "grid md:grid-cols-2 gap-8 h-full") do
+        safe_join([
+          # Left column: Component preview
+          tag.div(class: "space-y-4 overflow-y-auto overflow-x-visible pr-2") do
+            safe_join([
+              tag.h3(class: "text-sm font-semibold text-muted-foreground uppercase tracking-wide sticky top-0 bg-background pb-3 -mx-2 px-2 z-10") { "Component Preview" },
+              render_component_preview
+            ])
+          end,
+          # Right column: Color swatches
+          tag.div(class: "space-y-6 overflow-y-auto overflow-x-visible pr-2") do
+            safe_join([
+              tag.h3(class: "text-sm font-semibold text-muted-foreground uppercase tracking-wide sticky top-0 bg-background pb-3 -mx-2 px-2 z-10 mb-4") { "Color Palette" },
+              *SEMANTIC_COLORS.map do |category, colors|
+                render_color_category(category, colors)
+              end
+            ])
+          end
+        ])
+      end
+    end
+
+    def render_component_preview
+      tag.div(class: "space-y-6") do
+        safe_join([
+          # Buttons
+          tag.div(class: "space-y-2") do
+            safe_join([
+              tag.h4(class: "text-xs font-semibold text-muted-foreground") { "Buttons" },
+              tag.div(class: "flex flex-wrap gap-2") do
+                safe_join([
+                  render(M9sh::ButtonComponent.new(variant: :default, size: :sm)) { "Primary" },
+                  render(M9sh::ButtonComponent.new(variant: :secondary, size: :sm)) { "Secondary" },
+                  render(M9sh::ButtonComponent.new(variant: :outline, size: :sm)) { "Outline" },
+                  render(M9sh::ButtonComponent.new(variant: :destructive, size: :sm)) { "Destructive" },
+                  render(M9sh::ButtonComponent.new(variant: :ghost, size: :sm)) { "Ghost" }
+                ])
+              end
+            ])
+          end,
+          # Card
+          tag.div(class: "space-y-2") do
+            safe_join([
+              tag.h4(class: "text-xs font-semibold text-muted-foreground") { "Card" },
+              tag.div(class: "p-4 rounded-lg border border-border bg-card") do
+                safe_join([
+                  tag.h3(class: "font-semibold text-card-foreground") { "Card Title" },
+                  tag.p(class: "text-sm text-muted-foreground mt-1") { "Card description text" }
+                ])
+              end
+            ])
+          end,
+          # Alerts
+          tag.div(class: "space-y-2") do
+            safe_join([
+              tag.h4(class: "text-xs font-semibold text-muted-foreground") { "Alerts" },
+              tag.div(class: "rounded-lg border border-border bg-background p-3") do
+                safe_join([
+                  tag.h5(class: "font-medium text-sm") { "Information" },
+                  tag.p(class: "text-sm text-muted-foreground mt-1") { "This is an informational alert" }
+                ])
+              end,
+              tag.div(class: "rounded-lg border border-destructive/50 bg-destructive/10 p-3") do
+                safe_join([
+                  tag.h5(class: "font-medium text-sm text-destructive") { "Error" },
+                  tag.p(class: "text-sm text-destructive/90 mt-1") { "This is an error alert" }
+                ])
+              end
+            ])
+          end,
+          # Form elements
+          tag.div(class: "space-y-2") do
+            safe_join([
+              tag.h4(class: "text-xs font-semibold text-muted-foreground") { "Form Elements" },
+              tag.input(
+                type: "text",
+                placeholder: "Input field",
+                class: "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              ),
+              tag.div(class: "flex items-center space-x-2 mt-2") do
+                safe_join([
+                  tag.input(
+                    type: "checkbox",
+                    id: "preview-checkbox",
+                    class: "h-4 w-4 rounded border-input accent-primary"
+                  ),
+                  tag.label(
+                    for: "preview-checkbox",
+                    class: "text-sm font-medium leading-none"
+                  ) { "Checkbox option" }
+                ])
+              end
+            ])
+          end,
+          # Badges
+          tag.div(class: "space-y-2") do
+            safe_join([
+              tag.h4(class: "text-xs font-semibold text-muted-foreground") { "Badges" },
+              tag.div(class: "flex flex-wrap gap-2") do
+                safe_join([
+                  tag.span(class: "inline-flex items-center rounded-full bg-primary px-2.5 py-0.5 text-xs font-semibold text-primary-foreground") { "Primary" },
+                  tag.span(class: "inline-flex items-center rounded-full bg-secondary px-2.5 py-0.5 text-xs font-semibold text-secondary-foreground") { "Secondary" },
+                  tag.span(class: "inline-flex items-center rounded-full bg-muted px-2.5 py-0.5 text-xs font-semibold text-muted-foreground") { "Muted" },
+                  tag.span(class: "inline-flex items-center rounded-full bg-accent px-2.5 py-0.5 text-xs font-semibold text-accent-foreground") { "Accent" }
+                ])
+              end
+            ])
+          end,
+          # Progress & Status
+          tag.div(class: "space-y-2") do
+            safe_join([
+              tag.h4(class: "text-xs font-semibold text-muted-foreground") { "Progress" },
+              tag.div(class: "w-full bg-secondary rounded-full h-2") do
+                tag.div(class: "bg-primary h-2 rounded-full", style: "width: 60%")
+              end
+            ])
+          end,
+          # Navigation
+          tag.div(class: "space-y-2") do
+            safe_join([
+              tag.h4(class: "text-xs font-semibold text-muted-foreground") { "Navigation" },
+              tag.nav(class: "flex space-x-4") do
+                safe_join([
+                  tag.a(href: "#", class: "text-sm font-medium text-foreground hover:text-primary") { "Active" },
+                  tag.a(href: "#", class: "text-sm font-medium text-muted-foreground hover:text-foreground") { "Inactive" },
+                  tag.a(href: "#", class: "text-sm font-medium text-muted-foreground hover:text-foreground") { "Link" }
+                ])
+              end
+            ])
+          end,
+          # Popover/Dialog preview
+          tag.div(class: "space-y-2") do
+            safe_join([
+              tag.h4(class: "text-xs font-semibold text-muted-foreground") { "Popover & Dialog" },
+              tag.div(class: "p-4 rounded-lg border border-border bg-popover shadow-md") do
+                safe_join([
+                  tag.h4(class: "font-medium text-sm text-popover-foreground") { "Popover Title" },
+                  tag.p(class: "text-sm text-muted-foreground mt-1") { "Popover content with popover colors" }
+                ])
+              end
+            ])
+          end,
+          # Table preview
+          tag.div(class: "space-y-2") do
+            safe_join([
+              tag.h4(class: "text-xs font-semibold text-muted-foreground") { "Table" },
+              tag.div(class: "rounded-lg border border-border overflow-hidden") do
+                tag.table(class: "w-full text-sm") do
+                  safe_join([
+                    tag.thead(class: "bg-muted/50") do
+                      tag.tr do
+                        safe_join([
+                          tag.th(class: "px-3 py-2 text-left font-medium text-muted-foreground") { "Name" },
+                          tag.th(class: "px-3 py-2 text-left font-medium text-muted-foreground") { "Status" }
+                        ])
+                      end
+                    end,
+                    tag.tbody do
+                      safe_join([
+                        tag.tr(class: "border-t border-border") do
+                          safe_join([
+                            tag.td(class: "px-3 py-2") { "Item 1" },
+                            tag.td(class: "px-3 py-2") do
+                              tag.span(class: "text-xs bg-primary/10 text-primary px-2 py-0.5 rounded") { "Active" }
+                            end
+                          ])
+                        end,
+                        tag.tr(class: "border-t border-border bg-muted/20") do
+                          safe_join([
+                            tag.td(class: "px-3 py-2") { "Item 2" },
+                            tag.td(class: "px-3 py-2") do
+                              tag.span(class: "text-xs bg-secondary/50 text-secondary-foreground px-2 py-0.5 rounded") { "Pending" }
+                            end
+                          ])
+                        end
+                      ])
+                    end
+                  ])
+                end
+              end
+            ])
+          end,
+          # Select/Dropdown preview
+          tag.div(class: "space-y-2") do
+            safe_join([
+              tag.h4(class: "text-xs font-semibold text-muted-foreground") { "Select" },
+              tag.select(
+                class: "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              ) do
+                safe_join([
+                  tag.option { "Option 1" },
+                  tag.option { "Option 2" },
+                  tag.option { "Option 3" }
+                ])
+              end
+            ])
+          end,
+          # Textarea preview
+          tag.div(class: "space-y-2") do
+            safe_join([
+              tag.h4(class: "text-xs font-semibold text-muted-foreground") { "Textarea" },
+              tag.textarea(
+                placeholder: "Enter your message...",
+                rows: 3,
+                class: "flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              )
+            ])
+          end,
+          # Switch/Toggle preview
+          tag.div(class: "space-y-2") do
+            safe_join([
+              tag.h4(class: "text-xs font-semibold text-muted-foreground") { "Toggle" },
+              tag.div(class: "flex items-center space-x-2") do
+                safe_join([
+                  tag.button(
+                    role: "switch",
+                    class: "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                  ) do
+                    tag.span(class: "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg transform translate-x-4 transition-transform")
+                  end,
+                  tag.label(class: "text-sm font-medium") { "Enable feature" }
+                ])
+              end
+            ])
+          end,
+          # Code block preview
+          tag.div(class: "space-y-2") do
+            safe_join([
+              tag.h4(class: "text-xs font-semibold text-muted-foreground") { "Code Block" },
+              tag.pre(class: "p-3 rounded-lg bg-muted text-sm font-mono overflow-x-auto") do
+                tag.code(class: "text-foreground") { "const theme = \"oklch\";\nconsole.log(theme);" }
+              end
+            ])
+          end
+        ])
+      end
+    end
+
+    def render_color_category(category, colors)
+      tag.div(class: "space-y-3") do
+        safe_join([
+          tag.h3(class: "text-sm font-semibold text-muted-foreground uppercase tracking-wide") { category },
+          tag.div(class: "grid grid-cols-2 gap-3") do
+            safe_join(
+              colors.map do |color|
+                render_color_swatch(color)
+              end
+            )
+          end
+        ])
+      end
+    end
+
+    def render_color_swatch(color)
+      render(M9sh::PopoverComponent.new(width: "w-80", align: "end", side: "bottom")) do |popover|
+        popover.with_trigger do
+          tag.div(
+            class: "flex items-center gap-3 p-3 rounded-lg border border-border hover:bg-accent/50 cursor-pointer transition-colors",
+            data: {
+              action: "click->color-customizer#selectColor",
+              color_customizer_color_param: color
+            }
+          ) do
+            safe_join([
+              tag.div(
+                class: "w-12 h-12 rounded-md border border-border",
+                style: "background-color: var(--color-#{color})",
+                data: { color_customizer_target: "swatch", color: color }
+              ),
+              tag.div(class: "flex-1 min-w-0") do
+                safe_join([
+                  tag.p(class: "text-sm font-medium truncate") { color },
+                  tag.p(
+                    class: "text-xs text-muted-foreground font-mono truncate",
+                    data: { color_customizer_target: "colorValue", color: color }
+                  ) { "Loading..." }
+                ])
+              end
+            ])
+          end
+        end
+
+        popover.with_popover_content do
+          tag.div(class: "space-y-3") do
+            safe_join([
+              tag.div(class: "space-y-1") do
+                safe_join([
+                  tag.h4(class: "font-semibold text-sm") { color },
+                  tag.p(
+                    class: "text-xs text-muted-foreground font-mono",
+                    data: { color_customizer_target: "selectedValue" }
+                  ) { "Loading..." }
+                ])
+              end,
+              tag.div(class: "space-y-2", data: { color_customizer_target: "sliders" }) do
+                safe_join([
+                  render_slider_control("Lightness", "lightness", 0, 100, 50),
+                  render_slider_control("Chroma", "chroma", 0, 40, 20),
+                  render_slider_control("Hue", "hue", 0, 360, 180)
+                ])
+              end,
+              tag.div(class: "pt-1") do
+                render(M9sh::ButtonComponent.new(
+                  variant: :outline,
+                  size: :sm,
+                  class: "w-full h-8",
+                  data: { action: "click->color-customizer#resetColor" }
+                )) { "Reset to Default" }
+              end
+            ])
+          end
+        end
+      end
+    end
+
+    def render_color_adjuster
+      tag.div(class: "space-y-6") do
+        safe_join([
+          render_selected_color_display,
+          render_adjustment_sliders,
+          render_adjustment_actions
+        ])
+      end
+    end
+
+    def render_selected_color_display
+      tag.div(class: "p-4 rounded-lg border border-border bg-card") do
+        safe_join([
+          tag.div(class: "flex items-center gap-4 mb-4") do
+            safe_join([
+              tag.div(
+                class: "w-20 h-20 rounded-lg border-2 border-border",
+                data: { color_customizer_target: "selectedSwatch" }
+              ),
+              tag.div(class: "flex-1") do
+                safe_join([
+                  tag.h3(
+                    class: "text-lg font-semibold",
+                    data: { color_customizer_target: "selectedName" }
+                  ) { "Select a color" },
+                  tag.p(
+                    class: "text-sm text-muted-foreground font-mono",
+                    data: { color_customizer_target: "selectedValue" }
+                  ) { "Click on a color swatch to adjust" }
+                ])
+              end
+            ])
+          end
+        ])
+      end
+    end
+
+    def render_adjustment_sliders
+      tag.div(class: "space-y-4", data: { color_customizer_target: "sliders" }) do
+        safe_join([
+          render_slider_control("Lightness", "lightness", 0, 100, 50),
+          render_slider_control("Chroma", "chroma", 0, 40, 20),
+          render_slider_control("Hue", "hue", 0, 360, 180)
+        ])
+      end
+    end
+
+    def render_slider_control(label, param, min, max, value)
+      tag.div(class: "space-y-1") do
+        safe_join([
+          tag.div(class: "flex items-center justify-between") do
+            safe_join([
+              tag.label(class: "text-xs font-medium") { label },
+              tag.span(
+                class: "text-xs font-mono text-muted-foreground",
+                data: { color_customizer_target: "#{param}Value" }
+              ) { value.to_s }
+            ])
+          end,
+          tag.div(
+            data: {
+              color_customizer_target: "#{param}Slider",
+              action: "slider-change->color-customizer#adjustColor"
+            }
+          ) do
+            render(M9sh::SliderComponent.new(
+              min: min,
+              max: max,
+              value: value,
+              step: param == "lightness" ? 1 : (param == "chroma" ? 1 : 1)
+            ))
+          end
+        ])
+      end
+    end
+
+    def render_adjustment_actions
+      tag.div(class: "flex gap-3") do
+        safe_join([
+          render(M9sh::ButtonComponent.new(
+            variant: :outline,
+            size: :sm,
+            data: { action: "click->color-customizer#resetColor" }
+          )) { "Reset to Default" },
+          render(M9sh::ButtonComponent.new(
+            variant: :default,
+            size: :sm,
+            data: { action: "click->color-customizer#applyColor" }
+          )) { "Apply Changes" }
+        ])
+      end
+    end
+
+    def render_export_section
+      tag.div(class: "h-full overflow-y-auto pr-2 flex flex-col gap-6") do
+        safe_join([
+          render_export_format_selector,
+          render_config_preview,
+          render_export_actions
+        ])
+      end
+    end
+
+    def render_export_format_selector
+      tag.div(class: "space-y-3") do
+        safe_join([
+          tag.h3(class: "text-sm font-semibold") { "Export Format" },
+          tag.div(class: "flex gap-2") do
+            safe_join([
+              render(M9sh::ButtonComponent.new(
+                variant: :outline,
+                size: :sm,
+                data: {
+                  action: "click->color-customizer#setExportFormat",
+                  color_customizer_format_param: "tailwind"
+                }
+              )) { "Tailwind v4" },
+              render(M9sh::ButtonComponent.new(
+                variant: :outline,
+                size: :sm,
+                data: {
+                  action: "click->color-customizer#setExportFormat",
+                  color_customizer_format_param: "css"
+                }
+              )) { "CSS Variables" },
+              render(M9sh::ButtonComponent.new(
+                variant: :outline,
+                size: :sm,
+                data: {
+                  action: "click->color-customizer#setExportFormat",
+                  color_customizer_format_param: "json"
+                }
+              )) { "JSON" }
+            ])
+          end
+        ])
+      end
+    end
+
+    def render_config_preview
+      tag.div(class: "space-y-3 flex-1 flex flex-col min-h-0") do
+        safe_join([
+          tag.h3(class: "text-sm font-semibold") { "Configuration" },
+          tag.textarea(
+            class: "flex-1 p-4 rounded-lg bg-muted text-sm font-mono overflow-auto resize-none border border-border focus:outline-none focus:ring-2 focus:ring-ring",
+            data: { color_customizer_target: "configPreview" },
+            placeholder: "// Configuration will appear here"
+          )
+        ])
+      end
+    end
+
+    def render_export_actions
+      tag.div(class: "flex gap-3", data: { color_customizer_target: "exportActions" }) do
+        safe_join([
+          render(M9sh::ButtonComponent.new(
+            variant: :default,
+            class: "flex-1 hidden",
+            data: {
+              action: "click->color-customizer#applyConfigChanges",
+              color_customizer_target: "applyButton"
+            }
+          )) { "Apply to UI" },
+          render(M9sh::ButtonComponent.new(
+            variant: :outline,
+            class: "flex-1",
+            data: { action: "click->color-customizer#copyConfig" }
+          )) { "Copy to Clipboard" },
+          render(M9sh::ButtonComponent.new(
+            variant: :outline,
+            class: "flex-1",
+            data: { action: "click->color-customizer#downloadConfig" }
+          )) { "Download File" }
+        ])
+      end
+    end
+
+    def render_footer
+      tag.div(class: "border-t border-border p-6") do
+        tag.div(class: "flex items-center justify-between") do
+          safe_join([
+            tag.p(class: "text-sm text-muted-foreground") do
+              "Color changes are saved automatically and persist across sessions"
+            end,
+            render(M9sh::ButtonComponent.new(
+              variant: :outline,
+              size: :sm,
+              data: { action: "click->color-customizer#resetAll" }
+            )) { "Reset All Colors" }
+          ])
+        end
+      end
+    end
+  end
+end

data/app/components/m9sh/dialog_close_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module M9sh
+  class DialogCloseComponent < BaseComponent
+    include Utilities
+
+    def initialize(as_child: false, **extra_attrs)
+      @as_child = as_child
+      super(**extra_attrs)
+    end
+
+    def call
+      if content.present?
+        # Wrap the child element with data attributes (as_child behavior)
+        tag.span(
+          content,
+          data: { action: "click->m9sh--dialog#close" }
+        )
+      else
+        # Render as a button if no content is provided
+        tag.button(
+          "Close",
+          **component_attrs("inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"),
+          type: "button",
+          data: { action: "click->m9sh--dialog#close" }
+        )
+      end
+    end
+  end
+end