@true-engineering/true-react-common-ui-kit 1.0.1

package/dist/components/FlexibleTable/TableValue.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import type { ICommonProps } from '../../types';
+import type { FlexibleTableConfigType } from './types';
+interface ITableValueProps<Values extends Record<string, any>> extends ICommonProps {
+    item: Values;
+    columnName: keyof Values;
+    config?: FlexibleTableConfigType<Values>;
+    classes: {
+        root: string;
+        sticky: string;
+        second: string;
+    };
+    isFocusedRow?: boolean;
+    isSecond?: boolean;
+    isSticky?: boolean;
+    isNestedComponentExpanded: boolean;
+    isRowNestedComponentExpanded: boolean;
+    onSetNestedComponent: (component?: ReactNode) => void;
+}
+declare function TableValue<Values extends Record<string, any>>({ item, columnName, config, classes, isFocusedRow, isSecond, isSticky, isNestedComponentExpanded, isRowNestedComponentExpanded, onSetNestedComponent, }: ITableValueProps<Values>): JSX.Element;
+export default TableValue;

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

@@ -0,0 +1,3 @@
+export * from './FlexibleTable';
+export * from './types';
+export type { FlexibleTableStyles } from './FlexibleTable.styles';

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

@@ -0,0 +1,44 @@
+import { FC, ReactNode } from 'react';
+export declare type ITextAlignment = 'left' | 'center' | 'right';
+export declare type IVerticalAlignment = 'middle' | 'top' | 'bottom' | 'baseline' | 'sub' | string;
+export declare type IPosition = 'sticky' | 'absolute' | 'relative' | 'static';
+export declare type ITitleComponent<Value> = FC<{
+    value?: Value;
+}>;
+export declare type IValueComponent<Values, Value> = FC<{
+    value?: Value;
+    row: Values;
+    isFocusedRow?: boolean;
+    isNestedComponentExpanded: boolean;
+    isRowNestedComponentExpanded: boolean;
+    onSetNestedComponent: (component?: ReactNode) => void;
+}>;
+export declare type FlexibleTableConfigType<Values> = {
+    [Key in keyof Values]?: {
+        title?: ReactNode;
+        titleComponent?: ITitleComponent<any>;
+        component?: IValueComponent<Values, Values[Key]>;
+        dateFormat?: string;
+        minWidth?: string | number;
+        width?: string | number;
+        maxWidth?: string | number;
+        titleAlign?: ITextAlignment;
+        cellAlign?: ITextAlignment;
+        cellVerticalAlign?: IVerticalAlignment;
+        position?: IPosition;
+        right?: number;
+        left?: number;
+    };
+};
+export interface IInfinityScrollConfig {
+    activePage: number;
+    totalPages: number;
+    isLoading: boolean;
+    isLastPage: boolean;
+    onInfinityScroll: (skip: number) => void;
+}
+export interface INestedComponent {
+    isOpen: boolean;
+    component?: ReactNode;
+    cellKey?: string;
+}

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

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { IComplexIcon } from './complexIcons';
+interface IComplexIconBoilerplateProps {
+    type: IComplexIcon;
+}
+declare const ComplexIconBoilerplate: FC<IComplexIconBoilerplateProps>;
+export default ComplexIconBoilerplate;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ICommonProps } from '../../types';
+import { ICommonIcon } from './icons';
+import { IComplexIcon } from './complexIcons';
+import { IconStyles } from './Icon.styles';
+export declare type IIconType = ICommonIcon | IComplexIcon;
+export interface IIconProps extends ICommonProps {
+    tweakStyles?: IconStyles;
+    type: IIconType;
+}
+export declare const Icon: React.FC<IIconProps>;

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

