yummies 5.4.5 → 5.4.6

package/src/format/number.ts

@@ -0,0 +1,96 @@
+import { number as toNumber } from '../parser/number.js';
+import { typeGuard } from '../type-guard/index.js';
+import type { Maybe } from '../utils/types.js';
+
+import { NO_VALUE } from './constants.js';
+
+export interface NumberFormatSettings {
+  delimiter?: string;
+  /**
+   * digitsOnlyForFloat - Show digits after decimal point only if they are not zeros after converting to number.
+   * Example: "0.00" -> "0", "0.10" -> "0.1", but "0.003" -> "0.003"
+   *
+   * @default true
+   */
+  digitsOnlyForFloat?: boolean;
+  /**
+   * Text which will be returned if the value is undefined, null, NaN, Infinity or empty string.
+   * Example: "–" will be returned if the value is undefined and emptyText is "–".
+   */
+  emptyText?: string;
+  /**
+   * Text to append to the end of the formatted number.
+   * Example: if value is 1000 and postfix is "₽", result will be "1 000₽".
+   */
+  postfix?: string;
+  /**
+   * Fixed number of digits after the decimal point (number.toFixed() method)
+   * If set to false, the truncation is ignored!
+   */
+  digits?: number | false;
+  /**
+   * Remove trailing zeros from the end of the number
+   * Example: 0.010000000000000000000000000000000000000000000 -> 0.01
+   */
+  cutZeros?: boolean;
+}
+
+export const number = (
+  rawValue: Maybe<string | number>,
+  userSettings?: Maybe<NumberFormatSettings>,
+): string => {
+  const settings = {
+    ...number.defaultSettings,
+    ...userSettings,
+  };
+
+  const digits = settings.digits ?? 0;
+  const cutZeros = settings?.cutZeros ?? false;
+  const delimiter = settings.delimiter ?? ' ';
+  const postfix = settings.postfix ?? '';
+  const emptyText = settings.emptyText ?? NO_VALUE;
+  const digitsOnlyForFloat = settings.digitsOnlyForFloat ?? true;
+
+  let value: Maybe<number>;
+
+  if (typeGuard.isString(rawValue)) {
+    value = toNumber(value, { fallback: undefined });
+  } else {
+    value = rawValue;
+  }
+
+  if (typeGuard.isNumber(value)) {
+    let raw: string = `${value}`;
+
+    if (digits !== false) {
+      raw = value.toFixed(digits);
+    }
+    if (cutZeros) {
+      raw = `${+raw}`;
+    }
+
+    const [integerPart, decimalPart] = raw.split('.', 2);
+
+    let formattedIntegerPart = integerPart;
+    let formattedDecimalPart = '';
+
+    if (decimalPart && (!digitsOnlyForFloat || !/^0+$/.test(decimalPart))) {
+      formattedDecimalPart = `.${decimalPart}`;
+    }
+
+    const rgx = /(\d+)(\d{3})/;
+
+    while (rgx.test(formattedIntegerPart) && delimiter) {
+      formattedIntegerPart = formattedIntegerPart.replace(
+        rgx,
+        `$1${delimiter}$2`,
+      );
+    }
+
+    return formattedIntegerPart + formattedDecimalPart + postfix;
+  }
+
+  return emptyText;
+};
+
+number.defaultSettings = {} as NumberFormatSettings;

package/src/format/percent.ts

@@ -0,0 +1,40 @@
+import { type NumberParserSettings, number } from '../parser/number.js';
+import { typeGuard } from '../type-guard/index.js';
+import type { Maybe } from '../utils/types.js';
+
+import { NO_VALUE } from './constants.js';
+
+export interface PercentFormatSettings
+  extends Omit<NumberParserSettings, 'fallback'> {
+  divider?: string;
+  delimiter?: string;
+  symbol?: string;
+  emptyText?: string;
+}
+
+/**
+ * 100 -> 100%
+ * 99.123214412 -> 99.12%
+ * 99.123214412 -> 99,12%
+ */
+export const percent = (
+  value: Maybe<number | string>,
+  settings?: PercentFormatSettings,
+) => {
+  const numericValue = number(value, {
+    ...settings,
+    digits: settings?.digits ?? 2,
+    fallback: Number.NaN,
+  });
+
+  if (typeGuard.isNumber(numericValue)) {
+    const divider = settings?.divider ?? '.';
+
+    const formattedPercent =
+      divider === '.' ? numericValue : `${numericValue}`.replace('.', divider);
+
+    return `${formattedPercent}${settings?.delimiter ?? ''}${settings?.symbol ?? '%'}`;
+  } else {
+    return settings?.emptyText ?? NO_VALUE;
+  }
+};

