@livechat/design-system-react-components 1.0.0-y.0 → 1.1.0

package/dist/components/Tab/Tab.stories.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { TabProps } from './Tab';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+} & {
+    count?: number | undefined;
+    isSelected?: boolean | undefined;
+    asBadge?: boolean | undefined;
+    size?: import("../..").Size | undefined;
+} & {
+    children?: React.ReactNode;
+}> | import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: undefined;
+} & {
+    count?: number | undefined;
+    isSelected?: boolean | undefined;
+    asBadge?: boolean | undefined;
+    size?: import("../..").Size | undefined;
+} & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+type ITabArgs = TabProps;
+export declare const Tab: {
+    (args: ITabArgs): React.ReactElement;
+    args: TabProps;
+};
+export declare const StatesAndVariants: () => React.ReactElement;
+export declare const Sizes: () => React.ReactElement;

package/dist/components/Tab/TabsWrapper.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Tab/TabsWrapper.stories.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, React.HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+type ITabArgs = {
+    items: Array<{
+        id: string;
+        title: string;
+        count: number;
+        asBadge?: boolean;
+        isDisabled?: boolean;
+    }>;
+};
+export declare const TabsWrapper: {
+    ({ items }: ITabArgs): React.ReactElement;
+    args: ITabArgs;
+};

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify the tag kind
+     */
+    kind?: 'default' | 'info' | 'warning' | 'success' | 'error' | 'purple' | 'black';
+    /**
+     * Specify the tag size
+     */
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    /**
+     * Set the tag custom color
+     */
+    customColor?: string;
+    /**
+     * Set to show close icon
+     */
+    dismissible?: boolean;
+    /**
+     * Outlined version of tag
+     */
+    outline?: boolean;
+    /**
+     * The event handler for close icon click
+     */
+    onRemove?(): void;
+    /**
+     * React node element to show on the left
+     */
+    leftNode?: React.ReactElement;
+    /**
+     * React node element to show on the right
+     */
+    rightNode?: React.ReactElement;
+}
+export declare const Tag: React.FC<React.PropsWithChildren<TagProps>>;

package/dist/components/Tag/Tag.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Tag/Tag.stories.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { TagProps } from './Tag';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, TagProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Default: {
+    ({ children, ...args }: TagProps): React.ReactElement;
+    args: TagProps;
+};
+export declare const Kinds: {
+    ({ children, ...args }: TagProps): React.ReactElement;
+    args: {
+        children: string;
+        leftNode: React.JSX.Element;
+        rightNode: React.JSX.Element;
+    };
+};
+export declare const Sizes: {
+    ({ children, ...args }: TagProps): React.ReactElement;
+    args: {
+        children: string;
+        leftNode: React.JSX.Element;
+        rightNode: React.JSX.Element;
+    };
+};

package/dist/components/Tag/index.d.ts

@@ -0,0 +1,2 @@
+export { Tag } from './Tag';
+export type { TagProps } from './Tag';

package/dist/{src/components → components}/TagInput/EmailTagInput.d.ts

@@ -1,5 +1,5 @@
-import { TagInputProps } from './TagInput';
 import * as React from 'react';
-export declare type EmailTagInputProps = Omit<TagInputProps, 'validator'>;
+import { TagInputProps } from './TagInput';
+export type EmailTagInputProps = Omit<TagInputProps, 'validator'>;
 export declare const emailRegex: RegExp;
 export declare const EmailTagInput: React.FC<EmailTagInputProps>;

package/dist/components/TagInput/TagInput.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+export interface TagInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
+    /**
+     * Set the id for input
+     */
+    id?: string;
+    /**
+     * Set the error message
+     */
+    error?: string;
+    /**
+     * Array of defined tags
+     */
+    tags?: string[];
+    /**
+     * The event handler for modify tags array
+     */
+    onChange: (tags: string[]) => void;
+    /**
+     * Set the input placeholder
+     */
+    placeholder?: string;
+    /**
+     * Set the custom validation for provided items
+     */
+    validator?: (val: string) => boolean;
+    /**
+     * Specify the input size
+     */
+    size?: 'medium' | 'large';
+}
+export declare const TagInput: React.FC<TagInputProps>;

package/dist/components/TagInput/TagInput.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/TagInput/TagInput.stories.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Story } from '@storybook/react';
+import { TagInputProps, EmailTagInputProps } from './index';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, TagInputProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const DefaultTagInput: Story<TagInputProps>;
+export declare const DefaultEmailTagInput: Story<EmailTagInputProps>;
+export declare const Sizes: () => React.ReactElement;

