protos 0.1.2 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d640442007a4c04a5706286fb3073495ba0bcea036f543c112865d4b8f96646f
-  data.tar.gz: 03ee33c002aee6e033ecebda12bab9db1fe74ac2d989213da013a96e79598ceb
+  metadata.gz: c5001f5f332c249597cb0f0c40cb8ff83429d7843db7c2f3f6cfc3b3ad6e9b50
+  data.tar.gz: 4e0426a89a66cd600cafe5411b02f6b3c5088dcc12bf64148d238bc542878459
 SHA512:
-  metadata.gz: 496fc272a6606ab50281cab0cc434bd8c8e8607b6efa976ce2a671b9fdc2ed818c19d41b97c0d9831a835473d37e1846d56ffa0d85791c35d698dedd2521400b
-  data.tar.gz: 18a8d1f2f496c47a85a41b84a54c108a889d954c9bead99b1547819b813538d9c8d124ca3e4b4f94bb8ac05ca3121cd56adaf63e79e132c59656bea31473190d
+  metadata.gz: eab1e457a004e0501c698f22a3c1aefb389a28a7970f864762320d4a4628e3b502d4a70080f05cdafc112d4dedd3d8a79637428ecef2194ccdf98d93111f2312
+  data.tar.gz: 3b1325007d6ad4c99bc478213aebf31bc03463308f591de7051d5542a95f1d9fd76d176d8e2a6d1396887b7f997e8bb19f14bde22d8544036144d2633317b98b

data/CHANGELOG.md

@@ -3,3 +3,9 @@
 ## [0.1.0] - 2024-03-01
 
 - Initial release
+
+## [0.2.0] - 2024-03-06
+
+- Chose to move away from daisyUI dropdown defaults as they have problems
+  displaying properly in too many situations
+- Opted for using a protos-stimulus controller that uses tippy.js

data/README.md

