@zealicsolutions/web-ui 0.0.8 → 0.0.9

package/dist/esm/src/assets/index.d.ts

@@ -1,2 +1,3 @@
 export declare const AppLogo: string;
 export declare const HomeBannerImage: string;
+export declare const ProfileGraphic: string;

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

@@ -0,0 +1,13 @@
+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>;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/// <reference types="react-google-maps/types" />
+import type { ComponentStory } from '@storybook/react';
+import { GoogleMap as GoogleMapComponent } from './GoogleMap';
+declare const _default: {
+    title: string;
+    component: import("react").ComponentClass<{
+        position: import("./GoogleMap").MapPosition;
+    } & import("react-google-maps/lib/withScriptjs").WithScriptjsProps & import("react-google-maps/lib/withGoogleMap").WithGoogleMapProps, any>;
+};
+export default _default;
+export declare const GoogleMap: ComponentStory<typeof GoogleMapComponent>;

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

@@ -15,3 +15,4 @@ export * from './Toast/toast';
 export * from './Avatar/Avatar';
 export * from './Paddings/Paddings';
 export * from './Divider/Divider';
+export * from './GoogleMap/GoogleMap';

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

@@ -4,3 +4,8 @@ import { SetPasswordFields } from 'organisms/SetPasswordForm/types';
 export declare const acquisitionFormMockFields: UIFields<any>;
 export declare const setPasswordMockFields: UIFields<SetPasswordFields>;
 export declare const loginMockFields: UIFields<LoginFields>;
+export declare const sectionMockFields: UIFields<any>;
+export declare const profileInformationMockForm: {
+    label: string;
+    fields: UIFields<any>;
+}[];

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

@@ -1,4 +1,6 @@
 import { UIFields } from 'fieldsConfiguration/types';
+import { FieldSectionProps } from 'molecules';
 import { DeepPartial, FieldValues, FormState } from 'react-hook-form';
 export declare const getInitialValuesFromFields: <T extends object>(fields: UIFields<T>) => DeepPartial<T>;
 export declare const isFormValid: <T extends FieldValues>(formState: FormState<T>) => boolean;
+export declare const getFieldsFromFieldSections: <T extends object>(sections: Pick<FieldSectionProps<T>, "fields">[]) => UIFields<T>;

package/dist/esm/src/icons/Edit.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from 'atoms/Icon/Icon';
+export declare const Edit: ({ size, color }: Omit<IconProps, 'name'>) => JSX.Element;

package/dist/esm/src/icons/Save.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from 'atoms/Icon/Icon';
+export declare const Save: ({ size, color }: Omit<IconProps, 'name'>) => JSX.Element;

package/dist/esm/src/icons/index.d.ts

@@ -12,3 +12,5 @@ export { Bell } from './Bell';
 export { Warning } from './Warning';
 export { Mobile } from './Mobile';
 export { Mail } from './Mail';
+export { Edit } from './Edit';
+export { Save } from './Save';

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

@@ -3,7 +3,7 @@ import { Control } from 'react-hook-form/dist/types';
 import { CheckBoxProps } from '../../atoms';
 export declare type CheckboxFieldProps = {
     name: string;
-    control: Control<any>;
+    control?: Control<any>;
     defaultValue?: boolean;
     checkboxProps: Omit<CheckBoxProps, 'error' | 'onClick' | 'value'>;
 };

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

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
 import { DrawerProps } from './styles';
-export declare const Drawer: ({ children, ...props }: PropsWithChildren<DrawerProps>) => JSX.Element;
+export declare const Drawer: ({ children, closeIconColor, ...props }: PropsWithChildren<DrawerProps>) => JSX.Element;

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { Drawer as DrawerComponent } from './Drawer';
 declare const _default: {
     title: string;
-    component: ({ children, ...props }: React.PropsWithChildren<import("./styles").DrawerProps>) => JSX.Element;
+    component: ({ children, closeIconColor, ...props }: React.PropsWithChildren<import("./styles").DrawerProps>) => JSX.Element;
 };
 export default _default;
 export declare const Drawer: ComponentStory<typeof DrawerComponent>;

