@livechat/design-system-react-components 1.6.1 → 1.6.3

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

@@ -0,0 +1,16 @@
+import { Modifiers } from 'react-day-picker';
+import { ClassNames } from 'react-day-picker/types/ClassNames';
+import { IRangeDatePickerProps, IRangeDatePickerState, IRangeDatePickerOption } from './types';
+export declare const isDateWithinRange: (date: Date, range: {
+    from?: Date;
+    to?: Date;
+}) => boolean;
+export declare const calculateDatePickerMonth: (initialFromDate?: Date, initialToDate?: Date, toMonth?: Date) => Date;
+export declare const getRangeDatePickerModifiers: (from?: Date, to?: Date) => Partial<Modifiers>;
+export declare const getSelectedOption: (itemId: string | null, options: IRangeDatePickerOption[]) => IRangeDatePickerOption | undefined;
+export declare const isSelectingFirstDay: (from?: Date, to?: Date) => boolean;
+export declare const getInitialStateFromProps: (props: IRangeDatePickerProps) => Partial<IRangeDatePickerState>;
+export declare const getDatePickerClassNames: (range?: boolean, classNames?: ClassNames) => ClassNames & {
+    start: string;
+    end: string;
+};

package/dist/components/DatePicker/hooks.d.ts

@@ -0,0 +1,6 @@
+import { Dispatch, ReducerAction, ReducerState } from 'react';
+import { IRangeDatePickerProps, RangeDatePickerReducer } from './types';
+export declare const useRangeDatePickerState: (props: IRangeDatePickerProps) => [
+    ReducerState<RangeDatePickerReducer>,
+    Dispatch<ReducerAction<RangeDatePickerReducer>>
+];

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

@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker';
+export { RangeDatePicker } from './RangeDatePicker';

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

