@redneckz/wildless-cms-uni-blocks 0.14.989 → 0.14.991

package/src/ui-kit/Input/renderFileInput.tsx

@@ -0,0 +1,87 @@
+import { SUCCESS_STATUS, type ResponseData } from '../../api/sendFile';
+import type { IconName } from '../../icons/IconName';
+import type { IconVersion } from '../../model/IconVersion';
+import { noop } from '../../utils/noop';
+import { style } from '../../utils/style';
+import { Icon } from '../Icon/Icon';
+import type { PreventableEvent, PreventableEventWithTargetFiles } from '../PreventableEvent';
+import type { InputProps } from './InputProps';
+import { renderLabel } from './renderLabel';
+
+const ICON_PROPS: { name: IconName; iconVersion: IconVersion; width: string; height: string } = {
+  name: 'DocIcon',
+  iconVersion: 'black',
+  width: '24',
+  height: '24',
+};
+
+interface InputFileProps extends InputProps<File> {
+  key?: string;
+  uploadResponse?: ResponseData | null;
+  file?: File | null;
+  onReset?: (e: PreventableEvent) => void;
+  isCustomValid?: boolean;
+}
+
+export const renderFileInput = ({
+  label,
+  inputRef,
+  id,
+  key,
+  type,
+  name,
+  pattern,
+  disabled,
+  onChange = noop,
+  onFocus,
+  onBlur,
+  extensions,
+  uploadResponse,
+  file,
+}: InputFileProps) => {
+  const ariaLabel = label ?? name ?? id;
+
+  return (
+    <div>
+      {uploadResponse?.status === SUCCESS_STATUS ? (
+        renderFileName(file)
+      ) : (
+        <div className="flex items-center space-x-2">
+          <Icon className="inline-block" {...ICON_PROPS} />
+          {renderLabel(label)}
+          <input
+            ref={inputRef}
+            className={style('h-14 hidden')}
+            id={id}
+            key={key}
+            type={type}
+            name={name || id}
+            pattern={pattern}
+            disabled={disabled}
+            aria-label={ariaLabel}
+            onChange={(e: PreventableEventWithTargetFiles) => {
+              e?.target?.files && onChange(e?.target?.files[0]);
+            }}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            accept={extensionsToAccept(extensions)}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+const extensionsToAccept = (extensions: string[] = []): string => {
+  return extensions
+    .map((ext) => {
+      const str = String(ext).trim();
+
+      return str.startsWith('.') ? str : '.' + str;
+    })
+    .map((ext) => ext.toLowerCase())
+    .filter((ext, index, arr) => arr.indexOf(ext) === index)
+    .join(', ');
+};
+
+const renderFileName = (file?: File | null | undefined) => <span>{file?.name}</span>;

package/src/ui-kit/Input/renderInfoText.tsx

@@ -0,0 +1,15 @@
+import { Text } from '../Text/Text';
+import { ACCEPTED_EXTENSIONS_TEXT, MAX_SIZE_TEXT } from './constants';
+
+export const renderInfoText = (extensions?: string[], maxSize?: number) => {
+  const extensionsMessage = extensions
+    ? `${ACCEPTED_EXTENSIONS_TEXT} - ${extensions.join(', ')}. `
+    : '';
+  const maxSizeMessage = maxSize ? `${MAX_SIZE_TEXT} - ${maxSize}Мб.` : '';
+
+  return (
+    <Text size="text-xs" font="font-light" color="text-secondary-text">
+      {extensionsMessage + maxSizeMessage}
+    </Text>
+  );
+};

package/src/ui-kit/Input/styles.ts

@@ -0,0 +1,2 @@
+export const defaultStyle = 'w-full border rounded-md text-primary-text outline-none p-m';
+export const borderStyle = 'border-dashed';

package/src/ui-kit/Input/useVerifyFile.ts

@@ -0,0 +1,100 @@
+import { useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { sendFile, SUCCESS_STATUS, type ResponseData } from '../../api/sendFile';
+import { animateStepWithMinDuration } from '../../utils/animateStepWithMinDuration';
+import { debounce } from '../../utils/debounce';
+import { noop } from '../../utils/noop';
+import { checkFileExtension } from './checks/checkFIleExtension';
+import { checkFileMimeType } from './checks/checkFileMimeType';
+import { checkFileSignature } from './checks/checkFileSignature';
+import { checkFileSize } from './checks/checkFileSize';
+import { DEFAULT_ERROR_TEXT } from './constants';
+import { type FileInputProps } from './InputProps';
+
+const DEBOUNCE_DELAY = 500;
+
+interface VerifyFileProps extends FileInputProps {
+  onUploadError?: (value: string) => void;
+  onFileSelected?: (value: File) => void;
+  onUploadResponse?: (value: ResponseData) => void;
+}
+
+export type VerifyFileParams = {
+  file: File;
+  onFileChanged?: (value: string) => void;
+};
+
+export const useVerifyFile = ({
+  onUploadError = noop,
+  onFileSelected = noop,
+  extensions,
+  maxSizeMB,
+  onUploadResponse = noop,
+}: VerifyFileProps) => {
+  const [progress, setProgress] = useState(0);
+  const [isFileUploading, setIsFileUploading] = useState(false);
+
+  const debouncedOnFileUploaded = useMemo(
+    () => debounce((isUploading: boolean) => setIsFileUploading(isUploading), DEBOUNCE_DELAY),
+    [setIsFileUploading],
+  );
+  const debouncedOnUploadError = useMemo(
+    () => debounce((message: string) => onUploadError(message), DEBOUNCE_DELAY),
+    [onUploadError],
+  );
+
+  const debouncedOnUploadResponse = useMemo(
+    () => debounce((response: ResponseData) => onUploadResponse(response), DEBOUNCE_DELAY),
+    [onUploadResponse],
+  );
+
+  const verifyFile = async ({ file, onFileChanged = noop }: VerifyFileParams) => {
+    onFileSelected(file);
+    setIsFileUploading(true);
+
+    const checks = [
+      () => checkFileExtension(file, extensions),
+      () => checkFileSize(file, maxSizeMB),
+      () => checkFileSignature(file, extensions),
+      () => checkFileMimeType(file, extensions),
+    ];
+
+    const checkProgressStep = 50 / checks.length;
+    let currentProgress = 0;
+
+    try {
+      for (let i = 0; i < checks.length; i++) {
+        const checkPromise = checks[i];
+
+        await checkPromise();
+
+        const targetProgress = (i + 1) * checkProgressStep;
+
+        await animateStepWithMinDuration({
+          from: currentProgress,
+          to: targetProgress,
+          onUpdate: setProgress,
+          minDuration: 300,
+        });
+
+        currentProgress = targetProgress;
+      }
+
+      const response = await sendFile({
+        file,
+        onProgress: setProgress,
+      });
+      debouncedOnUploadResponse(response);
+      onFileChanged(response?.fileId ?? '');
+      if (response?.status === SUCCESS_STATUS) {
+        debouncedOnFileUploaded?.(false);
+      }
+    } catch (e) {
+      const errorMessage = e instanceof Error ? e.message : DEFAULT_ERROR_TEXT;
+      debouncedOnUploadError(errorMessage);
+      onFileChanged('');
+    }
+    debouncedOnFileUploaded?.(false);
+  };
+
+  return { verifyFile, isFileUploading, progress };
+};

package/src/ui-kit/PreventableEvent.ts

@@ -4,3 +4,8 @@ export interface PreventableEvent {
 }
 
 export type PreventableEventWithTarget = PreventableEvent & { target?: EventTarget | null };
+
+export type PreventableEventWithTargetFiles = PreventableEvent & {
+  target?: HTMLInputElement | null;
+  dataTransfer?: DataTransfer;
+};

package/src/ui-kit/ProgressBar/ProgressBar.tsx

@@ -5,16 +5,21 @@ import type { DescriptionProps } from '../../model/HeadlineType';
 interface ProgressBarProps extends DescriptionProps {
   step?: number;
   showPercentage?: boolean;
+  isOnlyInteger?: boolean;
 }
 
 export const ProgressBar = JSX<ProgressBarProps>(
-  ({ step = 10, description, showPercentage = true }) => (
+  ({ step = 10, description, showPercentage = true, isOnlyInteger = false }) => (
     <div>
       <div className="h-4 w-full bg-gray relative">
         <div className="h-4 bg-green" style={{ width: `${step}%` }} />
       </div>
       <div className="relative">
-        {showPercentage ? <div className="absolute left-2/4 text-green">{step}%</div> : null}
+        {showPercentage ? (
+          <div className="absolute left-2/4 text-green">
+            {isOnlyInteger ? Math.round(step) : step}%
+          </div>
+        ) : null}
         {description ? <div className="text-right pr-m text-gray">{description}</div> : null}
       </div>
     </div>

package/src/utils/animateStepWithMinDuration.ts

@@ -0,0 +1,38 @@
+import { noop } from './noop';
+
+interface AnimateProgressProps {
+  from: number;
+  to: number;
+  onUpdate: (value: number) => void;
+  minDuration: number;
+}
+
+export const animateStepWithMinDuration = ({
+  from,
+  to,
+  onUpdate = noop,
+  minDuration = 300,
+}: AnimateProgressProps): Promise<void> => {
+  return new Promise((resolve) => {
+    const startTime = performance.now();
+
+    const animate = () => {
+      const currentTime = performance.now();
+      const elapsed = currentTime - startTime;
+      const animationProgress = Math.min(elapsed / minDuration, 1);
+      const easeProgress = 1 - Math.pow(1 - animationProgress, 3);
+      const value = from + (to - from) * easeProgress;
+
+      onUpdate(value);
+
+      if (animationProgress < 1) {
+        requestAnimationFrame(animate);
+      } else {
+        onUpdate(to);
+        resolve();
+      }
+    };
+
+    requestAnimationFrame(animate);
+  });
+};

package/src/utils/isDateValid.ts

@@ -0,0 +1,33 @@
+export const isDateValid = (
+  value: Date,
+  limits: {
+    minLimit?: Date;
+    maxLimit?: Date;
+  },
+): boolean => {
+  if (!value || isNaN(value.getTime())) {
+    return false;
+  }
+
+  const { minLimit, maxLimit } = limits;
+
+  const time = value.getTime();
+
+  return isValidMin(time, minLimit) && isValidMax(time, maxLimit);
+};
+
+const isValidMin = (time: number, minLimit?: Date | null): boolean => {
+  if (!minLimit || isNaN(minLimit.getTime())) {
+    return true;
+  }
+
+  return time > minLimit.getTime();
+};
+
+const isValidMax = (time: number, maxLimit?: Date | null): boolean => {
+  if (!maxLimit || isNaN(maxLimit.getTime())) {
+    return true;
+  }
+
+  return time < maxLimit.getTime();
+};