@zealicsolutions/web-ui 0.2.97 → 0.2.99

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

@@ -1,9 +1,15 @@
-import { ReactNode } from 'react';
-export declare type CheckBoxProps = {
-    value: boolean;
-    onClick: (value: boolean) => void;
-    disabled?: boolean;
-    error?: boolean;
-    label?: string | ReactNode;
-};
-export declare const Checkbox: ({ label, onClick, value, disabled, error }: CheckBoxProps) => JSX.Element;
+/// <reference types="react" />
+import { CheckboxInternalConfigProps } from './types';
+export declare type CheckboxProps = {
+    id: string;
+    onClick: (id: string) => void;
+    label: string;
+} & Partial<{
+    isError: boolean;
+    disabled: boolean;
+    isEditMode: boolean;
+    isSelected: boolean;
+    isRichText: boolean;
+    internalConfig: CheckboxInternalConfigProps;
+}>;
+export declare const Checkbox: ({ id, onClick, label, isError, disabled, isEditMode, isSelected, isRichText, internalConfig, }: CheckboxProps) => JSX.Element;

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

@@ -3,7 +3,7 @@ import type { ComponentStory } from '@storybook/react';
 import { Checkbox as CheckboxComponent } from './Checkbox';
 declare const _default: {
     title: string;
-    component: ({ label, onClick, value, disabled, error }: import("./Checkbox").CheckBoxProps) => JSX.Element;
+    component: ({ id, onClick, label, isError, disabled, isEditMode, isSelected, isRichText, internalConfig, }: import("./Checkbox").CheckboxProps) => JSX.Element;
 };
 export default _default;
 export declare const Checkbox: ComponentStory<typeof CheckboxComponent>;

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

@@ -0,0 +1,2 @@
+import { CheckboxInternalConfigProps, CheckBoxStates, CheckboxStylesConfig } from './types';
+export declare const getCheckboxStyles: (isHovered: boolean, checkboxState: CheckBoxStates, internalConfig?: CheckboxInternalConfigProps) => CheckboxStylesConfig;

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

@@ -0,0 +1,18 @@
+import { SizesTypes, ThemeColors } from 'theme';
+import type { StylesType } from 'typescript';
+export declare type CheckboxInternalConfigProps = Partial<{
+    selectedCheckboxBackgroundColor: ThemeColors | string;
+    selectedCheckboxIconColor: ThemeColors | string;
+    buttonPadding: number;
+    textPadding: number;
+    styles: StylesType;
+    wrapperStyles: StylesType;
+    buttonOptionSpacing?: SizesTypes;
+}>;
+export declare type CheckboxStylesConfig = {
+    checkboxIconWrapperColor: StylesType;
+    checkboxIconColor: ThemeColors | string;
+    checkboxWrapperStyles: StylesType;
+    checkboxTextStyles: StylesType;
+};
+export declare type CheckBoxStates = 'selected' | 'disabled' | 'error' | 'default';

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

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { FontSizesTypes, ThemeColors } from 'theme/types';
-import { StylesType } from 'typescript';
+import type { StylesType } from 'typescript';
 export declare type TextTypes = 'primary' | 'secondary' | 'error' | 'success';
 export declare type TextAlign = 'center' | 'right' | 'left';
 export declare type SeoTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
@@ -17,3 +17,6 @@ export declare type TextProps = {
 };
 export declare type TextWrapperProps = PropsWithChildren<TextProps>;
 export declare const TextWrapper: ({ children, seoTag, ...textProps }: TextWrapperProps) => JSX.Element;
+export declare const ErrorText: ({ text }: {
+    text: string;
+}) => JSX.Element;

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

@@ -1,5 +1,5 @@
-import { RadioButtonType, SelectOption } from 'atoms';
-import { ButtonProps, ImageProps, InputFieldProps, RadioButtonFieldProps, SelectFieldProps, TabGroupProps, TextMoleculeProps } from 'molecules';
+import { SelectOption } from 'atoms';
+import { ButtonProps, CheckboxFieldProps, ImageProps, InputFieldProps, RadioButtonFieldProps, SelectFieldProps, TabGroupProps, TextMoleculeProps } from 'molecules';
 import { UseFormReturn } from 'react-hook-form';
 import { CSSProperties } from 'styled-components';
 import type { Nullable, StrictUnion } from 'typescript';
