@zealicsolutions/web-ui 0.3.14 → 0.3.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,6 +3,7 @@ import { InputFieldTypes } from 'fieldsConfiguration/types';
3
3
  import React from 'react';
4
4
  import { ThemeColors } from 'theme/types';
5
5
  import type { Callback, StylesType } from 'typescript';
6
+ import { MaskConfig } from './helpers';
6
7
  export declare type InputFieldInternalConfigProps = Partial<{
7
8
  textColor: ThemeColors | string;
8
9
  textFontSize: number;
@@ -31,5 +32,6 @@ export declare type InputProps = {
31
32
  onChange?: (value: string) => void;
32
33
  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
33
34
  internalConfig?: InputFieldInternalConfigProps;
35
+ config?: MaskConfig;
34
36
  };
35
- export declare const Input: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, ...rest }: InputProps) => JSX.Element;
37
+ export declare const Input: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, config, ...rest }: InputProps) => JSX.Element;
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/react';
3
3
  import { InputProps } from './Input';
4
4
  declare const _default: {
5
5
  title: string;
6
- component: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, ...rest }: InputProps) => JSX.Element;
6
+ component: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, config, ...rest }: InputProps) => JSX.Element;
7
7
  };
8
8
  export default _default;
9
9
  export declare const Input: StoryFn<InputProps>;
@@ -0,0 +1,18 @@
1
+ import { MaskedInputProps } from 'react-text-mask';
2
+ import { HTMLInputTypeAttribute } from 'react';
3
+ import { ThemeColors } from 'theme';
4
+ import { InputProps } from 'atoms';
5
+ import { InputFieldTypes } from '../../fieldsConfiguration';
6
+ export declare type MaskConfig = Partial<{
7
+ maskPlaceholder: string;
8
+ dataModelFieldType: InputFieldTypes;
9
+ maskPattern: Array<string | RegExp>;
10
+ }>;
11
+ export declare const getSpecificInputProps: (type: InputFieldTypes) => {
12
+ type?: HTMLInputTypeAttribute | undefined;
13
+ inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
14
+ };
15
+ export declare const getMaskInputProps: (type?: InputFieldTypes, config?: MaskConfig) => Pick<MaskedInputProps, 'pipe' | 'mask' | 'placeholder' | 'keepCharPositions'>;
16
+ export declare const getInputIconColor: ({ isEditMode, isFocused, isError, disabled, }: Pick<InputProps, "disabled" | "isError" | "isEditMode"> & {
17
+ isFocused: boolean;
18
+ }) => ThemeColors;
@@ -1,10 +1,12 @@
1
1
  /// <reference types="react" />
2
2
  import { ThemeColors } from 'theme';
3
- import type { Callback, StylesType } from 'typescript';
3
+ import type { AnyObject, Callback, StylesType } from 'typescript';
4
4
  import { RefCallBack } from 'react-hook-form/dist/types';
5
5
  export declare type SelectOption = {
6
6
  id: string;
7
7
  label: string;
8
+ value?: string;
9
+ config?: AnyObject;
8
10
  };