package/src/format/skip-spaces.ts

@@ -0,0 +1,4 @@
+/**
+ * Removes all spaces in string
+ */
+export const skipSpaces = (value: string) => value.replaceAll(/\s/g, '');

package/src/html.ts

@@ -0,0 +1,238 @@
+import DOMPurify, { type Config as DOMPurifyConfig } from 'dompurify';
+
+import { blobToUrl } from './media.js';
+import type { Maybe } from './utils/types.js';
+
+/**
+ * Вытаскивает RGB из любого цвета
+ *
+ * Не рекомендуется к использованию так как вызывает reflow
+ */
+export const getComputedColor = (color?: string): string | null => {
+  if (!color) return null;
+
+  const d = document.createElement('div');
+  d.style.color = color;
+  document.body.append(d);
+  const rgbcolor = globalThis.getComputedStyle(d).color;
+  const match =
+    /rgba?\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*\d+[.d+]*)*\)/g.exec(rgbcolor);
+
+  d.remove();
+
+  if (!match) return null;
+
+  return `${match[1]}, ${match[2]}, ${match[3]}`;
+};
+
+export const downloadUsingAnchor = (
+  urlOrBlob: string | Blob,
+  fileName?: string,
+) => {
+  const url = blobToUrl(urlOrBlob);
+
+  const a = document.createElement('a');
+  a.href = url;
+
+  a.download = fileName ?? 'file';
+
+  a.target = '_blank';
+
+  document.body.append(a);
+
+  a.click();
+
+  a.remove();
+};
+
+/**
+ * Surrounds string in an anchor tag
+ */
+export function wrapTextToTagLink(link: string) {
+  const descr = String(link).replace(/^(https?:\/{0,2})?(w{3}\.)?/, 'www.');
+  if (!/^https?:\/{2}/.test(link)) link = `http://${link}`;
+  return `<a href=${link} target="_blank">${descr}</a>`;
+}
+
+export const collectOffsetTop = (element: HTMLElement | null) => {
+  let offsetTop = 0;
+  let node = element;
+
+  while (node != null) {
+    offsetTop += node.offsetTop;
+    node = node.parentElement;
+  }
+
+  return offsetTop;
+};
+
+export const skipEvent = (e: Event) => {
+  e.preventDefault();
+  e.stopPropagation();
+
+  return false;
+};
+
+export const globalScrollIntoViewForY = (node: HTMLElement) => {
+  const scrollContainer = document.body;
+  const pageHeight = window.innerHeight;
+  const nodeBounding = node.getBoundingClientRect();
+  const scrollPagesCount = scrollContainer.scrollHeight / pageHeight;
+
+  const scrollPageNumber = Math.min(
+    Math.max(nodeBounding.top / pageHeight, 1),
+    scrollPagesCount,
+  );
+
+  window.scroll({
+    top: scrollPageNumber * pageHeight,
+    behavior: 'smooth',
+  });
+};
+
+const sanitizeDefaults: DOMPurifyConfig = {
+  ALLOWED_TAGS: [
+    'a',
+    'article',
+    'b',
+    'blockquote',
+    'br',
+    'caption',
+    'code',
+    'del',
+    'details',
+    'div',
+    'em',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'hr',
+    'i',
+    'img',
+    'ins',
+    'kbd',
+    'li',
+    'main',
+    'ol',
+    'p',
+    'pre',
+    'section',
+    'span',
+    'strong',
+    'sub',
+    'summary',
+    'sup',
+    'table',
+    'tbody',
+    'td',
+    'th',
+    'thead',
+    'tr',
+    'u',
+    'ul',
+  ],
+  ALLOWED_ATTR: ['href', 'target', 'name', 'src', 'class'],
+};
+
+export const sanitizeHtml = (html: Maybe<string>, config?: DOMPurifyConfig) => {
+  return DOMPurify.sanitize(html || '', {
+    ...sanitizeDefaults,
+    ...config,
+  });
+};
+
+export const checkElementHasParent = (
+  element: HTMLElement | null,
+  parent: Maybe<HTMLElement>,
+) => {
+  let node = element;
+
+  if (!parent) return false;
+
+  while (node != null) {
+    if (node === parent) {
+      return true;
+    } else {
+      node = node.parentElement;
+    }
+  }
+
+  return false;
+};
+
+/**
+ * Executes a function within a view transition if supported by the browser.
+ *
+ * @param {VoidFunction} fn - The function to be executed.
+ * @returns {ViewTransition} - The result of the executed function.
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition | MDN: Document.startViewTransition}
+ */
+export const startViewTransitionSafety = (
+  fn: VoidFunction,
+  params?: { disabled?: boolean },
+) => {
+  if (document.startViewTransition && !params?.disabled) {
+    return document.startViewTransition(fn);
+  }
+  fn();
+};
+
+/**
+ * Вычисляет размер скроллбара
+ */
+export const calcScrollbarWidth = () => {
+  const outer = document.createElement('div');
+
+  outer.style.visibility = 'hidden';
+  outer.style.width = '100px';
+  outer.style.overflow = 'scroll';
+
+  document.body.append(outer);
+
+  const inner = document.createElement('div');
+  inner.style.width = '100%';
+
+  outer.append(inner);
+
+  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+
+  outer.parentNode?.removeChild(outer);
+
+  return scrollbarWidth;
+};
+
+/**
+ * Calculates the inner height of an HTML element, accounting for padding.
+ */
+export function getElementInnerHeight(element: HTMLElement) {
+  const { clientHeight } = element;
+  const { paddingTop, paddingBottom } = getComputedStyle(element);
+  return (
+    clientHeight -
+    Number.parseFloat(paddingTop) -
+    Number.parseFloat(paddingBottom)
+  );
+}
+
+/**
+ * Calculates the inner width of an HTML element, accounting for padding.
+ */
+export function getElementInnerWidth(el: HTMLElement) {
+  const { clientWidth } = el;
+  const { paddingLeft, paddingRight } = getComputedStyle(el);
+  return (
+    clientWidth -
+    Number.parseFloat(paddingLeft) -
+    Number.parseFloat(paddingRight)
+  );
+}
+
+export const isPrefersDarkTheme = () =>
+  !!globalThis.matchMedia?.('(prefers-color-scheme: dark)')?.matches;
+
+export const isPrefersLightTheme = () =>
+  !!globalThis.matchMedia?.('(prefers-color-scheme: light)')?.matches;

