@true-engineering/true-react-common-ui-kit 2.7.0 → 3.0.0-alpha.1

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

@@ -1,28 +0,0 @@
-import { ReactNode } from 'react';
-import { ICommonProps } from '../../../../types';
-import { FlexibleTableConfigType } from '../../types';
-export interface ITableRowProps<Values extends Record<string, any>> extends ICommonProps {
-    item: Values;
-    uniqueField?: keyof Values;
-    isFirstColumnSticky?: boolean;
-    isActive: boolean;
-    config?: FlexibleTableConfigType<Values>;
-    enabledColumns?: Array<keyof Values>;
-    rowAttributes?: Array<keyof Values>;
-    expandableRowComponent?: (item: Values, isOpen: boolean, close: () => void) => ReactNode;
-    onRowHover?: (id?: string) => void;
-    onRowClick?: (id: string) => void;
-    classes: {
-        root: string;
-        active: string;
-        editable: string;
-        cell: {
-            root: string;
-            sticky: string;
-            second: string;
-        };
-    };
-}
-declare function TableRowInner<Values extends Record<string, any>>({ item, uniqueField, isFirstColumnSticky, isActive, config, enabledColumns, onRowHover, onRowClick, rowAttributes, expandableRowComponent, classes, }: ITableRowProps<Values>): JSX.Element;
-export declare const TableRow: typeof TableRowInner;
-export {};

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

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

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

@@ -1,21 +0,0 @@
-import { ReactNode } from 'react';
-import type { ICommonProps } from '../../../../types';
-import type { FlexibleTableConfigType } from '../../types';
-export 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/components/TableValue/index.d.ts

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

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

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

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

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

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

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

package/dist/components/ListItem/ListItem.d.ts

@@ -1,6 +0,0 @@
-import { FC } from 'react';
-import { ICommonProps } from '../../types';
-import { IListItem } from './types';
-export interface IListItemProps extends ICommonProps, IListItem {
-}
-export declare const ListItem: FC<IListItemProps>;

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

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

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

@@ -1 +0,0 @@
-export declare const LIST_ITEM_VIEW: readonly ["default", "destructive", "custom"];

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

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

package/dist/helpers/deprecated.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-export declare const isInt: (value: number) => boolean;
-export declare const addClickHandler: (cb?: ((e: import("react").MouseEvent<Element, MouseEvent> | import("react").KeyboardEvent<Element>) => void) | undefined, hasAction?: boolean | undefined) => import("react").HTMLAttributes<unknown>;
-export declare const addDataTestId: (testId: string | undefined, postfix?: string | number | undefined) => {
-    'data-testid': string;
-} | undefined;
-export declare const createFilter: <T>(getter: (item: T) => (string | undefined)[], compareFn?: ((item: string, query: string) => boolean) | undefined) => (items: T[], query: string) => T[];
-export declare const getSelectKeyHandler: (cb: (e: import("react").KeyboardEvent<Element>) => void) => (e: import("react").KeyboardEvent<Element>) => void;
-export declare const getTestId: (testId: string | undefined, postfix?: string | number | undefined) => string | undefined;
-export declare const isStringNotEmpty: <T extends string>(value: T | null | undefined) => value is T;
-export declare const isEmpty: <T>(value: T | null | undefined) => value is null | undefined;
-export declare const isNotEmpty: <T>(val: T | null | undefined) => val is T;

package/dist/hooks/use-theme.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { ComponentName, UiKitTheme } from '../types';
-export declare const ThemeContext: import("react").Context<{
-    theme: UiKitTheme;
-}>;
-export declare const useTheme: <StyleSheet_1>(componentName: ComponentName, styles: StyleSheet_1, tweakStyles?: Partial<Record<keyof StyleSheet_1, any>> | undefined, options?: Record<string, unknown>) => {
-    classes: Record<keyof StyleSheet_1, string>;
-    componentStyles: StyleSheet_1;
-};

package/src/components/FlexibleTable/components/TableRow/index.ts

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

package/src/components/FlexibleTable/components/TableValue/index.ts

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

package/src/components/IncrementInput/components/ChangeButton/ChangeButton.tsx

