@livechat/design-system-react-components 2.0.0-alpha.4 → 2.0.0-alpha.5

package/dist/components/AppFrame/AppFrame.d.ts

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

package/dist/components/AppFrame/components/ExpirationCounter/ExpirationCounter.d.ts

@@ -0,0 +1,21 @@
+import { ComponentCoreProps } from '../../../../utils/types';
+import * as React from 'react';
+export interface IExpirationCounterProps extends ComponentCoreProps {
+    /**
+     * The ID of the item
+     */
+    id: string;
+    /**
+     * The number of days left
+     */
+    daysLeft: number;
+    /**
+     * The URL to navigate to
+     */
+    url?: string;
+    /**
+     * The function to call on click
+     */
+    onClick: (e: React.MouseEvent<HTMLAnchorElement>, id: string) => void;
+}
+export declare const ExpirationCounter: React.FC<IExpirationCounterProps>;

package/dist/components/AppFrame/components/Navigation/Navigation.d.ts

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

package/dist/components/AppFrame/components/Navigation/types.d.ts

@@ -0,0 +1,8 @@
+import { ComponentCoreProps } from '../../../../utils/types';
+import * as React from 'react';
+export interface INavigationProps extends ComponentCoreProps {
+    /**
+     * It will display your navigation elements
+     */
+    children: React.ReactNode;
+}

package/dist/components/AppFrame/components/NavigationGroup/NavigationGroup.d.ts

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

package/dist/components/AppFrame/components/NavigationGroup/types.d.ts

@@ -0,0 +1,16 @@
+import { ComponentCoreProps } from '../../../../utils/types';
+import * as React from 'react';
+export interface INavigationGroupProps extends ComponentCoreProps {
+    /**
+     * It will display your navigation elements
+     */
+    children: React.ReactNode;
+    /**
+     * The CSS class for the navigation bar list
+     */
+    className?: string;
+    /**
+     * Specify whether the list should be scrollable
+     */
+    scrollable?: boolean;
+}

package/dist/components/AppFrame/components/NavigationItem/NavigationItem.d.ts

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

package/dist/components/AppFrame/components/NavigationItem/types.d.ts

@@ -0,0 +1,40 @@
+import { ComponentCoreProps } from '../../../../utils/types';
+import * as React from 'react';
+export interface INavigationItemProps extends ComponentCoreProps {
+    /**
+     * The ID of the item
+     */
+    id: string;
+    /**
+     * The label of the item visible in the tooltip
+     */
+    label?: string;
+    /**
+     * Container for the icon or any other element
+     */
+    icon: React.ReactElement;
+    /**
+     * The URL to navigate to
+     */
+    url?: string;
+    /**
+     * Set if you are preparing a custom element as a button icon and you do not want it to be semi-transparent without hover
+     */
+    disableOpacity?: boolean;
+    /**
+     * Specify whether the navigation item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether the badge should be visible and what type it should be
+     */
+    badge?: 'dot' | 'alert' | number;
+    /**
+     * Specify whether the item is active
+     */
+    isActive?: boolean;
+    /**
+     * The function to call on click
+     */
+    onClick: (e: React.MouseEvent<HTMLAnchorElement>, id: string) => void;
+}

package/dist/components/AppFrame/components/NavigationTopBar/NavigationTopBar.d.ts

@@ -0,0 +1,45 @@
+import { INavigationTopBarProps, ITopBarAlertProps, ITopBarTitleProps } from './types';
+import * as React from 'react';
+/**
+ * NavigationTopBar is used to display a top bar in the app frame - mostly to display alerts, but arbitrary content can be placed there too.
+ * @example
+ * <NavigationTopBar>
+ *     <NavigationTopBar.Alert kind="error">
+ *       Something went wrong
+ *     </NavigationTopBar.Alert>
+ * </NavigationTopBar>
+ */
+export declare const NavigationTopBar: {
+    ({ children, className, additionalNodes, }: INavigationTopBarProps): React.ReactElement;
+    Alert: React.FC<ITopBarAlertProps>;
+    Title: React.FC<ITopBarTitleProps>;
+};
+/**
+ * Title component for the NavigationTopBar. Supposed to be placed in the `additionalNodes` prop of the NavigationTopBar.
+ * @example
+ * <NavigationTopBar additionalNodes={<NavigationTopBar.Title>Example top bar content</NavigationTopBar.Title>}>
+ * </NavigationTopBar>
+ */
+export declare const NavigationTopBarTitle: React.FC<ITopBarTitleProps>;
+/**
+ * Alert component for the NavigationTopBar.
+ * @example
+ * <NavigationTopBar>
+ *    <NavigationTopBar.Alert kind="error" show={!!error}>
+ *     Something went wrong
+ *   </NavigationTopBar.Alert>
+ * </NavigationTopBar>
+ * @example
+ * <NavigationTopBar>
+ *     <NavigationTopBarAlert
+ *      kind="warning"
+ *      primaryCta={{ label: 'Save', onClick: () => console.log('Save clicked') }}
+ *      secondaryCta={{ label: 'Discard', onClick: () => console.log('Discard clicked') }}
+ *      closeButton={{ onClick: () => console.log('Close clicked') }}
+ *      show={!hasUnsavedChanges && !hasClosedAlert}
+ *      >
+ *      You have unsaved changes
+ *     </NavigationTopBarAlert>
+ * </NavigationTopBar>
+ **/
+export declare const NavigationTopBarAlert: React.FC<ITopBarAlertProps>;

