protos 0.6.0 → 1.0.0

data/lib/protos/chat_bubble/content.rb

@@ -7,29 +7,21 @@ module Protos
       # content of the message. It will be colored according to the type.
 
       STYLES = {
-        none: "",
-        primary: "chat-bubble-primary",
-        secondary: "chat-bubble-secondary",
+        default: "",
         accent: "chat-bubble-accent",
+        error: "chat-bubble-error",
         info: "chat-bubble-info",
+        neutral: "chat-bubble-neutral",
+        primary: "chat-bubble-primary",
+        secondary: "chat-bubble-secondary",
         success: "chat-bubble-success",
-        warning: "chat-bubble-warning",
-        error: "chat-bubble-error"
+        warning: "chat-bubble-warning"
       }.freeze
 
       option :type,
-             default: -> { :none },
-             reader: false,
-             type: Types::Coercible::Symbol.enum(
-               :none,
-               :primary,
-               :secondary,
-               :accent,
-               :info,
-               :success,
-               :warning,
-               :error
-             )
+        default: -> { :default },
+        reader: false,
+        type: Types::Styles
 
       def view_template(&)
         div(**attrs, &)

data/lib/protos/chat_bubble.rb

@@ -7,18 +7,25 @@ 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"
+
+    Positions = Types::Coercible::Symbol.enum(
+      :start,
+      :end
+    )
+
     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: Positions
 
     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,20 +6,41 @@ 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"
+
+    Icons = Types::Coercible::Symbol.enum(:arrow, :plus)
+
+    ICONS = {
+      arrow: "collapse-arrow",
+      plus: "collapse-plus"
+    }.freeze
+
+    States = Types::Coercible::Symbol.enum(:default, :open, :close)
+
+    STATES = {
+      default: "",
+      open: "collapse-open",
+      close: "collapse-close"
+    }.freeze
+
+    option :state, type: States, default: -> { :default }, reader: false
+    option :icon, type: Icons, default: -> { :arrow }, reader: false
     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,
+            aria_label: "Toggle accordion",
             # form: "" prevents the radio button from being submitted if its
             # within a form
             form: ""
@@ -29,7 +50,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(...)
 
