vevet 4.4.2 → 5.0.0

package/src/components/Timeline/stories/Basic.tsx

@@ -1,89 +0,0 @@
-import React, { FC, useEffect, useRef, useState } from 'react';
-import { Timeline } from '..';
-import { EaseInOutBounce } from '@/utils/math';
-
-export const Basic: FC = () => {
-  const thumbRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const [timeline, setTimeline] = useState<Timeline>();
-
-  useEffect(() => {
-    const instance = new Timeline({
-      duration: 3500,
-      easing: EaseInOutBounce,
-    });
-
-    setTimeline(instance);
-
-    instance.addCallback('progress', ({ e, p }) => {
-      if (inputRef.current) {
-        inputRef.current.value = `${p}`;
-      }
-
-      if (thumbRef.current) {
-        thumbRef.current.style.left = `${e * 100}%`;
-      }
-    });
-
-    return () => instance.destroy();
-  }, []);
-
-  return (
-    <>
-      <button type="button" onClick={() => timeline?.play()}>
-        Play
-      </button>
-
-      <button type="button" onClick={() => timeline?.pause()}>
-        Pause
-      </button>
-
-      <button type="button" onClick={() => timeline?.reverse()}>
-        Reverse
-      </button>
-
-      <button type="button" onClick={() => timeline?.reset()}>
-        Reset
-      </button>
-
-      <input
-        ref={inputRef}
-        type="range"
-        min={0}
-        max={1}
-        defaultValue={0}
-        step={0.0001}
-        style={{ width: '100%' }}
-        onChange={(event) => {
-          if (timeline) {
-            timeline.p = parseFloat(event.currentTarget.value);
-          }
-        }}
-      />
-
-      <div
-        style={{
-          position: 'relative',
-          marginTop: '10px',
-          width: '100%',
-          height: '20px',
-          backgroundColor: '#dedede',
-        }}
-      >
-        <div
-          ref={thumbRef}
-          style={{
-            position: 'absolute',
-            top: '-5px',
-            left: 0,
-            width: '10px',
-            height: '30px',
-            transform: 'translate(-50%, 0)',
-            backgroundColor: '#000',
-          }}
-        />
-      </div>
-    </>
-  );
-};

package/src/components/Timeline/stories/index.stories.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import type { Meta, StoryFn } from '@storybook/react';
-import { Basic } from './Basic';
-
-const meta: Meta = {
-  title: 'Components/Timeline',
-};
-
-export default meta;
-
-export const Default: StoryFn<typeof Basic> = (props) => <Basic {...props} />;

package/src/styles/base.scss

@@ -1 +0,0 @@
-@import './mixins/index';

package/src/styles/components/CustomCursor.scss

@@ -1,60 +0,0 @@
-@import '../mixins/index';
-
-$custom-cursor-alpha-duration: 0.25s !default;
-$custom-cursor-scale-duration: 0.5s !default;
-$custom-cursor-alpha: 0.5 !default;
-$custom-cursor-color: #000 !default;
-
-.v-custom-cursor-container {
-  &.v-custom-cursor-hide-default-cursor {
-    cursor: none;
-
-    * {
-      cursor: none;
-    }
-  }
-}
-
-.v-custom-cursor {
-  --cursor-w: 50px;
-  --cursor-h: 50px;
-
-  &.v-custom-cursor-in-window {
-    position: fixed;
-  }
-
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-  z-index: 999;
-  pointer-events: none;
-
-  @include transition(opacity $custom-cursor-alpha-duration);
-  opacity: 0;
-
-  &.v-custom-cursor-in-action {
-    opacity: 1;
-  }
-
-  &.v-custom-cursor-disabled {
-    opacity: 0;
-  }
-    
-  &__inner {
-    width: var(--cursor-w);
-    height: var(--cursor-h);
-    margin-left: calc(var(--cursor-w) / -2);
-    margin-top: calc(var(--cursor-h) / -2);
-
-    background-color: $custom-cursor-color;
-    opacity: $custom-cursor-alpha;
-
-    @include transition(transform $custom-cursor-scale-duration);
-
-    &.v-custom-cursor-click {
-      transform: scale(0.75);
-    }
-  }
-}

package/src/styles/components/CustomScroll.scss

