orbital_ui 0.3.1

data/app/components/orbital_ui/text.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+class OrbitalUi::Text < OrbitalUi::Component
+  SIZE_CLASSES = { xs: "text-body-xs", sm: "text-body-sm", lg: "text-body-lg", xl: "text-body-xl" }.freeze
+  WEIGHT_CLASSES = { light: "font-light", medium: "font-medium", semibold: "font-semibold", bold: "font-bold" }.freeze
+
+  attribute :size, :symbol, only: %i[xs sm md lg xl], default: :md
+  attribute :weight, :symbol, only: %i[light normal medium semibold bold], default: :normal
+  attribute :align, :symbol, only: %i[left center right], default: :left
+  attribute :tone, :symbol, only: %i[default subdued success warning danger info magic], default: :default
+  attribute :as, :string, default: "span"
+
+  def call
+    content_tag @as, **html_attributes do
+      content
+    end
+  end
+
+  private
+
+  def default_attributes
+    attrs = super.merge(
+      class: class_names(
+        'Orbital-Text',
+        size_classes,
+        weight_classes
+      )
+    )
+    attrs[:"data-tone"] = @tone unless @tone == :default
+    attrs[:"data-align"] = @align unless @align == :left
+    attrs
+  end
+
+  def size_classes
+    SIZE_CLASSES[@size]
+  end
+
+  def weight_classes
+    WEIGHT_CLASSES[@weight]
+  end
+end

data/app/components/orbital_ui/text_field.rb

@@ -0,0 +1,132 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class TextField < Component
+    attribute :type, :string, default: "text"
+    attribute :disabled, :boolean, default: false
+    attribute :readonly, :boolean, default: false
+    attribute :name, :string, default: nil
+    attribute :value, :string, default: nil
+    attribute :label, :string, default: nil
+    attribute :labelHidden, :boolean, default: false
+    attribute :iconLeft, :any, default: nil
+    attribute :iconRight, :any, default: nil
+    attribute :prefix, :string, default: nil
+    attribute :suffix, :string, default: nil
+    attribute :multiline, :integer, default: nil
+    attribute :required, :boolean, default: false
+    attribute :placeholder, :string, default: nil
+    attribute :help, :string, default: nil
+    attribute :error, :string, default: nil
+    attribute :autofocus, :boolean, default: false
+    attribute :fullwidth, :boolean, default: false
+    attribute :rightAligned, :boolean, default: false
+    attribute :resizable, :boolean, default: false
+
+    orb_template <<-ORB
+    <div class="Orbital-Field" data-fullwidth={@fullwidth || nil}>
+      <label for={input_id} class="Orbital-Field-Label" data-hidden={@labelHidden || nil} :if={render_label?}>
+        <Text size="sm" weight=medium>{{label_text}}</Text>
+      </label>
+      <div class="Orbital-Input relative flex items-center">
+        <div class="Orbital-Input-Icon" data-position="left" :if={@iconLeft || @prefix}>
+          <Icon name={@iconLeft} size=md class="p-1 text-gray-300" :if={@iconLeft} />
+          <Text tone="subdued" :if={@prefix}>{{ @prefix }}</Text>
+        </div>
+        {{ render_input }}
+        <div class="Orbital-Input-Icon" data-position="right" :if={@iconRight || @suffix}>
+          <Icon name={@iconRight} size=md class="p-1 text-gray-300" :if={@iconRight} />
+          <Text tone="subdued" :if={@suffix}>{{ @suffix }}</Text>
+        </div>
+      </div>
+      <div class="Orbital-Field-Help leading-none" :if={help? || error?}>
+        {% if error? %}
+          <Text size="sm" weight=medium tone="danger" class="leading-none!">{{ @error }}</Text>
+        {% else %}
+          <Text size="sm" tone="subdued" class="leading-none!">{{ @help }}</Text>
+        {% end %}
+      </div>
+    </div>
+    ORB
+
+    private
+
+    def label_classes
+      "Orbital-Field-Label"
+    end
+
+    def label_text
+      @label || @name.to_s.humanize
+    end
+
+    def render_label?
+      (@label.present? || @name.present?) && !@labelHidden
+    end
+
+    def help?
+      @help.present?
+    end
+
+    def error?
+      @error.present?
+    end
+
+    def render_input
+      common_opts = {
+        id: input_id,
+        name: @name,
+        value: @value,
+        disabled: @disabled,
+        readonly: @readonly,
+        required: @required,
+        placeholder: @placeholder,
+        autofocus: @autofocus,
+        autocomplete: "off",
+        class: input_classes,
+        "data-error": error? || nil,
+        "data-align": @rightAligned ? "right" : nil
+      }
+
+      if @multiline
+        tag.textarea(**common_opts, rows: @multiline)
+      else
+        tag.input(type: @type, **common_opts)
+      end
+    end
+
+    def input_padding_left
+      if @iconLeft && @prefix
+        "pl-11"
+      elsif @iconLeft || @prefix
+        "pl-8"
+      else
+        "pl-2"
+      end
+    end
+
+    def input_padding_right
+      if @iconRight && @suffix
+        "pr-10"
+      elsif @iconRight || @suffix
+        "pr-8"
+      else
+        "pr-2"
+      end
+    end
+
+    def input_classes
+      padding_left = input_padding_left
+      padding_right = input_padding_right
+
+      class_names(
+        padding_left,
+        padding_right,
+        "noresize" => !@resizable
+      )
+    end
+
+    def input_id
+      @id ||= "input-#{SecureRandom.hex(4)}"
+    end
+  end
+end

