active_element 0.0.11 → 0.0.13

data/app/assets/javascripts/active_element/text_search_field.js

@@ -71,7 +71,16 @@
       const token = ActiveElement.getAntiCsrfToken();
       const responseErrorContainer = cloneElement('response-error');
       const searchResultsContainer = cloneElement('results');
-      const spinner = cloneElement('spinner');
+      const icons = cloneElement('icons');
+      const spinner = icons.querySelector('[data-item-class="spinner"]');
+      const clearButton = icons.querySelector('[data-item-class="clear"]');
+
+      if (element.value) clearButton.classList.remove('invisible');
+      clearButton.addEventListener('click', () => {
+        element.value = '';
+        hiddenInput.value = '';
+        clearButton.classList.add('invisible');
+      });
 
       document.addEventListener('click', () => {
         searchResultsContainer.classList.add('d-none');
@@ -79,6 +88,7 @@
 
       element.addEventListener('change', () => {
         hiddenInput.value = element.value;
+        if (element.value) clearButton.classList.remove('invisible');
       });
 
       element.addEventListener('keyup', () => {
@@ -87,6 +97,7 @@
         lastRequestId = requestId;
 
         spinner.classList.remove('invisible');
+        if (element.value) clearButton.classList.remove('invisible');
         searchResultsContainer.classList.add('d-none');
 
         if (!query || query.length < 3) {
@@ -119,6 +130,7 @@
 
       form.append(hiddenInput);
       element.parentElement.append(searchResultsContainer);
+      element.parentElement.append(clearButton);
       element.parentElement.append(spinner);
       element.parentElement.append(responseErrorContainer);
     });

data/app/assets/stylesheets/active_element/_dark.scss

@@ -25,7 +25,7 @@
 
   .json-field {
     .form-group {
-      background-color: #58575755;
+      background-color: #5857571f;
     }
   }
 

data/app/assets/stylesheets/active_element/application.scss

@@ -2,12 +2,23 @@
 @import "bootstrap";
 @import "dark";
 
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
 .application-menu {
   height: 5rem;
   padding-left: 2rem;
   top: 0;
   transition: height 0.5s ease-in-out, background-position 0.8s ease-in-out;
-  background-color: #456060 !important;
+  background-color: #508ea1 !important;
   z-index: 2000;
   .dropdown-toggle::after {
     color: #{$blue};
@@ -77,6 +88,12 @@ form {
   margin-top: 5rem;
 }
 
+.modal-content pre, .modal-content div.json-highlight {
+  font-size: 0.875rem;
+  line-height: 1.2rem;
+  font-family: monospace;
+}
+
 .json-field {
   ol.json-array-field {
     margin-top: 1rem;
@@ -105,6 +122,11 @@ form {
   .form-group {
     padding: 1rem;
     background-color: #58575755;
+
+    &.depth-1 {
+      padding: 0;
+      background-color: transparent;
+    }
   }
 
   .form-check {
@@ -176,6 +198,16 @@ form {
   }
 
 
+  .json-array-field {
+    li, .json-delete-button {
+      opacity: 0;
+      animation: fade-in ease-in 1;
+      animation-fill-mode: forwards;
+      animation-duration: 0.5s;
+      animation-delay: 0;
+    }
+  }
+
   .json-array-field {
     li .json-text-field,
     li .json-select-field,
@@ -185,12 +217,18 @@ form {
     li .json-date-field,
     li .json-time-field,
     li .json-datetime-field {
+
       &.deletable {
         width: calc(100% - 3.2rem);
       }
     }
   }
 
+  .append-button {
+    position: relative;
+    z-index: 300;
+  }
+
   .form-control, .form-select {
     display: inline;
     .append-button {

data/app/controllers/concerns/active_element/default_controller_actions.rb

@@ -8,31 +8,31 @@ module ActiveElement
     extend ActiveSupport::Concern
 
     def index
-      ActiveElement::DefaultController.new(controller: self).index
+      ActiveElement::DefaultController::Controller.new(controller: self).index
     end
 
     def show
-      ActiveElement::DefaultController.new(controller: self).show
+      ActiveElement::DefaultController::Controller.new(controller: self).show
     end
 
     def new
-      ActiveElement::DefaultController.new(controller: self).new
+      ActiveElement::DefaultController::Controller.new(controller: self).new
     end
 
     def create
-      ActiveElement::DefaultController.new(controller: self).create
+      ActiveElement::DefaultController::Controller.new(controller: self).create
     end
 
     def edit
-      ActiveElement::DefaultController.new(controller: self).edit
+      ActiveElement::DefaultController::Controller.new(controller: self).edit
     end
 
     def update
-      ActiveElement::DefaultController.new(controller: self).update
+      ActiveElement::DefaultController::Controller.new(controller: self).update
     end
 
     def destroy
-      ActiveElement::DefaultController.new(controller: self).destroy
+      ActiveElement::DefaultController::Controller.new(controller: self).destroy
     end
   end
 end

data/app/views/active_element/components/fields/_json.html.erb

@@ -1,9 +1,10 @@
 <a data-modal-id="<%= "#json-modal-#{field_id}" %>"
+   id="<%= "json-view-modal-trigger-#{field_id}" %>"
    data-json-modal-link="true"
    data-bs-toggle="modal"
    data-bs-target="#json-modal-<%= field_id %>"
-   class="text-decoration-none"
-   href="#">Inspect JSON <i class="fa-solid fa-magnifying-glass"></i></a>
+   class="text-decoration-none text-nowrap"
+   href="#">JSON <i class="fa-solid fa-magnifying-glass"></i></a>
 <div id="json-modal-<%= field_id %>" class="modal fade"
      tabindex="-1"
      aria-hidden="true">

data/app/views/active_element/components/form/_field.html.erb

@@ -6,7 +6,8 @@
              locals: { form_id: id, form: form, field: field, options: options, component: component } %>
 <% elsif type == :json_field %>
   <%= render partial: 'active_element/components/form/json',
-             locals: { form_id: id, form: form, field: field, field_id: ActiveElement.element_id, options: options, component: component } %>
+             locals: { form_id: id, form: form, field: field, field_id: "#{id}-json-field-#{field}",
+                       options: options, component: component } %>
 <% elsif type == :text_search_field %>
   <%= render partial: 'active_element/components/form/text_search',
              locals: { form_id: id, form: form, field: field, options: options, component: component } %>

data/app/views/active_element/components/form/_json.html.erb

@@ -4,6 +4,8 @@
      data-form-id="<%= form_id %>"
      data-field-id="<%= field_id %>"
      data-schema-field-id="<%= field_id %>-schema"
+     data-json-view-modal-id="<%= "json-modal-#{form_id}-#{field}-json-view" %>"
+     data-json-view-modal-trigger-id="<%= "json-view-modal-trigger-#{form_id}-#{field}-json-view" %>"
 >
 
 </div>

data/app/views/active_element/components/form/_label.html.erb

@@ -6,7 +6,7 @@
             data-bs-trigger="focus"
             data-bs-toggle="popover"
             title="Required"
-            data-bs-content="<%= "#{options.fetch(:label)} is a required field." %>"
+            data-bs-content="<%= "#{options.fetch(:label)} is a required field." %>">
             <i class="text-secondary fa-solid fa-star-of-life"></i>
     </button>
   <% end %>
@@ -26,3 +26,10 @@
   <%= render partial: 'active_element/components/form/option_groups_summary',
              locals: { option_groups: options[:option_groups] } %>
 <% end %>
+
+<% if type == :json_field %>
+  <div>
+  <%= render partial: 'active_element/components/fields/json',
+             locals: { value: component.value_for(field), field_id: "#{id}-#{field}-json-view" } %>
+  </div>
+<% end %>

data/app/views/active_element/components/form/_templates.html.erb

@@ -18,8 +18,8 @@
     <input id="json-time-field-template" type="time" class="form-control m-1 d-inline-block json-time-field" />
     <input id="json-datetime-field-template" type="datetime-local" class="form-control m-1 d-inline-block json-datetime-field" />
     <input id="json-integer-field-template" type="number" class="form-control m-1 json-integer-field" />
-    <input id="json-float-field-template" type="number" class="form-control m-1 json-float-field" />
-    <input id="json-decimal-field-template" type="number" class="form-control m-1 json-decimal-field" />
+    <input id="json-float-field-template" type="number" step="any" class="form-control m-1 json-float-field" />
+    <input id="json-decimal-field-template" type="number" step="any" class="form-control m-1 json-decimal-field" />
 
     <select id="json-select-template" class="form-select m-1 json-select-field"></select>
 
@@ -65,9 +65,12 @@
     <p id="form-search-field-response-error-template" class="text-danger validation-error-message pt-1 m-0"></p>
     <div id="form-search-field-results-template" class="search-field-results d-none border border-top-0"></div>
     <div id="form-search-field-results-item-template" class="search-field-result p-2"></div>
-    <div id="form-search-field-spinner-template" class="invisible text-end">
-      <div style="position: relative; float: right; width: auto; right: 0.5rem; top: -1.7rem;">
-        <i class="fa-solid fa-spinner fa-spin"></i>
+    <div id="form-search-field-icons-template" class="text-end">
+      <div data-item-class="spinner" class="invisible" style="position: relative; float: right; width: auto; right: 0.5rem; top: -1.7rem;">
+        <i class="fa-fw fa-solid fa-spinner fa-spin"></i>
+      </div>
+      <div data-item-class="clear" class="invisible" style="position: relative; float: right; width: auto; right: 0.5rem; top: -1.7rem; cursor: pointer;">
+        <i class="fa-solid fa-fw fa-xmark"></i>
       </div>
     </div>
   </div>

data/app/views/active_element/components/form/_text_search.html.erb

@@ -3,7 +3,7 @@
                          id: "#{form_id}-#{field}-text-search",
                          class: "form-control #{component.valid?(field) ? nil : 'is-invalid'}",
                          autocomplete: 'off',
-                         placeholder: options[:placeholder].presence || 'Search...',
+                         placeholder: options[:placeholder].presence || "Search...",
                          tabindex: component.tabindex,
                          data: {
                            field_type: 'text-search',

data/app/views/active_element/components/form.html.erb

@@ -1,5 +1,5 @@
 <% if destroy %>
-  <div class="container w-100 text-end">
+  <div class="container me-0 w-100 text-end">
     <%= active_element.component.destroy_button(record) %>
   </div>
 <% end %>
@@ -51,7 +51,7 @@
         <% field_group.each do |field, type, options| %>
           <div class="col-sm-3">
             <%= render partial: 'active_element/components/form/label',
-                       locals: { type: type, form: form, field: field, options: options } %>
+                       locals: { component: component, id: id, type: type, form: form, field: field, options: options } %>
           </div>
 
 

data/app/views/active_element/components/table/_field.html.erb

@@ -1,5 +1,5 @@
 <% if value.is_a?(Array) %>
-  <% value.each_with_index do |each_value, index| %>
+  <% value.sort.each_with_index do |each_value, index| %>
     <%= each_value %>
     <%= index < value.size - 1 ? '|' : nil %>
   <% end %>

data/app/views/active_element/components/table/_ungrouped_collection.html.erb

@@ -8,6 +8,7 @@
             <button type="button"
                     style="background: none; border: none; outline: 0; position: absolute; margin-top: 0.3rem"
                     data-bs-toggle="popover"
+                    data-bs-trigger="focus"
                     data-bs-content="<%= options[:description] %>">
                     <i class="text-secondary fa-solid fa-circle-info"></i>
             </button>

data/app/views/active_element/components/table/item.html.erb

@@ -20,6 +20,7 @@
             <button type="button"
                     style="background: none; border: none; outline: 0; position: absolute; margin-top: 0.3rem"
                     data-bs-toggle="popover"
+                    data-bs-trigger="focus"
                     data-bs-content="<%= options[:description] %>">
                     <i class="text-secondary fa-solid fa-circle-info"></i>
             </button>

data/app/views/active_element/default_views/edit.html.erb

@@ -1,5 +1,5 @@
 <%= active_element.component.page_title record.model_name.to_s.titleize %>
 
 <%= active_element.component.form model: [namespace, record].compact,
-                                  destroy: true,
-                                  fields: active_element.state.fetch(:editable_fields, []) %>
+                                  destroy: active_element.state.deletable?,
+                                  fields: active_element.state.editable_fields %>

data/app/views/active_element/default_views/forbidden.html.erb

@@ -0,0 +1,7 @@
+<h1>Forbidden</h1>
+
+<h2 class="text-danger">Access to this resource has not been configured</h2>
+
+<p>The <span class="text-primary font-monospace"><%= type %></span> resource for <span class="text-primary font-monospace"><%= controller_name.titleize %></span> has not been configured, please contact your administrator.</p>
+
+<hr/>

data/app/views/active_element/default_views/index.html.erb

@@ -1,15 +1,15 @@
-<% if active_element.state.key?(:searchable_fields) %>
+<% if active_element.state.searchable_fields.present? %>
   <%= active_element.component.form title: 'Search Filters',
                                     submit: 'Search',
                                     modal: true,
                                     search: true,
                                     item: search_filters,
-                                    fields: active_element.state.fetch(:searchable_fields) %>
+                                    fields: active_element.state.searchable_fields %>
 <% end %>
 
-<%= active_element.component.table new: true,
-                                   show: true,
-                                   edit: true,
-                                   destroy: true,
+<%= active_element.component.table new: active_element.state.creatable?,
+                                   show: active_element.state.viewable?,
+                                   edit: active_element.state.editable?,
+                                   destroy: active_element.state.deletable?,
                                    collection: collection,
-                                   fields: active_element.state.fetch(:listable_fields, []) %>
+                                   fields: active_element.state.listable_fields %>

data/app/views/active_element/default_views/new.html.erb

@@ -1,4 +1,4 @@
 <%= active_element.component.page_title record.model_name.to_s.titleize %>
 
 <%= active_element.component.form model: [namespace, record].compact,
-                                  fields: active_element.state.fetch(:editable_fields, []) %>
+                                  fields: active_element.state.editable_fields %>

data/app/views/active_element/default_views/show.html.erb

@@ -1,7 +1,7 @@
 <%= active_element.component.page_title record.model_name.to_s.titleize %>
 
 <%= active_element.component.table item: record,
-                                   edit: true,
-                                   destroy: true,
-                                   fields: active_element.state.fetch(:viewable_fields, []) %>
+                                   edit: active_element.state.editable?,
+                                   destroy: active_element.state.deletable?,
+                                   fields: active_element.state.viewable_fields %>
 

data/app/views/layouts/active_element.html.erb

@@ -2,6 +2,13 @@
   <head>
     <%= render_active_element_hook 'active_element/before_head' %>
 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet"
+          href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" integrity="sha512-fD9DI5bZwQxOi7MhYWnnNPlvXdp/2Pj3XSTRrFs5FQa4mizyGLnJcN6tuvUS6LbmgN1ut+XGSABKvjN0H6Aoow==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js" integrity="sha512-2rNj2KJ+D8s1ceNasTIex6z4HWyOnEYLVC3FigGOmyQCZc2eBXKgOxQmo3oKLHyfcj53uz4QMsRCWNbLd32Q1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
+
     <style>
       <%= Rouge::Theme.find('tulip').render(scope: '.json-highlight') %>
       .json-highlight .p {
@@ -12,14 +19,28 @@
         color: #6b7399
       }
 
+      .json-highlight .kc, .json-highlight .c {
+        color: #695;
+      }
+
       .json-highlight {
         background-color: transparent;
       }
-    </style>
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" integrity="sha512-fD9DI5bZwQxOi7MhYWnnNPlvXdp/2Pj3XSTRrFs5FQa4mizyGLnJcN6tuvUS6LbmgN1ut+XGSABKvjN0H6Aoow==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js" integrity="sha512-2rNj2KJ+D8s1ceNasTIex6z4HWyOnEYLVC3FigGOmyQCZc2eBXKgOxQmo3oKLHyfcj53uz4QMsRCWNbLd32Q1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+      .hljs-punctuation {
+        color: #7e4b6f;
+      }
+
+      .hljs-attr {
+        color: #9f93e6;
+        font-weight: bold;
+      }
+
+      .hljs-string {
+        color: #6b7399;
+        font-weight: bold;
+      }
+    </style>
 
     <script>
       window.ActiveElement = window.ActiveElement || {};

data/config/locales/en.yml

@@ -0,0 +1,3 @@
+en:
+  active_element:
+    unexpected_error: 'Unexpected error'

data/example_app/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    active_element (0.0.11)
+    active_element (0.0.13)
       bootstrap (~> 5.3.0alpha3)
       kaminari (~> 1.2)
       paintbrush (~> 0.1.2)

data/example_app/app/controllers/pets_controller.rb

@@ -3,4 +3,5 @@ class PetsController < ApplicationController
   active_element.viewable_fields :name, :animal, :owner, :created_at, :updated_at
   active_element.editable_fields :name, :animal, :owner
   active_element.searchable_fields :name, :animal, :owner, :created_at, :updated_at
+  active_element.deletable
 end

data/example_app/app/controllers/users_controller.rb

@@ -3,4 +3,5 @@ class UsersController < ApplicationController
   active_element.viewable_fields :name, :email, :created_at, :updated_at, :pets
   active_element.listable_fields :name, :email, :created_at, :updated_at
   active_element.searchable_fields :name, :email, :created_at, :updated_at
+  active_element.deletable
 end

data/lib/active_element/components/form.rb

@@ -81,14 +81,7 @@ module ActiveElement
       end
 
       def schema_for(field, options)
-        options.key?(:schema) ? options.fetch(:schema) : schema_from_yaml(field)
-      end
-
-      def schema_from_yaml(field)
-        YAML.safe_load(
-          Rails.root.join("config/forms/#{record.class.name.underscore}/#{field}.yml").read,
-          symbolize_names: true
-        )
+        options.key?(:schema) ? options.fetch(:schema) : Util.json_schema(model: record.class, field: field)
       end
 
       def display_value_for_select(field, options)

data/lib/active_element/components/text_search.rb

@@ -19,7 +19,16 @@ module ActiveElement
         end
 
         def text_search_options(model:, with:, providing:)
-          { search: { model: model.name.underscore, with: with, providing: providing } }
+          {
+            search: { model: model.name.underscore, with: with, providing: providing },
+            placeholder: "Search for #{model.name.titleize} by #{humanized_names(with).join(', ')}..."
+          }
+        end
+
+        private
+
+        def humanized_names(names)
+          Array(names).compact.map.map(&:to_s).map(&:humanize)
         end
       end
     end

data/lib/active_element/components/util/display_value_mapping.rb

@@ -16,8 +16,6 @@ module ActiveElement
         end
 
         def json_value
-          return ActiveElement.json_pretty_print(value_from_record) unless component.is_a?(CollectionTable)
-
           component.controller.render_to_string(
             partial: 'active_element/components/fields/json',
             locals: { value: value_from_record, field_id: ActiveElement.element_id }

data/lib/active_element/components/util/form_field_mapping.rb

@@ -127,21 +127,22 @@ module ActiveElement
         end
 
         def relation_text_search_field(field)
-          relation_model = relation(field).klass
-          record.public_send(field)
           [field, :text_search_field,
            TextSearch.text_search_options(
-             model: relation_model,
+             model: relation(field).klass,
              with: searchable_fields(field),
-             providing: relation_model.primary_key
-           ).merge({ display_value: association_mapping(field).display_value })]
+             providing: relation(field).klass.primary_key
+           ).merge({ display_value: association_mapping(field).display_value, label: i18n.label(field) })]
         end
 
         def searchable_fields(field)
-          Util.relation_controller(model, controller, field)
-              .active_element
-              .state
-              .fetch(:searchable_fields, [])
+          # FIXME: Use database column type to only include strings/numbers.
+          (Util.relation_controller(model, controller, field)&.active_element&.state&.searchable_fields || [])
+            .reject { |searchable_field| searchable_field.to_s.end_with?('_at') }
+        end
+
+        def relation_primary_key(field)
+          relation(field).options.fetch(:primary_key) { relation_model.primary_key }
         end
 
         def default_type_from_column_type(field, column_type) # rubocop:disable Metrics/MethodLength
@@ -204,7 +205,9 @@ module ActiveElement
         end
 
         def default_options(field)
-          { required: required?(field) }
+          {
+            required: required?(field)
+          }.merge(field_options(field))
         end
 
         def required?(field)
@@ -215,6 +218,16 @@ module ActiveElement
             validator.kind == :presence && validator.attributes.include?(field.to_sym)
           end
         end
+
+        def field_options(field)
+          return NumericField.new(field: field, column: column(field)).options if numeric?(field)
+
+          {}
+        end
+
+        def numeric?(field)
+          %i[float decimal integer].include?(column(field)&.type)
+        end
       end
     end
   end

data/lib/active_element/components/util/numeric_field.rb

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+module ActiveElement
+  module Components
+    module Util
+      # Provides options for a `<input type="number" />` element based on database column properties.
+      class NumericField
+        def initialize(field:, column:)
+          @field = field
+          @column = column
+        end
+
+        def options
+          {
+            step: step,
+            min: min,
+            max: max
+          }.compact
+        end
+
+        private
+
+        attr_reader :field, :column
+
+        def step
+          return 'any' if column.blank?
+          return '1' if column.type == :integer
+          return 'any' if column.try(:scale).blank?
+
+          "0.#{'1'.rjust(column.scale, '0')}"
+        end
+
+        def min
+          return min_decimal if column.try(:precision).present?
+          return min_integer if column.try(:limit).present?
+
+          nil
+        end
+
+        def max
+          return max_decimal if column.try(:precision).present?
+          return max_integer if column.try(:limit).present?
+
+          nil
+        end
+
+        # XXX: This is the theoretical maximum value for a column with a given precision but,
+        # since the maximum database value is constrained by total significant figures (i.e.
+        # before and after the decimal point), an input can still be provided that would cause an
+        # error, so the default controller rescues `ActiveRecord::RangeError` to deal with this.
+        def max_decimal
+          '9' * column.precision
+        end
+
+        def min_decimal
+          "-#{'9' * column.precision}"
+        end
+
+        # `limit` represents available bytes for storing a signed integer e.g.
+        # 2**(8 * 8) / 2 - 1 == 9223372036854775807
+        # which matches PostgreSQL's `bigint` max value:
+        # https://www.postgresql.org/docs/current/datatype-numeric.html
+        def max_integer
+          ((2**(column.limit * 8)) / 2) - 1
+        end
+
+        def min_integer
+          -2**(column.limit * 8) / 2
+        end
+      end
+    end
+  end
+end

data/lib/active_element/components/util.rb

@@ -9,6 +9,7 @@ require_relative 'util/form_value_mapping'
 require_relative 'util/display_value_mapping'
 require_relative 'util/association_mapping'
 require_relative 'util/decorator'
+require_relative 'util/numeric_field'
 
 module ActiveElement
   module Components
@@ -40,6 +41,13 @@ module ActiveElement
         "#{namespace.classify}::#{base}".safe_constantize || base.safe_constantize
       end
 
+      def self.json_schema(model:, field:)
+        YAML.safe_load(
+          Rails.root.join("config/forms/#{model.name.underscore}/#{field}.yml").read,
+          symbolize_names: true
+        )
+      end
+
       def self.json_pretty_print(json)
         formatter = Rouge::Formatters::HTML.new
         lexer = Rouge::Lexers::JSON.new