@@ -1,20 +0,0 @@
-@import '../mixins/index';
-
-.v-custom-scroll {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-
-  &__wrapper {
-    &.v-custom-scroll_vertical {
-      width: 100%;
-      height: auto;
-    }
-
-    &.v-custom-scroll_horizontal {
-      width: max-content;
-      height: 100%;
-    }
-  }
-}

package/src/styles/components/Preloader.scss

@@ -1,13 +0,0 @@
-@import '../mixins/index';
-
-$preloader-bg-color: #000 !default;
-
-.v-preloader {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-  background-color: $preloader-bg-color;
-}

package/src/styles/components/ScrollBar.scss

@@ -1,69 +0,0 @@
-@import '../mixins/index';
-
-$scrollbar-color: #babac0 !default;
-$scrollbar-duration: 0.5s !default;
-$scrollbar-gap: 3px !default;
-$scrollbar-track-size: 10px !default;
-$scrollbar-thumb-size: 50px !default;
-$scrollbar-thumb-radius: 5px !default;
-
-.v-scrollbar-parent {
-  @include hide-scroll-bars;
-}
-
-.v-scrollbar {
-  position: absolute;
-  z-index: 9;
-
-  &_in-window {
-    position: fixed;
-  }
-
-  &_is-empty {
-    display: none;
-  }
-
-  &_auto-hide {
-    opacity: 0;
-    @include transition(opacity $scrollbar-duration);
-
-    &.v-scrollbar_is-hovered,
-    &.v-scrollbar_in-action {
-      opacity: 1;
-    }
-  }
-
-  &_x {
-    bottom: $scrollbar-gap;
-    left: $scrollbar-gap;
-    width: calc(100% - #{$scrollbar-gap * 2});
-    height: $scrollbar-track-size;
-  }
-    
-  &_y {
-    top: $scrollbar-gap;
-    right: $scrollbar-gap;
-    width: $scrollbar-track-size;
-    height: calc(100% - #{$scrollbar-gap * 2});
-  }
-
-  &__thumb {
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-color: $scrollbar-color;
-    border-radius: $scrollbar-thumb-radius;
-
-    cursor: pointer;
-
-    &_x {
-      width: $scrollbar-thumb-size;
-      height: 100%;
-    }
-
-    &_y {
-      width: 100%;
-      height: $scrollbar-thumb-size;
-    }
-  }
-}

package/src/styles/components/index.scss

@@ -1,4 +0,0 @@
-@import './CustomCursor';
-@import './Preloader';
-@import './ScrollBar';
-@import './CustomScroll';

package/src/styles/mixins/_scroll.scss

@@ -1,11 +0,0 @@
-@mixin hide-scroll-bars {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-    appearance: none;
-    width: 0;
-    height: 0;
-  }
-}

package/src/styles/mixins/_transition.scss

@@ -1,19 +0,0 @@
-$transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1) !default;
-
-@mixin transition (
-  $duration: 1.25s, 
-  $delay: 0s
-) {
-  transition: #{$duration};
-  transition-delay: #{$delay};
-  transition-timing-function: $transition-timing-function;
-}
-
-@mixin transition-animation (
-  $duration: 1.25s, 
-  $delay: 0s
-) {
-  animation-duration: #{$duration};
-  animation-delay: #{$delay};
-  animation-timing-function: $transition-timing-function;
-}

package/src/styles/mixins/_viewport.scss

@@ -1,32 +0,0 @@
-$viewport-phone: 899px !default;
-$viewport-tablet: 1199px !default;
-
-@mixin viewport-desktop () {
-  @media (min-width: ($viewport-tablet + 0.001)) {
-    @content;
-  }
-}
-
-@mixin viewport-tablet () {
-  @media (min-width: ($viewport-phone + 0.001)) and (max-width: $viewport-tablet) {
-    @content;
-  }
-}
-
-@mixin viewport-tablet-max () {
-  @media (max-width: $viewport-tablet) {
-    @content;
-  }
-}
-
-@mixin viewport-tablet-min () {
-  @media (min-width: ($viewport-phone + 0.001)) {
-    @content;
-  }
-}
-
-@mixin viewport-phone () {
-  @media (max-width: $viewport-phone) {
-    @content;
-  }
-}

package/src/styles/mixins/index.scss

@@ -1,3 +0,0 @@
-@import './scroll';
-@import './transition';
-@import './viewport';

package/src/types/general.ts