data/app/components/orbital_ui/tooltip.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class Tooltip < Component
+    attribute :id, :string, default: -> { "popover-#{SecureRandom.hex(4)}" }
+    attribute :on, :symbol, default: :hover, only: [:click, :hover]
+    attribute :position, :symbol, default: :n, only: [:auto, :n, :ne, :e, :se, :s, :sw, :w, :nw]
+    attribute :text, :string, default: ""
+
+    orb_template <<-ORB
+      <div **html_attributes>
+        <div data-orbital-popover-target="trigger">
+          {{content}}
+        </div>
+        <div
+          popover
+          id={@id}
+          data-orbital-popover-target="content"
+          class="Orbital-Tooltip-Content"
+          role="tooltip"
+          data-position={@position}>
+            {{@text}}
+        </div>
+      </div>
+    ORB
+
+    private
+
+    def default_attributes
+      super.merge(
+        class: "Orbital-Tooltip",
+        data: {
+          'controller' => "orbital-popover",
+          'orbital-popover-trigger-value' => @on,
+          'orbital-popover-position-value' => @position,
+          'orbital-popover-show-delay-value' => 200,
+          'orbital-popover-hide-delay-value' => 0
+        }
+      )
+    end
+  end
+end

data/app/components/orbital_ui/typography.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class Typography < Component
+    TAG_MAPPING = {
+      h1: :h1,
+      h2: :h2,
+      h3: :h3,
+      h4: :h4,
+      p: :p,
+      blockquote: :blockquote,
+      list: :ul,
+      lead: :p,
+      large: :div,
+      small: :small,
+      muted: :p
+    }.freeze
+
+    attribute :variant, :symbol, default: :p, only: TAG_MAPPING.keys
+
+    def call
+      content_tag(tag_name, content, **html_attributes)
+    end
+
+    private
+
+    def tag_name
+      TAG_MAPPING[@variant] || :p
+    end
+
+    def default_attributes
+      super.merge(
+        class: "Orbital-Typography",
+        "data-variant": @variant
+      )
+    end
+  end
+end

data/lib/orbital_ui/attribute_utils.rb

