protos 0.6.0 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0796561a80e75fb39f8b35ec75257104adc90b21227ef1525876576d10415269'
-  data.tar.gz: 394a8ee190d1d2647476db45d2d9b9edb156bc42a3935898d6f1deca35261326
+  metadata.gz: d7486060db2b247fab3e5d5caa33c6f8d35631772e267ae248d8929b71038fbb
+  data.tar.gz: ef414faf4cc381245bc9e7b609124858b4a1d1280dfcf5e21a139641d6877f0a
 SHA512:
-  metadata.gz: 59e2288d2ae8adfc3b352838dda25c776edddf48d99b310181629e78f09831552be23e36adedaca7bf3601678cb08950500f4b72f2ed609324ccd72ddd32a92d
-  data.tar.gz: e0e4beda7e4cbff4e3b669899b65df2ec7c37fe388e75b561418ce1cc65abd4cb1cfecabd743f964bf0dee98de1c4ccdbf9f7e76f77078f294a8bfb0a4272802
+  metadata.gz: 37c65c3a6be4bfc15fb70e31988a4624c56426e607796de03ae8be9b47be9f016ad27ee4fc508ec57442f6cb0ae8d5d2e27bad40b8b8178c61488935fcafbf9c
+  data.tar.gz: 56354393cb9425b3455bcf4baa568a7f23805a226a3b0de75264f505dc9c5f2deee503d77e4b3fd0d7e3ecdef6253daebc5262ba0cb5b7591b6582fec3f96adb

data/CHANGELOG.md

@@ -1,12 +1,23 @@
 ## [Unreleased]
 
+- Changes passing an `input_id` to accordions. Replaced with the more accurate
+  `input_name` (optional) parameter. There was no point in having different
+  name attributes for the different radio buttons
+- Updates modal component to use newer modal controller from protos-stimulus
+  that uses `@stimulus-components/dialog`
+- Adds the ability for `css` helper to take multiple values, including inline
+  values instead of theme keys.
+- Adds new `Protos::Badge` component
+- Removes deprecated tokens to prepare for phlex 2.0
+- Removes `dry-initializer` undefined constant to improve performance
+- Adds autoloading constants instead of hard requires
+
 ## [0.6.0] - 2024-09-04
 
 - Changes how merging attributes works to only mix on certain attributes,
   overriding on all others. This is opposite to how attributes used to be merged
   by default. This is a fix for attributes like `value` where you actually need
   to override them.
-- Adds tests for all Rails components
 - Adds a separate tested `Mix` class for handling attribute merging
 
 ## [0.5.0] - 2024-08-27

data/README.md

@@ -88,9 +88,10 @@ class Navbar
 end
 ```
 
-Eventually everyone makes a kind of ad-hoc system for specifying styles. It gets
-more complicated when you have attributes like a data-controller. How do you
-give a good experience letting people using your components to add their own
+Eventually everyone makes a kind of ad-hoc system for specifying styles.
+
+It gets more complicated when you have attributes like a data-controller. How do
+you give a good experience letting people using your components to add their own
 controllers while your component depends on one already?
 
 This library is an attempt to make this kind of developer experience while
@@ -136,7 +137,7 @@ class List < Protos::Component
 
   def theme
     {
-      list: "space-y-4", # We can use `#tokens` from phlex (recommended)
+      list: ["space-y-4"], # We can use arrays
       item: "font-bold text-2xl" # Or just plain old strings
     }
   end
@@ -218,13 +219,25 @@ class List < Protos::Component
 
   def custom_theme
     {
-      list: tokens("space-y-4"),
-      item: tokens("font-bold", "text-2xl")
+      list: "space-y-4",
+      item: ["font-bold", "text-2xl"]
     }
   end
 end
 ```
 
+Slots can also take multiple arguments, and even inline styles:
+
+```ruby
+class ListItem < Protos::Component
+  def view_template
+    li(class: css[:item, :primary_item, "text-sm"])
+  end
+end
+```
+
+This combines the styles together, removing any duplicates.
+
 ### Attrs and default attrs
 
 By convention, all components spread in an `attrs` hash on their outermost
@@ -257,8 +270,8 @@ class List < Protos::Component
 
   def theme
     {
-      container: tokens("space-y-4"),
-      item: tokens("font-bold")
+      container: "space-y-4",
+      item: "font-bold"
     }
   end
 end
@@ -488,7 +501,7 @@ module Components
 
     def theme
       super.merge({
-        input: tokens("block", "bg-red-500")
+        input: ["block", "bg-red-500"]
       })
     end
   end
@@ -561,11 +574,11 @@ module Ui
 
     def theme
       {
-        container: tokens("space-y-xs"),
-        header: tokens("flex", "justify-between", "items-end", "gap-sm"),
-        list: tokens("divide-y", "border", "w-full"),
-        actions: tokens("space-x-xs"),
-        item: tokens("p-sm")
+        container: "space-y-xs",
+        header: "flex justify-between items-end gap-sm",
+        list: "divide-y border w-full",
+        actions: "space-x-xs",
+        item: "p-sm"
       }
     end
   end
@@ -676,10 +689,10 @@ module Ui
 
     def theme
       {
-        container: tokens("space-y-sm"),
-        header: tokens("flex", "justify-between", "items-end", "gap-sm"),
-        table: tokens("border"),
-        caption: tokens("text-muted")
+        container: "space-y-sm",
+        header: "flex justify-between items-end gap-sm",
+        table: "border",
+        caption: "text-muted"
       }
     end
   end
@@ -714,12 +727,11 @@ render Ui::Table.new(title: "A table", collection:) do |table|
 end
 ```
 
