[PLAY-1772] Rails input masking (#4127)

Runway https://runway.powerhrg.com/backlog_items/PLAY-1772
Original Branch had unverified commits
https://github.com/powerhome/playbook/pull/4114/commits

Adds input masking to the text input so that there are dashes and commas
and all other sorts of patterns in the ui for

currency 
social security number
zip code
postal code

I put all the javascript for the masking logic in `index.js` in the
kit's folder

**How to test?** Steps to confirm the desired behavior:
1. Go to
https://pr4127.playbook.beta.px.powerapp.cloud/kits/text_input/rails#mask
2. Type into the text inputs 


![screenshot-pr4127_playbook_beta_px_powerapp_cloud-2025_01_15-12_26_12](https://github.com/user-attachments/assets/824ca8e0-82ad-4b4a-9094-8bdb3ca47281)

---------

Co-authored-by: Liam Simmons <[email protected]>

Author: markdoeswork

playbook/app/entrypoints/playbook-rails.js

@@ -1,3 +1,7 @@
+// Text Input
+import PbTextInput from 'kits/pb_text_input'
+PbTextInput.start()
+
 // Forms
 import 'kits/pb_form/pb_form_validation'
 import formHelper from 'kits/pb_form/formHelper'

playbook/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb

@@ -0,0 +1,46 @@
+  <%= pb_rails("text_input", props: {
+    label: "Currency",
+    mask: "currency",
+    margin_bottom: "md",
+    name: "currency_name",
+    placeholder:"$0.00"
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "ZIP Code",
+    mask: "zip_code",
+    margin_bottom: "md",
+    placeholder: "12345"
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "Postal Code",
+    mask: "postal_code",
+    placeholder: "12345-6789",
+    margin_bottom: "md",
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "SSN",
+    mask: "ssn",
+    margin_bottom: "md",
+    placeholder: "123-45-6789"
+  }) %>
+
+  <%= pb_rails("title" , props: {
+    text: "Hidden Input Under The Hood",
+    padding_bottom: "sm"
+  })%>
+
+  <%= pb_rails("text_input", props: {
+    label: "Currency",
+    mask: "currency",
+    margin_bottom: "md",
+    name: "currency_name",
+    id: "example-currency",
+    placeholder: "$0.00",
+  }) %>
+
+<style>
+#example-currency-sanitized {display: flex !important;}
+</style>

playbook/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask_rails.md

@@ -0,0 +1,3 @@
+The mask prop lets you style your inputs while maintaining the value that the user typed in.
+
+It uses a hidden input field to submit the unformatted value as it will have the proper `name` attribute. It will also copy the id field with a `"#{your-id-sanitized}"`

playbook/app/pb_kits/playbook/pb_text_input/docs/example.yml

@@ -8,6 +8,7 @@ examples:
   - text_input_inline: Inline
   - text_input_no_label: No Label
   - text_input_options: Input Options
+  - text_input_mask: Mask
   react:
   - text_input_default: Default
   - text_input_error: With Error
@@ -23,4 +24,4 @@ examples:
     - text_input_error_swift: With Error
     - text_input_disabled_swift: Disabled
     - text_input_add_on_swift: Add On
-    - text_input_props_swift: ""
+    - text_input_props_swift: ""

playbook/app/pb_kits/playbook/pb_text_input/index.js

@@ -0,0 +1,103 @@
+export default class PbTextInput {
+  static start() {
+    const inputElements = document.querySelectorAll('[data-pb-input-mask="true"]');
+
+    inputElements.forEach((inputElement) => {
+      inputElement.addEventListener("input", (event) => {
+        const maskType = inputElement.getAttribute("mask");
+        const cursorPosition = inputElement.selectionStart;
+
+        let rawValue = event.target.value;
+        let formattedValue = rawValue;
+
+        // Apply formatting based on the mask type
+        switch (maskType) {
+          case "currency":
+            formattedValue = formatCurrency(rawValue);
+            break;
+          case "ssn":
+            formattedValue = formatSSN(rawValue);
+            break;
+          case "postal_code":
+            formattedValue = formatPostalCode(rawValue);
+            break;
+          case "zip_code":
+            formattedValue = formatZipCode(rawValue);
+            break;
+        }
+
+        // Update the sanitized input field in the same wrapper
+        const sanitizedInput = inputElement
+          .closest(".text_input_wrapper")
+          ?.querySelector('[data="sanitized-pb-input"]');
+
+        if (sanitizedInput) {
+          switch (maskType) {
+            case "ssn":
+              sanitizedInput.value = sanitizeSSN(formattedValue);
+              break;
+            case "currency":
+              sanitizedInput.value = sanitizeCurrency(formattedValue);
+              break;
+            default:
+              sanitizedInput.value = formattedValue; 
+          }
+        }
+
+        inputElement.value = formattedValue;
+        setCursorPosition(inputElement, cursorPosition, rawValue, formattedValue);
+      });
+    });
+
+  }
+}
+
+function formatCurrency(value) {
+  const numericValue = value.replace(/[^0-9]/g, "").slice(0, 15);
+
+  if (!numericValue) return "";
+
+  const dollars = parseFloat((parseInt(numericValue) / 100).toFixed(2));
+  if (dollars === 0) return "";
+
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    maximumFractionDigits: 2,
+  }).format(dollars);
+}
+
+function formatSSN(value) {
+  const cleaned = value.replace(/\D/g, "").slice(0, 9);
+  return cleaned
+    .replace(/(\d{5})(?=\d)/, "$1-")
+    .replace(/(\d{3})(?=\d)/, "$1-");
+}
+
+function formatZipCode(value) {
+  return value.replace(/\D/g, "").slice(0, 5);
+}
+
+function formatPostalCode(value) {
+  const cleaned = value.replace(/\D/g, "").slice(0, 9);
+  return cleaned.replace(/(\d{5})(?=\d)/, "$1-");
+}
+
+function sanitizeSSN(input) {
+  return input.replace(/\D/g, ""); 
+}
+
+function sanitizeCurrency(input) {
+  return input.replace(/[$,]/g, ""); 
+}
+
+// function to set cursor position
+function setCursorPosition(inputElement, cursorPosition, rawValue, formattedValue) {
+  const difference = formattedValue.length - rawValue.length;
+
+  const newPosition = Math.max(0, cursorPosition + difference);
+
+  requestAnimationFrame(() => {
+    inputElement.setSelectionRange(newPosition, newPosition);
+  });
+}