@@ -0,0 +1,8 @@
+import { ComponentStyles } from '../../types';
+export declare const styles: {
+    root: {
+        display: string;
+        alignItems: string;
+    };
+};
+export declare type IconStyles = ComponentStyles<typeof styles>;

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

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { ICommonIcon } from './icons';
+export interface IIconBoilerplateProps {
+    type: ICommonIcon;
+}
+export declare const IconBoilerplate: FC<IIconBoilerplateProps>;

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

@@ -0,0 +1 @@
+declare module '*.svg?raw';

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

@@ -0,0 +1,4 @@
+export declare const complexIcons: {
+    avatar: string;
+};
+export declare type IComplexIcon = keyof typeof complexIcons;

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

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

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

@@ -0,0 +1,9 @@
+import { SVGAttributes } from 'react';
+export interface ISvgIcon {
+    viewBox?: string;
+    paths?: Array<SVGAttributes<never>>;
+    circles?: Array<SVGAttributes<never>>;
+    rects?: Array<SVGAttributes<never>>;
+}
+export declare const icons: Record<"direction" | "filter" | "search" | "repeat" | "link" | "sort" | "document" | "vendor-service" | "aircraft-takeoff" | "archive" | "arrow" | "arrow-right" | "baggage" | "balloon" | "bluetooth" | "bonus" | "book" | "box" | "business" | "calendar" | "cancel" | "check" | "check-big" | "check-all" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chevron-down-small" | "chevron-left-small" | "chevron-right-small" | "chevron-up-small" | "circle-check" | "close" | "close-large" | "close-window" | "copy" | "copy-outline" | "crane" | "danger" | "download" | "email" | "eye" | "eye-closed" | "female" | "food" | "information" | "insurance" | "list" | "lock" | "lock-open" | "male" | "menu" | "minus" | "burger-menu" | "pencil" | "pin" | "plane" | "plane-circle" | "plus" | "print" | "question" | "refresh" | "rocket" | "round-trip" | "vendor-logo" | "scan" | "send-email" | "settings" | "sign-out" | "size" | "sort-asc" | "sort-desc" | "sort-list-asc" | "sort-list-desc" | "star" | "status-error" | "status-info" | "status-not-ok" | "status-ok" | "status-warning" | "three-circles" | "ticket-revert" | "ticket" | "time" | "trash-can" | "upgrade" | "user" | "user-group" | "voucher", ISvgIcon>;
+export declare type ICommonIcon = keyof typeof icons;

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

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

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

@@ -0,0 +1,4 @@
+export * from './Icon';
+export type { IconStyles } from './Icon.styles';
+export type { ISvgIcon, ICommonIcon } from './icons';
+export type { IComplexIcon } from './complexIcons';

package/dist/components/IncrementInput/ChangeButton.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { Classes } from 'jss';
+interface IChangeButtonProps {
+    type: 'plus' | 'minus';
+    isButtonDisabled: boolean;
+    isInvalid?: boolean;
+    classes: Classes<'button' | 'disabledButton' | 'errorButton'>;
+    onClick: () => void;
+}
+export declare const ChangeButton: FC<IChangeButtonProps>;
+export {};

package/dist/components/IncrementInput/IncrementInput.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { INumberInputProps } from '../NumberInput';
+import { IncrementInputStyles } from './IncrementInput.styles';
+export interface IIncrementInputProps extends Omit<INumberInputProps, 'canBeFloat' | 'precision'> {
+    tweakStyles?: IncrementInputStyles;
+    step?: number;
+}
+export declare const IncrementInput: FC<IIncrementInputProps>;

package/dist/components/IncrementInput/IncrementInput.styles.d.ts

