coveragebook_components 0.19.12 → 0.20.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7e0f9a30dba1c286da84de804833227d291b80fb86bb91ff43e9504fcf521355
-  data.tar.gz: 3ce27724012404ebb44c46f35a6fe2869628483a144f9560ce11d10efad281f0
+  metadata.gz: 7174e55d00ea7174b4a8f120730c5314ff329fb91a44dfd3677c7f8232bd3972
+  data.tar.gz: ac82cd35db155780993509201e0d3d4ae0b329efa708634af9305f25923c2687
 SHA512:
-  metadata.gz: d6a43fd41ce274e7311018bda1377b4d36680743eec3af4488efaadf4882c9188f0746cc66235c593eb53f0aad47df95ec6b4dc3bc9dcf0f7286a1fdca1b3746
-  data.tar.gz: ae62f94c47a4ab394b4ac7178795be91613c280568c0dbc8f69763a20154abba34a1c2083aa7c8ef5a37e53ff47eae2d223d848e42950d88ebefc04e7e7b7b5e
+  metadata.gz: 5dea756622a25f146fca33444887a500cd03cd8110b4f34c501c6cbbd142fa3d77b38ee804a1dd960c13b5260d9eea44e2476b08257464b44d059007fa71d78d
+  data.tar.gz: 6313414a73a6de9e4f88c09fb6eea5039cafd01978e0633009b8516ff62baef5dfb287c437b0a02e415e677059457032046ae23af1482f1ffaba27fae82870f2

data/app/assets/build/coco/coco.css

