@zealicsolutions/web-ui 0.0.4 → 0.0.5

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

@@ -1 +1,8 @@
 export * from './atoms';
+export * from './molecules';
+export * from './organisms';
+export * from './templates';
+export * from './pages';
+export * from './hooks';
+export * from './theme';
+export * from './fieldsConfiguration';

package/dist/index.d.ts

@@ -1,14 +1,20 @@
 /// <reference types="react" />
 import { Callback, StylesType } from 'typescript';
 import * as react from 'react';
-import { PropsWithChildren, ReactNode } from 'react';
+import { PropsWithChildren, ReactNode, Dispatch, SetStateAction } from 'react';
 import * as styled_components from 'styled-components';
-import { CSSProperties } from 'styled-components';
+import { DefaultTheme, CSSProperties } from 'styled-components';
 import { IconNames as IconNames$1 } from 'atoms/Icon/Icon';
-import { InputFieldTypes } from 'fieldsConfiguration/types';
+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 { TooltipProps as TooltipProps$1 } from 'rc-tooltip/lib/Tooltip';
+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 { DeepPartial, FieldValues, FormState } from 'react-hook-form';
+import { LoginFields as LoginFields$1 } from 'organisms/LoginForm/types';
 
 declare type BaseButtonProps = {
     onClick?: Callback;
@@ -70,7 +76,7 @@ declare type InputProps = {
     leftIcon?: InputIconProps;
     rightIcon?: InputIconProps;
     onBlur?: Callback;
-    type?: InputFieldTypes;
+    type?: InputFieldTypes$1;
     placeholder?: string;
     disabled?: boolean;
     isEditMode?: boolean;
@@ -91,8 +97,21 @@ declare type TextWrapperProps = {
 };
 declare const TextWrapper: styled_components.StyledComponent<"div", styled_components.DefaultTheme, TextWrapperProps, never>;
 
+declare const defaultTheme: DefaultTheme;
+
+declare const ZealThemeProvider: (props: PropsWithChildren<{}>) => 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 const toastStyles: styled_components.FlattenSimpleInterpolation;
 
 declare type IconProps = {
     name: IconNames;
@@ -210,4 +229,285 @@ declare type DividerProps = {
 };
 declare const Divider: styled_components.StyledComponent<"div", styled_components.DefaultTheme, DividerProps, never>;
 
-export { Avatar, AvatarProps, BaseButtonProps, Button, ButtonProps, CheckBoxProps, Checkbox, Divider, DividerProps, HorizontalPadding, HorizontalPaddingProps, Icon, IconNames, IconProps, Image, ImageProps, Input, InputIconProps, InputProps, LinkButton, LinkButtonProps, Select, Spacer, SpacerProps, Spinner, StyleWrapper, TextTypes, TextWrapper, TextWrapperProps, Tooltip, TooltipProps, TouchableOpacity, TouchableOpacityProps, ValidationTag, ValidationTagProps, ValidationTagStatus, VerticalPadding, toast };
+declare type FieldRuleLabelTypes = 'OPTIONAL' | 'REQUIRED';
+declare type FieldLabelsProps = {
+    label: string;
+    tooltipText?: string;
+    isError?: boolean;
+    ruleLabel?: FieldRuleLabelTypes;
+};
+declare const FieldLabels: ({ label, isError, ruleLabel, tooltipText }: FieldLabelsProps) => JSX.Element;
+
+declare type InputFieldProps = {
+    name: string;
+    control?: Control<any>;
+    required?: boolean;
+    optional?: boolean;
+    defaultValue?: string;
+    inputProps: InputProps;
+    styles?: CSSProperties;
+    labelsProps?: FieldLabelsProps;
+};
+declare const InputField: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, }: InputFieldProps) => JSX.Element;
+
+declare const getFieldPlaceholder: (type: FieldTypes$1, title?: string) => string;
+
+declare type InputFieldTypes = 'number' | 'text' | 'email' | 'password';
+declare type FieldTypes = 'input' | 'select' | 'date-picker' | 'checkbox' | 'switch';
+declare type UIField<T = string> = (UIInputField | UISelectField | UICheckboxField) & {
+    name: T;
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    optional?: boolean;
+    tooltip?: string;
+};
+declare type UIInputField = {
+    type: 'input';
+    inputType?: InputFieldTypes;
+    maxLength?: number;
+};
+declare type UISelectField = {
+    type: 'select';
+    options: SelectOption$1[];
+};
+declare type UICheckboxField = {
+    type: 'checkbox';
+    checkboxLabel?: string;
+};
+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 acquisitionFormMockFields: UIFields$1<any>;
+declare const setPasswordMockFields: UIFields$1<SetPasswordFields>;
+declare const loginMockFields: UIFields$1<LoginFields$1>;
+
+declare type FieldMapperProps<T extends object> = {
+    field: UIField<keyof T>;
+    control: Control<T>;
+    spacer?: number;
+};
+declare const FieldMapper: <T extends object>({ field, spacer, control, }: FieldMapperProps<T>) => JSX.Element;
+
+declare type CheckboxFieldProps = {
+    name: string;
+    control: Control<any>;
+    defaultValue?: boolean;
+    checkboxProps: Omit<CheckBoxProps, 'error' | 'onClick' | 'value'>;
+};
+declare const CheckboxField: ({ control, name, checkboxProps, defaultValue, }: CheckboxFieldProps) => JSX.Element;
+
+declare type SelectFieldProps = {
+    selectProps: SelectProps;
+    labelsProps?: FieldLabelsProps;
+    name: string;
+    control: Control<any>;
+    required?: boolean;
+    optional?: boolean;
+    defaultValue?: string;
+    styles?: CSSProperties;
+};
+declare const SelectField: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, }: SelectFieldProps) => JSX.Element;
+
+declare type CustomValidationRule<T = string> = {
+    text: string;
+    validate: (value?: T) => boolean;
+};
+declare type CustomValidationProps<T = string> = {
+    label?: string;
+    value: T;
+    isSubmitted?: boolean;
+    rules: CustomValidationRule<T>[];
+};
+declare const CustomValidation: <T extends string = string>({ rules, value, isSubmitted, label, }: CustomValidationProps<T>) => JSX.Element;
+
+declare type BaseSelectableProps<T> = {
+    iconName: IconNames;
+    infoText: string;
+    isActive?: boolean;
+    onClick?: (value: T) => void;
+    value: T;
+};
+
+declare type SelectableCardGroupProps<T> = {
+    cards: BaseSelectableProps<T>[];
+    handleChange?: (value: T | undefined) => void;
+    spacing?: SizesTypes;
+    initialValue?: T;
+};
+declare const SelectableCardGroup: <T extends string>({ cards, handleChange, spacing, initialValue, }: SelectableCardGroupProps<T>) => JSX.Element;
+
+declare type BannerProps = {
+    backgroundImage: ImageProps;
+    title: string;
+    description?: string;
+    button?: ButtonProps;
+};
+declare const Banner: ({ backgroundImage, button, title, description }: BannerProps) => JSX.Element;
+
+declare type Anchor = 'top' | 'left' | 'bottom' | 'right';
+declare type DrawerProps = DrawerProps$1 & {
+    anchor: Anchor;
+};
+
+declare const Drawer: ({ children, ...props }: PropsWithChildren<DrawerProps>) => JSX.Element;
+
+declare type InfoBoxProps = {
+    title: string;
+    description?: string;
+    linkButton?: LinkButtonProps;
+    icon?: IconNames;
+};
+declare const InfoBox: ({ title, icon, description, linkButton }: InfoBoxProps) => JSX.Element;
+
+declare type MenuItem<T> = {
+    id: T;
+    title: string;
+    onClick?: (id: T) => void;
+};
+declare type MenuItemsProps<T> = {
+    title?: string;
+    onItemPress?: (id: T) => void;
+    options?: MenuItem<T>[];
+};
+declare const MenuItems: <T extends string | number>({ title, onItemPress, options, }: MenuItemsProps<T>) => JSX.Element;
+
+declare type AvatarDropdownProps<T> = {
+    avatarProps: AvatarProps;
+    menuConfig: MenuItemsProps<T>;
+};
+declare const AvatarDropdown: <T extends string | number>({ avatarProps, menuConfig, }: AvatarDropdownProps<T>) => JSX.Element;
+
+declare type TabProps<T = string, K = string> = {
+    tabKey: T;
+    text: string;
+    disabled?: boolean;
+    isActive?: boolean;
+    onClick?: (key: T) => void;
+    options?: MenuItem<K>[];
+    onOptionClick?: (optionKey: K) => void;
+};
+
+declare type TabGroupProps<T = string, K = string> = {
+    tabs: Pick<TabProps<T, K>, 'text' | 'tabKey' | 'disabled' | 'options'>[];
+    activeTabKey: T;
+    spacing?: SizesTypes$1;
+    onTabChange?: (tabKey: T) => void;
+    onOptionClick?: (optionKey: K) => void;
+};
+declare const TabGroup: <T extends string, K extends string>({ tabs, spacing, activeTabKey, onTabChange, }: TabGroupProps<T, K>) => JSX.Element;
+
+declare type SetPasswordFormProps = {
+    fields: UIFields<SetPasswordFields>;
+    logoUrl: string;
+    isLoading?: boolean;
+    validations: SetPasswordRuleValidation[];
+    onSubmit: (values: SetPasswordFields) => void;
+    onBack: () => void;
+};
+declare const SetPasswordForm: ({ logoUrl, fields, validations, onBack, onSubmit, isLoading, }: SetPasswordFormProps) => JSX.Element;
+
+declare type AcquisitionFormProps<T extends object> = {
+    fields: UIFields<T>;
+    logoUrl: string;
+    isLoading?: boolean;
+    onSubmit: (values: T) => void;
+    onLinkButtonClick?: Callback;
+};
+declare const AcquisitionForm: <T extends object>({ logoUrl, fields, onSubmit, onLinkButtonClick, isLoading, }: AcquisitionFormProps<T>) => JSX.Element;
+
+declare type LoginFields = {
+    email: string;
+    password: string;
+    rememberMe: boolean;
+};
+
+declare type VerificationCodeForm = {
+    code: string;
+};
+declare type AuthMethod = 'email' | 'sms';
+declare type TwoFactorAuthProps = {
+    logoUrl: string;
+    onNext?: (authMethod: AuthMethod) => Promise<void>;
+    onSubmit?: (values: VerificationCodeForm) => void;
+    onBack?: () => void;
+};
+declare const TwoFactorAuth: ({ logoUrl, onSubmit, onBack, onNext }: TwoFactorAuthProps) => JSX.Element;
+
+declare type LoginFormProps = {
+    fields: UIFields<LoginFields>;
+    logoUrl: string;
+    isLoading?: boolean;
+    twoFactorAuthConfig?: {
+        twoFactorShow: boolean;
+        twoFactorAuthProps: TwoFactorAuthProps;
+    };
+    onSubmit: (values: LoginFields) => void;
+    onSignUpButtonClick?: Callback;
+    onForgotPasswordButtonClick?: Callback;
+};
+declare const LoginForm: ({ logoUrl, fields, onSubmit, onSignUpButtonClick, isLoading, twoFactorAuthConfig, onForgotPasswordButtonClick, }: LoginFormProps) => JSX.Element;
+
+declare type ImportantLink = {
+    text: string;
+    href: string;
+};
+declare type HeaderProps = {
+    links?: ImportantLink[];
+    logoUrl: string;
+    tabs: TabGroupProps['tabs'];
+    withAvatar?: {
+        props: AvatarDropdownProps<string>;
+    };
+    onActionButtonClick?: Callback;
+};
+declare const Header: ({ logoUrl, links, onActionButtonClick, tabs, withAvatar }: HeaderProps) => JSX.Element;
+
+declare type EmailAddressFields = {
+    email: string;
+};
+declare type ForgotPasswordFormProps = {
+    logoUrl: string;
+    isLoading?: boolean;
+    onSubmit?: (values: EmailAddressFields) => void;
+    onBack?: Callback;
+};
+declare const ForgotPasswordForm: ({ logoUrl, onBack, onSubmit, isLoading, }: ForgotPasswordFormProps) => JSX.Element;
+
+declare type DefaultTemplateProps = {
+    header: HeaderProps;
+    banner?: BannerProps;
+    renderContent: () => JSX.Element;
+};
+declare const DefaultTemplate: ({ banner, header, renderContent }: DefaultTemplateProps) => JSX.Element;
+
+declare type AuthDrawerContentType = 'sign-up' | 'sign-in' | 'set-password' | 'forgot-password';
+declare type AuthDrawerContentProps = {
+    type: AuthDrawerContentType;
+    acquisitionFormConfig: AcquisitionFormProps<any>;
+    loginFormConfig: LoginFormProps;
+    forgotPasswordConfig: ForgotPasswordFormProps;
+    setPasswordConfig: SetPasswordFormProps;
+};
+
+declare type RegistrationPageProps = {
+    templateConfig: DefaultTemplateProps;
+    drawerConfig: Pick<DrawerProps, 'open' | 'onClose'>;
+    drawerContentConfig: AuthDrawerContentProps;
+};
+declare const AuthPage: ({ templateConfig, drawerContentConfig, drawerConfig, }: RegistrationPageProps) => JSX.Element;
+
+interface Helpers {
+    goToNextStep: () => void;
+    goToPrevStep: () => void;
+    reset: () => void;
+    canGoToNextStep: boolean;
+    canGoToPrevStep: boolean;
+    setStep: Dispatch<SetStateAction<number>>;
+}
+declare const useStep: (maxStep: number) => [number, Helpers];
+
+export { AcquisitionForm, AcquisitionFormProps, AuthMethod, AuthPage, 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, RegistrationPageProps, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zealicsolutions/web-ui",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/Zealic_Solutions/zeal-ui-web.git"
@@ -16,15 +16,17 @@
     "dist"
   ],
   "types": "dist/index.d.ts",
-  "exports": {
-    ".": "./dist/index.d.ts",
-    "./atoms": "./dist/atoms"
-  },
   "typesVersions": {
     "*": {
-      "atoms": ["dist/atoms"]
+      "atoms": ["dist/atoms"],
+      "molecules": ["dist/molecules"]
     }
   },
+  "exports": {
+    ".": "./dist/esm/index.js",
+    "./atoms": "./dist/esm/src/atoms",
+    "./molecules": "./dist/esm/src/molecules"
+  },
   "scripts": {
     "build": "npm run clean && rollup -c",
     "test": "jest",