@true-engineering/true-react-common-ui-kit 4.0.0-alpha2 → 4.0.0-alpha4

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>
+  );
+};

package/src/components/FileItem/constants.ts

@@ -1,29 +1,29 @@
-import { mimeTypes } from '../../constants';
-import { IComplexIcon } from '../Icon';
-import { type IFileIcon } from './types';
-
-export const FILE_ICONS = [
-  'file-excel',
-  'file-image',
-  'file-pdf',
-  'file-word',
-  'file-xml',
-  'file-zip',
-  'file-other',
-] satisfies IComplexIcon[];
-
-export const FILE_ICON_DEFAULT: IFileIcon = 'file-other';
-
-export const iconTypeMap: Record<string, IFileIcon> = {
-  [mimeTypes.xls]: 'file-excel',
-  [mimeTypes.xlsx]: 'file-excel',
-  [mimeTypes.jpeg]: 'file-image',
-  [mimeTypes.png]: 'file-image',
-  [mimeTypes.pdf]: 'file-pdf',
-  [mimeTypes.doc]: 'file-word',
-  [mimeTypes.docx]: 'file-word',
-  [mimeTypes.xml]: 'file-xml',
-  [mimeTypes.zip]: 'file-zip',
-};
-
-export const FILE_ITEM_SIZES = ['m', 'l'] as const;
+import { mimeTypes } from '../../constants';
+import { IComplexIcon } from '../Icon';
+import { type IFileIcon } from './types';
+
+export const FILE_ICONS = [
+  'file-excel',
+  'file-image',
+  'file-pdf',
+  'file-word',
+  'file-xml',
+  'file-zip',
+  'file-other',
+] satisfies IComplexIcon[];
+
+export const FILE_ICON_DEFAULT: IFileIcon = 'file-other';
+
+export const iconTypeMap: Record<string, IFileIcon> = {
+  [mimeTypes.xls]: 'file-excel',
+  [mimeTypes.xlsx]: 'file-excel',
+  [mimeTypes.jpeg]: 'file-image',
+  [mimeTypes.png]: 'file-image',
+  [mimeTypes.pdf]: 'file-pdf',
+  [mimeTypes.doc]: 'file-word',
+  [mimeTypes.docx]: 'file-word',
+  [mimeTypes.xml]: 'file-xml',
+  [mimeTypes.zip]: 'file-zip',
+};
+
+export const FILE_ITEM_SIZES = ['m', 'l'] as const;

package/src/components/FileItem/helpers.ts

@@ -1,27 +1,27 @@
-import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { IMimeType, mimeTypes } from '../../constants';
-import { FILE_ICON_DEFAULT, iconTypeMap } from './constants';
-import { IFileIcon, IFileInfo } from './types';
-
-export const getFileExtensionByFilename = (fileName: string): string | undefined => {
-  const splitFileName = fileName.split('.');
-  return splitFileName.length > 1 ? splitFileName.pop() : undefined;
-};
-
-export const getMimeTypeByFilename = (fileName: string): string | undefined => {
-  const ext = getFileExtensionByFilename(fileName);
-  return isNotEmpty(ext) ? mimeTypes[ext as IMimeType] : undefined;
-};
-
-export const getFileIcon = ({ type, name }: IFileInfo): IFileIcon => {
-  if (isNotEmpty(type) && type in iconTypeMap) {
-    return iconTypeMap[type];
-  }
-
-  const mimeType = getMimeTypeByFilename(name);
-  if (isNotEmpty(mimeType) && mimeType in iconTypeMap) {
-    return iconTypeMap[mimeType];
-  }
-
-  return FILE_ICON_DEFAULT;
-};
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { IMimeType, mimeTypes } from '../../constants';
+import { FILE_ICON_DEFAULT, iconTypeMap } from './constants';
+import { IFileIcon, IFileInfo } from './types';
+
+export const getFileExtensionByFilename = (fileName: string): string | undefined => {
+  const splitFileName = fileName.split('.');
+  return splitFileName.length > 1 ? splitFileName.pop() : undefined;
+};
+
+export const getMimeTypeByFilename = (fileName: string): string | undefined => {
+  const ext = getFileExtensionByFilename(fileName);
+  return isNotEmpty(ext) ? mimeTypes[ext as IMimeType] : undefined;
+};
+
+export const getFileIcon = ({ type, name }: IFileInfo): IFileIcon => {
+  if (isNotEmpty(type) && type in iconTypeMap) {
+    return iconTypeMap[type];
+  }
+
+  const mimeType = getMimeTypeByFilename(name);
+  if (isNotEmpty(mimeType) && mimeType in iconTypeMap) {
+    return iconTypeMap[mimeType];
+  }
+
+  return FILE_ICON_DEFAULT;
+};

package/src/components/FileItem/index.ts

@@ -1,4 +1,4 @@
-export * from './FileItem';
-export * from './types';
-export * from './helpers';
-export type { IFileItemStyles } from './FileItem.styles';
+export * from './FileItem';
+export * from './types';
+export * from './helpers';
+export type { IFileItemStyles } from './FileItem.styles';

package/src/components/FileItem/types.ts

@@ -1,11 +1,11 @@
-import { FILE_ICONS, FILE_ITEM_SIZES } from './constants';
-
-export interface IFileInfo {
-  name: File['name'];
-  type?: File['type'];
-  size?: File['size'];
-}
-
-export type IFileIcon = (typeof FILE_ICONS)[number];
-
-export type IFileItemSize = (typeof FILE_ITEM_SIZES)[number];
+import { FILE_ICONS, FILE_ITEM_SIZES } from './constants';
+
+export interface IFileInfo {
+  name: File['name'];
+  type?: File['type'];
+  size?: File['size'];
+}
+
+export type IFileIcon = (typeof FILE_ICONS)[number];
+
+export type IFileItemSize = (typeof FILE_ITEM_SIZES)[number];