@true-engineering/true-react-common-ui-kit 3.19.0 → 3.20.1

package/src/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.tsx

@@ -1,85 +1,85 @@
-import clsx from 'clsx';
-import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
-import { ICommonProps } from '../../../../types';
-import { Skeleton } from '../../../Skeleton';
-import { formatCellContent } from '../../helpers';
-import {
-  ITableRow,
-  IValueComponent,
-  IFlexibleTableConfigType,
-  IFlexibleTableRenderMode,
-} from '../../types';
-import { useStyles, IFlexibleTableCellStyles } from './FlexibleTableCell.styles';
-
-export interface IFlexibleTableCellProps<Row extends ITableRow>
-  extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'>,
-    Pick<
-      Parameters<IValueComponent<Row, unknown>>[0],
-      | 'isFocusedRow'
-      | 'isNestedComponentExpanded'
-      | 'isRowNestedComponentExpanded'
-      | 'onSetNestedComponent'
-    > {
-  row: Row;
-  columnName: keyof Row;
-  config: IFlexibleTableConfigType<Row>;
-  renderMode: IFlexibleTableRenderMode;
-  isSecond?: boolean;
-  isSticky?: boolean;
-  isLoading?: boolean;
-}
-
-export function FlexibleTableCell<Row extends ITableRow>({
-  row,
-  columnName,
-  config,
-  renderMode,
-  isSecond,
-  isSticky,
-  isLoading,
-  tweakStyles,
-  ...valueComponentProps
-}: IFlexibleTableCellProps<Row>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const { component, left, right, position, cellAlign, cellVerticalAlign, shouldRenderDataId } =
-    config[columnName] ?? {};
-
-  const value = row[columnName];
-
-  const TableCell = renderMode === 'divs' ? 'div' : 'td';
-
-  return (
-    <TableCell
-      className={clsx(classes.root, {
-        [classes.sticky]: isSticky,
-        [classes.second]: isSecond,
-        [classes.loading]: isLoading,
-      })}
-      style={{
-        textAlign: cellAlign,
-        position: isSticky ? 'sticky' : position,
-        right,
-        left: isSticky ? 0 : left,
-        verticalAlign: cellVerticalAlign,
-      }}
-      {...addDataAttributes({ id: shouldRenderDataId ? columnName : undefined })}
-    >
-      {isLoading ? (
-        <div className={classes.skeleton}>
-          <Skeleton />
-        </div>
-      ) : (
-        isNotEmpty(value) && (
-          <>
-            {/* TODO: Рендерить как настоящий компонент */}
-            {isNotEmpty(component)
-              ? component({ ...valueComponentProps, value, row })
-              : formatCellContent(value, config[columnName])}
-          </>
-        )
-      )}
-    </TableCell>
-  );
-}
+import clsx from 'clsx';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../../../helpers';
+import { ICommonProps } from '../../../../types';
+import { Skeleton } from '../../../Skeleton';
+import { formatCellContent } from '../../helpers';
+import {
+  ITableRow,
+  IValueComponent,
+  IFlexibleTableConfigType,
+  IFlexibleTableRenderMode,
+} from '../../types';
+import { useStyles, IFlexibleTableCellStyles } from './FlexibleTableCell.styles';
+
+export interface IFlexibleTableCellProps<Row extends ITableRow>
+  extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'>,
+    Pick<
+      Parameters<IValueComponent<Row, unknown>>[0],
+      | 'isFocusedRow'
+      | 'isNestedComponentExpanded'
+      | 'isRowNestedComponentExpanded'
+      | 'onSetNestedComponent'
+    > {
+  row: Row;
+  columnName: keyof Row;
+  config: IFlexibleTableConfigType<Row>;
+  renderMode: IFlexibleTableRenderMode;
+  isSecond?: boolean;
+  isSticky?: boolean;
+  isLoading?: boolean;
+}
+
+export function FlexibleTableCell<Row extends ITableRow>({
+  row,
+  columnName,
+  config,
+  renderMode,
+  isSecond,
+  isSticky,
+  isLoading,
+  tweakStyles,
+  ...valueComponentProps
+}: IFlexibleTableCellProps<Row>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const { component, left, right, position, cellAlign, cellVerticalAlign, shouldRenderDataId } =
+    config[columnName] ?? {};
+
+  const value = row[columnName];
+
+  const TableCell = renderMode === 'divs' ? 'div' : 'td';
+
+  return (
+    <TableCell
+      className={clsx(classes.root, {
+        [classes.sticky]: isSticky,
+        [classes.second]: isSecond,
+        [classes.loading]: isLoading,
+      })}
+      style={{
+        textAlign: cellAlign,
+        position: isSticky ? 'sticky' : position,
+        right,
+        left: isSticky ? 0 : left,
+        verticalAlign: cellVerticalAlign,
+      }}
+      {...addDataAttributes({ id: shouldRenderDataId ? columnName : undefined })}
+    >
+      {isLoading ? (
+        <div className={classes.skeleton}>
+          <Skeleton />
+        </div>
+      ) : (
+        isNotEmpty(value) && (
+          <>
+            {/* TODO: Рендерить как настоящий компонент */}
+            {isNotEmpty(component)
+              ? component({ ...valueComponentProps, value, row })
+              : formatCellContent(value, config[columnName])}
+          </>
+        )
+      )}
+    </TableCell>
+  );
+}

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

