@zealicsolutions/web-ui 0.3.1 → 0.3.3-2.2125

package/dist/cjs/src/atoms/Buttons/Buttons.stories.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 import { TextButtonProps } from 'atoms/Buttons/TextButton';
 import { FC } from 'react';
 import { IconButton as IconButtonComponent } from './IconButton';
@@ -11,6 +11,6 @@ declare const _default: {
     }, never>;
 };
 export default _default;
-export declare const TouchableOpacity: ComponentStory<FC<TouchableOpacityProps>>;
-export declare const TextButton: ComponentStory<FC<TextButtonProps>>;
-export declare const IconButton: ComponentStory<typeof IconButtonComponent>;
+export declare const TouchableOpacity: StoryFn<FC<TouchableOpacityProps>>;
+export declare const TextButton: StoryFn<FC<TextButtonProps>>;
+export declare const IconButton: StoryFn<typeof IconButtonComponent>;

package/dist/cjs/src/atoms/Buttons/IconButton.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ThemeColors } from 'theme';
 import { IconNames, TouchableOpacityProps } from 'atoms';
-import { Callback } from 'typescript';
+import type { Callback } from 'typescript';
 export declare type IconButtonProps = {
     name: IconNames;
     size?: number;

package/dist/cjs/src/atoms/Circle/Circle.d.ts

@@ -5,4 +5,5 @@ export declare type CircleBoxProps = {
     type: CircleType;
 };
 export declare const Circle: ({ index, type }: CircleBoxProps) => JSX.Element;
+export declare const CirclesWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export {};

package/dist/cjs/src/atoms/GoogleMap/GoogleMap.d.ts

@@ -1,13 +1,2 @@
-import React from 'react';
-import { WithGoogleMapProps } from 'react-google-maps/lib/withGoogleMap';
-import { WithScriptjsProps } from 'react-google-maps/lib/withScriptjs';
-export declare type MapPosition = {
-    lat: number;
-    lng: number;
-};
-export declare type GoogleMapProps = {
-    position: MapPosition;
-} & WithScriptjsProps & WithGoogleMapProps;
-export declare const GoogleMap: React.ComponentClass<{
-    position: MapPosition;
-} & WithScriptjsProps & WithGoogleMapProps, any>;
+/// <reference types="react" />
+export declare const GoogleMap: () => JSX.Element;

package/dist/cjs/src/atoms/Input/Input.d.ts

@@ -3,6 +3,7 @@ import { InputFieldTypes } from 'fieldsConfiguration/types';
 import React from 'react';
 import { ThemeColors } from 'theme/types';
 import type { Callback, StylesType } from 'typescript';
+import { MaskConfig } from './helpers';
 export declare type InputFieldInternalConfigProps = Partial<{
     textColor: ThemeColors | string;
     textFontSize: number;
@@ -31,5 +32,6 @@ export declare type InputProps = {
     onChange?: (value: string) => void;
     onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     internalConfig?: InputFieldInternalConfigProps;
+    config?: MaskConfig;
 };
-export declare const Input: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, ...rest }: InputProps) => JSX.Element;
+export declare const Input: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, config, ...rest }: InputProps) => JSX.Element;

package/dist/cjs/src/atoms/Input/Input.stories.d.ts

@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/react';
 import { InputProps } from './Input';
 declare const _default: {
     title: string;
-    component: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, ...rest }: InputProps) => JSX.Element;
+    component: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, config, ...rest }: InputProps) => JSX.Element;
 };
 export default _default;
 export declare const Input: StoryFn<InputProps>;

package/dist/cjs/src/atoms/Input/helpers.d.ts

@@ -0,0 +1,18 @@
+import { MaskedInputProps } from 'react-text-mask';
+import { HTMLInputTypeAttribute } from 'react';
+import { ThemeColors } from 'theme';
+import { InputProps } from 'atoms';
+import { InputFieldTypes } from '../../fieldsConfiguration';
+export declare type MaskConfig = Partial<{
+    maskPlaceholder: string;
+    dataModelFieldType: InputFieldTypes;
+    maskPattern: Array<string | RegExp>;
+}>;
+export declare const getSpecificInputProps: (type: InputFieldTypes) => {
+    type?: HTMLInputTypeAttribute | undefined;
+    inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+};
+export declare const getMaskInputProps: (type?: InputFieldTypes, config?: MaskConfig) => Pick<MaskedInputProps, 'pipe' | 'mask' | 'placeholder' | 'keepCharPositions'>;
+export declare const getInputIconColor: ({ isEditMode, isFocused, isError, disabled, }: Pick<InputProps, "disabled" | "isError" | "isEditMode"> & {
+    isFocused: boolean;
+}) => ThemeColors;

