protos 0.6.0 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0796561a80e75fb39f8b35ec75257104adc90b21227ef1525876576d10415269'
-  data.tar.gz: 394a8ee190d1d2647476db45d2d9b9edb156bc42a3935898d6f1deca35261326
+  metadata.gz: 660af240890f0f3089840c5e672be261d68e37a3c027483e62a12c37420df46a
+  data.tar.gz: 83b4736dcb8a891f65782bbab576442dbba9a787100a3ed2e7e3c8488e2f9c85
 SHA512:
-  metadata.gz: 59e2288d2ae8adfc3b352838dda25c776edddf48d99b310181629e78f09831552be23e36adedaca7bf3601678cb08950500f4b72f2ed609324ccd72ddd32a92d
-  data.tar.gz: e0e4beda7e4cbff4e3b669899b65df2ec7c37fe388e75b561418ce1cc65abd4cb1cfecabd743f964bf0dee98de1c4ccdbf9f7e76f77078f294a8bfb0a4272802
+  metadata.gz: b07d86baa8de3458eb2a5c337335d8a0569f9eff4196f886d9cdcce604bd7d56ce59c4e6c59de85c361e438c64db5fece61f4a67a532d4f03599e47f200802f0
+  data.tar.gz: a9db0f4770430e2a9191c0075d69b3fd66e7b42b75300c4ef2d129cde5f9e8b0cc5e034be2fad031070c6a1b1e9f99fc01893d257eb7ca5e68ff748db1ee4f9c

data/CHANGELOG.md

@@ -1,12 +1,41 @@
 ## [Unreleased]
 
+## [1.0.0] - 2025-03-01
+
+- Adds `Protos::Status` component
+- Adds `Protos::Diff` component
+- Adds `Protos::Menu` component
+- Adds `state` and `icon` options to `Protos::Collapse`
+- Changes `dash` option to `dashed` on `Protos::Card`
+- Adds `dashed` and `soft` to `Protos::Badge`
+- Adds `xl` size to `Protos::Badge`
+- Updates to Phlex `v2`
+- Updates to new DaisyUI `v5.0` styles
+- Performance improvements to `Protos::Theme`
+- Removes redefining `default_attrs` and `theme` methods. Didn't want the
+  overhead of this completely unused feature. This removes `dry-core` as
+  a dependency
+
+## [0.7.0] - 2025-01-13
+
+- 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

