@zealicsolutions/web-ui 0.2.122 → 0.2.124

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.
Files changed (30) hide show
  1. package/dist/cjs/index.js +27 -27
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/src/atoms/Input/Input.d.ts +3 -1
  4. package/dist/cjs/src/atoms/Input/Input.stories.d.ts +1 -1
  5. package/dist/cjs/src/atoms/Input/helpers.d.ts +18 -0
  6. package/dist/cjs/src/containers/types/moleculeTypes.d.ts +1 -4
  7. package/dist/cjs/src/fieldsConfiguration/types.d.ts +1 -1
  8. package/dist/cjs/src/helpers/validations.d.ts +6 -0
  9. package/dist/cjs/src/molecules/CheckboxField/CheckboxField.stories.d.ts +18 -1
  10. package/dist/cjs/src/molecules/Image/Image.d.ts +3 -2
  11. package/dist/cjs/src/molecules/Image/Image.stories.d.ts +1 -1
  12. package/dist/cjs/src/molecules/InputField/InputField.stories.d.ts +18 -1
  13. package/dist/cjs/src/molecules/RadioButtonField/RadioButtonField.stories.d.ts +18 -1
  14. package/dist/cjs/src/molecules/SelectField/SelectField.stories.d.ts +18 -1
  15. package/dist/esm/index.js +27 -27
  16. package/dist/esm/index.js.map +1 -1
  17. package/dist/esm/src/atoms/Input/Input.d.ts +3 -1
  18. package/dist/esm/src/atoms/Input/Input.stories.d.ts +1 -1
  19. package/dist/esm/src/atoms/Input/helpers.d.ts +18 -0
  20. package/dist/esm/src/containers/types/moleculeTypes.d.ts +1 -4
  21. package/dist/esm/src/fieldsConfiguration/types.d.ts +1 -1
  22. package/dist/esm/src/helpers/validations.d.ts +6 -0
  23. package/dist/esm/src/molecules/CheckboxField/CheckboxField.stories.d.ts +18 -1
  24. package/dist/esm/src/molecules/Image/Image.d.ts +3 -2
  25. package/dist/esm/src/molecules/Image/Image.stories.d.ts +1 -1
  26. package/dist/esm/src/molecules/InputField/InputField.stories.d.ts +18 -1
  27. package/dist/esm/src/molecules/RadioButtonField/RadioButtonField.stories.d.ts +18 -1
  28. package/dist/esm/src/molecules/SelectField/SelectField.stories.d.ts +18 -1
  29. package/dist/index.d.ts +63 -58
  30. package/package.json +9 -5
@@ -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> | false;
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'>;
16
+ export declare const getInputIconColor: ({ isEditMode, isFocused, isError, disabled, }: Pick<InputProps, "disabled" | "isError" | "isEditMode"> & {
17
+ isFocused: boolean;
18
+ }) => ThemeColors;
@@ -9,7 +9,7 @@ export declare type DownloadFile = {
9
9
  url: string;
10
10
  name: string;
11
11
  };
12
- declare type LinkAction = Omit<LinkAttributes, 'attributeType'>;
12
+ declare type LinkAction = LinkAttributes;
13
13
  declare type PopupDrawerAction = ContainerComponentProps;
14
14
  declare type DownloadAction = DownloadFile;
15
15
  declare type SubmitAction = AnyObject;
@@ -74,9 +74,6 @@ export interface BaseMolecule {
74
74
  instance: 'molecule';
75
75
  type: MoleculeTypes;
76
76
  metadata?: AnyObject;
77
- idForFrontend?: string;
78
- moleculeLibraryId?: string;
79
- organismLibraryMoleculeId?: string;
80
77
  }
