phlexi-display 0.0.1 → 0.0.2

data/lib/phlexi/display/field_options/inferred_types.rb

@@ -10,47 +10,32 @@ module Phlexi
           @inferred_db_type ||= infer_db_type
         end
 
-        def inferred_input_component
-          @inferred_input_component ||= infer_input_component
-        end
-
-        def inferred_input_type
-          @inferred_input_type ||= infer_input_type(inferred_input_component)
+        def inferred_display_component
+          @inferred_display_component ||= infer_display_component
         end
 
         private
 
-        # this returns the element type
-        # one of :input, :textarea, :select, :botton
-        def infer_input_component
-          return :select unless collection.blank?
-
+        def infer_display_component
           case inferred_db_type
-          when :text, :json, :jsonb, :hstore
-            :textarea
-          else
-            :input
-          end
-        end
-
-        # this only applies when input_component is `:input`
-        # resolves the type attribute of input components
-        def infer_input_type(component)
-          case inferred_db_type
-          when :string
-            infer_string_input_type(key)
+          when :string, :text
+            infer_string_display_type(key)
           when :integer, :float, :decimal
             :number
-          when :date
+          when :date, :datetime, :time
             :date
-          when :datetime
-            :datetime
-          when :time
-            :time
           when :boolean
-            :checkbox
+            :boolean
+          when :json, :jsonb, :hstore
+            :code
           else
-            :text
+            if association_reflection
+              :association
+            elsif attachment_reflection
+              :attachment
+            else
+              :text
+            end
           end
         end
 
@@ -81,40 +66,39 @@ module Phlexi
           case value
           when Integer
             :integer
-          when Float, BigDecimal
+          when Float
             :float
+          when BigDecimal
+            :decimal
           when TrueClass, FalseClass
             :boolean
           when Date
             :date
           when Time, DateTime
             :datetime
+          when Hash
+            :json
           else
             :string
           end
         end
 
-        def infer_string_input_type(key)
+        def infer_string_display_type(key)
           key = key.to_s.downcase
 
           return :password if is_password_field?
 
-          custom_type = custom_string_input_type(key)
+          custom_type = custom_string_display_type(key)
           return custom_type if custom_type
 
-          if has_validators?
-            infer_string_input_type_from_validations
-          else
-            :text
-          end
+          :text
         end
 