package/dist/components/AppFrame/components/NavigationTopBar/examples.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export declare const DisconnectedAlert: React.FC<{
+    show: boolean;
+    onClose: () => void;
+}>;
+export declare const ChameleonAlert: React.FC<{
+    show: boolean;
+    onClose: () => void;
+    kind: 'info' | 'success' | 'warning' | 'error';
+    changeKind: () => void;
+}>;
+export declare const CustomBackgroundAlert: React.FC<{
+    show: boolean;
+    onClose: () => void;
+}>;

package/dist/components/AppFrame/components/NavigationTopBar/types.d.ts

@@ -0,0 +1,59 @@
+import { ButtonProps } from 'components/Button';
+import { ComponentCoreProps } from 'utils/types';
+import * as React from 'react';
+export type NavigationTopBarKind = 'info' | 'success' | 'warning' | 'error';
+export interface INavigationTopBarProps extends ComponentCoreProps {
+    /**
+     * Contents of the top bar. You can use the `NavigationTopBar.Alert` component to display alerts.
+     */
+    children?: React.ReactNode;
+    /**
+     * Ńodes placed under the children.
+     */
+    additionalNodes?: React.ReactNode;
+}
+export interface ITopBarTitleProps extends ComponentCoreProps {
+    /**
+     * Content of the title.
+     */
+    children: React.ReactNode;
+}
+type CTAProps = {
+    label: string;
+    onClick: () => void;
+} & Omit<ButtonProps, 'onClick' | 'children'>;
+export interface ITopBarAlertProps extends ComponentCoreProps {
+    /**
+     * Visual style of the alert. You can also use `className` to style the alert if you need to set a custom background color.
+     * Defaults to `info`.
+     * */
+    kind?: NavigationTopBarKind;
+    /**
+     * Properties of the close button. If defined, the alert will be closable and the close button will be rendered.
+     * aria-label is highly recommended for accessibility.
+     * */
+    closeButton?: {
+        onClick: () => void;
+        'data-testid'?: string;
+        'aria-label'?: string;
+    };
+    /**
+     * Content of the alert.
+     */
+    children: React.ReactNode;
+    /**
+     * Primary CTA button. The button will be rendered if defined.
+     * Allows ButtonProps, but `children` is recommended for more complex use-cases.
+     * */
+    primaryCta?: CTAProps;
+    /**
+     * Secondary CTA button. The button will be rendered if defined.
+     * Allows ButtonProps, but `children` is recommended for more complex use-cases.
+     * */
+    secondaryCta?: CTAProps;
+    /**
+     * Show or hide the alert, defaults to `true`. Changes to this prop are animated - the alert will enter and leave smoothly.
+     * */
+    isVisible?: boolean;
+}
+export {};

package/dist/components/AppFrame/components/SideNavigation/SideNavigation.d.ts

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

package/dist/components/AppFrame/components/SideNavigation/types.d.ts

@@ -0,0 +1,28 @@
+import { ComponentCoreProps } from '../../../../utils/types';
+import * as React from 'react';
+export interface ISideNavigationProps extends ComponentCoreProps {
+    /**
+     * It will display your side navigation elements
+     */
+    children: React.ReactNode;
+    /**
+     * It will display the title of the side navigation bar
+     */
+    title?: string;
+    /**
+     * It will display the custom element as title of the side navigation bar
+     */
+    customHeader?: React.ReactNode;
+    /**
+     * It will display the custom element as footer of the side navigation bar
+     */
+    customFooter?: React.ReactNode;
+    /**
+     * Specify whether the gaps between elements should be removed
+     */
+    noGaps?: boolean;
+    /**
+     * It will display the custom element on the right side of the side navigation bar title
+     */
+    rightNode?: React.ReactNode;
+}

