@zealicsolutions/web-ui 0.4.21 → 0.4.23
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.
- package/dist/cjs/index.css +246 -246
- package/dist/cjs/index.js +4 -4
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/src/atoms/Buttons/Buttons.stories.d.ts +1 -1
- package/dist/cjs/src/atoms/Buttons/TextButton.d.ts +1 -1
- package/dist/cjs/src/atoms/Input/Input.stories.d.ts +3 -7
- package/dist/cjs/src/atoms/Input/helpers.d.ts +10 -13
- package/dist/cjs/src/containers/MoleculeItem.d.ts +1 -8
- package/dist/cjs/src/containers/hooks/useSetFormData.d.ts +1 -4
- package/dist/cjs/src/containers/types/moleculeTypes.d.ts +11 -1
- package/dist/cjs/src/fieldsConfiguration/types.d.ts +1 -1
- package/dist/cjs/src/helpers/utils.d.ts +11 -0
- package/dist/cjs/src/helpers/validations.d.ts +5 -0
- package/dist/cjs/src/molecules/CheckboxField/CheckboxField.stories.d.ts +1 -1
- package/dist/cjs/src/molecules/Columns/styles.d.ts +1 -1
- package/dist/cjs/src/molecules/InputField/InputField.stories.d.ts +2 -7
- package/dist/cjs/src/molecules/RadioButtonField/RadioButtonField.stories.d.ts +1 -1
- package/dist/cjs/src/molecules/SelectField/SelectField.stories.d.ts +1 -1
- package/dist/esm/index.css +246 -246
- package/dist/esm/index.js +4 -4
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/src/atoms/Buttons/Buttons.stories.d.ts +1 -1
- package/dist/esm/src/atoms/Buttons/TextButton.d.ts +1 -1
- package/dist/esm/src/atoms/Input/Input.stories.d.ts +3 -7
- package/dist/esm/src/atoms/Input/helpers.d.ts +10 -13
- package/dist/esm/src/containers/MoleculeItem.d.ts +1 -8
- package/dist/esm/src/containers/hooks/useSetFormData.d.ts +1 -4
- package/dist/esm/src/containers/types/moleculeTypes.d.ts +11 -1
- package/dist/esm/src/fieldsConfiguration/types.d.ts +1 -1
- package/dist/esm/src/helpers/utils.d.ts +11 -0
- package/dist/esm/src/helpers/validations.d.ts +5 -0
- package/dist/esm/src/molecules/CheckboxField/CheckboxField.stories.d.ts +1 -1
- package/dist/esm/src/molecules/Columns/styles.d.ts +1 -1
- package/dist/esm/src/molecules/InputField/InputField.stories.d.ts +2 -7
- package/dist/esm/src/molecules/RadioButtonField/RadioButtonField.stories.d.ts +1 -1
- package/dist/esm/src/molecules/SelectField/SelectField.stories.d.ts +1 -1
- package/dist/index.d.ts +1008 -999
- package/package.json +1 -1
@@ -7,7 +7,7 @@ declare const _default: {
|
|
7
7
|
title: string;
|
8
8
|
component: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {
|
9
9
|
target: "_blank";
|
10
|
-
} & Pick<import("../..").BaseButtonProps, "
|
10
|
+
} & Pick<import("../..").BaseButtonProps, "disabled" | "size" | "children" | "onClick" | "colorTheme"> & Partial<{
|
11
11
|
buttonLink: string;
|
12
12
|
elementId: string;
|
13
13
|
$styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
|
@@ -9,7 +9,7 @@ export declare type TextButtonProps = Pick<BaseButtonProps, 'disabled' | 'onClic
|
|
9
9
|
}>;
|
10
10
|
export declare const TextButton: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {
|
11
11
|
target: "_blank";
|
12
|
-
} & Pick<BaseButtonProps, "
|
12
|
+
} & Pick<BaseButtonProps, "disabled" | "size" | "children" | "onClick" | "colorTheme"> & Partial<{
|
13
13
|
buttonLink: string;
|
14
14
|
elementId: string;
|
15
15
|
$styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
|
@@ -1,6 +1,6 @@
|
|
1
|
-
/// <reference types="react" />
|
2
1
|
import type { StoryFn } from '@storybook/react';
|
3
2
|
import { InputProps } from './Input';
|
3
|
+
import { InputFieldTypes } from '../../fieldsConfiguration';
|
4
4
|
declare const _default: {
|
5
5
|
title: string;
|
6
6
|
component: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, config, ...rest }: Partial<{
|
@@ -8,7 +8,7 @@ declare const _default: {
|
|
8
8
|
leftIcon: import("./Input").InputIconProps;
|
9
9
|
rightIcon: import("./Input").InputIconProps;
|
10
10
|
onBlur: import("../../typescript").Callback;
|
11
|
-
type:
|
11
|
+
type: InputFieldTypes;
|
12
12
|
placeholder: string;
|
13
13
|
disabled: boolean;
|
14
14
|
isEditMode: boolean;
|
@@ -26,11 +26,7 @@ declare const _default: {
|
|
26
26
|
styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
|
27
27
|
wrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
|
28
28
|
}>;
|
29
|
-
config?:
|
30
|
-
maskPlaceholder: string;
|
31
|
-
dataModelFieldType: import("../..").InputFieldTypes;
|
32
|
-
maskPattern: (string | RegExp)[];
|
33
|
-
}> | undefined;
|
29
|
+
config?: import("./helpers").MaskConfig | undefined;
|
34
30
|
state: import("../..").FormStateType;
|
35
31
|
}>) => JSX.Element;
|
36
32
|
};
|
@@ -3,14 +3,15 @@ import { HTMLInputTypeAttribute } from 'react';
|
|
3
3
|
import { ThemeColors } from 'theme';
|
4
4
|
import { InputProps } from 'atoms';
|
5
5
|
import { InputFieldTypes } from '../../fieldsConfiguration';
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
maskPattern
|
10
|
-
|
6
|
+
import { DataModelFieldFormatCodeTypes } from '../../containers';
|
7
|
+
export declare type MaskConfig = {
|
8
|
+
maskPlaceholder?: string;
|
9
|
+
maskPattern?: Array<string | RegExp>;
|
10
|
+
dataModelFieldType: DataModelFieldFormatCodeTypes;
|
11
|
+
};
|
11
12
|
export declare const getSpecificInputProps: (type: InputFieldTypes) => {
|
12
13
|
type?: HTMLInputTypeAttribute | undefined;
|
13
|
-
inputMode?: "text" | "
|
14
|
+
inputMode?: "text" | "email" | "none" | "search" | "tel" | "url" | "numeric" | "decimal" | undefined;
|
14
15
|
};
|
15
16
|
export declare const getMaskInputProps: (type?: InputFieldTypes, config?: MaskConfig) => Pick<MaskedInputProps, 'pipe' | 'mask' | 'placeholder' | 'keepCharPositions'>;
|
16
17
|
export declare const getInputIconColor: ({ isEditMode, isFocused, isError, disabled, }: Pick<Partial<{
|
@@ -36,12 +37,8 @@ export declare const getInputIconColor: ({ isEditMode, isFocused, isError, disab
|
|
36
37
|
styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
|
37
38
|
wrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
|
38
39
|
}>;
|
39
|
-
config?:
|
40
|
-
|
41
|
-
|
42
|
-
maskPattern: Array<string | RegExp>;
|
43
|
-
}> | undefined;
|
44
|
-
state: import("../..").FormStateType;
|
45
|
-
}>, "disabled" | "isError" | "isEditMode"> & {
|
40
|
+
config?: MaskConfig | undefined;
|
41
|
+
state: import("../../containers").FormStateType;
|
42
|
+
}>, "disabled" | "isEditMode" | "isError"> & {
|
46
43
|
isFocused: boolean;
|
47
44
|
}) => ThemeColors;
|
@@ -1,12 +1,5 @@
|
|
1
|
-
import {
|
2
|
-
import { LinkAttributes, Molecule } from 'containers';
|
1
|
+
import { Molecule } from 'containers';
|
3
2
|
import { TabGroupProps } from 'molecules';
|
4
|
-
import type { Nullable } from 'typescript';
|
5
|
-
export declare const downloadFile: (url?: string, name?: string) => Promise<void>;
|
6
|
-
export declare const navigateToExternalLink: (link?: LinkAttributes) => void;
|
7
|
-
export declare const addInternalParamsToCurrentLink: (internalLink?: Nullable<string>) => string;
|
8
|
-
export declare const getHref: (link?: LinkAttributes) => string;
|
9
|
-
export declare const parseDescendantContent: (string: string) => CustomDescendant[];
|
10
3
|
export declare const MoleculeItem: ({ type, config, attributes, tabsProps, form, id, formData, setFormData, isMobile, metadata, }: Molecule & {
|
11
4
|
tabsProps?: Pick<TabGroupProps<string, string>, "tabs" | "activeTabKey" | "onTabChange"> | undefined;
|
12
5
|
isMobile?: boolean | undefined;
|
@@ -1,17 +1,14 @@
|
|
1
1
|
import { DataConnectionAttributes } from 'containers/types/moleculeTypes';
|
2
|
-
import { InputFieldTypes } from 'fieldsConfiguration';
|
3
2
|
import { Dispatch, SetStateAction } from 'react';
|
4
3
|
import { AnyObject } from 'typescript';
|
5
4
|
declare type UseSetFormDataProps<DefaultValueType> = Partial<{
|
6
5
|
defaultValue: DefaultValueType;
|
7
6
|
dataModelField: DataConnectionAttributes;
|
8
7
|
setFormData: Dispatch<SetStateAction<AnyObject>>;
|
9
|
-
inputType: InputFieldTypes;
|
10
8
|
}>;
|
11
|
-
export declare const useSetFormData: <DefaultValueType>({ setFormData, defaultValue, dataModelField,
|
9
|
+
export declare const useSetFormData: <DefaultValueType>({ setFormData, defaultValue, dataModelField, }: Partial<{
|
12
10
|
defaultValue: DefaultValueType;
|
13
11
|
dataModelField: DataConnectionAttributes;
|
14
12
|
setFormData: Dispatch<SetStateAction<AnyObject>>;
|
15
|
-
inputType: InputFieldTypes;
|
16
13
|
}>) => void;
|
17
14
|
export {};
|
@@ -4,7 +4,10 @@ import { Dispatch, SetStateAction } from 'react';
|
|
4
4
|
import { UseFormReturn } from 'react-hook-form';
|
5
5
|
import type { AnyObject, Nullable, StrictUnion, StylesType } from 'typescript';
|
6
6
|
import { ConditionConfig, ContainerComponentProps, MetadataType } from './types';
|
7
|
+
import { MaskConfig } from '../../atoms/Input/helpers';
|
7
8
|
export declare type ActionTypes = 'link' | 'popup' | 'drawer' | 'download' | 'submit' | 'reset' | 'destroy';
|
9
|
+
export declare type DataModelFieldFormatCodeTypes = 'date' | 'email' | 'string' | 'integer' | 'boolean' | 'numeric' | 'zip_code' | 'phone_number';
|
10
|
+
export declare type DataModelFieldFormatValueTypes = 'any' | 'text' | 'email' | 'integer' | 'numerical' | 'us_zip_code' | 'phone_number' | 'month_year_date' | 'day_month_year_date' | 'month_day_year_date' | 'year_month_day_date';
|
8
11
|
export declare type DownloadFile = {
|
9
12
|
url: string;
|
10
13
|
name: string;
|
@@ -69,6 +72,13 @@ export interface IterableAttributes {
|
|
69
72
|
attributeType: 'iterable';
|
70
73
|
options: SelectOption[];
|
71
74
|
}
|
75
|
+
export declare type DataModelFieldFormat = {
|
76
|
+
id: string;
|
77
|
+
label: string;
|
78
|
+
value: DataModelFieldFormatValueTypes;
|
79
|
+
code: DataModelFieldFormatCodeTypes;
|
80
|
+
config: MaskConfig;
|
81
|
+
};
|
72
82
|
export interface DataConnectionAttributes {
|
73
83
|
id: string;
|
74
84
|
attributeType: 'data_model_field';
|
@@ -78,6 +88,7 @@ export interface DataConnectionAttributes {
|
|
78
88
|
defaultValue?: string;
|
79
89
|
entitySubtypeId?: string;
|
80
90
|
entitySubtypeName?: string;
|
91
|
+
format: DataModelFieldFormat;
|
81
92
|
};
|
82
93
|
}
|
83
94
|
export interface ConditionConfigAttributes {
|
@@ -158,7 +169,6 @@ export interface TextInputMolecule extends BaseMolecule {
|
|
158
169
|
attributes: Partial<{
|
159
170
|
label: TextAttributes;
|
160
171
|
required: BooleanAttributes;
|
161
|
-
inputType: SelectAttributes;
|
162
172
|
dataModelField: DataConnectionAttributes;
|
163
173
|
conditionConfig: ConditionConfigAttributes;
|
164
174
|
}>;
|
@@ -2,7 +2,7 @@
|
|
2
2
|
import { SelectOption } from 'atoms';
|
3
3
|
import { InputFieldProps, SelectFieldProps } from 'molecules';
|
4
4
|
import { ControllerProps } from 'react-hook-form';
|
5
|
-
export declare type InputFieldTypes = '
|
5
|
+
export declare type InputFieldTypes = 'any' | 'text' | 'email' | 'integer' | 'password' | 'username' | 'numerical' | 'us_zip_code' | 'phone_number' | 'month_year_date' | 'day_month_year_date' | 'month_day_year_date' | 'year_month_day_date';
|
6
6
|
export declare type FieldTypes = 'input' | 'select' | 'checkbox';
|
7
7
|
export declare type UIField<T = string> = (UIInputField & UISelectField & UICheckboxField) & {
|
8
8
|
name: T;
|
@@ -1 +1,12 @@
|
|
1
|
+
import { CustomDescendant } from 'atoms/RichTextViewer/types';
|
2
|
+
import { LinkAttributes } from 'containers';
|
3
|
+
import type { Nullable } from 'typescript';
|
1
4
|
export declare const validateAndOpenUrl: (url: string) => void;
|
5
|
+
export declare const getParameterByName: (name: string, url: string) => string;
|
6
|
+
export declare const updateSearchParams: (currentParams: URLSearchParams, internalLink?: Nullable<string>) => URLSearchParams;
|
7
|
+
export declare const downloadFile: (url?: string, name?: string) => Promise<void>;
|
8
|
+
export declare const navigateToExternalLink: (externalLink?: Nullable<string>) => void;
|
9
|
+
export declare const checkIsInternalLink: (link?: LinkAttributes) => boolean;
|
10
|
+
export declare const addInternalParamsToCurrentLink: (internalLink?: Nullable<string>) => string;
|
11
|
+
export declare const getHref: (link?: LinkAttributes) => string;
|
12
|
+
export declare const parseDescendantContent: (string: string) => CustomDescendant[];
|
@@ -8,11 +8,16 @@ export declare const textValidation: RegExp;
|
|
8
8
|
export declare const monthDayYearDateValidation: RegExp;
|
9
9
|
export declare const dayMonthYearDateValidation: RegExp;
|
10
10
|
export declare const monthYearDateValidation: RegExp;
|
11
|
+
export declare const yearMonthDayDateValidation: RegExp;
|
11
12
|
export declare const usZipCode: RegExp;
|
12
13
|
export declare const usernameValidation: RegExp;
|
13
14
|
export declare const getInputValidation: (type?: InputFieldTypes) => ValidationRule<RegExp> | undefined;
|
14
15
|
export declare const postCodeMask: RegExp[];
|
16
|
+
export declare const yearMonthDayDateMask: (string | RegExp)[];
|
17
|
+
export declare const monthDayYearDateMask: (string | RegExp)[];
|
15
18
|
export declare const dayMonthYearDateMask: (string | RegExp)[];
|
16
19
|
export declare const monthYearDateMask: (string | RegExp)[];
|
17
20
|
export declare const phoneNumberMask: (string | RegExp)[];
|
21
|
+
export declare const integerMask: RegExp[];
|
22
|
+
export declare const numericalMask: any;
|
18
23
|
export declare const removeMaskFromString: (inputString: string) => string;
|
@@ -42,7 +42,7 @@ declare const _default: {
|
|
42
42
|
onBlur?: ((event: any) => void) | undefined;
|
43
43
|
disabled: boolean;
|
44
44
|
deps: string | string[];
|
45
|
-
}>, "
|
45
|
+
}>, "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"> | undefined;
|
46
46
|
control: import("react-hook-form").Control<any, any>;
|
47
47
|
required: boolean;
|
48
48
|
optional: boolean;
|
@@ -4,7 +4,7 @@ export declare const ColumnWrapper: import("styled-components").StyledComponent<
|
|
4
4
|
export declare const InfoWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
5
5
|
export declare const Link: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {
|
6
6
|
target: "_blank";
|
7
|
-
} & Pick<import("..").BaseButtonProps, "
|
7
|
+
} & Pick<import("..").BaseButtonProps, "disabled" | "size" | "children" | "onClick" | "colorTheme"> & Partial<{
|
8
8
|
buttonLink: string;
|
9
9
|
elementId: string;
|
10
10
|
$styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
|
@@ -1,4 +1,3 @@
|
|
1
|
-
/// <reference types="react" />
|
2
1
|
import { StoryFn } from '@storybook/react';
|
3
2
|
import { InputFieldProps } from './InputField';
|
4
3
|
declare const _default: {
|
@@ -23,7 +22,7 @@ declare const _default: {
|
|
23
22
|
onBlur?: ((event: any) => void) | undefined;
|
24
23
|
disabled: boolean;
|
25
24
|
deps: string | string[];
|
26
|
-
}>, "
|
25
|
+
}>, "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"> | undefined;
|
27
26
|
required: boolean;
|
28
27
|
optional: boolean;
|
29
28
|
defaultValue: string;
|
@@ -51,11 +50,7 @@ declare const _default: {
|
|
51
50
|
styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
|
52
51
|
wrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
|
53
52
|
}>;
|
54
|
-
config?:
|
55
|
-
maskPlaceholder: string;
|
56
|
-
dataModelFieldType: import("fieldsConfiguration").InputFieldTypes;
|
57
|
-
maskPattern: (string | RegExp)[];
|
58
|
-
}> | undefined;
|
53
|
+
config?: import("../../atoms/Input/helpers").MaskConfig | undefined;
|
59
54
|
state: import("../..").FormStateType;
|
60
55
|
}>;
|
61
56
|
styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
|
@@ -21,7 +21,7 @@ declare const _default: {
|
|
21
21
|
onBlur?: ((event: any) => void) | undefined;
|
22
22
|
disabled: boolean;
|
23
23
|
deps: string | string[];
|
24
|
-
}>, "
|
24
|
+
}>, "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"> | undefined;
|
25
25
|
styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
|
26
26
|
control: import("react-hook-form").Control<any, any>;
|
27
27
|
optional: boolean;
|
@@ -36,7 +36,7 @@ declare const _default: {
|
|
36
36
|
onBlur?: ((event: any) => void) | undefined;
|
37
37
|
disabled: boolean;
|
38
38
|
deps: string | string[];
|
39
|
-
}>, "
|
39
|
+
}>, "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"> | undefined;
|
40
40
|
control: import("react-hook-form").Control<any, any>;
|
41
41
|
required: boolean;
|
42
42
|
optional: boolean;
|