@@ -35,9 +35,9 @@ export interface BooleanAttributes {
 }
 export interface IterableAttributes {
     attributeType: 'iterable';
-    options: SelectOption | RadioButtonType[];
+    options: SelectOption[];
 }
-export declare type MoleculeTypes = 'image' | 'text' | 'button' | 'video' | 'header_tab_group' | 'input_field' | 'select_field' | 'radio_button_field';
+export declare type MoleculeTypes = 'image' | 'text' | 'button' | 'video' | 'header_tab_group' | 'input_field' | 'select_field' | 'radio_button_field' | 'checkbox_field';
 export interface BaseMolecule {
     id: string;
     instance: 'molecule';
@@ -143,6 +143,19 @@ export interface RadioButtonFieldMolecule extends BaseMolecule {
         } & RadioButtonFieldProps<string>>;
     };
 }
-export declare type Molecule = StrictUnion<ImageMolecule | TextMoleculeType | ButtonMolecule | VideoMolecule | TabGroupMolecule | TextInputMolecule | SelectFieldMolecule | RadioButtonFieldMolecule> & {
+export interface CheckboxFieldMolecule extends BaseMolecule {
+    type: 'checkbox_field';
+    attributes: {
+        label: TextAttributes;
+        required: BooleanAttributes;
+        options: IterableAttributes;
+    };
+    config: {
+        props: Partial<{
+            state: 'default' | 'error';
+        } & CheckboxFieldProps>;
+    };
+}
+export declare type Molecule = StrictUnion<ImageMolecule | TextMoleculeType | ButtonMolecule | VideoMolecule | TabGroupMolecule | TextInputMolecule | SelectFieldMolecule | RadioButtonFieldMolecule | CheckboxFieldMolecule> & {
     form?: UseFormReturn<any>;
 };

package/dist/cjs/src/molecules/CheckboxField/CheckboxField.d.ts

@@ -1,10 +1,29 @@
 /// <reference types="react" />
-import { Control } from 'react-hook-form/dist/types';
-import { CheckBoxProps } from 'atoms';
-export declare type CheckboxFieldProps = {
+import { Control, ControllerProps } from 'react-hook-form/dist/types';
+import { SelectOption } from 'atoms';
+import type { StylesType } from 'typescript';
+import { CheckboxInternalConfigProps } from 'atoms/Checkbox/types';
+import { FieldLabelsProps } from '../FieldLabels/FieldLabels';
+export declare type CheckboxesProps = Partial<{
+    checkboxGroupWrapperStyles: StylesType;
+    checkboxFieldWrapperStyles: StylesType;
+    onChange: (id: string) => void;
+    disabled: boolean;
+    options?: SelectOption[];
+    selectedIds?: string[];
+    isError?: boolean;
+    isEditMode?: boolean;
+    isRichText: boolean;
+    internalConfig: CheckboxInternalConfigProps;
+}>;
+export declare type CheckboxFieldProps = Partial<{
+    checkboxesProps: CheckboxesProps;
+    labelsProps: FieldLabelsProps;
     name: string;
-    control?: Control<any>;
-    defaultValue?: boolean;
-    checkboxProps: Omit<CheckBoxProps, 'error' | 'onClick' | 'value'>;
-};
-export declare const CheckboxField: ({ control, name, checkboxProps, defaultValue, }: CheckboxFieldProps) => JSX.Element;
+    rules: ControllerProps['rules'];
+    control: Control<any>;
+    required: boolean;
+    optional: boolean;
+    wrapperStyles: StylesType;
+}>;
+export declare const CheckboxField: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, }: CheckboxFieldProps) => JSX.Element;

