@zealicsolutions/web-ui 0.3.7 → 0.3.8
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 +26 -26
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/src/containers/MoleculeItem.d.ts +1 -0
- package/dist/cjs/src/containers/mock-data.d.ts +1 -0
- package/dist/cjs/src/containers/types/moleculeTypes.d.ts +56 -2
- package/dist/cjs/src/containers/types/types.d.ts +7 -4
- package/dist/cjs/src/contexts/ButtonActionsContext/ButtonActionsContext.d.ts +11 -0
- package/dist/cjs/src/contexts/ButtonActionsContext/ButtonActionsContextProvider.d.ts +11 -0
- package/dist/cjs/src/contexts/hooks/useButtonActionsContext.d.ts +1 -0
- package/dist/cjs/src/contexts/index.d.ts +3 -0
- package/dist/cjs/src/molecules/Button/Button.d.ts +1 -2
- package/dist/cjs/src/molecules/CheckboxField/CheckboxField.stories.d.ts +1 -18
- package/dist/cjs/src/molecules/InputField/InputField.stories.d.ts +1 -18
- package/dist/cjs/src/molecules/RadioButtonField/RadioButtonField.stories.d.ts +1 -18
- package/dist/cjs/src/molecules/SelectField/SelectField.stories.d.ts +1 -18
- package/dist/cjs/src/molecules/ZealUIModal/ZealUIModal.d.ts +13 -0
- package/dist/cjs/src/molecules/index.d.ts +1 -0
- package/dist/cjs/src/typescript.d.ts +3 -0
- package/dist/esm/index.css +246 -246
- package/dist/esm/index.js +12 -12
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/src/containers/MoleculeItem.d.ts +1 -0
- package/dist/esm/src/containers/mock-data.d.ts +1 -0
- package/dist/esm/src/containers/types/moleculeTypes.d.ts +56 -2
- package/dist/esm/src/containers/types/types.d.ts +7 -4
- package/dist/esm/src/contexts/ButtonActionsContext/ButtonActionsContext.d.ts +11 -0
- package/dist/esm/src/contexts/ButtonActionsContext/ButtonActionsContextProvider.d.ts +11 -0
- package/dist/esm/src/contexts/hooks/useButtonActionsContext.d.ts +1 -0
- package/dist/esm/src/contexts/index.d.ts +3 -0
- package/dist/esm/src/molecules/Button/Button.d.ts +1 -2
- package/dist/esm/src/molecules/CheckboxField/CheckboxField.stories.d.ts +1 -18
- package/dist/esm/src/molecules/InputField/InputField.stories.d.ts +1 -18
- package/dist/esm/src/molecules/RadioButtonField/RadioButtonField.stories.d.ts +1 -18
- package/dist/esm/src/molecules/SelectField/SelectField.stories.d.ts +1 -18
- package/dist/esm/src/molecules/ZealUIModal/ZealUIModal.d.ts +13 -0
- package/dist/esm/src/molecules/index.d.ts +1 -0
- package/dist/esm/src/typescript.d.ts +3 -0
- package/dist/index.d.ts +140 -48
- package/package.json +1 -1
@@ -3,6 +3,7 @@ import { Molecule } from 'containers';
|
|
3
3
|
import { TabGroupProps } from 'molecules';
|
4
4
|
export declare const getFullLink: (url: string) => string;
|
5
5
|
export declare const navigateToPage: (url: string) => void;
|
6
|
+
export declare const downloadFile: (url?: string, name?: string) => Promise<void>;
|
6
7
|
export declare const MoleculeItem: ({ type, config, attributes, tabsProps, form, id: moleculeId, }: Molecule & {
|
7
8
|
tabsProps?: Pick<TabGroupProps<string, string>, "tabs" | "activeTabKey" | "onTabChange"> | undefined;
|
8
9
|
}) => JSX.Element;
|
@@ -2,12 +2,56 @@ import { SelectOption } from 'atoms';
|
|
2
2
|
import { AdditionalTabContainerProps, ButtonProps, CheckboxFieldProps, ImageProps, InputFieldProps, RadioButtonFieldProps, SelectFieldProps, TabGroupProps, TextMoleculeProps } from 'molecules';
|
3
3
|
import { UseFormReturn } from 'react-hook-form';
|
4
4
|
import { CSSProperties } from 'styled-components';
|
5
|
-
import type { Nullable, StrictUnion } from 'typescript';
|
5
|
+
import type { AnyObject, Nullable, StrictUnion } from 'typescript';
|
6
|
+
import { ContainerComponentProps } from './types';
|
7
|
+
export declare type ActionTypes = 'link' | 'popup' | 'drawer' | 'download' | 'submit' | 'reset' | 'destroy';
|
8
|
+
export declare type FileType = 'image' | 'video' | 'document' | 'audio';
|
9
|
+
export declare type ContentStatus = 'in_use' | 'draft';
|
10
|
+
export declare type FileMatrixMessageDTO = Readonly<Partial<{
|
11
|
+
id: string;
|
12
|
+
text: string;
|
13
|
+
label: string;
|
14
|
+
locationId: string;
|
15
|
+
}>>;
|
16
|
+
export declare type FileObjectDTO = Readonly<Partial<{
|
17
|
+
id: string;
|
18
|
+
name: string;
|
19
|
+
fileType: FileType;
|
20
|
+
description: string;
|
21
|
+
originalName: string;
|
22
|
+
url: string;
|
23
|
+
size: number;
|
24
|
+
type: FileType;
|
25
|
+
updatedAt: string;
|
26
|
+
createdAt: string;
|
27
|
+
status: ContentStatus;
|
28
|
+
tags: FileMatrixMessageDTO[];
|
29
|
+
}>> | null;
|
30
|
+
declare type LinkAction = Omit<LinkAttributes, 'attributeType'>;
|
31
|
+
declare type PopupDrawerAction = ContainerComponentProps;
|
32
|
+
declare type DownloadAction = FileObjectDTO;
|
33
|
+
declare type SubmitAction = AnyObject;
|
34
|
+
declare type CancelAction = AnyObject;
|
35
|
+
declare type ResetAction = AnyObject;
|
36
|
+
declare type DestroyAction = AnyObject;
|
37
|
+
declare type Action = {
|
38
|
+
type: ActionTypes;
|
39
|
+
} & Partial<{
|
40
|
+
link: LinkAction;
|
41
|
+
popup: PopupDrawerAction;
|
42
|
+
drawer: PopupDrawerAction;
|
43
|
+
download: DownloadAction;
|
44
|
+
submit: SubmitAction;
|
45
|
+
cancel: CancelAction;
|
46
|
+
reset: ResetAction;
|
47
|
+
destroy: DestroyAction;
|
48
|
+
}>;
|
6
49
|
export declare type ImageAttributes = {
|
7
50
|
attributeType: 'image';
|
8
51
|
imageSource: string;
|
9
52
|
};
|
10
53
|
export interface TextAttributes {
|
54
|
+
id?: string;
|
11
55
|
attributeType: 'text';
|
12
56
|
isRichText: boolean;
|
13
57
|
text: string;
|
@@ -16,6 +60,10 @@ export interface VideoAttributes {
|
|
16
60
|
attributeType: 'video';
|
17
61
|
videoSource: string;
|
18
62
|
}
|
63
|
+
export interface ActionAttributes {
|
64
|
+
attributeType: 'action';
|
65
|
+
action: Action;
|
66
|
+
}
|
19
67
|
export interface LinkAttributes {
|
20
68
|
id: string;
|
21
69
|
attributeType: 'link';
|
@@ -25,6 +73,7 @@ export interface LinkAttributes {
|
|
25
73
|
name: string;
|
26
74
|
}
|
27
75
|
export interface SelectAttributes {
|
76
|
+
id?: string;
|
28
77
|
attributeType: 'select';
|
29
78
|
value: string;
|
30
79
|
options: SelectOption[];
|
@@ -42,6 +91,10 @@ export interface BaseMolecule {
|
|
42
91
|
id: string;
|
43
92
|
instance: 'molecule';
|
44
93
|
type: MoleculeTypes;
|
94
|
+
metadata?: AnyObject;
|
95
|
+
idForFrontend?: string;
|
96
|
+
moleculeLibraryId?: string;
|
97
|
+
organismLibraryMoleculeId?: string;
|
45
98
|
}
|
46
99
|
export interface ImageMolecule extends BaseMolecule {
|
47
100
|
type: 'image';
|
@@ -68,7 +121,7 @@ export interface ButtonMolecule extends BaseMolecule {
|
|
68
121
|
type: 'button';
|
69
122
|
attributes: {
|
70
123
|
title: TextAttributes;
|
71
|
-
|
124
|
+
action: ActionAttributes;
|
72
125
|
};
|
73
126
|
config: {
|
74
127
|
props: Partial<Omit<ButtonProps, 'disabled' | 'children' | 'link' | 'text' | 'onClick' | 'elementId'>>;
|
@@ -153,3 +206,4 @@ export interface CheckboxFieldMolecule extends BaseMolecule {
|
|
153
206
|
export declare type Molecule = StrictUnion<ImageMolecule | TextMoleculeType | ButtonMolecule | VideoMolecule | TabGroupMolecule | TextInputMolecule | SelectFieldMolecule | RadioButtonFieldMolecule | CheckboxFieldMolecule> & {
|
154
207
|
form?: UseFormReturn<any>;
|
155
208
|
};
|
209
|
+
export {};
|
@@ -1,11 +1,11 @@
|
|
1
1
|
import { TabGroupProps } from 'molecules';
|
2
2
|
import { PropsWithChildren } from 'react';
|
3
3
|
import { CSSProperties } from 'styled-components';
|
4
|
-
import { Molecule } from './moleculeTypes';
|
5
4
|
import { ValidationMode } from 'react-hook-form';
|
6
|
-
import { StylesType } from 'typescript';
|
5
|
+
import type { AnyObject, StylesType } from 'typescript';
|
6
|
+
import { Molecule } from './moleculeTypes';
|
7
7
|
export declare type ContainerType = 'row' | 'column' | 'slider' | 'form';
|
8
|
-
export declare type ContainerPositionType = 'fixed' | 'sticky' | 'static';
|
8
|
+
export declare type ContainerPositionType = 'fixed' | 'sticky' | 'static' | 'relative';
|
9
9
|
export declare type ContainerScrollBehaviourType = 'vertical' | 'horizontal' | 'auto' | 'none';
|
10
10
|
export declare type ContainerPropsType = Partial<{
|
11
11
|
position: ContainerPositionType;
|
@@ -30,11 +30,14 @@ export declare type ContainerComponentProps = {
|
|
30
30
|
id: string;
|
31
31
|
instance: 'container';
|
32
32
|
type: ContainerType;
|
33
|
+
items: (ContainerComponentProps | Molecule)[];
|
33
34
|
config: {
|
34
35
|
wide?: AdditionalContainerProps;
|
35
36
|
compact?: AdditionalContainerProps;
|
36
37
|
props?: ContainerPropsType;
|
37
38
|
};
|
38
|
-
items: (ContainerComponentProps | Molecule)[];
|
39
39
|
tabsProps?: Pick<TabGroupProps, 'tabs' | 'activeTabKey' | 'onTabChange'>;
|
40
|
+
metadata?: AnyObject;
|
41
|
+
attributes?: AnyObject;
|
42
|
+
containerLibraryId?: string;
|
40
43
|
};
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import { Dispatch, SetStateAction } from 'react';
|
2
|
+
import { ContainerComponentProps } from 'containers';
|
3
|
+
export declare type ButtonActionsContextType = {
|
4
|
+
actionContent?: ContainerComponentProps;
|
5
|
+
setActionContent: Dispatch<SetStateAction<ContainerComponentProps>>;
|
6
|
+
isModalVisible: boolean;
|
7
|
+
setModalVisible: Dispatch<SetStateAction<boolean>>;
|
8
|
+
isDrawerVisible: boolean;
|
9
|
+
setDrawerVisible: Dispatch<SetStateAction<boolean>>;
|
10
|
+
};
|
11
|
+
export declare const ButtonActionsContext: import("react").Context<ButtonActionsContextType>;
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import { Dispatch, PropsWithChildren, SetStateAction } from 'react';
|
2
|
+
import { ContainerComponentProps } from 'containers';
|
3
|
+
export declare type ButtonActionsProviderProps = PropsWithChildren<Partial<{
|
4
|
+
actionContent: ContainerComponentProps;
|
5
|
+
setActionContent: Dispatch<SetStateAction<ContainerComponentProps>>;
|
6
|
+
isModalVisible: boolean;
|
7
|
+
setModalVisible: Dispatch<SetStateAction<boolean>>;
|
8
|
+
setDrawerVisible: Dispatch<SetStateAction<boolean>>;
|
9
|
+
isDrawerVisible: boolean;
|
10
|
+
}>>;
|
11
|
+
export declare const ButtonActionsProvider: ({ children }: ButtonActionsProviderProps) => JSX.Element;
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare const useButtonActionsContext: () => import("contexts/ButtonActionsContext/ButtonActionsContext").ButtonActionsContextType;
|
@@ -2,3 +2,6 @@ export * from './MlrRichTextViewerContext/MlrRichTextViewerProvider';
|
|
2
2
|
export * from './MlrRichTextViewerContext/MlrRichTextViewerContext';
|
3
3
|
export * from './MlrRichTextViewerContext/types';
|
4
4
|
export * from './hooks/useMlrRichTextViewerContext';
|
5
|
+
export * from './hooks/useButtonActionsContext';
|
6
|
+
export * from './ButtonActionsContext/ButtonActionsContext';
|
7
|
+
export * from './ButtonActionsContext/ButtonActionsContextProvider';
|
@@ -1,7 +1,6 @@
|
|
1
1
|
import { PropsWithChildren } from 'react';
|
2
2
|
import { FontSizesTypes, SizesTypes, ThemeColors } from 'theme';
|
3
|
-
import type { Callback } from 'typescript';
|
4
|
-
import { StylesType } from 'typescript';
|
3
|
+
import type { Callback, StylesType } from 'typescript';
|
5
4
|
export declare type ButtonVariant = 'primary' | 'secondary' | 'text' | 'custom';
|
6
5
|
export declare type ButtonType = 'button' | 'submit' | 'reset';
|
7
6
|
export declare type BaseButtonProps = PropsWithChildren<{
|
@@ -26,24 +26,7 @@ declare const _default: {
|
|
26
26
|
}>;
|
27
27
|
labelsProps: import("molecules").FieldLabelsProps;
|
28
28
|
name: string;
|
29
|
-
rules: Omit<
|
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;
|
29
|
+
rules: Omit<import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
|
47
30
|
control: import("react-hook-form").Control<any, any>;
|
48
31
|
required: boolean;
|
49
32
|
optional: boolean;
|
@@ -6,24 +6,7 @@ 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<
|
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;
|
9
|
+
rules: Omit<import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
|
27
10
|
required: boolean;
|
28
11
|
optional: boolean;
|
29
12
|
defaultValue: string;
|
@@ -5,24 +5,7 @@ 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<
|
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;
|
8
|
+
rules: Omit<import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
|
26
9
|
styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
|
27
10
|
control: import("react-hook-form").Control<any, any>;
|
28
11
|
optional: boolean;
|
@@ -20,24 +20,7 @@ declare const _default: {
|
|
20
20
|
}>;
|
21
21
|
labelsProps: import("..").FieldLabelsProps;
|
22
22
|
name: string;
|
23
|
-
rules: Omit<
|
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;
|
23
|
+
rules: Omit<import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
|
41
24
|
control: import("react-hook-form").Control<any, any>;
|
42
25
|
required: boolean;
|
43
26
|
optional: boolean;
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import { ModalProps as MUIModalProps } from '@mui/material';
|
2
|
+
import { KeyboardEvent, PropsWithChildren } from 'react';
|
3
|
+
import { CSSProperties } from 'styled-components';
|
4
|
+
import { Callback, OverrideStyles } from '../../typescript';
|
5
|
+
export declare type ZealUIModalProps = PropsWithChildren<Pick<MUIModalProps, 'open'>> & {
|
6
|
+
padding?: number | string;
|
7
|
+
wrapperStyles?: CSSProperties;
|
8
|
+
onKeyDown?: <T extends HTMLElement>(event: KeyboardEvent<T>) => void;
|
9
|
+
modalStyles?: CSSProperties;
|
10
|
+
onClose?: Callback;
|
11
|
+
};
|
12
|
+
export declare const ZealUIModal: ({ children, wrapperStyles, padding, onKeyDown, modalStyles, onClose, ...rest }: ZealUIModalProps) => JSX.Element;
|
13
|
+
export declare const ModalWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, OverrideStyles, never>;
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import { DefaultTheme, ThemedCssFunction } from 'styled-components';
|
2
|
+
export declare type FileType = 'image' | 'video' | 'document' | 'audio';
|
2
3
|
export declare type StylesType = ReturnType<ThemedCssFunction<DefaultTheme>>;
|
3
4
|
export declare type StyledTransientProps<T> = {
|
4
5
|
[K in keyof T & string as `$${K}`]: T[K];
|
@@ -11,4 +12,6 @@ export declare type Nullable<T> = T | null;
|
|
11
12
|
declare type UnionKeys<T> = T extends any ? keyof T : never;
|
12
13
|
declare type StrictUnionHelper<T, TAll> = T extends any ? T & Partial<Record<Exclude<UnionKeys<TAll>, keyof T>, never>> : never;
|
13
14
|
export declare type StrictUnion<T> = StrictUnionHelper<T, T>;
|
15
|
+
export declare type AnyObject = Record<string, unknown>;
|
16
|
+
export declare type LooseObject = Record<string, any>;
|
14
17
|
export {};
|