@@ -0,0 +1,152 @@
+# frozen_string_literal: true
+
+require "active_support/core_ext/hash/keys"
+
+module OrbitalUi
+  module AttributeUtils
+    # DEFAULT_MERGEABLE_ATTRIBUTES is a list of HTML attributes where the value
+    # contain multiple elements separated by spaces. We use it to target values
+    # to split so the arrays can be cleanly merged.
+    #
+    # They are stored as nested arrays so when we're walking multiple
+    # levels on the deep merge the structure can be identified. This means
+    # the library works with the Rails-preferred format of
+    # `aria: { describedby: "xyz" }` rather than `"aria-describedby" => "xyz"`
+    DEFAULT_MERGEABLE_ATTRIBUTES = [
+      %i[class],
+      %i[style],
+      %i[aria controls],
+      %i[aria describedby],
+      %i[aria flowto],
+      %i[aria labelledby],
+      %i[data aria_controls],
+      %i[data action],
+      %i[data controller],
+      %i[aria owns],
+      %i[rel]
+    ].freeze
+
+    refine Hash do
+      # Merge the incoming hash into the current one in a way that suits
+      # HTML attributes.
+      #
+      # @param custom [Hash] the incoming hash
+      # @param parents [Array] used to keep track of the keys that have already been
+      #   merged, *don't supply this unless the method is called during recursion*
+      # @mergeable_attributes [Array<Array<Symbol>>] Mergeable attributes are
+      #   HTML attributes can contain lists made from space-separated strings. We
+      #   convert them to arrays so they can be cleanly merged. Rails accepts them
+      #   as arrays so there's no need to convert back to strings.
+      #
+      # @example
+      #   original = { class: "red", data: { size: "medium", controller: "comment" } }
+      #   incoming = { class: "blue", data: { controller: "reply" } }
+      #
+      #   original.merge_html_attributes(incoming)
+      #
+      #   => {:class=>["red", "blue"], :data=>{:size=>"medium", :controller=>"reply comment"}}
+      #
+      def merge_html_attributes(custom, parents = [], mergeable_attributes: DEFAULT_MERGEABLE_ATTRIBUTES)
+        return custom unless custom.is_a?(Hash)
+
+        overrides = custom.deep_symbolize_keys
+        originals = deep_symbolize_keys
+
+        originals.each_with_object(originals) do |(key, value), merged|
+          next unless overrides.key?(key)
+
+          merged[key] =
+            process_pair(key, value, parents: parents, overrides: overrides, mergeable_attributes: mergeable_attributes)
+
+          overrides.delete(key)
+        end.merge(overrides)
+      end
+
+      # Remove unwanted attributes from a the hash and any values that are hashes
+      # recursively. In particular we don't care for empty hashes, arrays,
+      # strings that are empty or just contain spaces and nils.
+      #
+      # It preserves +true+ and +false+.
+      #
+      # @return [Hash] the tidied hash
+      # @example
+      #   { class: "blue", title: nil, lang: "", aria: { describedby: [] } }.deep_tidy
+      #
+      #   => { class: "blue" }
+      #
+      def deep_tidy
+        each_with_object({}) { |(k, v), tidied| (tidied[k] = tidy_value(v)) unless v.nil? }.compact
+      end
+
+      private
+
+      def process_pair(key, value, parents:, overrides:, mergeable_attributes:)
+        combine_values(
+          value,
+          overrides[key],
+          parents: [*parents, *key],
+          mergeable_attributes: mergeable_attributes
+        )
+      end
+
+      def tidy_value(value)
+        case value
+        when TrueClass, FalseClass then value
+        when Hash                  then tidy_hash(value)
+        when Array                 then tidy_array(value)
+        else                            tidy_remaining(value)
+        end
+      end
+
+      def tidy_hash(hash)
+        return nil if hash.empty?
+
+        hash.deep_tidy
+      end
+
+      def tidy_array(array)
+        return nil if array.empty?
+
+        array.filter_map { |v| tidy_value(v) }
+      end
+
+      def tidy_remaining(value)
+        # Strip empty strings - Rails converts them to bare attributes
+        # for example:
+        #    tag.div(hidden: "", data: { turbo_stream: "" })
+        # -> <div hidden data-turbo-stream></div>
+        value.to_s.strip.presence
+      end
+
+      def combine_values(value, override, **kwargs)
+        case split_attribute_list(value, **kwargs)
+        when Array
+          combine_array(value, override, **kwargs)
+        when Hash
+          combine_hash(value, override, **kwargs)
+        else
+          split_attribute_list(override, **kwargs)
+        end
+      end
+
+      def combine_array(originals, overrides, parents:, mergeable_attributes:)
+        return overrides if overrides.nil?
+        return overrides unless mergeable_attributes.include?(parents)
+
+        (try_split(originals) + try_split(overrides)).uniq
+      end
+
+      def try_split(value)
+        value.is_a?(String) ? value.split : value
+      end
+
+      def combine_hash(originals, overrides, parents:, mergeable_attributes:)
+        originals.merge_html_attributes(overrides, parents, mergeable_attributes: mergeable_attributes)
+      end
+
+      def split_attribute_list(value, parents:, mergeable_attributes:)
+        mergeable_attributes.include?(parents) ? try_split(value) : value
+      end
+    end
+  end
+end

data/lib/orbital_ui/components/attributes.rb

