ruby_cms 0.2.1.0 → 1.0.0

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

@@ -0,0 +1,106 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Link < Base
+    def initialize(href: "#", variant: :link, size: :md, icon: false, disabled: false, **attrs)
+      @href = href
+      @variant = variant.to_sym
+      @size = size.to_sym
+      @icon = icon
+      @disabled = disabled
+      super(**attrs)
+    end
+
+    def view_template(&)
+      a(**attrs, &)
+    end
+
+    private
+
+    def size_classes
+      if @icon
+        case @size
+        when :sm then "h-6 w-6"
+        when :md then "h-9 w-9"
+        when :lg then "h-10 w-10"
+        when :xl then "h-12 w-12"
+        end
+      else
+        case @size
+        when :sm then "px-3 py-1.5 h-8 text-xs"
+        when :md then "px-4 py-2 h-9 text-sm"
+        when :lg then "px-4 py-2 h-10 text-base"
+        when :xl then "px-6 py-3 h-12 text-base"
+        end
+      end
+    end
+
+    def primary_classes
+      [
+        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        size_classes
+      ]
+    end
+
+    def link_classes
+      [
+        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-primary underline-offset-4 hover:underline",
+        size_classes
+      ]
+    end
+
+    def secondary_classes
+      [
+        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-opacity-80",
+        size_classes
+      ]
+    end
+
+    def destructive_classes
+      [
+        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        size_classes
+      ]
+    end
+
+    def outline_classes
+      [
+        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        size_classes
+      ]
+    end
+
+    def ghost_classes
+      [
+        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground",
+        size_classes
+      ]
+    end
+
+    def disabled_classes
+      [
+        "cursor-not-allowed opacity-60 hover:bg-gray-50",
+        size_classes
+      ]
+    end
+
+    def default_classes
+      case @variant
+      when :primary then primary_classes
+      when :link then link_classes
+      when :secondary then secondary_classes
+      when :destructive then destructive_classes
+      when :outline then outline_classes
+      when :ghost then ghost_classes
+      end
+    end
+
+    def default_attrs
+      {
+        href: @href,
+        class: [ default_classes, (@disabled ? disabled_classes : nil) ].compact.join(" "),
+        aria_disabled: (@disabled ? "true" : nil)
+      }
+    end
+  end
+end

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

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class MaskedInput < Base
+    def view_template
+      Input(type: "text", **attrs)
+    end
+
+    private
+
+    def default_attrs
+      { data: { controller: "ruby-ui--masked-input" } }
+    end
+  end
+end

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Modal < Base
+    def initialize(open: false, **user_attrs)
+      @open = open
+      super(**user_attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "ruby-ui--modal",
+          ruby_ui__modal_open_value: @open.to_s
+        },
+        class: "inline-block"
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/modal/modal_action.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ModalAction < Base
+    def view_template(&)
+      render RubyUI::Button.new(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        variant: :primary
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/modal/modal_cancel.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ModalCancel < Base
+    def view_template(&)
+      render RubyUI::Button.new(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        variant: :outline,
+        data: {
+          action: "click->ruby-ui--modal#dismiss"
+        }
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/modal/modal_content.rb

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ModalContent < Base
+    def initialize(size: :md, **user_attrs)
+      @size = size.to_sym
+      super(**user_attrs)
+    end
+
+    def view_template(&block)
+      div { overlay(&block) }
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          ruby_ui__modal_target: "content"
+        }
+      }
+    end
+
+    def overlay(&block)
+      div(
+        data: {
+          ruby_ui__modal_target: "overlay",
+          action: "click->ruby-ui--modal#dismiss"
+        },
+        class: "hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+      ) do
+        container(&block)
+      end
+    end
+
+    def container(&)
+      div(
+        role: "alertdialog",
+        class: container_classes,
+        data: { action: "click->ruby-ui--modal#stopPropagation" },
+        &
+      )
+    end
+
+    def container_classes
+      base = [
+        "flex flex-col",
+        "fixed left-[50%] top-[50%] z-50",
+        "w-full max-h-screen overflow-y-auto",
+        "translate-x-[-50%] translate-y-[-50%]",
+        "gap-4 border border-gray-200 bg-white shadow-xl rounded-lg",
+        "duration-200"
+      ]
+
+      base.concat(size_classes).join(" ")
+    end
+
+    def size_classes
+      case @size
+      when :sm then [ "max-w-sm", "p-4" ]
+      when :md then [ "max-w-md", "p-6" ]
+      when :lg then [ "max-w-lg", "p-6" ]
+      when :xl then [ "max-w-2xl", "p-8" ]
+      else [ "max-w-md", "p-6" ]
+      end
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/modal/modal_description.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ModalDescription < Base
+    def view_template(&)
+      p(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "text-sm text-gray-600"
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/modal/modal_footer.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ModalFooter < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-col-reverse sm:flex-row sm:justify-center gap-2"
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/modal/modal_header.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ModalHeader < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-col space-y-2 text-center"
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/modal/modal_title.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ModalTitle < Base
+    def view_template(&)
+      h2(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "text-lg font-semibold text-gray-900 leading-none tracking-tight"
+      }
+    end
+  end
+end

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

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class NativeSelect < Base
+    def initialize(size: :default, **attrs)
+      @size = size
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(
+        class: "group/native-select relative w-fit has-[select:disabled]:opacity-50"
+      ) do
+        select(**attrs, &block)
+        render RubyUI::NativeSelectIcon.new
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          ruby_ui__form_field_target: "input",
+          action: "change->ruby-ui--form-field#onChange invalid->ruby-ui--form-field#onInvalid"
+        },
+        class: [
+          "border-border bg-transparent text-sm w-full min-w-0 appearance-none rounded-md border py-1 pr-8 pl-2.5 shadow-xs transition-[color,box-shadow] outline-none select-none ring-0 ring-ring/0",
+          "placeholder:text-muted-foreground",
+          "selection:bg-primary selection:text-primary-foreground",
+          "focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-2",
+          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+          "aria-invalid:ring-destructive/20 aria-invalid:border-destructive aria-invalid:ring-2",
+          (@size == :sm) ? "h-7 rounded-md py-0.5" : "h-9"
+        ]
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/native_select/native_select_group.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class NativeSelectGroup < Base
+    def view_template(&)
+      optgroup(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {}
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/native_select/native_select_icon.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class NativeSelectIcon < Base
+    def view_template(&block)
+      span(**attrs) do
+        if block
+          block.call
+        else
+          icon
+        end
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round",
+        class: "size-4",
+        aria_hidden: "true"
+      ) do |s|
+        s.path(d: "m6 9 6 6 6-6")
+      end
+    end
+
+    def default_attrs
+      {
+        class: "text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 select-none"
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/native_select/native_select_option.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class NativeSelectOption < Base
+    def view_template(&)
+      option(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {}
+    end
+  end
+end

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Pagination < Base
+    def view_template(&)
+      nav(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        aria: { label: "pagination" },
+        class: "mx-auto flex w-full justify-center",
+        role: "navigation"
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/pagination/pagination_content.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class PaginationContent < Base
+    def view_template(&)
+      ul(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-row items-center gap-1"
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/pagination/pagination_ellipsis.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class PaginationEllipsis < Base
+    def view_template(&block)
+      li do
+        span(**attrs) do
+          icon
+          span(class: "sr-only") { "More pages" }
+        end
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round",
+        class: "h-4 w-4"
+      ) do |s|
+        s.circle(cx: "12", cy: "12", r: "1")
+        s.circle(cx: "19", cy: "12", r: "1")
+        s.circle(cx: "5", cy: "12", r: "1")
+      end
+    end
+
+    def default_attrs
+      {
+        aria: { hidden: true },
+        class: "flex h-9 w-9 items-center justify-center"
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/pagination/pagination_item.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class PaginationItem < Base
+    def initialize(href: "#", active: false, **attrs)
+      @href = href
+      @active = active
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      li do
+        a(href: @href, **attrs, &block)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        aria: { current: @active ? "page" : nil },
+        class: [
+          RubyUI::Button.new(variant: @active ? :outline : :ghost).attrs[:class]
+        ]
+      }
+    end
+  end
+end

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

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

data/lib/generators/ruby_cms/templates/components/ruby_ui/popover/popover_content.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class PopoverContent < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          ruby_ui__popover_target: "content"
+        },
+        class: [
+          "hidden z-50 rounded-md border bg-background p-1 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",
+          "absolute"
+        ]
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/popover/popover_trigger.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class PopoverTrigger < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          ruby_ui__popover_target: "trigger"
+        },
+        class: "inline-block"
+      }
+    end
+  end
+end

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

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Progress < Base
+    def initialize(value: 0, **attrs)
+      @value = value.to_f.clamp(0, 100)
+
+      super(**attrs)
+    end
+
+    def view_template
+      div(**attrs) do
+        div(**indicator_attrs)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        role: "progressbar",
+        aria_valuenow: @value,
+        aria_valuemin: 0,
+        aria_valuemax: 100,
+        aria_valuetext: "#{@value}%",
+        class: "relative h-2 overflow-hidden rounded-full bg-primary/20 [&>*]:bg-primary"
+      }
+    end
+
+    def indicator_attrs
+      {
+        class: "h-full w-full flex-1",
+        style: "transform: translateX(-#{100 - @value}%)"
+      }
+    end
+  end
+end