package/dist/esm/src/molecules/Drawer/styles.d.ts

@@ -1,9 +1,21 @@
+/// <reference types="react" />
+import { SizesTypes, ThemeColors } from 'theme/types';
 import { Drawer as DrawerComponent, DrawerProps as DrawerComponentProps } from '@mui/material';
 export declare type Anchor = 'top' | 'left' | 'bottom' | 'right';
 export declare type DrawerProps = DrawerComponentProps & {
     anchor: Anchor;
+    padding?: SizesTypes | number;
+    closeIconColor?: ThemeColors | string;
 };
 export declare const BaseDrawer: import("styled-components").StyledComponent<typeof DrawerComponent, import("styled-components").DefaultTheme, DrawerComponentProps & {
     anchor: Anchor;
+    padding?: number | SizesTypes | undefined;
+    closeIconColor?: string | undefined;
+}, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    activeOpacity?: number | undefined;
+    withoutOpacityEffect?: boolean | undefined;
+    disabled?: boolean | undefined;
+} & {
+    children?: import("react").ReactNode;
 }, never>;
-export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -3,7 +3,8 @@ import { Control } from 'react-hook-form/dist/types';
 import { UIField } from '../../fieldsConfiguration';
 export declare type FieldMapperProps<T extends object> = {
     field: UIField<keyof T>;
-    control: Control<T>;
+    isEditMode?: boolean;
+    control?: Control<T>;
     spacer?: number;
 };
-export declare const FieldMapper: <T extends object>({ field, spacer, control, }: FieldMapperProps<T>) => JSX.Element;
+export declare const FieldMapper: <T extends object>({ field, isEditMode, spacer, control, }: FieldMapperProps<T>) => JSX.Element;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Control } from 'react-hook-form/dist/types';
+import { UIFields } from '../../fieldsConfiguration';
+export declare type FieldSectionProps<T extends object> = {
+    label: string;
+    control?: Control<T>;
+    isEditMode?: boolean;
+    fields: UIFields<T>;
+};
+export declare const FieldSection: <T extends object>({ fields, label, isEditMode, control, }: FieldSectionProps<T>) => JSX.Element;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ComponentStory } from '@storybook/react';
+import { FieldSection as FieldSectionComponent } from './FieldSection';
+declare const _default: {
+    title: string;
+    component: <T extends object>({ fields, label, isEditMode, control, }: import("./FieldSection").FieldSectionProps<T>) => JSX.Element;
+};
+export default _default;
+export declare const FieldSection: ComponentStory<typeof FieldSectionComponent>;

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

@@ -7,7 +7,7 @@ export declare type SelectFieldProps = {
     selectProps: SelectProps;
     labelsProps?: FieldLabelsProps;
     name: string;
-    control: Control<any>;
+    control?: Control<any>;
     required?: boolean;
     optional?: boolean;
     defaultValue?: string;

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

@@ -11,3 +11,4 @@ export * from './InfoBox/InfoBox';
 export * from './MenuItems/MenuItems';
 export * from './AvatarDropdown/AvatarDropdown';
 export * from './TabGroup/TabGroup';
+export * from './FieldSection/FieldSection';

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Control } from 'react-hook-form';
+import { GoogleMapProps } from '../../atoms';
+import { FieldSectionProps } from '../../molecules';
+export declare type AccountInformationProps<T extends object> = {
+    fieldSections: Pick<FieldSectionProps<T>, 'fields' | 'label'>[];
+    control: Control<any>;
+    isEditMode?: boolean;
+    mapConfig: GoogleMapProps;
+};
+export declare const AccountInformation: <T extends object>({ fieldSections, control, isEditMode, mapConfig, }: AccountInformationProps<T>) => JSX.Element;

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

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import type { Callback } from 'typescript';
+import { AvatarProps } from '../../atoms';
+import { TabProps } from '../../molecules/Tab/Tab';
+export declare type ProfileInformationProps<TabKeys extends string> = {
+    backgroundImageUrl: string;
+    avatarProps: AvatarProps;
+    tabs: TabProps<string, TabKeys>[];
+    tabContents: Record<TabKeys, () => ReactNode>;
+    initialTabKey: TabKeys;
+    title: string;
+    editIcons?: {
+        isEditMode: boolean;
+        onSave: Callback;
+        onEdit: Callback;
+        onClose: Callback;
+    };
+};
+export declare const ProfileInformation: <TabKeys extends string>({ avatarProps, backgroundImageUrl, initialTabKey, tabs, title, editIcons, tabContents, }: ProfileInformationProps<TabKeys>) => JSX.Element;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ComponentStory } from '@storybook/react';
+import { ProfileInformation as ProfileInformationComponent } from './ProfileInformation';
+declare const _default: {
+    title: string;
+    component: <TabKeys extends string>({ avatarProps, backgroundImageUrl, initialTabKey, tabs, title, editIcons, tabContents, }: import("./ProfileInformation").ProfileInformationProps<TabKeys>) => JSX.Element;
+};
+export default _default;
+export declare const ProfileInformation: ComponentStory<typeof ProfileInformationComponent>;

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