@@ -1,17 +0,0 @@
-export interface IRemovable {
-  remove: () => void;
-}
-
-export interface IDestroyable {
-  destroy: () => void;
-}
-
-export interface IScrollLike {
-  scrollWidth: number;
-  scrollHeight: number;
-  clientWidth: number;
-  clientHeight: number;
-  scrollTop: number;
-  scrollLeft: number;
-  scrollTo(options: ScrollToOptions): void;
-}

package/src/types/index.ts

@@ -1,2 +0,0 @@
-export * from './general';
-export * from './utility';

package/src/types/utility.ts

@@ -1,49 +0,0 @@
-export interface IModuleLike {
-  prop: any;
-  prefix: string;
-  name: string;
-  destroy: () => void;
-}
-
-export declare type TPrimitive =
-  | string
-  | number
-  | boolean
-  | bigint
-  | symbol
-  | undefined
-  | null;
-
-export declare type TBuiltin =
-  | TPrimitive
-  | Function
-  | Date
-  | Error
-  | RegExp
-  | Element
-  | Window
-  | IModuleLike;
-
-export declare type TDeepRequired<T> = T extends TBuiltin
-  ? NonNullable<T>
-  : T extends Map<infer K, infer V>
-    ? Map<TDeepRequired<K>, TDeepRequired<V>>
-    : T extends ReadonlyMap<infer K, infer V>
-      ? ReadonlyMap<TDeepRequired<K>, TDeepRequired<V>>
-      : T extends WeakMap<infer K, infer V>
-        ? WeakMap<TDeepRequired<K>, TDeepRequired<V>>
-        : T extends Set<infer U>
-          ? Set<TDeepRequired<U>>
-          : T extends ReadonlySet<infer U>
-            ? ReadonlySet<TDeepRequired<U>>
-            : T extends WeakSet<infer U>
-              ? WeakSet<TDeepRequired<U>>
-              : T extends Promise<infer U>
-                ? Promise<TDeepRequired<U>>
-                : T extends {}
-                  ? {
-                      [K in keyof T]-?: TDeepRequired<T[K]>;
-                    }
-                  : NonNullable<T>;
-
-export declare type TRequiredModuleProp<T> = TDeepRequired<T>;

package/src/utils/common/PCancelable.ts

@@ -1,20 +0,0 @@
-import PCancelable from 'p-cancelable-cjs';
-
-export { PCancelable };
-
-/**
- * This module imports and re-exports the `PCancelable` class from the `p-cancelable-cjs` package.
- *
- * `PCancelable` provides a way to create promises that can be canceled. It is useful in scenarios where
- * you want to cancel an ongoing asynchronous operation before it finishes.
- *
- * @example
- * const p = new PCancelable((resolve, reject, onCancel) => {
- *   const timeout = setTimeout(resolve, 1000);
- *   onCancel(() => clearTimeout(timeout));
- * });
- *
- * p.cancel(); // Cancels the operation
- *
- * @see {@link https://github.com/antonbobrov/p-cancelable}
- */

package/src/utils/common/normalizedTimeoutCallback.ts

@@ -1,41 +0,0 @@
-/**
- * Launches a function after a specified delay. If the `delay` is zero,
- * the callback is executed immediately (synchronously).
- *
- * @param callback - The function to be executed after the delay.
- * @param delay - The amount of time (in milliseconds) to wait before executing the callback.
- * If the delay is `0`, the callback will be executed synchronously.
- *
- * @returns {Object} An object with a `clear` method that can be used to cancel the timeout.
- *
- * @example
- * // Executes the callback after 1 second (1000 milliseconds).
- * normalizedTimeoutCallback(() => {
- *   console.log('Executed after 1 second');
- * }, 1000);
- *
- * // Executes the callback immediately.
- * normalizedTimeoutCallback(() => {
- *   console.log('Executed synchronously');
- * }, 0);
- */
-export function normalizedTimeoutCallback(callback: Function, delay: number) {
-  let timeout: NodeJS.Timeout | undefined;
-
-  if (delay === 0) {
-    callback();
-  } else {
-    timeout = setTimeout(() => callback(), delay);
-  }
-
-  return {
-    /**
-     * Clears the timeout if it was set.
-     */
-    clear: () => {
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-    },
-  };
-}

package/src/utils/dom/addEventListener.ts

