@livechat/design-system-react-components 1.16.5 → 1.16.7

package/README.md

@@ -0,0 +1,82 @@
+<h1 align="center">
+  <img src="./../../docs/assets/logo.png" alt="livechat design-system logo" /><br />
+  LiveChat Design System React Components
+</h1>
+
+<p align="center">
+  <a href="https://www.npmjs.com/@livechat/design-system-react-components">
+    <img alt="npm version react-components" src="https://img.shields.io/npm/v/@livechat/design-system-react-components.svg?label=react-components">
+  </a>
+  <a href="https://design.livechat.com/">
+    <img src="https://img.shields.io/static/v1?label=documentation&message=storybook&color=ff4685">
+  </a>
+  <a href="https://github.com/livechat/design-system/actions/workflows/tests.yml">
+    <img src="https://github.com/livechat/design-system/actions/workflows/tests.yml/badge.svg" alt="Workflow status badge" loading="lazy">
+  </a>
+</p>
+
+This package contains a library of reusable React components designed to be used in various projects. These components are the building blocks of our design system and can be easily integrated into your applications.
+
+
+## Installation
+
+Run the following command using [npm](https://www.npmjs.com/) (or with you other favorite package manager, eg. [yarn](https://yarnpkg.com/)):
+
+```
+npm install @livechat/design-system-react-components @livechat/design-system-icons --save
+```
+
+## Basic usage
+
+It is required to import the `CSS` directly into your project so it could be applied to components:
+
+```js
+import '@livechat/design-system-react-components/dist/style.css';
+```
+
+You can import components directly from the npm package:
+
+```jsx
+import { Button } from '@livechat/design-system-react-components';
+```
+
+In case of icons there is a separate package (`@livechat/design-system-icons`) to be used in conjunction:
+
+```jsx
+import { Edit } from '@livechat/design-system-icons';
+import { Icon } from '@livechat/design-system-react-components';
+
+<Icon source={Edit} kind="primary" />;
+```
+
+## Documentation
+
+At this stage of the project we consider Storybook and Figma as parts of our documentation ecosystem.
+
+[Storybook](https://design.livechat.com/) - includes design system foundations, describes components API and allows to familiarize with the thier capabilities
+[Figma](https://www.figma.com/file/2pFu80PXO5A2tfyrAGnx91/Product-Components) - it's not an official documentation from design perspective but we follow a simple rule of working in public
+
+
+### Development
+
+Required version of `node.js` is `16.13.2`.
+
+If you're a [volta](https://volta.sh/) user, the project maintains node version entry within `package.json`.
+
+You should start with installing dependencies:
+
+```
+npm install
+```
+
+After that just execute the `start` command. It will build all necessary packages in `watch` mode. `Storybook` should start automatically (if not - try visiting http://localhost:6006).
+
+```
+npm start
+```
+
+If `Storybook` is not enough, you can additionaly run `npm start:example` which will run `example-react` package in `watch` mode. `example-react` is a simple [React](https://reactjs.org/) app based on [vite-react boilterplate](https://github.com/vitejs/vite/tree/main/packages/create-vite). It has a direct dependency on `react-components` package, so every change should be reflected in the app via auto-reload.
+
+### Contributing
+
+For the `contribution/testing/releasing` guides please refer to the [main repository](https://github.com/livechat/design-system/) documentation.

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { IconSource } from '../index';
+import { IconName } from './types';
+export type IconsMap = {
+    [key: string]: IconSource;
+};
+interface IProps {
+    data: IconName[];
+}
+export declare const IconsShowcase: React.FC<IProps>;
+export {};

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

@@ -0,0 +1,2 @@
+import { IconGroup, IconName } from './types';
+export declare const IconsData: Record<IconName, IconGroup>;

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

@@ -0,0 +1,2 @@
+import { IconGroup, IconName } from './types';
+export declare const getIconsByGroup: (group: IconGroup) => IconName[];

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

@@ -0,0 +1,9 @@
+import * as DSIcons from '@livechat/design-system-icons';
+export type IconName = keyof typeof DSIcons;
+export declare enum IconGroup {
+    Arrows = 0,
+    Text = 1,
+    FileType = 2,
+    General = 3,
+    Brands = 4
+}

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

@@ -1,3 +1,4 @@
 import { IPickerListItem } from './types';
 export declare const findIndicesWhere: <T>(array: T[], predicate: (item: T) => boolean) => number[];
 export declare const getNormalizedItems: (items: IPickerListItem[]) => IPickerListItem[];
+export declare const getPickerListItemKey: ({ key }: IPickerListItem) => string;

package/dist/components/Picker/hooks/useFloatingPicker.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { FloatingContext, Placement, Strategy, UseClickProps, UseDismissProps } from '@floating-ui/react';
+import { IPickerListItem } from '../types';
+interface UseFloatingPickerProps {
+    disabled?: boolean;
+    items: IPickerListItem[];
+    placement?: Placement;
+    floatingStrategy?: Strategy;
+    useClickHookProps?: UseClickProps;
+    useDismissHookProps?: UseDismissProps;
+    openedOnInit: boolean;
+    isOpen?: boolean;
+    onVisibilityChange?: (open: boolean, event?: Event | undefined) => void;
+}
+interface IUseFloatingPicker {
+    getReferenceProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    setReference: (element: HTMLElement | null) => void;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    floatingStyles: React.CSSProperties;
+    isPositioned: boolean;
+    context: FloatingContext<HTMLButtonElement>;
+    nodeId: string;
+    setFloating: (node: HTMLElement | null) => void;
+    activeIndex: number | null;
+    listElementsRef: React.MutableRefObject<(HTMLElement | null)[]>;
+    virtualItemRef: React.RefObject<HTMLDivElement>;
+    maxHeight: number;
+    pointer: boolean;
+    setPointer: (pointer: boolean) => void;
+}
+export declare const useFloatingPicker: ({ disabled, items, placement, floatingStrategy, useDismissHookProps, useClickHookProps, isOpen, onVisibilityChange, }: UseFloatingPickerProps) => IUseFloatingPicker;
+export {};

package/dist/components/Picker/hooks/usePickerItems.d.ts

@@ -0,0 +1,20 @@
+import { IPickerListItem } from '../types';
+interface UsePickerItemsProps {
+    selected?: IPickerListItem[] | null;
+    options: IPickerListItem[];
+    type: 'single' | 'multi';
+    selectAllOptionText?: string;
+    onSelect: (items: IPickerListItem[] | null) => void;
+    setOpen: (isOpen: boolean) => void;
+}
+interface IUsePickerItems {
+    selectedKeys: string[];
+    items: IPickerListItem[];
+    searchPhrase: string;
+    handleSelect: (key: string) => void;
+    handleOnFilter: (text: string) => void;
+    handleItemRemove: (itemKey: string) => void;
+    handleClear: () => void;
+}
+export declare const usePickerItems: ({ selected, options, type, selectAllOptionText, onSelect, setOpen, }: UsePickerItemsProps) => IUsePickerItems;
+export {};

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

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { Strategy, UseClickProps, UseDismissProps } from '@floating-ui/react';
+import { Placement, Strategy, UseClickProps, UseDismissProps } from '@floating-ui/react';
 import { VirtuosoProps } from 'react-virtuoso';
 import { Size } from '../../utils';
 import { ComponentCoreProps } from '../../utils/types';
@@ -80,6 +80,18 @@ export interface IPickerProps extends ComponentCoreProps {
      * Set to hide clear selection button
      */
     hideClearButton?: boolean;
+    /**
+     * Set picker visibility
+     */
+    isVisible?: boolean;
+    /**
+     * Optional handler called on picker list hide
+     */
+    onClose?: (event?: Event) => void;
+    /**
+     * Optional handler called on picker list show
+     */
+    onOpen?: (event?: Event) => void;
     /**
      * Will open picker on component initialization
      */
@@ -92,6 +104,10 @@ export interface IPickerProps extends ComponentCoreProps {
      * Clears the search input after item select
      */
     clearSearchAfterSelection?: boolean;
+    /**
+     * The popover placement related to the trigger element
+     */
+    placement?: Placement;
     /**
      * Floating strategy for the picker component from @floating-ui/react
      */

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { TDisplaySize } from './types';
 interface IProps {
-    size?: 'md' | 'sm';
+    /** Size of the text */
+    size?: TDisplaySize;
     /** DOM element name that will be rendered */
     as?: string;
     /** Optional custom className */

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

@@ -1,11 +1,15 @@
 import * as React from 'react';
-type TSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
-interface IProps {
-    size?: TSize;
+import { THeadingSize } from './types';
+interface IProps extends React.HTMLAttributes<HTMLElement> {
+    size?: THeadingSize;
     /** DOM element name that will be rendered */
     as?: string;
     /** Optional custom className */
     className?: string;
+    /** Optional prop to set the uppercase */
+    uppercase?: boolean;
+    /** Optional prop to set the bold */
+    bold?: boolean;
 }
 export declare const Heading: React.FC<React.PropsWithChildren<IProps>>;
 export {};

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

@@ -1,14 +1,24 @@
 import * as React from 'react';
-type TSize = 'md' | 'sm' | 'xs';
-interface IProps {
+import { TTextSize } from './types';
+interface IProps extends React.HTMLAttributes<HTMLElement> {
     /** DOM element name that will be rendered */
     as?: string;
-    size?: TSize;
+    /** Size of the text */
+    size?: TTextSize;
     /** Optional custom className */
     className?: string;
+    /**
+     * Optional prop to set the uppercase
+     * @deprecated Use `uppercase` instead
+     * */
     caps?: boolean;
+    /** Optional prop to set the uppercase */
+    uppercase?: boolean;
+    /** Optional prop to set the bold */
     bold?: boolean;
+    /** Optional prop to set the underline */
     underline?: boolean;
+    /** Optional prop to set the strike */
     strike?: boolean;
 }
 export declare const Text: React.FC<React.PropsWithChildren<IProps>>;

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

@@ -1,3 +1,4 @@
 export { Heading } from './Heading';
 export { Text } from './Text';
 export { Display } from './Display';
+export type { THeadingSize, TTextSize, TDisplaySize } from './types';

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

@@ -0,0 +1,3 @@
+export type TTextSize = 'xs' | 'sm' | 'md';
+export type THeadingSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type TDisplaySize = 'sm' | 'md' | 'max';