@zealicsolutions/web-ui 0.2.88 → 0.2.89

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

@@ -3,7 +3,7 @@ import { InputFieldTypes } from 'fieldsConfiguration/types';
 import React from 'react';
 import { ThemeColors } from 'theme/types';
 import type { Callback, StylesType } from 'typescript';
-export declare type InputFieldInternalConfigProps = {
+export declare type InputFieldInternalConfigProps = Partial<{
     textColor: ThemeColors | string;
     textFontSize: number;
     placeholderTextColor: ThemeColors | string;
@@ -12,7 +12,7 @@ export declare type InputFieldInternalConfigProps = {
     horizontalPadding: number;
     styles: StylesType;
     wrapperStyles: StylesType;
-};
+}>;
 export declare type InputIconProps = {
     name: IconNames;
     onClick?: Callback;

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

@@ -25,5 +25,6 @@ export declare type SelectProps = {
     isError?: boolean;
     isEditMode?: boolean;
     selectInternalConfig?: SelectInternalConfigurationOptions;
+    isRichText?: boolean;
 };
-export declare const Select: ({ onChange, value, placeholder, options, disabled, optionsPresentation, isError, selectInternalConfig, }: SelectProps) => JSX.Element;
+export declare const Select: ({ onChange, value, placeholder, options, disabled, optionsPresentation, isError, selectInternalConfig, isRichText, }: SelectProps) => JSX.Element;

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

@@ -3,7 +3,7 @@ import { StoryFn } from '@storybook/react';
 import { SelectProps } from './Select';
 declare const _default: {
     title: string;
-    component: ({ onChange, value, placeholder, options, disabled, optionsPresentation, isError, selectInternalConfig, }: SelectProps) => JSX.Element;
+    component: ({ onChange, value, placeholder, options, disabled, optionsPresentation, isError, selectInternalConfig, isRichText, }: SelectProps) => JSX.Element;
 };
 export default _default;
 export declare const Select: StoryFn<SelectProps>;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ContainerComponentProps, ContainerProps } from 'containers';
-export declare const Container: ({ children, wide, compact, type, ...props }: ContainerProps) => JSX.Element;
+export declare const Container: ({ children, wide, compact, type, props }: ContainerProps) => JSX.Element;
 export declare const ContainerComponent: ({ type, items, config, tabsProps }: ContainerComponentProps) => JSX.Element | null;

package/dist/esm/src/containers/Container.stories.d.ts

@@ -1,9 +1,6 @@
-/// <reference types="react" />
-import type { StoryFn } from '@storybook/react';
-import { ContainerComponentProps } from 'containers';
-declare const _default: {
-    title: string;
-    component: ({ type, items, config, tabsProps }: ContainerComponentProps) => JSX.Element | null;
-};
-export default _default;
-export declare const Container: StoryFn<ContainerComponentProps>;
+import type { Meta, StoryFn } from '@storybook/react';
+import { ContainerComponent, ContainerComponentProps } from 'containers';
+declare const meta: Meta<typeof ContainerComponent>;
+export default meta;
+declare type Story = StoryFn<ContainerComponentProps>;
+export declare const Container: Story;

package/dist/esm/src/containers/FormContainer.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import { ValidationMode } from 'react-hook-form';
+export declare type FormContainerProps = PropsWithChildren<{
+    mode?: keyof ValidationMode;
+}>;
+export declare const FormContainer: ({ mode, children }: FormContainerProps) => JSX.Element;

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

@@ -3,6 +3,6 @@ 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 MoleculeItem: ({ type, config, attributes, tabsProps, }: Molecule & {
+export declare const MoleculeItem: ({ type, config, attributes, tabsProps, form, }: Molecule & {
     tabsProps?: Pick<TabGroupProps<string, string>, "tabs" | "activeTabKey" | "onTabChange"> | undefined;
 }) => JSX.Element;

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

@@ -0,0 +1,64 @@
+import { ButtonMolecule, ContainerComponentProps, TabGroupMolecule } from 'containers';
+export declare const formContainerProps: ContainerComponentProps;
+export declare const columnContainerProps: {
+    id: string;
+    instance: string;
+    type: string;
+    config: {
+        wide: {
+            containerProps: {
+                position: string;
+                scrollBehaviour: string;
+                cornerRadius: number;
+            };
+            containerStyle: {
+                gap: number;
+                padding: number;
+                backgroundColor: string;
+            };
+        };
+        compact: {
+            containerProps: {};
+            containerStyle: {
+                flexDirection: string;
+                gap: number;
+            };
+        };
+    };
+    items: (ButtonMolecule | TabGroupMolecule | {
+        id: string;
+        instance: string;
+        type: string;
+        attributes: {
+            image: {
+                attributeType: string;
+                imageSource: string;
+            };
+            altText: {
+                attributeType: string;
+                text: string;
+            };
+            link: {
+                attributeType: string;
+                id: string;
+                externalLink: string;
+                type: string;
+                name: string;
+                internalLink: string;
+            };
+        };
+        config: {
+            props: {
+                cornerRadius: number;
+                behaveAs: string;
+            };
+        };
+    })[];
+    tabsProps: {
+        tabs: {
+            tabKey: string;
+            text: string;
+        }[];
+        activeTabKey: string;
+    };
+};

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

@@ -4,5 +4,9 @@ export declare const ContainerWrapper: import("styled-components").StyledCompone
         position: import("containers/types/types").ContainerPositionType;
         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;
+        };
     }> | undefined;
 }, never>;