@@ -0,0 +1,100 @@
+import { Reducer, Ref, ReactElement } from 'react';
+import ReactDayPicker, { DayPickerProps } from 'react-day-picker';
+import { ClassNames } from 'react-day-picker/types/ClassNames';
+export interface IDatePickerProps extends Omit<DayPickerProps, 'todayButton' | 'showWeekNumbers'> {
+    innerRef?: Ref<ReactDayPicker>;
+    range?: boolean;
+}
+export interface IDatePickerNavbarProps {
+    showPreviousButton?: boolean;
+    showNextButton?: boolean;
+    month: Date;
+    fromMonth?: Date;
+    toMonth?: Date;
+    numberOfMonths?: number;
+    className?: string;
+    classNames: ClassNames;
+    onPreviousClick?: () => void;
+    onNextClick?: () => void;
+    onMonthChange: (newMonth: Date) => void;
+}
+export declare enum RangeDatePickerAction {
+    NEW_SELECTED_ITEM = "NEW_SELECTED_ITEM",
+    NEW_TEMPORARY_TO_VALUE = "NEW_TEMPORARY_TO_VALUE",
+    CLEAR = "CLEAR",
+    SET_FROM = "SET_FROM",
+    SET_TO = "SET_TO",
+    SELECT_FIRST_DAY = "SELECT_FIRST_DAY",
+    SELECT_SECOND_DAY_AS_FROM = "SELECT_SECOND_DAY_AS_FROM",
+    SELECT_SECOND_DAY_AS_TO = "SELECT_SECOND_DAY_AS_TO",
+    CURRENT_MONTH_CHANGE = "CURRENT_MONTH_CHANGE"
+}
+export type IRangeDatePickerReducerAction = {
+    type: RangeDatePickerAction.NEW_SELECTED_ITEM;
+    payload: {
+        selectedItem: string | null;
+    };
+} | {
+    type: RangeDatePickerAction.NEW_TEMPORARY_TO_VALUE | RangeDatePickerAction.SELECT_FIRST_DAY | RangeDatePickerAction.SELECT_SECOND_DAY_AS_FROM | RangeDatePickerAction.SELECT_SECOND_DAY_AS_TO | RangeDatePickerAction.CURRENT_MONTH_CHANGE;
+    payload: {
+        date: Date;
+    };
+} | {
+    type: RangeDatePickerAction.SET_FROM | RangeDatePickerAction.SET_TO;
+    payload: {
+        date?: Date;
+    };
+};
+export interface IRangeDatePickerState {
+    selectedItem: string | null;
+    from?: Date;
+    to?: Date;
+    temporaryTo?: Date;
+    currentMonth: Date;
+}
+export type RangeDatePickerReducer = Reducer<IRangeDatePickerState, IRangeDatePickerReducerAction>;
+export interface IRangeDatePickerOption {
+    id: string;
+    label: string;
+    isManual?: boolean;
+    value: {
+        from?: Date;
+        to?: Date;
+    } | null;
+}
+interface IRangeDatePickerChildrenPayloadDatePicker {
+    modifiers?: DayPickerProps['modifiers'];
+    initialMonth?: Date;
+    month: Date;
+    range?: boolean;
+    numberOfMonths: number;
+    fromMonth?: Date;
+    toMonth?: Date;
+    selectedDays?: DayPickerProps['selectedDays'];
+    disabledDays?: DayPickerProps['disabledDays'];
+    onDayMouseEnter: DayPickerProps['onDayMouseEnter'];
+    onDayClick(day: Date): void;
+    onMonthChange(month: Date): void;
+}
+export interface IRangeDatePickerChildrenPayload {
+    select: {
+        selected: string | number;
+        onItemSelect(itemKey: string | number): void;
+    };
+    inputs: {
+        fromDate?: Date;
+        toDate?: Date;
+    };
+    datepicker: IRangeDatePickerChildrenPayloadDatePicker;
+    selectedOption?: IRangeDatePickerOption;
+}
+export interface IRangeDatePickerProps {
+    options: IRangeDatePickerOption[];
+    initialSelectedItemKey?: string;
+    initialFromDate?: Date;
+    initialToDate?: Date;
+    toMonth?: Date;
+    onChange: (selected: IRangeDatePickerOption | null) => void;
+    children(payload: IRangeDatePickerChildrenPayload): ReactElement;
+}
+export {};

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+export interface IDetailsCardProps {
+    /**
+     * The CSS class for card container
+     */
+    className?: string;
+    /**
+     * Additional element for the label
+     */
+    leftNode?: React.ReactNode;
+    /**
+     * Set the label
+     */
+    label: string;
+    /**
+     * Define if divider should be visible
+     */
+    withDivider?: boolean;
+    /**
+     * Removes the spacing inside the main container
+     */
+    fullSpaceContent?: boolean;
+    /**
+     * Set if card should be open by default
+     */
+    openOnInit?: boolean;
+    /**
+     * Set to hide the label on card open
+     */
+    hideLabelOnOpen?: boolean;
+}
+export declare const DetailsCard: React.FC<IDetailsCardProps>;

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

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

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { IDetailsCardProps } from './DetailsCard';
+declare const _default: {
+    title: string;
+    component: React.FC<IDetailsCardProps>;
+    subcomponents: {
+        DetailsCardInfo: React.FC<import("../DetailsCardInfo/DetailsCardInfo").IDetailsCardInfoProps>;
+    };
+};
+export default _default;
+export declare const Default: {
+    (args: IDetailsCardProps): React.ReactElement;
+    args: {
+        label: string;
+    };
+};
+export declare const ExampleUsage: () => React.ReactElement;

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

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

package/dist/components/DetailsCardInfo/DetailsCardInfo.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface IDetailsCardInfoProps {
+    /**
+     * Set the label
+     */
+    label: string;
+}
+export declare const DetailsCardInfo: React.FC<IDetailsCardInfoProps>;

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

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

package/dist/components/FieldDescription/FieldDescription.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export type FieldDescriptionProps = React.HTMLAttributes<HTMLSpanElement>;
+export declare const FieldDescription: React.FC<FieldDescriptionProps>;

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

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

package/dist/components/FieldError/FieldError.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export type FieldErrorProps = React.HTMLAttributes<HTMLSpanElement>;
+export declare const FieldError: React.FC<FieldErrorProps>;

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

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

package/dist/components/FieldGroup/FieldGroup.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface FieldGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    description?: React.ReactNode;
+    error?: string;
+    inline?: boolean;
+    stretch?: boolean;
+}
+export declare const FieldGroup: React.FC<React.PropsWithChildren<FieldGroupProps>>;

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

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

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { FieldGroupProps } from './FieldGroup';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, FieldGroupProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const FieldGroup: {
+    ({ ...args }: FieldGroupProps): React.ReactElement;
+    args: FieldGroupProps;
+};

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

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

