From ee805deaf5aa759569b018a5d1feebb09f48170d Mon Sep 17 00:00:00 2001 From: Liam Simmons Date: Fri, 10 Jan 2025 09:02:58 -0500 Subject: [PATCH] pbenhanced setup --- playbook/app/entrypoints/playbook-rails.js | 3 ++ .../playbook/pb_text_input/docs/example.yml | 3 +- .../pb_kits/playbook/pb_text_input/index.js | 18 +++++++ .../playbook/pb_text_input/text_input.rb | 48 +++++++++++++++++-- 4 files changed, 67 insertions(+), 5 deletions(-) create mode 100644 playbook/app/pb_kits/playbook/pb_text_input/index.js diff --git a/playbook/app/entrypoints/playbook-rails.js b/playbook/app/entrypoints/playbook-rails.js index 7c73e41eb8..062e049169 100644 --- a/playbook/app/entrypoints/playbook-rails.js +++ b/playbook/app/entrypoints/playbook-rails.js @@ -53,6 +53,9 @@ PbRadio.start() import PbDraggable from 'kits/pb_draggable' PbDraggable.start() +import PbTextInput from 'kits/pb_text_input' +PbTextInput.start() + import 'flatpickr' // React-Rendered Rails Kits ===== 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 index 7c7fcd7991..e29e75c84d 100755 --- 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: "" \ No newline at end of file + - 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 new file mode 100644 index 0000000000..1f5f8d7bd6 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_text_input/index.js @@ -0,0 +1,18 @@ +import PbEnhancedElement from '../pb_enhanced_element' + + + +export default class PbTextInput extends PbEnhancedElement { + static get selector() { + return '[data-pb-text-input-kit]' + } + + connect() { + console.log('PbTextInput connected') + } + + + + + +} 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 index 8778c3666d..1044f718e3 100755 --- 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,7 +41,8 @@ class TextInput < Playbook::KitBase prop :add_on, type: Playbook::Props::NestedProps, nested_kit: Playbook::PbTextInput::AddOn - prop :mask + prop :mask, type: Playbook::Props::String, + default: nil def classname default_margin_bottom = margin_bottom.present? ? "" : " mb_sm" @@ -58,8 +75,8 @@ def all_input_options disabled: disabled, id: input_options.dig(:id) || id, name: mask.present? ? "" : name, - pattern: validation_pattern, - placeholder: placeholder, + pattern: validation_pattern || mask_pattern, + placeholder: placeholder || mask_placeholder, required: required, type: type, value: value, @@ -71,9 +88,13 @@ def validation_message validation[:message] || "" end + def validation_pattern + validation[:pattern] || nil + end + def validation_data fields = input_options.dig(:data) || {} - fields[:message] = wvalidation_message unless validation_message.blank? + fields[:message] = validation_message unless validation_message.blank? fields end @@ -84,6 +105,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