@akad/design-system 0.1.0-beta.1 → 0.1.0-beta.11
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/css/aon-theme.css +1 -1
- package/css/bees-theme.css +1 -1
- package/css/bmc-theme.css +1 -1
- package/css/default-theme.css +1 -1
- package/css/linker-theme.css +1 -1
- package/css/oggi-theme.css +1 -1
- package/css/streetgo-theme.css +1 -1
- package/package.json +1 -1
- package/react/components/atoms/Button/Button.config.d.ts +1 -0
- package/react/components/atoms/Card/Card.config.d.ts +10 -0
- package/react/components/atoms/Card/Card.d.ts +5 -1
- package/react/components/atoms/Checkbox/Checkbox.config.d.ts +6 -1
- package/react/components/atoms/Checkbox/Checkbox.d.ts +2 -1
- package/react/components/atoms/Icon/Icon.config.d.ts +5 -0
- package/react/components/atoms/Input/mask.d.ts +12 -0
- package/react/components/atoms/Loading/Loading.config.d.ts +10 -0
- package/react/components/atoms/Loading/Loading.d.ts +5 -1
- package/react/components/atoms/Select/Select.config.d.ts +10 -0
- package/react/components/atoms/Select/Select.d.ts +2 -6
- package/react/components/molecules/EditableSelect/EditableSelect.config.d.ts +26 -14
- package/react/components/molecules/EditableSelect/EditableSelect.d.ts +7 -23
- package/react/components/molecules/EditableSelect/EditableSelect.stories.d.ts +4 -0
- package/react/helpers/utils.d.ts +23 -0
- package/react/helpers/validator.d.ts +2 -0
- package/react/helpers/validator.test.d.ts +1 -0
- package/react/hooks/useStepper.d.ts +1 -1
- package/react/react-lib.js +3763 -3671
- package/react/react-lib.umd.cjs +10 -10
|
@@ -53,6 +53,14 @@ export interface ElevationProps {
|
|
|
53
53
|
default: number;
|
|
54
54
|
options: number[];
|
|
55
55
|
}
|
|
56
|
+
export interface IdProps {
|
|
57
|
+
type: StringConstructor;
|
|
58
|
+
default: string;
|
|
59
|
+
}
|
|
60
|
+
export interface TestIdProps {
|
|
61
|
+
type: StringConstructor;
|
|
62
|
+
default: string;
|
|
63
|
+
}
|
|
56
64
|
export interface CardConfig {
|
|
57
65
|
name: string;
|
|
58
66
|
class: string;
|
|
@@ -60,6 +68,8 @@ export interface CardConfig {
|
|
|
60
68
|
backgroundColor: BackgroundColorProps;
|
|
61
69
|
borderColor: BorderColorProps;
|
|
62
70
|
elevation: ElevationProps;
|
|
71
|
+
id: IdProps;
|
|
72
|
+
testId: TestIdProps;
|
|
63
73
|
};
|
|
64
74
|
}
|
|
65
75
|
declare const CardConfig: CardConfig;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { default as PropTypes } from 'prop-types';
|
|
2
2
|
|
|
3
3
|
export interface DsCardProps {
|
|
4
|
+
id?: string;
|
|
5
|
+
testId?: string;
|
|
4
6
|
children?: string | JSX.Element | JSX.Element[];
|
|
5
7
|
className?: string;
|
|
6
8
|
elevation?: number;
|
|
@@ -8,8 +10,10 @@ export interface DsCardProps {
|
|
|
8
10
|
borderColor?: string;
|
|
9
11
|
}
|
|
10
12
|
declare const DsCard: {
|
|
11
|
-
({ children, className, elevation, backgroundColor, borderColor, }: DsCardProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
({ id, testId, children, className, elevation, backgroundColor, borderColor, }: DsCardProps): import("react/jsx-runtime").JSX.Element;
|
|
12
14
|
propTypes: {
|
|
15
|
+
id: PropTypes.Requireable<string>;
|
|
16
|
+
testId: PropTypes.Requireable<string>;
|
|
13
17
|
backgroundColor: PropTypes.Requireable<import('./Card.config').Color>;
|
|
14
18
|
borderColor: PropTypes.Requireable<import('./Card.config').Color>;
|
|
15
19
|
elevation: PropTypes.Requireable<number>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export interface NameProps {
|
|
2
2
|
type: StringConstructor;
|
|
3
|
-
required:
|
|
3
|
+
required: false;
|
|
4
4
|
}
|
|
5
5
|
export interface TestIdProps {
|
|
6
6
|
type: StringConstructor;
|
|
@@ -18,6 +18,10 @@ export interface CheckedProps {
|
|
|
18
18
|
type: BooleanConstructor;
|
|
19
19
|
default: boolean;
|
|
20
20
|
}
|
|
21
|
+
export interface ChangeByCheckedProps {
|
|
22
|
+
type: BooleanConstructor;
|
|
23
|
+
default: boolean;
|
|
24
|
+
}
|
|
21
25
|
export interface DisabledProps {
|
|
22
26
|
type: BooleanConstructor;
|
|
23
27
|
default: boolean;
|
|
@@ -36,6 +40,7 @@ export interface CheckboxConfig {
|
|
|
36
40
|
description: DescriptionProps;
|
|
37
41
|
checked: CheckedProps;
|
|
38
42
|
disabled: DisabledProps;
|
|
43
|
+
changeByChecked: ChangeByCheckedProps;
|
|
39
44
|
onChangeHandler: OnChangeHandlerProps;
|
|
40
45
|
};
|
|
41
46
|
}
|
|
@@ -3,12 +3,13 @@ import { default as React, ReactNode } from 'react';
|
|
|
3
3
|
export interface DsCheckboxProps {
|
|
4
4
|
id?: string;
|
|
5
5
|
className?: string;
|
|
6
|
-
name
|
|
6
|
+
name?: string;
|
|
7
7
|
testId?: string;
|
|
8
8
|
label?: string | ReactNode;
|
|
9
9
|
description?: string | ReactNode;
|
|
10
10
|
checked?: boolean;
|
|
11
11
|
disabled?: boolean;
|
|
12
|
+
changeByChecked?: boolean;
|
|
12
13
|
onChangeHandler?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
13
14
|
}
|
|
14
15
|
declare const DsCheckbox: React.ForwardRefExoticComponent<DsCheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -102,6 +102,10 @@ export interface WeightProps {
|
|
|
102
102
|
default: Weight;
|
|
103
103
|
options: Weight[];
|
|
104
104
|
}
|
|
105
|
+
export interface TestIdProps {
|
|
106
|
+
type: StringConstructor;
|
|
107
|
+
default: string;
|
|
108
|
+
}
|
|
105
109
|
export interface OnClickProps {
|
|
106
110
|
type: FunctionConstructor;
|
|
107
111
|
default: () => void;
|
|
@@ -117,6 +121,7 @@ export interface IconConfig {
|
|
|
117
121
|
fontVariationSettings: FontVariationSettingsProps;
|
|
118
122
|
fill: FillProps;
|
|
119
123
|
weight: WeightProps;
|
|
124
|
+
testId: TestIdProps;
|
|
120
125
|
onClick: OnClickProps;
|
|
121
126
|
};
|
|
122
127
|
}
|
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
import { MaskedOptions } from 'imask';
|
|
2
|
+
|
|
3
|
+
interface MaskedDynamic {
|
|
4
|
+
value: string;
|
|
5
|
+
compiledMasks: MaskedOptions[];
|
|
6
|
+
}
|
|
1
7
|
declare const maskConfig: {
|
|
2
8
|
currency: {
|
|
3
9
|
mask: string;
|
|
@@ -26,5 +32,11 @@ declare const maskConfig: {
|
|
|
26
32
|
maxLength: number;
|
|
27
33
|
}[];
|
|
28
34
|
};
|
|
35
|
+
'phone-br': {
|
|
36
|
+
mask: {
|
|
37
|
+
mask: string;
|
|
38
|
+
}[];
|
|
39
|
+
dispatch: (appended: string, dynamicMasked: MaskedDynamic) => Partial<Pick<import('imask').Masked<any>, "mask" | "parent" | "prepare" | "prepareChar" | "validate" | "commit" | "format" | "parse" | "overwrite" | "eager" | "skipInvalid" | "autofix">>;
|
|
40
|
+
};
|
|
29
41
|
};
|
|
30
42
|
export default maskConfig;
|
|
@@ -30,10 +30,20 @@ export interface BackgroundColorProps {
|
|
|
30
30
|
default: BackgroundColor;
|
|
31
31
|
options: BackgroundColor[];
|
|
32
32
|
}
|
|
33
|
+
export interface IdProps {
|
|
34
|
+
type: StringConstructor;
|
|
35
|
+
default: string;
|
|
36
|
+
}
|
|
37
|
+
export interface TestIdProps {
|
|
38
|
+
type: StringConstructor;
|
|
39
|
+
default: string;
|
|
40
|
+
}
|
|
33
41
|
export interface LoadingConfig {
|
|
34
42
|
name: string;
|
|
35
43
|
class: string;
|
|
36
44
|
props: {
|
|
45
|
+
id: IdProps;
|
|
46
|
+
testId: TestIdProps;
|
|
37
47
|
size: SizeProps;
|
|
38
48
|
opacity: OpacityProps;
|
|
39
49
|
fullscreen: FullscreenProps;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { default as PropTypes } from 'prop-types';
|
|
2
2
|
|
|
3
3
|
export interface DsLoadingProps {
|
|
4
|
+
id?: string;
|
|
5
|
+
testId?: string;
|
|
4
6
|
className?: string;
|
|
5
7
|
size?: string;
|
|
6
8
|
opacity?: boolean;
|
|
@@ -8,8 +10,10 @@ export interface DsLoadingProps {
|
|
|
8
10
|
backgroundColor?: string;
|
|
9
11
|
}
|
|
10
12
|
declare const DsLoading: {
|
|
11
|
-
({ className, size, opacity, fullscreen, backgroundColor, }: DsLoadingProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
({ id, testId, className, size, opacity, fullscreen, backgroundColor, }: DsLoadingProps): import("react/jsx-runtime").JSX.Element;
|
|
12
14
|
propTypes: {
|
|
15
|
+
id: PropTypes.Requireable<string>;
|
|
16
|
+
testId: PropTypes.Requireable<string>;
|
|
13
17
|
size: PropTypes.Requireable<import('./Loading.config').Size>;
|
|
14
18
|
opacity: PropTypes.Requireable<boolean>;
|
|
15
19
|
fullscreen: PropTypes.Requireable<boolean>;
|
|
@@ -89,6 +89,15 @@ export interface FeedbackProps {
|
|
|
89
89
|
type: StringConstructor;
|
|
90
90
|
default: string;
|
|
91
91
|
}
|
|
92
|
+
interface Option {
|
|
93
|
+
label?: string;
|
|
94
|
+
value?: string | number | readonly string[];
|
|
95
|
+
}
|
|
96
|
+
interface GroupedOption {
|
|
97
|
+
label?: string;
|
|
98
|
+
options: Option[];
|
|
99
|
+
}
|
|
100
|
+
export type SelectOptions = (Option | GroupedOption)[];
|
|
92
101
|
export interface SelectConfig {
|
|
93
102
|
name: string;
|
|
94
103
|
class: string;
|
|
@@ -99,6 +108,7 @@ export interface SelectConfig {
|
|
|
99
108
|
disabled: DisabledProps;
|
|
100
109
|
multiple: MultipleProps;
|
|
101
110
|
name: NameProps;
|
|
111
|
+
options: SelectOptions;
|
|
102
112
|
testId: TestIdProps;
|
|
103
113
|
placeholder: PlaceholderProps;
|
|
104
114
|
onChange: OnChangeProps;
|
|
@@ -1,10 +1,6 @@
|
|
|
1
|
+
import { SelectOptions } from './Select.config';
|
|
1
2
|
import { default as React } from 'react';
|
|
2
3
|
|
|
3
|
-
export interface SelectItem {
|
|
4
|
-
label: string;
|
|
5
|
-
value: string | number | readonly string[] | undefined;
|
|
6
|
-
options?: SelectItem[];
|
|
7
|
-
}
|
|
8
4
|
export interface DsSelectProps {
|
|
9
5
|
label: string;
|
|
10
6
|
className?: string;
|
|
@@ -13,7 +9,7 @@ export interface DsSelectProps {
|
|
|
13
9
|
multiple?: boolean;
|
|
14
10
|
name?: string;
|
|
15
11
|
testId?: string;
|
|
16
|
-
options:
|
|
12
|
+
options: SelectOptions;
|
|
17
13
|
value?: string | number;
|
|
18
14
|
placeholder?: string;
|
|
19
15
|
onChange?: (e: React.ChangeEvent<HTMLSelectElement>, value: string | number) => void;
|
|
@@ -1,24 +1,34 @@
|
|
|
1
|
+
export declare const Size: {
|
|
2
|
+
readonly Small: "small";
|
|
3
|
+
readonly Medium: "medium";
|
|
4
|
+
readonly Large: "large";
|
|
5
|
+
};
|
|
6
|
+
export type Size = (typeof Size)[keyof typeof Size];
|
|
1
7
|
export interface Option {
|
|
2
|
-
label
|
|
3
|
-
value?: string;
|
|
8
|
+
label: string;
|
|
9
|
+
value?: string | number;
|
|
4
10
|
name?: string;
|
|
11
|
+
id?: string | number;
|
|
5
12
|
}
|
|
6
13
|
export interface LabelProps {
|
|
7
14
|
type: StringConstructor;
|
|
8
15
|
default: string;
|
|
9
16
|
}
|
|
10
|
-
export interface
|
|
17
|
+
export interface DisabledProps {
|
|
11
18
|
type: BooleanConstructor;
|
|
12
19
|
default: boolean;
|
|
13
20
|
}
|
|
14
|
-
export interface
|
|
15
|
-
type:
|
|
16
|
-
default: string;
|
|
21
|
+
export interface LoadingProps {
|
|
22
|
+
type: BooleanConstructor;
|
|
17
23
|
}
|
|
18
|
-
export interface
|
|
24
|
+
export interface AnimatedProps {
|
|
19
25
|
type: BooleanConstructor;
|
|
20
26
|
default: boolean;
|
|
21
27
|
}
|
|
28
|
+
export interface PlaceholderProps {
|
|
29
|
+
type: StringConstructor;
|
|
30
|
+
default: string;
|
|
31
|
+
}
|
|
22
32
|
export interface IconProps {
|
|
23
33
|
type: StringConstructor;
|
|
24
34
|
default: undefined;
|
|
@@ -43,6 +53,11 @@ export interface ValueProps {
|
|
|
43
53
|
type: StringConstructor;
|
|
44
54
|
default: string;
|
|
45
55
|
}
|
|
56
|
+
export interface SizeProps {
|
|
57
|
+
type: StringConstructor;
|
|
58
|
+
options: Size[];
|
|
59
|
+
default: Size;
|
|
60
|
+
}
|
|
46
61
|
export interface OnChangeHandlerProps {
|
|
47
62
|
type: FunctionConstructor;
|
|
48
63
|
default: () => void;
|
|
@@ -59,17 +74,13 @@ export interface OnSelectHandlerProps {
|
|
|
59
74
|
type: FunctionConstructor;
|
|
60
75
|
default: () => void;
|
|
61
76
|
}
|
|
62
|
-
export interface GetOptionLabelProps {
|
|
63
|
-
type: FunctionConstructor;
|
|
64
|
-
default: (option: Option) => string;
|
|
65
|
-
}
|
|
66
77
|
export interface EditableSelectConfig {
|
|
67
78
|
name: string;
|
|
68
79
|
class: string;
|
|
69
80
|
props: {
|
|
70
81
|
label: LabelProps;
|
|
71
|
-
|
|
72
|
-
|
|
82
|
+
animated: AnimatedProps;
|
|
83
|
+
loading: LoadingProps;
|
|
73
84
|
disabled: DisabledProps;
|
|
74
85
|
icon: IconProps;
|
|
75
86
|
name: NameProps;
|
|
@@ -77,11 +88,12 @@ export interface EditableSelectConfig {
|
|
|
77
88
|
options: OptionsProps;
|
|
78
89
|
status: StatusProps;
|
|
79
90
|
value: ValueProps;
|
|
91
|
+
size: SizeProps;
|
|
80
92
|
onChangeHandler: OnChangeHandlerProps;
|
|
81
93
|
onBlurHandler: OnBlurHandlerProps;
|
|
82
94
|
onFocusHandler: OnFocusHandlerProps;
|
|
83
95
|
onSelectHandler: OnSelectHandlerProps;
|
|
84
|
-
|
|
96
|
+
placeholder: PlaceholderProps;
|
|
85
97
|
};
|
|
86
98
|
}
|
|
87
99
|
declare const EditableSelectConfig: EditableSelectConfig;
|
|
@@ -1,41 +1,25 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Option } from './EditableSelect.config';
|
|
2
2
|
|
|
3
|
-
export interface iSingleOption {
|
|
4
|
-
id?: number;
|
|
5
|
-
label?: string;
|
|
6
|
-
}
|
|
7
3
|
export interface DsEditableSelectProps {
|
|
8
4
|
label?: string;
|
|
9
5
|
name?: string;
|
|
10
6
|
value?: string;
|
|
11
|
-
|
|
12
|
-
|
|
7
|
+
size?: string;
|
|
8
|
+
options?: Option[];
|
|
13
9
|
onChangeHandler?: (event: React.ChangeEvent<HTMLInputElement> | React.FormEvent<HTMLInputElement>) => void;
|
|
14
10
|
onSelectHandler?: (selectedOption: object) => void;
|
|
15
11
|
icon?: string;
|
|
16
12
|
noOptionsMessage?: string;
|
|
17
13
|
disabled?: boolean;
|
|
18
14
|
status?: string;
|
|
15
|
+
placeholder?: string;
|
|
16
|
+
loading?: boolean;
|
|
17
|
+
animated?: boolean;
|
|
19
18
|
onBlurHandler?: () => void;
|
|
20
19
|
onFocusHandler?: () => void;
|
|
21
20
|
}
|
|
22
21
|
declare const DsEditableSelect: {
|
|
23
|
-
({ label, name, value, options,
|
|
24
|
-
propTypes: {
|
|
25
|
-
label: PropTypes.Requireable<string>;
|
|
26
|
-
name: PropTypes.Requireable<string>;
|
|
27
|
-
value: PropTypes.Requireable<string>;
|
|
28
|
-
options: PropTypes.Requireable<(object | null | undefined)[]>;
|
|
29
|
-
getOptionLabel: PropTypes.Requireable<(...args: any[]) => any>;
|
|
30
|
-
onChangeHandler: PropTypes.Requireable<(...args: any[]) => any>;
|
|
31
|
-
onSelectHandler: PropTypes.Requireable<(...args: any[]) => any>;
|
|
32
|
-
icon: PropTypes.Requireable<string>;
|
|
33
|
-
noOptionsMessage: PropTypes.Requireable<string>;
|
|
34
|
-
disabled: PropTypes.Requireable<boolean>;
|
|
35
|
-
status: PropTypes.Requireable<string>;
|
|
36
|
-
onBlurHandler: PropTypes.Requireable<(...args: any[]) => any>;
|
|
37
|
-
onFocusHandler: PropTypes.Requireable<(...args: any[]) => any>;
|
|
38
|
-
};
|
|
22
|
+
({ label, name, value, options, size, onChangeHandler, onSelectHandler, icon, noOptionsMessage, disabled, status, onBlurHandler, onFocusHandler, animated, placeholder, loading, }: DsEditableSelectProps): import("react/jsx-runtime").JSX.Element;
|
|
39
23
|
displayName: string;
|
|
40
24
|
};
|
|
41
25
|
export default DsEditableSelect;
|
package/react/helpers/utils.d.ts
CHANGED
|
@@ -55,3 +55,26 @@ export declare const getSchemaProperties: (schemaId: string, formSchema: JSONSch
|
|
|
55
55
|
* @returns return input type, i.e password or email. If it's not defined, returns text as default.
|
|
56
56
|
*/
|
|
57
57
|
export declare const getInputTypeByFormat: (definition: object) => string;
|
|
58
|
+
/**
|
|
59
|
+
* Performs a deep equality comparison between two values.
|
|
60
|
+
*
|
|
61
|
+
* @template T - The type of the values being compared.
|
|
62
|
+
* @param {T} value - The first value to compare.
|
|
63
|
+
* @param {T} other - The second value to compare.
|
|
64
|
+
* @param {WeakSet} [visited=new WeakSet()] - A WeakSet to keep track of visited objects to handle circular references.
|
|
65
|
+
* @returns {boolean} Returns `true` if the values are deeply equal, `false` otherwise.
|
|
66
|
+
*
|
|
67
|
+
* @description
|
|
68
|
+
* The `isEqual` function performs a deep equality comparison between two values of any type.
|
|
69
|
+
* It handles primitive types, `null`, arrays, and objects.
|
|
70
|
+
*
|
|
71
|
+
* - If both values are primitives, it uses `Object.is()` for comparison.
|
|
72
|
+
* - If both values are `null`, it returns `true`.
|
|
73
|
+
* - If the values have different types, it returns `false`.
|
|
74
|
+
* - If the values are the same reference, it returns `true`.
|
|
75
|
+
* - If the values are arrays, it compares their lengths and recursively compares each element.
|
|
76
|
+
* - If the values are objects, it compares the number of keys and recursively compares each key-value pair.
|
|
77
|
+
* - It handles circular references by keeping track of visited objects using a `WeakSet`.
|
|
78
|
+
*
|
|
79
|
+
*/
|
|
80
|
+
export declare function isEqual<T>(value: T, other: T, visited?: WeakSet<object>): boolean;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -27,5 +27,5 @@ export declare const useStepper: (initialState?: DsStepProps[], selectedState?:
|
|
|
27
27
|
isStep: (stepParam: number | string | DsStepProps) => boolean;
|
|
28
28
|
isLastStep: boolean;
|
|
29
29
|
disableSteps: (stepNameParam: string | Array<string>) => DsStepProps[];
|
|
30
|
-
disableStepsAfter: (stepNameParam: string) =>
|
|
30
|
+
disableStepsAfter: (stepNameParam: string) => void;
|
|
31
31
|
}[];
|