@livechat/design-system-react-components 1.0.0-alpha.2 → 1.0.0-alpha.4

package/src/themes/light.scss

@@ -0,0 +1,127 @@
+.lc-light-theme {
+  --background: #fff;
+  --surface-basic-default: #fff;
+  --surface-basic-subtle: #f6f6f7;
+  --surface-basic-hover: #e2e2e4;
+  --surface-basic-active: #c9c9cd;
+  --surface-basic-disabled: #f6f6f7;
+  --surface-secondary-default: #c9c9cd;
+  --surface-secondary-subtle: #e4e8ec;
+  --surface-secondary-hover: #ababb1;
+  --surface-secondary-disabled: #eeeeef;
+  --surface-feedback-info: #daedff;
+  --surface-feedback-negative: #ffe5e5;
+  --surface-feedback-warning: #fff2d6;
+  --surface-feedback-positive: #e4f4ed;
+  --surface-invert-default: #1b1b20;
+  --surface-invert-subtle: #4e4e58;
+  --surface-invert-disabled: #8d8d95;
+  --surface-overlay: rgba(19, 19, 23, 0.7);
+  --content-default: #131317;
+  --content-subtle: #62626d;
+  --content-disabled: #8d8d95;
+  --content-white-locked: #fff;
+  --content-invert-default: #fff;
+  --content-invert-subtle: rgba(255, 255, 255, 0.7);
+  --content-invert-disabled: rgba(255, 255, 255, 0.5);
+  --border-default: #c9c9cd;
+  --border-subtle: #eeeeef;
+  --border-hover: #ababb1;
+  --border-disabled: #e2e2e4;
+  --border-invert-default: rgba(255, 255, 255, 0.7);
+  --border-invert-subtle: rgba(255, 255, 255, 0.3);
+  --border-invert-hover: #fff;
+  --border-invert-disabled: rgba(255, 255, 255, 0.5);
+  --color-action-active: #003fa4;
+  --color-action-hover: #004bc2;
+  --color-action-default: #06f;
+  --color-action-default-rgb: 0, 102, 255;
+  --color-action-disabled: #9dceff;
+  --color-negative-active: #930002;
+  --color-negative-hover: #ae0003;
+  --color-negative-default: #ca0005;
+  --color-negative-disabled: #eba3a3;
+  --color-warning-default: #e8bb00;
+  --color-warning-hover: #c9a100;
+  --color-positive-default: #00893c;
+  --color-positive-hover: #006329;
+  --color-positive-disabled: #d1f4d5;
+  --color-bot: #50009c;
+  --color-black: #131317;
+  --color-white: #fff;
+  --decor-blue900: #003288;
+  --decor-blue800: #003fa4;
+  --decor-blue700: #004bc2;
+  --decor-blue600: #0059e1;
+  --decor-blue500: #06f;
+  --decor-blue400: #328dff;
+  --decor-blue300: #68afff;
+  --decor-blue200: #9dceff;
+  --decor-blue100: #daedff;
+  --decor-blue50: #f4faff;
+  --decor-orange900: #6c1d00;
+  --decor-orange800: #842600;
+  --decor-orange700: #9c2e00;
+  --decor-orange600: #b43700;
+  --decor-orange500: #d54300;
+  --decor-orange400: #ff5100;
+  --decor-orange300: #ff8a77;
+  --decor-orange200: #ffb8af;
+  --decor-orange100: #ffe5e3;
+  --decor-orange50: #fff8f7;
+  --decor-yellow900: #493700;
+  --decor-yellow800: #755b00;
+  --decor-yellow700: #c9a100;
+  --decor-yellow600: #e8bb00;
+  --decor-yellow500: #f3c600;
+  --decor-yellow400: #d1aa00;
+  --decor-yellow300: #fed65e;
+  --decor-yellow200: #fedc89;
+  --decor-yellow100: #fff2d6;
+  --decor-yellow50: #fff9ed;
+  --decor-gray950: #131317;
+  --decor-gray900: #1b1b20;
+  --decor-gray800: #29292f;
+  --decor-gray700: #3b3b43;
+  --decor-gray600: #4e4e58;
+  --decor-gray500: #62626d;
+  --decor-gray400: #767680;
+  --decor-gray300: #8d8d95;
+  --decor-gray200: #ababb1;
+  --decor-gray150: #c9c9cd;
+  --decor-gray100: #c9c9cd;
+  --decor-gray75: #eeeeef;
+  --decor-gray50: #e2e2e4;
+  --decor-gray40: #eeeeef;
+  --decor-gray20: #fcfcfc;
+  --decor-green900: #00431a;
+  --decor-green800: #005321;
+  --decor-green700: #006329;
+  --decor-green600: #007331;
+  --decor-green500: #00893c;
+  --decor-green400: #00a449;
+  --decor-green300: #00c057;
+  --decor-green200: #7edd92;
+  --decor-green100: #e4f4ed;
+  --decor-green50: #f3fcf4;
+  --decor-red900: #790002;
+  --decor-red800: #930002;
+  --decor-red700: #ae0003;
+  --decor-red600: #ca0005;
+  --decor-red500: #ee0007;
+  --decor-red400: #ff4c4d;
+  --decor-red300: #ff8889;
+  --decor-red200: #ffb7b7;
+  --decor-red100: #ffe5e5;
+  --decor-red50: #fff8f8;
+  --decor-purple900: #50009c;
+  --decor-purple800: #6100bd;
+  --decor-purple700: #7400df;
+  --decor-purple600: #8609ff;
+  --decor-purple500: #9146ff;
+  --decor-purple400: #a372ff;
+  --decor-purple300: #b99aff;
+  --decor-purple200: #d1c0ff;
+  --decor-purple100: #eee8ff;
+  --decor-purple50: #faf8ff;
+}

