@livechat/design-system-react-components 1.0.0-refresh-ui.2 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livechat/design-system-react-components",
-  "version": "1.0.0-refresh-ui.2",
+  "version": "1.0.0",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -9,7 +9,6 @@
   "license": "ISC",
   "main": "./dist/dsrc.cjs.js",
   "module": "./dist/dsrc.es.js",
-  "unpkg": "./dist/dsrc.umd.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist"
@@ -74,7 +73,7 @@
     "@floating-ui/react-dom": "^0.7.0",
     "@floating-ui/react-dom-interactions": "^0.6.1",
     "@livechat/data-utils": "^0.2.16",
-    "@livechat/design-system-icons": "*",
+    "@livechat/design-system-icons": "^1.0.0",
     "@popperjs/core": "^2.11.2",
     "clsx": "^1.1.1",
     "date-fns": "^2.28.0",
@@ -84,5 +83,5 @@
     "react-day-picker": "^7.4.10",
     "react-transition-group": "^4.4.2"
   },
-  "gitHead": "3674c128cc39940d1939bf7b8628be0b6f2c6b5f"
+  "gitHead": "b9ba660417e9cc0be271c49d8b02626b60a465f0"
 }

package/dist/components/ActionMenu/ActionMenu.d.ts

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import { Placement } from '@floating-ui/react-dom';
-export interface ActionMenuProps {
-    /**
-     * The CSS class for menu container
-     */
-    className?: string;
-    /**
-     * Array of menu options
-     */
-    options: Array<{
-        key: string;
-        element: React.ReactNode;
-        disabled?: boolean;
-        withDivider?: boolean;
-        onClick: () => void;
-    }>;
-    /**
-     * Trigger element
-     */
-    triggerRenderer: React.ReactNode;
-    /**
-     * The menu placement
-     */
-    placement?: Placement;
-    /**
-     * Will open menu on component initialization
-     */
-    openedOnInit?: boolean;
-    /**
-     * Menu will stay open after option click
-     */
-    keepOpenOnClick?: boolean;
-}
-export declare const ActionMenu: React.FC<ActionMenuProps>;

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

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

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

@@ -1,11 +0,0 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-    component: React.FC<import("./ActionMenu").ActionMenuProps>;
-    subcomponents: {
-        ActionMenuItem: React.FC<React.PropsWithChildren<import("./ActionMenuItem").ActionMenuItemProps>>;
-    };
-};
-export default _default;
-export declare const Default: () => React.ReactElement;
-export declare const KeepOpenOnItemClick: () => React.ReactElement;

package/dist/components/ActionMenu/ActionMenuItem.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-export interface ActionMenuItemProps {
-    /**
-     * Renders given element on the left of element
-     */
-    leftNode?: React.ReactNode;
-    /**
-     * Renders given element on the right of element
-     */
-    rightNode?: React.ReactNode;
-    /**
-     * Specify the kind of menu item
-     */
-    kind?: 'warning' | undefined;
-}
-export declare const ActionMenuItem: React.FC<React.PropsWithChildren<ActionMenuItemProps>>;

package/dist/components/ActionMenu/constants.d.ts

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import noop from '../../utils/noop';
-export declare const exampleOptions: ({
-    key: string;
-    element: React.JSX.Element;
-    onClick: typeof noop;
-    disabled?: undefined;
-    withDivider?: undefined;
-} | {
-    key: string;
-    element: React.JSX.Element;
-    disabled: boolean;
-    onClick: typeof noop;
-    withDivider?: undefined;
-} | {
-    key: string;
-    element: React.JSX.Element;
-    onClick: typeof noop;
-    withDivider: boolean;
-    disabled?: undefined;
-})[];

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

@@ -1,2 +0,0 @@
-export { ActionMenu } from './ActionMenu';
-export { ActionMenuItem } from './ActionMenuItem';

package/dist/components/Alert/Alert.d.ts

@@ -1,32 +0,0 @@
-import * as React from 'react';
-type AlertKind = 'info' | 'warning' | 'success' | 'error';
-export interface AlertProps {
-    /**
-     * The CSS class for container
-     */
-    className?: string;
-    /**
-     * Specify the kind of Alert
-     */
-    kind?: AlertKind;
-    /**
-     * Shows the primary CTA button
-     */
-    primaryButton?: {
-        handleClick: () => void;
-        label: string;
-    };
-    /**
-     * Shows the secondary CTA button
-     */
-    secondaryButton?: {
-        handleClick: () => void;
-        label: string;
-    };
-    /**
-     * The optional event handler for close button
-     */
-    onClose?: () => void;
-}
-export declare const Alert: React.FC<React.PropsWithChildren<AlertProps>>;
-export {};

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

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

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

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

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

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

package/dist/components/Avatar/Avatar.d.ts

