@true-engineering/true-react-common-ui-kit 3.41.0 → 3.43.0

package/src/components/FileItem/FileItem.stories.tsx

@@ -1,63 +1,63 @@
-import { format } from 'date-fns';
-import { ru } from 'date-fns/locale';
-import { ComponentStory } from '@storybook/react';
-import { FILE_ITEM_SIZES } from '../FileItem/constants';
-import { IIconType, iconsList } from '../Icon';
-import { complexIcons } from '../Icon/complexIcons';
-import { FileItem, IFileItemProps } from './FileItem';
-
-export default {
-  title: 'Data Display/FileItem',
-  component: FileItem,
-};
-
-const iconTypes = [
-  undefined,
-  ...Object.keys(iconsList),
-  ...Object.keys(complexIcons),
-] as IIconType[];
-
-const preloaderTypes: Array<IFileItemProps['preloaderType']> = ['dots', 'default', 'logo'];
-
-const onRemove = async () => console.log('remove file');
-
-const onClick = (): Promise<void> => new Promise(() => console.log('download file'));
-
-export const Default: ComponentStory<typeof FileItem> = (args) => <FileItem {...args} />;
-
-Default.args = {
-  // actions: <IconButton icon="download" />,
-  icon: undefined,
-  error: 'Страшная ошибка',
-  itemSize: 'm',
-  preloaderType: 'default',
-  removeIcon: 'trash-can',
-  isDisabled: false,
-  areActionsDisabled: false,
-  isLoading: false,
-  shouldShowSize: true,
-  onClick,
-  onRemove,
-  fileInfo: {
-    name: 'Document_Filename.docx',
-    type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-    size: 1000000,
-  },
-  metadata: (
-    <span>Обновлен {format(new Date(1712298796990), 'dd MMM, HH:mm', { locale: ru })}</span>
-  ),
-  info: 'Нет, Вы это видели вообще?',
-};
-
-Default.argTypes = {
-  icon: { options: iconTypes, control: 'select' },
-  removeIcon: { options: iconTypes, control: 'select' },
-  itemSize: { options: FILE_ITEM_SIZES, control: 'inline-radio' },
-  preloaderType: { options: preloaderTypes, control: 'inline-radio' },
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['data', 'testId', 'tweakStyles', 'onRemove', 'onClick'],
-  },
-};
+import { format } from 'date-fns';
+import { ru } from 'date-fns/locale';
+import { ComponentStory } from '@storybook/react';
+import { FILE_ITEM_SIZES } from '../FileItem/constants';
+import { IIconType, iconsList } from '../Icon';
+import { complexIcons } from '../Icon/complexIcons';
+import { FileItem, IFileItemProps } from './FileItem';
+
+export default {
+  title: 'Data Display/FileItem',
+  component: FileItem,
+};
+
+const iconTypes = [
+  undefined,
+  ...Object.keys(iconsList),
+  ...Object.keys(complexIcons),
+] as IIconType[];
+
+const preloaderTypes: Array<IFileItemProps['preloaderType']> = ['dots', 'default', 'logo'];
+
+const onRemove = async () => console.log('remove file');
+
+const onClick = (): Promise<void> => new Promise(() => console.log('download file'));
+
+export const Default: ComponentStory<typeof FileItem> = (args) => <FileItem {...args} />;
+
+Default.args = {
+  // actions: <IconButton icon="download" />,
+  icon: undefined,
+  error: 'Страшная ошибка',
+  itemSize: 'm',
+  preloaderType: 'default',
+  removeIcon: 'trash-can',
+  isDisabled: false,
+  areActionsDisabled: false,
+  isLoading: false,
+  shouldShowSize: true,
+  onClick,
+  onRemove,
+  fileInfo: {
+    name: 'Document_Filename.docx',
+    type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    size: 1000000,
+  },
+  metadata: (
+    <span>Обновлен {format(new Date(1712298796990), 'dd MMM, HH:mm', { locale: ru })}</span>
+  ),
+  info: 'Нет, Вы это видели вообще?',
+};
+
+Default.argTypes = {
+  icon: { options: iconTypes, control: 'select' },
+  removeIcon: { options: iconTypes, control: 'select' },
+  itemSize: { options: FILE_ITEM_SIZES, control: 'inline-radio' },
+  preloaderType: { options: preloaderTypes, control: 'inline-radio' },
+};
+
+Default.parameters = {
+  controls: {
+    exclude: ['data', 'testId', 'tweakStyles', 'onRemove', 'onClick'],
+  },
+};

package/src/components/FileItem/FileItem.styles.ts