@@ -4,6 +4,19 @@ A UI component library for [Phlex](https://www.phlex.fun/) using
 [tailwindcss](https://tailwindcss.com/) and
 [daisyUI](https://daisyui.com/).
 
+You can see a full list of the components at
+[https://protos.inhouse.work/](https://protos.inhouse.work/).
+
+- Tailwindcss classes are merged using
+[tailwind\_merge](https://github.com/gjtorikian/tailwind_merge).
+- Uses [tippy.js](https://atomiks.github.io/tippyjs/v6/getting-started/) for
+  dropdowns, combobox, and popovers
+
+Other Phlex based UI libraries worth checking out:
+
+- [PhlexUI](https://phlexui.com/)
+- [ZestUI](https://zestui.com/)
+
 This library avoids re-making Protos components for extremely simple daisyui
 components such as:
 

data/lib/protos/alert/actions.rb

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

data/lib/protos/chat_bubble.rb

@@ -14,20 +14,20 @@ module Protos
       div(**attrs, &block)
     end
 
-    def image(...)
-      Image.new(...)
-    end
-
-    def header(...)
-      Header.new(...)
+    def content(...)
+      Content.new(...)
     end
 
     def footer(...)
       Footer.new(...)
     end
 
-    def content(...)
-      Content.new(...)
+    def header(...)
+      Header.new(...)
+    end
+
+    def image(...)
+      Image.new(...)
     end
 
     private

data/lib/protos/combobox.rb

@@ -1,14 +1,11 @@
 # frozen_string_literal: true
 
 module Protos
-  class Combobox < Component
-    def template
-      div(**attrs) do
-        render Popover.new do
-          yield if block_given?
-        end
-      end
-    end
+  class Combobox < Popover
+    option :trigger,
+           default: -> { :click },
+           reader: false,
+           type: TriggerTypes | Types::Array.of(TriggerTypes)
 
     def trigger(...)
       Popover::Trigger.new(...)
@@ -46,7 +43,10 @@ module Protos
 
     def default_attrs
       {
-        data: { controller: "protos--command" }
+        data: {
+          controller: "protos--popover",
+          "protos--popover-options-value": JSON.generate(options)
+        }
       }
     end
   end

data/lib/protos/command/list.rb

@@ -9,6 +9,12 @@ module Protos
 
       private
 
+      def default_attrs
+        {
+          data: { controller: "protos--command" }
+        }
+      end
+
       def theme
         {
           container: tokens("menu")

data/lib/protos/command.rb

@@ -42,7 +42,7 @@ module Protos
 
     def default_attrs
       {
-        data: { controller: "protos--command protos--modal" }
+        data: { controller: "protos--modal" }
       }
     end
   end

data/lib/protos/dropdown/menu.rb

@@ -2,9 +2,11 @@
 
 module Protos
   class Dropdown
-    class Menu < Component
+    class Menu < Popover::Content
       def template(&block)
-        ul(**attrs, &block)
+        template_tag(**template_attrs) do
+          ul(**attrs, &block)
+        end
       end
 
       private

data/lib/protos/dropdown/trigger.rb

@@ -2,10 +2,7 @@
 
 module Protos
   class Dropdown
-    class Trigger < Component
-      def template(&block)
-        summary(**attrs, &block)
-      end
+    class Trigger < Popover::Trigger
     end
   end
 end

data/lib/protos/dropdown.rb

@@ -1,25 +1,15 @@
 # frozen_string_literal: true
 
 module Protos
-  class Dropdown < Component
-    PositionTypes = Types::Coercible::Symbol.enum(
-      :top,
-      :bottom,
-      :left,
-      :right,
-      :start,
-      :end
-    )
-
+  class Dropdown < Popover
     option :position,
            type: PositionTypes,
            default: -> { :bottom },
            reader: false
-    option :hover, type: Types::Bool, default: -> { false }
-
-    def template(&block)
-      details(**attrs, &block)
-    end
+    option :trigger,
+           default: -> { :click },
+           reader: false,
+           type: TriggerTypes | Types::Array.of(TriggerTypes)
 
     def item(...)
       Item.new(...)
@@ -32,28 +22,5 @@ module Protos
     def trigger(...)
       Trigger.new(...)
     end
-
-    private
-
-    def position
-      {
-        bottom: "dropdown-bottom",
-        top: "dropdown-top",
-        left: "dropdown-left",
-        right: "dropdown-right",
-        end: "dropdown-end",
-        start: "dropdown-start"
-      }.fetch(@position)
-    end
-
-    def theme
-      {
-        container: tokens(
-          "dropdown",
-          position,
-          hover: "dropdown-hover"
-        )
-      }
-    end
   end
 end

data/lib/protos/popover/content.rb

@@ -4,14 +4,18 @@ module Protos
   class Popover
     class Content < Component
       def template(&block)
-        div(**attrs, &block)
+        template_tag(**template_attrs) do
+          div(**attrs, &block)
+        end
       end
 
       private
 
-      def theme
+      def template_attrs
         {
-          container: tokens("dropdown-content", "z-10")
+          data: {
+            "protos--popover-target": "template"
+          }
         }
       end
     end

data/lib/protos/popover/trigger.rb

@@ -4,7 +4,16 @@ module Protos
   class Popover
     class Trigger < Component
       def template(&block)
-        summary(**attrs, &block)
+        div(**attrs, &block)
+      end
+
+      private
+
+      def default_attrs
+        {
+          data: { "protos--popover-target": "trigger" },
+          tabindex: 0
+        }
       end
     end
   end

data/lib/protos/popover.rb

@@ -7,21 +7,74 @@ module Protos
 
     PositionTypes = Types::Coercible::Symbol.enum(
       :top,
+      :top_start,
+      :top_end,
+      :right,
+      :right_start,
+      :right_end,
       :bottom,
+      :bottom_start,
+      :bottom_end,
       :left,
-      :right,
-      :start,
-      :end
+      :left_start,
+      :left_end
+    )
+
+    AnimationTypes = Types::Coercible::Symbol.enum(
+      :fade,
+      :shift_away,
+      :shift_away_subtle,
+      :shift_away_extreme,
+      :shift_towards,
+      :shift_towards_subtle,
+      :shift_towards_extreme,
+      :scale,
+      :scale_subtle,
+      :scale_extreme,
+      :perspective,
+      :perspective_subtle,
+      :perspective_extreme
+    )
+
+    TriggerTypes = Types::Coercible::Symbol.enum(
+      :focus,
+      :mouseenter,
+      :click,
+      :focusin,
+      :manual
     )
 
     option :position,
            type: PositionTypes,
-           default: -> { :bottom },
+           default: -> { :top },
+           reader: false
+    option :animation,
+           type: AnimationTypes,
+           default: -> { :fade },
            reader: false
-    option :hover, type: Types::Bool, default: -> { false }
+    option :duration,
+           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
+    option :z_index,
+           type: Types::Integer,
+           default: -> { 9999 },
+           reader: false
+    option :options,
+           default: -> { {} },
+           reader: false,
+           type: Types::Hash
+    option :trigger,
+           default: -> { %i[mouseenter focus] },
+           reader: false,
+           type: TriggerTypes | Types::Array.of(TriggerTypes)
 
     def template(&block)
-      details(**attrs, &block)
+      div(**attrs, &block)
     end
 
     def content(...)
@@ -34,20 +87,27 @@ module Protos
 
     private
 
-    def position
-      {
-        bottom: "dropdown-bottom",
-        top: "dropdown-top",
-        left: "dropdown-left",
-        right: "dropdown-right",
-        end: "dropdown-end",
-        start: "dropdown-start"
-      }.fetch(@position)
+    def dasherize(string)
+      string.to_s.tr("_", "-")
+    end
+
+    def options
+      opts = {}
+      opts[:animation] = dasherize(@animation)
+      opts[:placement] = dasherize(@position)
+      opts[:duration] = @duration
+      opts[:hideOnClick] = @hide_on_click
+      opts[:zIndex] = @z_index
+      opts[:trigger] = Array(@trigger).flatten.map(&:to_s).join(" ")
+      opts.merge(@options)
     end
 
-    def theme
+    def default_attrs
       {
-        container: tokens("dropdown", position)
+        data: {
+          controller: "protos--popover",
+          "protos--popover-options-value": JSON.generate(options)
+        }
       }
     end
   end

data/lib/protos/stats.rb

@@ -6,6 +6,30 @@ module Protos
       div(**attrs, &block)
     end
 
+    def actions(...)
+      Actions.new(...)
+    end
+
+    def description(...)
+      Description.new(...)
+    end
+
+    def figure(...)
+      Figure.new(...)
+    end
+
+    def stat(...)
+      Stat.new(...)
+    end
+
+    def title(...)
+      Title.new(...)
+    end
+
+    def value(...)
+      Value.new(...)
+    end
+
     private
 
     def theme

data/lib/protos/swap.rb

@@ -4,7 +4,7 @@ module Protos
   class Swap < Component
     def template
       label(**attrs) do
-        input(type: :checkbox)
+        input(type: :checkbox, class: css[:input])
         yield if block_given?
       end
     end
@@ -21,7 +21,8 @@ module Protos
 
     def theme
       {
-        container: tokens("swap")
+        container: tokens("swap"),
+        input: tokens("hidden")
       }
     end
   end

data/lib/protos/table.rb

@@ -2,6 +2,19 @@
 
 module Protos
   class Table < Component
+    option :pin_rows, default: -> { false }, type: Types::Bool
+    option :pin_columns, default: -> { false }, type: Types::Bool
+    option :striped, default: -> { false }, type: Types::Bool
+    option :size,
+           default: -> { :md },
+           reader: false,
+           type: Types::Coercible::Symbol.enum(
+             :xs,
+             :sm,
+             :md,
+             :lg
+           )
+
     def template(&block)
       div(**attrs) do
         table(class: css[:table], &block)
@@ -38,10 +51,25 @@ module Protos
 
     private
 
+    def size
+      {
+        xs: "table-xs",
+        sm: "table-sm",
+        md: "table-md",
+        lg: "table-lg"
+      }.fetch(@size)
+    end
+
     def theme
       {
         container: tokens("w-full", "overflow-x-auto"),
-        table: tokens("table")
+        table: tokens(
+          "table",
+          size,
+          pin_rows: "table-pin-rows",
+          pin_columns: "table-pin-columns",
+          striped: "table-striped"
+        )
       }
     end
   end

data/lib/protos/tabs/tab.rb

@@ -5,8 +5,8 @@ module Protos
     class Tab < Component
       param :id
       option :label
-      option :active, default: false
-      option :disabled, default: false
+      option :active, default: -> { false }
+      option :disabled, default: -> { false }
 
       def template(&block)
         input(

data/lib/protos/tabs.rb

@@ -3,23 +3,23 @@
 module Protos
   class Tabs < Component
     option :type,
+           default: -> { :default },
+           reader: false,
            type: Types::Coercible::Symbol.enum(
              :default,
              :boxed,
              :bordered,
              :lifted
-           ),
-           default: -> { :default },
-           reader: false
+           )
     option :size,
+           default: -> { :md },
+           reader: false,
            type: Types::Coercible::Symbol.enum(
              :xs,
              :sm,
              :md,
              :lg
-           ),
-           default: -> { :md },
-           reader: false
+           )
 
     def template(&block)
       div(**attrs, &block)

data/lib/protos/theme.rb

@@ -15,27 +15,35 @@ module Protos
     end
 
     def add(key, value)
-      current_tokens = parse(@theme.fetch(key, ""))
-      new_tokens = parse(value)
-      tokens = current_tokens + new_tokens
-
-      @theme[key] = tokens.to_s
+      TokenList.new
+        .add(@theme.fetch(key, ""))
+        .add(value)
+        .to_s
+        .tap do |tokens|
+          @theme[key] = tokens
+        end
     end
 
     def remove(key, value)
-      current_tokens = parse(@theme.fetch(key, ""))
-      removable_tokens = parse(value)
-      tokens = current_tokens - removable_tokens
-
-      @theme[key] = tokens.to_s
+      TokenList.new
+        .add(@theme.fetch(key, ""))
+        .remove(value)
+        .to_s
+        .tap do |tokens|
+          @theme[key] = tokens
+        end
     end
 
     def set(key, value)
       if value.is_a?(Hash)
         @theme[key] = value
       else
-        tokens = parse(value)
-        @theme[key] = tokens.to_s
+        TokenList
+          .parse(value)
+          .to_s
+          .tap do |tokens|
+            @theme[key] = tokens
+          end
       end
     end
 
@@ -61,10 +69,6 @@ module Protos
 
     private
 
-    def parse(value)
-      TokenList.parse(value)
-    end
-
     def negation?(key)
       key.to_s.start_with?("!")
     end

data/lib/protos/toast/close_button.rb

@@ -13,6 +13,16 @@ module Protos
           )
         end
       end
+
+      private
+
+      def theme
+        {
+          # NOTE: Added this because I'm noticing the form having a margin
+          # with a default setup. Not sure if this is really needed.
+          form: tokens("m-0")
+        }
+      end
     end
   end
 end

data/lib/protos/toast.rb

@@ -3,15 +3,21 @@
 module Protos
   class Toast < Component
     Positions = Types::Symbol.enum(
-      :start,
-      :center,
-      :end,
-      :top,
-      :middle,
-      :bottom
+      :top_start,
+      :top_center,
+      :top_end,
+      :middle_start,
+      :middle_center,
+      :middle_end,
+      :bottom_start,
+      :bottom_center,
+      :bottom_end
     )
 
-    option :position, type: Positions, default: -> { :end }
+    option :position,
+           type: Positions,
+           default: -> { :bottom_end },
+           reader: false
 
     def template(&block)
       dialog(**attrs, &block)
@@ -29,12 +35,27 @@ module Protos
       }
     end
 
+    def position
+      {
+        top_start: "toast-start toast-top",
+        top_center: "toast-center toast-top",
+        top_end: "toast-end toast-top",
+        middle_start: "toast-start toast-middle",
+        middle_center: "toast-center toast-middle",
+        middle_end: "toast-end toast-middle",
+        bottom_start: "toast-start toast-bottom",
+        bottom_center: "toast-center toast-bottom",
+        bottom_end: "toast-end toast-bottom"
+      }.fetch(@position)
+    end
+
     def theme
       {
         container: tokens(
           "toast",
-          "toast-end",
-          "[&:not([open])]:hidden"
+          position,
+          "[&:not([open])]:hidden",
+          "bg-transparent"
         )
       }
     end

data/lib/protos/token_list.rb

@@ -6,36 +6,61 @@ module Protos
       case input
       when String then new(input.split)
       when Array then new(input)
+      when TokenList then input
       else raise ArgumentError, "Invalid input: #{input.inspect}"
       end
     end
 
     attr_reader :tokens
 
-    def initialize(tokens)
+    def initialize(tokens = [])
       @tokens = Set.new(tokens)
     end
 
     def to_s
-      @tokens.to_a.join(" ")
+      merge(@tokens.to_a.join(" "))
     end
 
     def -(other)
-      other = TokenList.parse(other) unless other.is_a?(TokenList)
+      other = TokenList.parse(other)
       self.class.new(@tokens - other.tokens)
     end
 
     def +(other)
-      other = TokenList.parse(other) unless other.is_a?(TokenList)
+      other = TokenList.parse(other)
       self.class.new(@tokens + other.tokens)
     end
 
     def remove(token)
-      @tokens.delete(token)
+      tap do
+        self.class.parse(token).tokens.each do |token|
+          @tokens.delete(token)
+        end
+      end
     end
 
-    def add(token)
-      @tokens.add(token)
+    def add(input)
+      tap do
+        self.class.parse(input).tokens.each do |token|
+          @tokens.add(token)
+        end
+      end
+    end
+
+    private
+
+    def merge(tokens)
+      TailwindMerge::Merger.new(
+        config: {
+          theme: {
+            # Not currently working in the gem.
+            # "spacing" => %w[xs sm md lg xl],
+            # "padding" => %w[xs sm md lg xl],
+            # "margin" => %w[xs sm md lg xl]
+          }
+        }
+      )
+        .merge(tokens)
     end
   end
 end

data/lib/protos/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Protos
-  VERSION = "0.1.2"
+  VERSION = "0.2.1"
 end

data/lib/protos.rb

@@ -1,8 +1,10 @@
 # frozen_string_literal: true
 
+require "json"
 require "dry-types"
 require "dry-initializer"
 require "phlex"
+require "tailwind_merge"
 
 module Protos
   class Error < StandardError; end
@@ -50,8 +52,6 @@ module Protos
     require_relative "protos/collapse/title"
     require_relative "protos/collapse/content"
 
-    require_relative "protos/combobox"
-
     require_relative "protos/command"
     require_relative "protos/command/input"
     require_relative "protos/command/dialog"
@@ -67,11 +67,6 @@ module Protos
     require_relative "protos/drawer/trigger"
     require_relative "protos/drawer/content"
 
-    require_relative "protos/dropdown"
-    require_relative "protos/dropdown/item"
-    require_relative "protos/dropdown/menu"
-    require_relative "protos/dropdown/trigger"
-
     require_relative "protos/hero"
     require_relative "protos/hero/content"
     require_relative "protos/hero/overlay"
@@ -125,5 +120,13 @@ module Protos
     require_relative "protos/typography/heading"
     require_relative "protos/typography/paragraph"
     require_relative "protos/typography/inline_link"
+
+    # Dependent
+    require_relative "protos/dropdown"
+    require_relative "protos/dropdown/item"
+    require_relative "protos/dropdown/menu"
+    require_relative "protos/dropdown/trigger"
+
+    require_relative "protos/combobox"
   end
 end

data/protos.gemspec

@@ -38,6 +38,7 @@ Gem::Specification.new do |spec|
   spec.add_dependency "dry-initializer", "~> 3.1"
   spec.add_dependency "dry-types", "~> 1.7"
   spec.add_dependency "phlex", "~> 1.9"
+  spec.add_dependency "tailwind_merge", "~> 0.10"
 
   # For more information and examples about making a new gem, check out our
   # guide at: https://bundler.io/guides/creating_gem.html

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: protos
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.2.1
 platform: ruby
 authors:
 - Nolan J Tait
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-03-05 00:00:00.000000000 Z
+date: 2024-03-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: dry-core
@@ -66,6 +66,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '1.9'
+- !ruby/object:Gem::Dependency
+  name: tailwind_merge
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.10'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.10'
 description: A UI component library built with phlex and daisyui
 email:
 - nolanjtait@gmail.com