@@ -1,49 +0,0 @@
-import * as React from 'react';
-type AvatarShape = 'circle' | 'rounded-square';
-type AvatarSize = 'xxxsmall' | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
-type AvatarStatus = 'available' | 'unavailable' | 'unknown';
-type AvatarType = 'image' | 'text';
-export interface AvatarProps {
-    /**
-     * Alternate text for an image avatar
-     */
-    alt?: string;
-    /**
-     * The CSS class for container
-     */
-    className?: string;
-    /**
-     * Specify the background color
-     */
-    color?: string;
-    /**
-     * Specify the avatar shape
-     */
-    shape?: AvatarShape;
-    /**
-     * Specify the avatar size
-     */
-    size?: AvatarSize;
-    /**
-     * Image source for the image avatar
-     */
-    src?: string;
-    /**
-     * Displays status dot
-     */
-    status?: AvatarStatus;
-    /**
-     * Text for an text avatar
-     */
-    text?: string;
-    /**
-     * Specify the avatar type
-     */
-    type: AvatarType;
-    /**
-     * Displays rim
-     */
-    withRim?: boolean;
-}
-export declare const Avatar: React.FC<AvatarProps>;
-export {};

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

@@ -1,2 +0,0 @@
-export declare function getInitials(name?: string, count?: number): string;
-export declare function getFontColor(color: string): string;

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

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

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

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { AvatarProps } from './Avatar';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, AvatarProps & {
-    children?: React.ReactNode;
-}>;
-export default _default;
-export declare const Default: {
-    (args: AvatarProps): React.ReactElement;
-    args: {
-        type: string;
-        text: string;
-    };
-};
-export declare const Types: () => React.ReactElement;
-export declare const Shapes: () => React.ReactElement;
-export declare const Sizes: () => React.ReactElement;
-export declare const Statuses: () => React.ReactElement;
-export declare const Colors: () => React.ReactElement;
-export declare const FallbackAvatar: () => React.ReactElement;
-export declare const Rim: () => React.ReactElement;
-export declare const SizesWithStatus: () => React.ReactElement;
-export declare const SizesWithRim: () => React.ReactElement;

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

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

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

@@ -1,24 +0,0 @@
-import * as React from 'react';
-export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-    /**
-     * Value to display
-     */
-    count?: number;
-    /**
-     * Specify the badge kind
-     */
-    kind?: 'primary' | 'secondary' | 'tertiary';
-    /**
-     * The maximum value after which a "+" will be displayed next to the number
-     */
-    max?: number;
-    /**
-     * Specify the badge size
-     */
-    size?: 'large' | 'medium' | 'compact';
-    /**
-     * Specify the badge type
-     */
-    type?: 'counter' | 'alert' | 'dot';
-}
-export declare const Badge: React.FC<BadgeProps>;

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

@@ -1 +0,0 @@
-export declare function formatCount(count: number, max: number): string;

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

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

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

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { Story } from '@storybook/react';
-import { BadgeProps } from './Badge';
-declare const _default: {
-    title: string;
-    component: React.FC<BadgeProps>;
-};
-export default _default;
-export declare const Default: Story<BadgeProps>;
-export declare const Sizes: () => React.ReactElement;
-export declare const Kinds: () => React.ReactElement;
-export declare const Types: () => React.ReactElement;

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

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

package/dist/components/Button/Button.d.ts

@@ -1,63 +0,0 @@
-import * as React from 'react';
-import { Size } from 'utils';
-export type ButtonKind = 'basic' | 'primary' | 'secondary' | 'destructive' | 'text' | 'plain' | 'plain-light' | 'subtle' | 'float' | 'dotted';
-export type ButtonProps = {
-    /**
-     * Specify the button kind
-     */
-    kind?: ButtonKind;
-    /**
-     * Specify the button size
-     */
-    size?: Size;
-    /**
-     * Set the loading state
-     */
-    loading?: boolean;
-    /**
-     * Set the button for full width
-     */
-    fullWidth?: boolean;
-    /**
-     * Text displayed in loading state
-     */
-    loaderLabel?: string;
-    /**
-     * Renders given element
-     */
-    icon?: React.ReactElement;
-    /**
-     * Specify the place to render element given in `icon` prop
-     */
-    iconPosition?: 'left' | 'right';
-} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.AnchorHTMLAttributes<HTMLAnchorElement>;
-export declare const Button: React.ForwardRefExoticComponent<{
-    /**
-     * Specify the button kind
-     */
-    kind?: ButtonKind | undefined;
-    /**
-     * Specify the button size
-     */
-    size?: Size | undefined;
-    /**
-     * Set the loading state
-     */
-    loading?: boolean | undefined;
-    /**
-     * Set the button for full width
-     */
-    fullWidth?: boolean | undefined;
-    /**
-     * Text displayed in loading state
-     */
-    loaderLabel?: string | undefined;
-    /**
-     * Renders given element
-     */
-    icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    /**
-     * Specify the place to render element given in `icon` prop
-     */
-    iconPosition?: "right" | "left" | undefined;
-} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;

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

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

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

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import { ButtonProps } from './Button';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
-    kind?: import("./Button").ButtonKind | undefined;
-    size?: import("../..").Size | undefined;
-    loading?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-    loaderLabel?: string | undefined;
-    icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    iconPosition?: "right" | "left" | undefined;
-} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
-export default _default;
-export declare const Default: {
-    (args: ButtonProps): React.ReactElement;
-    argTypes: {
-        icon: {
-            options: string[];
-            mapping: {
-                [k: string]: React.JSX.Element;
-            } & {
-                None: null;
-            };
-            control: {
-                type: string;
-                labels: string[];
-            };
-        };
-    };
-    args: {
-        loading: boolean;
-        disabled: boolean;
-        size: string;
-        kind: string;
-        children: string;
-        fullWidth: boolean;
-        iconPosition: string;
-        icon: string;
-    };
-};
-export declare const KindsAndStates: () => React.ReactElement;
-export declare const Sizes: () => React.ReactElement;
-export declare const ButtonAsLink: () => React.ReactElement;

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

