@zealicsolutions/web-ui 0.1.8 → 0.1.9

package/dist/index.d.ts

@@ -3,11 +3,14 @@ import { Callback, StylesType } from 'typescript';
 import * as react from 'react';
 import react__default, { PropsWithChildren, ReactNode, Dispatch, SetStateAction } from 'react';
 import * as styled_components from 'styled-components';
-import { DefaultTheme, CSSProperties } from 'styled-components';
+import { CSSProperties, DefaultTheme } from 'styled-components';
 import { IconNames as IconNames$1 } from 'atoms/Icon/Icon';
 import { InputFieldTypes as InputFieldTypes$1, FieldTypes as FieldTypes$1, UIFields as UIFields$1 } from 'fieldsConfiguration/types';
-import { SizesTypes as SizesTypes$1, ThemeColors as ThemeColors$1 } from 'theme/types';
-import { SizesTypes as SizesTypes$2, ThemeColors as ThemeColors$2 } from 'theme';
+import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
+import * as _mui_material from '@mui/material';
+import { DrawerProps as DrawerProps$1 } from '@mui/material';
+import { FontSizesTypes as FontSizesTypes$1, ThemeColors as ThemeColors$1, SizesTypes as SizesTypes$2, BreakpointSizesTypes as BreakpointSizesTypes$1 } from 'theme/types';
+import { ThemeColors as ThemeColors$2, SizesTypes as SizesTypes$1 } from 'theme';
 import { TooltipProps as TooltipProps$1 } from 'rc-tooltip/lib/Tooltip';
 import { WithGoogleMapProps } from 'react-google-maps/lib/withGoogleMap';
 import { WithScriptjsProps } from 'react-google-maps/lib/withScriptjs';
@@ -15,9 +18,13 @@ import { Control, ControllerProps } from 'react-hook-form/dist/types';
 import { InputProps as InputProps$1 } from 'atoms';
 import { SelectOption as SelectOption$1 } from 'atoms/Select/types';
 import { ControllerProps as ControllerProps$1, DeepPartial, FieldValues, FormState } from 'react-hook-form';
-import { DrawerProps as DrawerProps$1 } from '@mui/material';
 import { SetPasswordFields, MaxRuleValidation, MinRuleValidation } from 'organisms/SetPasswordForm/types';