@@ -1,122 +1,122 @@
-import { ITweakStyles, animations, createThemedStyles } from '../../theme';
-import { IIconButtonStyles } from '../IconButton';
-import { IThemedPreloaderStyles } from '../ThemedPreloader';
-import { ITooltipStyles } from '../Tooltip';
-
-export const useStyles = createThemedStyles('FileItem', {
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 4,
-  },
-
-  fileItemWrapper: {
-    display: 'flex',
-    gap: 12,
-    width: '100%',
-    cursor: 'pointer',
-    boxSizing: 'border-box',
-    transition: animations.defaultTransition,
-    transitionProperty: 'background-color, color, box-shadow, border-color',
-  },
-
-  m: {
-    '&$fileItemWrapper': {
-      padding: [10, 10, 10, 12],
-    },
-
-    '--icon-size': '20px',
-  },
-
-  l: {
-    '&$fileItemWrapper': {
-      padding: [12, 16],
-    },
-
-    '--icon-size': '32px',
-  },
-
-  fileIcon: {
-    maxWidth: 'var(--icon-size)',
-    maxHeight: 'var(--icon-size)',
-  },
-
-  fileName: {
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    fontSize: 16,
-  },
-
-  fileNameContainer: {
-    overflow: 'hidden',
-    marginRight: 'auto',
-  },
-
-  preloader: {
-    display: 'flex',
-    margin: 6,
-  },
-
-  'preloader-dots': {
-    width: 26,
-    marginTop: 12,
-  },
-
-  'preloader-default': {
-    width: 20,
-    height: 20,
-  },
-
-  'preloader-logo': {
-    width: 20,
-    height: 20,
-  },
-
-  metadata: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 2,
-    fontSize: 12,
-  },
-
-  actions: {
-    display: 'flex',
-    flexShrink: 0,
-    margin: -6,
-  },
-
-  fileSize: {},
-
-  footer: {},
-
-  error: {
-    fontSize: 12,
-  },
-
-  info: {
-    fontSize: 12,
-  },
-
-  disabled: {
-    cursor: 'not-allowed',
-  },
-});
-
-export const themedPreloaderStyles: IThemedPreloaderStyles = {
-  tweakDotsPreloader: {
-    root: {
-      gap: 4,
-      '--dot-size': '6px',
-    },
-  },
-};
-
-export type IFileItemStyles = ITweakStyles<
-  typeof useStyles,
-  {
-    tweakRemoveIconButton: IIconButtonStyles;
-    tweakPreloader: IThemedPreloaderStyles;
-    tweakTooltip: ITooltipStyles;
-  }
->;
+import { ITweakStyles, animations, createThemedStyles } from '../../theme';
+import { IIconButtonStyles } from '../IconButton';
+import { IThemedPreloaderStyles } from '../ThemedPreloader';
+import { ITooltipStyles } from '../Tooltip';
+
+export const useStyles = createThemedStyles('FileItem', {
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+  },
+
+  fileItemWrapper: {
+    display: 'flex',
+    gap: 12,
+    width: '100%',
+    cursor: 'pointer',
+    boxSizing: 'border-box',
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color, color, box-shadow, border-color',
+  },
+
+  m: {
+    '&$fileItemWrapper': {
+      padding: [10, 10, 10, 12],
+    },
+
+    '--icon-size': '20px',
+  },
+
+  l: {
+    '&$fileItemWrapper': {
+      padding: [12, 16],
+    },
+
+    '--icon-size': '32px',
+  },
+
+  fileIcon: {
+    maxWidth: 'var(--icon-size)',
+    maxHeight: 'var(--icon-size)',
+  },
+
+  fileName: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    fontSize: 16,
+  },
+
+  fileNameContainer: {
+    overflow: 'hidden',
+    marginRight: 'auto',
+  },
+
+  preloader: {
+    display: 'flex',
+    margin: 6,
+  },
+
+  'preloader-dots': {
+    width: 26,
+    marginTop: 12,
+  },
+
+  'preloader-default': {
+    width: 20,
+    height: 20,
+  },
+
+  'preloader-logo': {
+    width: 20,
+    height: 20,
+  },
+
+  metadata: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 2,
+    fontSize: 12,
+  },
+
+  actions: {
+    display: 'flex',
+    flexShrink: 0,
+    margin: -6,
+  },
+
+  fileSize: {},
+
+  footer: {},
+
+  error: {
+    fontSize: 12,
+  },
+
+  info: {
+    fontSize: 12,
+  },
+
+  disabled: {
+    cursor: 'not-allowed',
+  },
+});
+
+export const themedPreloaderStyles: IThemedPreloaderStyles = {
+  tweakDotsPreloader: {
+    root: {
+      gap: 4,
+      '--dot-size': '6px',
+    },
+  },
+};
+
+export type IFileItemStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakRemoveIconButton: IIconButtonStyles;
+    tweakPreloader: IThemedPreloaderStyles;
+    tweakTooltip: ITooltipStyles;
+  }
+>;

package/src/components/FileItem/FileItem.tsx