@@ -0,0 +1,63 @@
+import { ComponentStyles } from '../../types';
+export declare const BUTTONS_WIDTH = 36;
+export declare const BUTTONS_GAP = 2;
+export declare const styles: {
+    root: {
+        display: string;
+        alignItems: string;
+        position: string;
+    };
+    buttons: {
+        display: string;
+        flexDirection: string;
+        width: number;
+        position: string;
+        right: number;
+        top: number;
+        bottom: number;
+        zIndex: number;
+    };
+    button: {
+        width: string;
+        height: number;
+        border: string;
+        outline: string;
+        backgroundColor: "#f6f8fc";
+        transition: string;
+        color: "#505f79";
+        cursor: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        padding: number[];
+        '&:hover, &:focus': {
+            backgroundColor: "#dde3ed";
+        };
+        '&:active': {
+            backgroundColor: "#95a0b3";
+        };
+        '&:first-child': {
+            marginBottom: number;
+        };
+    };
+    disabledButton: {
+        backgroundColor: "#ffffff";
+        color: "#95a0b3";
+        cursor: string;
+        '&:hover': {
+            backgroundColor: "#ffffff";
+        };
+    };
+    errorButton: {};
+    tweakInput: {
+        input: {
+            '&:not($withControls)': {
+                paddingRight: number;
+            };
+        };
+        controls: {
+            paddingRight: number;
+        };
+    };
+};
+export declare type IncrementInputStyles = ComponentStyles<typeof styles>;

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

@@ -0,0 +1,2 @@
+export * from './IncrementInput';
+export type { IncrementInputStyles } from './IncrementInput.styles';

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