@@ -1,2 +1,2 @@
-export * from './FlexibleTableCell';
-export type { IFlexibleTableCellStyles } from './FlexibleTableCell.styles';
+export * from './FlexibleTableCell';
+export type { IFlexibleTableCellStyles } from './FlexibleTableCell.styles';

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

@@ -1,2 +1,2 @@
-export * from './FlexibleTableRow';
-export type { IFlexibleTableRowStyles } from './FlexibleTableRow.styles';
+export * from './FlexibleTableRow';
+export type { IFlexibleTableRowStyles } from './FlexibleTableRow.styles';

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

@@ -1,2 +1,2 @@
-export * from './FlexibleTableRow';
-export * from './FlexibleTableCell';
+export * from './FlexibleTableRow';
+export * from './FlexibleTableCell';

package/src/components/FlexibleTable/constants.ts

@@ -1 +1 @@
-export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
+export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';

package/src/components/FlexibleTable/index.ts

@@ -1,4 +1,4 @@
-export * from './FlexibleTable';
-export * from './types';
-export type { IFlexibleTableStyles } from './FlexibleTable.styles';
-export type { IFlexibleTableCellStyles, IFlexibleTableRowStyles } from './components';
+export * from './FlexibleTable';
+export * from './types';
+export type { IFlexibleTableStyles } from './FlexibleTable.styles';
+export type { IFlexibleTableCellStyles, IFlexibleTableRowStyles } from './components';

package/src/components/FlexibleTable/types.ts

@@ -1,53 +1,53 @@
-import { CSSProperties, FC, ReactNode } from 'react';
-
-export type IFlexibleTableRenderMode = 'table' | 'divs';
-
-// TODO: Заменить Record<string, any> на Record<string, unknown>
-export type ITableRow = Record<string, any>;
-
-export type ITitleComponent<Value> = FC<{
-  value?: Value;
-}>;
-
-export type IValueComponent<Values, Value> = (props: {
-  value: Value;
-  row: Values;
-  isFocusedRow?: boolean;
-  isNestedComponentExpanded: boolean;
-  isRowNestedComponentExpanded: boolean;
-  onSetNestedComponent: (component?: ReactNode) => void;
-}) => JSX.Element | ReactNode;
-
-export type IFlexibleTableConfigType<Values> = {
-  [Key in keyof Values]?: {
-    title?: ReactNode;
-    titleComponent?: ITitleComponent<unknown>;
-    component?: IValueComponent<Values, NonNullable<Values[Key]>>;
-    dateFormat?: string;
-    minWidth?: string | number;
-    width?: string | number;
-    maxWidth?: string | number;
-    /** @default 'left' */
-    titleAlign?: CSSProperties['textAlign'];
-    cellAlign?: CSSProperties['textAlign'];
-    cellVerticalAlign?: CSSProperties['verticalAlign'];
-    position?: CSSProperties['position'];
-    right?: number;
-    left?: number;
-    shouldRenderDataId?: boolean;
-  };
-};
-
-export interface IInfinityScrollConfig {
-  activePage: number;
-  totalPages: number;
-  isLoading: boolean;
-  isLastPage: boolean;
-  onInfinityScroll: (skip: number) => void;
-}
-
-export interface INestedComponent {
-  isOpen: boolean;
-  component?: ReactNode;
-  cellKey?: string;
-}
+import { CSSProperties, FC, ReactNode } from 'react';
+
+export type IFlexibleTableRenderMode = 'table' | 'divs';
+
+// TODO: Заменить Record<string, any> на Record<string, unknown>
+export type ITableRow = Record<string, any>;
+
+export type ITitleComponent<Value> = FC<{
+  value?: Value;
+}>;
+
+export type IValueComponent<Values, Value> = (props: {
+  value: Value;
+  row: Values;
+  isFocusedRow?: boolean;
+  isNestedComponentExpanded: boolean;
+  isRowNestedComponentExpanded: boolean;
+  onSetNestedComponent: (component?: ReactNode) => void;
+}) => JSX.Element | ReactNode;
+
+export type IFlexibleTableConfigType<Values> = {
+  [Key in keyof Values]?: {
+    title?: ReactNode;
+    titleComponent?: ITitleComponent<unknown>;
+    component?: IValueComponent<Values, NonNullable<Values[Key]>>;
+    dateFormat?: string;
+    minWidth?: string | number;
+    width?: string | number;
+    maxWidth?: string | number;
+    /** @default 'left' */
+    titleAlign?: CSSProperties['textAlign'];
+    cellAlign?: CSSProperties['textAlign'];
+    cellVerticalAlign?: CSSProperties['verticalAlign'];
+    position?: CSSProperties['position'];
+    right?: number;
+    left?: number;
+    shouldRenderDataId?: boolean;
+  };
+};
+
+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/src/components/Icon/Icon.styles.ts

