yummies 5.4.4 → 5.4.6

package/src/react/hooks/use-flag.ts

@@ -0,0 +1,27 @@
+import { useCallback, useRef, useState } from 'react';
+
+export interface FlagHook {
+  enabled: boolean;
+  toggle: VoidFunction;
+  enable: VoidFunction;
+  disable: VoidFunction;
+}
+
+export const useFlag = (defaultValue = false): FlagHook => {
+  const [enabled, setEnabled] = useState(defaultValue);
+
+  const toggle = useCallback(() => setEnabled((value) => !value), []);
+  const enable = useCallback(() => setEnabled(true), []);
+  const disable = useCallback(() => setEnabled(false), []);
+
+  const flagObjRef = useRef<FlagHook>({
+    enabled,
+    toggle,
+    enable,
+    disable,
+  });
+
+  flagObjRef.current.enabled = enabled;
+
+  return flagObjRef.current;
+};

package/src/react/hooks/use-force-update.ts

@@ -0,0 +1,9 @@
+import { useCallback, useState } from 'react';
+
+export const useForceUpdate = () => {
+  const [, setState] = useState<unknown>(null);
+
+  return useCallback(() => {
+    setState({});
+  }, []);
+};

package/src/react/hooks/use-initial-height.ts

@@ -0,0 +1,16 @@
+import { useEffect, useRef, useState } from 'react';
+
+export const useInitialHeight = <T extends HTMLElement>() => {
+  const ref = useRef<T | null>(null);
+  const [initialHeight, setInitialHeight] = useState<number | undefined>(
+    undefined,
+  );
+
+  useEffect(() => {
+    if (ref.current && !initialHeight) {
+      setInitialHeight(ref.current.offsetHeight);
+    }
+  }, [initialHeight]);
+
+  return { ref, initialHeight };
+};

package/{dist/react/hooks/use-instance.js → src/react/hooks/use-instance.ts}

@@ -1,18 +1,40 @@
 import { useLayoutEffect } from 'react';
