protos 0.7.0 → 1.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d7486060db2b247fab3e5d5caa33c6f8d35631772e267ae248d8929b71038fbb
-  data.tar.gz: ef414faf4cc381245bc9e7b609124858b4a1d1280dfcf5e21a139641d6877f0a
+  metadata.gz: b32fe1cc6562526ba55c1d834a5a8964d4ca2073d778f6dee06359ccd80cf802
+  data.tar.gz: c7e29d3aea869133073515fab05cf8c7450e637f83ad138526fe51ecdc72eb2e
 SHA512:
-  metadata.gz: 37c65c3a6be4bfc15fb70e31988a4624c56426e607796de03ae8be9b47be9f016ad27ee4fc508ec57442f6cb0ae8d5d2e27bad40b8b8178c61488935fcafbf9c
-  data.tar.gz: 56354393cb9425b3455bcf4baa568a7f23805a226a3b0de75264f505dc9c5f2deee503d77e4b3fd0d7e3ecdef6253daebc5262ba0cb5b7591b6582fec3f96adb
+  metadata.gz: d6767d43e60fc7a1e143f148a34039ba88db6a88ba8ebacb76f8daa5d4bf128f87ec88f318c692d033efd53ffc3c2135686576aa8c8e0d6404af4073f9c7a497
+  data.tar.gz: a0a64cb4af640ca9aae2fd81642cd7206b73f8389e5103f1c288c7d91225d876e7054391fa48585b1d3d7b50d15da671717ab2f7c1bbab103170099bdb78724c

data/CHANGELOG.md

@@ -1,5 +1,27 @@
 ## [Unreleased]
 