@@ -37,10 +58,10 @@ module Protos
 
     def theme
       {
-        container: %w[
-          collapse
-          collapse-arrow
-          bg-base-100
+        container: [
+          "collapse",
+          ICONS.fetch(@icon),
+          STATES.fetch(@state)
         ]
       }
     end

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

@@ -5,36 +5,20 @@ module Protos
     # DOCS: Base component for all Protos::Components. You can inherit from this
     # class to gain flexible components you can style from the outside using css
     # slots, default attrs and themes.
-    #
-    # This component extends Dry::Initializer and Dry::Core::ClassAttributes to
-    # 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::Core::ClassAttributes
-
-    # Define methods for css and attrs. Each is expected to return a hash
-    defines :theme_method, type: Types::Symbol
-    defines :default_attrs_method, type: Types::Symbol
-
-    theme_method :theme
-    default_attrs_method :default_attrs
+    extend Dry::Initializer[undefined: false]
 
     # Theme can override the css hash and add additional styles
     option :theme, as: :theme_override, default: -> { {} }, reader: false
     # Class becomes the :container key in the css hash
-    option :class, as: :container_class, default: -> { "" }, reader: false
-    option :html_options, default: -> { {} }, reader: false
+    option :class, as: :container_class, default: -> { }, reader: false
 
     # Adds non-defined options to the html_options hash
     def initialize(*, **kwargs, &)
-      defined_keys = self.class.dry_initializer.definitions.keys
-      defined, undefined =
-        kwargs
-          .partition { |key, _| defined_keys.include?(key) }
-          .map!(&:to_h)
-
-      super(*, html_options: undefined, **defined, &)
+      super
+      attributes = self.class.dry_initializer.attributes(kwargs)
+      extra_keys = kwargs.keys - attributes.keys
+      @html_options = kwargs.slice(*extra_keys)
     end
 
     private
@@ -48,35 +32,27 @@ module Protos
     end
 
     def build_attrs(...)
-      defaults = if respond_to?(default_attrs_method, :include_private)
-        send(default_attrs_method)
-      end
-
       Attributes
         .new(...)
-        .merge(defaults)
+        .merge(default_attrs)
         .merge(@html_options)
         .merge(class: css[:container])
     end
 
     def build_theme(...)
-      component_style = if respond_to?(theme_method, :include_private)
-        send(theme_method)
-      end
-
       Theme
         .new(...)
-        .merge(component_style)
+        .merge(theme)
         .merge(@theme_override)
         .merge(container: @container_class)
     end
 
-    def theme_method
-      self.class.theme_method
+    def default_attrs
+      {}
     end
 
-    def default_attrs_method
-      self.class.default_attrs_method
+    def theme
+      {}
     end
   end
 end

data/lib/protos/diff/item.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Protos
+  class Diff
+    class Item < Component
+      Order = Types::Coercible::Symbol.enum(:one, :two)
+
+      ORDER = {
+        one: "diff-item-1",
+        two: "diff-item-2"
+      }.freeze
+
+      option :order, type: Order, default: -> { :one }, reader: false
+
+      def view_template(&)
+        div(**attrs, &)
+      end
+
+      private
+
+      def default_attrs
+        {
+          role: :img
+        }
+      end
+
+      def theme
+        {
+          container: ORDER.fetch(@order)
+        }
+      end
+    end
+  end
+end

data/lib/protos/diff/resizer.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Protos
+  class Diff
+    class Resizer < Component
+      def view_template(&)
+        div(**attrs, &)
+      end
+
+      private
+
+      def theme
+        {
+          container: "diff-resizer"
+        }
+      end
+    end
+  end
+end

data/lib/protos/diff.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Protos
+  class Diff < Component
+    autoload :Item, "protos/diff/item"
+    autoload :Resizer, "protos/diff/resizer"
+
+    def view_template(&)
+      figure(**attrs, &)
+    end
+
+    def item_one(*, **, &) = render Item.new(*, order: :one, **, &)
+    def item_two(*, **, &) = render Item.new(*, order: :two, **, &)
+    def resizer(...) = render Resizer.new(...)
+
+    private
+
+    def default_attrs
+      {
+        tabindex: 0
+      }
+    end
+
+    def theme
+      {
+        container: "diff"
+      }
+    end
+  end
+end

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/menu.rb

@@ -8,8 +8,8 @@ module Protos
       # dropdowns comes from there.
 
       def view_template(&block)
-        template_tag(**template_attrs) do
-          ul(**attrs, &block)
+        template(**template_attrs) do
+          render ::Protos::Menu.new(**attrs, &block)
         end
       end
 
@@ -18,11 +18,8 @@ module Protos
       def theme
         {
           container: %w[
-            menu
             dropdown-content
             z-10
-            bg-base-100
-            rounded-box
           ]
         }
       end

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/item.rb

@@ -7,6 +7,9 @@ module Protos
       # work for list items, including border radius. E.g. only the first and
       # last items will have border radius on the top and bottom.
 
+      option :wrap, Types::Bool, default: -> { false }, reader: :private
+      option :grow, Types::Bool, default: -> { false }, reader: :private
+
       def view_template(&)
         li(**attrs, &)
       end
@@ -15,9 +18,10 @@ module Protos
 
       def theme
         {
-          container: %w[
-            join-item
-            [&:not(:first-child)]:border-t-0
+          container: [
+            "list-row",
+            ("list-col-wrap" if wrap),
+            ("list-col-grow" if grow)
           ]
         }
       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(&)
@@ -17,7 +19,7 @@ module Protos
 
     def theme
       {
-        container: "join join-vertical"
+        container: "list"
       }
     end
 

data/lib/protos/menu/item.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Protos
+  class Menu
+    class Item < Component
+      option :title, type: Types::Bool, default: -> { false }
+
+      def view_template(&)
+        li(**attrs, &)
+      end
+
+      private
+
+      def theme
+        {
+          container: [
+            ("menu-title" if title)
+          ]
+        }
+      end
+    end
+  end
+end

data/lib/protos/menu.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module Protos
+  class Menu < Component
+    # DOCS: A menu of links or actions.
+    # https://daisyui.com/components/menu/
+
+    Directions = Types::Coercible::Symbol.enum(:vertical, :horizontal)
+    Sizes = Types::Coercible::Symbol.enum(:xs, :sm, :md, :lg, :xl)
+
+    DIRECTIONS = {
+      vertical: "",
+      horizontal: "menu-horizontal"
+    }.freeze
+
+    SIZES = {
+      xs: "menu-xs",
+      sm: "menu-sm",
+      md: "menu-md",
+      lg: "menu-lg",
+      xl: "menu-xl"
+    }.freeze
+
+    autoload :Item, "protos/menu/item"
+
+    option :size,
+      type: Sizes,
+      default: -> { :md },
+      reader: :private
+
+    option :direction,
+      type: Directions,
+      default: -> { :vertical },
+      reader: :private
+
+    def view_template(&)
+      ul(**attrs, &)
+    end
+
+    def item(...)
+      render Item.new(...)
+    end
+
+    private
+
+    def theme
+      {
+        container: [
+          "menu",
+          DIRECTIONS[direction],
+          SIZES[size]
+        ]
+      }
+    end
+  end
+end

data/lib/protos/mix.rb

@@ -1,15 +1,15 @@
 # frozen_string_literal: true
 
 module Protos
-  class Mix
+  module 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
+    module_function
 
-    def self.call(...) = new.call(...)
+    MERGEABLE_ATTRIBUTES = Set.new(%i[class data]).freeze
 
     def call(old_hash, *hashes)
       hashes
@@ -19,8 +19,6 @@ module Protos
         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

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