package/dist/components/FileUploadProgress/FileUploadProgress.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { ProgressSize, ProgressStatus } from '../Progress/constants';
+export type UploadProgressActionState = 'visible' | 'hover' | 'hidden';
+export interface FileUploadProgressProps {
+    /**
+     * Define if action buttons should be visible, visible on hover, or hidden
+     */
+    actionsVisibility?: UploadProgressActionState;
+    /**
+     * The CSS class for progress bar
+     */
+    className?: string;
+    /**
+     * Renders given element
+     */
+    icon?: React.ReactNode;
+    /**
+     * Specify the uploading file name
+     */
+    title: string;
+    /**
+     * Specify the value of current file upload progress (0-100)
+     */
+    progressValue: number;
+    /**
+     * Specify the progress bar size
+     */
+    size?: ProgressSize;
+    /**
+     * Specify the uploading file status
+     */
+    status?: ProgressStatus;
+    /**
+     * The event handler for close icon click
+     */
+    onCloseButtonClick?: () => void;
+    /**
+     * The event handler for retry icon click
+     */
+    onRetryButtonClick?: () => void;
+}
+export declare const FileUploadProgress: React.ExoticComponent<FileUploadProgressProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { FileUploadProgressProps } from './FileUploadProgress';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, FileUploadProgressProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;
+export declare const FileUploadProgress: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, FileUploadProgressProps>;
+export declare const FileUploadProgressWithIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, FileUploadProgressProps>;
+export declare const FileUploadProgressStates: React.FC;

package/dist/components/FileUploadProgress/FileUploadProgressActions.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ProgressStatus } from '../Progress/constants';
+interface FileUploadProgressActionsProps {
+    status: ProgressStatus;
+    onCloseButtonClick?: () => void;
+    onRetryButtonClick?: () => void;
+}
+export declare const FileUploadProgressActions: React.FC<FileUploadProgressActionsProps>;
+export {};

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

@@ -0,0 +1,2 @@
+export * from './FileUploadProgress';
+export * from './FileUploadProgressActions';

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface FormProps extends React.HTMLAttributes<HTMLFormElement> {
+    /**
+     * Set form label
+     */
+    labelText?: string;
+    /**
+     * Set form description
+     */
+    helperText?: string;
+    /**
+     * Footer element
+     */
+    formFooter?: React.ReactNode;
+}
+export declare const Form: React.FC<React.PropsWithChildren<FormProps>>;

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

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

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Story } from '@storybook/react';
+import { FormProps } from '../Form';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, FormProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Form: Story<FormProps>;

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

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

package/dist/components/FormField/FormField.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+export interface FormFieldProps {
+    /**
+     * Define label text
+     */
+    labelText?: string;
+    /**
+     * Renders given element aligned to label, `inline` will affect
+     */
+    labelAdornment?: React.ReactNode;
+    /**
+     * Define to associate the label with the field
+     */
+    labelFor?: string;
+    /**
+     * The CSS class for field container
+     */
+    className?: string;
+    /**
+     * Set the label to inline version
+     */
+    inline?: boolean;
+    /**
+     * Define error text
+     */
+    error?: string;
+    /**
+     * Define the description text
+     */
+    description?: React.ReactNode;
+    /**
+     * Wrapped element
+     */
+    children?: React.ReactNode;
+    /**
+     * Renders given element above the filed
+     */
+    labelRightNode?: React.ReactNode;
+}
+export declare const FormField: React.FC<FormFieldProps>;

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

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

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { FormFieldProps } from './FormField';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, FormFieldProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, FormFieldProps>;
+export declare const Examples: () => React.ReactElement;
+export declare const TextFieldWithError: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, FormFieldProps>;

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

@@ -0,0 +1 @@
+export * from './FormField';

package/dist/components/FormGroup/FormGroup.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface FormGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The CSS class for container
+     */
+    className?: string;
+    /**
+     * Set form label
+     */
+    labelText?: string;
+    /**
+     * Set form description
+     */
+    helperText?: string;
+}
+export declare const FormGroup: React.FC<React.PropsWithChildren<FormGroupProps>>;

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

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

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { FormGroupProps } from './FormGroup';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, FormGroupProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const FormGroup: {
+    ({ ...args }: FormGroupProps): React.ReactElement;
+    args: FormGroupProps;
+};

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