package/dist/cjs/src/atoms/RadioButtons/RadioButtons.d.ts

@@ -1,37 +1,56 @@
 /// <reference types="react" />
+import { RadioGroup } from '@mui/material';
+import { RefCallBack } from 'react-hook-form/dist/types';
 import { SizesTypes, ThemeColors } from 'theme';
-import { StylesType } from 'typescript';
-export declare type RadioButtonInternalConfigProps = {
+import type { Callback, OverrideStyles, StyledTransientProps, StylesType } from 'typescript';
+import { SelectOption } from '../Select/Select';
+export declare type RadioButtonInternalConfigProps = Partial<{
     selectedRadioOptionBackgroundColor: ThemeColors | string;
     selectedRadioOptionIndicatorColor: ThemeColors | string;
     buttonPadding: number;
     textPadding: number;
     styles: StylesType;
     wrapperStyles: StylesType;
-    buttonOptionSpacing?: SizesTypes;
-};
-export declare type RadioButtonType<T extends string = string> = {
-    id: T;
-    label?: string;
-    error?: boolean;
-    disabled?: boolean;
-    isRichText?: boolean;
-};
+    buttonOptionSpacing: SizesTypes;
+    radioGroupWrapperStyles: StylesType;
+}>;
 export declare type RadioButtonsProps<T extends string> = Partial<{
-    isEditMode: boolean;
-    onChange: (value: T) => void;
+    ref: RefCallBack;
+    name: string;
     value: T;
+    options: SelectOption[];
+    onBlur: Callback;
+    onChange: (value: T) => void;
     isRow: boolean;
-    items: RadioButtonType<T>[];
-    name: string;
+    isError: boolean;
+    disabled: boolean;
+    isEditMode: boolean;
+    isRichText: boolean;
     internalConfig: RadioButtonInternalConfigProps;
 }>;
