protos 0.2.2 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6771e623cc76042636663c199b9dd48e3b9d8ed5011d180f7e9e1fa50728fc65
-  data.tar.gz: 3dcd91f89719b72fbd9f23725add23ef09d0588196f8647ed7597baeed48b5de
+  metadata.gz: 5fe048d407665dc19039444171da359495565d7b94d1787c444c4e8e8c5fe191
+  data.tar.gz: fda1eea822602572a8a28be104b8e60b533d429745d4ef616be8c7f14bf9e53e
 SHA512:
-  metadata.gz: 843780d369c551ee4e407037a6fa842343d36f9582d73823573af5bb06ee243424d85416737d9c6e80f433ab0147be41caf7af93b1c5db64765f479886157340
-  data.tar.gz: 37fb34135c07d53fc0d9e7af1c814f91130ed0a6891fb00db2059090fe7ec8787cebc004b41186a9cf09c936a151c9c2ef503333a25169cee91b1a3ca67f5864
+  metadata.gz: e4859a4076a79386043b18ad71735b9b372c9120a0f3a8a816d1020174152b19ed2a030172ef01e7240ec26d28dce73070ce478ed440e15526eabde03f500067
+  data.tar.gz: 2ac30388a8534552f10cb32bc68b9f7786bd14caf1eab69d8f15c6a310a08d92b27eeb1a97896a60df18cd6e489c30f179706fd72ac0eca7072f435d05ebad9e

data/README.md

@@ -25,11 +25,11 @@ Other Phlex based UI libraries worth checking out:
 A protos component follows some conventions that make them easy to work with as
 components in your app.
 
-Every UI component library will have a tension between being too general or
-narrow to be useful. Making components that look good out of the box can make
-them hard to customize.
+Every UI component library will have a tension between being too general to fit
+in your app or too narrow to be useful. Making components that look good out of
+the box can make them hard to customize.
 
-We try and resolve this tensions by making the components have a minimal style
+We try and resolve this tension by making these components have a minimal style
 that can be easily overridden using some ergonomic conventions.
 
 There are 3 core conventions:
@@ -40,7 +40,12 @@ There are 3 core conventions:
 ### Slots and themes
 
 Components are styled with `css` slots that are filled with values from
-a `theme`:
+a `theme`.
+
+You define a theme for your component by defining a `#theme` method that returns
+a hash. This hash will be merged with any theme provided when rendering your
+component. This allows you to easily override styles for your components
+depending on their context.
 
 ```ruby
 class List < Protos::Component
@@ -53,31 +58,8 @@ class List < Protos::Component
 
   def theme
     {
-      list: tokens("space-y-4"),
-      item: tokens("font-bold", "text-2xl")
-    }
-  end
-end
-```
-
-Here we are using conditional `tokens` from Phlex but you can also use
-simple strings.
-
-If you want to change the method we define our default theme you can override the
-`theme_method` on the class:
-
-```ruby
-class List < Protos::Component
-  theme_method :custom_theme
-
-  # ...
-
-  private
-
-  def custom_theme
-    {
-      list: tokens("space-y-4"),
-      item: tokens("font-bold", "text-2xl")
+      list: tokens("space-y-4"), # We can use `#tokens` from phlex (recommended)
+      item: "font-bold text-2xl" # Or just plain old strings
     }
   end
 end
@@ -137,14 +119,36 @@ The new `css[:item]` slot would be:
 <li class="font-bold">Item 1</li>
 ```
 
+If you want to change the method we define our default theme you can override the
+`theme_method` on the class:
+
+```ruby
+class List < Protos::Component
+  theme_method :custom_theme
+
+  # ...
+
+  private
+
+  def custom_theme
+    {
+      list: tokens("space-y-4"),
+      item: tokens("font-bold", "text-2xl")
+    }
+  end
+end
+```
+
 ### Attrs and default attrs
 
 By convention, all components spread in an `attrs` hash on their outermost
 element of the component.
 
 By doing this we enable 2 main conveniences:
-1. We can pass `class` when initializing the component
-2. We can add default attributes that can be merged with defaults
+1. We can pass a `class` keyword when initializing the component which will be
+   merged safely into the `css[:container]` slot
+2. We can add default attributes that are safely merged with any provided to the
+   component when its being initialized
 
 ```ruby
 class List < Protos::Component
@@ -158,9 +162,7 @@ class List < Protos::Component
 
   def default_attrs
     {
-      data: {
-        controller: "list"
-      }
+        data: { controller: "list" }
     }
   end
 
