ruby_cms 0.2.1.1 → 1.0.0

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

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Clipboard < Base
+    def initialize(options: {}, success: "Copied!", error: "Copy Failed!", **attrs)
+      @options = options
+      @success = success
+      @error = error
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(**attrs) do
+        div(&block)
+        success_popover
+        error_popover
+      end
+    end
+
+    private
+
+    def success_popover
+      ClipboardPopover(type: :success) { @success }
+    end
+
+    def error_popover
+      ClipboardPopover(type: :error) { @error }
+    end
+
+    def default_attrs
+      {
+        data: {
+          controller: "ruby-ui--clipboard",
+          action: "click@window->ruby-ui--clipboard#onClickOutside",
+          ruby_ui__clipboard_success_value: @success,
+          ruby_ui__clipboard_error_value: @error,
+          ruby_ui__clipboard_options_value: @options.to_json
+        }
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/clipboard/clipboard_popover.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ClipboardPopover < Base
+    def initialize(type:, **attrs)
+      @type = type
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(
+        class: "hidden",
+        style: "width: max-content; position: absolute; top: 0; left: 0;",
+        data: { ruby_ui__clipboard_target: clipboard_target }
+      ) do
+        div(**attrs, &block)
+      end
+    end
+
+    private
+
+    def clipboard_target
+      case @type
+      when :success
+        "successPopover"
+      when :error
+        "errorPopover"
+      end
+    end
+
+    def default_attrs
+      {
+        data: {
+          state: :open
+        },
+        class: "z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none 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"
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/clipboard/clipboard_source.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ClipboardSource < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          ruby_ui__clipboard_target: "source"
+        }
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/clipboard/clipboard_trigger.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ClipboardTrigger < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          ruby_ui__clipboard_target: "trigger",
+          action: "click->ruby-ui--clipboard#copy"
+        }
+      }
+    end
+  end
+end

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

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+require "rouge"
+
+module RubyUI
+  class Codeblock < Base
+    FORMATTER = ::Rouge::Formatters::HTML.new
+    ROUGE_CSS = Rouge::Themes::Github.mode(:dark).render(scope: ".highlight") # See themes here: https://rouge-ruby.github.io/docs/Rouge/CSSTheme.html
+
+    def initialize(code, syntax:, clipboard: true, clipboard_success: "Copied!", clipboard_error: "Copy failed!", **attrs)
+      @code = code
+      @syntax = syntax.to_sym
+      @clipboard = clipboard
+      @clipboard_success = clipboard_success
+      @clipboard_error = clipboard_error
+
+      if @syntax == :ruby || @syntax == :html
+        @code = @code.gsub(/(?:^|\G) {2}/m, "	")
+      end
+
+      super(**attrs)
+    end
+
+    def view_template
+      style { ROUGE_CSS } # For faster load times, move this to the head of your document. (Also move ROUGE_CSS value to head of document)
+      if @clipboard
+        with_clipboard
+      else
+        codeblock
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        style: { tab_size: 2 },
+        class: "highlight text-sm max-h-[350px] after:content-none flex font-mono overflow-auto overflow-x rounded-md border !bg-stone-900 [&_pre]:p-4"
+      }
+    end
+
+    def with_clipboard
+      RubyUI.Clipboard(success: @clipboard_success, error: @clipboard_error, class: "relative") do
+        RubyUI.ClipboardSource do
+          codeblock
+        end
+        div(class: "absolute top-2 right-2") do
+          RubyUI.ClipboardTrigger do
+            RubyUI.Button(variant: :ghost, size: :sm, icon: true, class: "text-white hover:text-white hover:bg-white/20") { clipboard_icon }
+          end
+        end
+      end
+    end
+
+    def codeblock
+      div(**attrs) do
+        div(class: "after:content-none") do
+          pre { raw(safe(FORMATTER.format(lexer.lex(@code)))) }
+        end
+      end
+    end
+
+    def lexer
+      Rouge::Lexer.find(@syntax)
+    end
+
+    def clipboard_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:
+            "M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"
+        )
+      end
+    end
+
+    def check_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: "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+        )
+      end
+    end
+  end
+end

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

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Collapsible < Base
+    def initialize(open: false, **attrs)
+      @open = open
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "ruby-ui--collapsible",
+          ruby_ui__collapsible_open_value: @open
+        }
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/collapsible/collapsible_content.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class CollapsibleContent < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: { ruby_ui__collapsible_target: "content" },
+        class: "overflow-y-hidden"
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/collapsible/collapsible_trigger.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class CollapsibleTrigger < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          action: "click->ruby-ui--collapsible#toggle"
+        }
+      }
+    end
+  end
+end

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Combobox < Base
+    def initialize(term: "items", **)
+      @term = term
+      super(**)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        role: "combobox",
+        data: {
+          controller: "ruby-ui--combobox",
+          ruby_ui__combobox_term_value: @term.to_s
+        }
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/combobox/combobox_checkbox.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxCheckbox < Base
+    def view_template
+      input(type: "checkbox", **attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [
+          "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "disabled:cursor-not-allowed disabled:opacity-50"
+        ],
+        data: {
+          ruby_ui__combobox_target: "input",
+          action: "ruby-ui--combobox#inputChanged"
+        }
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/combobox/combobox_empty_state.rb

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

data/lib/generators/ruby_cms/templates/components/ruby_ui/combobox/combobox_item.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxItem < Base
+    def view_template(&)
+      label(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [
+          "flex flex-row w-full text-wrap [&>span,&>div]:truncate gap-2 items-center rounded-sm px-2 py-1 text-sm outline-none cursor-pointer",
+          "select-none has-[:checked]:bg-accent hover:bg-accent p-2",
+          "[&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0 aria-[current=true]:bg-accent aria-[current=true]:ring aria-[current=true]:ring-offset-2"
+        ],
+        role: "option",
+        data: {
+          ruby_ui__combobox_target: "item"
+        }
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/combobox/combobox_list.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxList < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-col gap-1 p-1 max-h-72 overflow-y-auto text-foreground",
+        role: "listbox"
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/combobox/combobox_list_group.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxListGroup < Base
+    LABEL_CLASSES = "before:content-[attr(label)] before:px-2 before:py-1.5 before:text-xs before:font-medium before:text-muted-foreground before:not-italic"
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [ "hidden has-[label:not(.hidden)]:flex flex-col py-1 gap-1 border-b", LABEL_CLASSES ],
+        role: "group"
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/combobox/combobox_popover.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxPopover < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "inset-auto m-0 absolute border bg-background shadow-lg rounded-lg",
+        role: "popover",
+        autofocus: true,
+        popover: true,
+        data: {
+          ruby_ui__combobox_target: "popover",
+          action: %w[
+            keydown.down->ruby-ui--combobox#keyDownPressed
+            keydown.up->ruby-ui--combobox#keyUpPressed
+            keydown.enter->ruby-ui--combobox#keyEnterPressed
+            keydown.esc->ruby-ui--combobox#closeDialog:prevent
+            resize@window->ruby-ui--combobox#updatePopoverWidth
+          ]
+        }
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/combobox/combobox_radio.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxRadio < Base
+    def view_template
+      input(type: "radio", **attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "aspect-square h-4 w-4 rounded-full border border-primary accent-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        data: {
+          ruby_ui__combobox_target: "input",
+          ruby_ui__form_field_target: "input",
+          action: %w[
+            ruby-ui--combobox#inputChanged
+            input->ruby-ui--form-field#onInput
+            invalid->ruby-ui--form-field#onInvalid
+          ]
+        }
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/combobox/combobox_search_input.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxSearchInput < Base
+    def initialize(placeholder:, **)
+      @placeholder = placeholder
+      super(**)
+    end
+
+    def view_template
+      div class: "flex text-muted-foreground items-center border-b px-3" do
+        icon
+        input(**attrs)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        type: "search",
+        class: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none border-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        role: "searchbox",
+        placeholder: @placeholder,
+        data: {
+          ruby_ui__combobox_target: "searchInput",
+          action: "keyup->ruby-ui--combobox#filterItems search->ruby-ui--combobox#filterItems"
+        },
+        autocomplete: "off",
+        autocorrect: "off",
+        spellcheck: "false"
+      }
+    end
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        class: "mr-2 h-4 w-4 shrink-0 opacity-50",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do |s|
+        s.circle(cx: "11", cy: "11", r: "8")
+        s.path(
+          d: "m21 21-4.3-4.3"
+        )
+      end
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/combobox/combobox_toggle_all_checkbox.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxToggleAllCheckbox < Base
+    def view_template
+      input(type: "checkbox", **attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [
+          "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "disabled:cursor-not-allowed disabled:opacity-50"
+        ],
+        data: {
+          ruby_ui__combobox_target: "toggleAll",
+          action: "change->ruby-ui--combobox#toggleAllItems"
+        }
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/combobox/combobox_trigger.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxTrigger < Base
+    def initialize(placeholder: "", **)
+      @placeholder = placeholder
+      super(**)
+    end
+
+    def view_template
+      button(**attrs) do
+        span(class: "truncate", data: { ruby_ui__combobox_target: "triggerContent" }) do
+          @placeholder
+        end
+        icon
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        type: "button",
+        class: "flex h-full w-full items-center whitespace-nowrap rounded-md text-sm 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 justify-between",
+        data: {
+          placeholder: @placeholder,
+          ruby_ui__combobox_target: "trigger",
+          action: "ruby-ui--combobox#openPopover"
+        },
+        aria: {
+          haspopup: "listbox",
+          expanded: "false"
+        }
+      }
+    end
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        class: "ml-2 h-4 w-4 shrink-0 opacity-50",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do |s|
+        s.path(
+          d: "m7 15 5 5 5-5"
+        )
+        s.path(
+          d: "m7 9 5-5 5 5"
+        )
+      end
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Command < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class CommandDialog < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: { controller: "ruby-ui--command" }
+      }
+    end
+  end
+end