protos 0.5.0 → 0.7.0

data/lib/protos/badge.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module Protos
+  class Badge < Component
+    Badges = Types::Coercible::Symbol.enum(
+      :default,
+      :neutral,
+      :success,
+      :primary,
+      :secondary,
+      :info,
+      :error,
+      :warning,
+      :ghost
+    )
+
+    Sizes = Types::Coercible::Symbol.enum(:default, :xs, :sm, :md, :lg)
+
+    option :type, type: Badges, default: -> { :default }
+    option :outline, default: -> { false }
+    option :size, type: Sizes, default: -> { :default }
+
+    def view_template(&)
+      span(**attrs, &)
+    end
+
+    private
+
+    def badge_style
+      {
+        neutral: "badge-neutral",
+        success: "badge-success",
+        primary: "badge-primary",
+        secondary: "badge-secondary",
+        info: "badge-info",
+        error: "badge-error",
+        warning: "badge-warning",
+        ghost: "badge-ghost"
+      }
+    end
+
+    def badge_size
+      {
+        xs: "badge-xs",
+        sm: "badge-sm",
+        md: "badge-md",
+        lg: "badge-lg"
+      }
+    end
+
+    def theme
+      {
+        container: [
+          "badge",
+          badge_style[type],
+          badge_size[size],
+          ("badge-outline" if outline)
+        ].compact
+      }
+    end
+  end
+end

data/lib/protos/breadcrumbs.rb

@@ -5,6 +5,8 @@ module Protos
     # DOCS: A list of breadcrumbs (e.g links) for navigation
     # https://daisyui.com/components/breadcrumbs/
 
+    autoload :Crumb, "protos/breadcrumbs/crumb"
+
     def view_template(&block)
       nav(**attrs) do
         ul(class: css[:list], &block)

data/lib/protos/card.rb

@@ -5,6 +5,11 @@ module Protos
     # DOCS: A card component
     # https://daisyui.com/components/card/
 