@@ -173,9 +175,24 @@ class List < Protos::Component
 end
 ```
 
-Attrs will by default merge `class` into the `css[:container]` slot so we
-changed that in our theme. We also added `default_attrs` and gave a controller.
-These could be any html options.
+`#attrs` will by default merge the `class` keyword into the `css[:container]`
+slot which we define in our theme.
+
+Special html options will be safely merged. For examples, the component above
+defines a list controller. If we passed our own controller into data when we
+initialize, the component's data-controller attribute would be appended to:
+
+```ruby
+render List.new(
+  data: { controller: "tooltip" }
+)
+```
+
+That would output both controllers to the DOM element:
+
+```html
+<ul data-controller="list tooltip">
+```
 
 If we wanted to, just like for our theme we can change the method from
 `default_attrs` by defining the `default_attrs_method` on the class:
@@ -184,37 +201,16 @@ If we wanted to, just like for our theme we can change the method from
 class List < Protos::Component
   default_attrs_method :custom_attrs
 
-  # ...
-
   private
 
   def custom_attrs
     {
-      data: {
-        controller: "list"
-      }
+      data: { controller: "list" }
     }
   end
-
-  # ...
 end
 ```
 
-Now we get some additional convenience:
-
-```ruby
-render List.new(
-  class: "my-lg",
-  data: { controller: "confetti" }
-)
-```
-
-This would merge our `data` and `class` safely into the attributes:
-
-```html
-<ul data-controller="list confetti" class="space-y-4 my-lg">
-```
-
 ### Params and options
 
 Components extend

data/examples/list.rb

@@ -1,7 +1,7 @@
 require "protos"
 
 class List < Protos::Component
-  def template
+  def view_template
     ul(**attrs) do
       li(class: css[:item]) { "Item 1" }
       li(class: css[:item]) { "Item 2" }

data/examples/navbar.rb

@@ -3,7 +3,7 @@
 require_relative "../lib/protos"
 
 class Navbar < Protos::Component
-  def template
+  def view_template
     header(**attrs) do
       h1(class: css[:heading]) { "Hello world" }
       h2(class: css[:subtitle]) { "With a subtitle" }

data/lib/protos/accordion/item.rb

@@ -7,10 +7,12 @@ module Protos
 
       option :id, type: Types::Coercible::String
 
-      def template(&block)
+      def view_template(&block)
         li(**attrs) do
           render collapse_component do
-            input(type: :radio, name: id, id:)
+            # form: "" prevents the radio button from being submitted if its
+            # within a form
+            input(type: :radio, name: id, form: "", autocomplete: :off)
             yield if block
           end
         end

data/lib/protos/accordion.rb

@@ -7,9 +7,10 @@ module Protos
     # to be open at the same time, use the collapse component.
     # https://daisyui.com/components/accordion/
 
-    option :id, default: -> { SecureRandom.uuid }
+    option :id,
+           default: -> { "collapse-#{SecureRandom.hex(4)}" }
 
-    def template(&block)
+    def view_template(&block)
       ul(**attrs, &block)
     end
 
@@ -17,8 +18,8 @@ module Protos
       Item.new(id:, **kwargs)
     end
 
-    def title(...)
-      Collapse::Title.new(...)
+    def title(*args, **kwargs, &block)
+      Collapse::Title.new(*args, id:, **kwargs, &block)
     end
 
     def content(...)

data/lib/protos/alert/actions.rb

@@ -5,7 +5,7 @@ module Protos
     class Actions < Component
       # DOCS: Area for actions (e.g buttons) within an alert
 
-      def template(&block)
+      def view_template(&block)
         nav(**attrs, &block)
       end
 

data/lib/protos/alert/icon.rb

@@ -6,7 +6,7 @@ module Protos
       # DOCS: Icon for the alert, usually showing at the top left corner aligned
       # to the text
 
-      def template(&block)
+      def view_template(&block)
         div(**attrs, &block)
       end
 

data/lib/protos/alert.rb

@@ -15,7 +15,7 @@ module Protos
 
     option :type, type: AlertTypes, default: -> { :info }, reader: :private
 
-    def template(&block)
+    def view_template(&block)
       div(**attrs, &block)
     end
 

data/lib/protos/avatar.rb

@@ -17,7 +17,7 @@ module Protos
            default: -> { :none },
            reader: false
 
-    def template(&block)
+    def view_template(&block)
       div(**attrs) do
         div(class: css[:figure], &block)
       end

data/lib/protos/breadcrumbs/crumb.rb

@@ -5,7 +5,7 @@ module Protos
     class Crumb < Component
       # DOCS: A crumb is a single item within a breadcrumb
 
-      def template(&block)
+      def view_template(&block)
         li(**attrs, &block)
       end
     end

data/lib/protos/breadcrumbs.rb

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

data/lib/protos/card/actions.rb

@@ -5,7 +5,7 @@ module Protos
     class Actions < Component
       # DOCS: Area for actions (e.g buttons) within a card
 
-      def template(&block)
+      def view_template(&block)
         nav(**attrs, &block)
       end
 

data/lib/protos/card/body.rb

@@ -5,7 +5,7 @@ module Protos
     class Body < Component
       # DOCS: The main content area of a card
 
-      def template(&block)
+      def view_template(&block)
         div(**attrs, &block)
       end
 

data/lib/protos/card/image.rb

@@ -7,7 +7,7 @@ module Protos
       # on daisyui which will style the <figure> tag depending on whether
       # image-overlay is present on the card.
 
-      def template(&block)
+      def view_template(&block)
         figure(**attrs, &block)
       end
     end

data/lib/protos/card/title.rb

@@ -5,7 +5,7 @@ module Protos
     class Title < Component
       # DOCS: The title of a card
 
-      def template(&block)
+      def view_template(&block)
         div(**attrs, &block)
       end
 

data/lib/protos/card.rb

@@ -14,7 +14,7 @@ module Protos
            default: -> { :default },
            reader: false
 
-    def template(&block)
+    def view_template(&block)
       article(**attrs, &block)
     end
 

data/lib/protos/carousel/actions.rb

@@ -5,7 +5,7 @@ module Protos
     class Actions < Component
       # DOCS: Area for actions (e.g buttons) within a carousel
 
-      def template(&block)
+      def view_template(&block)
         div(**attrs, &block)
       end
 

data/lib/protos/carousel/item.rb

@@ -5,7 +5,7 @@ module Protos
     class Item < Component
       # DOCS: A single item within a carousel
 
-      def template(&block)
+      def view_template(&block)
         div(**attrs, &block)
       end
 

data/lib/protos/carousel.rb

@@ -16,7 +16,7 @@ module Protos
              :end
            )
 
-    def template(&block)
+    def view_template(&block)
       div(**attrs, &block)
     end
 

data/lib/protos/chat_bubble/content.rb

@@ -20,7 +20,7 @@ module Protos
                :error
              )
 
-      def template(&block)
+      def view_template(&block)
         div(**attrs, &block)
       end
 

data/lib/protos/chat_bubble/footer.rb

@@ -5,7 +5,7 @@ module Protos
     class Footer < Component
       # DOCS: The footer of a chat bubble
 
-      def template(&block)
+      def view_template(&block)
         div(**attrs, &block)
       end
 

data/lib/protos/chat_bubble/header.rb

@@ -6,7 +6,7 @@ module Protos
       # DOCS: The header of a chat bubble. This is typically used to display the
       # name of the user who sent the message.
 
-      def template(&block)
+      def view_template(&block)
         div(**attrs, &block)
       end
 

data/lib/protos/chat_bubble/image.rb

@@ -6,7 +6,7 @@ module Protos
       # DOCS: An image within a chat bubble. This would typically be an avatar
       # component.
 
-      def template(&block)
+      def view_template(&block)
         div(**attrs, &block)
       end
 

data/lib/protos/chat_bubble.rb

@@ -15,7 +15,7 @@ module Protos
              :end
            )
 
-    def template(&block)
+    def view_template(&block)
       div(**attrs, &block)
     end
 

data/lib/protos/collapse/content.rb

@@ -6,7 +6,7 @@ module Protos
       # DOCS: The content of a collapse. This would be hidden until the collapse
       # is opened.
 
-      def template(&block)
+      def view_template(&block)
         div(**attrs, &block)
       end
 

data/lib/protos/collapse/title.rb

@@ -5,9 +5,17 @@ module Protos
     class Title < Component
       # DOCS: The title of a collapse. This is the content that is always
       # visible and is used to toggle the collapse.
+      option :id,
+             type: Types::Coercible::String,
+             reader: false,
+             default: -> { "" }
 
-      def template(&block)
-        div(**attrs, &block)
+      def view_template(&block)
+        if @id.size.positive?
+          label(for: @id, **attrs, &block)
+        else
+          div(**attrs, &block)
+        end
       end
 
       private

data/lib/protos/collapse.rb

@@ -6,12 +6,20 @@ module Protos
     # is visible at all times, and the content is only visible when expanded.
     # https://daisyui.com/components/collapse/
 
-    def template(&block)
-      div(**attrs, &block)
+    option :checkbox, default: -> { false }, type: Types::Bool, reader: false
+    option :id,
+           default: -> { "collapse-#{SecureRandom.hex(4)}" },
+           type: Types::String
+
+    def view_template
+      div(**attrs) do
+        input(type: "checkbox", id:, autocomplete: :off) if @checkbox
+        yield if block_given?
+      end
     end
 
-    def title(...)
-      Title.new(...)
+    def title(*args, **kwargs, &block)
+      Title.new(*args, id:, **kwargs, &block)
     end
 
     def content(...)

data/lib/protos/command/dialog.rb

@@ -6,7 +6,7 @@ module Protos
       # DOCS: The dialog for a command wraps the command content and provides a
       # modal backdrop for the command when it is opened.
 
-      def template(&block)
+      def view_template(&block)
         dialog(**attrs) do
           div(class: css[:modal], &block)
           form(method: :dialog, class: css[:form]) do

data/lib/protos/command/empty.rb

@@ -6,7 +6,7 @@ module Protos
       # DOCS: The empty component is displayed in the list when there are no
       # matches in an input.
 
-      def template(&block)
+      def view_template(&block)
         li(**attrs, &block)
       end
 

data/lib/protos/command/group.rb

@@ -7,7 +7,7 @@ module Protos
       # Items in the group will have a divider line on the left side and can
       # optionally have a title.
 
-      def template(&block)
+      def view_template(&block)
         li(**attrs) do
           ul(class: css[:list], &block)
         end

data/lib/protos/command/input.rb

@@ -11,7 +11,7 @@ module Protos
              },
              reader: :private
 
-      def template(&block)
+      def view_template(&block)
         div(**attrs) do
           label(class: css[:label]) do
             div(class: css[:icon], &block) if block
@@ -19,7 +19,8 @@ module Protos
               type: :text,
               data: { action: "protos--command#filter" },
               class: css[:input],
-              placeholder:
+              placeholder:,
+              autocomplete: :off
             )
           end
         end

data/lib/protos/command/item.rb

@@ -5,7 +5,7 @@ module Protos
     class Item < Component
       # DOCS: A single option within a command
 
-      def template(&block)
+      def view_template(&block)
         li(**attrs, &block)
       end
 

data/lib/protos/command/list.rb

@@ -5,7 +5,7 @@ module Protos
     class List < Component
       # DOCS: A list of commands. This can contain either items or groups.
 
-      def template(&block)
+      def view_template(&block)
         ul(**attrs, &block)
       end
 

data/lib/protos/command/title.rb

@@ -6,7 +6,7 @@ module Protos
       # DOCS: The title for a group of commands. This is expected to be used
       # inside a Protos::Command::Group component.
 
-      def template(&block)
+      def view_template(&block)
         h2(**attrs, &block)
       end
 

data/lib/protos/command/trigger.rb

@@ -5,7 +5,7 @@ module Protos
     class Trigger < Component
       # DOCS: A trigger is a button that opens a command palette modal
 
-      def template(&block)
+      def view_template(&block)
         button(**attrs, &block)
       end
 

data/lib/protos/command.rb

@@ -6,7 +6,7 @@ module Protos
     # filterable list of commands. Command modals are by default closable by
     # clicking the overlay rather than a specific close button.
 
-    def template(&block)
+    def view_template(&block)
       div(**attrs, &block)
     end
 

data/lib/protos/drawer/content.rb

@@ -6,7 +6,7 @@ module Protos
       # DOCS: The content of a drawer. This would be visible at all times and
       # represents the main content of your page.
 
-      def template(&block)
+      def view_template(&block)
         div(**attrs, &block)
       end
 

data/lib/protos/drawer/side.rb

@@ -8,7 +8,7 @@ module Protos
 
       option :id, type: Types::Coercible::String
 
-      def template
+      def view_template
         aside(**attrs) do
           label(for: id, aria_label: "close sidebar", class: css[:toggle])
           yield if block_given?

data/lib/protos/drawer/trigger.rb

@@ -8,7 +8,7 @@ module Protos
 
       option :id, type: Types::Coercible::String
 
-      def template(&block)
+      def view_template(&block)
         label(for: id, **attrs, &block)
       end
 

data/lib/protos/drawer.rb

@@ -9,9 +9,9 @@ module Protos
 
     option :id, type: Types::Coercible::String
 
-    def template
+    def view_template
       div(**attrs) do
-        input(id:, type: :checkbox, class: css[:toggle])
+        input(id:, type: :checkbox, class: css[:toggle], autocomplete: :off)
         yield if block_given?
       end
     end

data/lib/protos/dropdown/item.rb

@@ -5,7 +5,7 @@ module Protos
     class Item < Component
       # DOCS: A single item within a dropdown
 
-      def template(&block)
+      def view_template(&block)
         li(**attrs, &block)
       end
     end