@pagamio/frontend-commons-lib 0.8.260 → 0.8.262

package/lib/components/ui/PhoneInput.d.ts

@@ -3,7 +3,6 @@ import 'react-phone-number-input/style.css';
 import React from 'react';
 import type { InputProps } from '../../form-engine';
 interface PhoneInputSpecificProps {
-    onCountryChange?: (country: Country) => void;
     defaultCountry?: Country;
 }
 type PhoneInputProps = InputProps & PhoneInputSpecificProps;

package/lib/components/ui/PhoneInput.js

@@ -1,26 +1,23 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ParseError, isPossiblePhoneNumber, parsePhoneNumberWithError } from 'libphonenumber-js';
-import ReachPhoneNumberInput from 'react-phone-number-input';
+import PhoneNumberInput from 'react-phone-number-input';
 import 'react-phone-number-input/style.css';
-import React, { useState } from 'react';
-const PhoneInput = React.forwardRef(({ field, error, onChange, onBlur, value, onCountryChange, ...props }, ref) => {
+import React, { useCallback, useState } from 'react';
+const PhoneInput = React.forwardRef(({ field, error, onChange, onBlur, value }, _ref) => {
+    const defaultCountry = field.defaultCountry ?? 'ZA';
     const [isTouched, setIsTouched] = useState(false);
     const [localError, setLocalError] = useState(null);
-    const defaultCountry = field.defaultCountry ?? 'ZA';
     const isValid = !value || isPossiblePhoneNumber(value);
-    const handleChange = (newValue) => {
+    const handleChange = useCallback((newValue) => {
         onChange?.(newValue);
         setLocalError(null);
         if (newValue) {
             try {
-                const phoneNumber = parsePhoneNumberWithError(newValue, { defaultCountry });
-                if (phoneNumber && onCountryChange) {
-                    onCountryChange(phoneNumber.country);
-                }
+                parsePhoneNumberWithError(newValue, { defaultCountry });
             }
-            catch (error) {
-                if (error instanceof ParseError) {
-                    switch (error.message) {
+            catch (parseError) {
+                if (parseError instanceof ParseError) {
+                    switch (parseError.message) {
                         case 'NOT_A_NUMBER':
                             setLocalError('Please enter a valid phone number.');
                             break;
@@ -37,22 +34,18 @@ const PhoneInput = React.forwardRef(({ field, error, onChange, onBlur, value, on
                             setLocalError('Invalid phone number.');
                     }
                 }
-                else {
-                    console.error('Unexpected error:', error);
-                }
             }
         }
-    };
-    const handleBlur = () => {
+    }, [onChange, defaultCountry]);
+    const handleBlur = useCallback(() => {
         setIsTouched(true);
         onBlur?.();
-    };
-    return (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-foreground", children: field.label }), _jsx(ReachPhoneNumberInput, { international: true, defaultCountry: defaultCountry, value: value || '', onChange: handleChange, id: field.name, onBlur: handleBlur, placeholder: field.placeholder, numberInputProps: {
-                    className: `mt-1 block w-full p-2 border rounded-md shadow-sm 
+    }, [onBlur]);
+    return (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-foreground", children: field.label }), _jsx(PhoneNumberInput, { international: true, defaultCountry: defaultCountry, value: value || undefined, onChange: handleChange, id: field.name, onBlur: handleBlur, placeholder: field.placeholder, numberInputProps: {
+                    className: `mt-1 block w-full p-2 border rounded-md shadow-sm
               ${error || localError ? 'border-red-500' : 'border-input'}
               ${field.disabled ? 'text-muted-foreground bg-muted' : ''}`,
                     disabled: field.disabled,
-                    ref: ref,
-                }, ...props }), (error || localError || (!isValid && isTouched)) && (_jsx("p", { className: "mt-2 text-sm text-red-500", children: error?.message ?? localError ?? 'Please enter a valid phone number' }))] }));
+                } }), (error || localError || (!isValid && isTouched)) && (_jsx("p", { className: "mt-2 text-sm text-red-500", children: error?.message ?? localError ?? 'Please enter a valid phone number' }))] }));
 });
 export default PhoneInput;

package/lib/form-engine/components/inputs/color-input/ColorInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { InputProps } from '../../../types';
+declare const ColorInput: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default ColorInput;

package/lib/form-engine/components/inputs/color-input/ColorInput.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ColorInput as MantineColorInput } from '@mantine/core';
+import React from 'react';
+const ColorInput = React.forwardRef(({ field, error, value, onChange, ...props }, ref) => {
+    return (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-foreground", children: field.label }), _jsx(MantineColorInput, { ref: ref, id: field.name, value: value || '', onChange: (color) => onChange(color), disabled: field.disabled, placeholder: field.placeholder || 'Pick a color', format: "hex", swatches: [
+                    '#25262b',
+                    '#868e96',
+                    '#fa5252',
+                    '#e64980',
+                    '#be4bdb',
+                    '#7950f2',
+                    '#4c6ef5',
+                    '#228be6',
+                    '#15aabf',
+                    '#12b886',
+                    '#40c057',
+                    '#82c91e',
+                    '#fab005',
+                    '#fd7e14',
+                ], error: error?.message, className: "mt-1" })] }));
+});
+export default ColorInput;

package/lib/form-engine/components/inputs/color-input/index.d.ts

@@ -0,0 +1 @@
+export { default as ColorInput } from './ColorInput';

package/lib/form-engine/components/inputs/color-input/index.js

@@ -0,0 +1 @@
+export { default as ColorInput } from './ColorInput';

package/lib/form-engine/registry/RegisterComponents.js

@@ -31,9 +31,10 @@ export const setupInputRegistry = async () => {
     return getRegistryPromise();
 };
 const doSetup = async () => {
-    const [{ default: CardExpiryInput }, { default: CheckboxInput }, { default: CreditCardInput }, { default: DateInput }, { default: EmailInput }, { default: LabelInput }, { default: MultiSelectInputComponent }, { default: NumberInput }, { default: PasswordInput }, { default: RadioInput }, { default: SelectInput }, { default: TextareaInputFW }, { default: TimeInput }, { default: ToggleSwitchInput }, { default: UploadFieldForm }, { default: PhoneInput },] = await Promise.all([
+    const [{ default: CardExpiryInput }, { default: CheckboxInput }, { default: ColorInput }, { default: CreditCardInput }, { default: DateInput }, { default: EmailInput }, { default: LabelInput }, { default: MultiSelectInputComponent }, { default: NumberInput }, { default: PasswordInput }, { default: RadioInput }, { default: SelectInput }, { default: TextareaInputFW }, { default: TimeInput }, { default: ToggleSwitchInput }, { default: UploadFieldForm }, { default: PhoneInput },] = await Promise.all([
         import('../components/inputs/card-expiry-input/CardExpiryInput'),
         import('../components/inputs/checkbox-input/CheckboxInput'),
+        import('../components/inputs/color-input/ColorInput'),
         import('../components/inputs/credit-card-input/CreditCardInput'),
         import('../components/inputs/date-input/DateInput'),
         import('../components/inputs/email-input/EmailInput'),
@@ -51,6 +52,7 @@ const doSetup = async () => {
     ]);
     registerInput('card-expiry-input', CardExpiryInput);
     registerInput('checkbox', CheckboxInput);
+    registerInput('color', ColorInput);
     registerInput('credit-card', CreditCardInput);
     registerInput('date', DateInput);
     registerInput('email', EmailInput);

package/lib/form-engine/types/index.d.ts

@@ -130,7 +130,7 @@ export interface DependencyValidation {
 /**
  * Available field types supported by the form engine
  */
-export type FieldType = 'card-expiry-input' | 'checkbox' | 'credit-card' | 'date' | 'email' | 'file' | 'multi-select' | 'number' | 'password' | 'radio' | 'searchable-multi-select' | 'select' | 'switch' | 'tel' | 'text' | 'textarea' | 'time';
+export type FieldType = 'card-expiry-input' | 'checkbox' | 'color' | 'credit-card' | 'date' | 'email' | 'file' | 'multi-select' | 'number' | 'password' | 'radio' | 'searchable-multi-select' | 'select' | 'switch' | 'tel' | 'text' | 'textarea' | 'time';
 /**
  * Defines the structure of a form field
  */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.260",
+  "version": "0.8.262",
   "publishConfig": {
     "access": "public",
     "provenance": false