-import { useAbortSignal } from "./use-abort-signal.js";
-import { useConstant } from "./use-constant.js";
-export const createUseInstanceHook = (extension) => (factory, config) => {
+import { useAbortSignal } from './use-abort-signal.js';
+import { useConstant } from './use-constant.js';
+
+export type InstanceCreateConfig<TPayload, TExtension = {}> = TExtension & {
+  abortSignal: AbortSignal;
+  payload: TPayload;
+};
+
+export const createUseInstanceHook =
+  <TExtension = {}>(extension?: TExtension) =>
+  <TInstance, TPayload>(
+    factory: (
+      config: InstanceCreateConfig<NoInfer<TPayload>, TExtension>,
+    ) => TInstance,
+    config?: {
+      payload?: TPayload;
+      onUpdate?: (payload: TPayload) => void;
+    },
+  ) => {
     const abortSignal = useAbortSignal();
-    const instance = useConstant(() => factory({
-        ...extension,
+
+    const instance = useConstant(() =>
+      factory({
+        ...(extension as TExtension),
         abortSignal,
-        payload: config?.payload,
-    }));
+        payload: config?.payload as any,
+      }),
+    );
+
     useLayoutEffect(() => {
-        config?.onUpdate?.(config.payload);
+      config?.onUpdate?.(config.payload!);
     }, [config?.payload]);
+
     return instance;
-};
+  };
+
 /**
  * The `useInstance` hook is used to create and manage an instance of an object
  * that requires access to the root store and an abort signal.

package/src/react/hooks/use-intersection-observer.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+
+export const useIntersectionObserver = (
+  callback: IntersectionObserverCallback,
+  options?: IntersectionObserverInit,
+) => {
+  const [intersectionObserver] = useState(
+    () => new IntersectionObserver(callback, options),
+  );
+
+  useEffect(() => {
+    return () => {
+      intersectionObserver.disconnect();
+    };
+  }, []);
+
+  return intersectionObserver;
+};

package/src/react/hooks/use-last-defined-value.ts

@@ -0,0 +1,9 @@
+import { useRef } from 'react';
+
+export const useLastDefinedValue = <T>(value: T) => {
+  const ref = useRef(value);
+  if (value != null) {
+    ref.current = value;
+  }
+  return ref.current;
+};

package/src/react/hooks/use-last-value-ref.ts

@@ -0,0 +1,11 @@
+import { useRef } from 'react';
+
+export const useLastValueRef = <T>(value: T | null | undefined) => {
+  const ref = useRef(value);
+
+  if (value != null) {
+    ref.current = value;
+  }
+
+  return ref;
+};

package/src/react/hooks/use-life-cycle.ts

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import { useSyncRef } from './use-sync-ref.js';
+
+export const useLifeCycle = (
+  fn: () => {
+    mount?: VoidFunction;
+    unmount?: VoidFunction;
+  },
+) => {
+  const fnRef = useSyncRef(fn);
+
+  useEffect(() => {
+    const fnOperation = fnRef.current();
+    fnOperation.mount?.();
+    return fnOperation.unmount?.();
+  }, []);
+};

package/src/react/hooks/use-resize-observer.ts

@@ -0,0 +1,14 @@
+import { useLayoutEffect } from 'react';
+import { useDefineRef } from './use-define-ref.js';
+
+export const useResizeObserver = (callback: ResizeObserverCallback) => {
+  const resizeObserverRef = useDefineRef(() => new ResizeObserver(callback));
+
+  useLayoutEffect(() => {
+    return () => {
+      resizeObserverRef.current.disconnect();
+    };
+  }, []);
+
+  return resizeObserverRef;
+};

package/src/react/hooks/use-sync-ref.ts

@@ -0,0 +1,7 @@
+import { useRef } from 'react';
+
+export const useSyncRef = <T>(value: T) => {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+};

package/src/react/hooks/use-toggle.ts

@@ -0,0 +1,9 @@
+import { useCallback, useState } from 'react';
+
+export const useToggle = (initialState?: boolean) => {
+  const [toggled, setToggled] = useState(!!initialState);
+
+  const toggle = useCallback(() => setToggled((toggled) => !toggled), []);
+
+  return [toggled, toggle, setToggled] as const;
+};

package/src/react/hooks/use-value.ts

@@ -0,0 +1,10 @@
+import { useState } from 'react';
+
+export const useValue = <T>(defaults: T | (() => T)) => {
+  const [value, setValue] = useState<T>(defaults);
+
+  return {
+    value,
+    set: setValue,
+  };
+};

package/src/react/hooks/use-visibility-state.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+export const useVisibilityState = () => {
+  const [state, setState] = useState<DocumentVisibilityState>();
+
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      setState(document.visibilityState);
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, []);
+
+  return state;
+};

package/src/react/index.ts

@@ -0,0 +1 @@
+export * from './hooks/index.js';

package/src/sound.ts

@@ -0,0 +1,15 @@
+/**
+ * Воспроизводит звук из файла
+ */
+export const playSound = async (
+  file: string,
+  { volume = 1 }: { volume?: number } = {},
+) => {
+  let audio = new Audio(file);
+  audio.volume = volume;
+  audio.muted = !volume;
+  await audio.play();
+  audio.remove();
+  // @ts-expect-error
+  audio = null;
+};

package/src/storage.ts