+## [1.0.1] - 2025-03-01
+
+- Fixes a bug with inherited classes not finding their defined keys
+
+## [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

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
@@ -206,26 +204,6 @@ 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:
-
-```ruby
-class List < Protos::Component
-  theme_method :custom_theme
-
-  # ...
-
-  private
-
-  def custom_theme
-    {
-      list: "space-y-4",
-      item: ["font-bold", "text-2xl"]
-    }
-  end
-end
-```
-
 Slots can also take multiple arguments, and even inline styles:
 
 ```ruby
@@ -302,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
@@ -523,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 }
@@ -603,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
@@ -622,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
@@ -729,29 +698,29 @@ end
 
 ## Missing components
 
-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:
-
-- Buttons
-- Checkbox
-- File input
-- Indicator
-- Join
-- Kbd
-- Link
-- Loading
-- Mask
-- Progress
-- Radial progress
-- Radio
-- Range
-- Select
-- Skeleton
-- Stack
-- Text input
-- Textarea
-- Toggle
-- Tooltip
+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/lib/protos/alert.rb

@@ -37,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,8 +50,8 @@ module Protos
 
     INDICATORS = {
       none: "",
-      online: "online",
-      offline: "offline"
+      online: "avatar-online",
+      offline: "avatar-offline"
     }.freeze
 
     option :placeholder, type: Types::Bool, default: -> { false }

data/lib/protos/badge.rb

@@ -2,22 +2,38 @@
 
 module Protos
   class Badge < Component
-    Badges = Types::Coercible::Symbol.enum(
-      :default,
-      :neutral,
-      :success,
-      :primary,
-      :secondary,
-      :info,
-      :error,
-      :warning,
+    Styles = Types::Coercible::Symbol.enum(
+      *Types::Styles.values,
       :ghost
     )
 
-    Sizes = Types::Coercible::Symbol.enum(:default, :xs, :sm, :md, :lg)
-
-    option :type, type: Badges, default: -> { :default }
+    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(&)
@@ -26,35 +42,15 @@ module Protos
 
     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)
+          STYLES.fetch(type),
+          SIZES.fetch(size),
+          ("badge-outline" if outline),
+          ("badge-dashed" if dashed),
+          ("badge-soft" if soft)
         ].compact
       }
     end

data/lib/protos/card.rb

@@ -10,20 +10,35 @@ module Protos
     autoload :Actions, "protos/card/actions"
     autoload :Image, "protos/card/image"
 
-    ImageDisplays = Types::Coercible::Symbol.enum(:default, :overlay, :side)
+    Sizes = Types::Coercible::Symbol.enum(
+      :default,
+      :xs,
+      :sm,
+      :md,
+      :lg,
+      :xl
+    )
 
-    IMAGE_DISPLAYS = {
-      default: "",
-      overlay: "image-full",
-      side: "card-side"
+    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, &)
@@ -39,17 +54,15 @@ module Protos
 
     private
 
-    def image_display
-      IMAGE_DISPLAYS.fetch(@image_display)
-    end
-
     def theme
       {
         container: [
           "card",
-          image_display,
+          SIZES[size],
           ("card-bordered" if border),
-          ("card-compact" if compact)
+          ("card-dash" if dashed),
+          ("image-full" if image_full),
+          ("card-side" if image_side)
         ]
       }
     end

data/lib/protos/carousel.rb

@@ -9,6 +9,12 @@ module Protos
     autoload :Item, "protos/carousel/item"
     autoload :Actions, "protos/carousel/actions"
 
+    Positions = Types::Coercible::Symbol.enum(
+      :none,
+      :center,
+      :end
+    )
+
     SNAP_POINTS = {
       none: "",
       center: "carousel-center",
@@ -19,11 +25,7 @@ module Protos
     option :snap_to,
       default: -> { :none },
       reader: false,
-      type: Types::Coercible::Symbol.enum(
-        :none,
-        :center,
-        :end
-      )
+      type: Positions
 
     def view_template(&)
       div(**attrs, &)

data/lib/protos/chat_bubble/content.rb

@@ -7,29 +7,21 @@ module Protos
       # content of the message. It will be colored according to the type.
 
       STYLES = {
-        none: "",
-        primary: "chat-bubble-primary",
-        secondary: "chat-bubble-secondary",
+        default: "",
         accent: "chat-bubble-accent",
+        error: "chat-bubble-error",
         info: "chat-bubble-info",
+        neutral: "chat-bubble-neutral",
+        primary: "chat-bubble-primary",
+        secondary: "chat-bubble-secondary",
         success: "chat-bubble-success",
-        warning: "chat-bubble-warning",
-        error: "chat-bubble-error"
+        warning: "chat-bubble-warning"
       }.freeze
 
       option :type,
-        default: -> { :none },
+        default: -> { :default },
         reader: false,
-        type: Types::Coercible::Symbol.enum(
-          :none,
-          :primary,
-          :secondary,
-          :accent,
-          :info,
-          :success,
-          :warning,
-          :error
-        )
+        type: Types::Styles
 
       def view_template(&)
         div(**attrs, &)

data/lib/protos/chat_bubble.rb

@@ -12,6 +12,11 @@ module Protos
     autoload :Header, "protos/chat_bubble/header"
     autoload :Footer, "protos/chat_bubble/footer"
 
+    Positions = Types::Coercible::Symbol.enum(
+      :start,
+      :end
+    )
+
     ALIGNMENTS = {
       start: "chat-start",
       end: "chat-end"
@@ -20,10 +25,7 @@ module Protos
     option :align,
       default: -> { :start },
       reader: false,
-      type: Types::Coercible::Symbol.enum(
-        :start,
-        :end
-      )
+      type: Positions
 
     def view_template(&)
       div(**attrs, &)

data/lib/protos/collapse.rb

@@ -9,6 +9,23 @@ module Protos
     autoload :Title, "protos/collapse/title"
     autoload :Content, "protos/collapse/content"
 
+    Icons = Types::Coercible::Symbol.enum(:arrow, :plus)
+
+    ICONS = {
+      arrow: "collapse-arrow",
+      plus: "collapse-plus"
+    }.freeze
+
+    States = Types::Coercible::Symbol.enum(:default, :open, :close)
+
+    STATES = {
+      default: "",
+      open: "collapse-open",
+      close: "collapse-close"
+    }.freeze
+
+    option :state, type: States, default: -> { :default }, reader: false
+    option :icon, type: Icons, default: -> { :arrow }, reader: false
     option :input_type, default: -> { :checkbox }, reader: false
     option :input_name,
       reader: false,
@@ -23,6 +40,7 @@ module Protos
             id: @input_name,
             name: @input_name,
             autocomplete: :off,
+            aria_label: "Toggle accordion",
             # form: "" prevents the radio button from being submitted if its
             # within a form
             form: ""
@@ -40,10 +58,10 @@ module Protos
 
     def theme
       {
-        container: %w[
-          collapse
-          collapse-arrow
-          bg-base-100
+        container: [
+          "collapse",
+          ICONS.fetch(@icon),
+          STATES.fetch(@state)
         ]
       }
     end

data/lib/protos/component.rb

@@ -5,36 +5,20 @@ module Protos
     # DOCS: Base component for all Protos::Components. You can inherit from this
     # class to gain flexible components you can style from the outside using css
     # slots, default attrs and themes.
-    #
-    # This component extends Dry::Initializer and Dry::Core::ClassAttributes to
-    # 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[undefined: false]
-    extend Dry::Core::ClassAttributes
-
-    # Define methods for css and attrs. Each is expected to return a hash
-    defines :theme_method, type: Types::Symbol
-    defines :default_attrs_method, type: Types::Symbol
-
-    theme_method :theme
-    default_attrs_method :default_attrs
 
     # Theme can override the css hash and add additional styles
     option :theme, as: :theme_override, default: -> { {} }, reader: false
     # Class becomes the :container key in the css hash
-    option :class, as: :container_class, default: -> { "" }, reader: false
-    option :html_options, default: -> { {} }, reader: false
+    option :class, as: :container_class, default: -> { }, reader: false
 
     # Adds non-defined options to the html_options hash
     def initialize(*, **kwargs, &)
+      super
       defined_keys = self.class.dry_initializer.definitions.keys
-      defined, undefined =
-        kwargs
-          .partition { |key, _| defined_keys.include?(key) }
-          .map!(&:to_h)
-
-      super(*, html_options: undefined, **defined, &)
+      extra_keys = kwargs.keys - defined_keys
+      @html_options = kwargs.slice(*extra_keys)
     end
 
     private
@@ -48,35 +32,27 @@ module Protos
     end
 
     def build_attrs(...)
-      defaults = if respond_to?(default_attrs_method, :include_private)
-        send(default_attrs_method)
-      end
-
       Attributes
         .new(...)
-        .merge(defaults)
+        .merge(default_attrs)
         .merge(@html_options)
         .merge(class: css[:container])
     end
 
     def build_theme(...)
-      component_style = if respond_to?(theme_method, :include_private)
-        send(theme_method)
-      end
-
       Theme
         .new(...)
-        .merge(component_style)
+        .merge(theme)
         .merge(@theme_override)
         .merge(container: @container_class)
     end
 
-    def theme_method
-      self.class.theme_method
+    def default_attrs
+      {}
     end
 
-    def default_attrs_method
-      self.class.default_attrs_method
+    def theme
+      {}
     end
   end
 end

data/lib/protos/diff/item.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Protos
+  class Diff
+    class Item < Component
+      Order = Types::Coercible::Symbol.enum(:one, :two)
+
+      ORDER = {
+        one: "diff-item-1",
+        two: "diff-item-2"
+      }.freeze
+
+      option :order, type: Order, default: -> { :one }, reader: false
+
+      def view_template(&)
+        div(**attrs, &)
+      end
+
+      private
+
+      def default_attrs
+        {
+          role: :img
+        }
+      end
+
+      def theme
+        {
+          container: ORDER.fetch(@order)
+        }
+      end
+    end
+  end
+end

data/lib/protos/diff/resizer.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Protos
+  class Diff
+    class Resizer < Component
+      def view_template(&)
+        div(**attrs, &)
+      end
+
+      private
+
+      def theme
+        {
+          container: "diff-resizer"
+        }
+      end
+    end
+  end
+end