@@ -0,0 +1,45 @@
+import { FormEvent, FocusEvent, KeyboardEvent, ClipboardEvent } from 'react';
+import { Props as ReactInputMaskProps } from 'react-input-mask';
+import { IIconProps } from '../Icon';
+import { ICommonProps } from '../../types';
+import { InputStyles } from './Input.styles';
+export declare const DEFAULT_SIZE = 6;
+export interface IInputProps extends ICommonProps {
+    tweakStyles?: InputStyles;
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    type?: 'text' | 'password' | 'email' | 'number';
+    isDisabled?: boolean;
+    hasFloatingLabel?: boolean;
+    isReadonly?: boolean;
+    isInvalid?: boolean;
+    isActive?: boolean;
+    isClearable?: boolean;
+    infoMessage?: string;
+    errorMessage?: string;
+    errorPosition?: 'top' | 'bottom';
+    inlineStyle?: 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left' | 'right' | 'middle';
+    border?: 'top' | 'bottom' | 'left' | 'right';
+    isRequired?: boolean;
+    isLoading?: boolean;
+    isAutoSizeable?: boolean;
+    defaultSize?: number;
+    iconType?: IIconProps['type'];
+    units?: string;
+    name?: string;
+    mask?: ReactInputMaskProps['mask'];
+    maskPlaceholder?: ReactInputMaskProps['maskPlaceholder'];
+    hasRequiredLabel?: boolean;
+    shouldFocusOnMount?: boolean;
+    maxLength?: number;
+    testId?: string;
+    tabIndex?: number;
+    onChange(value: string, event: FormEvent<HTMLInputElement>): void;
+    onFocus?(event: FocusEvent<HTMLInputElement>): void;
+    onBlur?(event: FocusEvent<HTMLInputElement>): void;
+    onPaste?(event: ClipboardEvent<HTMLInputElement>): void;
+    onIconClick?(): void;
+    onKeyDown?(event: KeyboardEvent<HTMLInputElement>): void;
+}
+export declare const Input: import("react").ForwardRefExoticComponent<IInputProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,247 @@
+import { ComponentStyles } from '../../types';
+export declare const AUTOSIZE_MAX_WIDTH = 480;
+export declare const styles: {
+    root: {
+        width: string;
+        boxSizing: string;
+        position: string;
+    };
+    inputWrapper: {
+        display: string;
+        width: string;
+        height: 48;
+        boxSizing: string;
+        transition: string;
+        transitionProperty: string;
+        backgroundColor: string;
+        position: string;
+    };
+    inputContent: {
+        fontSize: number;
+        fontFamily: string;
+        padding: number[];
+    };
+    input: {
+        extend: string;
+        width: string;
+        height: string;
+        outline: string;
+        boxSizing: string;
+        outlineStyle: string;
+        transition: string;
+        transitionProperty: string;
+        border: string;
+        background: string;
+        '&::placeholder': {
+            opacity: number;
+        };
+        MozAppearance: string;
+        '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
+            WebkitAppearance: string;
+            margin: number;
+        };
+    };
+    autosize: {
+        display: string;
+        verticalAlign: string;
+        alignItems: string;
+        justifyContent: string;
+        '&::after, input': {
+            width: string;
+            minWidth: string;
+            gridArea: string;
+            font: string;
+            justifySelf: string;
+        };
+        '&::after': {
+            maxWidth: number;
+            content: string;
+            visibility: string;
+            whiteSpace: string;
+        };
+    };
+    focused: {
+        position: string;
+        zIndex: number;
+    };
+    unitsWrapper: {
+        extend: string;
+        position: string;
+        left: number;
+        height: string;
+        boxSizing: string;
+        display: string;
+        alignItems: string;
+        pointerEvents: string;
+    };
+    fakeValue: {
+        visibility: string;
+    };
+    units: {
+        paddingLeft: number;
+    };
+    withFloatingLabel: {
+        paddingTop: number;
+    };
+    floatingLabelWithoutPadding: {
+        paddingTop: number;
+        paddingLeft: number;
+    };
+    floating: {};
+    activeLabel: {
+        display: string;
+        '&$floating': {
+            display: string;
+            transform: string;
+        };
+    };
+    required: {
+        '&:before': {
+            content: string;
+            position: string;
+            left: number;
+            top: string;
+            transform: string;
+            width: number;
+            height: number;
+            borderRadius: string;
+        };
+    };
+    label: {
+        position: string;
+        pointerEvents: string;
+        left: number;
+        top: string;
+        transformOrigin: string;
+        transform: string;
+        transition: string;
+        transitionProperty: string;
+        fontSize: number;
+    };
+    floatingWithoutPadding: {
+        left: number;
+    };
+    requiredLabel: {
+        '&:after': {
+            content: string;
+            position: string;
+            right: number;
+            top: number;
+            transform: string;
+            width: number;
+            height: number;
+            borderRadius: string;
+        };
+    };
+    activeIcon: {
+        cursor: string;
+    };
+    'border-top': {
+        borderRadius: number;
+        borderWidth: number[];
+    };
+    'border-bottom': {
+        borderRadius: number;
+        borderWidth: number[];
+    };
+    'border-left': {
+        borderRadius: number;
+        borderWidth: number[];
+    };
+    'border-right': {
+        borderRadius: number;
+        borderWidth: number[];
+    };
+    top: {
+        borderBottomLeftRadius: number;
+        borderBottomRightRadius: number;
+    };
+    bottom: {
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+    };
+    'top-left': {
+        borderTopRightRadius: number;
+        borderBottomLeftRadius: number;
+        borderBottomRightRadius: number;
+    };
+    'top-right': {
+        borderTopLeftRadius: number;
+        borderBottomLeftRadius: number;
+        borderBottomRightRadius: number;
+    };
+    'bottom-left': {
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+        borderBottomRightRadius: number;
+    };
+    'bottom-right': {
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+        borderBottomLeftRadius: number;
+    };
+    left: {
+        borderTopRightRadius: number;
+        borderBottomRightRadius: number;
+    };
+    right: {
+        borderTopLeftRadius: number;
+        borderBottomLeftRadius: number;
+    };
+    middle: {
+        borderRadius: number;
+    };
+    controls: {
+        display: string;
+        gridArea: string;
+    };
+    icon: {
+        display: string;
+        alignItems: string;
+        padding: number[];
+        width: number;
+        transition: string;
+        boxSizing: string;
+        '&:last-child': {
+            paddingRight: number;
+        };
+        '& + $units': {
+            marginLeft: number;
+        };
+    };
+    clearIcon: {
+        extend: string;
+    };
+    inputIcon: {
+        extend: string;
+    };
+    withIcons: {
+        paddingRight: number;
+    };
+    withControls: {};
+    invalid: {};
+    disabled: {};
+    invalidLabel: {};
+    error: {
+        fontSize: number;
+    };
+    info: {
+        fontSize: number;
+        paddingTop: number;
+        paddingLeft: number;
+    };
+    'error-top': {
+        position: string;
+        top: number;
+        left: number;
+        padding: number[];
+        zIndex: number;
+    };
+    'error-bottom': {
+        paddingTop: number;
+        paddingLeft: number;
+    };
+    loading: {};
+    tweakPreloader: {};
+};
+export declare type InputStyles = ComponentStyles<typeof styles>;

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