@@ -1,10 +1,10 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('Icon', {
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-});
-
-export type IIconStyles = ITweakStyles<typeof useStyles>;
+import { ITweakStyles, createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Icon', {
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+export type IIconStyles = ITweakStyles<typeof useStyles>;

package/src/components/Icon/Icon.tsx

@@ -1,26 +1,26 @@
-import { FC } from 'react';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { ComplexIconBoilerplate, IconBoilerplate } from './components';
-import { isComplexIcon } from './helpers';
-import { IIconType } from './types';
-import { useStyles, IIconStyles } from './Icon.styles';
-
-export interface IIconProps extends ICommonProps<IIconStyles> {
-  type: IIconType;
-}
-
-export const Icon: FC<IIconProps> = ({ type, data, testId, tweakStyles }) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      {isComplexIcon(type) ? (
-        <ComplexIconBoilerplate type={type} />
-      ) : (
-        <IconBoilerplate type={type} />
-      )}
-    </div>
-  );
-};
+import { FC } from 'react';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { ComplexIconBoilerplate, IconBoilerplate } from './components';
+import { isComplexIcon } from './helpers';
+import { IIconType } from './types';
+import { useStyles, IIconStyles } from './Icon.styles';
+
+export interface IIconProps extends ICommonProps<IIconStyles> {
+  type: IIconType;
+}
+
+export const Icon: FC<IIconProps> = ({ type, data, testId, tweakStyles }) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  return (
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+      {isComplexIcon(type) ? (
+        <ComplexIconBoilerplate type={type} />
+      ) : (
+        <IconBoilerplate type={type} />
+      )}
+    </div>
+  );
+};

package/src/components/Icon/complexIcons/icons.ts

@@ -1,5 +1,5 @@
-import avatarGreen from './avatarGreen.svg?raw';
-
-export const complexIcons = {
-  avatar: avatarGreen,
-};
+import avatarGreen from './avatarGreen.svg?raw';
+
+export const complexIcons = {
+  avatar: avatarGreen,
+};

package/src/components/Icon/components/ComplexIconBoilerplate/ComplexIconBoilerplate.tsx

@@ -1,16 +1,16 @@
-import { FC, useContext, useMemo } from 'react';
-import { ThemeContext } from '../../../../theme';
-import { complexIcons } from '../../complexIcons';
-import { IComplexIcon } from '../../types';
-
-export interface IComplexIconBoilerplateProps {
-  type: IComplexIcon;
-}
-
-export const ComplexIconBoilerplate: FC<IComplexIconBoilerplateProps> = ({ type }) => {
-  const { theme } = useContext(ThemeContext);
-  const icons = useMemo(() => ({ ...complexIcons, ...theme.complexIcons }), []);
-  const ComplexIcon = icons[type];
-
-  return <div dangerouslySetInnerHTML={{ __html: ComplexIcon }} />;
-};
+import { FC, useContext, useMemo } from 'react';
+import { ThemeContext } from '../../../../theme';
+import { complexIcons } from '../../complexIcons';
+import { IComplexIcon } from '../../types';
+
+export interface IComplexIconBoilerplateProps {
+  type: IComplexIcon;
+}
+
+export const ComplexIconBoilerplate: FC<IComplexIconBoilerplateProps> = ({ type }) => {
+  const { theme } = useContext(ThemeContext);
+  const icons = useMemo(() => ({ ...complexIcons, ...theme.complexIcons }), []);
+  const ComplexIcon = icons[type];
+
+  return <div dangerouslySetInnerHTML={{ __html: ComplexIcon }} />;
+};

