phlexy_ui 0.1.1 → 0.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 649e11b247a2b1cb86b47caaba5c5fbf69210a6f563aaf05bdc86d97799faf8f
-  data.tar.gz: 64c75e9f793b708663902157539672abf743407100d247093467d7f94473b735
+  metadata.gz: afd51b066ca04f9497e96ce00132d883007730221925fab4bfb3d6d5cb57aec2
+  data.tar.gz: fd72b9a2411ec3eef6f9f9b5ca7ad88a3cba8c639d6e79e9a4d3b1500b545788
 SHA512:
-  metadata.gz: b1a9b52e5ca14871a3aea5d2f792dd8d549ca7a31cb4dd06bfbd90573998768db3ece9752d9a27af1b2d2fed2f0aea8c7ffd8efdec1373a306a74556a19b235f
-  data.tar.gz: 3ab85f2c5f6d9a09c04d57bf978c43d82abb2ed3e4157e55b5de179c7b4a7b38c60ef1e619a491512a18590799d803ad36f40c279fbc3dd36fad89fe710482f5
+  metadata.gz: 93938b5e9e0365f144100e4d00ff757a33f50f7b7a264326ac0709506d5a4006fed131dda192d0546a3969ba777d27cfe59bf63a3f657f2cd456b2ae32ac7cf2
+  data.tar.gz: 3c9652fa3434d8deb8ddf5eb51c86a631d93057883630ea54b5b790a0ce8b8da3f414806b84c49fc31fe292dd2864b4c5a5d24c0a7e937712376768cec7c48a3

data/lib/phlexy_ui/attribute_set.rb

@@ -0,0 +1,28 @@
+module PhlexyUI
+  class AttributeSet
+    def initialize(base_modifiers, attributes_map)
+      @base_modifiers = base_modifiers
+      @attributes_map = attributes_map
+    end
+
+    def to_h
+      attributes_modifiers.each_with_object({}) do |modifier, final_attributes_hash|
+        value = attributes_map[modifier]
+
+        if value.is_a?(Hash)
+          final_attributes_hash.merge!(value)
+        elsif value
+          final_attributes_hash[modifier] = value
+        end
+      end
+    end
+
+    private
+
+    attr_reader :base_modifiers, :attributes_map
+
+    def attributes_modifiers
+      base_modifiers.select { |modifier| attributes_map.key?(modifier) }
+    end
+  end
+end