package/dist/esm/src/containers/types/moleculeTypes.d.ts

@@ -1,8 +1,9 @@
-import { SelectOption } from 'atoms/Select/types';
-import { ButtonProps, ImageProps, TabGroupProps } from 'molecules';
+import { SelectOption } from 'atoms';
+import { ButtonProps, ImageProps, InputFieldProps, SelectFieldProps, TabGroupProps } from 'molecules';
+import { UseFormReturn } from 'react-hook-form';
 import { CSSProperties } from 'styled-components';
 import { FontSizesTypes, ThemeColors } from 'theme';
-import type { Nullable, StrictUnion } from 'typescript';
+import type { Nullable, StrictUnion, StylesType } from 'typescript';
 export declare type ImageAttributes = {
     attributeType: 'image';
     imageSource: string;
@@ -17,8 +18,8 @@ export interface VideoAttributes {
     videoSource: string;
 }
 export interface LinkAttributes {
-    attributeType: 'link';
     id: string;
+    attributeType: 'link';
     type: 'internalLink' | 'externalLink';
     internalLink: Nullable<string>;
     externalLink: Nullable<string>;
@@ -33,7 +34,11 @@ export interface BooleanAttributes {
     attributeType: 'boolean';
     value: boolean;
 }
-export declare type MoleculeTypes = 'image' | 'text' | 'button' | 'video' | 'header_tab_group';
+export interface IterableAttributes {
+    attributeType: 'iterable';
+    options: SelectOption[];
+}
+export declare type MoleculeTypes = 'image' | 'text' | 'button' | 'video' | 'header_tab_group' | 'input_field' | 'select_field';
 export interface BaseMolecule {
     id: string;
     instance: 'molecule';
@@ -57,15 +62,15 @@ export interface TextMoleculeType extends BaseMolecule {
         seoStyle: SelectAttributes;
     };
     config: {
-        props: {
+        props: Partial<{
             fontVariant: FontSizesTypes;
             textSize: number;
             textColor: ThemeColors | string;
             letterSpacing: number;
             lineHeight: number;
             isRichText: boolean;
-            styles: CSSProperties;
-        };
+            styles: StylesType;
+        }>;
     };
 }
 export interface ButtonMolecule extends BaseMolecule {
@@ -75,7 +80,7 @@ export interface ButtonMolecule extends BaseMolecule {
         buttonLink: LinkAttributes;
     };
     config: {
-        props: Omit<ButtonProps, 'disabled' | 'children' | 'link' | 'text' | 'onClick' | 'elementId'>;
+        props: Partial<Omit<ButtonProps, 'disabled' | 'children' | 'link' | 'text' | 'onClick' | 'elementId'>>;
     };
 }
 export interface VideoMolecule extends BaseMolecule {
@@ -88,10 +93,10 @@ export interface VideoMolecule extends BaseMolecule {
         coverImage: ImageAttributes;
     };
     config: {
-        props: {
+        props: Partial<{
             width: number;
             styles: CSSProperties;
-        };
+        }>;
     };
 }
 export interface TabGroupMolecule extends BaseMolecule {
@@ -108,4 +113,32 @@ export interface TabGroupMolecule extends BaseMolecule {
         };
     };
 }
-export declare type Molecule = StrictUnion<ImageMolecule | TextMoleculeType | ButtonMolecule | VideoMolecule | TabGroupMolecule>;
+export interface TextInputMolecule extends BaseMolecule {
+    type: 'input_field';
+    attributes: {
+        label: TextAttributes;
+        required: BooleanAttributes;
+        inputType: SelectAttributes;
+    };
+    config: {
+        props: Partial<{
+            state: 'default' | 'error';
+        } & InputFieldProps>;
+    };
+}
+export interface SelectFieldMolecule extends BaseMolecule {
+    type: 'select_field';
+    attributes: {
+        label: TextAttributes;
+        required: BooleanAttributes;
+        options: IterableAttributes;
+    };
+    config: {
+        props: Partial<{
+            state: 'default' | 'error';
+        } & SelectFieldProps>;
+    };
+}
+export declare type Molecule = StrictUnion<ImageMolecule | TextMoleculeType | ButtonMolecule | VideoMolecule | TabGroupMolecule | TextInputMolecule | SelectFieldMolecule> & {
+    form?: UseFormReturn<any>;
+};

package/dist/esm/src/containers/types/types.d.ts

@@ -2,13 +2,19 @@ import { TabGroupProps } from 'molecules';
 import { PropsWithChildren } from 'react';
 import { CSSProperties } from 'styled-components';
 import { Molecule } from './moleculeTypes';
-export declare type ContainerType = 'row' | 'column' | 'slider';
+import { ValidationMode } from 'react-hook-form';
+import { StylesType } from 'typescript';
+export declare type ContainerType = 'row' | 'column' | 'slider' | 'form';
 export declare type ContainerPositionType = 'fixed' | 'sticky' | 'static';
 export declare type ContainerScrollBehaviourType = 'vertical' | 'horizontal' | 'auto' | 'none';
 export declare type ContainerPropsType = Partial<{
     position: ContainerPositionType;
     scrollBehaviour: ContainerScrollBehaviourType;
     cornerRadius: number;
+    styles: StylesType;
+    formProps: {
+        mode: keyof ValidationMode;
+    };
 }>;
 export declare type AdditionalContainerProps = Partial<{
     containerStyle: CSSProperties;
@@ -18,14 +24,16 @@ export declare type ContainerProps = PropsWithChildren<Partial<{
     type: ContainerType;
     wide: AdditionalContainerProps;
     compact: AdditionalContainerProps;
+    props: ContainerPropsType;
 }>>;
 export declare type ContainerComponentProps = {
     id: string;
     instance: 'container';
     type: ContainerType;
     config: {
-        wide: AdditionalContainerProps;
-        compact: AdditionalContainerProps;
+        wide?: AdditionalContainerProps;
+        compact?: AdditionalContainerProps;
+        props?: ContainerPropsType;
     };
     items: (ContainerComponentProps | Molecule)[];
     tabsProps?: Pick<TabGroupProps, 'tabs' | 'activeTabKey' | 'onTabChange'>;

package/dist/esm/src/fieldsConfiguration/types.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-import { InputProps } from 'atoms';
-import { SelectOption } from 'atoms/Select/types';
-import { FieldLabelsProps } from 'molecules';
 import { ControllerProps } from 'react-hook-form';
-export declare type InputFieldTypes = 'phoneNumber' | 'text' | 'email' | 'password' | 'number' | 'any';
+import { SelectOption } from 'atoms';
+import { InputFieldProps, SelectFieldProps } from 'molecules';
+export declare type InputFieldTypes = 'phone-number' | 'text' | 'email' | 'password' | 'numerical' | 'any';
 export declare type FieldTypes = 'input' | 'select' | 'checkbox';
 export declare type UIField<T = string> = (UIInputField & UISelectField & UICheckboxField) & {
     name: T;
@@ -20,12 +19,10 @@ export declare type UIInputField = {
     inputType?: InputFieldTypes;
     maxLength?: number;
     onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    inputProps?: InputProps;
-    labelsProps?: FieldLabelsProps;
-};
+} & InputFieldProps;
 export declare type UISelectField = {
     options?: SelectOption[];
-};
+} & SelectFieldProps;
 export declare type UICheckboxField = {
     checkboxLabel?: string;
 };

package/dist/esm/src/molecules/Button/Button.d.ts

@@ -37,5 +37,6 @@ export declare type ButtonProps = BaseButtonProps & {
     isRichText?: boolean;
     containerStyle?: CSSProperties;
     buttonStyle?: CSSProperties;
+    type?: 'button' | 'submit' | 'reset';
 };
-export declare const Button: ({ text: textProp, onClick, loading, disabled, variant, isRichText, fullWidth, elementId, link, containerStyle, children, buttonStyle, size, textColor, inactiveTextColor, state, ...props }: ButtonProps) => JSX.Element | null;
+export declare const Button: ({ text: textProp, onClick, loading, disabled, variant, isRichText, fullWidth, elementId, link, containerStyle, children, buttonStyle, size, textColor, inactiveTextColor, type, state, ...props }: ButtonProps) => JSX.Element | null;

package/dist/esm/src/molecules/Button/Button.stories.d.ts

@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/react';
 import { Button as ButtonComponent } from 'molecules/Button/Button';
 declare const _default: {
     title: string;
-    component: ({ text: textProp, onClick, loading, disabled, variant, isRichText, fullWidth, elementId, link, containerStyle, children, buttonStyle, size, textColor, inactiveTextColor, state, ...props }: import("molecules/Button/Button").ButtonProps) => JSX.Element | null;
+    component: ({ text: textProp, onClick, loading, disabled, variant, isRichText, fullWidth, elementId, link, containerStyle, children, buttonStyle, size, textColor, inactiveTextColor, type, state, ...props }: import("molecules/Button/Button").ButtonProps) => JSX.Element | null;
 };
 export default _default;
 export declare const Button: StoryFn<typeof ButtonComponent>;

package/dist/esm/src/molecules/FieldLabels/FieldLabels.d.ts

@@ -38,5 +38,6 @@ export declare type FieldLabelsProps = {
     labelInternalConfig?: LabelInternalConfig;
     ruleLabelInternalConfig?: RuleLabelInternalConfig;
     tooltipInternalConfig?: TooltipInternalConfig;
+    isRichText?: boolean;
 };
-export declare const FieldLabels: ({ label, isTooltipVisible, isError, ruleLabel, tooltipText, labelInternalConfig, ruleLabelInternalConfig, tooltipInternalConfig, }: FieldLabelsProps) => JSX.Element;
+export declare const FieldLabels: ({ label, isTooltipVisible, isError, ruleLabel, tooltipText, labelInternalConfig, ruleLabelInternalConfig, tooltipInternalConfig, isRichText, }: FieldLabelsProps) => JSX.Element;

package/dist/esm/src/molecules/FieldLabels/FieldLabels.stories.d.ts

@@ -3,7 +3,7 @@ import { StoryFn } from '@storybook/react';
 import { FieldLabelsProps } from './FieldLabels';
 declare const _default: {
     title: string;
-    component: ({ label, isTooltipVisible, isError, ruleLabel, tooltipText, labelInternalConfig, ruleLabelInternalConfig, tooltipInternalConfig, }: FieldLabelsProps) => JSX.Element;
+    component: ({ label, isTooltipVisible, isError, ruleLabel, tooltipText, labelInternalConfig, ruleLabelInternalConfig, tooltipInternalConfig, isRichText, }: FieldLabelsProps) => JSX.Element;
 };
 export default _default;
 export declare const FieldLabels: StoryFn<FieldLabelsProps>;

package/dist/esm/src/molecules/InputField/InputField.d.ts

@@ -1,17 +1,17 @@
 /// <reference types="react" />
-import { InputProps } from 'atoms';
 import { Control, ControllerProps } from 'react-hook-form/dist/types';
+import { InputProps } from 'atoms';
 import { StylesType } from 'typescript';
 import { FieldLabelsProps } from '../FieldLabels/FieldLabels';
-export declare type InputFieldProps = {
+export declare type InputFieldProps = Partial<{
     name: string;
-    control?: Control<any>;
-    rules?: ControllerProps['rules'];
-    required?: boolean;
-    optional?: boolean;
-    defaultValue?: string;
+    control: Control<any>;
+    rules: ControllerProps['rules'];
+    required: boolean;
+    optional: boolean;
+    defaultValue: string;
     inputProps: InputProps;
-    styles?: StylesType;
-    labelsProps?: FieldLabelsProps;
-};
+    styles: StylesType;
+    labelsProps: FieldLabelsProps;
+}>;
 export declare const InputField: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, }: InputFieldProps) => JSX.Element;