@@ -0,0 +1,2 @@
+export * from './Input';
+export type { InputStyles } from './Input.styles';

package/dist/components/List/List.d.ts

@@ -0,0 +1,21 @@
+import { FC, ReactElement, ReactNode } from 'react';
+import { ICommonProps } from '../../types';
+import { IIconType } from '../Icon';
+import { ListStyles } from './List.styles';
+export interface IListItem {
+    item: ReactNode;
+    icon?: IIconType | ReactElement;
+    disabled?: boolean;
+    shouldDrawSpacerAbove?: boolean;
+    shouldDrawSpacerBelow?: boolean;
+    withIconGap?: boolean;
+    testId?: string;
+    onClick(): void;
+}
+export interface IListProps extends ICommonProps {
+    tweakStyles?: ListStyles;
+    items: IListItem[];
+    testId?: string;
+    onClick?(): void;
+}
+export declare const List: FC<IListProps>;

package/dist/components/List/List.styles.d.ts

@@ -0,0 +1,39 @@
+import { ComponentStyles } from '../../types';
+export declare const styles: {
+    root: {
+        minWidth: number;
+        backgroundColor: "#ffffff";
+        padding: number[];
+        listStyle: string;
+        margin: number;
+    };
+    item: {
+        display: string;
+        alignItems: string;
+        boxSizing: string;
+        fontSize: number;
+        whiteSpace: string;
+        minHeight: number;
+        padding: number[];
+        transition: string;
+        cursor: string;
+    };
+    disabledItem: {
+        cursor: string;
+    };
+    spacer: {
+        height: number;
+        backgroundColor: "#dde3ed";
+    };
+    withIconGap: {
+        paddingLeft: number;
+    };
+    icon: {
+        width: number;
+        height: number;
+        marginRight: number;
+        flexShrink: number;
+    };
+    content: {};
+};
+export declare type ListStyles = ComponentStyles<typeof styles>;

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

@@ -0,0 +1,2 @@
+export * from './List';
+export type { ListStyles } from './List.styles';

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

@@ -0,0 +1,26 @@
+import { FC, ReactNode } from 'react';
+import { ICommonProps } from '../../types';
+import { ModalStyles } from './Modal.styles';
+export declare type IModalPosition = 'center' | 'left' | 'right' | 'static';
+export interface IModalProps extends ICommonProps {
+    tweakStyles?: ModalStyles;
+    title?: string;
+    size?: 'l' | 'm' | 's';
+    isFooterSticky?: boolean;
+    buttons?: ReactNode[];
+    buttonsAlign?: 'left' | 'center' | 'right';
+    children?: ReactNode | ReactNode[];
+    position?: IModalPosition;
+    hasCloseButton?: boolean;
+    hasOverlay?: boolean;
+    shouldCloseOnOverlayClick?: boolean;
+    shouldCloseOnEsc?: boolean;
+    shouldBlockScroll?: boolean;
+    isOpen?: boolean;
+    zIndex?: number;
+    testId?: string;
+    onEnter?(): void;
+    onClose?(): void;
+    onCompletelyHidden?(): void;
+}
+export declare const Modal: FC<IModalProps>;