@@ -0,0 +1,164 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  module Components
+    module Attributes
+      extend ActiveSupport::Concern
+
+      using OrbitalUi::AttributeUtils
+
+      included do
+        ActiveModel::Type.register(:any, OrbitalUi::Type::Any)
+        ActiveModel::Type.register(:array, OrbitalUi::Type::Array)
+        ActiveModel::Type.register(:symbol, OrbitalUi::Type::Symbol)
+        ActiveModel::Type.register(:breakpoints, OrbitalUi::Type::Breakpoints)
+      end
+
+      module ClassMethods
+        ##
+        # Define an attribute for the component
+        #
+        # Example:
+        #   attribute :label, :string, default: 'More'
+        #
+        # @param name [Symbol] the name of the attribute
+        # @param type [Symbol] the type of the attribute
+        # @param default [Object] the default value of the attribute
+        # @param options [Hash] additional options for the attribute
+        def attribute(name, type = nil, default: nil, **options)
+          # A redefined attribute replaces the inherited one. If both stayed, initialize would
+          # process it twice, and the second pass would reset the caller's value to the default.
+          attribute_definitions.reject! { |definition| definition[:name] == name }
+          attribute_definitions << { name: name, type: type, default: default, **options }
+        end
+
+        ##
+        # Used to store the attribute definitions for the component
+        def attribute_definitions
+          @attribute_definitions ||= if superclass.respond_to?(:attribute_definitions)
+                                       superclass.attribute_definitions.dup
+                                     else
+                                       []
+                                     end
+        end
+      end
+
+      def initialize(kwargs = {})
+        # Set the default values for the attributes, or the values passed in the keyword arguments
+        self.class.attribute_definitions.each do |definition|
+          name = definition[:name]
+          default_value = __default_value_for_attribute_definition(definition)
+          raw_value = kwargs.delete(name)
+
+          raise "Missing required attribute :#{name}" if raw_value.nil? && definition[:required]
+
+          value = ActiveModel::Type.lookup(definition[:type]).cast(raw_value)
+
+          # Assign the default value to a new instance variable
+          instance_variable_set(:"@#{name}", default_value)
+
+          # Define a getter method for the attribute
+          define_singleton_method(:"attr_#{name}") { instance_variable_get(:"@#{name}") }
+
+          # Assign the value passed in the keyword arguments to the instance variable if possible
+          next if value.nil?
+
+          if definition[:only]&.exclude?(value)
+            if definition[:unknown] == :raise
+              raise ArgumentError, "Invalid value for attribute #{name}: #{value.inspect}"
+            end
+
+            next
+
+          end
+          instance_variable_set(:"@#{name}", value)
+        end
+
+        # All remaining keyword arguments are stored in the @unmatched_attributes instance variable
+        instance_variable_set(:@unmatched_attributes, kwargs)
+      end
+
+      ##
+      # Returns the default attributes of the component as a hash
+      #
+      def default_attributes
+        {}
+      end
+
+      ##
+      # Returns the HTML attributes of the component as a hash
+      def html_attributes
+        __flatten_attributes(default_attributes.merge_html_attributes(@unmatched_attributes).deep_tidy)
+      end
+
+      ##
+      # Returns the attributes of the component as a hash
+      #
+      # @param include_options [Boolean] whether to include the options in the result
+      # @param flattened [Boolean] whether to flatten the result
+      # @return [Hash] the attributes of the component
+      def attrs(include_options: false, flattened: false)
+        result = {}
+        self.class.attribute_definitions.each do |definition|
+          name = definition[:name]
+          value = instance_variable_get(:"@#{name}")
+          result[name] = value
+        end
+
+        result.merge!(@unmatched_attributes || {}) if include_options
+        if flattened
+          __flatten_attributes(result)
+        else
+          result
+        end
+      end
+
+      ##
+      # Returns the options of the component as a hash
+      #
+      # The options are the keyword arguments passed to the component that were not
+      # matched against the defined attributes.
+      #
+      # @param flattened [Boolean] whether to flatten the result
+      # @return [Hash] the options of the component
+      def options(flattened: true)
+        result = @unmatched_attributes || {}
+        if flattened
+          __flatten_attributes(result)
+        else
+          result
+        end
+      end
+
+      private
+
+      def __default_value_for_attribute_definition(definition)
+        default_value = definition.fetch(:default, nil)
+        return default_value if default_value.nil?
+
+        default_value = default_value.call if default_value.respond_to?(:call)
+        default_value
+      end
+
+      def __flatten_attributes(attributes)
+        flattened = {}
+
+        attributes.each do |key, value|
+          case value
+          when Hash
+            __flatten_attributes(value).each do |k, v|
+              if k.nil?
+                flattened[key] = v
+              else
+                flattened["#{key}-#{k.to_s.tr('_', '-')}"] = v
+              end
+            end
+          else
+            flattened[key] = value if value
+          end
+        end
+        flattened
+      end
+    end
+  end
+end

data/lib/orbital_ui/components/styles.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  module Components
+    module Styles
+      extend ActiveSupport::Concern
+
+      ##
+      # Join the given style names together
+      #
+      # This implementation follows the same pattern as the `class_names` method
+      # however, it does not split the values by spaces.
+      #
+      def style_names(*args)
+        styles = build_style_names(*args).flat_map { |value| CGI.unescape_html(value.to_s) }.uniq
+        safe_join(styles.push(''), ";")
+      end
+
+      private
+
+      def build_style_names(*args)
+        values = []
+        args.each do |arg|
+          case arg
+          when Hash
+            arg.each do |k, v|
+              values << k if v && k.present?
+            end
+          when Array
+            values.concat build_style_names(*arg)
+          else
+            values << arg.to_s if arg.present?
+          end
+        end
+
+        values
+      end
+    end
+  end
+end

data/lib/orbital_ui/engine.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class Engine < ::Rails::Engine
+    isolate_namespace OrbitalUi
+  end
+end