klods-ruby 0.2.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: f9b8c6d36dd6306ef10c5d07b9f6e6c6d800ea12d4cf2184ece44f68138ce290
+  data.tar.gz: 3f24505f91a3aa3c7003c50c5a2c14697b4301d83622f7cfa56664a84c30702d
+SHA512:
+  metadata.gz: c0c76747cb39decbfa3255df8f7df27237bb51e1ba9d2da7f13c747345e7ac5576e78cb91c5875828cc47706190957da59bf0200a0703bd2cad9395304237feb
+  data.tar.gz: 9f3eb5fcf0d7c0d8f236518a2ecace6df9ead0891b90315e0148a5865992197bf409c6b19e4da0ccff699d04ed90d7c907570b228fb23b39becbd535844cbf1d

data/lib/klods/builders.rb

@@ -0,0 +1,35 @@
+module Klods
+  module Builders
+    include Klods::Html
+    include Klods::Layout
+    include Klods::Utilities
+    include Klods::Components::Alert
+    include Klods::Components::Avatar
+    include Klods::Components::Badge
+    include Klods::Components::Box
+    include Klods::Components::Breadcrumb
+    include Klods::Components::Button
+    include Klods::Components::Card
+    include Klods::Components::Code
+    include Klods::Components::Details
+    include Klods::Components::Dl
+    include Klods::Components::Form
+    include Klods::Components::List
+    include Klods::Components::Modal
+    include Klods::Components::Nav
+    include Klods::Components::Prose
+    include Klods::Components::Table
+    include Klods::Components::Tabs
+    include Klods::Components::Toast
+    include Klods::Components::Tooltip
+    include Klods::Icons
+
+    def el(tag, a = nil, b = nil)
+      Core.el(tag, a, b)
+    end
+
+    def raw(html)
+      Core.raw(html)
+    end
+  end
+end

data/lib/klods/components/alert.rb

