Merge pull request #89 from PhlexUI/ch/add-form-component

Adding form Component

index.js

@@ -8,34 +8,37 @@ application.debug = false;
 window.Stimulus = application;
 
 // Import all controller files
+import AccordionController from "./lib/rbui/accordion/accordion_controller";
 import ComboboxController from "./lib/rbui/combobox/combobox_controller";
 import ComboboxContentController from "./lib/rbui/combobox/combobox_content_controller";
 import ComboboxItemController from "./lib/rbui/combobox/combobox_item_controller";
+import FormFieldController from "./lib/rbui/form/form_field_controller";
 import ThemeToggleController from "./lib/rbui/theme_toggle/theme_toggle_controller";
 import TooltipController from "./lib/rbui/tooltip/tooltip_controller";
 import SelectController from "./lib/rbui/select/select_controller";
 import SelectItemController from "./lib/rbui/select/select_item_controller";
-import AccordionController from "./lib/rbui/accordion/accordion_controller";
 
 // Register all controllers
+application.register("rbui--accordion", AccordionController);
 application.register("rbui--combobox", ComboboxController);
 application.register("rbui--combobox-content", ComboboxContentController);
 application.register("rbui--combobox-item", ComboboxItemController);
+application.register("rbui--form-field", FormFieldController);
 application.register("rbui--theme-toggle", ThemeToggleController);
 application.register("rbui--tooltip", TooltipController);
 application.register("rbui--select", SelectController);
 application.register("rbui--select-item", SelectItemController);
-application.register("rbui--accordion", AccordionController);
 
 // Export all controllers so user of npm package can lazy load controllers
+export { default as AccordionController } from "./lib/rbui/accordion/accordion_controller";
 export { default as ComboboxController } from "./lib/rbui/combobox/combobox_controller";
 export { default as ComboboxContentController } from "./lib/rbui/combobox/combobox_content_controller";
 export { default as ComboboxItemController } from "./lib/rbui/combobox/combobox_item_controller";
+export { default as FormFieldController } from "./lib/rbui/form/form_field_controller";
 export { default as ThemeToggleController } from "./lib/rbui/theme_toggle/theme_toggle_controller";
 export { default as TooltipController } from "./lib/rbui/tooltip/tooltip_controller";
 export { default as SelectController } from "./lib/rbui/select/select_controller";
 export { default as SelectItemController } from "./lib/rbui/select/select_item_controller";
-export { default as AccordionController } from "./lib/rbui/accordion/accordion_controller";
 
 // Export application
 export { application };

lib/phlex_ui/checkbox.rb → lib/rbui/checkbox/checkbox.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module PhlexUI
+module RBUI
   class Checkbox < Base
     def view_template
       input(**attrs)
@@ -11,6 +11,10 @@ def view_template
     def default_attrs
       {
         type: "checkbox",
+        data: {
+          rbui__form_field_target: "input",
+          action: "input->rbui--form-field#onInput invalid->rbui--form-field#onInvalid"
+        },
         class: "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 accent-primary"
       }
     end

lib/rbui/combobox/combobox_controller.js

@@ -22,7 +22,9 @@ export default class extends Controller {
     this.cleanup();
   }
 