@@ -0,0 +1,137 @@
+export type StorageType = 'session' | 'local';
+
+const storages: Record<StorageType, Storage> = {
+  session: sessionStorage,
+  local: localStorage,
+};
+
+export const createStorageKey = (
+  prefix: string,
+  key: string,
+  namespace?: string,
+) => `${prefix}${namespace ? `/${namespace}` : ''}/${key}`;
+
+const parseStorageValue = <V>(value: unknown): V | null => {
+  if (typeof value !== 'string') {
+    return value as V;
+  }
+
+  try {
+    const parsed = JSON.parse(value);
+    return parsed;
+  } catch {
+    return null;
+  }
+};
+
+const formatValueToStorage = (value: unknown): string => {
+  return JSON.stringify(value);
+};
+
+export interface SetToStorageConfig<V>
+  extends Omit<GetFromStorageConfig<V>, 'fallback'> {
+  value: V;
+}
+
+export interface GetFromStorageConfig<V> {
+  /**
+   * Ключ по которому можно получить значение из хранилища (имя ключа не полное, оно дополняется неймпспейсом проекта)
+   */
+  key: string;
+  /**
+   * Тип хранилища
+   */
+  type: StorageType;
+  /**
+   * дефолтное значение, которое будет использоваться если значения нет в хранилище
+   */
+  fallback?: V;
+  /**
+   * Доп. делитель в ключ/utils/types'е
+   */
+  namespace?: string;
+  /**
+   * Доп. делитель
+   */
+  prefix?: string;
+}
+
+export type SetToStorageWrappedConfig<
+  V,
+  BaseConfig extends StorageConfigBase,
+> = Omit<
+  SetToStorageConfig<V>,
+  Extract<keyof SetToStorageConfig<V>, keyof BaseConfig>
+> &
+  Partial<
+    Pick<
+      SetToStorageConfig<V>,
+      Extract<keyof SetToStorageConfig<V>, keyof BaseConfig>
+    >
+  > &
+  Pick<BaseConfig, Exclude<keyof BaseConfig, keyof SetToStorageConfig<V>>>;
+
+export type GetFromStorageWrappedConfig<
+  V,
+  BaseConfig extends StorageConfigBase,
+> = Omit<
+  GetFromStorageConfig<V>,
+  Extract<keyof GetFromStorageConfig<V>, keyof BaseConfig>
+> &
+  Partial<
+    Pick<
+      GetFromStorageConfig<V>,
+      Extract<keyof GetFromStorageConfig<V>, keyof BaseConfig>
+    >
+  > &
+  Pick<BaseConfig, Exclude<keyof BaseConfig, keyof GetFromStorageConfig<V>>>;
+
+export type StorageConfigBase = Partial<
+  Pick<GetFromStorageConfig<any>, 'prefix' | 'type'>
+>;
+
+export interface StorageApi<BaseConfig extends StorageConfigBase> {
+  set<Value>(config: SetToStorageWrappedConfig<Value, BaseConfig>): void;
+  get<Value>(
+    config: GetFromStorageWrappedConfig<Value, BaseConfig>,
+  ): Value | null;
+}
+
+/**
+ * Создает интерфейс для работы с хранилищем (localStorage, sessionStorage)
+ */
+export function createStorage<BaseConfig extends StorageConfigBase>(
+  storageConfig: BaseConfig,
+): StorageApi<BaseConfig> {
+  return {
+    set: <Value>(cfg: SetToStorageWrappedConfig<Value, BaseConfig>) => {
+      const config = cfg as unknown as SetToStorageConfig<Value>;
+      const storageType = (config.type ?? storageConfig.type!) as StorageType;
+      const storagePrefix = (config.prefix ?? storageConfig.prefix!) as string;
+
+      const storage = storages[storageType];
+
+      storage.setItem(
+        createStorageKey(storagePrefix, config.key, config.namespace),
+        formatValueToStorage(config.value),
+      );
+    },
+    get: <Value>(cfg: GetFromStorageWrappedConfig<Value, BaseConfig>) => {
+      const config = cfg as unknown as GetFromStorageConfig<Value>;
+      const storageType = (config.type ?? storageConfig.type!) as StorageType;
+      const storagePrefix = (config.prefix ?? storageConfig.prefix!) as string;
+
+      const storage = storages[storageType];
+
+      return (
+        parseStorageValue<Value>(
+          storage.getItem(
+            createStorageKey(storagePrefix, config.key, config.namespace),
+          ),
+        ) ??
+        config.fallback ??
+        null
+      );
+    },
+  } as const;
+}

package/src/text.test.ts