@@ -0,0 +1 @@
+export * from './FormGroup';

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { IconSource } from './types';
+export type IconSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export type IconKind = 'primary' | 'subtle' | 'inverted' | 'inverted-subtle' | 'link' | 'success' | 'warning' | 'error' | 'negative' | 'positive' | 'action-primary' | 'action-negative' | 'action-positive' | 'action-warning' | 'action-neutral';
+export interface IconProps {
+    /**
+     * Specify the source of svg element
+     */
+    source: IconSource;
+    /**
+     * Specify the icon size
+     */
+    size?: IconSize;
+    /**
+     * Specify the icon kind
+     */
+    kind?: IconKind;
+    /**
+     * Specify whether the icon should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * The CSS class for icon
+     */
+    className?: string;
+    /**
+     * Set the icon custom color
+     */
+    customColor?: string;
+}
+export declare const Icon: React.FC<IconProps>;
+export default Icon;

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { IconProps } from './Icon';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, IconProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Icon: {
+    (args: IconProps): React.ReactElement;
+    args: {
+        source: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+        size: string;
+        kind: string;
+        disabled: boolean;
+    };
+};

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

@@ -0,0 +1,2 @@
+export * from './Icon';
+export type { IconSource } from './types';

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

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export type IconSource = React.FC<React.SVGProps<SVGSVGElement>>;

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+interface InputIcon {
+    source: React.ReactElement;
+    place: 'left' | 'right';
+}
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Specify the input size
+     */
+    inputSize?: 'xsmall' | 'compact' | 'medium' | 'large';
+    /**
+     * Specify whether the input should be in error state
+     */
+    error?: boolean;
+    /**
+     * Specify whether the input should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Set the icon and its position
+     */
+    icon?: InputIcon;
+    /**
+     * Set to enable ellipsis
+     */
+    cropOnBlur?: boolean;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

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

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

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Story } from '@storybook/react';
+import { InputProps } from './Input';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, InputProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;
+export declare const Default: Story<InputProps>;
+export declare const Sizes: () => React.ReactElement;
+export declare const States: () => React.ReactElement;
+export declare const Types: () => React.ReactElement;
+export declare const WithIcons: () => React.ReactElement;

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

@@ -0,0 +1 @@
+export * from './Input';

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    bold: boolean;
+}
+/**
+ * Simple component which renders an `<a>` element.
+ *
+ * Place the `<Link>` inside a `<Text>` component or pass a custom className to set the typography styles.
+ *
+ * Use `<Button kind="link">` to act as a `<button>` - <a target="_self" href="/story/components-button--kinds">see the story</a>.
+ *
+ * Use `<Button href="">` to display as a `<Button>` - <a target="_self" href="/story/components-button--link">see the story</a>.
+ */
+export declare const Link: React.FC<LinkProps>;

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { LinkProps } from './Link';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, LinkProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Link: {
+    ({ ...args }: LinkProps): React.ReactElement;
+    args: {
+        bold: boolean;
+    };
+};

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

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

package/dist/components/Loader/Loader.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify the loader size
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Specify the loader label
+     */
+    label?: string;
+    /**
+     * Set the loader highlight color
+     */
+    primaryColor?: string;
+    /**
+     * Set the loader color
+     */
+    secondaryColor?: string;
+}
+export declare const Loader: React.FC<LoaderProps>;

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

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

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { LoaderProps } from './Loader';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, LoaderProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Default: (args: LoaderProps) => React.ReactElement;
+export declare const Sizes: () => React.ReactElement;
+export declare const Labeled: (args: LoaderProps) => React.ReactElement;
+export declare const CustomColors: (args: LoaderProps) => React.ReactElement;

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

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

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { ModalBaseProps } from './components/ModalBase';
+export interface ModalProps extends ModalBaseProps {
+    /**
+     * Header element. For consistent UI use `<ModalHeader/>`
+     */
+    heading?: React.ReactNode;
+    /**
+     * Header element outside the main container. For consistent UI use `<ModalHeader/>`
+     */
+    labelHeading?: React.ReactNode;
+    /**
+     * Removes the spacing inside the main container
+     */
+    fullSpaceContent?: boolean;
+    /**
+     * Footer element
+     */
+    footer?: React.ReactNode;
+    /**
+     * Class name for the content container
+     */
+    contentClassName?: string;
+}
+export declare const Modal: React.FC<ModalProps>;