@zealicsolutions/web-ui 1.0.0 → 1.0.1

package/dist/index.d.ts

@@ -1 +1,499 @@
-export { Button } from 'atoms';
+/// <reference types="react" />
+import { Callback, StylesType } from 'typescript';
+import * as react from 'react';
+import { 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';
+import { InputFieldTypes as InputFieldTypes$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';
+
+declare type BaseButtonProps = {
+    onClick?: Callback;
+    variant?: 'primary' | 'secondary';
+    disabled?: boolean;
+    fullWidth?: boolean;
+};
+declare type ButtonProps = BaseButtonProps & {
+    fullWidth?: boolean;
+    text?: string;
+    loading?: boolean;
+};
+declare const Button: ({ text, onClick, loading, disabled, variant, fullWidth, }: ButtonProps) => JSX.Element;
+
+declare type TouchableOpacityProps = PropsWithChildren<{
+    activeOpacity?: number;
+    withoutOpacityEffect?: boolean;
+    disabled?: boolean;
+}>;
+declare const TouchableOpacity: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
+    activeOpacity?: number | undefined;
+    withoutOpacityEffect?: boolean | undefined;
+    disabled?: boolean | undefined;
+} & {
+    children?: react.ReactNode;
+}, never>;
+
+declare type CheckBoxProps = {
+    value: boolean;
+    onClick: (value: boolean) => void;
+    disabled?: boolean;
+    error?: boolean;
+    label?: string;
+};
+declare const Checkbox: ({ label, onClick, value, disabled, error }: CheckBoxProps) => JSX.Element;
+
+declare type SelectOption = {
+    id: string;
+    label: string;
+};
+declare type SelectProps = {
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    options: SelectOption[];
+    isError?: boolean;
+    isEditMode?: boolean;
+};
+
+declare const Select: ({ onChange, value, placeholder, options, disabled, isError, }: SelectProps) => JSX.Element;
+
+declare type InputIconProps = {
+    name: IconNames$1;
+    onClick?: Callback;
+};
+declare type InputProps = {
+    value?: string;
+    leftIcon?: InputIconProps;
+    rightIcon?: InputIconProps;
+    onBlur?: Callback;
+    type?: InputFieldTypes$1;
+    placeholder?: string;
+    disabled?: boolean;
+    isEditMode?: boolean;
+    isError?: boolean;
+    maxLength?: number;
+    onChange?: (value: string) => void;
+};
+declare const Input: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, ...rest }: InputProps) => JSX.Element;
+
+declare type TextTypes = 'primary' | 'secondary' | 'error' | 'success';
+declare type TextWrapperProps = {
+    children: ReactNode;
+    variant: SizesTypes$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<{}>) => 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 IconProps = {
+    name: IconNames;
+    size?: number;
+    color?: ThemeColors | string;
+    pointerEvents?: 'auto' | 'none';
+};
+declare const availableIcons: {
+    CaretDown: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    CaretUp: ({ color, ...props }: Omit<IconProps, "name">) => JSX.Element;
+    Filter: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Check: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Info: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    View: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    Hide: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    Close: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Minus: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    InfoBoxIcon: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    Warning: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Bell: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Mobile: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Mail: ({ 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;
+    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;
+}, never>;
+
+declare type ImageProps = {
+    src: string;
+    alt?: string;
+    styles?: CSSProperties;
+};
+declare const Image: (props: ImageProps) => JSX.Element;
+
+declare type LinkButtonProps = PropsWithChildren<{
+    activeOpacity?: number;
+    withoutOpacityEffect?: boolean;
+    disabled?: boolean;
+    onClick?: Callback;
+}>;
+declare const LinkButton: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
+    activeOpacity?: number | undefined;
+    withoutOpacityEffect?: boolean | undefined;
+    disabled?: boolean | undefined;
+} & {
+    children?: react.ReactNode;
+} & {
+    activeOpacity?: number | undefined;
+    withoutOpacityEffect?: boolean | undefined;
+    disabled?: boolean | undefined;
+    onClick?: Callback | undefined;
+}, never>;
+
+declare type ValidationTagStatus = 'DEFAULT' | 'ERROR' | 'SUCCESS';
+declare type ValidationTagProps = {
+    status: ValidationTagStatus;
+    text: string;
+};
+declare const ValidationTag: ({ text, status }: ValidationTagProps) => JSX.Element;
+
+declare type TooltipProps = Pick<TooltipProps$1, 'overlay' | 'placement' | 'trigger' | 'visible' | 'children'>;
+declare const StyleWrapper: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {}, never>;
+declare const Tooltip: ({ trigger, placement, ...props }: TooltipProps) => JSX.Element;
+
+declare type ToastType = 'success' | 'infoTierOne' | 'infoTierTwo' | 'warning' | 'error';
+declare type ToastParams = {
+    message: string;
+    type?: ToastType;
+    duration?: number;
+};
+
+declare const toast: ({ message, type, duration }: ToastParams) => void | undefined;
+
+declare type AvatarProps = {
+    size?: SizesTypes | number;
+    withShadow?: boolean;
+    label?: string;
+    backgroundColor?: ThemeColors;
+    textConfig?: {
+        color?: ThemeColors;
+        font?: SizesTypes;
+    };
+    content: {
+        initials?: string;
+        iconName?: IconNames;
+        imageUrl?: string;
+    };
+    onPress?: Callback;
+};
+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;
+};
+declare const HorizontalPadding: styled_components.StyledComponent<"div", styled_components.DefaultTheme, HorizontalPaddingProps, never>;
+declare const VerticalPadding: styled_components.StyledComponent<"div", styled_components.DefaultTheme, HorizontalPaddingProps, never>;
+
+declare type DividerProps = {
+    type?: 'horizontal' | 'vertical';
+    color?: ThemeColors$2 | string;
+    marginVertical?: SizesTypes$2 | number;
+    marginHorizontal?: SizesTypes$2 | number;
+    weight?: number;
+};
+declare const Divider: styled_components.StyledComponent<"div", styled_components.DefaultTheme, DividerProps, never>;
+
+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 type InputFieldTypes = 'number' | 'text' | 'email' | 'password';
+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 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?: MenuItemsProps<T>[];
+    onOptionClick?: (optionKey: K) => void;
+};
+
+declare type TabGroupProps<T = string, K = string> = {
+    tabs: Pick<TabProps<T>, '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, ForgotPasswordForm, ForgotPasswordFormProps, Header, HeaderProps, HorizontalPadding, HorizontalPaddingProps, Icon, IconNames, IconProps, Image, ImageProps, InfoBox, InfoBoxProps, Input, InputField, InputFieldProps, 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, ValidationTag, ValidationTagProps, ValidationTagStatus, VerticalPadding, ZealThemeProvider, defaultTheme, toast, useStep };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zealicsolutions/web-ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/Zealic_Solutions/zeal-ui-web.git"

package/dist/cjs/src/pages/Registiration/index.d.ts

@@ -1 +0,0 @@
-export declare const page = "page";

package/dist/cjs/src/pages/RegistrationPage/RegistrationPage.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { DrawerProps } from '../../molecules/Drawer/styles';
-import { AcquisitionFormProps } from '../../organisms';
-import { DefaultTemplateProps } from '../../templates';
-export declare type RegistrationPageProps<T extends object> = {
-    templateConfig: DefaultTemplateProps;
-    acquisitionFormConfig: AcquisitionFormProps<T>;
-    drawerConfig: Pick<DrawerProps, 'open' | 'onClose'>;
-};
-export declare const RegistrationPage: <T extends object>({ templateConfig, acquisitionFormConfig, drawerConfig, }: RegistrationPageProps<T>) => JSX.Element;

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

@@ -1 +0,0 @@
-export declare const page = "page";

package/dist/esm/src/pages/RegistrationPage/RegistrationPage.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { DrawerProps } from '../../molecules/Drawer/styles';
-import { AcquisitionFormProps } from '../../organisms';
-import { DefaultTemplateProps } from '../../templates';
-export declare type RegistrationPageProps<T extends object> = {
-    templateConfig: DefaultTemplateProps;
-    acquisitionFormConfig: AcquisitionFormProps<T>;
-    drawerConfig: Pick<DrawerProps, 'open' | 'onClose'>;
-};
-export declare const RegistrationPage: <T extends object>({ templateConfig, acquisitionFormConfig, drawerConfig, }: RegistrationPageProps<T>) => JSX.Element;