@@ -1,33 +0,0 @@
-import { FC } from 'react';
-import clsx from 'clsx';
-import { Classes } from 'jss';
-import { Icon } from '../../../Icon';
-
-export interface IChangeButtonProps {
-  type: 'plus' | 'minus';
-  isButtonDisabled: boolean;
-  isInvalid?: boolean;
-  classes: Classes<'button' | 'disabledButton' | 'errorButton'>; // TODO: !!!!!
-  onClick: () => void;
-}
-
-export const ChangeButton: FC<IChangeButtonProps> = ({
-  type,
-  isButtonDisabled,
-  isInvalid,
-  onClick,
-  classes,
-}) => (
-  <button
-    className={clsx(
-      classes.button,
-      isButtonDisabled && classes.disabledButton,
-      isInvalid && classes.errorButton,
-    )}
-    disabled={isButtonDisabled}
-    onClick={onClick}
-    type="button"
-  >
-    <Icon type={type} />
-  </button>
-);

package/src/components/IncrementInput/components/ChangeButton/index.ts

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

package/src/components/IncrementInput/components/index.ts

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

package/src/components/ListItem/ListItem.stories.tsx

@@ -1,67 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { colors } from '../../theme';
-import { ListItem } from './ListItem';
-import { IListItem } from './types';
-
-const listItems: IListItem[] = [
-  {
-    item: 'Печатать билет',
-    onClick: console.log,
-    icon: 'sign-out',
-  },
-  { item: 'Выписать', onClick: console.log, withIconGap: true },
-  {
-    item: 'Аннулировать',
-    view: 'destructive',
-    onClick: console.log,
-    icon: <>2</>,
-  },
-  {
-    item: 'Вернуть',
-    onClick: console.log,
-    disabled: true,
-    withIconGap: true,
-    shouldDrawSpacerBelow: true,
-  },
-  {
-    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
-    onClick: console.log,
-    disabled: true,
-    withIconGap: true,
-  },
-  {
-    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
-    onClick: console.log,
-    withIconGap: true,
-  },
-];
-
-export default {
-  title: 'ListItem',
-  component: ListItem,
-  args: {
-    items: listItems,
-  },
-  parameters: {
-    controls: {
-      exclude: ['data', 'tweakStyles', 'testId', 'onClick'],
-    },
-  },
-} as ComponentMeta<typeof ListItem>;
-
-export const Default: ComponentStory<typeof ListItem> = (args) => (
-  <div
-    style={{
-      border: '1px dotted rgba(0,0,0,.2)',
-      display: 'flex',
-      justifyContent: 'center',
-      flexDirection: 'column',
-      padding: 40,
-      gap: 10,
-    }}
-  >
-    {listItems.map((item, idx) => (
-      <ListItem key={idx} {...item} {...args} />
-    ))}
-  </div>
-);

package/src/components/ListItem/ListItem.styles.ts

@@ -1,48 +0,0 @@
-import { colors } from '../../theme';
-import type { ComponentStyles } from '../../types';
-
-const ITEM_HORIZONTAL_PADDING = 16;
-const ICON_SIZE = 20;
-const ICON_GAP = 12;
-
-export const styles = {
-  item: {
-    display: 'flex',
-    alignItems: 'center',
-    boxSizing: 'border-box',
-    fontSize: 16,
-    whiteSpace: 'nowrap',
-    minHeight: 40,
-    padding: [0, ITEM_HORIZONTAL_PADDING],
-    transition: 'background-color 0.25s ease-in-out',
-    cursor: 'pointer',
-  },
-
-  default: {},
-  destructive: {},
-  custom: {},
-
-  disabledItem: {
-    cursor: 'default',
-  },
-
-  spacer: {
-    height: 1,
-    backgroundColor: colors.BORDER_LIGHT,
-  },
-
-  withIconGap: {
-    paddingLeft: ITEM_HORIZONTAL_PADDING + ICON_SIZE + ICON_GAP,
-  },
-
-  icon: {
-    width: ICON_SIZE,
-    height: ICON_SIZE,
-    marginRight: ICON_GAP,
-    flexShrink: 0,
-  },
-
-  content: {},
-};
-
-export type ListItemStyles = ComponentStyles<typeof styles>;

package/src/components/ListItem/ListItem.tsx