-export declare const RadioButtons: <T extends string>({ value, items, isRow, isEditMode, onChange, name, internalConfig, }: Partial<{
-    isEditMode: boolean;
-    onChange: (value: T) => void;
+export declare const RadioButtons: <T extends string>({ ref, name, value, options, onBlur, onChange, isRow, isError, disabled, isEditMode, isRichText, internalConfig, }: Partial<{
+    ref: RefCallBack;
+    name: string;
     value: T;
+    options: SelectOption[];
+    onBlur: Callback;
+    onChange: (value: T) => void;
     isRow: boolean;
-    items: RadioButtonType<T>[];
-    name: string;
-    internalConfig: RadioButtonInternalConfigProps;
+    isError: boolean;
+    disabled: boolean;
+    isEditMode: boolean;
+    isRichText: boolean;
+    internalConfig: Partial<{
+        selectedRadioOptionBackgroundColor: ThemeColors | string;
+        selectedRadioOptionIndicatorColor: ThemeColors | string;
+        buttonPadding: number;
+        textPadding: number;
+        styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+        wrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+        buttonOptionSpacing: SizesTypes;
+        radioGroupWrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+    }>;
 }>) => JSX.Element;
+export declare const RadioGroupWrapper: import("styled-components").StyledComponent<typeof RadioGroup, import("styled-components").DefaultTheme, StyledTransientProps<{
+    isRow: boolean;
+}> & OverrideStyles, never>;

package/dist/cjs/src/atoms/RadioButtons/RadioButtons.stories.d.ts

@@ -1,17 +1,31 @@
 /// <reference types="react" />
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 import { RadioButtons as RadioButtonsComponent } from './RadioButtons';
 declare const _default: {
     title: string;
-    component: <T extends string>({ value, items, isRow, isEditMode, onChange, name, internalConfig, }: Partial<{
-        isEditMode: boolean;
-        onChange: (value: T) => void;
+    component: <T extends string>({ ref, name, value, options, onBlur, onChange, isRow, isError, disabled, isEditMode, isRichText, internalConfig, }: Partial<{
+        ref: import("react-hook-form").RefCallBack;
+        name: string;
         value: T;
+        options: import("..").SelectOption[];
+        onBlur: import("../../typescript").Callback;
+        onChange: (value: T) => void;
         isRow: boolean;
-        items: import("./RadioButtons").RadioButtonType<T>[];
-        name: string;
-        internalConfig: import("./RadioButtons").RadioButtonInternalConfigProps;
+        isError: boolean;
+        disabled: boolean;
+        isEditMode: boolean;
+        isRichText: boolean;
+        internalConfig: Partial<{
+            selectedRadioOptionBackgroundColor: string;
+            selectedRadioOptionIndicatorColor: string;
+            buttonPadding: number;
+            textPadding: number;
+            styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+            wrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+            buttonOptionSpacing: import("theme").SizesTypes;
+            radioGroupWrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+        }>;
     }>) => JSX.Element;
 };
 export default _default;
-export declare const RadioButtons: ComponentStory<typeof RadioButtonsComponent>;
+export declare const RadioButtons: StoryFn<typeof RadioButtonsComponent>;

package/dist/cjs/src/atoms/RadioButtons/RadioOption.d.ts

@@ -1,9 +1,12 @@
 /// <reference types="react" />
-import { RadioButtonInternalConfigProps, RadioButtonType } from 'atoms';
+import { RadioButtonInternalConfigProps, SelectOption } from 'atoms';
 declare type RadioOptionProps = {
-    item: RadioButtonType;
+    option: SelectOption;
+    isError?: boolean;
+    disabled?: boolean;
     isEditMode?: boolean;
+    isRichText?: boolean;
     internalConfig?: RadioButtonInternalConfigProps;
 };
-export declare const RadioOption: ({ item, internalConfig, isEditMode }: RadioOptionProps) => JSX.Element;
+export declare const RadioOption: ({ option, isError, disabled, isEditMode, isRichText, internalConfig, }: RadioOptionProps) => JSX.Element;
 export {};

package/dist/cjs/src/atoms/RadioButtons/helpers.d.ts

@@ -1,9 +1,15 @@
-import { RadioButtonInternalConfigProps, RadioButtonType } from 'atoms';
-import { StylesType } from 'typescript';
+import { RadioButtonInternalConfigProps } from 'atoms';
+import type { StylesType } from 'typescript';
 declare type RadioOptionStylesConfig = {
     textStyles: StylesType;
+    groupWrapperStyles: StylesType;
     radioIconWrapperStyles: StylesType;
     radioLabelWrapperStyles: StylesType;
 };
-export declare const getRadioOptionStyles: (item: RadioButtonType, internalConfig?: RadioButtonInternalConfigProps) => RadioOptionStylesConfig;
+declare type GetRadioOptionStylesProps = Partial<{
+    isError: boolean;
+    disabled: boolean;
+    internalConfig: RadioButtonInternalConfigProps;
+}>;
+export declare const getRadioOptionStyles: ({ isError, disabled, internalConfig, }: GetRadioOptionStylesProps) => RadioOptionStylesConfig;
 export {};

package/dist/cjs/src/atoms/RadioButtons/styles.d.ts

@@ -1,9 +1,9 @@
 import { FormControlLabel, Radio } from '@mui/material';
-import { OverrideStyles } from 'typescript';
-export declare const RadioLabelWrapper: import("styled-components").StyledComponent<typeof FormControlLabel, import("styled-components").DefaultTheme, {
-    error: boolean;
-} & OverrideStyles, never>;
-export declare const RadioIconWrapper: import("styled-components").StyledComponent<typeof Radio, import("styled-components").DefaultTheme, {
+import type { OverrideStyles, StyledTransientProps } from 'typescript';
+export declare const RadioLabelWrapper: import("styled-components").StyledComponent<typeof FormControlLabel, import("styled-components").DefaultTheme, StyledTransientProps<{
+    isError?: boolean | undefined;
+}> & OverrideStyles, never>;
+export declare const RadioIconWrapper: import("styled-components").StyledComponent<typeof Radio, import("styled-components").DefaultTheme, StyledTransientProps<{
     disabled: boolean;
-    error: boolean;
-} & OverrideStyles, never>;
+    isError?: boolean | undefined;
+}> & OverrideStyles, never>;

package/dist/cjs/src/atoms/RichTextViewer/types.d.ts

@@ -8,6 +8,7 @@ export declare type TextFormat = Partial<{
     variable: VariablePayload;
     tag: {
         id: string;
+        label: string;
     };
     'numbered-list': boolean;
     'bulleted-list': boolean;

package/dist/cjs/src/atoms/Select/Select.d.ts

@@ -1,9 +1,12 @@
 /// <reference types="react" />
 import { ThemeColors } from 'theme';
-import { StylesType } from 'typescript';
+import type { AnyObject, Callback, StylesType } from 'typescript';
+import { RefCallBack } from 'react-hook-form/dist/types';
 export declare type SelectOption = {
     id: string;
     label: string;
+    value?: string;
+    config?: AnyObject;
 };
 export declare type SelectInternalConfigurationOptions = {
     placeholderTextColor: ThemeColors | string;
@@ -15,16 +18,18 @@ export declare type SelectInternalConfigurationOptions = {
     wrapperStyles: StylesType;
     styles: StylesType;
 };
-export declare type SelectProps = {
-    value?: string;
-    optionsPresentation?: boolean;
-    onChange?: (value: string) => void;
-    placeholder?: string;
-    disabled?: boolean;
-    options?: SelectOption[];
-    isError?: boolean;
-    isEditMode?: boolean;
-    selectInternalConfig?: SelectInternalConfigurationOptions;
-    isRichText?: boolean;
-};
-export declare const Select: ({ onChange, value, placeholder, options, disabled, optionsPresentation, isError, selectInternalConfig, isRichText, }: SelectProps) => JSX.Element;
+export declare type SelectProps = Partial<{
+    ref: RefCallBack;
+    onBlur: Callback;
+    value: string;
+    optionsPresentation: boolean;
+    onChange: (value: string) => void;
+    placeholder: string;
+    disabled: boolean;
+    options: SelectOption[];
+    isError: boolean;
+    isEditMode: boolean;
+    selectInternalConfig: SelectInternalConfigurationOptions;
+    isRichText: boolean;
+}>;
+export declare const Select: ({ ref, onBlur, onChange, value, placeholder, options, disabled, optionsPresentation, isError, selectInternalConfig, isRichText, }: SelectProps) => JSX.Element;

package/dist/cjs/src/atoms/Select/Select.stories.d.ts

@@ -3,7 +3,20 @@ import { StoryFn } from '@storybook/react';
 import { SelectProps } from './Select';
 declare const _default: {
     title: string;
-    component: ({ onChange, value, placeholder, options, disabled, optionsPresentation, isError, selectInternalConfig, isRichText, }: SelectProps) => JSX.Element;
+    component: ({ ref, onBlur, onChange, value, placeholder, options, disabled, optionsPresentation, isError, selectInternalConfig, isRichText, }: Partial<{
+        ref: import("react-hook-form").RefCallBack;
+        onBlur: import("../../typescript").Callback;
+        value: string;
+        optionsPresentation: boolean;
+        onChange: (value: string) => void;
+        placeholder: string;
+        disabled: boolean;
+        options: import("./Select").SelectOption[];
+        isError: boolean;
+        isEditMode: boolean;
+        selectInternalConfig: import("./Select").SelectInternalConfigurationOptions;
+        isRichText: boolean;
+    }>) => JSX.Element;
 };
 export default _default;
 export declare const Select: StoryFn<SelectProps>;

package/dist/cjs/src/containers/Container.d.ts

@@ -1,4 +1,40 @@
 /// <reference types="react" />
 import { ContainerComponentProps, ContainerProps } from 'containers';
-export declare const Container: ({ children, wide, compact, type, props }: ContainerProps) => JSX.Element;
-export declare const ContainerComponent: ({ type, items, config, tabsProps }: ContainerComponentProps) => JSX.Element | null;
+export declare const Container: ({ children, wide, compact, type, props, id, }: Partial<{
+    type: import("containers").ContainerType;
+    wide: Partial<{
+        containerStyle: import("styled-components").CSSProperties;
+        containerProps: Partial<{
+            position: import("containers").ContainerPositionType;
+            scrollBehaviour: import("containers").ContainerScrollBehaviourType;
+            cornerRadius: number;
+            styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+            formProps: import("containers").FormContainerProps;
+            formStepProps: import("containers").FormStepContainerProps;
+        }>;
+    }>;
+    compact: Partial<{
+        containerStyle: import("styled-components").CSSProperties;
+        containerProps: Partial<{
+            position: import("containers").ContainerPositionType;
+            scrollBehaviour: import("containers").ContainerScrollBehaviourType;
+            cornerRadius: number;
+            styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+            formProps: import("containers").FormContainerProps;
+            formStepProps: import("containers").FormStepContainerProps;
+        }>;
+    }>;
+    props: Partial<{
+        position: import("containers").ContainerPositionType;
+        scrollBehaviour: import("containers").ContainerScrollBehaviourType;
+        cornerRadius: number;
+        styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+        formProps: import("containers").FormContainerProps;
+        formStepProps: import("containers").FormStepContainerProps;
+    }>;
+}> & {
+    children?: import("react").ReactNode;
+} & {
+    id: string;
+}) => JSX.Element;
+export declare const ContainerComponent: ({ type, items, config, tabsProps, id, }: ContainerComponentProps) => JSX.Element | null;

package/dist/cjs/src/containers/FormStepContainer.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import { FormStepContainerProps } from 'containers';
+export declare type StepContainerProps = PropsWithChildren<Partial<FormStepContainerProps>> & {
+    id: string;
+};
+export declare const FormStepContainer: ({ order, id }: StepContainerProps) => JSX.Element | null;

package/dist/cjs/src/containers/MoleculeItem.d.ts

@@ -3,6 +3,7 @@ import { Molecule } from 'containers';
 import { TabGroupProps } from 'molecules';
 export declare const getFullLink: (url: string) => string;
 export declare const navigateToPage: (url: string) => void;
+export declare const downloadFile: (url?: string, name?: string) => Promise<void>;
 export declare const MoleculeItem: ({ type, config, attributes, tabsProps, form, id: moleculeId, }: Molecule & {
     tabsProps?: Pick<TabGroupProps<string, string>, "tabs" | "activeTabKey" | "onTabChange"> | undefined;
-}) => JSX.Element;
+}) => JSX.Element | null;

package/dist/cjs/src/containers/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useCheckCondition } from './useCheckCondition';

package/dist/cjs/src/containers/hooks/useCheckCondition.d.ts

@@ -0,0 +1,11 @@
+import { ConditionConfig, ConditionCriteria } from 'containers/types/types';
+import { AnyObject } from 'typescript';
+/**
+ * @attention This hook needs to be used inside of the form container for the form fields
+ */
+export declare const useCheckCondition: (config?: ConditionConfig, formData?: AnyObject) => boolean;
+export declare type GetEvaluateCriteriaFunctionParams = {
+    criteriaList?: ConditionCriteria[];
+    data?: AnyObject;
+};
+export declare const getEvaluateCriteriaFunction: ({ criteriaList, data, }: GetEvaluateCriteriaFunctionParams) => (criteria?: ConditionCriteria) => boolean;

package/dist/cjs/src/containers/hooks/useCheckCondition.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/src/containers/mock-data.d.ts

@@ -1,3 +1,5 @@
 import { ContainerComponentProps } from 'containers';
+export declare const sliderContainerProps: ContainerComponentProps;
 export declare const formContainerProps: ContainerComponentProps;
 export declare const columnContainerProps: ContainerComponentProps;
+export declare const formBuilderData: ContainerComponentProps;

package/dist/cjs/src/containers/styles.d.ts

@@ -5,8 +5,7 @@ export declare const ContainerWrapper: import("styled-components").StyledCompone
         scrollBehaviour: import("containers/types/types").ContainerScrollBehaviourType;
         cornerRadius: number;
         styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
-        formProps: {
-            mode: keyof import("react-hook-form").ValidationMode;
-        };
+        formProps: import("containers/types/types").FormContainerProps;
+        formStepProps: import("containers/types/types").FormStepContainerProps;
     }> | undefined;
 }, never>;