@@ -0,0 +1,17 @@
+module Klods
+  module Components
+    module Alert
+      def alert(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        merged = {"role" => "alert"}.merge(props.transform_keys(&:to_s))
+        Core.build(
+          tag: "div", base: "klods-alert",
+          modifiers: {
+            variant: ->(v) { (v && v.to_s != "default") ? "klods-alert--#{v}" : nil }
+          },
+          props: merged, children: children
+        )
+      end
+    end
+  end
+end

data/lib/klods/components/avatar.rb

@@ -0,0 +1,46 @@
+module Klods
+  module Components
+    module Avatar
+      AVATAR_SIZE_PX = {"small" => 12, "medium" => 20, "large" => 32}.freeze
+      USER_SVG_INNER = '<circle cx="8" cy="6" r="2.5" stroke="currentColor" stroke-width="1.5"/>' \
+        '<path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" d="M2.5 14c0-2.8 2.5-5 5.5-5s5.5 2.2 5.5 5"/>'.freeze
+
+      private_constant :AVATAR_SIZE_PX, :USER_SVG_INNER
+
+      def avatar(props = nil)
+        props = (props || {}).transform_keys(&:to_s)
+        src = props.delete("src")
+        name = props.delete("name")
+        size = (props.delete("size") || "medium").to_s
+        extra_class = props.delete("class")
+
+        has_initials = src.nil? && !name.nil?
+        cls = Core.class_names(
+          "klods-avatar",
+          (size != "medium") ? "klods-avatar--#{size}" : nil,
+          has_initials ? "klods-avatar--initials" : nil,
+          Core.resolve_class(extra_class)
+        )
+
+        content = if src
+          Core.el("img", {"src" => src, "alt" => name.to_s, "class" => "klods-avatar__img"})
+        elsif name
+          initials = name.strip.split(/\s+/).first(2).map { |w| w[0]&.upcase || "" }.join
+          Core.el("span", {"aria-hidden" => "true"}, initials)
+        else
+          px = AVATAR_SIZE_PX[size] || 20
+          svg = %(<svg width="#{px}" height="#{px}" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">#{USER_SVG_INNER}</svg>)
+          Core.el("span", {"aria-hidden" => "true", "class" => "klods-icon"}, Core.raw(svg))
+        end
+
+        span_attrs = props.merge("class" => cls.empty? ? nil : cls).compact
+        if has_initials
+          span_attrs["role"] = "img"
+          span_attrs["aria-label"] = name
+        end
+
+        Core.el("span", span_attrs, content)
+      end
+    end
+  end
+end

data/lib/klods/components/badge.rb

@@ -0,0 +1,16 @@
+module Klods
+  module Components
+    module Badge
+      def badge(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(
+          tag: "span", base: "klods-badge",
+          modifiers: {
+            variant: ->(v) { (v && v.to_s != "default") ? "klods-badge--#{v}" : nil }
+          },
+          props: props, children: children
+        )
+      end
+    end
+  end
+end

data/lib/klods/components/box.rb

@@ -0,0 +1,10 @@
+module Klods
+  module Components
+    module Box
+      def box(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(tag: "div", base: "klods-box", props: props, children: children)
+      end
+    end
+  end
+end

data/lib/klods/components/breadcrumb.rb

@@ -0,0 +1,44 @@
+module Klods
+  module Components
+    module Breadcrumb
+      def crumb(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        href = props.delete(:href) || props.delete("href")
+        attrs = href ? props.merge("data-crumb-href" => href) : props
+        Core.el("li", attrs, children)
+      end
+
+      def breadcrumbs(crumbs, attrs = {})
+        items = crumbs.each_with_index.map do |crumb_node, i|
+          is_last = i == crumbs.length - 1
+          href = crumb_node.attrs["data-crumb-href"]
+          item_attrs = crumb_node.attrs.except("data-crumb-href")
+          extra_class = item_attrs.delete("class")
+
+          content = if href && !is_last
+            [Core.el("a", {"href" => href, "class" => "klods-breadcrumb__link"}, crumb_node.children)]
+          else
+            crumb_node.children
+          end
+
+          cls = Core.class_names("klods-breadcrumb__item", Core.resolve_class(extra_class))
+          final_attrs = item_attrs.merge("class" => cls.empty? ? nil : cls)
+          final_attrs["aria-current"] = "page" if is_last
+          final_attrs.compact!
+
+          Node.new("li", final_attrs, content)
+        end
+
+        attrs = attrs.transform_keys(&:to_s)
+        aria_label = attrs.delete("aria-label") || "Breadcrumb"
+        extra_class = attrs.delete("class")
+        cls = Core.resolve_class(extra_class)
+
+        nav_attrs = attrs.merge("aria-label" => aria_label)
+        nav_attrs["class"] = cls unless cls.empty?
+
+        Core.el("nav", nav_attrs, Core.el("ol", {"class" => "klods-breadcrumb__list"}, items))
+      end
+    end
+  end
+end

data/lib/klods/components/button.rb

@@ -0,0 +1,22 @@
+module Klods
+  module Components
+    module Button
+      def button(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        merged = {"type" => "button"}.merge(props.transform_keys(&:to_s))
+        Core.build(
+          tag: "button", base: "klods-button",
+          modifiers: {
+            variant: ->(v) { (v && v.to_s != "default") ? "klods-button--#{v}" : nil }
+          },
+          props: merged, children: children
+        )
+      end
+
+      def button_group(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(tag: "div", base: "klods-button-group", props: props, children: children)
+      end
+    end
+  end
+end

data/lib/klods/components/card.rb

@@ -0,0 +1,29 @@
+module Klods
+  module Components
+    module Card
+      def card(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(
+          tag: "div", base: "klods-card",
+          modifiers: {elevated: "klods-card--elevated"},
+          props: props, children: children
+        )
+      end
+
+      def card_title(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(tag: "h3", base: "klods-card__title", props: props, children: children)
+      end
+
+      def card_body(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(tag: "div", base: "klods-card__body", props: props, children: children)
+      end
+
+      def card_footer(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(tag: "div", base: "klods-card__footer", props: props, children: children)
+      end
+    end
+  end
+end

data/lib/klods/components/code.rb

@@ -0,0 +1,38 @@
+module Klods
+  module Components
+    module Code
+      def code_block(a = nil, b = nil)
+        props, content = Core.normalize_args(a, b)
+        props = props.transform_keys(&:to_s)
+        extra_class = props.delete("class")
+        cls = Core.class_names("klods-pre", Core.resolve_class(extra_class))
+        attrs = props.merge("class" => cls.empty? ? nil : cls).compact
+        Core.el("pre", attrs, Core.el("code", {}, content))
+      end
+
+      def inline_code(a = nil, b = nil)
+        props, content = Core.normalize_args(a, b)
+        props = props.transform_keys(&:to_s)
+        extra_class = props.delete("class")
+        cls = Core.class_names("klods-code", Core.resolve_class(extra_class))
+        attrs = props.merge("class" => cls.empty? ? nil : cls).compact
+        Core.el("code", attrs, content)
+      end
+
+      def kbd(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(tag: "kbd", base: "klods-kbd", props: props, children: children)
+      end
+
+      def samp(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(tag: "samp", base: "klods-samp", props: props, children: children)
+      end
+
+      def var_el(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(tag: "var", base: "klods-var", props: props, children: children)
+      end
+    end
+  end
+end

data/lib/klods/components/details.rb

@@ -0,0 +1,19 @@
+module Klods
+  module Components
+    module Details
+      def details(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(
+          tag: "details", base: "klods-details",
+          modifiers: {open: "klods-details--open"},
+          props: props, children: children
+        )
+      end
+
+      def summary(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.el("summary", props, children)
+      end
+    end
+  end
+end

data/lib/klods/components/dl.rb

@@ -0,0 +1,24 @@
+module Klods
+  module Components
+    module Dl
+      def dl(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(
+          tag: "dl", base: "klods-dl",
+          modifiers: {inline: "klods-dl--inline"},
+          props: props, children: children
+        )
+      end
+
+      def dt(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(tag: "dt", base: "klods-dt", props: props, children: children)
+      end
+
+      def dd(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(tag: "dd", base: "klods-dd", props: props, children: children)
+      end
+    end
+  end
+end

data/lib/klods/components/form.rb

@@ -0,0 +1,198 @@
+module Klods
+  module Components
+    module Form
+      FORM_CONTROLS = %w[input select textarea].freeze
+      private_constant :FORM_CONTROLS
+
+      def form(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(tag: "form", base: "klods-form", props: props, children: children)
+      end
+
+      # field({ label: "Email", required: true }) { |id| input(id: id, type: "email") }
+      def field(props, &block)
+        props = props.transform_keys(&:to_s)
+        label_text = props.delete("label")
+        explicit_id = props.delete("id")
+        help = props.delete("help")
+        error = props.delete("error")
+        required = props.delete("required")
+        invalid = props.delete("invalid")
+        extra_class = props.delete("class")
+
+        id = explicit_id || Core.slug_id("klods-field", label_text.to_s)
+        help_id = help ? "#{id}-help" : nil
+        error_id = error ? "#{id}-error" : nil
+        is_invalid = invalid || !!error
+
+        described_by = is_invalid ? error_id : help_id
+
+        aria_attrs = {}
+        aria_attrs["aria-describedby"] = described_by if described_by
+        aria_attrs["aria-invalid"] = "true" if is_invalid
+
+        input_node = block.call(id)
+        patched = _patch_aria_attrs(input_node, aria_attrs)
+
+        field_cls = Core.class_names("klods-field", is_invalid ? "klods-field--invalid" : nil, Core.resolve_class(extra_class))
+        label_cls = "klods-label#{" klods-label--required" if required}"
+
+        children = [
+          Core.el("label", {"for" => id, "class" => label_cls}, label_text),
+          patched
+        ]
+        children << Core.el("p", {"id" => help_id, "class" => "klods-help"}, help) if help
+        children << Core.el("p", {"id" => error_id, "class" => "klods-error", "role" => "alert"}, error) if error
+
+        Core.el("div", props.merge("class" => field_cls.empty? ? nil : field_cls).compact, children)
+      end
+
+      def input(props = {})
+        props = props.transform_keys(&:to_s)
+        type = props.delete("type")
+        extra_class = props.delete("class")
+
+        id = props["id"] || Core.slug_id(
+          "klods-input",
+          (props["aria-label"] || props["placeholder"] || type || "field").to_s
+        )
+        props["id"] = id
+
+        cls = lambda do |extra = ""|
+          Core.class_names("klods-input", extra, Core.resolve_class(extra_class)).then { |c| c.empty? ? nil : c }
+        end
+
+        case type
+        when "range"
+          initial = props["value"] || "50"
+          Node.new("span", {"class" => cls.call("klods-input--range")}, [
+            Node.new("input", props.merge("type" => "range"), nil),
+            Core.el("output", {"for" => id}, initial.to_s)
+          ])
+        when "color"
+          initial = props["value"] || "#000000"
+          Node.new("span", {"class" => cls.call("klods-input--color")}, [
+            Node.new("input", props.merge("type" => "color"), nil),
+            Core.el("output", {"for" => id}, initial.to_s)
+          ])
+        else
+          Node.new("input", props.merge("type" => type, "class" => cls.call).compact)
+        end
+      end
+
+      def select(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        inner = Core.build(tag: "select", base: "klods-select", props: props, children: children)
+        Core.el("div", {"class" => "klods-select-wrapper"}, inner)
+      end
+
+      def option(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.el("option", props, children)
+      end
+
+      def textarea(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(tag: "textarea", base: "klods-textarea", props: props, children: children)
+      end
+
+      def checkbox(props)
+        props = props.transform_keys(&:to_s)
+        label_text = props.delete("label")
+        extra_class = props.delete("class")
+
+        input_attrs = {"type" => "checkbox"}
+        %w[name value checked disabled required form autofocus].each do |key|
+          val = props.delete(key)
+          input_attrs[key] = val unless val.nil?
+        end
+
+        cls = Core.class_names("klods-checkbox", Core.resolve_class(extra_class))
+        Core.el(
+          "label",
+          props.merge("class" => cls.empty? ? nil : cls).compact,
+          [Node.new("input", input_attrs), Core.el("span", {}, label_text)]
+        )
+      end
+
+      def radio(props)
+        props = props.transform_keys(&:to_s)
+        label_text = props.delete("label")
+        extra_class = props.delete("class")
+
+        input_attrs = {"type" => "radio"}
+        %w[name value checked disabled required form autofocus].each do |key|
+          val = props.delete(key)
+          input_attrs[key] = val unless val.nil?
+        end
+
+        cls = Core.class_names("klods-radio", Core.resolve_class(extra_class))
+        Core.el(
+          "label",
+          props.merge("class" => cls.empty? ? nil : cls).compact,
+          [Node.new("input", input_attrs), Core.el("span", {}, label_text)]
+        )
+      end
+
+      def radio_group(props, children)
+        props = props.transform_keys(&:to_s)
+        legend_text = props.delete("legend")
+        extra_class = props.delete("class")
+        legend_id = legend_text ? Core.slug_id("klods-rg", legend_text) : nil
+
+        cls = Core.class_names("klods-field", Core.resolve_class(extra_class))
+        attrs = props.merge("role" => "group", "class" => cls.empty? ? nil : cls).compact
+        attrs["aria-labelledby"] = legend_id if legend_id
+
+        group_children = []
+        group_children << Core.el("p", {"id" => legend_id, "class" => "klods-label"}, legend_text) if legend_text
+        group_children.concat(Array(children))
+
+        Core.el("div", attrs, group_children)
+      end
+
+      def switch_input(props)
+        props = props.transform_keys(&:to_s)
+        label_text = props.delete("label")
+        reverse = props.delete("reverse")
+        extra_class = props.delete("class")
+
+        input_attrs = {"type" => "checkbox", "class" => "klods-switch__input", "role" => "switch"}
+        %w[name value checked disabled].each do |key|
+          val = props.delete(key)
+          input_attrs[key] = val unless val.nil?
+        end
+
+        cls = Core.class_names("klods-switch", reverse ? "klods-switch--reverse" : nil, Core.resolve_class(extra_class))
+        Core.el(
+          "label",
+          props.merge("class" => cls.empty? ? nil : cls).compact,
+          [
+            Node.new("input", input_attrs),
+            Core.el("span", {"class" => "klods-switch__track"}),
+            Core.el("span", {"class" => "klods-switch__label"}, label_text)
+          ]
+        )
+      end
+
+      private
+
+      def _patch_aria_attrs(node, aria_attrs)
+        return node if aria_attrs.empty?
+
+        if FORM_CONTROLS.include?(node.tag)
+          Node.new(node.tag, node.attrs.merge(aria_attrs), node.children)
+        else
+          patched_children = node.children.map do |child|
+            if child.is_a?(Node) && FORM_CONTROLS.include?(child.tag)
+              Node.new(child.tag, child.attrs.merge(aria_attrs), child.children)
+            else
+              child
+            end
+          end
+          Node.new(node.tag, node.attrs, patched_children)
+        end
+      end
+    end
+  end
+end

data/lib/klods/components/list.rb

@@ -0,0 +1,50 @@
+module Klods
+  module Components
+    module List
+      def list(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(
+          tag: "ul", base: "klods-list",
+          modifiers: {flush: "klods-list--flush"},
+          props: props, children: children
+        )
+      end
+
+      def list_item(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        props = props.transform_keys(&:to_s)
+
+        lead = props.delete("lead")
+        trail = props.delete("trail")
+        href = props.delete("href")
+        extra_class = props.delete("class")
+
+        li_cls = Core.class_names(
+          "klods-list__item",
+          href ? "klods-list__item--link" : nil,
+          Core.resolve_class(extra_class)
+        )
+
+        has_slots = !lead.nil? || !trail.nil?
+
+        build_slots = lambda do
+          parts = []
+          parts << Core.el("span", {"class" => "klods-list__lead"}, lead) if lead
+          parts << Core.el("span", {"class" => "klods-list__content"}, children)
+          parts << Core.el("span", {"class" => "klods-list__trail"}, trail) if trail
+          parts
+        end
+
+        li_attrs = props.merge("class" => li_cls.empty? ? nil : li_cls).compact
+
+        if href
+          link_content = has_slots ? build_slots.call : children
+          return Core.el("li", li_attrs,
+            Core.el("a", {"href" => href, "class" => "klods-list__link"}, link_content))
+        end
+
+        Core.el("li", li_attrs, has_slots ? build_slots.call : children)
+      end
+    end
+  end
+end

data/lib/klods/components/modal.rb

@@ -0,0 +1,52 @@
+module Klods
+  module Components
+    module Modal
+      def modal(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        props = props.transform_keys(&:to_s)
+        open_attr = props.delete("open")
+        extra_class = props.delete("class")
+        cls = Core.class_names("klods-modal", Core.resolve_class(extra_class))
+        attrs = props.merge("class" => cls.empty? ? nil : cls).compact
+        attrs["open"] = true if open_attr
+        Core.el("dialog", attrs, children)
+      end
+
+      def modal_panel(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(tag: "div", base: "klods-modal__panel", props: props, children: children)
+      end
+
+      def modal_header(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(tag: "div", base: "klods-modal__header", props: props, children: children)
+      end
+
+      def modal_title(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(tag: "h2", base: "klods-modal__title", props: props, children: children)
+      end
+
+      def modal_body(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(tag: "div", base: "klods-modal__body", props: props, children: children)
+      end
+
+      def modal_actions(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        Core.build(tag: "div", base: "klods-modal__actions", props: props, children: children)
+      end
+
+      def modal_close(attrs = nil)
+        attrs = (attrs || {}).transform_keys(&:to_s)
+        extra_class = attrs.delete("class")
+        cls = Core.class_names("klods-modal__close", Core.resolve_class(extra_class))
+        final_attrs = {"type" => "button", "aria-label" => "Close"}
+          .merge(attrs)
+          .merge("class" => cls.empty? ? nil : cls)
+          .compact
+        Core.el("button", final_attrs)
+      end
+    end
+  end
+end