package/src/components/Icon/components/ComplexIconBoilerplate/index.ts

@@ -1 +1 @@
-export * from './ComplexIconBoilerplate';
+export * from './ComplexIconBoilerplate';

package/src/components/Icon/components/IconBolerplate/IconBoilerplate.tsx

@@ -1,43 +1,43 @@
-import { FC, useContext, useMemo } from 'react';
-import { ThemeContext } from '../../../../theme';
-import { iconsList as commonIcons } from '../../icons-list';
-import { ICommonIcon } from '../../types';
-
-export interface IIconBoilerplateProps {
-  type: ICommonIcon;
-}
-
-export const IconBoilerplate: FC<IIconBoilerplateProps> = ({ type }) => {
-  const { theme } = useContext(ThemeContext);
-  const icons = useMemo(() => ({ ...commonIcons, ...theme.icons }), []);
-  const icon = icons[type];
-
-  return (
-    <svg
-      width="100%"
-      height="100%"
-      viewBox={icon.viewBox ?? '0 0 20 20'}
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      {icon.paths?.map((path, index) => (
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          fill={path.fill ?? 'currentColor'}
-          stroke={path.stroke ?? 'none'}
-          key={index}
-          {...path}
-        />
-      ))}
-
-      {icon.rects?.map((rect, index) => (
-        <rect {...rect} key={index} />
-      ))}
-
-      {icon.circles?.map((circle, index) => (
-        <circle {...circle} key={index} />
-      ))}
-    </svg>
-  );
-};
+import { FC, useContext, useMemo } from 'react';
+import { ThemeContext } from '../../../../theme';
+import { iconsList as commonIcons } from '../../icons-list';
+import { ICommonIcon } from '../../types';
+
+export interface IIconBoilerplateProps {
+  type: ICommonIcon;
+}
+
+export const IconBoilerplate: FC<IIconBoilerplateProps> = ({ type }) => {
+  const { theme } = useContext(ThemeContext);
+  const icons = useMemo(() => ({ ...commonIcons, ...theme.icons }), []);
+  const icon = icons[type];
+
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox={icon.viewBox ?? '0 0 20 20'}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {icon.paths?.map((path, index) => (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          fill={path.fill ?? 'currentColor'}
+          stroke={path.stroke ?? 'none'}
+          key={index}
+          {...path}
+        />
+      ))}
+
+      {icon.rects?.map((rect, index) => (
+        <rect {...rect} key={index} />
+      ))}
+
+      {icon.circles?.map((circle, index) => (
+        <circle {...circle} key={index} />
+      ))}
+    </svg>
+  );
+};

package/src/components/Icon/components/IconBolerplate/index.ts

@@ -1 +1 @@
-export * from './IconBoilerplate';
+export * from './IconBoilerplate';

package/src/components/Icon/components/index.ts

@@ -1,2 +1,2 @@
-export * from './ComplexIconBoilerplate';
-export * from './IconBolerplate';
+export * from './ComplexIconBoilerplate';
+export * from './IconBolerplate';

package/src/components/Icon/helpers.tsx

@@ -1,9 +1,9 @@
-import { complexIcons } from './complexIcons';
-import type { IComplexIcon, IIconType, ISvgIcon } from './types';
-
-export const isComplexIcon = (type: IIconType): type is IComplexIcon => type in complexIcons;
-
-/**
- * Эта функция позволяет корректно определить ключи в типе
- */
-export const checkIcons = <P extends string>(ico: Record<P, ISvgIcon>): Record<P, ISvgIcon> => ico;
+import { complexIcons } from './complexIcons';
+import type { IComplexIcon, IIconType, ISvgIcon } from './types';
+
+export const isComplexIcon = (type: IIconType): type is IComplexIcon => type in complexIcons;
+
+/**
+ * Эта функция позволяет корректно определить ключи в типе
+ */
+export const checkIcons = <P extends string>(ico: Record<P, ISvgIcon>): Record<P, ISvgIcon> => ico;