package/src/utils/keyCodes.ts

@@ -0,0 +1,12 @@
+export const KeyCodes = {
+  esc: 'Escape',
+  enter: 'Enter',
+  backspace: 'Backspace',
+  delete: 'Delete',
+  spacebar: ' ',
+  tab: 'Tab',
+  semicolon: ';',
+  comma: ',',
+  arrowUp: 'ArrowUp',
+  arrowDown: 'ArrowDown',
+};

package/src/utils/noop.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export default function (): void {}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "baseUrl": "src",
+    "paths": {
+      "test-utils": ["test/utils.ts"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,44 @@
+/// <reference types="vitest" />
+/// <reference types="vite/client" />
+
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import react from '@vitejs/plugin-react';
+
+import * as path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  css: {
+    modules: {
+      generateScopedName: 'lc-[name]__[local]___[hash:base64:5]',
+    },
+  },
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      name: 'dsrc',
+      formats: ['es', 'umd', 'cjs'],
+      fileName: (format) => `dsrc.${format}.js`,
+    },
+    rollupOptions: {
+      external: (id: string) => !id.startsWith('.') && !path.isAbsolute(id),
+      output: {
+        globals: {
+          react: 'React',
+        },
+      },
+    },
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/test/setup.ts',
+  },
+  resolve: {
+    alias: {
+      'test-utils': path.resolve(__dirname, 'src/test/utils.ts'),
+    },
+  },
+  plugins: [dts(), react({ jsxRuntime: 'classic' })],
+});

package/dist/components/Alert.d.ts

@@ -1,19 +0,0 @@
-import * as React from 'react';
-export declare enum AlertSize {
-    Small = "small",
-    Medium = "medium",
-    Large = "large"
-}
-export declare enum AlertType {
-    Info = "info",
-    Warning = "warning",
-    Success = "success",
-    Error = "error"
-}
-export interface IAlertProps {
-    className?: string;
-    size?: AlertSize;
-    type?: AlertType;
-    onClose?: () => void;
-}
-export declare const Alert: React.FC<IAlertProps>;

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

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

package/dist/components/Badge.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-export interface IBadgeProps {
-    secondary?: boolean;
-    className?: string;
-}
-export declare const Badge: React.FC<IBadgeProps>;

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

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

