@zealicsolutions/web-ui 0.4.21 → 0.4.23
Sign up to get free protection for your applications and to get access to all the features.
- 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;
|