ruby_cms 0.2.1.0 → 1.0.0

data/lib/generators/ruby_cms/templates/components/ruby_ui/command/command_dialog_content.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class CommandDialogContent < Base
+    SIZES = {
+      xs: "max-w-sm",
+      sm: "max-w-md",
+      md: "max-w-lg",
+      lg: "max-w-2xl",
+      xl: "max-w-4xl",
+      full: "max-w-full"
+    }
+
+    def initialize(size: :md, **attrs)
+      @size = size
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      template(data: { ruby_ui__command_target: "content" }) do
+        div(data: { controller: "ruby-ui--command" }) do
+          backdrop
+          div(**attrs, &block)
+        end
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        data_state: "open",
+        class: [
+          "fixed pointer-events-auto left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+          SIZES[@size]
+        ]
+      }
+    end
+
+    def backdrop
+      div(
+        data_state: "open",
+        data_action: "click->ruby-ui--command#dismiss esc->ruby-ui--command#dismiss",
+        class: "fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      )
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/command/command_dialog_trigger.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class CommandDialogTrigger < Base
+    DEFAULT_KEYBINDINGS = [
+      "keydown.ctrl+k@window",
+      "keydown.meta+k@window"
+    ].freeze
+
+    def initialize(keybindings: DEFAULT_KEYBINDINGS, **attrs)
+      @keybindings = keybindings.map { |kb| "#{kb}->ruby-ui--command#open" }
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          action: [ "click->ruby-ui--command#open", @keybindings.join(" ") ]
+        }
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/command/command_empty.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class CommandEmpty < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "py-6 text-center text-sm",
+        role: "presentation",
+        data: { ruby_ui__command_target: "empty" }
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/command/command_group.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class CommandGroup < Base
+    def initialize(title: nil, **attrs)
+      @title = title
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(**attrs) do
+        render_header if @title
+        render_items(&block)
+      end
+    end
+
+    private
+
+    def render_header
+      div(group_heading: @title) do
+        @title
+      end
+    end
+
+    def render_items(&)
+      div(group_items: "", role: "group", &)
+    end
+
+    def default_attrs
+      {
+        class: "overflow-hidden p-1 text-foreground [&_[group-heading]]:px-2 [&_[group-heading]]:py-1.5 [&_[group-heading]]:text-xs [&_[group-heading]]:font-medium [&_[group-heading]]:text-muted-foreground",
+        role: "presentation",
+        data: {
+          value: @title,
+          ruby_ui__command_target: "group"
+        }
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/command/command_input.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class CommandInput < Base
+    def initialize(placeholder: "Type a command or search...", **attrs)
+      @placeholder = placeholder
+      super(**attrs)
+    end
+
+    def view_template
+      input_container do
+        search_icon
+        input(**attrs)
+      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 input_container(&)
+      div(class: "flex items-center border-b px-3", &)
+    end
+
+    def default_attrs
+      {
+        class: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        placeholder: @placeholder,
+        data_action: "input->ruby-ui--command#filter keydown.down->ruby-ui--command#handleKeydown keydown.up->ruby-ui--command#handleKeydown keydown.enter->ruby-ui--command#handleKeydown keydown.esc->ruby-ui--command#dismiss",
+        data_ruby_ui__command_target: "input",
+        autocomplete: "off",
+        autocorrect: "off",
+        spellcheck: false,
+        autofocus: true,
+        aria_autocomplete: "list",
+        role: "combobox",
+        aria_expanded: true,
+        value: ""
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/command/command_item.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class CommandItem < Base
+    def initialize(value:, text: "", href: "#", **attrs)
+      @value = value
+      @text = text
+      @href = href
+      super(**attrs)
+    end
+
+    def view_template(&)
+      a(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "relative flex cursor-pointer select-none items-center gap-x-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-blue-50 hover:text-blue-700 aria-selected:bg-blue-100 aria-selected:text-blue-800 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all duration-150 group",
+        href: @href,
+        role: "option",
+        data: {
+          ruby_ui__command_target: "item",
+          value: @value,
+          text: @text
+        }
+        # aria_selected: "true", # Toggles aria-selected="true" on keydown
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/command/command_list.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class CommandList < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "divide-y divide-border"
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/container/container.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Container < Base
+    def initialize(layout: "single-column", **attrs)
+      @layout = layout
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    attr_reader :layout
+
+    def default_attrs
+      { class: "container md:mt-6 md:mb-6 #{layout_classes}" }
+    end
+
+    def layout_classes
+      case layout
+      when "single-column"
+        "py-6 md:py-12"
+      when "two-column"
+        "flex flex-col md:flex-row items-stretch py-6 md:py-12"
+      else
+        "flex flex-col md:flex-row items-stretch py-6 md:py-12"
+      end
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/container/container_section.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ContainerSection < Base
+    def initialize(layout: "single-column", **attrs)
+      @layout = layout
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    attr_reader :layout
+
+    def default_attrs
+      base_classes = case layout
+      when "single-column"
+        "w-full"
+      when "two-column"
+        "w-full md:w-1/2 p-6 flex flex-col justify-center"
+      else
+        "w-full"
+      end
+
+      { class: base_classes }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/context_menu/context_menu.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ContextMenu < Base
+    def initialize(options: {}, **attrs)
+      @options = options
+      @options[:trigger] ||= "manual"
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "ruby-ui--context-menu",
+          popover_options_value: @options.to_json
+        }
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/context_menu/context_menu_content.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ContextMenuContent < Base
+    def view_template(&block)
+      template(data: { ruby_ui__context_menu_target: "content" }) do
+        div(**attrs, &block)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        role: "menu",
+        aria_orientation: "vertical",
+        data_state: "open",
+        class:
+              "z-50 min-w-[8rem] outline-none pointer-events-auto overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        tabindex: "-1",
+        data_orientation: "vertical"
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/context_menu/context_menu_item.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ContextMenuItem < Base
+    def initialize(href: "#", checked: false, shortcut: nil, disabled: false, **attrs)
+      @href = href
+      @checked = checked
+      @shortcut = shortcut
+      @disabled = disabled
+
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      a(**attrs) do
+        render_checkmark if @checked
+        yield
+        render_shortcut if @shortcut
+      end
+    end
+
+    private
+
+    def render_checkmark
+      span(class: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center") do
+        span(data_state: "checked") do
+          svg(
+            width: "15",
+            height: "15",
+            viewbox: "0 0 15 15",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            class: "h-4 w-4"
+          ) do |s|
+            s.path(
+              d:
+                    "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
+              fill: "currentColor",
+              fill_rule: "evenodd",
+              clip_rule: "evenodd"
+            )
+          end
+        end
+      end
+    end
+
+    def render_shortcut
+      span(class: "ml-auto text-xs tracking-widest text-muted-foreground") { @shortcut }
+    end
+
+    def default_attrs
+      {
+        href: @href,
+        role: "menuitem",
+        class:
+              "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 pl-8",
+        tabindex: "-1",
+        data_orientation: "vertical",
+        data_action: "click->ruby-ui--context-menu#close",
+        data_ruby_ui__context_menu_target: "menuItem",
+        data_disabled: @disabled,
+        disabled: @disabled
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/context_menu/context_menu_label.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ContextMenuLabel < Base
+    def initialize(inset: false, **attrs)
+      @inset = inset
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def inset? = @inset
+
+    def default_attrs
+      {
+        class: [ "px-2 py-1.5 text-sm font-semibold text-foreground", inset?: "pl-8" ]
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/context_menu/context_menu_separator.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ContextMenuSeparator < Base
+    def view_template
+      div(**attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        role: "separator",
+        aria_orientation: "horizontal",
+        class: "-mx-1 my-1 h-px bg-border"
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/context_menu/context_menu_trigger.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ContextMenuTrigger < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          ruby_ui__context_menu_target: "trigger",
+          action: "contextmenu->ruby-ui--context-menu#handleContextMenu"
+        }
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/data_table/data_table.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTable < Base
+    register_element :turbo_frame, tag: "turbo-frame"
+
+    def initialize(id:, **attrs)
+      @id = id
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      turbo_frame(id: @id, target: "_top") do
+        div(**attrs) do
+          yield if block
+        end
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "w-full space-y-4",
+        data: { controller: "ruby-ui--data-table" }
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/data_table/data_table_bulk_actions.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTableBulkActions < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "hidden flex items-center gap-2",
+        data: { "ruby-ui--data-table-target": "bulkActions" }
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/data_table/data_table_column_toggle.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTableColumnToggle < Base
+    def initialize(columns:, **attrs)
+      @columns = columns
+      super(**attrs)
+    end
+
+    def view_template
+      div(**attrs) do
+        render RubyUI::DropdownMenu.new(class: "z-[60]") do
+          render RubyUI::DropdownMenuTrigger.new do
+            render RubyUI::Button.new(variant: :outline, size: :sm) do
+              plain "Columns"
+              # inline chevron-down SVG (lucide 24px, 1px stroke)
+              svg(
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                stroke_width: "2",
+                stroke_linecap: "round",
+                stroke_linejoin: "round",
+                class: "w-4 h-4 ml-1"
+              ) do |s|
+                s.polyline(points: "6 9 12 15 18 9")
+              end
+            end
+          end
+          render RubyUI::DropdownMenuContent.new(class: "z-[60]", wrapper_class: "z-[60]") do
+            @columns.each do |col|
+              label(class: "flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm cursor-pointer hover:bg-accent") do
+                input(
+                  type: "checkbox",
+                  checked: true,
+                  class: "h-4 w-4 rounded border border-input accent-primary cursor-pointer",
+                  data: {
+                    column_key: col[:key].to_s,
+                    action: "change->ruby-ui--data-table-column-visibility#toggle"
+                  }
+                )
+                span { plain col[:label] }
+              end
+            end
+          end
+        end
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "relative",
+        data: { controller: "ruby-ui--data-table-column-visibility" }
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/data_table/data_table_expand_toggle.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTableExpandToggle < Base
+    def initialize(controls:, expanded: false, label: "Toggle row details", **attrs)
+      @controls = controls
+      @expanded = expanded
+      @label = label
+      super(**attrs)
+    end
+
+    def view_template
+      button(
+        type: "button",
+        aria_expanded: @expanded.to_s,
+        aria_controls: @controls,
+        aria_label: @label,
+        data: {
+          action: "click->ruby-ui--data-table#toggleRowDetail"
+        },
+        **attrs
+      ) do
+        render_icon
+      end
+    end
+
+    private
+
+    def render_icon
+      # inline chevron-right SVG (lucide)
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round",
+        class: "h-4 w-4 transition-transform duration-150 group-aria-expanded:rotate-90"
+      ) do |s|
+        s.polyline(points: "9 18 15 12 9 6")
+      end
+    end
+
+    def default_attrs
+      {
+        class: "group inline-flex items-center justify-center h-8 w-8 rounded-md hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      }
+    end
+  end
+end