-  onTriggerClick() {
+  onTriggerClick(event) {
+    event.preventDefault();
+
     if (this.openValue) {
       this.#closeContent();
     } else {
@@ -97,7 +99,7 @@ export default class extends Controller {
     this.triggerTarget.setAttribute("aria-activedescendant", true);
     this.itemTargets.forEach((item) => item.removeAttribute("aria-current"));
 
-    this.triggerTarget.focus();
+    this.triggerTarget.focus({ preventScroll: true });
   }
 
   #openContent() {
@@ -106,7 +108,7 @@ export default class extends Controller {
     this.triggerTarget.setAttribute("aria-expanded", true);
 
     this.#findAndSetCurrentAndActiveDescendant();
-    this.searchTarget.focus();
+    this.searchTarget.focus({ preventScroll: true });
   }
 
   #findAndSetCurrentAndActiveDescendant() {

lib/rbui/combobox/combobox_input.rb

@@ -12,7 +12,9 @@ def default_attrs
       {
         class: "hidden",
         data: {
-          rbui__combobox_target: "input"
+          rbui__combobox_target: "input",
+          rbui__form_field_target: "input",
+          action: "change->rbui--form-field#onChange invalid->rbui--form-field#onInvalid"
         }
       }
     end

lib/phlex_ui/form.rb → lib/rbui/form/form.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module PhlexUI
+module RBUI
   class Form < Base
     def view_template(&)
       form(**attrs, &)

lib/phlex_ui/form/form_item.rb → lib/rbui/form/form_field.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
-module PhlexUI
-  class FormItem < Base
+module RBUI
+  class FormField < Base
     def view_template(&)
       div(**attrs, &)
     end
@@ -10,6 +10,9 @@ def view_template(&)
 
     def default_attrs
       {
+        data: {
+          controller: "rbui--form-field"
+        },
         class: "space-y-2"
       }
     end

lib/rbui/form/form_field_controller.js

@@ -0,0 +1,81 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ['input', 'message']
+  static values = { shouldValidate: false }
+
+
+  connect() {
+    if (this.messageTarget.textContent) {
+      this.shouldValidateValue = true;
+    }
+  }
+
+  onInvalid(error) {
+    error.preventDefault();
+
+    this.shouldValidateValue = true;
+    this.#setErrorMessage();
+  }
+
+  onInput() {
+    this.#setErrorMessage();
+  }
+
+  onChange() {
+    this.#setErrorMessage();
+  }
+
+  #setErrorMessage() {
+    if (!this.shouldValidateValue) return;
+
+    if (this.inputTarget.validity.valid) {
+      this.messageTarget.textContent = '';
+    } else {
+      this.messageTarget.textContent = this.#getValidationMessage();
+    }
+  }
+
+  #getValidationMessage() {
+    const input = this.inputTarget;
+    const defaultMessage = this.inputTarget.validationMessage;
+
+    if (input.validity.valueMissing) {
+      return input.dataset.valueMissing || defaultMessage;
+    }
+
+    if (input.validity.badInput) {
+      return input.dataset.badInput || defaultMessage;
+    }
+
+    if (input.validity.patternMismatch) {
+      return input.dataset.patternMismatch || defaultMessage;
+    }
+
+    if (input.validity.rangeOverflow) {
+      return input.dataset.rangeOverflow || defaultMessage;
+    }
+
+    if (input.validity.rangeUnderflow) {
+      return input.dataset.rangeUnderflow || defaultMessage;
+    }
+
+    if (input.validity.stepMismatch) {
+      return input.dataset.stepMismatch || defaultMessage;
+    }
+
+    if (input.validity.tooLong) {
+      return input.dataset.tooLong || defaultMessage;
+    }
+
+    if (input.validity.tooShort) {
+      return input.dataset.tooShort || defaultMessage;
+    }
+
+    if (input.validity.typeMismatch) {
+      return input.dataset.typeMismatch || defaultMessage;
+    }
+
+    return defaultMessage;
+  }
+}

lib/rbui/form/form_field_error.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RBUI
+  class FormFieldError < Base
+    def view_template(&)
+      p(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          rbui__form_field_target: "message"
+        },
+        class: "text-sm font-medium text-destructive"
+      }
+    end
+  end
+end

lib/phlex_ui/input_error.rb → lib/rbui/form/form_field_hint.rb

@@ -1,17 +1,15 @@
 # frozen_string_literal: true
 
-module PhlexUI
-  class InputError < Base
+module RBUI
+  class FormFieldHint < Base
     def view_template(&)
       p(**attrs, &)
     end
 
     private
 
     def default_attrs
-      {
-        class: "mt-2 text-sm text-destructive"
-      }
+      {class: "text-sm text-muted-foreground"}
     end
   end
 end

lib/rbui/form/form_field_label.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RBUI
+  class FormFieldLabel < Base
+    def view_template(&)
+      label(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"}
+    end
+  end
+end

lib/rbui/input/input.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RBUI
+  class Input < Base
+    def initialize(type: :string, **attrs)
+      @type = type.to_sym
+      super(**attrs)
+    end
+
+    def view_template
+      input(type: @type, **attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          rbui__form_field_target: "input",
+          action: "input->rbui--form-field#onInput invalid->rbui--form-field#onInvalid"
+        },
+        class: "flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50"
+      }
+    end
+  end
+end

lib/rbui/select/select_input.rb

@@ -12,7 +12,9 @@ def default_attrs
       {
         class: "hidden",
         data: {
-          rbui__select_target: "input"
+          rbui__select_target: "input",
+          rbui__form_field_target: "input",
+          action: "change->rbui--form-field#onChange invalid->rbui--form-field#onInvalid"
         }
       }
     end

test/phlex_ui/calendar_test.rb

@@ -7,7 +7,7 @@ class PhlexUI::CalendarTest < Minitest::Test
 
   def test_render_with_all_items
     output = phlex_context do
-      PhlexUI.Input(type: "string", placeholder: "Select a date", class: "rounded-md border shadow", id: "date", data_controller: "input")
+      RBUI.Input(type: "string", placeholder: "Select a date", class: "rounded-md border shadow", id: "date", data_controller: "input")
       PhlexUI.Calendar(input_id: "#date", class: "rounded-md border shadow")
     end