package/dist/components/AppFrame/components/SideNavigationGroup/SideNavigationGroup.d.ts

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

package/dist/components/AppFrame/components/SideNavigationGroup/types.d.ts

@@ -0,0 +1,32 @@
+import { ComponentCoreProps } from '../../../../utils/types';
+import * as React from 'react';
+export interface ISideNavigationGroupProps extends ComponentCoreProps {
+    /**
+     * It will display your side navigation elements
+     */
+    children: React.ReactNode;
+    /**
+     * The label of the side navigation list
+     */
+    label?: React.ReactNode | ((isOpen: boolean) => React.ReactNode);
+    /**
+     * The right node of the side navigation list if `isCollapsible` is set to true
+     */
+    rightNode?: React.ReactNode | ((isOpen: boolean) => React.ReactNode);
+    /**
+     * Specify whether the list should be collapsible
+     */
+    isCollapsible?: boolean;
+    /**
+     * The function to call on item hover
+     */
+    onItemHover?: () => void;
+    /**
+     * Specify whether the list should be open on the first render
+     */
+    shouldOpenOnInit?: boolean;
+    /**
+     * Specify whether the list should be open if an item within the group is active
+     */
+    shouldOpenOnActive?: boolean;
+}

package/dist/components/AppFrame/components/SideNavigationItem/SideNavigationItem.d.ts

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

package/dist/components/AppFrame/components/SideNavigationItem/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const SIDE_NAVIGATION_ITEM_TEST_ID = "side-navigation-item-test-id";
+export declare const SIDE_NAVIGATION_ACTIVE_ITEM_TEST_ID = "side-navigation-active-item-test-id";
+export declare const SIDE_NAVIGATION_PARENT_ICON_TEST_ID = "side-navigation-parent-icon";

package/dist/components/AppFrame/components/SideNavigationItem/types.d.ts

@@ -0,0 +1,44 @@
+import { ComponentCoreProps } from '../../../../utils/types';
+import * as React from 'react';
+export interface ISideNavigationItemProps extends ComponentCoreProps {
+    /**
+     * The label of the item
+     */
+    label: React.ReactNode;
+    /**
+     * Custom element on the right side of the side navigation item
+     */
+    rightNode?: React.ReactNode;
+    /**
+     * Custom element on the left side of the side navigation item
+     */
+    leftNode?: React.ReactNode;
+    /**
+     * Specify whether the icon space should be kept
+     */
+    shouldKeepIconSpace?: boolean;
+    /**
+     * The URL to navigate to
+     */
+    url?: string;
+    /**
+     * Specify whether the item is active
+     */
+    isActive?: boolean;
+    /**
+     * Specify whether the item is seen as the main one
+     */
+    isMainEntry?: boolean;
+    /**
+     * The function to call on click
+     */
+    onClick: () => void;
+    /**
+     * The function to call on item hover
+     */
+    onItemHover?: () => void;
+    /**
+     * Specify whether the icon should be hidden
+     */
+    isIconHidden?: boolean;
+}

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

@@ -0,0 +1,9 @@
+export { SideNavigation } from './SideNavigation/SideNavigation';
+export { SideNavigationGroup } from './SideNavigationGroup/SideNavigationGroup';
+export { SideNavigationItem } from './SideNavigationItem/SideNavigationItem';
+export { NavigationGroup } from './NavigationGroup/NavigationGroup';
+export { NavigationItem } from './NavigationItem/NavigationItem';
+export { Navigation } from './Navigation/Navigation';
+export { NavigationTopBar, NavigationTopBarAlert, NavigationTopBarTitle, } from './NavigationTopBar/NavigationTopBar';
+export { SIDE_NAVIGATION_ITEM_TEST_ID, SIDE_NAVIGATION_ACTIVE_ITEM_TEST_ID, SIDE_NAVIGATION_PARENT_ICON_TEST_ID, } from './SideNavigationItem/constants';
+export { ExpirationCounter } from './ExpirationCounter/ExpirationCounter';

