orbital_ui 0.3.1

data/app/components/orbital_ui/confirmation_dialog.rb

@@ -0,0 +1,142 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class ConfirmationDialog < Component
+    attribute :open, :boolean, default: false
+    attribute :dismissible, :boolean, default: true
+    attribute :size, :symbol, default: :default, only: [:sm, :default, :lg, :xl, :full]
+    attribute :title, :string, default: "Are you sure?"
+    attribute :description, :string, default: nil
+    attribute :cancel_text, :string, default: "Cancel"
+    attribute :confirm_text, :string, default: "Confirm"
+    attribute :action_url, :string, default: nil
+    attribute :method, :symbol, default: :post, only: [:get, :post, :patch, :put, :delete]
+    attribute :loading, :boolean, default: false
+
+    renders_one :cancel_action
+    renders_one :confirm_action
+
+    def call
+      render OrbitalUi::Modal.new(open: @open, dismissible: @dismissible, size: @size, **html_attributes) do
+        content_tag(:div, class: "Orbital-Dialog") do
+          safe_join([
+            dismissible_close_button,
+            header_section,
+            body_section,
+            footer_section
+          ].compact)
+        end
+      end
+    end
+
+    private
+
+    def dismissible_close_button
+      return nil unless @dismissible
+
+      content_tag(:button, type: "button", data: { action: "orbital-modal#close" },
+        class: "Orbital-Dialog-Close", "aria-label": "Close") do
+        close_icon
+      end
+    end
+
+    def close_icon
+      tag.svg(class: "Orbital-Icon", width: "16", height: "16", viewBox: "0 0 24 24",
+        fill: "none", stroke: "currentColor", "stroke-width": "2",
+        "stroke-linecap": "round", "stroke-linejoin": "round") do
+        safe_join([
+          tag.line(x1: "18", y1: "6", x2: "6", y2: "18"),
+          tag.line(x1: "6", y1: "6", x2: "18", y2: "18")
+        ])
+      end
+    end
+
+    def header_section
+      content_tag(:div, class: "Orbital-Dialog-Header") do
+        content_tag(:div) do
+          safe_join([
+            content_tag(:h2, @title, class: "Orbital-Dialog-Title"),
+            (@description ? content_tag(:p, @description, class: "Orbital-Dialog-Description") : nil)
+          ].compact)
+        end
+      end
+    end
+
+    def body_section
+      return nil unless content?
+
+      content_tag(:div, content, class: "Orbital-Dialog-Body")
+    end
+
+    def footer_section
+      if @action_url
+        form_footer
+      else
+        div_footer
+      end
+    end
+
+    def form_footer
+      content_tag(:form, action: @action_url, method: "post", class: "Orbital-Dialog-Footer") do
+        safe_join([
+          csrf_hidden_field,
+          method_hidden_field,
+          cancel_button,
+          confirm_button(:submit)
+        ].compact)
+      end
+    end
+
+    def div_footer
+      content_tag(:div, class: "Orbital-Dialog-Footer") do
+        safe_join([cancel_button, confirm_button(:button)])
+      end
+    end
+
+    def cancel_button
+      if cancel_action?
+        cancel_action
+      else
+        content_tag(:button, @cancel_text, type: "button",
+          data: { action: "orbital-modal#close" },
+          class: "Orbital-Button", "data-variant": "outline", "data-size": "default")
+      end
+    end
+
+    def confirm_button(type)
+      if confirm_action?
+        confirm_action
+      else
+        opts = { class: "Orbital-Button", "data-variant": "default", "data-size": "default", type: type }
+        opts[:disabled] = true if @loading
+        content_tag(:button, **opts) do
+          safe_join([spinner_icon, @confirm_text].compact)
+        end
+      end
+    end
+
+    def spinner_icon
+      return nil unless @loading
+
+      content_tag(:span, class: "Orbital-ConfirmationDialog-Spinner") do
+        tag.svg(class: "Orbital-Icon animate-spin", width: "16", height: "16", viewBox: "0 0 24 24",
+          fill: "none", stroke: "currentColor", "stroke-width": "2",
+          "stroke-linecap": "round", "stroke-linejoin": "round") do
+          tag.path(d: "M21 12a9 9 0 1 1-6.219-8.56")
+        end
+      end
+    end
+
+    def csrf_hidden_field
+      return nil unless defined?(Rails) && helpers.respond_to?(:form_authenticity_token)
+
+      tag.input(type: "hidden", name: "authenticity_token", value: helpers.form_authenticity_token)
+    end
+
+    def method_hidden_field
+      return nil if @method == :post || @method.nil?
+
+      tag.input(type: "hidden", name: "_method", value: @method)
+    end
+  end
+end