package/dist/components/Button.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-export declare type ButtonSize = 'compact' | 'medium' | 'large';
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    kind?: 'basic' | 'primary' | 'secondary' | 'destructive' | 'text';
-    size?: ButtonSize;
-    disabled?: boolean;
-    loading?: boolean;
-    fullWidth?: boolean;
-    loaderLabel?: string;
-    icon?: React.ReactElement;
-    iconPosition?: 'left' | 'right';
-}
-export declare const Button: React.FC<ButtonProps>;

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

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

package/dist/components/ButtonGroup.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { ButtonSize, ButtonProps } from './Button';
-export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-    currentIndex?: number;
-    initialIndex?: number;
-    fullWidth?: boolean;
-    size?: ButtonSize;
-    children: ReadonlyArray<React.ReactElement<React.PropsWithChildren<ButtonProps>>>;
-    onIndexChange?: (currentIndex: number, event: React.MouseEvent<HTMLButtonElement>) => void;
-}
-export declare const ButtonGroup: React.FC<ButtonGroupProps>;

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

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

package/dist/components/Card.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-export interface ICardProps extends React.HTMLAttributes<HTMLDivElement> {
-    title: string;
-    img?: string;
-}
-export declare const Card: React.FC<ICardProps>;

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

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

package/dist/components/Checkbox.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-export interface ICheckboxProps extends React.HTMLAttributes<HTMLInputElement> {
-    className?: string;
-    checked?: boolean;
-    disabled?: boolean;
-}
-export declare const Checkbox: React.FC<ICheckboxProps>;

package/dist/components/CheckboxField.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-export interface ICheckboxFieldProps extends React.HTMLAttributes<HTMLInputElement> {
-    description?: string;
-    checked?: boolean;
-    disabled?: boolean;
-}
-export declare const CheckboxField: React.FC<ICheckboxFieldProps>;

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

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

package/dist/components/FieldDescription.d.ts

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

package/dist/components/FieldError.d.ts

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

package/dist/components/FieldGroup.d.ts

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

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

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

package/dist/components/FieldLabel.d.ts

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

package/dist/components/Form.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-export interface IFormProps extends React.HTMLAttributes<HTMLFormElement> {
-    labelText?: string;
-    helperText?: string;
-    formFooter?: React.ReactNode;
-}
-export declare const Form: React.FC<IFormProps>;

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

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

package/dist/components/FormGroup.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-export interface IFormGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-    className?: string;
-    labelText?: string;
-    helperText?: string;
-}
-export declare const FormGroup: React.FC<IFormGroupProps>;

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

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

package/dist/components/Heading.d.ts

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

package/dist/components/Icon.d.ts

@@ -1,69 +0,0 @@
-import * as React from 'react';
-export declare enum IconSizeName {
-    XSmall = "xsmall",
-    Small = "small",
-    Medium = "medium",
-    Large = "large",
-    XLarge = "xlarge"
-}
-export declare const IconSize: {
-    xsmall: {
-        width: number;
-        height: number;
-    };
-    small: {
-        width: number;
-        height: number;
-    };
-    medium: {
-        width: number;
-        height: number;
-    };
-    large: {
-        width: number;
-        height: number;
-    };
-    xlarge: {
-        width: number;
-        height: number;
-    };
-};
-export declare enum IconTypeName {
-    Primary = "primary",
-    Subtle = "subtle",
-    Inverted = "inverted",
-    InvertedSubtle = "inverted_subtle",
-    Link = "link",
-    Success = "success",
-    Warning = "warning",
-    Error = "error"
-}
-export declare const IconColorMapper: {
-    primary: string;
-    subtle: string;
-    inverted: string;
-    inverted_subtle: string;
-    link: string;
-    success: string;
-    warning: string;
-    error: string;
-};
-export declare const IconColorDisabledMapper: {
-    primary: string;
-    subtle: string;
-    inverted: string;
-    inverted_subtle: string;
-    link: string;
-    success: string;
-    warning: string;
-    error: string;
-};
-export interface IIconProps {
-    source: React.FC<React.SVGProps<SVGSVGElement>> | string;
-    size?: IconSizeName;
-    iconType?: IconTypeName;
-    disabled?: boolean;
-    className?: string;
-}
-export declare const Icon: React.FC<IIconProps>;
-export default Icon;