package/dist/esm/src/molecules/InputField/InputField.stories.d.ts

@@ -3,7 +3,34 @@ import { StoryFn } from '@storybook/react';
 import { InputFieldProps } from './InputField';
 declare const _default: {
     title: string;
-    component: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, }: InputFieldProps) => JSX.Element;
+    component: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, }: Partial<{
+        name: string;
+        control: import("react-hook-form").Control<any, any>;
+        rules: Omit<Partial<{
+            required: string | import("react-hook-form").ValidationRule<boolean>;
+            min: import("react-hook-form").ValidationRule<string | number>;
+            max: import("react-hook-form").ValidationRule<string | number>;
+            maxLength: import("react-hook-form").ValidationRule<number>;
+            minLength: import("react-hook-form").ValidationRule<number>;
+            pattern: import("react-hook-form").ValidationRule<RegExp>;
+            validate: import("react-hook-form").Validate<any> | Record<string, import("react-hook-form").Validate<any>>;
+            valueAsNumber: boolean;
+            valueAsDate: boolean;
+            value: any;
+            setValueAs: (value: any) => any;
+            shouldUnregister?: boolean | undefined;
+            onChange?: ((event: any) => void) | undefined;
+            onBlur?: ((event: any) => void) | undefined;
+            disabled: boolean;
+            deps: string | string[];
+        }>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
+        required: boolean;
+        optional: boolean;
+        defaultValue: string;
+        inputProps: import("../..").InputProps;
+        styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+        labelsProps: import("..").FieldLabelsProps;
+    }>) => JSX.Element;
 };
 export default _default;
 export declare const InputField: StoryFn<InputFieldProps>;