data/lib/phlexy_ui/avatar.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  class Avatar < Base
+    def initialize(*, as: :div, **)
+      super(*, **)
+      @as = as
+    end
+
+    def view_template(&)
+      generate_classes!(
+        component_html_class: :avatar,
+        modifiers_map: modifiers,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
+    end
+
+    private
+
+    register_modifiers(
+      # "sm:online"
+      # "md:online"
+      # "lg:online"
+      online: "online",
+      # "sm:offline"
+      # "md:offline"
+      # "lg:offline"
+      offline: "offline",
+      # "sm:placeholder"
+      # "md:placeholder"
+      # "lg:placeholder"
+      placeholder: "placeholder"
+    )
+  end
+end

data/lib/phlexy_ui/badge.rb

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  class Badge < Base
+    def initialize(*, as: :span, **)
+      super(*, **)
+      @as = as
+    end
+
+    def view_template(&)
+      generate_classes!(
+        component_html_class: :badge,
+        modifiers_map: modifiers,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
+    end
+
+    private
+
+    register_modifiers(
+      # "sm:badge-neutral"
+      # "md:badge-neutral"
+      # "lg:badge-neutral"
+      neutral: "badge-neutral",
+      # "sm:badge-primary"
+      # "md:badge-primary"
+      # "lg:badge-primary"
+      primary: "badge-primary",
+      # "sm:badge-secondary"
+      # "md:badge-secondary"
+      # "lg:badge-secondary"
+      secondary: "badge-secondary",
+      # "sm:badge-accent"
+      # "md:badge-accent"
+      # "lg:badge-accent"
+      accent: "badge-accent",
+      # "sm:badge-ghost"
+      # "md:badge-ghost"
+      # "lg:badge-ghost"
+      ghost: "badge-ghost",
+      # "sm:badge-info"
+      # "md:badge-info"
+      # "lg:badge-info"
+      info: "badge-info",
+      # "sm:badge-success"
+      # "md:badge-success"
+      # "lg:badge-success"
+      success: "badge-success",
+      # "sm:badge-warning"
+      # "md:badge-warning"
+      # "lg:badge-warning"
+      warning: "badge-warning",
+      # "sm:badge-error"
+      # "md:badge-error"
+      # "lg:badge-error"
+      error: "badge-error",
+      # "sm:badge-outline"
+      # "md:badge-outline"
+      # "lg:badge-outline"
+      outline: "badge-outline",
+      # "sm:badge-lg"
+      # "md:badge-lg"
+      # "lg:badge-lg"
+      lg: "badge-lg",
+      # "sm:badge-md"
+      # "md:badge-md"
+      # "lg:badge-md"
+      md: "badge-md",
+      # "sm:badge-sm"
+      # "md:badge-sm"
+      # "lg:badge-sm"
+      sm: "badge-sm",
+      # "sm:badge-xs"
+      # "md:badge-xs"
+      # "lg:badge-xs"
+      xs: "badge-xs"
+    )
+  end
+end

data/lib/phlexy_ui/base.rb

@@ -2,47 +2,61 @@
 
 module PhlexyUI
   class Base < Phlex::HTML
-    def initialize(*normal_conditions, sm: [], md: [], lg: [], **options)
-      @normal_conditions = normal_conditions
-      @sm_conditions = Array(sm)
-      @md_conditions = Array(md)
-      @lg_conditions = Array(lg)
+    def initialize(*base_modifiers, **options)
+      @base_modifiers = base_modifiers
       @options = options
-      @data = options.delete(:data)
     end
 
-    private
+    class << self
+      attr_reader :modifiers
+
+      private
 
-    attr_reader :normal_conditions,
-      :sm_conditions,
-      :md_conditions,
-      :lg_conditions,
-      :options,
-      :data,
-      :as
-
-    def classes
-      [
-        prefixed(self.class::BASE_HTML_CLASS),
-        *html_classes_for_conditions(normal_conditions),
-        *html_classes_for_conditions(sm_conditions, responsive_prefix: :sm),
-        *html_classes_for_conditions(md_conditions, responsive_prefix: :md),
-        *html_classes_for_conditions(lg_conditions, responsive_prefix: :lg)
-      ]
+      def register_modifiers(modifiers)
+        @modifiers ||= {}
+        @modifiers.merge!(modifiers)
+      end
     end
 
-    def html_classes_for_conditions(conditions, responsive_prefix: nil)
-      conditions.map do |condition|
-        class_name = prefixed self.class::CONDITIONS_CLASSES.fetch(condition)
+    private
+
+    attr_reader :base_modifiers, :options, :as, :id
 
-        responsive_prefix ? "#{responsive_prefix}:#{class_name}" : class_name
+    def modifiers
+      {
+        **self.class.modifiers,
+        **PhlexyUI.configuration.modifiers.for(component: self.class),
+        **PhlexyUI.configuration.modifiers.for(component: nil)
+      }
+    end
+
+    def generate_classes!(
+      component_html_class: nil,
+      base_modifiers: [],
+      options: {},
+      modifiers_map: {}
+    )
+      ClassList.new(
+        component: self,
+        component_html_class:,
+        base_modifiers:,
+        options:,
+        modifiers_map:
+      ).to_a.then do |classes|
+        classes.any? ? classes : nil
       end
-    rescue KeyError => e
-      raise ArgumentError, "Condition `#{e.key}` is not defined for #{self.class}"
     end
 
-    def prefixed(string)
-      "#{PhlexyUI.configuration.prefix}#{string}"
+    def generate_attributes(base_modifiers, attributes_map)
+      AttributeSet.new(base_modifiers, attributes_map).to_h
+    end
+
+    def render_as(*, as:, **, &)
+      if as.is_a?(Symbol)
+        render public_send(*, as:, **, &)
+      else
+        render as.new(*, **, &)
+      end
     end
   end
 end

data/lib/phlexy_ui/button.rb

@@ -2,38 +2,119 @@
 
 module PhlexyUI
   class Button < Base
-    CONDITIONS_CLASSES = {
+    def initialize(*, as: :button, **)
+      super(*, **)
+      @as = as
+    end
+
+    def view_template(&)
+      generate_classes!(
+        component_html_class: :btn,
+        modifiers_map: modifiers,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
+    end
+
+    private
+
+    register_modifiers(
       # Modifiers
+      # "sm:no-animation"
+      # "md:no-animation"
+      # "lg:no-animation"
       no_animation: "no-animation",
+      # "sm:glass"
+      # "md:glass"
+      # "lg:glass"
       glass: "glass",
+      # "sm:btn-ghost"
+      # "md:btn-ghost"
+      # "lg:btn-ghost"
       ghost: "btn-ghost",
+      # "sm:btn-link"
+      # "md:btn-link"
+      # "lg:btn-link"
       link: "btn-link",
+      # "sm:btn-outline"
+      # "md:btn-outline"
+      # "lg:btn-outline"
       outline: "btn-outline",
+      # "sm:btn-active"
+      # "md:btn-active"
+      # "lg:btn-active"
       active: "btn-active",
+      # "sm:btn-disabled"
+      # "md:btn-disabled"
+      # "lg:btn-disabled"
       disabled: "btn-disabled",
+      # "sm:btn-lg"
+      # "md:btn-lg"
+      # "lg:btn-lg"
       lg: "btn-lg",
+      # "sm:btn-md"
+      # "md:btn-md"
+      # "lg:btn-md"
       md: "btn-md",
+      # "sm:btn-sm"
+      # "md:btn-sm"
+      # "lg:btn-sm"
       sm: "btn-sm",
+      # "sm:btn-xs"
+      # "md:btn-xs"
+      # "lg:btn-xs"
       xs: "btn-xs",
+      # "sm:btn-wide"
+      # "md:btn-wide"
+      # "lg:btn-wide"
       wide: "btn-wide",
+      # "sm:btn-block"
+      # "md:btn-block"
+      # "lg:btn-block"
       block: "btn-block",
+      # "sm:btn-circle"
+      # "md:btn-circle"
+      # "lg:btn-circle"
       circle: "btn-circle",
+      # "sm:btn-square"
+      # "md:btn-square"
+      # "lg:btn-square"
       square: "btn-square",
       # Colors
+      # "sm:btn-neutral"
+      # "md:btn-neutral"
+      # "lg:btn-neutral"
       neutral: "btn-neutral",
+      # "sm:btn-primary"
+      # "md:btn-primary"
+      # "lg:btn-primary"
       primary: "btn-primary",
+      # "sm:btn-secondary"
+      # "md:btn-secondary"
+      # "lg:btn-secondary"
       secondary: "btn-secondary",
+      # "sm:btn-accent"
+      # "md:btn-accent"
+      # "lg:btn-accent"
       accent: "btn-accent",
+      # "sm:btn-info"
+      # "md:btn-info"
+      # "lg:btn-info"
       info: "btn-info",
+      # "sm:btn-success"
+      # "md:btn-success"
+      # "lg:btn-success"
       success: "btn-success",
+      # "sm:btn-warning"
+      # "md:btn-warning"
+      # "lg:btn-warning"
       warning: "btn-warning",
+      # "sm:btn-error"
+      # "md:btn-error"
+      # "lg:btn-error"
       error: "btn-error"
-    }.freeze
-
-    BASE_HTML_CLASS = "btn"
-
-    def view_template(&)
-      button(class: classes, data:, &)
-    end
+    ).freeze
   end
 end

data/lib/phlexy_ui/card.rb

@@ -2,42 +2,118 @@
 
 module PhlexyUI
   class Card < Base
-    CONDITIONS_CLASSES = {
-      # Modifiers
-      image_full: "image-full",
-      bordered: "card-bordered",
-      normal: "card-normal",
-      compact: "card-compact",
-      side: "card-side"
-    }.freeze
-
-    BASE_HTML_CLASS = "card"
-
     def initialize(*, as: :section, **)
       super(*, **)
       @as = as
     end
 
     def view_template(&)
-      public_send(as, class: classes, data: data, &)
+      generate_classes!(
+        component_html_class: :card,
+        modifiers_map: modifiers,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
     end
 
     def body(**options, &)
-      classes = ["card-body", options.delete(:class)]
-
-      div(class: classes, **options, &)
+      generate_classes!(
+        component_html_class: :"card-body",
+        options:
+      ).then do |classes|
+        div(class: classes, **options, &)
+      end
     end
 
     def title(**options, &)
-      classes = ["card-title", options.delete(:class)]
-
-      header(class: classes, **options, &)
+      generate_classes!(
+        component_html_class: :"card-title",
+        options:
+      ).then do |classes|
+        header(class: classes, **options, &)
+      end
     end
 
     def actions(**options, &)
-      classes = ["card-actions", options.delete(:class)]
-
-      footer(class: classes, **options, &)
+      generate_classes!(
+        component_html_class: :"card-actions",
+        options:
+      ).then do |classes|
+        footer(class: classes, **options, &)
+      end
     end
+
+    register_modifiers(
+      # "sm:image-full"
+      # "md:image-full"
+      # "lg:image-full"
+      image_full: "image-full",
+      # "sm:card-bordered"
+      # "md:card-bordered"
+      # "lg:card-bordered"
+      bordered: "card-bordered",
+      # "sm:card-normal"
+      # "md:card-normal"
+      # "lg:card-normal"
+      normal: "card-normal",
+      # "sm:card-compact"
+      # "md:card-compact"
+      # "lg:card-compact"
+      compact: "card-compact",
+      # "sm:card-side"
+      # "md:card-side"
+      # "lg:card-side"
+      side: "card-side",
+      # "sm:glass"
+      # "md:glass"
+      # "lg:glass"
+      glass: "glass",
+      # "sm:bg-primary sm:text-primary-content"
+      # "md:bg-primary md:text-primary-content"
+      # "lg:bg-primary lg:text-primary-content"
+      primary: "bg-primary text-primary-content",
+      # "sm:bg-secondary sm:text-secondary-content"
+      # "md:bg-secondary md:text-secondary-content"
+      # "lg:bg-secondary lg:text-secondary-content"
+      secondary: "bg-secondary text-secondary-content",
+      # "sm:bg-accent sm:text-accent-content"
+      # "md:bg-accent md:text-accent-content"
+      # "lg:bg-accent lg:text-accent-content"
+      accent: "bg-accent text-accent-content",
+      # "sm:bg-neutral sm:text-neutral-content"
+      # "md:bg-neutral md:text-neutral-content"
+      # "lg:bg-neutral lg:text-neutral-content"
+      neutral: "bg-neutral text-neutral-content",
+      # "sm:bg-base-100 sm:text-base-content"
+      # "md:bg-base-100 md:text-base-content"
+      # "lg:bg-base-100 lg:text-base-content"
+      base_100: "bg-base-100 text-base-content",
+      # "sm:bg-base-200 sm:text-base-content"
+      # "md:bg-base-200 md:text-base-content"
+      # "lg:bg-base-200 lg:text-base-content"
+      base_200: "bg-base-200 text-base-content",
+      # "sm:bg-base-300 sm:text-base-content"
+      # "md:bg-base-300 md:text-base-content"
+      # "lg:bg-base-300 lg:text-base-content"
+      base_300: "bg-base-300 text-base-content",
+      # "sm:bg-info sm:text-info-content"
+      # "md:bg-info sm:text-info-content"
+      # "lg:bg-info sm:text-info-content"
+      info: "bg-info text-info-content",
+      # "sm:bg-success sm:text-success-content"
+      # "md:bg-success md:text-success-content"
+      # "lg:bg-success lg:text-success-content"
+      success: "bg-success text-success-content",
+      # "sm:bg-warning sm:text-warning-content"
+      # "md:bg-warning md:text-warning-content"
+      # "lg:bg-warning lg:text-warning-content"
+      warning: "bg-warning text-warning-content",
+      # "sm:bg-error sm:text-error-content"
+      # "md:bg-error md:text-error-content"
+      # "lg:bg-error lg:text-error-content"
+      error: "bg-error text-error-content"
+    )
   end
 end

data/lib/phlexy_ui/class_list.rb

@@ -0,0 +1,104 @@
+module PhlexyUI
+  class ClassList
+    RESPONSIVE_PREFIXES = %i[sm md lg xl].freeze
+
+    def initialize(
+      component:,
+      component_html_class: nil,
+      base_modifiers: [],
+      options: {},
+      modifiers_map: {}
+    )
+      @component_html_class = component_html_class
+      @base_modifiers = base_modifiers
+      @options = options
+      @modifiers_map = modifiers_map
+    end
+
+    def to_a
+      classes = []
+      add_component_class(classes)
+      add_selected_modifiers_classes(classes)
+      add_conditioned_modifiers_classes(classes)
+      add_responsive_modifiers_classes(classes)
+      add_class_option_classes(classes)
+      classes
+    end
+
+    private
+
+    attr_reader :component_html_class, :base_modifiers, :options, :modifiers_map
+
+    def selected_base_modifiers
+      base_modifiers.select { |modifier| modifiers_map.key?(modifier) }
+    end
+
+    def add_component_class(classes)
+      return unless component_html_class
+
+      classes << with_config_prefix(component_html_class)
+    end
+
+    def add_selected_modifiers_classes(classes)
+      classes.concat(
+        html_classes_for_modifiers(
+          selected_base_modifiers
+        )
+      )
+    end
+
+    def add_conditioned_modifiers_classes(classes)
+      modifiers_map.each do |modifier, class_name|
+        next unless options.delete(modifier)
+
+        classes << with_config_prefix(class_name)
+      end
+    end
+
+    def html_classes_for_modifiers(modifiers, responsive_prefix: nil)
+      modifiers.map do |modifier|
+        with_responsive_prefix(
+          with_config_prefix(
+            modifiers_map.fetch(modifier)
+          ),
+          responsive_prefix
+        )
+      end
+    end
+
+    def add_responsive_modifiers_classes(classes)
+      return unless (responsive_options = options.delete(:responsive))
+
+      RESPONSIVE_PREFIXES.each do |responsive_prefix|
+        if (values = responsive_options[responsive_prefix])
+          classes.concat(
+            html_classes_for_modifiers(
+              Array(values),
+              responsive_prefix:
+            )
+          )
+        end
+      end
+    end
+
+    def add_class_option_classes(classes)
+      classes << options.delete(:class) if options[:class]
+    end
+
+    def with_config_prefix(string)
+      string.to_s.split.map do |word|
+        "#{PhlexyUI.configuration.prefix}#{word}"
+      end.join(" ")
+    end
+
+    def with_responsive_prefix(string, responsive_prefix = nil)
+      string.split.map do |word|
+        if responsive_prefix
+          "#{responsive_prefix}:#{word}"
+        else
+          word
+        end
+      end.join(" ")
+    end
+  end
+end

data/lib/phlexy_ui/collapsible_sub_menu.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  # @private
+  class CollapsibleSubMenu < Base
+    include Phlex::DeferredRender
+
+    def initialize(*, **)
+      super
+      @items ||= []
+    end
+
+    def view_template(&)
+      attributes = generate_attributes(base_modifiers, ATTRIBUTES_MAP)
+
+      details(**attributes) do
+        if @title
+          summary do
+            render @title
+          end
+        else
+          raise ArgumentError, "A collapsible submenu requires a title"
+        end
+
+        if @items.any?
+          ul do
+            @items.each do |item|
+              render item
+            end
+          end
+        end
+      end
+    end
+
+    def title(&block)
+      if @title
+        raise ArgumentError, "A collapsible submenu can only have one title"
+      else
+        @title = block
+      end
+    end
+
+    def item(*, **, &)
+      @items << MenuItem.new(*, **, &)
+    end
+
+    private
+
+    ATTRIBUTES_MAP = {
+      open: true
+    }.freeze
+  end
+end