package/dist/components/Loader.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-export interface Props extends React.HTMLAttributes<HTMLDivElement> {
-    size?: 'small' | 'medium' | 'large';
-    label?: string;
-    /** Fragment circle color */
-    primaryColor?: string;
-    /** Main circle color */
-    secondaryColor?: string;
-}
-export declare const Loader: React.FC<Props>;

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

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

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

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { IModalBaseProps } from './ModalBase';
-export interface IActionModalProps extends IModalBaseProps {
-    icon?: React.ReactNode;
-    heading?: React.ReactNode;
-    actions?: React.ReactNode;
-}
-export declare const ActionModal: React.FC<IActionModalProps>;

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

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { IModalBaseProps } from './ModalBase';
-export interface IModalProps extends IModalBaseProps {
-    heading?: React.ReactNode;
-    footer?: React.ReactNode;
-}
-export declare const Modal: React.FC<IModalProps>;

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

@@ -1,6 +0,0 @@
-import * as React from 'react';
-export interface IModalBaseProps extends React.HTMLAttributes<HTMLDivElement> {
-    onClose(): void;
-    closeOnEscPress?: boolean;
-}
-export declare const ModalBase: React.FC<IModalBaseProps>;

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

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

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

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

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

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

package/dist/components/ProgressBar.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-import { ProgressSize, ProgressStatus } from './constants';
-export interface IProps {
-    className?: string;
-    percent: number;
-    status?: ProgressStatus;
-    size?: ProgressSize;
-}
-export declare const ProgressBar: React.ExoticComponent<IProps & React.RefAttributes<HTMLInputElement>>;

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

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

package/dist/components/ProgressCircle.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-import { ProgressSize, ProgressStatus } from './constants';
-export interface IProps {
-    className?: string;
-    percent: number;
-    status?: ProgressStatus;
-    size?: ProgressSize;
-}
-export declare const ProgressCircle: React.ExoticComponent<IProps & React.RefAttributes<HTMLInputElement>>;

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

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

package/dist/components/PromoBanner.d.ts

@@ -1,19 +0,0 @@
-import * as React from 'react';
-export declare enum PromoBannerSize {
-    Small = "small",
-    Medium = "medium",
-    Large = "large"
-}
-export interface IPromoBannerProps {
-    className?: string;
-    buttonText?: string;
-    header: string;
-    img?: string;
-    light?: boolean;
-    linkText?: string;
-    size?: PromoBannerSize;
-    onButtonClick?: () => void;
-    onClose?: () => void;
-    onLinkClick?: () => void;
-}
-export declare const PromoBanner: React.FC<IPromoBannerProps>;

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

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

package/dist/components/RadioButton.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-export interface IRadioButtonProps extends React.HTMLAttributes<HTMLInputElement> {
-    description?: React.ReactNode;
-    checked?: boolean;
-    disabled?: boolean;
-}
-export declare const RadioButton: React.FC<IRadioButtonProps>;

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

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

package/dist/components/Switch.d.ts

@@ -1,17 +0,0 @@
-import * as React from 'react';
-declare enum SwitchSize {
-    Basic = "basic",
-    Compact = "compact"
-}
-export interface IProps {
-    className?: string;
-    defaultOn?: boolean;
-    disabled?: boolean;
-    innerRef?: React.LegacyRef<HTMLInputElement> | undefined;
-    name?: string;
-    on?: boolean;
-    onChange?(e: React.FormEvent, value: boolean): void;
-    size?: SwitchSize;
-}
-export declare const Switch: React.FC<IProps>;
-export {};

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

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

package/dist/components/Tab.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-declare type HTMLProps = (React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-    href: string;
-}) | (React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    href?: never;
-});
-export declare type ITabProps = HTMLProps & {
-    description?: React.ReactNode;
-    isSelected?: boolean;
-};
-export declare const Tab: React.FC<ITabProps>;
-export {};

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

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

package/dist/components/TabsWrapper.d.ts

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

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

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

package/dist/components/Text.d.ts

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