data/app/components/orbital_ui/delete_dialog.rb

@@ -0,0 +1,143 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class DeleteDialog < Component
+    attribute :open, :boolean, default: false
+    attribute :dismissible, :boolean, default: true
+    attribute :size, :symbol, default: :default, only: [:sm, :default, :lg, :xl, :full]
+    attribute :title, :string, default: "Delete item?"
+    attribute :description, :string, default: nil
+    attribute :cancel_text, :string, default: "Cancel"
+    attribute :confirm_text, :string, default: "Delete"
+    attribute :action_url, :string, default: nil
+    attribute :method, :symbol, default: :delete, only: [:get, :post, :patch, :put, :delete]
+    attribute :loading, :boolean, default: false
+    attribute :destructive, :boolean, default: true
+
+    renders_one :cancel_action
+    renders_one :confirm_action
+
+    def call
+      render OrbitalUi::Modal.new(open: @open, dismissible: @dismissible, size: @size, **html_attributes) do
+        content_tag(:div, class: "Orbital-Dialog", "data-destructive": @destructive || nil) do
+          safe_join([
+            dismissible_close_button,
+            header_section,
+            body_section,
+            footer_section
+          ].compact)
+        end
+      end
+    end
+
+    private
+
+    def dismissible_close_button
+      return nil unless @dismissible
+
+      content_tag(:button, type: "button", data: { action: "orbital-modal#close" },
+        class: "Orbital-Dialog-Close", "aria-label": "Close") do
+        close_icon
+      end
+    end
+
+    def close_icon
+      tag.svg(class: "Orbital-Icon", width: "16", height: "16", viewBox: "0 0 24 24",
+        fill: "none", stroke: "currentColor", "stroke-width": "2",
+        "stroke-linecap": "round", "stroke-linejoin": "round") do
+        safe_join([
+          tag.line(x1: "18", y1: "6", x2: "6", y2: "18"),
+          tag.line(x1: "6", y1: "6", x2: "18", y2: "18")
+        ])
+      end
+    end
+
+    def header_section
+      content_tag(:div, class: "Orbital-Dialog-Header") do
+        content_tag(:div) do
+          safe_join([
+            content_tag(:h2, @title, class: "Orbital-Dialog-Title"),
+            (@description ? content_tag(:p, @description, class: "Orbital-Dialog-Description") : nil)
+          ].compact)
+        end
+      end
+    end
+
+    def body_section
+      return nil unless content?
+
+      content_tag(:div, content, class: "Orbital-Dialog-Body")
+    end
+
+    def footer_section
+      if @action_url
+        form_footer
+      else
+        div_footer
+      end
+    end
+
+    def form_footer
+      content_tag(:form, action: @action_url, method: "post", class: "Orbital-Dialog-Footer") do
+        safe_join([
+          csrf_hidden_field,
+          method_hidden_field,
+          cancel_button,
+          confirm_button(:submit)
+        ].compact)
+      end
+    end
+
+    def div_footer
+      content_tag(:div, class: "Orbital-Dialog-Footer") do
+        safe_join([cancel_button, confirm_button(:button)])
+      end
+    end
+
+    def cancel_button
+      if cancel_action?
+        cancel_action
+      else
+        content_tag(:button, @cancel_text, type: "button",
+          data: { action: "orbital-modal#close" },
+          class: "Orbital-Button", "data-variant": "outline", "data-size": "default")
+      end
+    end
+
+    def confirm_button(type)
+      if confirm_action?
+        confirm_action
+      else
+        opts = { class: "Orbital-Button", "data-variant": "destructive", "data-size": "default", type: type }
+        opts[:disabled] = true if @loading
+        content_tag(:button, **opts) do
+          safe_join([spinner_icon, @confirm_text].compact)
+        end
+      end
+    end
+
+    def spinner_icon
+      return nil unless @loading
+
+      content_tag(:span, class: "Orbital-ConfirmationDialog-Spinner") do
+        tag.svg(class: "Orbital-Icon animate-spin", width: "16", height: "16", viewBox: "0 0 24 24",
+          fill: "none", stroke: "currentColor", "stroke-width": "2",
+          "stroke-linecap": "round", "stroke-linejoin": "round") do
+          tag.path(d: "M21 12a9 9 0 1 1-6.219-8.56")
+        end
+      end
+    end
+
+    def csrf_hidden_field
+      return nil unless defined?(Rails) && helpers.respond_to?(:form_authenticity_token)
+
+      tag.input(type: "hidden", name: "authenticity_token", value: helpers.form_authenticity_token)
+    end
+
+    def method_hidden_field
+      return nil if @method == :post || @method.nil?
+
+      tag.input(type: "hidden", name: "_method", value: @method)
+    end
+  end
+end