@@ -1,157 +1,157 @@
-import { FC, MouseEvent, KeyboardEvent, ReactNode } from 'react';
-import clsx from 'clsx';
-import { filesize } from 'filesize';
-import {
-  addClickHandler,
-  addDataTestId,
-  isFunction,
-  isNotEmpty,
-  isReactNodeNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { IIcon, renderIcon } from '../Icon';
-import { IconButton } from '../IconButton';
-import { TextWithTooltip } from '../TextWithTooltip';
-import { IThemedPreloaderProps, ThemedPreloader } from '../ThemedPreloader';
-import { getFileIcon } from './helpers';
-import { IFileInfo, IFileItemSize } from './types';
-import { IFileItemStyles, themedPreloaderStyles, useStyles } from './FileItem.styles';
-
-export interface IFileItemProps extends ICommonProps<IFileItemStyles> {
-  fileInfo: IFileInfo;
-  icon?: IIcon;
-  /** @default trash-can */
-  removeIcon?: IIcon;
-  metadata?: ReactNode;
-  actions?: ReactNode;
-  error?: ReactNode;
-  info?: ReactNode;
-  /** @default m */
-  itemSize?: IFileItemSize;
-  /** @default default */
-  preloaderType?: IThemedPreloaderProps['type'];
-  /** @default false */
-  isDisabled?: boolean;
-  /** @default false */
-  areActionsDisabled?: boolean;
-  /** @default false */
-  isLoading?: boolean;
-  /** @default false */
-  shouldShowSize?: boolean;
-  onClick?: (event: MouseEvent | KeyboardEvent) => void;
-  onRemove?: (event: MouseEvent | KeyboardEvent) => void;
-}
-
-export const FileItem: FC<IFileItemProps> = ({
-  fileInfo,
-  icon = getFileIcon(fileInfo),
-  metadata,
-  actions,
-  error,
-  info,
-  isDisabled = false,
-  areActionsDisabled = false,
-  isLoading = false,
-  shouldShowSize = false,
-  itemSize = 'm',
-  preloaderType = 'default',
-  removeIcon = 'trash-can',
-  onRemove,
-  onClick,
-  testId,
-  data,
-  tweakStyles,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakIconButtonStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakRemoveIconButton',
-    currentComponentName: 'FileItem',
-  });
-
-  const tweakPreloaderStyles = useTweakStyles({
-    innerStyles: themedPreloaderStyles,
-    tweakStyles,
-    className: 'tweakPreloader',
-    currentComponentName: 'FileItem',
-  });
-
-  const tweakTooltipStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakTooltip',
-    currentComponentName: 'FileItem',
-  });
-
-  const handleClick = (event: MouseEvent | KeyboardEvent) => {
-    event.stopPropagation();
-    onClick?.(event);
-  };
-
-  const handleRemove = (event: MouseEvent | KeyboardEvent) => {
-    event.stopPropagation();
-    onRemove?.(event);
-  };
-
-  const { name, size } = fileInfo;
-  const hasRemoveButton = isFunction(onRemove);
-
-  return (
-    <div className={classes.root}>
-      <div
-        className={clsx(classes.fileItemWrapper, classes[itemSize], {
-          [classes.disabled]: isDisabled,
-        })}
-        {...addDataTestId(testId)}
-        {...addDataAttributes(data)}
-        {...addClickHandler(handleClick, !isDisabled)}
-      >
-        <div className={classes.fileIcon}>{renderIcon(icon)}</div>
-
-        <div className={classes.fileNameContainer}>
-          <TextWithTooltip tooltipText={name} tooltipView="hint" tweakStyles={tweakTooltipStyles}>
-            <div className={classes.fileName}>{name}</div>
-          </TextWithTooltip>
-
-          <div className={classes.metadata}>
-            {metadata}
-            {shouldShowSize && isNotEmpty(size) && (
-              <div className={classes.fileSize}>{filesize(size)}</div>
-            )}
-          </div>
-        </div>
-
-        <div className={classes.actions}>
-          {isLoading ? (
-            <div className={clsx(classes.preloader, classes[`preloader-${preloaderType}`])}>
-              <ThemedPreloader
-                type={preloaderType}
-                tweakStyles={tweakPreloaderStyles}
-                useCurrentColor
-              />
-            </div>
-          ) : (
-            hasRemoveButton && (
-              <IconButton
-                icon={removeIcon}
-                onClick={handleRemove}
-                isDisabled={areActionsDisabled}
-                tweakStyles={tweakIconButtonStyles}
-              />
-            )
-          )}
-
-          {actions}
-        </div>
-      </div>
-
-      <div className={classes.footer}>
-        {isReactNodeNotEmpty(error) && <div className={classes.error}>{error}</div>}
-
-        {isReactNodeNotEmpty(info) && <div className={classes.info}>{info}</div>}
-      </div>
-    </div>
-  );
-};
+import { FC, MouseEvent, KeyboardEvent, ReactNode } from 'react';
+import clsx from 'clsx';
+import { filesize } from 'filesize';
+import {
+  addClickHandler,
+  addDataTestId,
+  isFunction,
+  isNotEmpty,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { IIcon, renderIcon } from '../Icon';
+import { IconButton } from '../IconButton';
+import { TextWithTooltip } from '../TextWithTooltip';
+import { IThemedPreloaderProps, ThemedPreloader } from '../ThemedPreloader';
+import { getFileIcon } from './helpers';
+import { IFileInfo, IFileItemSize } from './types';
+import { IFileItemStyles, themedPreloaderStyles, useStyles } from './FileItem.styles';
+
+export interface IFileItemProps extends ICommonProps<IFileItemStyles> {
+  fileInfo: IFileInfo;
+  icon?: IIcon;
+  /** @default trash-can */
+  removeIcon?: IIcon;
+  metadata?: ReactNode;
+  actions?: ReactNode;
+  error?: ReactNode;
+  info?: ReactNode;
+  /** @default m */
+  itemSize?: IFileItemSize;
+  /** @default default */
+  preloaderType?: IThemedPreloaderProps['type'];
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default false */
+  areActionsDisabled?: boolean;
+  /** @default false */
+  isLoading?: boolean;
+  /** @default false */
+  shouldShowSize?: boolean;
+  onClick?: (event: MouseEvent | KeyboardEvent) => void;
+  onRemove?: (event: MouseEvent | KeyboardEvent) => void;
+}
+
+export const FileItem: FC<IFileItemProps> = ({
+  fileInfo,
+  icon = getFileIcon(fileInfo),
+  metadata,
+  actions,
+  error,
+  info,
+  isDisabled = false,
+  areActionsDisabled = false,
+  isLoading = false,
+  shouldShowSize = false,
+  itemSize = 'm',
+  preloaderType = 'default',
+  removeIcon = 'trash-can',
+  onRemove,
+  onClick,
+  testId,
+  data,
+  tweakStyles,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakIconButtonStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakRemoveIconButton',
+    currentComponentName: 'FileItem',
+  });
+
+  const tweakPreloaderStyles = useTweakStyles({
+    innerStyles: themedPreloaderStyles,
+    tweakStyles,
+    className: 'tweakPreloader',
+    currentComponentName: 'FileItem',
+  });
+
+  const tweakTooltipStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakTooltip',
+    currentComponentName: 'FileItem',
+  });
+
+  const handleClick = (event: MouseEvent | KeyboardEvent) => {
+    event.stopPropagation();
+    onClick?.(event);
+  };
+
+  const handleRemove = (event: MouseEvent | KeyboardEvent) => {
+    event.stopPropagation();
+    onRemove?.(event);
+  };
+
+  const { name, size } = fileInfo;
+  const hasRemoveButton = isFunction(onRemove);
+
+  return (
+    <div className={classes.root}>
+      <div
+        className={clsx(classes.fileItemWrapper, classes[itemSize], {
+          [classes.disabled]: isDisabled,
+        })}
+        {...addDataTestId(testId)}
+        {...addDataAttributes(data)}
+        {...addClickHandler(handleClick, !isDisabled)}
+      >
+        <div className={classes.fileIcon}>{renderIcon(icon)}</div>
+
+        <div className={classes.fileNameContainer}>
+          <TextWithTooltip tooltipText={name} tooltipView="hint" tweakStyles={tweakTooltipStyles}>
+            <div className={classes.fileName}>{name}</div>
+          </TextWithTooltip>
+
+          <div className={classes.metadata}>
+            {metadata}
+            {shouldShowSize && isNotEmpty(size) && (
+              <div className={classes.fileSize}>{filesize(size)}</div>
+            )}
+          </div>
+        </div>
+
+        <div className={classes.actions}>
+          {isLoading ? (
+            <div className={clsx(classes.preloader, classes[`preloader-${preloaderType}`])}>
+              <ThemedPreloader
+                type={preloaderType}
+                tweakStyles={tweakPreloaderStyles}
+                useCurrentColor
+              />
+            </div>
+          ) : (
+            hasRemoveButton && (
+              <IconButton
+                icon={removeIcon}
+                onClick={handleRemove}
+                isDisabled={areActionsDisabled}
+                tweakStyles={tweakIconButtonStyles}
+              />
+            )
+          )}
+
+          {actions}
+        </div>
+      </div>
+
+      <div className={classes.footer}>
+        {isReactNodeNotEmpty(error) && <div className={classes.error}>{error}</div>}
+
+        {isReactNodeNotEmpty(info) && <div className={classes.info}>{info}</div>}
+      </div>
+    </div>
+  );
+};