@@ -0,0 +1,91 @@
+import { describe, expect, test } from 'vitest';
+
+import { splitTextByLines } from './text.js';
+
+describe('text', () => {
+  describe('splitTextByLines', () => {
+    const testCases: {
+      input: Parameters<typeof splitTextByLines>;
+      expected: ReturnType<typeof splitTextByLines>;
+    }[] = [
+      {
+        input: [
+          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi pariatur magnam excepturi nesciunt tempora deserunt? Pariatur sit quam, ducimus molestias quia aut maxime eligendi repudiandae expedita repellat, harum dignissimos aliquam.',
+          60,
+        ],
+        expected: [
+          'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+          'Commodi pariatur magnam excepturi nesciunt tempora deserunt?',
+          'Pariatur sit quam, ducimus molestias quia aut maxime',
+          'eligendi repudiandae expedita repellat, harum dignissimos',
+          'aliquam.',
+        ],
+      },
+      {
+        input: ['', 60],
+        expected: [''],
+      },
+      {
+        input: [
+          'Supercalifragilisticexpialidocious is a long word that needs splitting',
+          20,
+        ],
+        expected: [
+          'Supercalifragilistic',
+          'expialidocious',
+          'is a long word that',
+          'needs splitting',
+        ],
+      },
+      {
+        input: [
+          '   Multiple    spaces     and    tabs\t\tbetween\twords   ',
+          15,
+        ],
+        expected: ['Multiple spaces', 'and tabs', 'between words'],
+      },
+      {
+        input: [
+          'Precise-length testing with exact match requirements for assessment',
+          20,
+        ],
+        expected: [
+          'Precise-length',
+          'testing with exact',
+          'match requirements',
+          'for assessment',
+        ],
+      },
+      {
+        input: [
+          `Special characters: @#$%^&*()_+={}[]|\\:";'<>?,./ and backticks \`code\` should work!`,
+          30,
+        ],
+        expected: [
+          'Special characters:',
+          String.raw`@#$%^&*()_+={}[]|\:";'<>?,./`,
+          'and backticks `code` should',
+          'work!',
+        ],
+      },
+      {
+        input: ['ThisIsACombinedWordThatExceedsLimit and normal words', 15],
+        expected: [
+          'ThisIsACombined',
+          'WordThatExceeds',
+          'Limit',
+          'and normal',
+          'words',
+        ],
+      },
+    ];
+
+    testCases.forEach((testCase, i) => {
+      test(`test case #${i + 1}`, () => {
+        expect(splitTextByLines(...testCase.input)).toStrictEqual(
+          testCase.expected,
+        );
+      });
+    });
+  });
+});

package/src/text.ts

@@ -0,0 +1,60 @@
+/**
+ * Склонение слова в зависимости от количества
+ * @example
+ * declension(1, ['слово', 'слова', 'слов']) // 'слово'
+ * @example
+ * declension(2, ['слово', 'слова', 'слов']) // 'слова'
+ * @example
+ * declension(5, ['слово', 'слова', 'слов']) // 'слов'
+ */
+export const declension = (
+  count: number,
+  txt: readonly [one: string, two: string, five: string],
+  cases = [2, 0, 1, 1, 1, 2],
+) =>
+  txt[count % 100 > 4 && count % 100 < 20 ? 2 : cases[Math.min(count % 10, 5)]];
+
+/**
+ * Разбиение текста на линии
+ */
+export const splitTextByLines = (
+  text: string,
+  lineLingth: number = 60,
+): string[] => {
+  const words = text.split(/\s+/).filter((word) => word !== '');
+  const lines = [];
+  let currentLine = '';
+
+  for (const word of words) {
+    if (word.length > lineLingth) {
+      if (currentLine !== '') {
+        lines.push(currentLine);
+        currentLine = '';
+      }
+
+      let start = 0;
+      while (start < word.length) {
+        const chunk = word.slice(start, start + lineLingth);
+        lines.push(chunk);
+        start += lineLingth;
+      }
+      continue;
+    }
+
+    // Проверка возможности добавления слова в текущую строку
+    if (currentLine === '') {
+      currentLine = word;
+    } else if (currentLine.length + 1 + word.length <= lineLingth) {
+      currentLine += ` ${word}`;
+    } else {
+      lines.push(currentLine);
+      currentLine = word;
+    }
+  }
+
+  if (currentLine !== '' || lines.length === 0) {
+    lines.push(currentLine);
+  }
+
+  return lines;
+};

package/src/type-guard/_exports.ts