-        def custom_string_input_type(key)
+        def custom_string_display_type(key)
           custom_mappings = {
             /url$|^link|^site/ => :url,
             /^email/ => :email,
-            /^search/ => :search,
-            /phone|tel(ephone)?/ => :tel,
+            /phone|tel(ephone)?/ => :phone,
             /^time/ => :time,
             /^date/ => :date,
             /^number|_count$|_amount$/ => :number,
@@ -128,16 +112,6 @@ module Phlexi
           nil
         end
 
-        def infer_string_input_type_from_validations
-          if attribute_validators.find { |v| v.kind == :numericality }
-            :number
-          elsif attribute_validators.find { |v| v.kind == :format && v.options[:with] == URI::MailTo::EMAIL_REGEXP }
-            :email
-          else
-            :text
-          end
-        end
-
         def is_password_field?
           key = self.key.to_s.downcase
 

data/lib/phlexi/display/field_options/{placeholder.rb → placeholders.rb}

@@ -3,10 +3,10 @@
 module Phlexi
   module Display
     module FieldOptions
-      module Placeholder
+      module Placeholders
         def placeholder(placeholder = nil)
           if placeholder.nil?
-            options[:placeholder]
+            options[:placeholder] || "-"
           else
             options[:placeholder] = placeholder
             self

data/lib/phlexi/display/field_options/themes.rb

@@ -4,41 +4,33 @@ module Phlexi
   module Display
     module FieldOptions
       module Themes
-        # Resolves theme classes for components based on their type and the validity state of the field.
+        # Resolves theme classes for components based on their type.
         #
-        # This method is responsible for determining the appropriate CSS classes for a given form component.
-        # It considers both the base theme for the component type and any additional theming based on the
-        # component's validity state (valid, invalid, or neutral). The method supports a hierarchical
-        # theming system, allowing for cascading themes and easy customization.
+        # This method is responsible for determining the appropriate CSS classes for a given display component.
+        # It supports a hierarchical theming system, allowing for cascading themes and easy customization.
         #
-        # @param component [Symbol, String] The type of form component (e.g., :input, :label, :wrapper)
+        # @param component [Symbol, String] The type of display component (e.g., :text, :date, :boolean)
         #
         # @return [String, nil] A string of CSS classes for the component, or nil if no theme is applied
         #
         # @example Basic usage
-        #   themed(:input)
-        #   # => "w-full p-2 border rounded-md shadow-sm font-medium text-sm dark:bg-gray-700"
-        #
-        # @example Usage with validity state
-        #   # Assuming the field has errors
-        #   themed(:input)
-        #   # => "w-full p-2 border rounded-md shadow-sm font-medium text-sm dark:bg-gray-700 bg-red-50 border-red-500 text-red-900"
+        #   themed(:text)
+        #   # => "text-gray-700 text-sm"
         #
         # @example Cascading themes
-        #   # Assuming textarea inherits from input in the theme definition
-        #   themed(:textarea)
-        #   # => "w-full p-2 border rounded-md shadow-sm font-medium text-sm dark:bg-gray-700"
+        #   # Assuming email inherits from text in the theme definition
+        #   themed(:email)
+        #   # => "text-gray-700 text-sm text-blue-600 underline"
         #
         # @note The actual CSS classes returned will depend on the theme definitions in the `theme` hash
         #       and any overrides specified in the `options` hash.
         #
         # @see #resolve_theme
-        # @see #resolve_validity_theme
         # @see #theme
         def themed(component)
           return unless component
 
-          tokens(resolve_theme(component), resolve_validity_theme(component)).presence
+          resolve_theme(component)
         end
 
         protected
@@ -50,9 +42,9 @@ module Phlexi
         # @return [String, nil] The resolved theme value or nil if not found
         #
         # @example Resolving a nested theme
-        #   # Assuming the theme is: { input: :base_input, base_input: "some-class" }
-        #   resolve_theme(:input)
-        #   # => "some-class"
+        #   # Assuming the theme is: { email: :text, text: "text-gray-700" }
+        #   resolve_theme(:email)
+        #   # => "text-gray-700"
         def resolve_theme(property, visited = Set.new)
           return nil if !property.present? || visited.include?(property)
           visited.add(property)
@@ -65,52 +57,23 @@ module Phlexi
           end
         end
 
-        # Resolves the theme for a component based on its current validity state
-        #
-        # This method determines the validity state of the field (valid, invalid, or neutral)
-        # and returns the corresponding theme by prepending the state to the component name.
-        #
-        # @param property [Symbol, String] The base theme property to resolve
-        # @return [String, nil] The resolved validity-specific theme or nil if not found
-        #
-        # @example Resolving a validity theme
-        #   # Assuming the field has errors and the theme includes { invalid_input: "error-class" }
-        #   resolve_validity_theme(:input)
-        #   # => "error-class"
-        def resolve_validity_theme(property)
-          validity_property = if has_errors?
-            :"invalid_#{property}"
-          elsif object_valid?
-            :"valid_#{property}"
-          else
-            :"neutral_#{property}"
-          end
-
-          resolve_theme(validity_property)
-        end
-
-        # Retrieves or initializes the theme hash for the form builder.
+        # Retrieves or initializes the theme hash for the display builder.
         #
-        # This method returns a hash containing theme definitions for various form components.
+        # This method returns a hash containing theme definitions for various display components.
         # If a theme has been explicitly set in the options, it returns that. Otherwise, it
         # initializes and returns a default theme.
         #
         # The theme hash defines CSS classes or references to other theme keys for different
-        # components and their states (e.g., valid, invalid, neutral).
+        # components.
         #
-        # @return [Hash] A hash containing theme definitions for form components
+        # @return [Hash] A hash containing theme definitions for display components
         #
         # @example Accessing the theme
-        #   theme[:input]
-        #   # => "w-full p-2 border rounded-md shadow-sm font-medium text-sm dark:bg-gray-700"
-        #
-        # @example Accessing a validity-specific theme
-        #   theme[:invalid_input]
-        #   # => "bg-red-50 border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 focus:border-red-500"
+        #   theme[:text]
+        #   # => "text-gray-700 text-sm"
         #
         # @example Theme inheritance
-        #   theme[:textarea] # Returns :input, indicating textarea inherits input's theme
-        #   theme[:valid_textarea] # Returns :valid_input
+        #   theme[:email] # Returns :text, indicating email inherits text's theme
         #
         # @note The actual content of the theme hash depends on the default_theme method
         #       and any theme overrides specified in the options when initializing the field builder.
@@ -120,85 +83,47 @@ module Phlexi
           @theme ||= options[:theme] || default_theme
         end
 
-        # Defines and returns the default theme hash for the field builder.
+        # Defines and returns the default theme hash for the display builder.
         #
         # This method returns a hash containing the base theme definitions for various components.
-        # It sets up the default styling and relationships between different components and their states.
+        # It sets up the default styling and relationships between different components.
         # The theme uses a combination of explicit CSS classes and symbolic references to other theme keys,
         # allowing for a flexible and inheritance-based theming system.
         #
         # @return [Hash] A frozen hash containing default theme definitions for components
         #
         # @example Accessing the default theme
-        #   default_theme[:input]
-        #   # => nil (indicates that :input doesn't have a default and should be defined by the user)
+        #   default_theme[:text]
+        #   # => "text-gray-700 text-sm"
         #
         # @example Theme inheritance
-        #   default_theme[:textarea]
-        #   # => :input (indicates that :textarea inherits from :input)
-        #
-        # @example Validity state theming
-        #   default_theme[:valid_textarea]
-        #   # => :valid_input (indicates that :valid_textarea inherits from :valid_input)
+        #   default_theme[:email]
+        #   # => :text (indicates that :email inherits from :text)
         #
         # @note This method returns a frozen hash to prevent accidental modifications.
-        #       To customize the theme, users should provide their own theme hash when initializing the field builder.
-        # @note Most theme values are set to nil or commented out in the default theme to encourage users
-        #       to define their own styles while maintaining the relationships between components and states.
+        #       To customize the theme, users should provide their own theme hash when initializing the display builder.
         #
         # @see #theme
         def default_theme
           {
-            # # input
-            # input: nil,
-            # valid_input: nil,
-            # invalid_input: nil,
-            # neutral_input: nil,
-
-            # textarea
-            textarea: :input,
-            valid_textarea: :valid_input,
-            invalid_textarea: :invalid_input,
-            neutral_textarea: :neutral_input,
-
-            # select
-            select: :input,
-            valid_select: :valid_input,
-            invalid_select: :invalid_input,
-            neutral_select: :neutral_input,
-
-            # file
-            file: :input,
-            valid_file: :valid_input,
-            invalid_file: :invalid_input,
-            neutral_file: :neutral_input,
-
-            # misc
-            # label: nil,
-            # hint: nil,
-            # error: nil,
-            full_error: :error,
-            # wrapper: nil,
-            # inner_wrapper: nil,
-            submit_button: :button
-
-            # # label themes
-            # label: "md:w-1/6 mt-2 block mb-2 text-sm font-medium",
-            # invalid_label: "text-red-700 dark:text-red-500",
-            # valid_label: "text-green-700 dark:text-green-500",
-            # neutral_label: "text-gray-700 dark:text-white",
-            # # input themes
-            # input: "w-full p-2 border rounded-md shadow-sm font-medium text-sm dark:bg-gray-700",
-            # invalid_input: "bg-red-50 border-red-500 dark:border-red-500 text-red-900 dark:text-red-500 placeholder-red-700 dark:placeholder-red-500 focus:ring-red-500 focus:border-red-500",
-            # valid_input: "bg-green-50 border-green-500 dark:border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 focus:ring-green-500 focus:border-green-500",
-            # neutral_input: "border-gray-300 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-primary-500 focus:border-primary-500",
-            # # hint themes
-            # hint: "mt-2 text-sm text-gray-500 dark:text-gray-200",
-            # # error themes
-            # error: "mt-2 text-sm text-red-600 dark:text-red-500",
-            # # wrapper themes
-            # wrapper: "flex flex-col md:flex-row items-start space-y-2 md:space-y-0 md:space-x-2 mb-4",
-            # inner_wrapper: "md:w-5/6 w-full",
+            label: "text-base font-bold text-gray-500 dark:text-gray-400 mb-1",
+            description: "text-sm text-gray-400 dark:text-gray-500",
+            placeholder: "text-xl font-semibold text-gray-500 dark:text-gray-300 mb-1 italic",
+            string: "text-xl font-semibold text-gray-900 dark:text-white mb-1",
+            # text: :string,
+            number: :string,
+            datetime: :string,
+            # boolean: :string,
+            # code: :string,
+            # email: :text,
+            # url: :text,
+            # phone: :text,
+            # color: :text,
+            # search: :text,
+            # password: :string,
+            # association: :string,
+            attachment: :string,
+            wrapper: nil
           }.freeze
         end
       end

data/lib/phlexi/display/structure/dom.rb

@@ -3,21 +3,21 @@
 module Phlexi
   module Display
     module Structure
-      # Generates DOM IDs, names, etc. for a Field, Namespace, or Node based on
-      # norms that were established by Rails. These can be used outsidef or Rails in
-      # other Ruby web frameworks since it has now dependencies on Rails.
+      # Generates DOM IDs for a Field, Namespace, or Node based on
+      # norms that were established by Rails. These can be used outside of Rails in
+      # other Ruby web frameworks since it has no dependencies on Rails.
       class DOM
         def initialize(field:)
           @field = field
         end
 
         # Converts the value of the field to a String, which is required to work
-        # with Phlex. Assumes that `Object#to_s` emits a format suitable for the web form.
+        # with Phlex. Assumes that `Object#to_s` emits a format suitable for display.
         def value
           @field.value.to_s
         end
 
-        # Walks from the current node to the parent node, grabs the names, and seperates
+        # Walks from the current node to the parent node, grabs the names, and separates
         # them with a `_` for a DOM ID.
         def id
           @id ||= begin
@@ -27,34 +27,14 @@ module Phlexi
           end
         end
 
-        # The `name` attribute of a node, which is influenced by Rails.
-        # All node names, except the parent node, are wrapped in a `[]` and collections
-        # are left empty. For example, `user[addresses][][street]` would be created for a form with
-        # data shaped like `{user: {addresses: [{street: "Sesame Street"}]}}`.
-        def name
-          @name ||= begin
-            root, *names = keys
-            names.map { |name| "[#{name}]" }.unshift(root).join
-          end
-        end
-
         # One-liner way of walking from the current node all the way up to the parent.
         def lineage
           @lineage ||= Enumerator.produce(@field, &:parent).take_while(&:itself).reverse
         end
 
-        # Emit the id, name, and value in an HTML tag-ish that doesnt have an element.
+        # Emit the id and value in an HTML tag-ish that doesn't have an element.
         def inspect
-          "<#{self.class.name} id=#{id.inspect} name=#{name.inspect} value=#{value.inspect}/>"
-        end
-
-        private
-
-        def keys
-          @keys ||= lineage.map do |node|
-            # If the parent of a field is a field, the name should be nil.
-            node.key unless node.parent.is_a? FieldBuilder
-          end
+          "<#{self.class.name} id=#{id.inspect} value=#{value.inspect}/>"
         end
       end
     end