@@ -1,44 +0,0 @@
-import { FC, Fragment } from 'react';
-import clsx from 'clsx';
-import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes, renderIcon } from '../../helpers';
-import { useTheme } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { IListItem } from './types';
-import { styles } from './ListItem.styles';
-
-export interface IListItemProps extends ICommonProps, IListItem {}
-
-export const ListItem: FC<IListItemProps> = ({
-  disabled,
-  icon,
-  item,
-  shouldDrawSpacerAbove,
-  shouldDrawSpacerBelow,
-  testId,
-  tweakStyles,
-  view = 'default',
-  withIconGap,
-  onClick,
-}) => {
-  const { classes } = useTheme('ListItem', styles, tweakStyles);
-
-  return (
-    <Fragment>
-      {shouldDrawSpacerAbove && <div className={classes.spacer} />}
-      <div
-        className={clsx(classes.item, classes[view], {
-          [classes.disabledItem]: disabled,
-          [classes.withIconGap]: withIconGap,
-        })}
-        onClick={disabled ? undefined : onClick}
-        {...addDataTestId(testId)}
-        {...(disabled && addDataAttributes({ disabled }))}
-      >
-        {isReactNodeNotEmpty(icon) && <span className={classes.icon}>{renderIcon(icon)}</span>}
-        <span className={classes.content}>{item}</span>
-      </div>
-      {shouldDrawSpacerBelow && <div className={classes.spacer} />}
-    </Fragment>
-  );
-};

package/src/components/ListItem/constants.ts

@@ -1,5 +0,0 @@
-export const LIST_ITEM_VIEW = [
-  'default',
-  'destructive',
-  'custom', // специальный стиль для кастомизации на своем проекте
-] as const;

package/src/components/ListItem/index.ts

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

package/src/helpers/deprecated.ts

@@ -1,23 +0,0 @@
-import {
-  addClickHandler as addClickHandlerHelper,
-  addDataTestId as addDataTestIdHelper,
-  createFilter as createFilterHelper,
-  getSelectKeyHandler as getSelectKeyHandlerHelper,
-  getTestId as getTestIdHelper,
-  isEmpty as isEmptyHelper,
-  isNotEmpty as isNotEmptyHelper,
-  isNumberInteger,
-  isString,
-  isStringNotEmpty as isStringNotEmptyHelper,
-} from '@true-engineering/true-react-platform-helpers';
-
-export const isInt = isNumberInteger;
-export const addClickHandler = addClickHandlerHelper;
-export const addDataTestId = addDataTestIdHelper;
-export const createFilter = createFilterHelper;
-export const getSelectKeyHandler = getSelectKeyHandlerHelper;
-export const getTestId = getTestIdHelper;
-export const isStringNotEmpty = isStringNotEmptyHelper;
-export const isEmpty = isEmptyHelper;
-export const isNotEmpty = <T>(val: T | null | undefined): val is T =>
-  (isString(val) && isStringNotEmptyHelper(val)) || isNotEmptyHelper(val);

package/src/hooks/use-theme.ts

@@ -1,32 +0,0 @@
-import { createContext, useContext, useMemo } from 'react';
-import { createUseStyles, Styles } from 'react-jss';
-import merge from 'lodash-es/merge';
-import { commonTheme } from '../theme';
-import { ComponentName, UiKitTheme } from '../types';
-
-export const ThemeContext = createContext<{
-  theme: UiKitTheme;
-}>({ theme: commonTheme });
-
-export const useTheme = <StyleSheet>(
-  componentName: ComponentName,
-  styles: StyleSheet,
-  tweakStyles?: Partial<Record<keyof StyleSheet, any>>,
-  options?: Record<string, unknown>,
-): {
-  classes: Record<keyof StyleSheet, string>;
-  componentStyles: StyleSheet;
-} => {
-  const { theme } = useContext(ThemeContext);
-  const { components } = theme;
-
-  const newStyles = useMemo(
-    () => merge({}, styles, components?.[componentName] ?? {}, tweakStyles),
-    [styles, components?.[componentName], tweakStyles],
-  );
-
-  return {
-    classes: createUseStyles(newStyles as Styles)(options) as Record<keyof StyleSheet, string>,
-    componentStyles: newStyles,
-  };
-};