@@ -11,14 +11,12 @@ You can see a full list of the components at
 [tailwind\_merge](https://github.com/gjtorikian/tailwind_merge).
 - Uses [tippy.js](https://atomiks.github.io/tippyjs/v6/getting-started/) for
   dropdowns, combobox, and popovers
-- All components avoid using
-  [`Phlex::DeferredRender`](https://www.phlex.fun/#slots)
-  so you can reorder components exactly how you like them.
 
 Other Phlex based UI libraries worth checking out:
 
 - [PhlexUI](https://phlexui.com/)
 - [ZestUI](https://zestui.com/)
+- [Nitro Kit](https://github.com/mikker/nitro_kit)
 
 Thinking of making your next static site using Phlex? Check out
 [staticky](https://github.com/nolantait/staticky). The protos docs were
@@ -88,9 +86,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 +135,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
@@ -205,26 +204,18 @@ 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 under you can
-override the `theme_method` on the class:
+Slots can also take multiple arguments, and even inline styles:
 
 ```ruby
-class List < Protos::Component
-  theme_method :custom_theme
-
-  # ...
-
-  private
-
-  def custom_theme
-    {
-      list: tokens("space-y-4"),
-      item: tokens("font-bold", "text-2xl")
-    }
+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 +248,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
@@ -289,23 +280,6 @@ That would output both controllers to the DOM element:
 This makes it very convenient to add functionality to basic components without
 overriding their core behavior or having to modify/override their class.
 
-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:
-
-```ruby
-class List < Protos::Component
-  default_attrs_method :custom_attrs
-
-  private
-
-  def custom_attrs
-    {
-      data: { controller: "list" }
-    }
-  end
-end
-```
-
 ### Params and options
 
 Components extend
@@ -488,7 +462,7 @@ module Components
 
     def theme
       super.merge({
-        input: tokens("block", "bg-red-500")
+        input: ["block", "bg-red-500"]
       })
     end
   end
@@ -510,16 +484,24 @@ module Components
 end
 ```
 
-You could use `Proto::List` to create your own list and even use
-`Phlex::DeferredRender` to make the API more convenient.
+You could use `Proto::List` to create your own list and even use some kind of
+[`DeferredRender`](https://www.phlex.fun/miscellaneous/v2-upgrade.html#removed-deferredrender)
+to make the API more convenient.
 
 Let's create a list component with headers and actions:
 
 ```ruby
+module DeferredRender
+  def before_template(&)
+    vanish(&)
+    super
+  end
+end
+
 module Ui
   class List < Protos::Component
     include Protos::Typography
-    include Phlex::DeferredRender
+    include DeferredRender
 
     option :title, default: -> {}
     option :ordered, default: -> { false }
@@ -561,11 +543,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
@@ -590,8 +572,7 @@ Or here is another example of a table:
 module Ui
   class Table < ApplicationComponent
     include Protos::Typography
-    include Phlex::DeferredRender
-    include Actionable
+    include DeferredRender
 
     class Column
       attr_reader :title
@@ -609,6 +590,7 @@ module Ui
     option :title, default: -> {}
     option :collection, default: -> { [] }, reader: false
     option :columns, default: -> { [] }, reader: false
+    option :actions, default: -> { [] }, reader: false
 
     def template
       article(**attrs) do
@@ -676,10 +658,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,32 +696,31 @@ render Ui::Table.new(title: "A table", collection:) do |table|
 end
 ```
 
-## No unnecessary components
-
-This library avoids re-making Protos components for extremely simple daisyui
-components such as:
-
-- Badge
-- Buttons
-- Checkbox
-- File input
-- Indicator
-- Join
-- Kbd
-- Link
-- Loading
-- Mask
-- Progress
-- Radial progress
-- Radio
-- Range
-- Select
-- Skeleton
-- Stack
-- Text input
-- Textarea
-- Toggle
-- Tooltip
+## Missing components
+
+Here is a list that we don't yet have components for:
+
+- [] Buttons
+- [] Calendar
+- [] Checkbox
+- [] File input
+- [] Indicator
+- [] Join
+- [] Kbd
+- [] Link
+- [] Loading
+- [] Mask
+- [] Progress
+- [] Radial progress
+- [] Radio
+- [] Range
+- [] Select
+- [] Skeleton
+- [] Stack
+- [] Text input
+- [] Textarea
+- [] Toggle
+- [] Tooltip
 
 ## Development
 

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,
@@ -34,10 +37,7 @@ module Protos
 
     def theme
       {
-        container: %W[
-          alert
-          #{style}
-        ]
+        container: ["alert", style]
       }
     end
 

data/lib/protos/avatar.rb

@@ -17,10 +17,6 @@ module Protos
       :diamond,
       :square,
       :circle,
-      :parallelogram,
-      :parallelogram2,
-      :parallelogram3,
-      :parallelogram4,
       :star,
       :star2,
       :triangle,
@@ -42,10 +38,6 @@ module Protos
       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",
@@ -58,19 +50,19 @@ module Protos
 
     INDICATORS = {
       none: "",
-      online: "online",
-      offline: "offline"
+      online: "avatar-online",
+      offline: "avatar-offline"
     }.freeze
 
     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 +82,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,58 @@
+# frozen_string_literal: true
+
+module Protos
+  class Badge < Component
+    Styles = Types::Coercible::Symbol.enum(
+      *Types::Styles.values,
+      :ghost
+    )
+
+    Sizes = Types::Coercible::Symbol.enum(:default, :xs, :sm, :md, :lg, :xl)
+
+    STYLES = {
+      default: "",
+      neutral: "badge-neutral",
+      success: "badge-success",
+      primary: "badge-primary",
+      secondary: "badge-secondary",
+      info: "badge-info",
+      error: "badge-error",
+      warning: "badge-warning",
+      ghost: "badge-ghost"
+    }.freeze
+
+    SIZES = {
+      default: "badge-md",
+      xs: "badge-xs",
+      sm: "badge-sm",
+      md: "badge-md",
+      lg: "badge-lg",
+      xl: "badge-xl"
+    }.freeze
+
+    option :type, type: Styles, default: -> { :default }
+    option :outline, default: -> { false }
+    option :dashed, default: -> { false }
+    option :soft, default: -> { false }
+    option :size, type: Sizes, default: -> { :default }
+
+    def view_template(&)
+      span(**attrs, &)
+    end
+
+    private
+
+    def theme
+      {
+        container: [
+          "badge",
+          STYLES.fetch(type),
+          SIZES.fetch(size),
+          ("badge-outline" if outline),
+          ("badge-dashed" if dashed),
+          ("badge-soft" if soft)
+        ].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,20 +5,40 @@ module Protos
     # DOCS: A card component
     # https://daisyui.com/components/card/
 
-    ImageDisplays = Types::Coercible::Symbol.enum(:default, :overlay, :side)
+    autoload :Body, "protos/card/body"
+    autoload :Title, "protos/card/title"
+    autoload :Actions, "protos/card/actions"
+    autoload :Image, "protos/card/image"
 
-    IMAGE_DISPLAYS = {
-      default: "",
-      overlay: "image-full",
-      side: "card-side"
+    Sizes = Types::Coercible::Symbol.enum(
+      :default,
+      :xs,
+      :sm,
+      :md,
+      :lg,
+      :xl
+    )
+
+    SIZES = {
+      default: "card-md",
+      xs: "card-xs",
+      sm: "card-sm",
+      md: "card-md",
+      lg: "card-lg",
+      xl: "card-xl"
     }.freeze
 
+    option :size, type: Sizes, default: -> { :default }, reader: :private
+    option :image_side,
+      type: Types::Bool,
+      default: -> { false },
+      reader: :private
+    option :image_full,
+      type: Types::Bool,
+      default: -> { false },
+      reader: :private
     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
+    option :dashed, type: Types::Bool, default: -> { false }, reader: :private
 
     def view_template(&)
       article(**attrs, &)
@@ -34,18 +54,16 @@ module Protos
 
     private
 
-    def image_display
-      IMAGE_DISPLAYS.fetch(@image_display)
-    end
-
     def theme
       {
-        container: tokens(
+        container: [
           "card",
-          image_display,
-          border: "card-bordered",
-          compact: "card-compact"
-        )
+          SIZES[size],
+          ("card-bordered" if border),
+          ("card-dash" if dashed),
+          ("image-full" if image_full),
+          ("card-side" if image_side)
+        ]
       }
     end
   end

data/lib/protos/carousel.rb

@@ -6,6 +6,15 @@ module Protos
     # through in a mobile friendly manner.
     # https://daisyui.com/components/carousel/
 
+    autoload :Item, "protos/carousel/item"
+    autoload :Actions, "protos/carousel/actions"
+
+    Positions = Types::Coercible::Symbol.enum(
+      :none,
+      :center,
+      :end
+    )
+
     SNAP_POINTS = {
       none: "",
       center: "carousel-center",
@@ -14,13 +23,9 @@ 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: Positions
 
     def view_template(&)
       div(**attrs, &)
@@ -38,11 +43,11 @@ module Protos
 
     def theme
       {
-        container: tokens(
+        container: [
           "carousel",
           snap_to,
-          vertical: "carousel-vertical"
-        )
+          ("carousel-vertical" if vertical)
+        ]
       }
     end
   end