-## No unnecessary components
+## Missing components
 
-This library avoids re-making Protos components for extremely simple daisyui
-components such as:
+This library tries to avoid re-making Protos components for extremely simple
+DaisyUI components. Here is a list that we don't yet have components for:
 
-- Badge
 - Buttons
 - Checkbox
 - File input

data/examples/list.rb

@@ -20,8 +20,8 @@ class List < Protos::Component
 
   def theme
     {
-      container: tokens("space-y-4"),
-      item: tokens("font-bold")
+      container: "space-y-4",
+      item: "font-bold"
     }
   end
 end

data/examples/navbar.rb

@@ -20,14 +20,9 @@ class Navbar < Protos::Component
 
   def theme
     {
-      container: tokens(
-        "flex",
-        "justify-between",
-        "items-center",
-        "gap-sm"
-      ),
-      heading: tokens("text-2xl", "font-bold"),
-      subtitle: tokens("text-base")
+      container: "flex justify-between items-center gap-sm",
+      heading: "text-2xl font-bold",
+      subtitle: "text-base"
     }
   end
 end

data/lib/protos/accordion/item.rb

@@ -5,13 +5,15 @@ module Protos
     class Item < Component
       # DOCS: An accorion is just a collapse with radio buttons.
 
-      option :input_id, type: Types::String | Types::Integer
+      option :input_name,
+        type: Types::String | Types::Integer | Types::Nil,
+        reader: false
 
       def view_template(&block)
         li(**attrs) do
           render Collapse.new(
             theme: collapse_theme,
-            input_id: @input_id.to_s,
+            input_name: @input_name,
             input_type: :radio,
             &block
           )

data/lib/protos/accordion.rb

@@ -7,30 +7,29 @@ module Protos
     # to be open at the same time, use the collapse component.
     # https://daisyui.com/components/accordion/
 
+    autoload :Item, "protos/accordion/item"
+
+    option :input_name,
+      default: -> { "accordion-#{SecureRandom.hex(4)}" },
+      reader: false,
+      type: Types::String
+
     def view_template(&)
       ul(**attrs, &)
     end
 
-    def item(*, input_id: nil, **, &)
-      self.current_input_id = input_id
-
-      render Item.new(*, input_id: current_input_id, **, &)
+    def item(*, **, &)
+      render Item.new(*, input_name: @input_name, **, &)
     end
 
     def content(...) = render Collapse::Content.new(...)
 
     def title(*, **, &)
-      render Collapse::Title.new(*, input_id: current_input_id, **, &)
+      render Collapse::Title.new(*, input_id: @input_name, **, &)
     end
 
     private
 
-    attr_reader :current_input_id
-
-    def current_input_id=(value)
-      @current_input_id = value || "collapse-#{SecureRandom.hex(4)}"
-    end
-
     def theme
       {
         container: "join join-vertical"

data/lib/protos/alert.rb

@@ -6,6 +6,9 @@ module Protos
     # be used in combination with Protos::Toast to have popup notifications.
     # https://daisyui.com/components/alert/
 
+    autoload :Actions, "protos/alert/actions"
+    autoload :Icon, "protos/alert/icon"
+
     Styles = Types::Coercible::Symbol.enum(
       :info,
       :success,

data/lib/protos/avatar.rb

@@ -64,13 +64,13 @@ module Protos
 
     option :placeholder, type: Types::Bool, default: -> { false }
     option :indicator,
-           type: Indicators,
-           default: -> { :none },
-           reader: false
+      type: Indicators,
+      default: -> { :none },
+      reader: false
     option :shape,
-           type: MaskShapes,
-           default: -> { :none },
-           reader: false
+      type: MaskShapes,
+      default: -> { :none },
+      reader: false
 
     def view_template(&block)
       div(**attrs) do
@@ -90,12 +90,12 @@ module Protos
 
     def theme
       {
-        container: tokens(
+        container: [
           "avatar",
           indicator,
-          placeholder: "placeholder"
-        ),
-        figure: tokens(shape)
+          ("placeholder" if placeholder)
+        ],
+        figure: shape
       }
     end
   end

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

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