package/dist/components/Textarea/Textarea.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Textarea/Textarea.stories.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Story } from '@storybook/react';
+import { TextareaProps } from './Textarea';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default _default;
+export declare const Default: Story<TextareaProps>;
+export declare const States: () => React.ReactElement;

package/dist/{src/components → components}/Toast/Toast.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-declare type ToastKind = 'success' | 'warning' | 'error' | 'info';
-declare type ToastAction = {
+type ToastKind = 'success' | 'warning' | 'error' | 'info';
+type ToastAction = {
     onClick: () => void;
     label: string;
     closesOnClick?: boolean;
@@ -12,5 +12,5 @@ export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
     kind?: ToastKind;
     onClose?: () => void;
 }
-export declare const Toast: React.FC<ToastProps>;
+export declare const Toast: React.FC<React.PropsWithChildren<ToastProps>>;
 export {};

package/dist/components/Toast/Toast.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Toast/Toast.stories.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Story } from '@storybook/react';
+import { ToastProps } from './Toast';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ToastProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Default: Story<ToastProps>;
+export declare const Kinds: Story;
+export declare const WithCloseIcon: Story;
+export declare const WithCustomAction: {
+    (): React.ReactElement;
+    parameters: import("@storybook/types").Parameters;
+};

package/dist/{src/components → components}/Toast/ToastWrapper.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { ToastProps, Toast } from './Toast';
-declare type HorizontalPosition = 'left' | 'center' | 'right';
-declare type VerticalPosition = 'top' | 'bottom';
+type HorizontalPosition = 'left' | 'center' | 'right';
+type VerticalPosition = 'top' | 'bottom';
 export declare const ANIMATION_TIME = 200;
-interface Toast extends ToastProps {
+interface Toast extends Omit<ToastProps, 'content'> {
     id: string;
     content: React.ReactElement | string;
 }

package/dist/components/Toast/ToastWrapper.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Toast/ToastWrapper.stories.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { ToastWrapperProps } from './ToastWrapper';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ToastWrapperProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const ToastWrapper: {
+    (args: ToastWrapperProps): React.ReactElement;
+    args: {
+        fixed: boolean;
+        toasts: ({
+            id: string;
+            kind: string;
+            content: string;
+            removable?: undefined;
+            action?: undefined;
+        } | {
+            id: string;
+            kind: string;
+            content: string;
+            removable: boolean;
+            action?: undefined;
+        } | {
+            id: string;
+            kind: string;
+            content: string;
+            action: {
+                label: string;
+                handler: () => void;
+            };
+            removable?: undefined;
+        })[];
+    };
+};

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ITooltipProps } from './types';
+export declare const Tooltip: React.FC<ITooltipProps>;

package/dist/components/Tooltip/Tooltip.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { ITooltipProps } from './types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ITooltipProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Default: {
+    (args: ITooltipProps): React.ReactElement;
+    args: {
+        placement: string;
+        isVisible: boolean;
+        theme: string;
+        triggerOnClick: boolean;
+        arrowOffsetY: number;
+        arrowOffsetX: number;
+        offsetMainAxis: number;
+        withFadeAnimation: boolean;
+        transitionDuration: number;
+        transitionDelay: number;
+        hoverOutDelayTimeout: number;
+    };
+};
+export declare const TooltipInfo: () => React.ReactElement;
+export declare const TooltipInteractive: () => React.ReactElement;
+export declare const TooltipReports: () => React.ReactElement;
+export declare const TooltipUserGuide: {
+    (args: ITooltipProps): React.ReactElement;
+    args: {
+        placement: string;
+        isVisible: boolean;
+        theme: string;
+        triggerOnClick: boolean;
+        arrowOffsetY: number;
+        arrowOffsetX: number;
+        offsetMainAxis: number;
+        withFadeAnimation: boolean;
+        transitionDuration: number;
+        transitionDelay: number;
+        hoverOutDelayTimeout: number;
+    };
+};