package/dist/cjs/src/molecules/CheckboxField/CheckboxField.stories.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import type { StoryFn } from '@storybook/react';
+import { CheckboxField as CheckboxFieldComponent } from 'molecules';
+declare const _default: {
+    title: string;
+    component: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, }: Partial<{
+        checkboxesProps: Partial<{
+            checkboxGroupWrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+            checkboxFieldWrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+            onChange: (id: string) => void;
+            disabled: boolean;
+            options?: import("../..").SelectOption[] | undefined;
+            selectedIds?: string[] | undefined;
+            isError?: boolean | undefined;
+            isEditMode?: boolean | undefined;
+            isRichText: boolean;
+            internalConfig: Partial<{
+                selectedCheckboxBackgroundColor: string;
+                selectedCheckboxIconColor: 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 | undefined;
+            }>;
+        }>;
+        labelsProps: import("molecules").FieldLabelsProps;
+        name: string;
+        rules: Omit<import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
+        control: import("react-hook-form").Control<any, any>;
+        required: boolean;
+        optional: boolean;
+        wrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+    }>) => JSX.Element;
+};
+export default _default;
+export declare const CheckboxField: StoryFn<typeof CheckboxFieldComponent>;

package/dist/cjs/src/molecules/CheckboxField/CheckboxGroup.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CheckboxesProps } from './CheckboxField';
+export declare type CheckboxGroupProps = Partial<{
+    onChange: (checkedIds: string[]) => void;
+    checkboxesProps: CheckboxesProps;
+}>;
+export declare const CheckboxGroup: ({ onChange, checkboxesProps }: CheckboxGroupProps) => JSX.Element;

package/dist/cjs/src/molecules/CheckboxField/styles.d.ts

@@ -0,0 +1,6 @@
+import type { OverrideStyles } from 'typescript';
+import { SizesTypes } from 'theme';
+export declare const CheckboxFieldWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, OverrideStyles, never>;
+export declare const CheckboxGroupWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $spacing?: SizesTypes | undefined;
+} & OverrideStyles, never>;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Control, ControllerProps } from 'react-hook-form/dist/types';
 import { InputProps } from 'atoms';
-import { StylesType } from 'typescript';
+import type { StylesType } from 'typescript';
 import { FieldLabelsProps } from '../FieldLabels/FieldLabels';
 export declare type InputFieldProps = Partial<{
     name: string;

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

@@ -6,24 +6,7 @@ declare const _default: {
     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;
+        rules: Omit<import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
         required: boolean;
         optional: boolean;
         defaultValue: string;

package/dist/cjs/src/molecules/RadioButtonField/RadioButtonField.stories.d.ts

@@ -6,24 +6,7 @@ declare const _default: {
     component: <T extends string>({ control, name, radioButtonsProps, 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;
+        rules: Omit<import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
         required: boolean;
         optional: boolean;
         defaultValue: string;

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
+import { SelectProps } from 'atoms';
 import { Control, ControllerProps } from 'react-hook-form/dist/types';
-import { SelectProps } from '../../atoms/Select/Select';
+import type { StylesType } from 'typescript';
 import { FieldLabelsProps } from '../FieldLabels/FieldLabels';
-import { StylesType } from 'typescript';
 export declare type SelectFieldProps = Partial<{
     selectProps: SelectProps;
     labelsProps: FieldLabelsProps;

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

@@ -7,24 +7,7 @@ declare const _default: {
         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;
+        rules: Omit<import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
         control: import("react-hook-form").Control<any, any>;
         required: boolean;
         optional: boolean;

package/dist/cjs/src/molecules/index.d.ts

@@ -2,6 +2,7 @@ export * from './FieldLabels/FieldLabels';
 export * from './InputField/InputField';
 export * from './FieldMapper/FieldMapper';
 export * from './CheckboxField/CheckboxField';
+export * from './CheckboxField/CheckboxGroup';
 export * from './SelectField/SelectField';
 export * from './CustomValidation/CustomValidation';
 export * from './SelectableInfoCard/SelectableCardGroup';