protos 0.4.1 → 0.4.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0233ed8699bbfd2a557d575c4d42418599a5b896121fb1ed42d68ff8dbb3b3e8
-  data.tar.gz: d0954355d624b87b91efe120ee06c94556b3ca437990f00a842d1c4965f9aff5
+  metadata.gz: e18641b7b93b0f94886468a48ed3c3263bb5edd72dbaeabfc03e346598f0d409
+  data.tar.gz: 207f45d2b30525c4ed65f83943c2c4eb0617a72dacabc7238a9f3cd4309ad96d
 SHA512:
-  metadata.gz: c5108530ce8e03b05d4574af5185c6a8cdff6cf0473b126bb16748a5d62a2e2c1b4a7a1183e7b186409def11d8dce75d377f5b757ece431845084ec26dc20351
-  data.tar.gz: 6a2b70254dd788a7ad3b547e9379de1555964f697e4dbf3a417a5e935a0e327dd80c9eb9eb97cfc9e38c5bdc0c0669f441fc16b46bbd9b1bdabd5e4bd4842bf2
+  metadata.gz: 844cc78e0e2972c8e726a46af3ed08e420c3581d93c79f04b266019f10a38f2441b4ec1a76ec787b16592698cc80c742d1d87d8cc793ac0259bd5baa0acbc893
+  data.tar.gz: 7b0c9022724175b60e5d1f53efb75237f944889e07fee18c8ff99165b1ae8b87843e9d0fb7ad3f8358788af565938e240141d386f29f31ac372efb71a95c40b0

data/CHANGELOG.md

@@ -15,8 +15,17 @@
 - Updates to phlex v0.10 by changing all `template` methods to `view_template`
 - Improvements to README
 
-## [0.4.0] - ???
+## [0.4.0] - 2024-04-09
 
 - Phlex discord didn't like all the calls to `render`
 - Apparently `render` is called differently within ERB
 - Suggested to change all calls to immediately render, would improve ergonomics
+
+## [0.4.2] - 2024-04-30
+
+- Adds ability to pass arrays of tokens to themes
+- Removes unnecessary calls to `tokens`, preferring arrays of strings for
+  performance
+- Improvements to performance with constant hash lookups and early returns on
+  `mix`
+- Adds steps component

data/README.md

@@ -668,7 +668,8 @@ You can run the benchmarks using the raketasks, e.g:
 
 There are also tasks for profiling and exploring memory consumption.
 
-You can find the latest benchmarks in `benchmarks/`.
+You can find the latest benchmarks in `benchmarks/`. These were run on a new
+Macbook M3 Pro chip.
 
 Currently this library is 30x slower than plain Phlex components. This is due to
 the overhead of themes, attributes and other quality of life improvements.

data/TODO.md

