@true-engineering/true-react-common-ui-kit 3.45.2 → 4.0.0-alpha1

package/src/components/FileInput/FileInput.tsx

@@ -1,147 +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';
+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

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

package/src/components/FileInput/index.ts

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

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

@@ -1,63 +1,59 @@
-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 { iconsList, IIconType } from '../Icon';
+import { complexIcons } from '../Icon/complexIcons';
+import { FileItem, IFileItemProps } from './FileItem';
+
+export default {
+  title: 'Data Display/FileItem',
+  component: FileItem,
+};
+
+const icons = [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: icons, control: 'select' },
+  removeIcon: { options: icons, 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;
+  }
+>;