package/dist/components/AppFrame/hooks/useAppFrameAnimations.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+interface UseAppFrameAnimationsProps {
+    isVisible: boolean;
+    elementRef: React.RefObject<HTMLDivElement>;
+}
+interface IUseAppFrameAnimations {
+    isOpen: boolean;
+    isMounted: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export declare const useAppFrameAnimations: ({ isVisible, elementRef, }: UseAppFrameAnimationsProps) => IUseAppFrameAnimations;
+export {};

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

@@ -0,0 +1,2 @@
+export { AppFrame } from './AppFrame';
+export * from './components';

package/dist/components/AppFrame/stories-helpers.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+interface ExampleAppContentProps {
+    showToggle: boolean;
+    alerts?: boolean[];
+    setAlerts?: (alerts: boolean[]) => void;
+    topBarVisible: boolean;
+    setTopBarVisible: (visible: boolean) => void;
+}
+export declare const ExampleAppContent: React.FC<ExampleAppContentProps>;
+export declare const ExampleTopBar: React.FC<{
+    visibleAlerts: boolean[];
+    topBarVisible: boolean;
+    setAlerts: (alerts: boolean[]) => void;
+}>;
+export declare const getBadgeContent: (item: string) => "dot" | "alert" | 5 | undefined;
+export declare const getChatsMenu: (activeSubItem: number, handler: (o: number) => void) => import("react/jsx-runtime").JSX.Element;
+export declare const getEngageSubMenu: (activeSubItem: number, handler: (o: number) => void) => import("react/jsx-runtime").JSX.Element;
+export declare const getArchivesSubMenu: (activeSubItem: number, handler: (o: number) => void) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/AppFrame/types.d.ts

@@ -0,0 +1,38 @@
+import { ComponentCoreProps } from '../../utils/types';
+import * as React from 'react';
+export interface IAppFrameProps extends ComponentCoreProps {
+    /**
+     * It will display your app in the content area
+     */
+    children: React.ReactNode;
+    /**
+     * It will display navigation elements
+     */
+    navigation: React.ReactNode;
+    /**
+     * It will display the side navigation bar
+     */
+    sideNavigation?: React.ReactNode;
+    /**
+     * It will display the top bar with passed element
+     */
+    topBar?: React.ReactNode;
+    /**
+     * The CSS class for the top bar
+     */
+    topBarClassName?: string;
+    /**
+     * The CSS class for the sub navigation bar
+     */
+    sideNavigationContainerClassName?: string;
+    /**
+     * The CSS class for the content container
+     */
+    contentClassName?: string;
+}
+export type { INavigationProps } from './components/Navigation/types';
+export type { INavigationGroupProps } from './components/NavigationGroup/types';
+export type { INavigationItemProps } from './components/NavigationItem/types';
+export type { ISideNavigationProps } from './components/SideNavigation/types';
+export type { ISideNavigationGroupProps } from './components/SideNavigationGroup/types';
+export type { ISideNavigationItemProps } from './components/SideNavigationItem/types';

package/dist/components/Badge/Badge.d.ts

@@ -6,6 +6,7 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     count?: number;
     /**
      * Specify the badge kind
+     * @param secondary - is deprecated, use "primary" or "tertiary" instead
      */
     kind?: 'primary' | 'secondary' | 'tertiary';
     /**
@@ -14,10 +15,12 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     max?: number;
     /**
      * Specify the badge size
+     * @param large - is deprecated, use "medium" or "compact" instead
      */
     size?: 'large' | 'medium' | 'compact';
     /**
      * Specify the badge type
+     * @param dot - is deprecated, use "UpdateBadge" component instead
      */
     type?: 'counter' | 'alert' | 'dot';
 }

package/dist/components/DetailsCard/DetailsCard.d.ts

@@ -35,6 +35,6 @@ export interface IDetailsCardProps {
     /**
      * Callback function called when the card label is clicked
      */
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLDivElement>) => void;
 }
 export declare const DetailsCard: React.FC<React.PropsWithChildren<IDetailsCardProps>>;

package/dist/components/Modal/components/ActionModalContent.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+interface IActionModalProps {
+    /**
+     * Optional element to render icon or image
+     */
+    icon?: React.ReactNode;
+    /**
+     * Set the header text
+     */
+    heading?: React.ReactNode;
+    /**
+     * Optional element to render action buttons
+     */
+    actions?: React.ReactNode;
+    /**
+     * The CSS class for main container
+     */
+    className?: string;
+    /**
+     * The CSS class for header container
+     */
+    headerClassName?: string;
+    /**
+     * The CSS class for content container
+     */
+    contentClassName?: string;
+}
+export declare const ActionModalContent: React.FC<React.PropsWithChildren<IActionModalProps>>;
+export {};