package/{dist/id.js → src/id.ts}

@@ -1,27 +1,34 @@
 import { customAlphabet } from 'nanoid';
+
 const DIGITS = '0123456789';
 const LATIN_CHARS = 'abcdefghijklmnopqrstuvwxyz';
+
 const ALPHABET = `${LATIN_CHARS}${DIGITS}`;
+
 /**
  * Использует алфавит abcdefghijklmnopqrstuvwxyz0123456789
  * Размер 6
  */
 export const generateId = customAlphabet(ALPHABET, 6);
+
 /**
  * Использует алфавит abcdefghijklmnopqrstuvwxyz0123456789
  * Размер 4
  */
 export const generateShortId = customAlphabet(ALPHABET, 4);
+
 /**
  * Использует алфавит 0123456789
  * Размер 6
  */
 export const generateNumericId = customAlphabet(DIGITS, 6);
+
 /**
  * Использует алфавит 0123456789
  * Размер 4
  */
 export const generateNumericShortId = customAlphabet(DIGITS, 4);
+
 /**
  * Создает функцию, которая будет создавать уникальную строку, уникальность которой основана на порядке вызова этой функции
  *
@@ -41,12 +48,13 @@ export const generateNumericShortId = customAlphabet(DIGITS, 4);
  * @param size размер
  * @returns {()=>string}
  */