@@ -0,0 +1,154 @@
+import type { AnyFunction, AnyObject } from '../utils/types.js';
+
+enum Type {
+  Null = 'null',
+  Undefined = 'undefined',
+  NaN = 'nan',
+  Object = '[object Object]',
+  Array = '[object Array]',
+  String = '[object String]',
+  Number = '[object Number]',
+  Boolean = '[object Boolean]',
+  Function = '[object Function]',
+  RegExp = '[object RegExp]',
+  Symbol = '[object Symbol]',
+  Infinite = 'infinite',
+  Element = 'element',
+}
+
+function getType(value: unknown): Type {
+  if (value === undefined) {
+    return Type.Undefined;
+  }
+  if (value === null) {
+    return Type.Null;
+  }
+
+  // handle DOM elements
+  // @ts-expect-error
+  if (value && (value.nodeType === 1 || value.nodeType === 9)) {
+    return Type.Element;
+  }
+
+  const stringifiedValue = Object.prototype.toString.call(value);
+
+  // handle NaN and Infinity
+  if (stringifiedValue === Type.Number) {
+    if (Number.isNaN(value as number)) {
+      return Type.NaN;
+    }
+    if (!Number.isFinite(value as number)) {
+      return Type.Infinite;
+    }
+  }
+
+  return stringifiedValue as Type;
+}
+
+const createTypeGuard =
+  <T>(type: Type) =>
+  (value: unknown): value is T =>
+    getType(value) === type;
+
+/**
+ * Check if a value is not null or undefined
+ * @param value the value to check
+ * @returns boolean
+ */
+export const isDefined = <T>(value: T | undefined | null): value is T =>
+  value != null;
+
+/**
+ * Check if a value is null
+ * @param value the value to check
+ * @returns boolean
+ */
+export const isNull = createTypeGuard<null>(Type.Null);
+
+/**
+ * Check if a value is undefined
+ * @param value the value to check
+ * @returns boolean
+ */
+export const isUndefined = createTypeGuard<undefined>(Type.Undefined);
+
+/**
+ * Check if a value is an object
+ * @param value the value to check
+ * @returns boolean
+ */
+export const isObject = createTypeGuard<AnyObject>(Type.Object);
+
+/**
+ * Check if a value is an array
+ * @param value the value to check
+ * @returns boolean
+ */
+export const isArray = createTypeGuard<unknown[]>(Type.Array);
+
+/**
+ * Check if a value is a string
+ * @param value the value to check
+ * @returns boolean
+ */
+export const isString = createTypeGuard<string>(Type.String);
+
+/**
+ * Check if a value is a number
+ * @param value the value to check
+ * @returns boolean
+ */
+export const isNumber = createTypeGuard<number>(Type.Number);
+
+/**
+ * Check if a value is a boolean
+ * @param value the value to check
+ * @returns boolean
+ */
+export const isBoolean = createTypeGuard<boolean>(Type.Boolean);
+
+/**
+ * Check if a value is a function
+ * @param value the value to check
+ * @returns boolean
+ */
+export const isFunction = createTypeGuard<AnyFunction>(Type.Function);
+
+/**
+ * Check if a value is a regular expression
+ * @param value the value to check
+ * @returns boolean
+ */
+export const isRegExp = createTypeGuard<RegExp>(Type.RegExp);
+
+/**
+ * Check if a value is a DOM element
+ * @param value the value to check
+ * @returns boolean
+ */
+export const isElement = createTypeGuard<HTMLElement>(Type.Element);
+
+/**
+ * Check if a value is NaN
+ * @param value the value to check
+ * @returns boolean
+ */
+export const isNaN = createTypeGuard<number>(Type.NaN) as (
+  value: unknown,
+) => boolean;
+
+/**
+ * Check if a value is infinity
+ * @param value the value to check
+ * @returns boolean
+ */
+export const isInfinite = createTypeGuard<number>(Type.Infinite) as (
+  value: unknown,
+) => boolean;
+
+/**
+ * Check if a value is a symbol
+ * @param value the value to check
+ * @returns boolean
+ */
+export const isSymbol = createTypeGuard<symbol>(Type.Symbol);