81
78
  export interface ImageMolecule extends BaseMolecule {
82
79
  type: 'image';
@@ -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,10 @@ 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;
8
9
  export declare const getInputValidation: (type?: InputFieldTypes) => ValidationRule<RegExp> | undefined;
10
+ export declare const postCodeMask: RegExp[];
11
+ export declare const dayMonthYearDateMask: (string | RegExp)[];
12
+ export declare const monthYearDateMask: (string | RegExp)[];
13
+ export declare const phoneNumberMask: (string | RegExp)[];
14
+ export declare const removeMaskFromString: (inputString: string) => string;
@@ -26,7 +26,24 @@ declare const _default: {
26
26
  }>;
27
27
  labelsProps: import("molecules").FieldLabelsProps;
28
28
  name: string;
29
- rules: Omit<import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
29
+ rules: Omit<Partial<{
30
+ required: string | import("react-hook-form").ValidationRule<boolean>;
31
+ min: import("react-hook-form").ValidationRule<string | number>;
32
+ max: import("react-hook-form").ValidationRule<string | number>;
33
+ maxLength: import("react-hook-form").ValidationRule<number>;
34
+ minLength: import("react-hook-form").ValidationRule<number>;
35
+ pattern: import("react-hook-form").ValidationRule<RegExp>;
36
+ validate: import("react-hook-form").Validate<any> | Record<string, import("react-hook-form").Validate<any>>;
37
+ valueAsNumber: boolean;
38
+ valueAsDate: boolean;
39
+ value: any;
40
+ setValueAs: (value: any) => any;
41
+ shouldUnregister?: boolean | undefined;
42
+ onChange?: ((event: any) => void) | undefined;
43
+ onBlur?: ((event: any) => void) | undefined;
44
+ disabled: boolean;
45
+ deps: string | string[];
46
+ }>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
30
47
  control: import("react-hook-form").Control<any, any>;
31
48
  required: boolean;
32
49
  optional: boolean;
@@ -1,15 +1,16 @@
1
1
  /// <reference types="react" />
2
- import { StylesType } from 'typescript';
2
+ import { Callback, StylesType } from 'typescript';
3
3
  export declare type ImageProps = {
4
4
  src: string;
5
5
  } & Partial<{
6
6
  id: string;
7
7
  altText: string;
8
8
  link: string;
9
+ onClick: Callback;
9
10
  width: number;
10
11
  height: number;
11
12
  cornerRadius: number;
12
13
  behaveAs: 'background' | 'regular';
13
14
  styles: StylesType;
14
15
  }>;
15
- export declare const Image: ({ src, link, altText, styles, width, height, id, behaveAs, cornerRadius, }: ImageProps) => JSX.Element;
16
+ export declare const Image: ({ src, onClick, link, altText, styles, width, height, id, behaveAs, cornerRadius, }: ImageProps) => JSX.Element;
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/react';
3
3
  import { Image as ImageComponent } from './Image';
4
4
  declare const _default: {
5
5
  title: string;
6
- component: ({ src, link, altText, styles, width, height, id, behaveAs, cornerRadius, }: import("./Image").ImageProps) => JSX.Element;
6
+ component: ({ src, onClick, link, altText, styles, width, height, id, behaveAs, cornerRadius, }: import("./Image").ImageProps) => JSX.Element;
7
7
  };
8
8
  export default _default;
9
9
  export declare const Image: StoryFn<typeof ImageComponent>;
@@ -6,7 +6,24 @@ declare const _default: {
6
6
  component: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, }: Partial<{
7
7
  name: string;
8
8
  control: import("react-hook-form").Control<any, any>;
9
- rules: Omit<import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
9
+ rules: Omit<Partial<{
10
+ required: string | import("react-hook-form").ValidationRule<boolean>;
11
+ min: import("react-hook-form").ValidationRule<string | number>;
12
+ max: import("react-hook-form").ValidationRule<string | number>;
13
+ maxLength: import("react-hook-form").ValidationRule<number>;
14
+ minLength: import("react-hook-form").ValidationRule<number>;
15
+ pattern: import("react-hook-form").ValidationRule<RegExp>;
16
+ validate: import("react-hook-form").Validate<any> | Record<string, import("react-hook-form").Validate<any>>;
17
+ valueAsNumber: boolean;
18
+ valueAsDate: boolean;
19
+ value: any;
20
+ setValueAs: (value: any) => any;
21
+ shouldUnregister?: boolean | undefined;
22
+ onChange?: ((event: any) => void) | undefined;
23
+ onBlur?: ((event: any) => void) | undefined;
24
+ disabled: boolean;
25
+ deps: string | string[];
26
+ }>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
10
27
  required: boolean;
11
28
  optional: boolean;
12
29
  defaultValue: string;
@@ -5,7 +5,24 @@ declare const _default: {
5
5
  title: string;
6
6
  component: <T extends string>({ name, rules, styles, control, optional, required, labelsProps, defaultValue, radioButtonsProps, }: Partial<{
7
7
  name: string;
8
- rules: Omit<import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
8
+ rules: Omit<Partial<{
9
+ required: string | import("react-hook-form").ValidationRule<boolean>;
10
+ min: import("react-hook-form").ValidationRule<string | number>;
11
+ max: import("react-hook-form").ValidationRule<string | number>;
12
+ maxLength: import("react-hook-form").ValidationRule<number>;
13
+ minLength: import("react-hook-form").ValidationRule<number>;
14
+ pattern: import("react-hook-form").ValidationRule<RegExp>;
15
+ validate: import("react-hook-form").Validate<any> | Record<string, import("react-hook-form").Validate<any>>;
16
+ valueAsNumber: boolean;
17
+ valueAsDate: boolean;
18
+ value: any;
19
+ setValueAs: (value: any) => any;
20
+ shouldUnregister?: boolean | undefined;
21
+ onChange?: ((event: any) => void) | undefined;
22
+ onBlur?: ((event: any) => void) | undefined;
23
+ disabled: boolean;
24
+ deps: string | string[];
25
+ }>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
9
26
  styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
10
27
  control: import("react-hook-form").Control<any, any>;
11
28
  optional: boolean;
@@ -20,7 +20,24 @@ declare const _default: {
20
20
  }>;
21
21
  labelsProps: import("..").FieldLabelsProps;
22
22
  name: string;
23
- rules: Omit<import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
23
+ rules: Omit<Partial<{
24
+ required: string | import("react-hook-form").ValidationRule<boolean>;
25
+ min: import("react-hook-form").ValidationRule<string | number>;
26
+ max: import("react-hook-form").ValidationRule<string | number>;
27
+ maxLength: import("react-hook-form").ValidationRule<number>;
28
+ minLength: import("react-hook-form").ValidationRule<number>;
29
+ pattern: import("react-hook-form").ValidationRule<RegExp>;
30
+ validate: import("react-hook-form").Validate<any> | Record<string, import("react-hook-form").Validate<any>>;
31
+ valueAsNumber: boolean;
32
+ valueAsDate: boolean;
33
+ value: any;
34
+ setValueAs: (value: any) => any;
35
+ shouldUnregister?: boolean | undefined;
36
+ onChange?: ((event: any) => void) | undefined;
37
+ onBlur?: ((event: any) => void) | undefined;
38
+ disabled: boolean;
39
+ deps: string | string[];
40
+ }>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
24
41
  control: import("react-hook-form").Control<any, any>;
25
42
  required: boolean;
26
43
  optional: boolean;