+    autoload :Body, "protos/card/body"
+    autoload :Title, "protos/card/title"
+    autoload :Actions, "protos/card/actions"
+    autoload :Image, "protos/card/image"
+
     ImageDisplays = Types::Coercible::Symbol.enum(:default, :overlay, :side)
 
     IMAGE_DISPLAYS = {
@@ -16,9 +21,9 @@ module Protos
     option :border, type: Types::Bool, default: -> { true }, reader: :private
     option :compact, type: Types::Bool, default: -> { false }, reader: :private
     option :image_display,
-           ImageDisplays,
-           default: -> { :default },
-           reader: false
+      ImageDisplays,
+      default: -> { :default },
+      reader: false
 
     def view_template(&)
       article(**attrs, &)
@@ -40,12 +45,12 @@ module Protos
 
     def theme
       {
-        container: tokens(
+        container: [
           "card",
           image_display,
-          border: "card-bordered",
-          compact: "card-compact"
-        )
+          ("card-bordered" if border),
+          ("card-compact" if compact)
+        ]
       }
     end
   end

data/lib/protos/carousel.rb

@@ -6,6 +6,9 @@ module Protos
     # through in a mobile friendly manner.
     # https://daisyui.com/components/carousel/
 
+    autoload :Item, "protos/carousel/item"
+    autoload :Actions, "protos/carousel/actions"
+
     SNAP_POINTS = {
       none: "",
       center: "carousel-center",
@@ -14,13 +17,13 @@ module Protos
 
     option :vertical, type: Types::Bool, default: -> { false }
     option :snap_to,
-           default: -> { :none },
-           reader: false,
-           type: Types::Coercible::Symbol.enum(
-             :none,
-             :center,
-             :end
-           )
+      default: -> { :none },
+      reader: false,
+      type: Types::Coercible::Symbol.enum(
+        :none,
+        :center,
+        :end
+      )
 
     def view_template(&)
       div(**attrs, &)
@@ -38,11 +41,11 @@ module Protos
 
     def theme
       {
-        container: tokens(
+        container: [
           "carousel",
           snap_to,
-          vertical: "carousel-vertical"
-        )
+          ("carousel-vertical" if vertical)
+        ]
       }
     end
   end

data/lib/protos/chat_bubble/content.rb

@@ -18,18 +18,18 @@ module Protos
       }.freeze
 
       option :type,
-             default: -> { :none },
-             reader: false,
-             type: Types::Coercible::Symbol.enum(
-               :none,
-               :primary,
-               :secondary,
-               :accent,
-               :info,
-               :success,
-               :warning,
-               :error
-             )
+        default: -> { :none },
+        reader: false,
+        type: Types::Coercible::Symbol.enum(
+          :none,
+          :primary,
+          :secondary,
+          :accent,
+          :info,
+          :success,
+          :warning,
+          :error
+        )
 
       def view_template(&)
         div(**attrs, &)

data/lib/protos/chat_bubble.rb

@@ -7,18 +7,23 @@ module Protos
     # in a larger chat history.
     # https://daisyui.com/components/chat/
 
+    autoload :Content, "protos/chat_bubble/content"
+    autoload :Image, "protos/chat_bubble/image"
+    autoload :Header, "protos/chat_bubble/header"
+    autoload :Footer, "protos/chat_bubble/footer"
+
     ALIGNMENTS = {
       start: "chat-start",
       end: "chat-end"
     }.freeze
 
     option :align,
-           default: -> { :start },
-           reader: false,
-           type: Types::Coercible::Symbol.enum(
-             :start,
-             :end
-           )
+      default: -> { :start },
+      reader: false,
+      type: Types::Coercible::Symbol.enum(
+        :start,
+        :end
+      )
 
     def view_template(&)
       div(**attrs, &)

data/lib/protos/collapse/title.rb

@@ -7,9 +7,9 @@ module Protos
       # visible and is used to toggle the collapse.
 
       option :input_id,
-             type: Types::String | Types::Integer | Types::Nil,
-             reader: false,
-             default: -> { }
+        type: Types::String | Types::Integer | Types::Nil,
+        reader: false,
+        default: -> { }
 
       def view_template(&)
         if @input_id

data/lib/protos/collapse.rb

@@ -6,19 +6,22 @@ module Protos
     # is visible at all times, and the content is only visible when expanded.
     # https://daisyui.com/components/collapse/
 
+    autoload :Title, "protos/collapse/title"
+    autoload :Content, "protos/collapse/content"
+
     option :input_type, default: -> { :checkbox }, reader: false
-    option :input_id,
-           reader: false,
-           default: -> { "collapse-#{SecureRandom.hex(4)}" },
-           type: Types::String
+    option :input_name,
+      reader: false,
+      default: -> { "collapse-#{SecureRandom.hex(4)}" },
+      type: Types::String | Types::Integer
 
     def view_template
       div(**attrs) do
         if @input_type
           input(
             type: @input_type,
-            id: @input_id,
-            name: @input_id,
+            id: @input_name,
+            name: @input_name,
             autocomplete: :off,
             # form: "" prevents the radio button from being submitted if its
             # within a form
@@ -29,7 +32,7 @@ module Protos
       end
     end
 
-    def title(*, **, &) = render Title.new(*, input_id: @input_id, **, &)
+    def title(*, **, &) = render Title.new(*, input_id: @input_name, **, &)
 
     def content(...) = render Content.new(...)
 

data/lib/protos/combobox.rb

@@ -7,9 +7,9 @@ module Protos
     # Comboboxes use popovers and command to create the list of options.
 
     option :trigger,
-           default: -> { :click },
-           reader: false,
-           type: Popover::Triggers | Types::Array.of(Popover::Triggers)
+      default: -> { :click },
+      reader: false,
+      type: Popover::Triggers | Types::Array.of(Popover::Triggers)
 
     def trigger(...) = render Popover::Trigger.new(...)
 

data/lib/protos/command/input.rb

@@ -6,10 +6,10 @@ module Protos
       # DOCS: The search input for the command palette
 
       option :placeholder,
-             reader: :private,
-             default: -> {
-               "Type a command or search..."
-             }
+        reader: :private,
+        default: -> {
+          "Type a command or search..."
+        }
 
       def view_template(&block)
         li(**attrs) do

data/lib/protos/command.rb

@@ -6,6 +6,15 @@ module Protos
     # filterable list of commands. Command modals are by default closable by
     # clicking the overlay rather than a specific close button.
 
+    autoload :Input, "protos/command/input"
+    autoload :Dialog, "protos/command/dialog"
+    autoload :Group, "protos/command/group"
+    autoload :List, "protos/command/list"
+    autoload :Trigger, "protos/command/trigger"
+    autoload :Title, "protos/command/title"
+    autoload :Item, "protos/command/item"
+    autoload :Empty, "protos/command/empty"
+
     def view_template(&)
       div(**attrs, &)
     end
@@ -16,7 +25,9 @@ module Protos
 
     def trigger(...) = render Command::Trigger.new(...)
 
-    def dialog(...) = render Command::Dialog.new(...)
+    def dialog(...) = render Modal::Dialog.new(...)
+
+    def close_button(...) = render Modal::CloseButton.new(...)
 
     def title(...) = render Command::Title.new(...)
 
@@ -30,7 +41,10 @@ module Protos
 
     def default_attrs
       {
-        data: { controller: "protos--modal" }
+        data: {
+          controller: "protos--modal",
+          action: "click->protos--modal#backdropClose"
+        }
       }
     end
   end

data/lib/protos/component.rb

@@ -10,7 +10,7 @@ module Protos
     # make configuring each class much easier. It also enables gathering up all
     # undefined options and adding them to the html_options hash.
 
-    extend Dry::Initializer
+    extend Dry::Initializer[undefined: false]
     extend Dry::Core::ClassAttributes
 
     # Define methods for css and attrs. Each is expected to return a hash
@@ -27,14 +27,14 @@ module Protos
     option :html_options, default: -> { {} }, reader: false
 
     # Adds non-defined options to the html_options hash
-    def initialize(*args, **kwargs, &)
+    def initialize(*, **kwargs, &)
       defined_keys = self.class.dry_initializer.definitions.keys
       defined, undefined =
         kwargs
           .partition { |key, _| defined_keys.include?(key) }
           .map!(&:to_h)
 
-      super(*args, html_options: undefined, **defined, &)
+      super(*, html_options: undefined, **defined, &)
     end
 
     private

data/lib/protos/drawer.rb

@@ -7,10 +7,14 @@ module Protos
     # trigger is clicked.
     # https://daisyui.com/components/drawer/
 
+    autoload :Side, "protos/drawer/side"
+    autoload :Trigger, "protos/drawer/trigger"
+    autoload :Content, "protos/drawer/content"
+
     option :id,
-           reader: false,
-           type: Types::Coercible::String,
-           default: -> { "drawer-#{SecureRandom.hex(4)}" }
+      reader: false,
+      type: Types::Coercible::String,
+      default: -> { "drawer-#{SecureRandom.hex(4)}" }
 
     def view_template
       div(**attrs) do

data/lib/protos/dropdown.rb

@@ -10,14 +10,18 @@ module Protos
     # rather than pure CSS for accessibility. The layout of pure CSS was too
     # tricky to get right and we felt the dependency tradeoff was worthwhile.
 
+    autoload :Item, "protos/dropdown/item"
+    autoload :Menu, "protos/dropdown/menu"
+    autoload :Trigger, "protos/dropdown/trigger"
+
     option :position,
-           type: Popover::Positions,
-           default: -> { :bottom },
-           reader: false
+      type: Popover::Positions,
+      default: -> { :bottom },
+      reader: false
     option :trigger,
-           default: -> { :click },
-           reader: false,
-           type: Popover::Triggers | Types::Array.of(Popover::Triggers)
+      default: -> { :click },
+      reader: false,
+      type: Popover::Triggers | Types::Array.of(Popover::Triggers)
 
     def item(...) = render Item.new(...)
 

data/lib/protos/hero.rb

@@ -6,6 +6,9 @@ module Protos
     # optionally layout an image for a responsive layout.
     # https://daisyui.com/components/hero/
 
+    autoload :Content, "protos/hero/content"
+    autoload :Overlay, "protos/hero/overlay"
+
     def view_template(&)
       div(**attrs, &)
     end

data/lib/protos/list.rb

@@ -5,6 +5,8 @@ module Protos
     # DOCS: A list of items that are joined together for easier styling with
     # borders, border radius, etc.
 
+    autoload :Item, "protos/list/item"
+
     option :ordered, Types::Bool, default: -> { false }, reader: false
 
     def view_template(&)

data/lib/protos/mix.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Protos
+  class Mix
+    # DOCS: This class is responsible for safely merging in both user supplied
+    # and default attributes. When a user adds { data: { controller: "foo" }} to
+    # their component. This will merge the value in so that any default
+    # controllers do not get overridden.
+
+    MERGEABLE_ATTRIBUTES = Set.new(%i[class data]).freeze
+
+    def self.call(...) = new.call(...)
+
+    def call(old_hash, *hashes)
+      hashes
+        .compact
+        .each_with_object(old_hash) do |new_hash, result|
+          merge(result, new_hash, top_level: true)
+        end
+    end
+
+    private
+
+    def merge(old_hash, new_hash, top_level: false) # rubocop:disable Metrics/PerceivedComplexity
+      old_hash.merge!(new_hash) do |key, old, new|
+        next old unless new
+        next old if old == new
+        next new if top_level && !MERGEABLE_ATTRIBUTES.include?(key)
+
+        case [old, new]
+        in String, String then "#{old} #{new}"
+        in Array, Array then old + new
+        in Hash, Hash then merge(old, new)
+        else new
+        end
+      end
+    end
+  end
+end

data/lib/protos/modal/close_button.rb

@@ -10,6 +10,14 @@ module Protos
           button(**attrs, &block)
         end
       end
+
+      private
+
+      def default_attrs
+        {
+          data: { action: "protos--modal#close" }
+        }
+      end
     end
   end
 end

data/lib/protos/modal/dialog.rb

@@ -14,12 +14,10 @@ module Protos
 
       private
 
-      def attrs
-        @attrs ||= build_attrs(
-          {
-            data: { "protos--modal-target": "modal" }
-          }
-        )
+      def default_attrs
+        {
+          data: { "protos--modal-target": "dialog" }
+        }
       end
 
       def theme

data/lib/protos/modal.rb

@@ -5,6 +5,10 @@ module Protos
     # DOCS: A modal component that can be triggered by a button or a link and
     # will open a fullscreen modal, usually with a close button.
 
+    autoload :CloseButton, "protos/modal/close_button"
+    autoload :Dialog, "protos/modal/dialog"
+    autoload :Trigger, "protos/modal/trigger"
+
     def view_template(&)
       div(**attrs, class: css[:container], &)
     end
@@ -20,7 +24,8 @@ module Protos
     def default_attrs
       {
         data: {
-          controller: "protos--modal"
+          controller: "protos--modal",
+          action: "click->protos--modal#backdropClose"
         }
       }
     end

data/lib/protos/popover.rb

@@ -12,6 +12,9 @@ module Protos
     # Tippy.js options can be passed in via the `options` attribute or, more
     # conveniently by the typed options listed below.
 
+    autoload :Trigger, "protos/popover/trigger"
+    autoload :Content, "protos/popover/content"
+
     Positions = Types::Coercible::Symbol.enum(
       :top,
       :top_start,
@@ -52,33 +55,33 @@ module Protos
     )
 
     option :position,
-           type: Positions,
-           default: -> { :top },
-           reader: false
+      type: Positions,
+      default: -> { :top },
+      reader: false
     option :animation,
-           type: Animations,
-           default: -> { :fade },
-           reader: false
+      type: Animations,
+      default: -> { :fade },
+      reader: false
     option :duration,
-           type: Types::Integer | Types::Array.of(Types::Integer),
-           default: -> { [300, 250] },
-           reader: false
+      type: Types::Integer | Types::Array.of(Types::Integer),
+      default: -> { [300, 250] },
+      reader: false
     option :hide_on_click,
-           type: Types::Bool | Types.Value(:toggle),
-           default: -> { true },
-           reader: false
+      type: Types::Bool | Types.Value(:toggle),
+      default: -> { true },
+      reader: false
     option :z_index,
-           type: Types::Integer,
-           default: -> { 9999 },
-           reader: false
+      type: Types::Integer,
+      default: -> { 9999 },
+      reader: false
     option :options,
-           default: -> { {} },
-           reader: false,
-           type: Types::Hash
+      default: -> { {} },
+      reader: false,
+      type: Types::Hash
     option :trigger,
-           default: -> { %i[mouseenter focus] },
-           reader: false,
-           type: Triggers | Types::Array.of(Triggers)
+      default: -> { %i[mouseenter focus] },
+      reader: false,
+      type: Triggers | Types::Array.of(Triggers)
 
     def view_template(&)
       div(**attrs, &)

data/lib/protos/stats.rb

@@ -5,6 +5,13 @@ module Protos
     # DOCS: Stats component that contains a collection of stats
     # https://daisyui.com/components/stat/
 
+    autoload :Actions, "protos/stats/actions"
+    autoload :Description, "protos/stats/description"
+    autoload :Figure, "protos/stats/figure"
+    autoload :Stat, "protos/stats/stat"
+    autoload :Title, "protos/stats/title"
+    autoload :Value, "protos/stats/value"
+
     def view_template(&)
       div(**attrs, &)
     end

data/lib/protos/steps.rb

@@ -5,6 +5,8 @@ module Protos
     # DOCS: Steps can be used to show a list of steps in a process.
     # https://daisyui.com/components/steps/
 
+    autoload :Step, "protos/steps/step"
+
     option :vertical, type: Types::Bool, default: -> { false }
 
     def view_template(&)
@@ -17,10 +19,10 @@ module Protos
 
     def theme
       {
-        container: tokens(
+        container: [
           "steps",
-          vertical: "steps-vertical"
-        )
+          ("steps-vertical" if vertical)
+        ]
       }
     end
   end

data/lib/protos/swap.rb

@@ -6,6 +6,9 @@ module Protos
     # display different content.
     # https://daisyui.com/components/swap/
 
+    autoload :On, "protos/swap/on"
+    autoload :Off, "protos/swap/off"
+
     def view_template
       label(**attrs) do
         input(

data/lib/protos/table/caption.rb

@@ -11,9 +11,9 @@ module Protos
       }.freeze
 
       option :side,
-             reader: false,
-             type: Types::Coercible::Symbol.enum(:bottom, :top),
-             default: -> { :bottom }
+        reader: false,
+        type: Types::Coercible::Symbol.enum(:bottom, :top),
+        default: -> { :bottom }
 
       def view_template(&)
         caption(**attrs, &)