data/app/components/orbital_ui/dialog.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class Dialog < Component
+    attribute :open, :boolean, default: false
+    attribute :dismissible, :boolean, default: true
+    attribute :size, :symbol, default: :default, only: [:sm, :default, :lg, :xl, :full]
+
+    renders_one :header
+    renders_one :body
+    renders_one :footer
+
+    orb_template <<-ORB
+      <Modal open={@open} dismissible={@dismissible} size={@size} **html_attributes>
+        <div class="Orbital-Dialog">
+          <button :if={@dismissible}
+            type="button"
+            data-action="orbital-modal#close"
+            class="Orbital-Dialog-Close"
+            aria-label="Close">
+            <svg class="Orbital-Icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+
+          <div class="Orbital-Dialog-Header" :if={header}>
+            {{header}}
+          </div>
+
+          <div class="Orbital-Dialog-Body" :if={body}>
+            {{body}}
+          </div>
+
+          <div class="Orbital-Dialog-Body" :if={!body}>
+            {{content}}
+          </div>
+
+          <div class="Orbital-Dialog-Footer" :if={footer}>
+            {{footer}}
+          </div>
+        </div>
+      </Modal>
+    ORB
+  end
+end

data/app/components/orbital_ui/dialog_frame.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class DialogFrame < Component
+    orb_template <<-ORB
+      <turbo-frame id={portal_id}>
+        {{content}}
+      </turbo-frame>
+    ORB
+
+    private
+
+    def portal_id
+      OrbitalUi.configuration.dialog_portal_id
+    end
+  end
+end

data/app/components/orbital_ui/dropdown.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class Dropdown < Component
+    attribute :id, :string, default: -> { "popover-#{SecureRandom.hex(4)}" }
+    attribute :on, :symbol, default: :click, only: [:click, :hover]
+    attribute :position, :symbol, default: :s, only: [:auto, :n, :ne, :e, :se, :s, :sw, :w, :nw]
+    attribute :label, :string
+    attribute :variant, :symbol, default: :nil
+    attribute :fullwidth, :boolean, default: false
+
+    renders_one :trigger
+
+    orb_template <<-ORB
+      <div **html_attributes>
+
+        <div data-orbital-popover-target="trigger" :if={trigger}>
+          {{trigger}}
+        </div>
+
+        <Button
+          variant={@variant}
+          size={@label.blank? ? :icon : :default}
+          data-orbital-popover-target="trigger"
+          :if={!trigger}>
+          <span :if={@label}>{{@label}}</span>
+          <Icon name="chevron-down" size="sm"/>
+        </Button>
+
+        <div
+          popover
+          id={@id}
+          data-orbital-popover-target="content"
+          class="Orbital-Popover Orbital-Dropdown"
+          data-position={@position} :if={content}>
+          {{content}}
+        </div>
+      </div>
+    ORB
+
+    private
+
+    def default_attributes
+      super.merge({
+        class: class_names(
+          "Orbital-Dropdown",
+          "Orbital-Dropdown--fullwidth": @fullwidth
+        ),
+        data: {
+          controller: "orbital-popover",
+          "orbital-popover-trigger-value": @on,
+          "orbital-popover-position-value": @position,
+          state: "closed"
+        }
+      })
+    end
+  end
+end

data/app/components/orbital_ui/expander.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+class OrbitalUi::Expander < OrbitalUi::Component
+  attribute :vertical, type: :boolean, default: false
+
+  orb_template <<-ORB
+    <div **html_attributes></div>
+  ORB
+
+  private
+
+  def default_attributes
+    super.merge(
+      class: class_names(
+        "Orbital-Expander",
+        "Orbital-Expander--vertical": @vertical
+      )
+    )
+  end
+end

data/app/components/orbital_ui/grid.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class Grid < Component
+    attribute :columns, :string, default: "1"
+    attribute :gap, :string, default: "4"
+
+    orb_template <<-ORB
+      <div **html_attributes>{{content}}</div>
+    ORB
+
+    private
+
+    def default_attributes
+      super.merge(
+        class: "Orbital-Grid",
+        "data-columns": @columns,
+        "data-gap": @gap
+      )
+    end
+  end
+end