@@ -0,0 +1,18 @@
+# UI Components
+
+- [ ] Empty state
+- [ ] Steps
+- [ ] Avatar group
+- [ ] Calendar
+- [ ] [Descriptions](https://ant.design/components/descriptions)
+- [ ] Image (progressive loading, fault tollerant)
+
+# Form inputs
+
+- [ ] [Cascader](https://ant.design/components/cascader)
+- [ ] Rating
+- [ ] Select (multiselect, combobox, etc)
+- [ ] Time picker
+- [ ] [Transfer](https://ant.design/components/transfer)
+- [ ] Upload
+

data/lib/protos/accordion/item.rb

@@ -21,14 +21,14 @@ module Protos
       private
 
       def collapse_theme
-        { "!container": tokens("bg-base-100") }.tap do |theme|
+        { "!container": "bg-base-100" }.tap do |theme|
           theme[:container!] = css[:collapse] if css[:collapse]
         end
       end
 
       def theme
         {
-          container: tokens("join-item")
+          container: "join-item"
         }
       end
     end

data/lib/protos/accordion.rb

@@ -7,8 +7,7 @@ module Protos
     # to be open at the same time, use the collapse component.
     # https://daisyui.com/components/accordion/
 
-    option :id,
-           default: -> { "collapse-#{SecureRandom.hex(4)}" }
+    option :id, default: -> { "collapse-#{SecureRandom.hex(4)}" }
 
     def view_template(&)
       ul(**attrs, &)
@@ -18,18 +17,13 @@ module Protos
 
     def content(...) = render Collapse::Content.new(...)
 
-    def title(*, **, &)
-      render Collapse::Title.new(*, id:, **, &)
-    end
+    def title(*, **, &) = render Collapse::Title.new(*, id:, **, &)
 
     private
 
     def theme
       {
-        container: tokens(
-          "join",
-          "join-vertical"
-        )
+        container: "join join-vertical"
       }
     end
   end

data/lib/protos/alert/actions.rb

@@ -13,7 +13,7 @@ module Protos
 
       def theme
         {
-          container: tokens("flex", "gap-xs", "items-center")
+          container: "flex gap-xs items-center"
         }
       end
     end

data/lib/protos/alert/icon.rb

@@ -14,7 +14,7 @@ module Protos
 
       def theme
         {
-          container: tokens("place-self-start", "mt-1")
+          container: "place-self-start mt-1"
         }
       end
     end

data/lib/protos/alert.rb

@@ -6,14 +6,21 @@ module Protos
     # be used in combination with Protos::Toast to have popup notifications.
     # https://daisyui.com/components/alert/
 
-    AlertTypes = Types::Coercible::Symbol.enum(
+    Styles = Types::Coercible::Symbol.enum(
       :info,
       :success,
       :warning,
       :error
     )
 
-    option :type, type: AlertTypes, default: -> { :info }, reader: :private
+    STYLES = {
+      info: "alert-info",
+      error: "alert-error",
+      warning: "alert-warning",
+      success: "alert-success"
+    }.freeze
+
+    option :type, type: Styles, default: -> { :info }, reader: false
 
     def view_template(&)
       div(**attrs, &)
@@ -27,20 +34,15 @@ module Protos
 
     def theme
       {
-        container: tokens(
-          "alert",
-          color
-        )
+        container: %W[
+          alert
+          #{style}
+        ]
       }
     end
 
-    def color
-      {
-        info: "alert-info",
-        error: "alert-error",
-        warning: "alert-warning",
-        success: "alert-success"
-      }.fetch(type)
+    def style
+      STYLES.fetch(@type)
     end
   end
 end

data/lib/protos/attributes.rb

@@ -36,6 +36,9 @@ module Protos
     def mix(hash, *hashes)
       hashes.each_with_object(hash) do |hash, result|
         result.merge!(hash) do |_key, a, b| # rubocop:disable Metrics/ParameterLists
+          next a unless b
+          next a if a == b
+
           case [a, b]
           in String, String then "#{a} #{b}"
           in Array, Array then a + b

data/lib/protos/avatar.rb

@@ -5,15 +5,70 @@ module Protos
     # DOCS: The avatar component is used to represent a user or entity.
     # https://daisyui.com/components/avatar/
 
-    IndicatorTypes = Types::Coercible::Symbol.enum(:none, :online, :offline)
+    Indicators = Types::Coercible::Symbol.enum(:none, :online, :offline)
+    MaskShapes = Types::Coercible::Symbol.enum(
+      :none,
+      :squircle,
+      :heart,
+      :hexagon,
+      :hexagon2,
+      :decagon,
+      :pentagon,
+      :diamond,
+      :square,
+      :circle,
+      :parallelogram,
+      :parallelogram2,
+      :parallelogram3,
+      :parallelogram4,
+      :star,
+      :star2,
+      :triangle,
+      :triangle2,
+      :triangle3,
+      :triangle4,
+      :half1,
+      :half2
+    )
+
+    SHAPES = {
+      none: "",
+      squircle: "mask mask-squircle",
+      heart: "mask mask-heart",
+      hexagon: "mask mask-hexagon",
+      hexagon2: "mask mask-hexagon-2",
+      decagon: "mask mask-decagon",
+      pentagon: "mask mask-pentagon",
+      diamond: "mask mask-diamond",
+      square: "mask mask-square",
+      circle: "mask mask-circle",
+      parallelogram: "mask mask-parallelogram",
+      parallelogram2: "mask mask-parallelogram-2",
+      parallelogram3: "mask mask-parallelogram-3",
+      parallelogram4: "mask mask-parallelogram-4",
+      star: "mask mask-star",
+      star2: "mask mask-star-2",
+      triangle: "mask mask-triangle",
+      triangle2: "mask mask-triangle-2",
+      triangle3: "mask mask-triangle-3",
+      triangle4: "mask mask-triangle-4",
+      half1: "mask mask-half-1",
+      half2: "mask mask-half-2"
+    }.freeze
+
+    INDICATORS = {
+      none: "",
+      online: "online",
+      offline: "offline"
+    }.freeze
 
     option :placeholder, type: Types::Bool, default: -> { false }
     option :indicator,
-           type: IndicatorTypes,
+           type: Indicators,
            default: -> { :none },
            reader: false
     option :shape,
-           type: Types::MaskShapes,
+           type: MaskShapes,
            default: -> { :none },
            reader: false
 
@@ -26,38 +81,11 @@ module Protos
     private
 
     def indicator
-      {
-        none: "",
-        online: "online",
-        offline: "offline"
-      }.fetch(@indicator)
+      INDICATORS.fetch(@indicator)
     end
 
     def shape
-      {
-        none: "",
-        squircle: "mask mask-squircle",
-        heart: "mask mask-heart",
-        hexagon: "mask mask-hexagon",
-        hexagon2: "mask mask-hexagon-2",
-        decagon: "mask mask-decagon",
-        pentagon: "mask mask-pentagon",
-        diamond: "mask mask-diamond",
-        square: "mask mask-square",
-        circle: "mask mask-circle",
-        parallelogram: "mask mask-parallelogram",
-        parallelogram2: "mask mask-parallelogram-2",
-        parallelogram3: "mask mask-parallelogram-3",
-        parallelogram4: "mask mask-parallelogram-4",
-        star: "mask mask-star",
-        star2: "mask mask-star-2",
-        triangle: "mask mask-triangle",
-        triangle2: "mask mask-triangle-2",
-        triangle3: "mask mask-triangle-3",
-        triangle4: "mask mask-triangle-4",
-        half1: "mask mask-half-1",
-        half2: "mask mask-half-2"
-      }.fetch(@shape)
+      SHAPES.fetch(@shape)
     end
 
     def theme

data/lib/protos/breadcrumbs.rb

@@ -17,7 +17,7 @@ module Protos
 
     def theme
       {
-        container: tokens("breadcrumbs")
+        container: "breadcrumbs"
       }
     end
   end

data/lib/protos/card/actions.rb

@@ -13,7 +13,7 @@ module Protos
 
       def theme
         {
-          container: tokens("card-actions")
+          container: "card-actions"
         }
       end
     end

data/lib/protos/card/body.rb

@@ -13,7 +13,7 @@ module Protos
 
       def theme
         {
-          container: tokens("card-body")
+          container: "card-body"
         }
       end
     end

data/lib/protos/card/title.rb

@@ -13,7 +13,7 @@ module Protos
 
       def theme
         {
-          container: tokens("card-title")
+          container: "card-title"
         }
       end
     end

data/lib/protos/card.rb

@@ -5,12 +5,18 @@ module Protos
     # DOCS: A card component
     # https://daisyui.com/components/card/
 
-    ImageDisplayTypes = Types::Coercible::Symbol.enum(:default, :overlay, :side)
+    ImageDisplays = Types::Coercible::Symbol.enum(:default, :overlay, :side)
+
+    IMAGE_DISPLAYS = {
+      default: "",
+      overlay: "image-full",
+      side: "card-side"
+    }.freeze
 
     option :border, type: Types::Bool, default: -> { true }, reader: :private
     option :compact, type: Types::Bool, default: -> { false }, reader: :private
     option :image_display,
-           ImageDisplayTypes,
+           ImageDisplays,
            default: -> { :default },
            reader: false
 
@@ -29,11 +35,7 @@ module Protos
     private
 
     def image_display
-      {
-        default: "",
-        overlay: "image-full",
-        side: "card-side"
-      }.fetch(@image_display)
+      IMAGE_DISPLAYS.fetch(@image_display)
     end
 
     def theme

data/lib/protos/carousel/actions.rb

@@ -13,16 +13,16 @@ module Protos
 
       def theme
         {
-          container: tokens(
-            "absolute",
-            "flex",
-            "justify-between",
-            "transform",
-            "-translate-y-1/2",
-            "left-sm",
-            "right-sm",
-            "top-1/2"
-          )
+          container: %w[
+            absolute
+            flex
+            justify-between
+            transform
+            -translate-y-1/2
+            left-sm
+            right-sm
+            top-1/2
+          ]
         }
       end
     end

data/lib/protos/carousel/item.rb

@@ -13,7 +13,7 @@ module Protos
 
       def theme
         {
-          container: tokens("carousel-item")
+          container: "carousel-item"
         }
       end
     end

data/lib/protos/carousel.rb

@@ -6,6 +6,12 @@ module Protos
     # through in a mobile friendly manner.
     # https://daisyui.com/components/carousel/
 
+    SNAP_POINTS = {
+      none: "",
+      center: "carousel-center",
+      end: "carousel-end"
+    }.freeze
+
     option :vertical, type: Types::Bool, default: -> { false }
     option :snap_to,
            default: -> { :none },
@@ -27,11 +33,7 @@ module Protos
     private
 
     def snap_to
-      {
-        none: "",
-        center: "carousel-center",
-        end: "carousel-end"
-      }.fetch(@snap_to)
+      SNAP_POINTS.fetch(@snap_to)
     end
 
     def theme

data/lib/protos/chat_bubble/content.rb

@@ -6,6 +6,17 @@ module Protos
       # DOCS: The main content of a chat bubble. This would normally be the text
       # content of the message. It will be colored according to the type.
 
+      STYLES = {
+        none: "",
+        primary: "chat-bubble-primary",
+        secondary: "chat-bubble-secondary",
+        accent: "chat-bubble-accent",
+        info: "chat-bubble-info",
+        success: "chat-bubble-success",
+        warning: "chat-bubble-warning",
+        error: "chat-bubble-error"
+      }.freeze
+
       option :type,
              default: -> { :none },
              reader: false,
@@ -26,22 +37,16 @@ module Protos
 
       private
 
-      def type
-        {
-          none: "",
-          primary: "chat-bubble-primary",
-          secondary: "chat-bubble-secondary",
-          accent: "chat-bubble-accent",
-          info: "chat-bubble-info",
-          success: "chat-bubble-success",
-          warning: "chat-bubble-warning",
-          error: "chat-bubble-error"
-        }.fetch(@type)
+      def style
+        STYLES.fetch(@type)
       end
 
       def theme
         {
-          container: tokens("chat-bubble", type)
+          container: %W[
+            chat-bubble
+            #{style}
+          ]
         }
       end
     end

data/lib/protos/chat_bubble/footer.rb

@@ -13,7 +13,7 @@ module Protos
 
       def theme
         {
-          container: tokens("chat-footer")
+          container: "chat-footer"
         }
       end
     end

data/lib/protos/chat_bubble/header.rb

@@ -14,7 +14,7 @@ module Protos
 
       def theme
         {
-          container: tokens("chat-header")
+          container: "chat-header"
         }
       end
     end

data/lib/protos/chat_bubble/image.rb

@@ -14,7 +14,7 @@ module Protos
 
       def theme
         {
-          container: tokens("chat-image")
+          container: "chat-image"
         }
       end
     end

data/lib/protos/chat_bubble.rb

@@ -7,6 +7,11 @@ module Protos
     # in a larger chat history.
     # https://daisyui.com/components/chat/
 
+    ALIGNMENTS = {
+      start: "chat-start",
+      end: "chat-end"
+    }.freeze
+
     option :align,
            default: -> { :start },
            reader: false,
@@ -30,15 +35,15 @@ module Protos
     private
 
     def align
-      {
-        start: "chat-start",
-        end: "chat-end"
-      }.fetch(@align)
+      ALIGNMENTS.fetch(@align)
     end
 
     def theme
       {
-        container: tokens("chat", align)
+        container: %W[
+          chat
+          #{align}
+        ]
       }
     end
   end

data/lib/protos/collapse/content.rb

@@ -14,7 +14,7 @@ module Protos
 
       def theme
         {
-          container: tokens("collapse-content")
+          container: "collapse-content"
         }
       end
     end

data/lib/protos/collapse/title.rb

@@ -22,7 +22,7 @@ module Protos
 
       def theme
         {
-          container: tokens("collapse-title")
+          container: "collapse-title"
         }
       end
     end

data/lib/protos/collapse.rb

@@ -26,7 +26,11 @@ module Protos
 
     def theme
       {
-        container: tokens("collapse", "collapse-arrow", "bg-base-100")
+        container: %w[
+          collapse
+          collapse-arrow
+          bg-base-100
+        ]
       }
     end
 

data/lib/protos/combobox.rb

@@ -9,7 +9,7 @@ module Protos
     option :trigger,
            default: -> { :click },
            reader: false,
-           type: TriggerTypes | Types::Array.of(TriggerTypes)
+           type: Popover::Triggers | Types::Array.of(Popover::Triggers)
 
     def trigger(...) = render Popover::Trigger.new(...)
 

data/lib/protos/command/dialog.rb

@@ -25,14 +25,14 @@ module Protos
 
       def theme
         {
-          container: tokens(
-            "modal",
-            "modal-bottom",
-            "backdrop-blur-sm",
-            "sm:modal-middle"
-          ),
-          modal: tokens("modal-box", "p-0"),
-          form: tokens("modal-backdrop")
+          container: %w[
+            modal
+            modal-bottom
+            backdrop-blur-sm
+            sm:modal-middle
+          ],
+          modal: "modal-box p-0",
+          form: "modal-backdrop"
         }
       end
     end

data/lib/protos/command/empty.rb

@@ -20,7 +20,7 @@ module Protos
 
       def theme
         {
-          container: tokens("hidden", "px-xs", "py-sm")
+          container: "hidden px-xs py-sm"
         }
       end
     end