package/dist/components/Modal/components/ModalPortal.d.ts

@@ -1,7 +1,8 @@
-import * as React from 'react';
-export interface ModalPortalProps extends React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
+import { FC, PropsWithChildren, ReactNode, HTMLAttributes } from 'react';
+
+export interface ModalPortalProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
     zIndex: number;
     parentElementName?: string;
 }
-export declare const ModalPortal: React.FC<React.PropsWithChildren<ModalPortalProps>>;
+export declare const ModalPortal: FC<PropsWithChildren<ModalPortalProps>>;

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

@@ -3,6 +3,7 @@ export { ModalBase } from './components/ModalBase';
 export { ModalCloseButton } from './components/ModalCloseButton';
 export { ModalPortal } from './components/ModalPortal';
 export { ModalHeader } from './components/ModalHeader';
+export { ActionModalContent } from './components/ActionModalContent';
 export type { ModalProps } from './Modal';
 export type { ModalBaseProps } from './components/ModalBase';
 export type { ModalCloseButtonProps } from './components/ModalCloseButton';

package/dist/components/OnboardingChecklist/OnboardingChecklist.d.ts

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

package/dist/components/OnboardingChecklist/components/CheckListItem.d.ts

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

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

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

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

@@ -0,0 +1,2 @@
+export { OnboardingChecklist } from './OnboardingChecklist';
+export type { IOnboardingChecklistProps, IChecklistItemProps, ICompletionMessageDataProps, } from './types';

package/dist/components/OnboardingChecklist/types.d.ts

@@ -0,0 +1,97 @@
+import * as React from 'react';
+export interface IChecklistItemProps {
+    /**
+     * Define the unique id of the item
+     */
+    id: string;
+    /**
+     * Set the title of the item
+     */
+    title: string;
+    /**
+     * Set the additional text for the title
+     */
+    titleHint?: string;
+    /**
+     * Set the description of the item
+     */
+    description: string;
+    /**
+     * The element to display when the item is active
+     */
+    cta: React.ReactElement;
+    /**
+     * The element to display in the right column when the item is active
+     */
+    placeholder: React.ReactElement;
+}
+export interface ICheckListItem extends Omit<IChecklistItemProps, 'placeholder'> {
+    isActive: boolean;
+    isChecked: boolean;
+    isLastElement: boolean;
+    onClick: (id: string) => void;
+}
+export type ICompletionMessageDataProps = {
+    /**
+     * Set the title of the complete state
+     */
+    title: string;
+    /**
+     * Set the greeting text of the complete state
+     */
+    greetingText?: string;
+    /**
+     * The element to display when the checklist is completed before the animation starts
+     */
+    placeholder?: React.ReactElement;
+    /**
+     * Define the delay betweend displaying complete placeholder and the animation starts
+     */
+    delay?: number;
+    /**
+     * Define the custom heigh of content visible after checklist complete
+     */
+    height?: number;
+};
+export interface IOnboardingChecklistProps {
+    /**
+     * The CSS class for the component
+     */
+    className?: string;
+    /**
+     * Set the title of the checklist
+     */
+    title: string;
+    /**
+     * Set the greeting text of the checklist
+     */
+    greetingText?: string;
+    /**
+     * The list of items to display
+     */
+    items: IChecklistItemProps[];
+    /**
+     * Set to define the active item
+     */
+    activeItemId: string;
+    /**
+     * Set to defined the complete items
+     */
+    completedItemsIds: string[];
+    /**
+     * Callback function when list element is clicked
+     */
+    onActiveChange: (id: string) => void;
+    /**
+     * The CSS class for the right column
+     */
+    placeholderClassName?: string;
+    /**
+     * Set to define the checklist is completed
+     */
+    isCompleted?: boolean;
+    /**
+     * Complete element which will be displayed when `isCompleted` is true
+     */
+    completionMessageData: ICompletionMessageDataProps;
+}

package/dist/components/Picker/components/PickerTriggerBody.d.ts

@@ -17,5 +17,6 @@ export interface ITriggerBodyProps {
     onClear: () => void;
     virtualItemRef: React.MutableRefObject<HTMLElement | null>;
     isTriggerFocused: boolean;
+    inputRef?: React.RefObject<HTMLInputElement>;
 }
 export declare const PickerTriggerBody: React.FC<ITriggerBodyProps>;