playbook/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -13,9 +13,13 @@
       <%= pb_rails("text_input/add_on", props: object.add_on_props) do %>
         <%= input_tag %>
       <% end %>
+    <% elsif mask.present? %>
+      <%= input_tag %>
+      <%= tag(:input, data: "sanitized-pb-input", id: sanitized_id, name: object.name, style: "display: none;") %>
     <% else %>
       <%= input_tag %>
     <% end %>
     <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) if object.error %>
   <% end %>
 <% end %>
+

playbook/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -4,6 +4,15 @@
 module Playbook
   module PbTextInput
     class TextInput < Playbook::KitBase
+      VALID_MASKS = %w[currency zipCode postalCode ssn].freeze
+
+      MASK_PATTERNS = {
+        "currency" => '^\$\d{1,3}(?:,\d{3})*(?:\.\d{2})?$',
+        "zip_code" => '\d{5}',
+        "postal_code" => '\d{5}-\d{4}',
+        "ssn" => '\d{3}-\d{2}-\d{4}',
+      }.freeze
+
       prop :autocomplete, type: Playbook::Props::Boolean,
                           default: true
       prop :disabled, type: Playbook::Props::Boolean,
@@ -25,6 +34,9 @@ class TextInput < Playbook::KitBase
       prop :add_on, type: Playbook::Props::NestedProps,
                     nested_kit: Playbook::PbTextInput::AddOn
 
+      prop :mask, type: Playbook::Props::String,
+                  default: nil
+
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
         generate_classname("pb_text_input_kit") + default_margin_bottom + error_class + inline_class
@@ -46,6 +58,10 @@ def add_on_props
         { dark: dark }.merge(add_on || {})
       end
 
+      def sanitized_id
+        "#{object.id}-sanitized" if id.present?
+      end
+
     private
 
       def all_input_options
@@ -55,12 +71,13 @@ def all_input_options
           data: validation_data,
           disabled: disabled,
           id: input_options.dig(:id) || id,
-          name: name,
-          pattern: validation_pattern,
+          name: mask.present? ? "" : name,
+          pattern: validation_pattern || mask_pattern,
           placeholder: placeholder,
           required: required,
           type: type,
           value: value,
+          mask: mask,
         }.merge(input_options)
       end
 
@@ -75,7 +92,7 @@ def validation_pattern
       def validation_data
         fields = input_options.dig(:data) || {}
         fields[:message] = validation_message unless validation_message.blank?
-        fields
+        mask ? fields.merge(pb_input_mask: true) : fields
       end
 
       def error_class
@@ -85,6 +102,19 @@ def error_class
       def inline_class
         inline ? " inline" : ""
       end
+
+      def mask_data
+        return {} unless mask
+        raise ArgumentError, "mask must be one of: #{VALID_MASKS.join(', ')}" unless VALID_MASKS.include?(mask)
+
+        { mask: mask }
+      end
+
+      def mask_pattern
+        return nil unless mask
+
+        MASK_PATTERNS[mask]
+      end
     end
   end
 end

playbook/spec/pb_kits/playbook/kits/text_input_spec.rb

@@ -16,6 +16,7 @@
   it { is_expected.to define_prop(:value) }
   it { is_expected.to define_prop(:type).with_default("text") }
   it { is_expected.to define_hash_prop(:input_options).with_default({}) }
+  it { is_expected.to define_prop(:mask).with_default(nil) }
 
   describe "#classname" do
     it "returns namespaced class name", :aggregate_failures do
@@ -28,4 +29,26 @@
       expect(subject.new({ margin_bottom: "lg" }).classname).to eq "pb_text_input_kit mb_lg"
     end
   end
+
+  describe "#mask" do
+    context "with a valid mask" do
+      it "sets data-pb-input-mask attribute and mask prop" do
+        text_input = subject.new(mask: "currency")
+        expect(text_input.input_tag).to include('data-pb-input-mask="true"')
+        expect(text_input.input_tag).to include('mask="currency"')
+      end
+
+      it "sets the correct pattern for currency" do
+        text_input = subject.new(mask: "currency")
+        expect(text_input.input_tag).to include('pattern="^\\$\\d{1,3}(?:,\\d{3})*(?:\\.\\d{2})?$"')
+      end
+    end
+
+    context "without a mask" do
+      it "does not set data-pb-input-mask" do
+        text_input = subject.new(mask: nil)
+        expect(text_input.input_tag).not_to include("data-pb-input-mask")
+      end
+    end
+  end
 end