package/dist/components/Tooltip/components/FloatingComponent.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { UseFloatingReturn } from '@floating-ui/react-dom';
+import { ITooltipProps } from '../types';
+type IProps = Pick<ITooltipProps, 'referenceElement' | 'arrowOffsetX' | 'arrowOffsetY' | 'className' | 'theme' | 'withFadeAnimation' | 'transitionDuration' | 'transitionDelay'> & {
+    visible?: boolean;
+    floatingOptions: UseFloatingReturn;
+    baseClass: string;
+    arrowRef: React.RefObject<HTMLDivElement>;
+    transitionDuration: number;
+    transitionDelay: number;
+    handleMouseEnter: (event: React.MouseEvent) => void;
+    handleMouseLeave: (event: React.MouseEvent) => void;
+    handleCloseAction: (event: MouseEvent | KeyboardEvent) => void;
+    childrenElements: React.ReactNode;
+    fullSpaceContent?: boolean;
+};
+export declare const FloatingComponent: React.FC<IProps>;
+export {};

package/dist/{src/components/Tooltip → components/Tooltip/components}/Info.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
+import { TooltipTheme } from '../types';
 export declare const Info: React.FC<{
-    header: string;
+    header?: string;
     text: string;
     closeWithX?: boolean;
-    theme?: string;
+    theme?: TooltipTheme;
     handleCloseAction?: (ev: React.MouseEvent) => void;
 }>;

package/dist/{src/components/Tooltip → components/Tooltip/components}/Interactive.d.ts

@@ -1,14 +1,15 @@
 import * as React from 'react';
+import { TooltipButton, TooltipTheme } from '../types';
 export declare const Interactive: React.FC<{
-    header: string;
+    header?: string;
     text: string;
     image?: {
         src: string;
         alt: string;
     };
     closeWithX?: boolean;
-    theme?: 'invert' | 'important';
-    handleClickPrimary: () => void;
-    handleClickSecondary: () => void;
+    theme?: TooltipTheme;
     handleCloseAction?: (ev: React.MouseEvent) => void;
+    primaryButton: TooltipButton;
+    secondaryButton: TooltipButton;
 }>;

package/dist/components/Tooltip/components/Reports.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface IReportsProps {
+    title: string;
+    description?: string;
+    children: React.ReactNode;
+}
+export declare const Reports: React.FC<IReportsProps>;

package/dist/{src/components/Tooltip → components/Tooltip/components/UserGuide}/SpotlightOverlay.d.ts

@@ -1,7 +1,8 @@
+import * as React from 'react';
 declare const SpotlightOverlay: ({ gap, isVisible, slide, disablePointerEvents, }: {
     gap: DOMRect | null;
     isVisible: boolean;
     slide: boolean;
     disablePointerEvents: boolean;
-}) => JSX.Element | null;
+}) => React.ReactElement | null;
 export default SpotlightOverlay;