-export const createLinearNumericIdGenerator = (size = 9) => {
-    let lastCount = 0;
-    return () => {
-        return (lastCount++).toString().padStart(size, '0');
-    };
+export const createLinearNumericIdGenerator = (size: number = 9) => {
+  let lastCount = 0;
+  return () => {
+    return (lastCount++).toString().padStart(size, '0');
+  };
 };
+
 /**
  *
  * @example
@@ -63,9 +71,11 @@ export const createLinearNumericIdGenerator = (size = 9) => {
  *
  */
 export const generateLinearNumericId = createLinearNumericIdGenerator();
+
 /**
  * Is not recommended to use.
  *
  * Generates execution stack based pseudo-id (just sliced string from error stack)
  */
-export const generateStackBasedId = () => new Error().stack.split('\n').slice(1, 4).join('');
+export const generateStackBasedId = () =>
+  new Error().stack!.split('\n').slice(1, 4).join('');

package/src/imports.ts

@@ -0,0 +1,52 @@
+import { sleep } from './async.js';
+
+/**
+ * Функция ленивой загрузки модуля, с возможностью вызова доп. попыток
+ * @example
+ * ```ts
+ * fetchLazyModule(() => import("./test.ts"), 3) // начнет загрузку test.ts
+ * // Произошла ошибка загрузки test.ts, тогда fetchLazyModule повторно вызовет fn()
+ * // Вызывать будет столько раз сколько указано attempts (по умолчанию 3)
+ * ```
+ */
+export const fetchLazyModule = async <T>(
+  fetchModule: () => Promise<T>,
+  attempts = 3,
+  delay = 1000,
+): Promise<T> => {
+  const attemptsArray = Array.from<typeof fetchModule>({
+    length: attempts,
+  }).fill(fetchModule);
+
+  let lastError: null | Error = null;
+
+  for await (const attempt of attemptsArray) {
+    try {
+      if (lastError !== null) {
+        await sleep(delay);
+      }
+      return await attempt();
+    } catch (error) {
+      lastError = error as Error;
+    }
+  }
+  throw lastError;
+};
+
+export type PackedAsyncModule<T> = Promise<T | { default: T }>;
+
+export const unpackAsyncModule = async <T>(
+  maybeModule: T | PackedAsyncModule<T>,
+): Promise<T> => {
+  if (maybeModule instanceof Promise) {
+    const data = (await maybeModule) as any;
+
+    if ((data as any).default) {
+      return (data as any).default;
+    } else {
+      return data;
+    }
+  }
+
+  return maybeModule;
+};

package/src/math.ts

@@ -0,0 +1,20 @@
+import type { Maybe } from './utils/types.js';
+
+export function degToRad(deg: number) {
+  return deg * (Math.PI / 180);
+}
+export function radToDeg(rad: number) {
+  return rad * (180 / Math.PI);
+}
+
+/**
+ * Получить процент от числа
+ * @example
+ * ```ts
+ * percentFrom(500, 2000) // 25
+ * percentFrom(1000, 2000) // 50
+ * ```
+ */
+export const percentFrom = (value: Maybe<number>, from: Maybe<number>) => {
+  return ((value ?? 0) / (from ?? 0)) * 100 || 0;
+};

package/src/media.ts

@@ -0,0 +1,134 @@
+import { degToRad } from './math.js';
+
+export function blobToBase64(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result as string);
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+
+export const blobToUrl = (urlOrBlob: string | Blob) =>
+  urlOrBlob instanceof Blob ? URL.createObjectURL(urlOrBlob) : urlOrBlob;
+
+export const fileToBlob = (file: File) => {
+  return new Blob([file], { type: file.type });
+};
+
+export const imageToBlob = (
+  imageElement: HTMLImageElement,
+  mimeType: string = 'image/png',
+) => {
+  const canvas = document.createElement('canvas');
+
+  canvas.width = imageElement.naturalWidth || 300;
+  canvas.height = imageElement.naturalHeight || 300;
+
+  canvas.getContext('2d')!.drawImage(imageElement, 0, 0);
+
+  const dataUri = canvas.toDataURL(mimeType, 1);
+  const base64data = dataUri.split(',')[1];
+  const base64MimeType = dataUri.split(';')[0].slice(5);
+
+  const bytes = globalThis.atob(base64data);
+  const buf = new ArrayBuffer(bytes.length);
+  const array = new Uint8Array(buf);
+
+  for (let index = 0; index < bytes.length; index++) {
+    array[index] = bytes.charCodeAt(index);
+  }
+
+  const blob = new Blob([array], { type: base64MimeType });
+
+  return blob;
+};
+
+/**
+ * Загружает и отрисовывает изображение с использованием Image
+ *
+ * @returns {Promise<HTMLImageElement>}
+ */
+export const renderImage = (urlOrBlob: Blob | string) =>
+  new Promise<HTMLImageElement>((resolve, reject) => {
+    const image = new Image();
+    image.src = blobToUrl(urlOrBlob);
+    image.onload = () => resolve(image);
+    image.onerror = () => reject();
+  });
+
+function cropImageFromCanvas(context: CanvasRenderingContext2D) {
+  const canvas = context.canvas;
+  let w = canvas.width;
+  let h = canvas.height;
+  const pix: { x: number[]; y: number[] } = { x: [], y: [] };
+  const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+  let x: number;
+  let y: number;
+  let index: number;
+
+  for (y = 0; y < h; y++) {
+    for (x = 0; x < w; x++) {
+      index = (y * w + x) * 4;
+      if (imageData.data[index + 3] > 0) {
+        pix.x.push(x);
+        pix.y.push(y);
+      }
+    }
+  }
+  pix.x.sort((a, b) => a - b);
+  pix.y.sort((a, b) => a - b);
+  const n = pix.x.length - 1;
+
+  w = 1 + pix.x[n] - pix.x[0];
+  h = 1 + pix.y[n] - pix.y[0];
+  const cut = context.getImageData(pix.x[0], pix.y[0], w, h);
+
+  canvas.width = w;
+  canvas.height = h;
+  context.putImageData(cut, 0, 0);
+  return canvas;
+}
+
+// TODO: ломает iphone с огромными изображениями
+export const rotateImage = (image: HTMLImageElement, angle: number) => {
+  const maxSize = Math.max(image.width, image.height);
+  const canvas = document.createElement('canvas');
+  canvas.width = maxSize;
+  canvas.height = maxSize;
+  const context = canvas.getContext('2d')!;
+  context.save();
+  context.translate(canvas.width / 2, canvas.height / 2);
+  context.rotate(degToRad(angle));
+  context.drawImage(image, -image.width / 2, -image.height / 2);
+  context.restore();
+  cropImageFromCanvas(context);
+  return renderImage(canvas.toDataURL('image/png'));
+};
+
+interface DecodedDataUrl {
+  mimeType?: string;
+  data?: string;
+}
+
+/*
+ * Returning object which contains base64 data and mime type of passed data url string.
+ * */
+export function decodeDataUrl(url: string): DecodedDataUrl {
+  const regex = /^data:(.*);base64,\s?(.*)$/;
+  const matches = new RegExp(regex).exec(url);
+
+  return {
+    mimeType: matches?.[1],
+    data: matches?.[2],
+  };
+}
+
+export const isHttpUrl = (url: string): boolean => {
+  return url.startsWith('https://') || url.startsWith('http://');
+};
+
+export const isBase64Image = (str: string): boolean => {
+  const { mimeType, data } = decodeDataUrl(str);
+  return !!(data && mimeType?.startsWith('image/'));
+};

package/src/mobx/apply-observable.ts

@@ -0,0 +1,20 @@
+import { makeObservable } from 'mobx';
+import type { AnyObject } from '../utils/types.js';
+
+export type ObservableAnnotationsArray = [string, any][];
+
+export const applyObservable = (
+  context: AnyObject,
+  annotationsArray: ObservableAnnotationsArray,
+  useDecorators?: boolean,
+) => {
+  if (useDecorators) {
+    annotationsArray.forEach(([field, annotation]) => {
+      annotation(context, field);
+    });
+
+    makeObservable(context);
+  } else {
+    makeObservable(context, Object.fromEntries(annotationsArray));
+  }
+};

package/src/mobx/create-enhanced-atom.ts

@@ -0,0 +1,28 @@
+import { createAtom, type IAtom } from 'mobx';
+import type { AnyObject } from '../utils/types.js';
+
+export interface IEnhancedAtom<TMeta extends AnyObject = AnyObject>
+  extends IAtom {
+  meta: TMeta;
+}
+
+/**
+ * Creates an enhanced atom with meta data
+ * And bind `reportChanged` and `reportObserved` method to the atom
+ */
+export const createEnhancedAtom = <TMeta extends AnyObject>(
+  name: string,
+  onBecomeObservedHandler?: (atom: IEnhancedAtom<TMeta>) => void,
+  onBecomeUnobservedHandler?: (atom: IEnhancedAtom<TMeta>) => void,
+  meta?: TMeta,
+): IEnhancedAtom<TMeta> => {
+  const atom = createAtom(
+    name,
+    onBecomeObservedHandler && (() => onBecomeObservedHandler?.(atom)),
+    onBecomeUnobservedHandler && (() => onBecomeUnobservedHandler?.(atom)),
+  ) as IEnhancedAtom<TMeta>;
+  atom.meta = meta ?? ({} as TMeta);
+  atom.reportChanged = atom.reportChanged.bind(atom);
+  atom.reportObserved = atom.reportObserved.bind(atom);
+  return atom;
+};