@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.
Files changed (40) hide show
  1. package/dist/cjs/index.css +246 -246
  2. package/dist/cjs/index.js +26 -26
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/cjs/src/containers/MoleculeItem.d.ts +1 -0
  5. package/dist/cjs/src/containers/mock-data.d.ts +1 -0
  6. package/dist/cjs/src/containers/types/moleculeTypes.d.ts +56 -2
  7. package/dist/cjs/src/containers/types/types.d.ts +7 -4
  8. package/dist/cjs/src/contexts/ButtonActionsContext/ButtonActionsContext.d.ts +11 -0
  9. package/dist/cjs/src/contexts/ButtonActionsContext/ButtonActionsContextProvider.d.ts +11 -0
  10. package/dist/cjs/src/contexts/hooks/useButtonActionsContext.d.ts +1 -0
  11. package/dist/cjs/src/contexts/index.d.ts +3 -0
  12. package/dist/cjs/src/molecules/Button/Button.d.ts +1 -2
  13. package/dist/cjs/src/molecules/CheckboxField/CheckboxField.stories.d.ts +1 -18
  14. package/dist/cjs/src/molecules/InputField/InputField.stories.d.ts +1 -18
  15. package/dist/cjs/src/molecules/RadioButtonField/RadioButtonField.stories.d.ts +1 -18
  16. package/dist/cjs/src/molecules/SelectField/SelectField.stories.d.ts +1 -18
  17. package/dist/cjs/src/molecules/ZealUIModal/ZealUIModal.d.ts +13 -0
  18. package/dist/cjs/src/molecules/index.d.ts +1 -0
  19. package/dist/cjs/src/typescript.d.ts +3 -0
  20. package/dist/esm/index.css +246 -246
  21. package/dist/esm/index.js +12 -12
  22. package/dist/esm/index.js.map +1 -1
  23. package/dist/esm/src/containers/MoleculeItem.d.ts +1 -0
  24. package/dist/esm/src/containers/mock-data.d.ts +1 -0
  25. package/dist/esm/src/containers/types/moleculeTypes.d.ts +56 -2
  26. package/dist/esm/src/containers/types/types.d.ts +7 -4
  27. package/dist/esm/src/contexts/ButtonActionsContext/ButtonActionsContext.d.ts +11 -0
  28. package/dist/esm/src/contexts/ButtonActionsContext/ButtonActionsContextProvider.d.ts +11 -0
  29. package/dist/esm/src/contexts/hooks/useButtonActionsContext.d.ts +1 -0
  30. package/dist/esm/src/contexts/index.d.ts +3 -0
  31. package/dist/esm/src/molecules/Button/Button.d.ts +1 -2
  32. package/dist/esm/src/molecules/CheckboxField/CheckboxField.stories.d.ts +1 -18
  33. package/dist/esm/src/molecules/InputField/InputField.stories.d.ts +1 -18
  34. package/dist/esm/src/molecules/RadioButtonField/RadioButtonField.stories.d.ts +1 -18
  35. package/dist/esm/src/molecules/SelectField/SelectField.stories.d.ts +1 -18
  36. package/dist/esm/src/molecules/ZealUIModal/ZealUIModal.d.ts +13 -0
  37. package/dist/esm/src/molecules/index.d.ts +1 -0
  38. package/dist/esm/src/typescript.d.ts +3 -0
  39. package/dist/index.d.ts +140 -48
  40. 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;
@@ -1,3 +1,4 @@
1
1
  import { ContainerComponentProps } from 'containers';
2
+ export declare const sliderContainerProps: ContainerComponentProps;
2
3
  export declare const formContainerProps: ContainerComponentProps;
3
4
  export declare const columnContainerProps: ContainerComponentProps;
@@ -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
- buttonLink: LinkAttributes;
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<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;
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<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;
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<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;
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<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;
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>;
@@ -27,3 +27,4 @@ export * from './Image/Image';
27
27
  export * from './Caruser/Carousel';
28
28
  export * from './TextMolecule/TextMolecule';
29
29
  export * from './Button/Button';
30
+ export * from './ZealUIModal/ZealUIModal';
@@ -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 {};