-import { FieldSectionProps as FieldSectionProps$1 } from 'molecules';
+export * from 'organisms/Header/Header/Header';
+import { FooterAProps } from 'organisms/Footer/FooterA';
+import { FooterBProps } from 'organisms/Footer/FooterB';
+import { FooterCProps } from 'organisms/Footer/FooterC';
+import { FieldSectionProps as FieldSectionProps$1, HeroImageProps as HeroImageProps$1, ColumnsProps as ColumnsProps$1, EmphasizedTextProps as EmphasizedTextProps$1 } from 'molecules';
+import { ISIAProps } from 'organisms/ISI/ISIA';
 import { LoginFields as LoginFields$1 } from 'organisms/LoginForm/types';
 
 declare type BaseButtonProps = {
@@ -93,41 +100,18 @@ declare const Input: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled,
 declare type TextTypes = 'primary' | 'secondary' | 'error' | 'success';
 declare type TextWrapperProps = {
     children: ReactNode;
-    variant: SizesTypes$1;
+    variant: FontSizesTypes$1;
     layout?: 'div' | 'span';
     type?: TextTypes;
     styles?: StylesType;
     color?: ThemeColors$1 | string;
 };
-declare const TextWrapper: styled_components.StyledComponent<"div", styled_components.DefaultTheme, TextWrapperProps, never>;
-
-declare const defaultTheme: DefaultTheme;
-
-declare const ZealThemeProvider: (props: PropsWithChildren<{
-    theme?: DefaultTheme;
-}>) => JSX.Element;
-
-declare type ThemeColors = 'primary' | 'secondary' | 'background' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'indigo' | 'blue' | 'white' | 'black' | 'indigoTint' | 'indigoTint2' | 'success' | 'error' | 'warning';
-declare type SizesTypes = '2XL' | 'XL' | 'L' | 'M' | 'S' | 'XS';
-declare type ThemeColorsType = Record<ThemeColors, string>;
-declare type ThemeTextType = Record<SizesTypes, {
-    'font-weight': string;
-    'font-size': number;
-    'line-height': number;
-}>;
-declare type ThemeSizesType = Record<SizesTypes, number>;
-declare type ZealTheme = {
-    colors: ThemeColorsType;
-    fonts: ThemeTextType;
-    sizes: ThemeSizesType;
-};
-
-declare const toastStyles: styled_components.FlattenSimpleInterpolation;
+declare const TextWrapper: styled_components.StyledComponent<_mui_material_OverridableComponent.OverridableComponent<_mui_material.BoxTypeMap<{}, "div">>, styled_components.DefaultTheme, TextWrapperProps, never>;
 
 declare type IconProps = {
     name: IconNames;
     size?: number;
-    color?: ThemeColors | string;
+    color?: ThemeColors$2 | string;
     pointerEvents?: 'auto' | 'none';
 };
 declare const availableIcons: {
@@ -145,20 +129,21 @@ declare const availableIcons: {
     Bell: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
     Mobile: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
     Mail: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Menu: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
 };
 declare type IconNames = keyof typeof availableIcons;
 declare const Icon: ({ name, color, ...props }: IconProps) => JSX.Element;
 
 declare type SpacerProps = {
-    width?: SizesTypes$2 | number;
-    height?: SizesTypes$2 | number;
+    width?: SizesTypes$1 | number;
+    height?: SizesTypes$1 | number;
     layout?: 'div' | 'span';
 };
 declare const Spacer: styled_components.StyledComponent<"div", styled_components.DefaultTheme, SpacerProps, never>;
 
 declare const Spinner: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
     color?: ThemeColors$1 | undefined;
-    size?: SizesTypes$1 | undefined;
+    size?: SizesTypes$2 | undefined;
 }, never>;
 
 declare type ImageProps = {
@@ -208,13 +193,13 @@ declare type ToastParams = {
 declare const toast: ({ message, type, duration }: ToastParams) => void | undefined;
 
 declare type AvatarProps = {
-    size?: SizesTypes$2 | number;
+    size?: SizesTypes$1 | number;
     withShadow?: boolean;
     label?: string;
     backgroundColor?: ThemeColors$2;
     textConfig?: {
         color?: ThemeColors$2;
-        font?: SizesTypes$2;
+        font?: SizesTypes$1;
     };
     content: {
         initials?: string;
@@ -226,7 +211,7 @@ declare type AvatarProps = {
 declare const Avatar: ({ size, withShadow, label, backgroundColor, onPress, content: { initials, iconName, imageUrl }, textConfig: { color, font }, }: AvatarProps) => JSX.Element;
 
 declare type HorizontalPaddingProps = {
-    padding: SizesTypes$2 | number;
+    padding: SizesTypes$1 | number;
 };
 declare const HorizontalPadding: styled_components.StyledComponent<"div", styled_components.DefaultTheme, HorizontalPaddingProps, never>;
 declare const VerticalPadding: styled_components.StyledComponent<"div", styled_components.DefaultTheme, HorizontalPaddingProps, never>;
@@ -234,8 +219,8 @@ declare const VerticalPadding: styled_components.StyledComponent<"div", styled_c
 declare type DividerProps = {
     type?: 'horizontal' | 'vertical';
     color?: ThemeColors$2 | string;
-    marginVertical?: SizesTypes$2 | number;
-    marginHorizontal?: SizesTypes$2 | number;
+    marginVertical?: SizesTypes$1 | number;
+    marginHorizontal?: SizesTypes$1 | number;
     weight?: number;
 };
 declare const Divider: styled_components.StyledComponent<"div", styled_components.DefaultTheme, DividerProps, never>;
@@ -251,6 +236,11 @@ declare const GoogleMap: react__default.ComponentClass<{
     position: MapPosition;
 } & WithScriptjsProps & WithGoogleMapProps, any>;
 
+declare type RichTextEditorProps = Partial<{
+    value: string;
+}>;
+declare const RichTextViewer: ({ value }: RichTextEditorProps) => JSX.Element | null;
+
 declare type FieldRuleLabelTypes = 'OPTIONAL' | 'REQUIRED';
 declare type FieldLabelsProps = {
     label: string;
@@ -355,6 +345,35 @@ declare type CustomValidationProps<T = string> = {
 };
 declare const CustomValidation: <T extends string = string>({ rules, value, isSubmitted, label, }: CustomValidationProps<T>) => JSX.Element;
 
+declare const defaultTheme: DefaultTheme;
+
+declare const ZealThemeProvider: (props: PropsWithChildren<{
+    theme?: DefaultTheme;
+}>) => JSX.Element;
+
+declare type ThemeColors = 'primary' | 'secondary' | 'background' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'indigo' | 'blue' | 'white' | 'black' | 'indigoTint' | 'indigoTint2' | 'success' | 'error' | 'warning';
+declare type SizesTypes = '2XL' | 'XL' | 'L' | 'M' | 'S' | 'XS';
+declare type FontSizesTypes = SizesTypes | 'H2';
+declare type BreakpointSizesTypes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+declare type ThemeColorsType = Record<ThemeColors, string>;
+declare type ThemeTextType = Record<FontSizesTypes, {
+    'font-weight': string;
+    'font-size': number;
+    'line-height': number;
+}>;
+declare type ThemeSizesType = Record<SizesTypes, number>;
+declare type ThemeDevicesType = Record<BreakpointSizesTypes, string>;
+declare type ZealTheme = {
+    colors: ThemeColorsType;
+    fonts: Record<FontSizesTypes, number>;
+    sizes: ThemeSizesType;
+    devices: ThemeDevicesType;
+};
+
+declare const toastStyles: styled_components.FlattenSimpleInterpolation;
+
+declare const useMediaQuery: (breakpointSize: BreakpointSizesTypes$1) => boolean;
+
 declare type BaseSelectableProps<T> = {
     iconName: IconNames;
     infoText: string;
@@ -373,6 +392,7 @@ declare const SelectableCardGroup: <T extends string>({ cards, handleChange, spa
 
 declare type HeroImageAlignment = 'left_aligned' | 'center_aligned';
 declare type HeroImageProps = {
+    type: 'hero_image';
     backgroundImage: ImageProps;
     mainHeading: string;
     subHeading?: string;
@@ -384,7 +404,7 @@ declare const HeroImage: ({ backgroundImage, button, contentAlignment, mainHeadi
 declare type Anchor = 'top' | 'left' | 'bottom' | 'right';
 declare type DrawerProps = DrawerProps$1 & {
     anchor: Anchor;
-    padding?: SizesTypes$1 | number;
+    padding?: SizesTypes$2 | number;
     closeIconColor?: ThemeColors$1 | string;
 };
 
@@ -397,9 +417,11 @@ declare type ColumnItem = {
     icon: string;
 };
 declare type ColumnsProps = {
+    type: 'columns';
     columns: ColumnItem[];
+    containerStyles?: CSSProperties;
 };
-declare const Columns: ({ columns }: ColumnsProps) => JSX.Element;
+declare const Columns: ({ columns, containerStyles }: ColumnsProps) => JSX.Element;
 
 declare type MenuItem<T> = {
     id: T;
@@ -432,11 +454,12 @@ declare type TabProps<T = string, K = string> = {
 declare type TabGroupProps<T = string, K = string> = {
     tabs: Pick<TabProps<T, K>, 'text' | 'tabKey' | 'disabled' | 'options'>[];
     activeTabKey: T;
-    spacing?: SizesTypes$1;
+    spacing?: SizesTypes$2;
     onTabChange?: (tabKey: T) => void;
     onOptionClick?: (optionKey: K) => void;
+    style?: CSSProperties;
 };
-declare const TabGroup: <T extends string, K extends string>({ tabs, spacing, activeTabKey, onTabChange, }: TabGroupProps<T, K>) => JSX.Element;
+declare const TabGroup: <T extends string, K extends string>({ tabs, spacing, activeTabKey, onTabChange, style, }: TabGroupProps<T, K>) => JSX.Element;
 
 declare type FieldSectionProps<T extends object> = {
     label: string;
@@ -446,7 +469,13 @@ declare type FieldSectionProps<T extends object> = {
 };
 declare const FieldSection: <T extends object>({ fields, label, isEditMode, control, }: FieldSectionProps<T>) => JSX.Element;
 
+declare type MenuNavigationProps<T> = {
+    menuConfig: MenuItemsProps<T>;
+};
+declare const MenuNavigation: <T extends string | number>({ menuConfig, }: MenuNavigationProps<T>) => JSX.Element;
+
 declare type EmphasizedTextProps = {
+    type: 'emphasized_text';
     invertColors: boolean;
     textContent: string;
 };
@@ -510,20 +539,19 @@ declare type LoginFormProps = {
 };
 declare const LoginForm: ({ logoUrl, fields, onSubmit, onSignUpButtonClick, isLoading, twoFactorAuthConfig, onForgotPasswordButtonClick, }: LoginFormProps) => JSX.Element;
 
-declare type ImportantLink = {
-    text: string;
-    href: string;
+declare type FooterProps = FooterAProps | FooterBProps | FooterCProps;
+declare const Footer: (props: FooterProps) => JSX.Element;
+
+declare type FooterContentInfo = {
+    phoneNumber: string;
+    addressLine1: string;
+    addressLine2: string;
 };
-declare type HeaderProps = {
-    links?: ImportantLink[];
-    logoUrl: string;
-    tabs: TabGroupProps['tabs'];
-    withAvatar?: {
-        props: AvatarDropdownProps<string>;
-    };
-    onActionButtonClick?: Callback;
+declare type FooterLink = {
+    id: string;
+    name: string;
+    location: string;
 };
-declare const Header: ({ logoUrl, links, onActionButtonClick, tabs, withAvatar }: HeaderProps) => JSX.Element;
 
 declare type ProfileInformationProps<TabKeys extends string> = {
     backgroundImageUrl: string;
@@ -552,6 +580,18 @@ declare type ForgotPasswordFormProps = {
 };
 declare const ForgotPasswordForm: ({ logoUrl, onBack, onSubmit, isLoading, }: ForgotPasswordFormProps) => JSX.Element;
 
+declare type BodyProps = {
+    elements: {
+        data: (HeroImageProps$1 | ColumnsProps$1 | EmphasizedTextProps$1)[];
+        spacer?: number;
+    };
+    containerStyles?: CSSProperties;
+};
+declare const Body: ({ elements, containerStyles }: BodyProps) => JSX.Element;
+
+declare type ISIProps = ISIAProps;
+declare const ISI: (props: ISIProps) => JSX.Element;
+
 declare type DefaultTemplateProps = {
     header: React.ReactNode;
     banner?: React.ReactNode;
@@ -569,4 +609,4 @@ interface Helpers {
 }
 declare const useStep: (maxStep: number) => [number, Helpers];
 
-export { AcquisitionForm, AcquisitionFormProps, AuthMethod, Avatar, AvatarDropdown, AvatarDropdownProps, AvatarProps, BaseButtonProps, Button, ButtonProps, CheckBoxProps, Checkbox, CheckboxField, CheckboxFieldProps, ColumnItem, Columns, ColumnsProps, CustomValidation, CustomValidationProps, CustomValidationRule, DefaultTemplate, DefaultTemplateProps, Divider, DividerProps, Drawer, EmphasizedText, EmphasizedTextProps, FieldLabels, FieldLabelsProps, FieldMapper, FieldMapperProps, FieldRuleLabelTypes, FieldSection, FieldSectionProps, FieldTypes, ForgotPasswordForm, ForgotPasswordFormProps, GoogleMap, GoogleMapProps, Header, HeaderProps, HeroImage, HeroImageAlignment, HeroImageProps, HorizontalPadding, HorizontalPaddingProps, Icon, IconNames, IconProps, Image, ImageProps, Input, InputField, InputFieldProps, InputFieldTypes, InputIconProps, InputProps, LinkButton, LinkButtonProps, LoginForm, LoginFormProps, MapPosition, MenuItem, MenuItems, MenuItemsProps, ProfileInformation, ProfileInformationProps, Select, SelectField, SelectFieldProps, SelectableCardGroup, SelectableCardGroupProps, SetPasswordForm, SetPasswordFormProps, SetPasswordRuleValidation, SizesTypes, Spacer, SpacerProps, Spinner, StyleWrapper, TabGroup, TabGroupProps, TextTypes, TextWrapper, TextWrapperProps, ThemeColors, ThemeColorsType, ThemeSizesType, ThemeTextType, Tooltip, TooltipProps, TouchableOpacity, TouchableOpacityProps, TwoFactorAuth, TwoFactorAuthProps, UICheckboxField, UIField, UIFields, UIInputField, UISelectField, ValidationTag, ValidationTagProps, ValidationTagStatus, VerticalPadding, ZealTheme, ZealThemeProvider, acquisitionFormMockFields, defaultTheme, getFieldPlaceholder, getFieldsFromFieldSections, getInitialValuesFromFields, isFormValid, loginMockFields, profileInformationMockForm, sectionMockFields, setPasswordMockFields, toast, toastStyles, useStep };
+export { AcquisitionForm, AcquisitionFormProps, AuthMethod, Avatar, AvatarDropdown, AvatarDropdownProps, AvatarProps, BaseButtonProps, Body, BodyProps, BreakpointSizesTypes, Button, ButtonProps, CheckBoxProps, Checkbox, CheckboxField, CheckboxFieldProps, ColumnItem, Columns, ColumnsProps, CustomValidation, CustomValidationProps, CustomValidationRule, DefaultTemplate, DefaultTemplateProps, Divider, DividerProps, Drawer, EmphasizedText, EmphasizedTextProps, FieldLabels, FieldLabelsProps, FieldMapper, FieldMapperProps, FieldRuleLabelTypes, FieldSection, FieldSectionProps, FieldTypes, FontSizesTypes, Footer, FooterContentInfo, FooterLink, FooterProps, ForgotPasswordForm, ForgotPasswordFormProps, GoogleMap, GoogleMapProps, HeroImage, HeroImageAlignment, HeroImageProps, HorizontalPadding, HorizontalPaddingProps, ISI, ISIProps, Icon, IconNames, IconProps, Image, ImageProps, Input, InputField, InputFieldProps, InputFieldTypes, InputIconProps, InputProps, LinkButton, LinkButtonProps, LoginForm, LoginFormProps, MapPosition, MenuItem, MenuItems, MenuItemsProps, MenuNavigation, MenuNavigationProps, ProfileInformation, ProfileInformationProps, RichTextEditorProps, RichTextViewer, Select, SelectField, SelectFieldProps, SelectableCardGroup, SelectableCardGroupProps, SetPasswordForm, SetPasswordFormProps, SetPasswordRuleValidation, SizesTypes, Spacer, SpacerProps, Spinner, StyleWrapper, TabGroup, TabGroupProps, TextTypes, TextWrapper, TextWrapperProps, ThemeColors, ThemeColorsType, ThemeDevicesType, ThemeSizesType, ThemeTextType, Tooltip, TooltipProps, TouchableOpacity, TouchableOpacityProps, TwoFactorAuth, TwoFactorAuthProps, UICheckboxField, UIField, UIFields, UIInputField, UISelectField, ValidationTag, ValidationTagProps, ValidationTagStatus, VerticalPadding, ZealTheme, ZealThemeProvider, acquisitionFormMockFields, defaultTheme, getFieldPlaceholder, getFieldsFromFieldSections, getInitialValuesFromFields, isFormValid, loginMockFields, profileInformationMockForm, sectionMockFields, setPasswordMockFields, toast, toastStyles, useMediaQuery, useStep };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zealicsolutions/web-ui",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/Zealic_Solutions/zeal-ui-web.git"
@@ -83,17 +83,20 @@
     "styled-components": "^5.3.5"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "styled-components": "^5.3.5",
     "@mui/material": "^5.10.4",
     "@mui/styled-engine-sc": "npm:@mui/styled-engine-sc@latest",
     "@types/react-dom": "^18.0.6",
+    "date-fns": "^2.29.3",
     "rc-dropdown": "^4.0.1",
     "rc-notification": "^4.6.0",
     "rc-tooltip": "^5.2.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-google-maps": "^9.4.5",
-    "react-hook-form": "^7.34.2"
+    "react-hook-form": "^7.34.2",
+    "slate": "^0.85.0",
+    "slate-react": "^0.83.2",
+    "styled-components": "^5.3.5"
   },
   "resolutions": {
     "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"

package/dist/cjs/src/organisms/Header/Header.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-import type { Callback } from 'typescript';
-import { AvatarDropdownProps, TabGroupProps } from '../../molecules';
-declare type ImportantLink = {
-    text: string;
-    href: string;
-};
-export declare type HeaderProps = {
-    links?: ImportantLink[];
-    logoUrl: string;
-    tabs: TabGroupProps['tabs'];
-    withAvatar?: {
-        props: AvatarDropdownProps<string>;
-    };
-    onActionButtonClick?: Callback;
-};
-export declare const Header: ({ logoUrl, links, onActionButtonClick, tabs, withAvatar }: HeaderProps) => JSX.Element;
-export {};

package/dist/cjs/src/organisms/Header/Header.stories.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { ComponentStory } from '@storybook/react';
-import { Header as HeaderComponent } from './Header';
-declare const _default: {
-    title: string;
-    component: ({ logoUrl, links, onActionButtonClick, tabs, withAvatar }: import("./Header").HeaderProps) => JSX.Element;
-};
-export default _default;
-export declare const Header: ComponentStory<typeof HeaderComponent>;

package/dist/esm/src/organisms/Header/Header.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-import type { Callback } from 'typescript';
-import { AvatarDropdownProps, TabGroupProps } from '../../molecules';
-declare type ImportantLink = {
-    text: string;
-    href: string;
-};
-export declare type HeaderProps = {
-    links?: ImportantLink[];
-    logoUrl: string;
-    tabs: TabGroupProps['tabs'];
-    withAvatar?: {
-        props: AvatarDropdownProps<string>;
-    };
-    onActionButtonClick?: Callback;
-};
-export declare const Header: ({ logoUrl, links, onActionButtonClick, tabs, withAvatar }: HeaderProps) => JSX.Element;
-export {};

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

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { ComponentStory } from '@storybook/react';
-import { Header as HeaderComponent } from './Header';
-declare const _default: {
-    title: string;
-    component: ({ logoUrl, links, onActionButtonClick, tabs, withAvatar }: import("./Header").HeaderProps) => JSX.Element;
-};
-export default _default;
-export declare const Header: ComponentStory<typeof HeaderComponent>;