9
11
  export declare type SelectInternalConfigurationOptions = {
10
12
  placeholderTextColor: ThemeColors | string;
@@ -2,7 +2,7 @@
2
2
  import { ControllerProps } from 'react-hook-form';
3
3
  import { SelectOption } from 'atoms';
4
4
  import { InputFieldProps, SelectFieldProps } from 'molecules';
5
- export declare type InputFieldTypes = 'phone-number' | 'text' | 'email' | 'password' | 'numerical' | 'any';
5
+ export declare type InputFieldTypes = 'phone-number' | 'text' | 'email' | 'password' | 'numerical' | 'month_year_date' | 'day_month_year_date' | 'month_day_year_date' | 'us_zip_code' | 'any';
6
6
  export declare type FieldTypes = 'input' | 'select' | 'checkbox';
7
7
  export declare type UIField<T = string> = (UIInputField & UISelectField & UICheckboxField) & {
8
8
  name: T;
@@ -5,4 +5,11 @@ export declare const phoneNumberValidation: RegExp;
5
5
  export declare const numberValidation: RegExp;
6
6
  export declare const emailValidation: RegExp;
7
7
  export declare const textValidation: RegExp;
8
+ export declare const dateValidation: RegExp;
9
+ export declare const usZipCode: RegExp;
8
10
  export declare const getInputValidation: (type?: InputFieldTypes) => ValidationRule<RegExp> | undefined;
11
+ export declare const postCodeMask: RegExp[];
12
+ export declare const dayMonthYearDateMask: (string | RegExp)[];
13
+ export declare const monthYearDateMask: (string | RegExp)[];
14
+ export declare const phoneNumberMask: (string | RegExp)[];
15
+ export declare const removeMaskFromString: (inputString: string) => string;
package/dist/index.d.ts CHANGED
@@ -5,20 +5,22 @@ import * as styled_components from 'styled-components';
5
5
  import { CSSProperties, DefaultTheme } from 'styled-components';
6
6
  import { ThemeColors as ThemeColors$1, SizesTypes as SizesTypes$1, FontSizesTypes as FontSizesTypes$2 } from 'theme';
7
7
  import * as typescript from 'typescript';
8
- import { StylesType, Callback as Callback$1, OverrideStyles, StyledTransientProps, Nullable, AnyObject, StrictUnion } from 'typescript';
8
+ import { StylesType, AnyObject, Callback as Callback$1, OverrideStyles, StyledTransientProps, Nullable, StrictUnion } from 'typescript';
9
9
  import { RefCallBack, Control as Control$1, ControllerProps as ControllerProps$1 } from 'react-hook-form/dist/types';
10
10
  import { IconNames as IconNames$1 } from 'atoms/Icon/Icon';
11
- import { InputFieldTypes as InputFieldTypes$1, FieldTypes as FieldTypes$1, UIFields as UIFields$2 } from 'fieldsConfiguration/types';
11
+ import { FieldTypes as FieldTypes$1, UIFields as UIFields$1, InputFieldTypes as InputFieldTypes$1 } from 'fieldsConfiguration/types';
12
12
  import { ThemeColors as ThemeColors$2, FontSizesTypes as FontSizesTypes$1, SizesTypes as SizesTypes$2, BreakpointSizesTypes as BreakpointSizesTypes$1 } from 'theme/types';
13
- import { BaseButtonProps as BaseButtonProps$1, MenuItem as MenuItem$1, HeroImageProps as HeroImageProps$1, ColumnsProps as ColumnsProps$1, EmphasizedTextProps as EmphasizedTextProps$1, TabGroupProps as TabGroupProps$1, AvatarDropdownProps as AvatarDropdownProps$1, ButtonProps as ButtonProps$1, FeedContentHeaderProps as FeedContentHeaderProps$1, AlertProps as AlertProps$1, BottomNaVBarItemProps as BottomNaVBarItemProps$1, InputFieldProps as InputFieldProps$1, SelectFieldProps as SelectFieldProps$1, FieldSectionProps as FieldSectionProps$1, MenuItemsProps as MenuItemsProps$1, ImageProps as ImageProps$1, TextMoleculeProps as TextMoleculeProps$1, AdditionalTabContainerProps as AdditionalTabContainerProps$1, RadioButtonFieldProps as RadioButtonFieldProps$1, CheckboxFieldProps as CheckboxFieldProps$1 } from 'molecules';
13
+ import * as react_hook_form from 'react-hook-form';
14
+ import { ControllerProps, DeepPartial, FieldValues, FormState, Control, UseFormReturn, ValidationMode } from 'react-hook-form';
15
+ import * as atoms from 'atoms';
16
+ import { SelectOption as SelectOption$1, TextProps as TextProps$1, IconNames as IconNames$2, TouchableOpacityProps as TouchableOpacityProps$1, AvatarProps as AvatarProps$1, TabProps as TabProps$1, RadioButtonsProps as RadioButtonsProps$1, InputProps as InputProps$1, SelectProps as SelectProps$1, RegularImageProps as RegularImageProps$1, TextButtonProps as TextButtonProps$1, TabTheme as TabTheme$1, RadioButtonInternalConfigProps as RadioButtonInternalConfigProps$1, HorizontalButtonsProps as HorizontalButtonsProps$1, IconProps as IconProps$1 } from 'atoms';
17
+ import { InputFieldProps as InputFieldProps$1, SelectFieldProps as SelectFieldProps$1, FieldSectionProps as FieldSectionProps$1, BaseButtonProps as BaseButtonProps$1, MenuItem as MenuItem$1, HeroImageProps as HeroImageProps$1, ColumnsProps as ColumnsProps$1, EmphasizedTextProps as EmphasizedTextProps$1, TabGroupProps as TabGroupProps$1, AvatarDropdownProps as AvatarDropdownProps$1, ButtonProps as ButtonProps$1, FeedContentHeaderProps as FeedContentHeaderProps$1, AlertProps as AlertProps$1, BottomNaVBarItemProps as BottomNaVBarItemProps$1, MenuItemsProps as MenuItemsProps$1, ImageProps as ImageProps$1, TextMoleculeProps as TextMoleculeProps$1, AdditionalTabContainerProps as AdditionalTabContainerProps$1, RadioButtonFieldProps as RadioButtonFieldProps$1, CheckboxFieldProps as CheckboxFieldProps$1 } from 'molecules';
14
18
  import { TooltipProps as TooltipProps$1 } from 'rc-tooltip/lib/Tooltip';
15
19
  import { WithGoogleMapProps } from 'react-google-maps/lib/withGoogleMap';
16
20
  import { WithScriptjsProps } from 'react-google-maps/lib/withScriptjs';
17
- import * as atoms from 'atoms';
18
- import { TextProps as TextProps$1, IconNames as IconNames$2, TouchableOpacityProps as TouchableOpacityProps$1, AvatarProps as AvatarProps$1, TabProps as TabProps$1, RadioButtonsProps as RadioButtonsProps$1, SelectOption as SelectOption$1, InputProps as InputProps$1, SelectProps as SelectProps$1, RegularImageProps as RegularImageProps$1, TextButtonProps as TextButtonProps$1, TabTheme as TabTheme$1, RadioButtonInternalConfigProps as RadioButtonInternalConfigProps$1, HorizontalButtonsProps as HorizontalButtonsProps$1, IconProps as IconProps$1 } from 'atoms';
19
21
  import { RadioGroup, DrawerProps as DrawerProps$1, ModalProps } from '@mui/material';
20
- import { UIFields as UIFields$1, UIField as UIField$1 } from 'fieldsConfiguration';
21
- import { MaxRuleValidation, MinRuleValidation, SetPasswordFields } from 'organisms/SetPasswordForm/types';
22
+ import { UIFields as UIFields$2, UIField as UIField$1 } from 'fieldsConfiguration';
23
+ import { SetPasswordFields, MaxRuleValidation, MinRuleValidation } from 'organisms/SetPasswordForm/types';
22
24
  import { ConsentProps as ConsentProps$1, FilteredFeedContentType as FilteredFeedContentType$1, HeroSliderProps as HeroSliderProps$1, ProcessTrackerProps as ProcessTrackerProps$1, ProcessTrackerStatus as ProcessTrackerStatus$1 } from 'organisms';
23
25
  import { ConsentProps as ConsentProps$2 } from 'organisms/Consent/Consent';
24
26
  import { FooterAProps } from 'organisms/Footer/FooterA';
@@ -30,8 +32,6 @@ import { SubscribePanelProps as SubscribePanelProps$1 } from 'organisms/Subscrib
30
32
  import { ISIAProps } from 'organisms/ISI/ISIA';
31
33
  import { HeaderAProps as HeaderAProps$1 } from 'organisms/Header/HeaderA';
32
34
  import { FeedContentProps as FeedContentProps$1, FeedContentTemplateTypes as FeedContentTemplateTypes$1 } from 'organisms/FeedContent/types';
33
- import * as react_hook_form from 'react-hook-form';
34
- import { Control, ControllerProps, DeepPartial, FieldValues, FormState, UseFormReturn, ValidationMode } from 'react-hook-form';
35
35
  import { AlertProps as AlertProps$2 } from 'molecules/Alert/Alert';
36
36
  import { LoginFields as LoginFields$1 } from 'organisms/LoginForm/types';
37
37
  import { AnnotationsList as AnnotationsList$1 } from 'contexts/MlrRichTextViewerContext/types';
@@ -83,6 +83,8 @@ declare const Checkbox: ({ id, onClick, label, isError, disabled, isEditMode, is
83
83
  declare type SelectOption = {
84
84
  id: string;
85
85
  label: string;
86
+ value?: string;
87
+ config?: AnyObject;
86
88
  };
87
89
  declare type SelectInternalConfigurationOptions = {
88
90
  placeholderTextColor: ThemeColors$1 | string;
@@ -110,6 +112,53 @@ declare type SelectProps = Partial<{
110
112
  }>;
111
113
  declare const Select: ({ ref, onBlur, onChange, value, placeholder, options, disabled, optionsPresentation, isError, selectInternalConfig, isRichText, }: SelectProps) => JSX.Element;
112
114
 
115
+ declare const getFieldPlaceholder: (type: FieldTypes$1, title?: string) => string;
116
+
117
+ declare type InputFieldTypes = 'phone-number' | 'text' | 'email' | 'password' | 'numerical' | 'month_year_date' | 'day_month_year_date' | 'month_day_year_date' | 'us_zip_code' | 'any';
118
+ declare type FieldTypes = 'input' | 'select' | 'checkbox';
119
+ declare type UIField<T = string> = (UIInputField & UISelectField & UICheckboxField) & {
120
+ name: T;
121
+ type: FieldTypes;
122
+ value?: string;
123
+ label?: string;
124
+ placeholder?: string;
125
+ required?: boolean;
126
+ tooltip?: string;
127
+ rules?: ControllerProps['rules'];
128
+ order?: number;
129
+ };
130
+ declare type UIInputField = {
131
+ inputType?: InputFieldTypes;
132
+ maxLength?: number;
133
+ onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
134
+ } & InputFieldProps$1;
135
+ declare type UISelectField = {
136
+ options?: SelectOption$1[];
137
+ } & SelectFieldProps$1;
138
+ declare type UICheckboxField = {
139
+ checkboxLabel?: string;
140
+ };
141
+ declare type UIFields<T extends object> = UIField<keyof T>[];
142
+
143
+ declare const getInitialValuesFromFields: <T extends object>(fields: UIFields$1<T>) => DeepPartial<T>;
144
+ declare const isFormValid: <T extends FieldValues>(formState: FormState<T>) => boolean;
145
+ declare const getFieldsFromFieldSections: <T extends object>(sections: Pick<FieldSectionProps$1<T>, "fields">[]) => UIFields$1<T>;
146
+
147
+ declare const acquisitionFormMockFields: UIFields$1<Record<string, string>>;
148
+ declare const setPasswordMockFields: UIFields$1<SetPasswordFields>;
149
+ declare const loginMockFields: UIFields$1<LoginFields$1>;
150
+ declare const sectionMockFields: UIFields$1<Record<string, string>>;
151
+ declare const profileInformationMockForm: {
152
+ label: string;
153
+ fields: UIFields$1<Record<string, string>>;
154
+ }[];
155
+
156
+ declare type MaskConfig = Partial<{
157
+ maskPlaceholder: string;
158
+ dataModelFieldType: InputFieldTypes;
159
+ maskPattern: Array<string | RegExp>;
160
+ }>;
161
+
113
162
  declare type InputFieldInternalConfigProps = Partial<{
114
163
  textColor: ThemeColors$2 | string;
115
164
  textFontSize: number;
@@ -138,8 +187,9 @@ declare type InputProps = {
138
187
  onChange?: (value: string) => void;
139
188
  onKeyDown?: (event: React__default.KeyboardEvent<HTMLInputElement>) => void;
140
189
  internalConfig?: InputFieldInternalConfigProps;
190
+ config?: MaskConfig;
141
191
  };
142
- declare const Input: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, ...rest }: InputProps) => JSX.Element;
192
+ declare const Input: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, config, ...rest }: InputProps) => JSX.Element;
143
193
 
144
194
  declare type TextTypes = 'primary' | 'secondary' | 'error' | 'success';
145
195
  declare type TextAlign = 'center' | 'right' | 'left';
@@ -473,7 +523,7 @@ declare type SetPasswordRuleValidation = {
473
523
  rule: MaxRuleValidation | MinRuleValidation;
474
524
  };
475
525
  declare type SetPasswordFormProps = {
476
- fields: UIFields$1<SetPasswordFields>;
526
+ fields: UIFields$2<SetPasswordFields>;
477
527
  logoUrl: string;
478
528
  isLoading?: boolean;
479
529
  validations: SetPasswordRuleValidation[];
@@ -484,7 +534,7 @@ declare const SetPasswordForm: ({ logoUrl, fields, validations, onBack, onSubmit
484
534
 
485
535
  declare const showAcceptToastMessage: () => void | undefined;
486
536
  declare type AcquisitionFormProps<T extends object> = {
487
- fields: UIFields$1<T>;
537
+ fields: UIFields$2<T>;
488
538
  consents: ConsentProps$1[];
489
539
  logoUrl: string;
490
540
  isLoading?: boolean;
@@ -520,7 +570,7 @@ declare type LoginFields = {
520
570
  };
521
571
 
522
572
  declare type LoginFormProps = {
523
- fields: UIFields$1<LoginFields>;
573
+ fields: UIFields$2<LoginFields>;
524
574
  logoUrl: string;
525
575
  isLoading?: boolean;
526
576
  twoFactorAuthConfig?: {
@@ -816,47 +866,6 @@ declare const toastStyles: styled_components.FlattenSimpleInterpolation;
816
866
 
817
867
  declare const useMediaQuery: (breakpointSize: BreakpointSizesTypes$1) => boolean;
818
868
 
819
- declare const getFieldPlaceholder: (type: FieldTypes$1, title?: string) => string;
820
-
821
- declare type InputFieldTypes = 'phone-number' | 'text' | 'email' | 'password' | 'numerical' | 'any';
822
- declare type FieldTypes = 'input' | 'select' | 'checkbox';
823
- declare type UIField<T = string> = (UIInputField & UISelectField & UICheckboxField) & {
824
- name: T;
825
- type: FieldTypes;
826
- value?: string;
827
- label?: string;
828
- placeholder?: string;
829
- required?: boolean;
830
- tooltip?: string;
831
- rules?: ControllerProps['rules'];
832
- order?: number;
833
- };
834
- declare type UIInputField = {
835
- inputType?: InputFieldTypes;
836
- maxLength?: number;
837
- onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
838
- } & InputFieldProps$1;
839
- declare type UISelectField = {
840
- options?: SelectOption$1[];
841
- } & SelectFieldProps$1;
842
- declare type UICheckboxField = {
843
- checkboxLabel?: string;
844
- };
845
- declare type UIFields<T extends object> = UIField<keyof T>[];
846
-
847
- declare const getInitialValuesFromFields: <T extends object>(fields: UIFields$2<T>) => DeepPartial<T>;
848
- declare const isFormValid: <T extends FieldValues>(formState: FormState<T>) => boolean;
849
- declare const getFieldsFromFieldSections: <T extends object>(sections: Pick<FieldSectionProps$1<T>, "fields">[]) => UIFields$2<T>;
850
-
851
- declare const acquisitionFormMockFields: UIFields$2<Record<string, string>>;
852
- declare const setPasswordMockFields: UIFields$2<SetPasswordFields>;
853
- declare const loginMockFields: UIFields$2<LoginFields$1>;
854
- declare const sectionMockFields: UIFields$2<Record<string, string>>;
855
- declare const profileInformationMockForm: {
856
- label: string;
857
- fields: UIFields$2<Record<string, string>>;
858
- }[];
859
-
860
869
  declare type MlrRichTextViewerProviderProps = PropsWithChildren<{
861
870
  annotationsList: AnnotationsList$1;
862
871
  isMLRReview: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zealicsolutions/web-ui",
3
- "version": "0.3.14",
3
+ "version": "0.3.15",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+ssh://git@bitbucket.org/Zealic_Solutions/zeal-ui-web.git"
@@ -57,8 +57,10 @@
57
57
  "@types/jest": "^29.0.0",
58
58
  "@types/react": "^18.0.18",
59
59
  "@types/react-pdf": "^6.2.0",
60
+ "@types/react-text-mask": "^5.4.11",
60
61
  "@types/styled-components": "^5.1.26",
61
62
  "@types/styled-system": "^5.1.15",
63
+ "@types/text-mask-addons": "^3.8.1",
62
64
  "@typescript-eslint/eslint-plugin": "^5.36.2",
63
65
  "@typescript-eslint/parser": "^5.36.2",
64
66
  "babel-loader": "^8.2.5",
@@ -85,8 +87,8 @@
85
87
  "peerDependencies": {
86
88
  "react": "^18.2.0",
87
89
  "react-dom": "^18.2.0",
88
- "styled-components": "^5.3.5",
89
- "react-pdf": "6.2.2"
90
+ "react-pdf": "6.2.2",
91
+ "styled-components": "^5.3.5"
90
92
  },
91
93
  "dependencies": {
92
94
  "@mui/material": "^5.10.4",
@@ -101,9 +103,11 @@
101
103
  "react-google-maps": "^9.4.5",
102
104
  "react-hook-form": "^7.34.2",
103
105
  "react-pdf": "6.2.2",
106
+ "react-text-mask": "^5.5.0",
104
107
  "slate": "^0.85.0",
105
108
  "slate-react": "^0.83.2",
106
- "styled-components": "^5.3.5"
109
+ "styled-components": "^5.3.5",
110
+ "text-mask-addons": "^3.8.0"
107
111
  },
108
112
  "resolutions": {
109
113
  "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
@@ -119,4 +123,4 @@
119
123
  "homepage": "https://bitbucket.org/Zealic_Solutions/zeal-ui-web#readme",
120
124
  "keywords": [],
121
125
  "description": ""
122
- }
126
+ }