package/dist/esm/src/molecules/SelectField/SelectField.d.ts

@@ -3,15 +3,15 @@ import { Control, ControllerProps } from 'react-hook-form/dist/types';
 import { SelectProps } from '../../atoms/Select/Select';
 import { FieldLabelsProps } from '../FieldLabels/FieldLabels';
 import { StylesType } from 'typescript';
-export declare type SelectFieldProps = {
+export declare type SelectFieldProps = Partial<{
     selectProps: SelectProps;
-    labelsProps?: FieldLabelsProps;
+    labelsProps: FieldLabelsProps;
     name: string;
-    rules?: ControllerProps['rules'];
-    control?: Control<any>;
-    required?: boolean;
-    optional?: boolean;
-    defaultValue?: string;
-    styles?: StylesType;
-};
+    rules: ControllerProps['rules'];
+    control: Control<any>;
+    required: boolean;
+    optional: boolean;
+    defaultValue: string;
+    styles: StylesType;
+}>;
 export declare const SelectField: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, rules, }: SelectFieldProps) => JSX.Element;

package/dist/esm/src/molecules/SelectField/SelectField.stories.d.ts

@@ -3,7 +3,34 @@ import { StoryFn } from '@storybook/react';
 import { SelectFieldProps } from './SelectField';
 declare const _default: {
     title: string;
-    component: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, rules, }: SelectFieldProps) => JSX.Element;
+    component: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, rules, }: Partial<{
+        selectProps: import("../..").SelectProps;
+        labelsProps: import("..").FieldLabelsProps;
+        name: string;
+        rules: Omit<Partial<{
+            required: string | import("react-hook-form").ValidationRule<boolean>;
+            min: import("react-hook-form").ValidationRule<string | number>;
+            max: import("react-hook-form").ValidationRule<string | number>;
+            maxLength: import("react-hook-form").ValidationRule<number>;
+            minLength: import("react-hook-form").ValidationRule<number>;
+            pattern: import("react-hook-form").ValidationRule<RegExp>;
+            validate: import("react-hook-form").Validate<any> | Record<string, import("react-hook-form").Validate<any>>;
+            valueAsNumber: boolean;
+            valueAsDate: boolean;
+            value: any;
+            setValueAs: (value: any) => any;
+            shouldUnregister?: boolean | undefined;
+            onChange?: ((event: any) => void) | undefined;
+            onBlur?: ((event: any) => void) | undefined;
+            disabled: boolean;
+            deps: string | string[];
+        }>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
+        control: import("react-hook-form").Control<any, any>;
+        required: boolean;
+        optional: boolean;
+        defaultValue: string;
+        styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+    }>) => JSX.Element;
 };
 export default _default;
 export declare const SelectField: StoryFn<SelectFieldProps>;

package/dist/esm/src/organisms/SubscribePanel/SubscribePanel.stories.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
-import type { ComponentStory } from '@storybook/react';
-import { SubscribePanel as SubscribePanelComponent } from './SubscribePanel';
+import type { StoryFn } from '@storybook/react';
+import { ContainerComponentProps } from 'containers';
+import { SubscribePanelProps } from './type';
 declare const _default: {
     title: string;
-    component: ({ template, onSubscribe, ...props }: import("./type").SubscribePanelProps) => JSX.Element;
+    component: ({ template, onSubscribe, ...props }: SubscribePanelProps) => JSX.Element;
 };
 export default _default;
-export declare const SubscribePanel: ComponentStory<typeof SubscribePanelComponent>;
+export declare const LegacySubscribePanel: StoryFn<SubscribePanelProps>;
+export declare const SubscribePanel: StoryFn<ContainerComponentProps>;

package/dist/esm/src/organisms/SubscribePanel/organism-data.d.ts

@@ -0,0 +1,2 @@
+import { ContainerComponentProps } from 'containers';
+export declare const subscribePanelMockData: ContainerComponentProps;