format and sanitize zip, postal, ssn, and currency

Lsimmons98 · markdoeswork · commit 03619a721c7a · 2025-01-14T15:12:23.000-05:00
Add mask doc example

pbenhanced setup

Add masking with just javascript

Change md

Update readme again
diff --git a/playbook/app/entrypoints/playbook-rails.js b/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'
diff --git a/playbook/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb b/playbook/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb
@@ -0,0 +1,50 @@
+
+
+
+<%= pb_rails("title", props: { text: "Input Masks", size: 4, margin_bottom: "md" }) %>
+
+<div class="pb--doc-demo-elements">
+  <%= pb_rails("text_input", props: {
+    label: "Currency",
+    mask: "currency",
+    margin_bottom: "md",
+    name: "currency_name"
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "ZIP Code",
+    mask: "zip_code",
+    margin_bottom: "md",
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "Postal Code",
+    mask: "postal_code",
+    placeholder: "12345-6789",
+    margin_bottom: "md",
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "Social Security Number",
+    mask: "ssn",
+    margin_bottom: "md",
+  }) %>
+
+  <%= 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"
+  }) %>
+
+<style>
+#example-currency-sanitized {display: flex !important;}
+</style>
+
+</div>
diff --git a/playbook/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask_rails.md b/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}"`
diff --git a/playbook/app/pb_kits/playbook/pb_text_input/docs/example.yml b/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: ""
diff --git a/playbook/app/pb_kits/playbook/pb_text_input/index.js b/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);
+  });
+}
diff --git a/playbook/app/pb_kits/playbook/pb_text_input/text_input.html.erb b/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 %>
+
diff --git a/playbook/app/pb_kits/playbook/pb_text_input/text_input.rb b/playbook/app/pb_kits/playbook/pb_text_input/text_input.rb
@@ -4,6 +4,22 @@
 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
+
+      MASK_PLACEHOLDERS = {
+        "currency" => "$0.00",
+        "zip_code" => "12345",
+        "postal_code" => "12345-6789",
+        "ssn" => "123-45-6789",
+      }.freeze
+
       prop :autocomplete, type: Playbook::Props::Boolean,
                           default: true
       prop :disabled, type: Playbook::Props::Boolean,
@@ -25,6 +41,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 +65,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 +78,13 @@ def all_input_options
           data: validation_data,
           disabled: disabled,
           id: input_options.dig(:id) || id,
-          name: name,
-          pattern: validation_pattern,
-          placeholder: placeholder,
+          name: mask.present? ? "" : name,
+          pattern: validation_pattern || mask_pattern,
+          placeholder: placeholder || mask_placeholder,
           required: required,
           type: type,
           value: value,
+          mask: mask,
         }.merge(input_options)
       end
 
@@ -75,7 +99,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 +109,25 @@ 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
+
+      def mask_placeholder
+        return nil unless mask
+
+        MASK_PLACEHOLDERS[mask]
+      end
     end
   end
 end

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+The mask prop lets you style your inputs while maintaining the value that the user typed in.`
	`2`	`+`
	`3`	+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}"`