data/app/components/orbital_ui/heading.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+class OrbitalUi::Heading < OrbitalUi::Component
+  attribute :size, :string, only: %w[xs sm md lg xl 2xl 3xl 4xl], default: "md"
+  attribute :weight, :symbol, only: %i[light normal medium semibold bold], default: :semibold
+  attribute :align, :symbol, only: %i[left center right], default: :left
+  attribute :tone, :symbol, only: %i[default subdued], default: :default
+  attribute :as, :string, default: "span"
+
+  def call
+    content_tag @as, **html_attributes do
+      content
+    end
+  end
+
+  private
+
+  def default_attributes
+    super.merge(
+      class: class_names(
+        'Orbital-Heading',
+        size_classes,
+        weight_classes
+      ),
+      "data-tone": @tone,
+      "data-align": @align
+    )
+  end
+
+  def size_classes
+    case @size
+    when 'xs'
+      "text-heading-xs"
+    when 'sm'
+      "text-heading-sm"
+    when 'md'
+      "text-heading-md"
+    when 'lg'
+      "text-heading-lg"
+    when 'xl'
+      "text-heading-xl"
+    when '2xl'
+      "text-heading-2xl"
+    when '3xl'
+      "text-heading-3xl"
+    when '4xl'
+      "text-heading-4xl"
+    end
+  end
+
+  def weight_classes
+    case @weight
+    when :light
+      "font-light"
+    when :normal
+      "font-normal"
+    when :medium
+      "font-medium"
+    when :semibold
+      "font-semibold"
+    when :bold
+      "font-bold"
+    end
+  end
+end

data/app/components/orbital_ui/icon.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class OrbitalUi::Icon < OrbitalUi::Component
+  attribute :name, :string, required: true
+  attribute :size, :symbol, only: %i[xs sm md lg xl], default: :md
+
+  def call
+    tag.div(**html_attributes) do
+      OrbitalUi::Icons.render(@name)
+    end
+  end
+
+  private
+
+  def default_attributes
+    super.merge(
+      class: 'Orbital-Icon',
+      "data-size": @size
+    )
+  end
+end

data/app/components/orbital_ui/image.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+class OrbitalUi::Image < OrbitalUi::Component
+  attribute :asset, :string
+  attribute :src, :string
+  attribute :alt, :string, default: ""
+  attribute :width, :integer, default: 32
+  attribute :height, :integer, default: 32
+
+  def initialize(kwargs = {})
+    super
+    return if @asset.present? ^ @src.present?
+
+    raise ArgumentError, "Image requires exactly one of :asset or :src"
+  end
+
+  def call
+    tag.img(src: @src.presence || asset_path(@asset), alt: @alt, width: @width, height: @height, **html_attributes)
+  end
+
+  private
+
+  def default_attributes
+    super.merge(class: 'Orbital-Image')
+  end
+end

data/app/components/orbital_ui/inline_stack.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class InlineStack < Component
+    attribute :gap, :string, default: "4"
+    attribute :align, :symbol, default: :stretch, only: %i[start center end stretch]
+    attribute :justify, :symbol, default: :start, only: %i[start center end between around evenly]
+    attribute :padding, :string
+    attribute :wrap, :string
+
+    orb_template <<-ORB
+      <div **html_attributes>{{content}}</div>
+    ORB
+
+    private
+
+    def default_attributes
+      attrs = super.merge(
+        class: "Orbital-InlineStack",
+        "data-gap": @gap,
+        "data-align": @align,
+        "data-justify": @justify,
+        "data-padding": @padding
+      )
+      if @wrap
+        attrs[:"data-wrap"] = @wrap == "reverse" ? "reverse" : true
+      end
+      attrs
+    end
+  end
+end

data/app/components/orbital_ui/kbd.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class OrbitalUi::Kbd < OrbitalUi::Component
+  orb_template <<-ORB
+    <kbd **html_attributes>
+      {{content}}
+    </kbd>
+  ORB
+
+  private
+
+  def default_attributes
+    super.merge(class: 'Orbital-Kbd')
+  end
+end

data/app/components/orbital_ui/kbd_group.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class OrbitalUi::KbdGroup < OrbitalUi::Component
+  orb_template <<-ORB
+    <span **html_attributes>
+      {{content}}
+    </span>
+  ORB
+
+  private
+
+  def default_attributes
+    super.merge(class: 'Orbital-KbdGroup')
+  end
+end