@@ -2942,6 +2942,16 @@ select{
 
 /* Styles */
 
+[data-coco][data-component="icon"][data-icon] svg {
+      aspect-ratio: 1 / 1;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      color: currentColor;
+    }
+
 [data-coco][data-component="icon"][data-icon]:not([data-style="fill"]):not([data-style="custom"]) svg{
   stroke-linecap: round;
   stroke-linejoin: round;
@@ -5083,6 +5093,16 @@ select{
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
 
+[data-coco][data-component="modal-lightbox"].\!loaded .modal-lightbox-content{
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
+}
+
+[data-coco][data-component="modal-lightbox"].loaded .modal-lightbox-content{
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
+}
+
 [data-coco].coco-link{
   display: inline-flex;
   align-items: center
@@ -6105,10 +6125,6 @@ select{
   display: block
 }
 
-.grid{
-  display: grid
-}
-
 .contents{
   display: contents
 }

data/app/assets/build/coco/coco.js

@@ -13259,6 +13259,7 @@ var require_iro = __commonJS({
           var layout = state.layout;
           if (!Array.isArray(layout)) {
             switch (layout) {
+              // TODO: implement some?
               default:
                 layout = [
                   { component: IroWheel },
@@ -15343,7 +15344,7 @@ var alpine_default = import_alpinejs.default;
 // ../../../package.json
 var package_default = {
   name: "coveragebook-components",
-  version: "0.19.12",
+  version: "0.20.0",
   repository: "git@github.com:coveragebook/coco.git",
   license: "NO LICENSE",
   author: "Mark Perkins <mark@coveragebook.com>",
@@ -15392,12 +15393,12 @@ var package_default = {
     "@percy/cli": "^1.30.0",
     "@tailwindcss/container-queries": "^0.1.0",
     "@tailwindcss/forms": "^0.5.9",
-    "alias-hq": "^6.2.2",
+    "alias-hq": "^6.2.4",
     alpinejs: "^3.14.1",
     autoprefixer: "^10.4.16",
     "container-query-polyfill": "^1.0.2",
     del: "^7.1.0",
-    esbuild: "^0.23.0",
+    esbuild: "^0.25.3",
     "esbuild-plugin-copy": "^2.0.2",
     "fast-glob": "^3.3.1",
     "fast-sort": "^3.4.1",
@@ -15436,7 +15437,7 @@ var package_default = {
         "npm run build"
       ],
       "after:version:bump": "bundle exec rake coco:gem:bump_version[${version}] && bundle && cd lookbook && bundle",
-      "after:release": "rake coco:gem:release[${version}]"
+      "after:release": 'bundle exec rake "coco:gem:release[${version}]"'
     }
   },
   devDependencies: {

data/app/components/coco/images/icon/icon.css

@@ -8,6 +8,12 @@
 
     /* Styles */
 
+    &[data-icon] svg {
+      aspect-ratio: 1 / 1;
+
+      @apply icon-stroke;
+    }
+
     &[data-icon]:not([data-style="fill"]):not([data-style="custom"]) svg {
       @apply icon-stroke;
     }

data/app/components/coco/images/icon/icon.rb

@@ -2,82 +2,43 @@ module Coco
   class Icon < Coco::Component
     include Concerns::AcceptsOptions
 
-    ICON_CACHE = {}
-
-    ALIASES = {
-      edit: "pen-line",
-      "edit-3": "pen-line",
-      "git-commit": "git-commit-horizontal",
-      grid: "grid-3x3",
-      "user-circle": "circle-user",
-      layout: "panels-top-left",
-      "alert-circle": "circle-alert",
-      "check-circle": "circle-check",
-      "loader-2": "loader-circle",
-      "alert-triangle": "triangle-alert",
-      "arrow-right-circle": "circle-arrow-right",
-      "check-square": "square-check",
-      "help-circle": "circle-help",
-      "plus-circle": "circle-plus",
-      "plus-square": "square-plus",
-      "bar-chart-2": "chart-no-axes-column",
-      "bar-chart": "chart-no-axes-column-increasing",
-      "more-horizontal": "ellipsis",
-      "more-vertical": "ellipsis-vertical"
-    }.freeze
-
-    InvalidIconError = Class.new(StandardError)
-
     accepts_option :size, from: %i[xs sm md lg xl xxl full]
-    accepts_option :spin, from: [true, false]
-    accepts_option :style, from: [:line, :fill, :custom]
+    accepts_option :spin, from: [true, false, nil], default: nil
+    accepts_option :style, from: [:line, :fill, :custom, nil], default: nil
 
     before_render do
-      if name
-        set_tag_data_attr(:icon, name)
-        set_option_value(:style, :custom) if icon_data[:custom]
-      end
+      set_tag_data_attr(:icon, name) if name.present?
+      set_option_value :style, :custom if custom?
     end
 
     def initialize(name: nil, **kwargs)
       @icon_name = name&.to_s&.tr("_", "-")
     end
 
-    def name
-      ALIASES.fetch(@icon_name.to_sym, @icon_name) if @icon_name
-    end
-
     def svg
-      content || icon_data[:svg]
+      if custom?
+        IconSet.icon_svg(name)
+      elsif name? && content.blank?
+        %(<svg><use href="##{symbol_id}"></use></svg>).html_safe
+      elsif content.present?
+        content.to_s
+      elsif Rails.env.development?
+        raise "Missing icon '#{@icon_name}'"
+      end
     end
 
-    def icon_data
-      ICON_CACHE[name] ||= {
-        custom: custom?,
-        svg: read_svg
-      }
+    def name
+      IconSet.resolve_icon_name(@icon_name) if @icon_name.present?
     end
 
-    def custom?
-      @_custom ||= File.exist?(custom_icon_path)
-    end
+    def name? = name.present?
 
-    def read_svg
-      if custom?
-        File.read(custom_icon_path).html_safe
-      elsif File.exist?(icon_path)
-        File.read(icon_path).html_safe
-      elsif Rails.env.development? || Rails.env.test?
-        raise InvalidIconError, "`#{name}` is not a valid icon name"
-      end
-    end
+    def custom? = IconSet.custom_icon?(name)
 
-    def icon_path
-      @_icon_path ||= Coco::Engine.root.join("app/assets/build/coco/icons/#{name}.svg")
-    end
+    protected
 
-    def custom_icon_path
-      @_custom_icon_path ||= Coco::Engine.root.join("app/assets/build/coco/icons/custom/#{name}.svg")
+    def symbol_id
+      IconSet.symbol_id_for_icon(name)
     end
   end
 end

data/app/components/coco/modals/modal_lightbox/modal_lightbox.css

@@ -29,6 +29,7 @@
     &.loaded {
       .modal-lightbox-content {
         @apply shadow-2xl;
+        @apply bg-background-light-1;
       }
     }
   }

data/app/helpers/coco/components_helper.rb

@@ -102,8 +102,14 @@ module Coco
       render Coco::Avatar.new(src: src, name: name, **)
     end
 
-    def coco_icon(icon_name = nil, **, &)
-      render(Coco::Icon.new(name: icon_name, **), &)
+    def coco_icon(icon_name = nil, **kwargs, &)
+      kwargs[:name] = icon_name if icon_name.present?
+      render(Coco::Icon.new(**kwargs), &)
+    end
+
+    def coco_icon_sprite(*extra_icons)
+      icons = [*Coco::IconSet.icons, *extra_icons]
+      Coco::IconSprite.new(icons).to_svg
     end
 
     # Indicators

data/config/coco.yml

@@ -0,0 +1,12 @@
+shared:
+  icons:
+    include: []
+    aliases: {}
+    custom:
+      - eye-off-red
+      - google-sso
+      - layout-overlay
+      - layout-split
+      - layout-stacked
+      - microsoft-sso
+      - montage

data/lib/coco/engine.rb

@@ -14,6 +14,18 @@ module Coco
       #{root}/app/helpers
     ]
 
+    initializer "coco.config" do |app|
+      default_config = app.config_for(Engine.root.join("config/coco.yml")) || {}
+      host_config = begin
+        app.config_for(:coco) || {}
+      rescue
+        {}
+      end
+
+      merged_config = default_config.deep_merge(host_config)
+      app.config.coco = ActiveSupport::OrderedOptions.new.merge!(merged_config)
+    end
+
     initializer "coco.autoloading" do |app|
       coco_dir = "#{root}/app/components/coco"
 

data/lib/coco/icon_set.rb

@@ -0,0 +1,57 @@
+module Coco
+  module IconSet
+    ICON_DIR = "app/assets/build/coco/icons"
+    ICON_NAMES_FILE = "config/icons.json"
+
+    InvalidIconError = Class.new(StandardError)
+
+    class << self
+      def icons
+        if Coco.env.development?
+          [*all_icons, *Coco.config.icons[:include]].uniq
+        else
+          Coco.config.icons[:include]&.uniq || []
+        end
+      end
+
+      def aliases
+        Coco.config.icons[:aliases]&.stringify_keys || {}
+      end
+
+      def all_icons
+        @all_icons ||= JSON.load_file(Engine.root.join(ICON_NAMES_FILE))
+      end
+
+      def resolve_icon_name(name)
+        aliases.fetch(name.to_s, name)
+      end
+
+      def resolve_icon_path(icon_name)
+        search_paths = [
+          Engine.root.join(ICON_DIR, "custom", "#{icon_name}.svg"),
+          Engine.root.join(ICON_DIR, "#{icon_name}.svg")
+        ]
+
+        search_paths.find { _1.exist? }
+      end
+
+      def symbol_id_for_icon(icon_name)
+        "svg_icon_#{icon_name.tr("-", "_")}" if icon_name.present?
+      end
+
+      def custom_icon?(icon_name)
+        icon_name && Coco.config.icons[:custom].include?(icon_name)
+      end
+
+      def icon_svg(icon_name)
+        icon_path = resolve_icon_path(icon_name)
+
+        if icon_path.present? && icon_path&.exist?
+          File.read(icon_path).html_safe
+        end
+      rescue
+        # Do nothing...
+      end
+    end
+  end
+end

data/lib/coco/icon_sprite.rb

@@ -0,0 +1,45 @@
+module Coco
+  class IconSprite
+    include ActionView::Helpers::TagHelper
+
+    def initialize(icons = [])
+      @icons = icons
+      @icons.freeze
+    end
+
+    def to_svg
+      tag.svg xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" do
+        ("\n" + symbols.join("\n  ") + "\n").html_safe
+      end
+    end
+
+    protected
+
+    def symbols
+      @icons.map { symbol_for_icon(_1) }.compact
+    end
+
+    def symbol_for_icon(icon_name)
+      return unless icon_name.present?
+
+      svg_content = IconSet.icon_svg(icon_name)
+
+      # Extract the path data and attributes from the SVG
+      doc = Nokogiri::XML(svg_content)
+      svg_element = doc.at_css("svg")
+
+      # Extract SVG attributes that should be preserved on the symbol
+      preserved_attrs = %w[fill stroke stroke-width stroke-linecap stroke-linejoin viewBox style]
+        .index_with { svg_element[_1] }
+        .symbolize_keys
+        .with_defaults(viewBox: "0 0 24 24")
+        .compact
+
+      tag.symbol id: IconSet.symbol_id_for_icon(icon_name), **preserved_attrs do
+        svg_element.children.map(&:to_s).join.html_safe # rubocop:disable Rails/OutputSafety
+      end
+    rescue
+      nil
+    end
+  end
+end

data/lib/coco.rb

@@ -1,3 +1,11 @@
 module Coco
-  VERSION = "0.19.12"
+  VERSION = "0.20.0"
+
+  class << self
+    def config = Rails.application.config.coco
+
+    def env
+      @env ||= ActiveSupport::StringInquirer.new(ENV["COCO_ENV"] || "production")
+    end
+  end
 end

data/lookbook/app/helpers/application_helper.rb

@@ -0,0 +1,28 @@
+require "redcarpet"
+require "faker"
+
+module ApplicationHelper
+  def markdown(&block)
+    md = Redcarpet::Markdown.new(Redcarpet::Render::HTML)
+    content = capture { block.call }
+    md.render(content).html_safe
+  end
+
+  def lorem
+    Faker::Lorem
+  end
+
+  def avatar
+    Faker::Avatar.image
+  end
+
+  def placeholder_prose_html(paragraphs: 1)
+    markdown do
+      (0..paragraphs).map { lorem.paragraph(sentence_count: 2, supplemental: true, random_sentences_to_add: 4) }.join("\n\n\n")
+    end
+  end
+
+  def dev?
+    Rails.env.development? || (Rails.env.test? && !ENV.include?("CI"))
+  end
+end

data/lookbook/app/previews/buttons/button_group_preview.rb

@@ -0,0 +1,148 @@
+module Buttons
+  class ButtonGroupPreview < Coco::Preview
+    # @!group Basic
+
+    def basic
+      coco_button_group do |group|
+        group.with_button(tooltip: "one") { "Button one" }
+        group.with_button(tooltip: "two") { "Button two" }
+        group.with_button(tooltip: "three") { "Button three" }
+      end
+    end
+
+    def with_dividers
+      coco_button_group do |group|
+        group.with_button { "Button one" }
+        group.with_button { "Button two" }
+        group.with_divider
+        group.with_button { "Button three" }
+        group.with_button { "Button four" }
+        group.with_divider
+        group.with_button { "Button five" }
+      end
+    end
+
+    def segmented
+      coco_button_group(segmented: true, theme: :toolbar) do |group|
+        group.with_button(action: "#", method: :post) { "Form button" }
+        group.with_button { "Regular button" }
+        group.with_button(href: "#") { "Link button" }
+        group.with_menu_button("Menu button") do |button|
+          button.with_menu do |menu|
+            menu.with_button { "Menu item one" }
+            menu.with_button { "Menu item 2" }
+          end
+        end
+        group.with_button do |button|
+          button.with_confirmation do |confirm|
+            confirm.with_text { "Are you sure?" }
+            confirm.with_button { "YES" }
+          end
+          "Button with confirmation"
+        end
+      end
+    end
+
+    def floating
+      coco_button_group(floating: true, theme: :toolbar) do |group|
+        group.with_button(tooltip: "one") { "Button one" }
+        group.with_button(tooltip: "two") { "Button two" }
+        group.with_button(tooltip: "three") { "Button three" }
+      end
+    end
+
+    def reversed
+      coco_button_group(reversed: true) do |group|
+        group.with_button(tooltip: "one") { "Button one" }
+        group.with_button(tooltip: "two") { "Button two" }
+        group.with_button(tooltip: "three") { "Button three" }
+      end
+    end
+
+    # @!group Themes
+
+    def with_theme
+      coco_button_group(theme: :negative) do |group|
+        group.with_button { "Button one" }
+        group.with_button { "Button two" }
+        group.with_button { "Button three" }
+      end
+    end
+
+    def mixed_buttons
+      coco_button_group do |group|
+        group.with_button { "Default" }
+        group.with_button(theme: :secondary) { "Secondary" }
+        group.with_button(theme: :negative) { "Negative" }
+      end
+    end
+
+    # @!group Button types
+
+    def with_secondary_actions
+      coco_button_group do |group|
+        group.with_button(tooltip: "This is a tooltip") { "With tooltip" }
+
+        group.with_button do |button|
+          button.with_confirmation do |confirm|
+            confirm.with_text { "Are you sure you want to do that?" }
+            confirm.with_button { "Yes, continue" }
+          end
+
+          "With confirmation"
+        end
+
+        group.with_menu_button do |button|
+          button.with_menu do |menu|
+            menu.with_button(icon: :globe) { "Menu item one" }
+            menu.with_button(icon: :carrot) { "Menu item 2" }
+            menu.with_button(icon: :bell) { "A third menu item" }
+          end
+
+          "With menu"
+        end
+      end
+    end
+
+    def custom_buttons
+      coco_button_group do |group|
+        group.with_button_html do
+          "<button>Custom button 1</button>".html_safe
+        end
+
+        group.with_button_html do
+          "<button>Custom button 2</button>".html_safe
+        end
+      end
+    end
+
+    # @!group Collapsible
+
+    # @label All collapsible
+    def collapsible
+      coco_button_group(collapsible: true) do |group|
+        group.with_button(icon: :smile) { "Button one" }
+        group.with_button(icon: :frown) { "Button two" }
+        group.with_button(icon: :carrot) { "Button three" }
+      end
+    end
+
+    # @label Some collapsible
+    def some_collapsible
+      coco_button_group(collapsible: true) do |group|
+        group.with_button(icon: :check) { "Collapsible" }
+        group.with_button(icon: :x, collapsible: false) { "Not collapsible" }
+        group.with_button(icon: :check) { "Collapsible" }
+      end
+    end
+
+    # @label None collapsible
+    def none_collapsible
+      coco_button_group(collapsible: false) do |group|
+        group.with_button(icon: :x) { "Not Collapsible" }
+        group.with_button(icon: :x) { "Not collapsible" }
+        group.with_button(icon: :x) { "Not Collapsible" }
+      end
+    end
+  end
+end