@@ -1,37 +0,0 @@
-/**
- * A utility function to add an event listener to a specified element.
- *
- * This function adds an event listener for the specified event type and
- * returns a function that can be called to remove the event listener.
- *
- * @param element - The target element to which the event listener will be attached.
- * @param target - The name of the event to listen for (e.g., 'click', 'scroll').
- * @param listener - The callback function to execute when the event occurs.
- * @param options - Optional parameters for the event listener.
- *
- * @example
- * const button = document.getElementById('myButton');
- * const removeClickListener = addEventListener(button, 'click', (event) => {
- *   console.log('Button clicked!');
- * });
- *
- * // To remove the event listener later
- * removeClickListener();
- */
-export function addEventListener<
-  Target extends keyof HTMLElementEventMap,
-  Listener extends (event: DocumentEventMap[Target]) => void,
->(
-  element: Document | Element | Window,
-  target: Target,
-  listener: Listener,
-  options?: boolean | AddEventListenerOptions,
-) {
-  element.addEventListener(target, listener as any, options);
-
-  const remove = () => {
-    element.removeEventListener(target, listener as any, options);
-  };
-
-  return remove;
-}

package/src/utils/dom/childOf.ts

@@ -1,15 +0,0 @@
-function childOfCheck(el: Element, parent: Element): boolean {
-  if (el === parent) {
-    return true;
-  }
-
-  if (el !== null) {
-    return childOfCheck(el.parentNode as Element, parent);
-  }
-
-  return false;
-}
-
-export function childOf(element: Element, parent: Element) {
-  return childOfCheck(element, parent);
-}

package/src/utils/dom/isElement.ts

@@ -1,3 +0,0 @@
-export function isElement(element: any): element is Element {
-  return element instanceof Element;
-}

package/src/utils/dom/isWindow.ts

@@ -1,3 +0,0 @@
-export function isWindow(element: any): element is Window {
-  return element instanceof Window;
-}

package/src/utils/dom/selectAll.ts

@@ -1,42 +0,0 @@
-import { isElement } from './isElement';
-import { selectOne } from './selectOne';
-
-export type TSelectAll = string | NodeList | Element | Element[];
-
-type TNodeListByTagName<T extends keyof HTMLElementTagNameMap> = NodeListOf<
-  HTMLElementTagNameMap[T]
->;
-
-export function selectAll<T extends TSelectAll | keyof HTMLElementTagNameMap>(
-  selector: T,
-  parent?: Element | string,
-): T extends Element[]
-  ? Element[]
-  : T extends Element
-    ? Element[]
-    : T extends keyof HTMLElementTagNameMap
-      ? TNodeListByTagName<T>
-      : NodeListOf<Element> {
-  if (selector instanceof NodeList) {
-    return selector as any;
-  }
-
-  if (isElement(selector)) {
-    return [selector] as any;
-  }
-
-  if (Array.isArray(selector)) {
-    return selector as any;
-  }
-
-  // if string
-  if (typeof parent !== 'undefined') {
-    const parenElement = selectOne(parent);
-
-    if (parenElement) {
-      return parenElement.querySelectorAll(selector) as any;
-    }
-  }
-
-  return document.querySelectorAll(selector) as any;
-}

package/src/utils/dom/selectOne.ts

@@ -1,31 +0,0 @@
-import { isElement } from './isElement';
-import { isWindow } from './isWindow';
-
-export type TSelectOne = string | Element | Window;
-
-export function selectOne<T extends TSelectOne | keyof HTMLElementTagNameMap>(
-  selector: T,
-  parent?: Element | string,
-): T extends Window
-  ? Window
-  : T extends keyof HTMLElementTagNameMap
-    ? HTMLElementTagNameMap[T]
-    : HTMLElement | Element | null {
-  if (isWindow(selector)) {
-    return selector as any;
-  }
-
-  if (isElement(selector)) {
-    return selector as any;
-  }
-
-  // if string
-  if (typeof parent !== 'undefined') {
-    const parenEl = selectOne(parent);
-    if (parenEl) {
-      return parenEl.querySelector(selector as string) as any;
-    }
-  }
-
-  return document.querySelector(selector as string) as any;
-}

package/src/utils/image/index.ts

@@ -1,3 +0,0 @@
-export * from './sizesToSrcSet';
-export * from './pathsToProps';
-export * from './load';