@@ -3,4 +3,5 @@ export * from './AcquisitionForm/AcquisitionForm';
 export * from './LoginForm/LoginForm';
 export * from './TwoFactorAuth/TwoFactorAuth';
 export * from './Header/Header';
+export * from './ProfileInformation/ProfileInformation';
 export * from './ForgotPasswordForm/ForgotPasswordForm';

package/dist/esm/src/theme/provider.d.ts

@@ -1,2 +1,5 @@
 import { PropsWithChildren } from 'react';
-export declare const ZealThemeProvider: (props: PropsWithChildren<{}>) => JSX.Element;
+import { DefaultTheme } from 'styled-components';
+export declare const ZealThemeProvider: (props: PropsWithChildren<{
+    theme?: DefaultTheme;
+}>) => JSX.Element;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Callback, StylesType } from 'typescript';
 import * as react from 'react';
-import { PropsWithChildren, ReactNode, Dispatch, SetStateAction } 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 { IconNames as IconNames$1 } from 'atoms/Icon/Icon';
@@ -9,10 +9,13 @@ import { InputFieldTypes as InputFieldTypes$1, FieldTypes as FieldTypes$1, UIFie
 import { SizesTypes as SizesTypes$1, ThemeColors as ThemeColors$1 } from 'theme/types';
 import { SizesTypes as SizesTypes$2, ThemeColors as ThemeColors$2 } 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';
 import { Control } from 'react-hook-form/dist/types';
 import { SelectOption as SelectOption$1 } from 'atoms/Select/types';
 import { DrawerProps as DrawerProps$1 } from '@mui/material';
 import { SetPasswordFields, SetPasswordRuleValidation } from 'organisms/SetPasswordForm/types';
+import { FieldSectionProps as FieldSectionProps$1 } from 'molecules';
 import { DeepPartial, FieldValues, FormState } from 'react-hook-form';
 import { LoginFields as LoginFields$1 } from 'organisms/LoginForm/types';
 
@@ -99,7 +102,9 @@ declare const TextWrapper: styled_components.StyledComponent<"div", styled_compo
 
 declare const defaultTheme: DefaultTheme;
 
-declare const ZealThemeProvider: (props: PropsWithChildren<{}>) => JSX.Element;
+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';
@@ -229,6 +234,17 @@ declare type DividerProps = {
 };
 declare const Divider: styled_components.StyledComponent<"div", styled_components.DefaultTheme, DividerProps, never>;
 
+declare type MapPosition = {
+    lat: number;
+    lng: number;
+};
+declare type GoogleMapProps = {
+    position: MapPosition;
+} & WithScriptjsProps & WithGoogleMapProps;
+declare const GoogleMap: react__default.ComponentClass<{
+    position: MapPosition;
+} & WithScriptjsProps & WithGoogleMapProps, any>;
+
 declare type FieldRuleLabelTypes = 'OPTIONAL' | 'REQUIRED';
 declare type FieldLabelsProps = {
     label: string;
@@ -280,21 +296,28 @@ declare type UIFields<T extends object> = UIField<keyof T>[];
 
 declare const getInitialValuesFromFields: <T extends object>(fields: UIFields$1<T>) => DeepPartial<T>;
 declare const isFormValid: <T extends FieldValues>(formState: FormState<T>) => boolean;
+declare const getFieldsFromFieldSections: <T extends object>(sections: Pick<FieldSectionProps$1<T>, "fields">[]) => UIFields$1<T>;
 
 declare const acquisitionFormMockFields: UIFields$1<any>;
 declare const setPasswordMockFields: UIFields$1<SetPasswordFields>;
 declare const loginMockFields: UIFields$1<LoginFields$1>;
+declare const sectionMockFields: UIFields$1<any>;
+declare const profileInformationMockForm: {
+    label: string;
+    fields: UIFields$1<any>;
+}[];
 
 declare type FieldMapperProps<T extends object> = {
     field: UIField<keyof T>;
-    control: Control<T>;
+    isEditMode?: boolean;
+    control?: Control<T>;
     spacer?: number;
 };
-declare const FieldMapper: <T extends object>({ field, spacer, control, }: FieldMapperProps<T>) => JSX.Element;
+declare const FieldMapper: <T extends object>({ field, isEditMode, spacer, control, }: FieldMapperProps<T>) => JSX.Element;
 
 declare type CheckboxFieldProps = {
     name: string;
-    control: Control<any>;
+    control?: Control<any>;
     defaultValue?: boolean;
     checkboxProps: Omit<CheckBoxProps, 'error' | 'onClick' | 'value'>;
 };
@@ -304,7 +327,7 @@ declare type SelectFieldProps = {
     selectProps: SelectProps;
     labelsProps?: FieldLabelsProps;
     name: string;
-    control: Control<any>;
+    control?: Control<any>;
     required?: boolean;
     optional?: boolean;
     defaultValue?: string;
@@ -351,9 +374,11 @@ declare const Banner: ({ backgroundImage, button, title, description }: BannerPr
 declare type Anchor = 'top' | 'left' | 'bottom' | 'right';
 declare type DrawerProps = DrawerProps$1 & {
     anchor: Anchor;
+    padding?: SizesTypes$1 | number;
+    closeIconColor?: ThemeColors$1 | string;
 };
 
-declare const Drawer: ({ children, ...props }: PropsWithChildren<DrawerProps>) => JSX.Element;
+declare const Drawer: ({ children, closeIconColor, ...props }: PropsWithChildren<DrawerProps>) => JSX.Element;
 
 declare type InfoBoxProps = {
     title: string;
@@ -400,6 +425,14 @@ declare type TabGroupProps<T = string, K = string> = {
 };
 declare const TabGroup: <T extends string, K extends string>({ tabs, spacing, activeTabKey, onTabChange, }: TabGroupProps<T, K>) => JSX.Element;
 
+declare type FieldSectionProps<T extends object> = {
+    label: string;
+    control?: Control<T>;
+    isEditMode?: boolean;
+    fields: UIFields<T>;
+};
+declare const FieldSection: <T extends object>({ fields, label, isEditMode, control, }: FieldSectionProps<T>) => JSX.Element;
+
 declare type SetPasswordFormProps = {
     fields: UIFields<SetPasswordFields>;
     logoUrl: string;
@@ -466,6 +499,22 @@ declare type HeaderProps = {
 };
 declare const Header: ({ logoUrl, links, onActionButtonClick, tabs, withAvatar }: HeaderProps) => JSX.Element;
 
+declare type ProfileInformationProps<TabKeys extends string> = {
+    backgroundImageUrl: string;
+    avatarProps: AvatarProps;
+    tabs: TabProps<string, TabKeys>[];
+    tabContents: Record<TabKeys, () => ReactNode>;
+    initialTabKey: TabKeys;
+    title: string;
+    editIcons?: {
+        isEditMode: boolean;
+        onSave: Callback;
+        onEdit: Callback;
+        onClose: Callback;
+    };
+};
+declare const ProfileInformation: <TabKeys extends string>({ avatarProps, backgroundImageUrl, initialTabKey, tabs, title, editIcons, tabContents, }: ProfileInformationProps<TabKeys>) => JSX.Element;
+
 declare type EmailAddressFields = {
     email: string;
 };
@@ -494,4 +543,4 @@ interface Helpers {
 }
 declare const useStep: (maxStep: number) => [number, Helpers];
 
-export { AcquisitionForm, AcquisitionFormProps, AuthMethod, Avatar, AvatarDropdown, AvatarDropdownProps, AvatarProps, Banner, BannerProps, BaseButtonProps, Button, ButtonProps, CheckBoxProps, Checkbox, CheckboxField, CheckboxFieldProps, CustomValidation, CustomValidationProps, CustomValidationRule, DefaultTemplate, DefaultTemplateProps, Divider, DividerProps, Drawer, FieldLabels, FieldLabelsProps, FieldMapper, FieldMapperProps, FieldRuleLabelTypes, FieldTypes, ForgotPasswordForm, ForgotPasswordFormProps, Header, HeaderProps, HorizontalPadding, HorizontalPaddingProps, Icon, IconNames, IconProps, Image, ImageProps, InfoBox, InfoBoxProps, Input, InputField, InputFieldProps, InputFieldTypes, InputIconProps, InputProps, LinkButton, LinkButtonProps, LoginForm, LoginFormProps, MenuItem, MenuItems, MenuItemsProps, Select, SelectField, SelectFieldProps, SelectableCardGroup, SelectableCardGroupProps, SetPasswordForm, SetPasswordFormProps, 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, ZealThemeProvider, acquisitionFormMockFields, defaultTheme, getFieldPlaceholder, getInitialValuesFromFields, isFormValid, loginMockFields, setPasswordMockFields, toast, toastStyles, useStep };
+export { AcquisitionForm, AcquisitionFormProps, AuthMethod, Avatar, AvatarDropdown, AvatarDropdownProps, AvatarProps, Banner, BannerProps, BaseButtonProps, Button, ButtonProps, CheckBoxProps, Checkbox, CheckboxField, CheckboxFieldProps, CustomValidation, CustomValidationProps, CustomValidationRule, DefaultTemplate, DefaultTemplateProps, Divider, DividerProps, Drawer, FieldLabels, FieldLabelsProps, FieldMapper, FieldMapperProps, FieldRuleLabelTypes, FieldSection, FieldSectionProps, FieldTypes, ForgotPasswordForm, ForgotPasswordFormProps, GoogleMap, GoogleMapProps, Header, HeaderProps, HorizontalPadding, HorizontalPaddingProps, Icon, IconNames, IconProps, Image, ImageProps, InfoBox, InfoBoxProps, Input, InputField, InputFieldProps, InputFieldTypes, InputIconProps, InputProps, LinkButton, LinkButtonProps, LoginForm, LoginFormProps, MapPosition, MenuItem, MenuItems, MenuItemsProps, ProfileInformation, ProfileInformationProps, Select, SelectField, SelectFieldProps, SelectableCardGroup, SelectableCardGroupProps, SetPasswordForm, SetPasswordFormProps, 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, ZealThemeProvider, acquisitionFormMockFields, defaultTheme, getFieldPlaceholder, getFieldsFromFieldSections, getInitialValuesFromFields, isFormValid, loginMockFields, profileInformationMockForm, sectionMockFields, setPasswordMockFields, toast, toastStyles, useStep };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zealicsolutions/web-ui",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/Zealic_Solutions/zeal-ui-web.git"
@@ -91,6 +91,7 @@
     "rc-notification": "^4.6.0",
     "rc-tooltip": "^5.2.2",
     "react-dom": "^18.2.0",
+    "react-google-maps": "^9.4.5",
     "react-hook-form": "^7.34.2",
     "styled-components": "^5.3.5"
   },