package/dist/{src/components/Tooltip → components/Tooltip/components/UserGuide}/UserGuide.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ModalPortalProps } from '../Modal/';
-import { ITooltipProps } from './Tooltip';
+import { ModalPortalProps } from '../../../Modal';
+import { ITooltipProps } from '../../types';
 interface IOwnProps {
     shouldSlide?: boolean;
     className?: string;

package/dist/components/Tooltip/components/UserGuide/UserGuideStep.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { TooltipTheme } from '../../types';
+export declare const UserGuideStep: React.FC<{
+    header: string;
+    text: string;
+    image?: {
+        src: string;
+        alt: string;
+    };
+    currentStep: number;
+    stepMax: number;
+    closeWithX?: boolean;
+    theme?: TooltipTheme;
+    handleClickPrimary: () => void;
+    handleCloseAction?: (ev: KeyboardEvent | React.MouseEvent) => void;
+}>;

package/dist/components/Tooltip/components/UserGuide/index.d.ts

@@ -0,0 +1 @@
+export { UserGuide } from './UserGuide';

package/dist/{src/components/Tooltip → components/Tooltip/components}/index.d.ts

@@ -1,5 +1,5 @@
-export { Tooltip } from './Tooltip';
 export { Simple } from './Simple';
 export { Info } from './Info';
 export { Interactive } from './Interactive';
 export { UserGuide } from './UserGuide';
+export { Reports } from './Reports';

package/dist/components/Tooltip/helpers.d.ts

@@ -0,0 +1,4 @@
+import { IconKind } from '../Icon';
+import { TooltipTheme } from './types';
+export declare function getIconType(theme: TooltipTheme): IconKind;
+export declare const sleep: (milliseconds: number) => Promise<void>;

package/dist/components/Tooltip/index.d.ts

@@ -0,0 +1,4 @@
+export { Tooltip } from './Tooltip';
+export { Simple, Info, Interactive, Reports } from './components';
+export { UserGuide } from './components/UserGuide';
+export type { ITooltipProps } from './types';

package/dist/{src/components/Tooltip/Tooltip.d.ts → components/Tooltip/types.d.ts}

@@ -1,9 +1,17 @@
 import * as React from 'react';
 import { Placement, VirtualElement } from '@floating-ui/react-dom';
+import { ButtonKind } from '../Button';
+export type TooltipTheme = 'invert' | 'important' | undefined;
+export type TooltipButton = {
+    handleClick: () => void;
+    label: string;
+    kind?: ButtonKind;
+};
 export interface ITooltipProps {
     children?: React.ReactNode;
     className?: string;
-    theme?: 'invert' | 'important' | undefined;
+    triggerClassName?: string;
+    theme?: TooltipTheme;
     placement?: Placement;
     isVisible?: boolean;
     withFadeAnimation?: boolean;
@@ -14,9 +22,9 @@ export interface ITooltipProps {
     triggerOnClick?: boolean;
     arrowOffsetY?: number;
     arrowOffsetX?: number;
+    fullSpaceContent?: boolean;
     triggerRenderer: () => React.ReactNode;
     referenceElement?: VirtualElement;
     onOpen?: () => void;
     onClose?: () => void;
 }
-export declare const Tooltip: React.FC<ITooltipProps>;

package/dist/components/Typography/Display.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface IProps {
+    size?: 'md' | 'sm';
+    /** DOM element name that will be rendered */
+    as?: string;
+    /** Optional custom className */
+    className?: string;
+}
+export declare const Display: React.FC<React.PropsWithChildren<IProps>>;
+export {};

package/dist/{src/components → components}/Typography/Heading.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type TSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+type TSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 interface IProps {
     size?: TSize;
     /** DOM element name that will be rendered */
@@ -7,5 +7,5 @@ interface IProps {
     /** Optional custom className */
     className?: string;
 }
-export declare const Heading: React.FC<IProps>;
+export declare const Heading: React.FC<React.PropsWithChildren<IProps>>;
 export {};

package/dist/{src/components → components}/Typography/Text.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type TSize = 'md' | 'sm' | 'xs';
+type TSize = 'md' | 'sm' | 'xs';
 interface IProps {
     /** DOM element name that will be rendered */
     as?: string;
@@ -11,5 +11,5 @@ interface IProps {
     underline?: boolean;
     strike?: boolean;
 }
-export declare const Text: React.FC<IProps>;
+export declare const Text: React.FC<React.PropsWithChildren<IProps>>;
 export {};

package/dist/{src/components → components}/Typography/index.d.ts

@@ -1,2 +1,3 @@
 export { Heading } from './Heading';
 export { Text } from './Text';
+export { Display } from './Display';

package/dist/components/UploadBar/UploadBar.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { ProgressStatus, ProgressSize } from '../Progress/constants';
+export interface UploadBarProps {
+    /**
+     * The CSS class for container
+     */
+    className?: string;
+    /**
+     * Specify the value of current progress circle (0-100)
+     */
+    progressValue: number;
+    /**
+     * Specify the upload bar title
+     */
+    title: string;
+    /**
+     * Define if upload bar should be open
+     */
+    isExpanded?: boolean;
+    /**
+     * Specify the error message
+     */
+    errorMessage?: string;
+    /**
+     * Specify the upload bar status
+     */
+    status?: ProgressStatus;
+    /**
+     * Renders given element
+     */
+    icon?: React.ReactNode;
+    /**
+     * Specify the upload bar size
+     */
+    size?: ProgressSize;
+    /**
+     * Set the component's mode to `multiple` to specify whether the upload bar should display multiple elements
+     */
+    mode?: 'single' | 'multiple';
+    /**
+     * The event handler for close icon click
+     */
+    onCloseButtonClick?: () => void;
+    /**
+     * The event handler for retry icon click
+     */
+    onRetryButtonClick?: () => void;
+}
+export declare const UploadBar: React.FC<React.PropsWithChildren<UploadBarProps>>;

package/dist/components/UploadBar/UploadBar.stories.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./UploadBar").UploadBarProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const UploadBarWithSingleElement: React.FC;
+export declare const UploadBarWithMultipleElements: React.FC;