@@ -1,2 +0,0 @@
-export { Button } from './Button';
-export type { ButtonKind, ButtonProps } from './Button';

package/dist/components/Card/Card.d.ts

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { ButtonProps } from '../Button';
-export type CardButtonOptions = Pick<ButtonProps, 'children' | 'kind' | 'onClick'>;
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Alternate text for an image card
-     */
-    alt?: string;
-    /**
-     * Array of card buttons
-     */
-    buttonsOptions?: CardButtonOptions[];
-    /**
-     * Card description
-     */
-    description?: string;
-    /**
-     * Element to display in the expandable area
-     */
-    expandableContent?: React.ReactNode;
-    /**
-     * Image source for the image card
-     */
-    src?: string;
-    /**
-     * Card title
-     */
-    title?: string;
-}
-export declare const Card: React.FC<CardProps>;

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

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

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

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

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

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

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-export interface CheckboxProps extends React.HTMLAttributes<HTMLInputElement> {
-    /**
-     * Specify whether the checkbox should be disabled
-     */
-    disabled?: boolean;
-    /**
-     * Specify whether the checkbox should be checked
-     */
-    checked?: boolean;
-    /**
-     * Set the checkbox description
-     */
-    description?: string;
-}
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

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

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

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

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { CheckboxProps } from './Checkbox';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, CheckboxProps & React.RefAttributes<HTMLInputElement>>;
-export default _default;
-export declare const Checkbox: {
-    (args: CheckboxProps): React.ReactElement;
-    args: {
-        disabled: boolean;
-        checked: boolean;
-        description: string;
-        children: string;
-    };
-};

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

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

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

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import ReactDayPicker from 'react-day-picker';
-import { IDatePickerProps } from './types';
-export declare const DatePicker: React.ForwardRefExoticComponent<IDatePickerProps & React.RefAttributes<ReactDayPicker>>;

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

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

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

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { IDatePickerProps } from './types';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, IDatePickerProps & React.RefAttributes<import("react-day-picker").default>>;
-export default _default;
-export declare const DatePicker: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDatePickerProps>;
-export declare const DatePickerWithDatesBetweenTwoMonths: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDatePickerProps>;
-export declare const DatePickerWithCustomFirstDayOfWeek: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDatePickerProps>;

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

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import { IDatePickerNavbarProps } from './types';
-declare const DatePickerNavbar: React.FC<IDatePickerNavbarProps>;
-export default DatePickerNavbar;

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

@@ -1,2 +0,0 @@
-import * as React from 'react';
-export declare const DatePickerRangeCalendarsWrapper: React.FC<React.HTMLAttributes<HTMLDivElement>>;

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

@@ -1,16 +0,0 @@
-import { ReactElement } from 'react';
-import { IRangeDatePickerProps } from './types';
-export declare const RangeDatePicker: {
-    ({ options, initialSelectedItemKey, initialFromDate, initialToDate, toMonth, onChange, children, }: IRangeDatePickerProps): ReactElement;
-    defaultProps: {
-        options: {
-            id: string;
-            label: string;
-            isManual: boolean;
-            value: {
-                from: undefined;
-                to: undefined;
-            };
-        }[];
-    };
-};

package/dist/components/DatePicker/RangeDatePicker.spec.d.ts

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

package/dist/components/DatePicker/RangeDatePicker.stories.d.ts

@@ -1,4 +0,0 @@
-import { IRangeDatePickerProps } from './types';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, IRangeDatePickerProps>;
-export default _default;
-export declare const RangeDatePicker: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IRangeDatePickerProps>;

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

@@ -1,16 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

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