@true-engineering/true-react-common-ui-kit 3.23.0 → 3.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.23.0",
+  "version": "3.24.0",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [
@@ -43,10 +43,11 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.26.12",
-    "@true-engineering/true-react-platform-helpers": "0.0.6",
+    "@true-engineering/true-react-platform-helpers": "0.1.0",
     "clsx": "1.2.1",
     "country-flag-icons": "1.5.5",
     "date-fns": "2.29.3",
+    "filesize": "10.1.1",
     "hex-to-rgba": "2.0.1",
     "jss": "10.9.2",
     "lodash-es": "4.17.21",

package/src/components/FileInput/FileInput.stories.tsx

@@ -0,0 +1,75 @@
+import { format } from 'date-fns';
+import { ru } from 'date-fns/locale';
+import { ComponentStory } from '@storybook/react';
+import { mimeTypes } from '../../constants';
+import { FileItem } from '../FileItem';
+import { Icon } from '../Icon';
+import { FileInput } from './FileInput';
+
+export default {
+  title: 'Inputs/FileInput',
+  component: FileInput,
+};
+
+const description = 'Форматы файла: xlsx, xlsm. Размер — до 1 МБ';
+const text = (
+  <div style={{ display: 'flex', alignItems: 'center' }}>
+    <span style={{ display: 'inline-block', width: 20, height: 20, marginRight: 8 }}>
+      <Icon type="upload" />
+    </span>
+    Перетащите или выберите файл
+  </div>
+);
+
+const handleAdd = (newFiles: File[]) =>
+  console.log(
+    'added:',
+    newFiles.map(({ name }) => name),
+  );
+
+const Template: ComponentStory<typeof FileInput> = (args) => (
+  <div style={{ width: 652 }}>
+    <FileInput {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  label: 'Скан документа',
+  isDragAndDropDisabled: false,
+  isRequired: true,
+  isReadOnly: false,
+  isMultipleDisabled: false,
+  isDisabled: false,
+  isActive: false,
+  onAdd: handleAdd,
+  tweakStyles: {
+    fileList: {
+      '& > div': {
+        width: '270px',
+      },
+    },
+  },
+  description,
+  text,
+  fileList: (
+    <>
+      <FileItem
+        fileInfo={{ name: 'file1', type: mimeTypes.jpeg, size: 10000 }}
+        metadata={<span>Обновлен {format(new Date(), 'dd MMM, HH:mm', { locale: ru })}</span>}
+      />
+      <FileItem
+        fileInfo={{ name: 'file 2', type: mimeTypes.xls }}
+        metadata={<span>Обновлен {format(new Date(), 'dd MMM, HH:mm', { locale: ru })}</span>}
+        isDisabled
+      />
+    </>
+  ),
+};
+
+Default.parameters = {
+  controls: {
+    exclude: ['onAdd', 'tweakStyles'],
+  },
+};

package/src/components/FileInput/FileInput.styles.ts

@@ -0,0 +1,80 @@
+import { ITweakStyles, animations, createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('FileInput', {
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+  },
+
+  label: {
+    position: 'relative',
+    width: 'fit-content',
+    fontSize: 16,
+    marginBottom: 12,
+  },
+
+  requiredLabel: {
+    '&:after': {
+      content: '""',
+      position: 'absolute',
+      right: -8,
+      top: 4,
+      transform: 'translate(0, -50%)',
+      width: 6,
+      height: 6,
+      borderRadius: '50%',
+    },
+  },
+
+  description: {
+    marginBottom: 8,
+    fontSize: 12,
+  },
+
+  text: {
+    padding: [16, 0],
+  },
+
+  inputWrapper: {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    marginBottom: 8,
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color, color',
+  },
+
+  inputLabel: {
+    position: 'absolute',
+    inset: 0,
+    cursor: 'pointer',
+
+    '& input': {
+      opacity: 0,
+      width: 1,
+      height: 1,
+      zIndex: -1,
+    },
+  },
+
+  dragged: {},
+
+  active: {},
+
+  disabled: {
+    cursor: 'not-allowed',
+    pointerEvents: 'none',
+  },
+
+  fileList: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    columnGap: 6,
+    rowGap: 12,
+  },
+});
+
+export type IFileInputStyles = ITweakStyles<typeof useStyles>;

package/src/components/FileInput/FileInput.tsx

@@ -0,0 +1,147 @@
+import {
+  ReactNode,
+  useState,
+  InputHTMLAttributes,
+  forwardRef,
+  ChangeEventHandler,
+  DragEventHandler,
+} from 'react';
+import clsx from 'clsx';
+import {
+  addDataTestId,
+  isEmpty,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { blockEvent } from './helpers';
+import { IFileInputStyles, useStyles } from './FileInput.styles';
+
+export interface IFileInputProps extends ICommonProps<IFileInputStyles> {
+  fileList?: ReactNode;
+  label?: ReactNode;
+  text: ReactNode;
+  description?: ReactNode;
+  /** @default false */
+  isDragAndDropDisabled?: boolean;
+  /** @default false */
+  isRequired?: boolean;
+  /** @default false */
+  isReadOnly?: boolean;
+  /** @default false */
+  isMultipleDisabled?: boolean;
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default false */
+  isActive?: boolean;
+  /** @default undefined */
+  accept?: InputHTMLAttributes<HTMLInputElement>['accept'];
+  onAdd?: (files: File[]) => void;
+}
+
+export const FileInput = forwardRef<HTMLInputElement, IFileInputProps>(
+  (
+    {
+      fileList,
+      label,
+      text,
+      description,
+      isDragAndDropDisabled = false,
+      isRequired = false,
+      isReadOnly = false,
+      isMultipleDisabled = false,
+      isDisabled = false,
+      isActive = false,
+      accept,
+      onAdd,
+      testId,
+      tweakStyles,
+      data,
+    },
+    ref,
+  ) => {
+    const classes = useStyles({ theme: tweakStyles });
+
+    const [isDragOver, setIsDragOver] = useState(false);
+
+    const handleAdd = (files: FileList | null) => {
+      if (isDisabled || isEmpty(files) || files?.length === 0) {
+        return;
+      }
+
+      onAdd?.([...files]);
+    };
+
+    const handleDragStart: DragEventHandler<HTMLDivElement> = (event) => {
+      blockEvent(event);
+      setIsDragOver(true);
+    };
+
+    const handleDragStop: DragEventHandler<HTMLDivElement> = (event) => {
+      blockEvent(event);
+      setIsDragOver(false);
+    };
+
+    const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {
+      handleDragStop(event);
+
+      handleAdd(event.dataTransfer.files);
+    };
+
+    const handleFileChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+      handleAdd(event.target.files);
+    };
+
+    const dndHandlers =
+      !isDragAndDropDisabled && !isDisabled
+        ? {
+            onDragOver: handleDragStart,
+            onDragEnter: handleDragStart,
+            onDragLeave: handleDragStop,
+            onDrop: handleDrop,
+          }
+        : undefined;
+
+    return (
+      <div className={classes.root} {...addDataAttributes(data)} {...addDataTestId(testId)}>
+        {isReactNodeNotEmpty(label) && (
+          <div className={clsx(classes.label, { [classes.requiredLabel]: isRequired })}>
+            {label}
+          </div>
+        )}
+        {!isReadOnly && (
+          <div
+            className={clsx(classes.inputWrapper, {
+              [classes.dragged]: isDragOver,
+              [classes.disabled]: isDisabled,
+              [classes.active]: isActive,
+            })}
+            {...dndHandlers}
+          >
+            {isReactNodeNotEmpty(text) && <div className={classes.text}>{text}</div>}
+            <label className={classes.inputLabel}>
+              <input
+                ref={ref}
+                type="file"
+                value=""
+                onChange={handleFileChange}
+                multiple={!isMultipleDisabled}
+                disabled={isDisabled}
+                accept={accept}
+                {...addDataTestId(testId, 'input')}
+              />
+            </label>
+          </div>
+        )}
+
+        {isReactNodeNotEmpty(description) && (
+          <div className={classes.description}>{description}</div>
+        )}
+
+        <div className={classes.fileList}>{fileList}</div>
+      </div>
+    );
+  },
+);
+
+FileInput.displayName = 'FileInput';

package/src/components/FileInput/helpers.ts

@@ -0,0 +1,6 @@
+import { SyntheticEvent } from 'react';
+
+export const blockEvent = (event: SyntheticEvent): void => {
+  event.preventDefault();
+  event.stopPropagation();
+};

package/src/components/FileInput/index.ts

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

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

@@ -0,0 +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'],
+  },
+};

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

@@ -0,0 +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;
+  }
+>;

package/src/components/FileItem/FileItem.tsx

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

package/src/components/FileItem/constants.ts

@@ -0,0 +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;