vevet 4.4.2 → 5.0.1

package/src/components/DraggerBase/types.ts

@@ -1,58 +0,0 @@
-import { NComponent } from '@/base/Component/types';
-
-export namespace NDraggerBase {
-  export interface IStaticProps extends NComponent.IStaticProps {
-    /**
-     * The element that will be draggable. This can be a CSS selector, an HTML element, or the window.
-     * @default '#v-dragger'
-     */
-    container?: string | Element | Window;
-    /**
-     * If need to prevent default events
-     * @default true
-     */
-    preventDefault?: boolean;
-  }
-
-  export interface IChangeableProps extends NComponent.IChangeableProps {
-    /**
-     * Determines if dragging is enabled for the dragger. When set to `false`, dragging is disabled.
-     * @default true
-     */
-    isEnabled?: boolean;
-  }
-
-  export interface ICallbacksTypes extends NComponent.ICallbacksTypes {
-    /**
-     * Triggered when dragging starts, providing the event and coordinates where dragging began.
-     */
-    start: IStartParameter;
-
-    /**
-     * Triggered when dragging ends.
-     */
-    end: undefined;
-  }
-
-  export interface IStartParameter {
-    /**
-     * The event that initiated the drag.
-     */
-    event: PointerEvent;
-
-    /**
-     * The coordinates where the drag started.
-     */
-    start: IVector2;
-
-    /**
-     * The current coordinates of the pointer during the drag.
-     */
-    coords: IVector2;
-  }
-
-  export interface IVector2 {
-    x: number;
-    y: number;
-  }
-}

package/src/components/DraggerDirection/index.ts

@@ -1,63 +0,0 @@
-import { DraggerBase } from '../DraggerBase';
-import { NDraggerDirection } from './types';
-
-export type { NDraggerDirection };
-
-/**
- * A draggable component that detects the swipe direction (up, down, left, or right) based on the drag event.
- * Extends the base dragger functionality to determine the direction of the drag after it ends.
- *
- * @link See examples https://antonbobrov.github.io/vevet-demo/dragger-direction/
- *
- * @link See docs https://antonbobrov.github.io/vevet/classes/DraggerDirection.html
- */
-export class DraggerDirection<
-  StaticProps extends
-    NDraggerDirection.IStaticProps = NDraggerDirection.IStaticProps,
-  ChangeableProps extends
-    NDraggerDirection.IChangeableProps = NDraggerDirection.IChangeableProps,
-  CallbacksTypes extends
-    NDraggerDirection.ICallbacksTypes = NDraggerDirection.ICallbacksTypes,
-> extends DraggerBase<StaticProps, ChangeableProps, CallbacksTypes> {
-  protected _getDefaultProps() {
-    return {
-      ...super._getDefaultProps(),
-      minLength: 75,
-    };
-  }
-
-  /**
-   * Handles the end of the drag event and detects the swipe direction by comparing the start and end coordinates.
-   * If the drag distance is greater than or equal to `minLength`, the corresponding direction callback is triggered.
-   */
-  protected _handleEnd(event: PointerEvent | null) {
-    super._handleEnd(event);
-
-    const { start, coords } = this;
-    const { x, y } = coords;
-
-    const min = Math.abs(this.props.minLength);
-
-    // Detect swipe direction
-
-    // Swipe up
-    if (start.y > y && Math.abs(y - start.y) >= min) {
-      this.callbacks.tbt('up', undefined);
-    }
-
-    // Swipe down
-    if (start.y < y && Math.abs(y - start.y) >= min) {
-      this.callbacks.tbt('down', undefined);
-    }
-
-    // Swipe left
-    if (start.x > x && Math.abs(x - start.x) >= min) {
-      this.callbacks.tbt('left', undefined);
-    }
-
-    // Swipe right
-    if (start.x < x && Math.abs(x - start.x) >= min) {
-      this.callbacks.tbt('right', undefined);
-    }
-  }
-}

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

@@ -1,13 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { Component } from '.';
-
-type TComponent = typeof Component;
-
-const meta: Meta<TComponent> = {
-  title: 'Components/DraggerDirection',
-  component: Component,
-};
-
-export default meta;
-
-export const Default: StoryObj<TComponent> = {};

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

@@ -1,60 +0,0 @@
-import React, { FC, useEffect, useRef, useState } from 'react';
-import { DraggerDirection } from '..';
-
-export const Component: FC = () => {
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const [dragger, setDragger] = useState<DraggerDirection>();
-  const [direction, setDirection] = useState('drag');
-
-  useEffect(() => {
-    if (!containerRef.current) {
-      return undefined;
-    }
-
-    const instance = new DraggerDirection({
-      container: containerRef.current,
-    });
-    setDragger(instance);
-
-    instance.addCallback('down', () => setDirection('down'));
-    instance.addCallback('up', () => setDirection('up'));
-    instance.addCallback('left', () => setDirection('left'));
-    instance.addCallback('right', () => setDirection('right'));
-
-    return () => instance?.destroy();
-  }, []);
-
-  return (
-    <>
-      <button
-        type="button"
-        onClick={() => dragger?.changeProps({ isEnabled: true })}
-      >
-        Enable
-      </button>
-
-      <button
-        type="button"
-        onClick={() => dragger?.changeProps({ isEnabled: false })}
-      >
-        Disable
-      </button>
-
-      <div
-        ref={containerRef}
-        style={{
-          width: '200px',
-          height: '200px',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          background: '#ccc',
-          touchAction: 'none',
-        }}
-      >
-        {direction}
-      </div>
-    </>
-  );
-};

package/src/components/DraggerDirection/types.ts

@@ -1,37 +0,0 @@
-import { NDraggerBase } from '../DraggerBase';
-
-export namespace NDraggerDirection {
-  export interface IStaticProps extends NDraggerBase.IStaticProps {
-    /**
-     * The minimum length (in pixels) required for a swipe to be considered valid and trigger direction events.
-     * If the drag distance is less than this value, no directional callback will be triggered.
-     *
-     * @default 75
-     */
-    minLength?: number;
-  }
-
-  export interface IChangeableProps extends NDraggerBase.IChangeableProps {}
-
-  export interface ICallbacksTypes extends NDraggerBase.ICallbacksTypes {
-    /**
-     * Callback triggered when a swipe up is detected.
-     */
-    up: undefined;
-
-    /**
-     * Callback triggered when a swipe down is detected.
-     */
-    down: undefined;
-
-    /**
-     * Callback triggered when a swipe left is detected.
-     */
-    left: undefined;
-
-    /**
-     * Callback triggered when a swipe right is detected.
-     */
-    right: undefined;
-  }
-}

package/src/components/DraggerMove/index.ts

@@ -1,205 +0,0 @@
-import { addEventListener } from '@/utils/dom/addEventListener';
-import { DraggerBase, NDraggerBase } from '../DraggerBase';
-import { NDraggerMove } from './types';
-import { getApp } from '@/utils/internal/getApp';
-
-export type { NDraggerMove };
-
-/**
- * A draggable component that triggers 'move' callbacks during drag operations.
- * It extends the base `Dragger` functionality by providing movement-related data such as the step and difference in coordinates.
- *
- * @link See examples https://antonbobrov.github.io/vevet-demo/dragger-move/
- *
- * @link See docs https://antonbobrov.github.io/vevet/classes/DraggerMove.html
- */
-export class DraggerMove<
-  StaticProps extends NDraggerMove.IStaticProps = NDraggerMove.IStaticProps,
-  ChangeableProps extends
-    NDraggerMove.IChangeableProps = NDraggerMove.IChangeableProps,
-  CallbacksTypes extends
-    NDraggerMove.ICallbacksTypes = NDraggerMove.ICallbacksTypes,
-> extends DraggerBase<StaticProps, ChangeableProps, CallbacksTypes> {
-  protected _getDefaultProps() {
-    return {
-      ...super._getDefaultProps(),
-      threshold: 5,
-    };
-  }
-
-  /** Remember scroll values on start */
-  protected _startScroll = { top: 0, left: 0 };
-
-  /** If move callback is being called */
-  protected _isMoving = false;
-
-  /**
-   * Returns the difference between the current pointer coordinates and the previous coordinates (the step of movement).
-   */
-  get step() {
-    return {
-      x: this.coords.x - this.prevCoords.x,
-      y: this.coords.y - this.prevCoords.y,
-    };
-  }
-
-  /**
-   * Returns the difference between the starting coordinates and the current coordinates.
-   */
-  get diff() {
-    return {
-      x: this.coords.x - this.start.x,
-      y: this.coords.y - this.start.y,
-    };
-  }
-
-  /**
-   * Stores the total absolute movement.
-   */
-  protected _total: NDraggerBase.IVector2 = { x: 0, y: 0 };
-
-  /**
-   * Returns the total absolute movement.
-   */
-  get total() {
-    return this._total;
-  }
-
-  /**
-   * Adds runtime events to track pointer movement (for both mouse and touch events).
-   * Triggers the `move` callback during the drag to provide updates about the movement.
-   */
-  protected _addRuntimeEvents() {
-    super._addRuntimeEvents();
-
-    this._runtimeListeners.push(
-      addEventListener(
-        window,
-        'pointermove',
-        (event) => this._handleMove(event),
-        { passive: false },
-      ),
-    );
-  }
-
-  /**
-   * Handles the start of a drag event.
-   */
-  protected _handleStart(event: PointerEvent) {
-    super._handleStart(event);
-
-    // Remember scroll values on start
-    this._startScroll = {
-      top: window.scrollY,
-      left: window.scrollX,
-    };
-  }
-
-  /**
-   * Handles the movement during dragging, updating the current coordinates and calculating the step and total movement.
-   *
-   * @param event - The event representing the movement (either `MouseEvent` or `TouchEvent`).
-   */
-  protected _handleMove(event: PointerEvent) {
-    const { clientX: x, clientY: y } = event;
-    const { threshold } = this.props;
-
-    // get scroll values
-    const currentScroll = {
-      top: window.scrollY,
-      left: window.scrollX,
-    };
-    const startScroll = this._startScroll;
-
-    // Update previous and current coordinates
-    this.prevCoords = { x: this.coords.x, y: this.coords.y };
-    this.coords = { x, y };
-
-    // Update total movement
-    this._total.x += Math.abs(this.step.x);
-    this._total.y += Math.abs(this.step.y);
-
-    // check trheshold
-    if (
-      threshold &&
-      Math.sqrt(this.total.x ** 2 + this.total.y ** 2) < threshold ** 2
-    ) {
-      return;
-    }
-
-    // check if scrolling at the moment
-    if (
-      getApp().isMobile &&
-      (startScroll.top !== currentScroll.top ||
-        startScroll.left !== currentScroll.left)
-    ) {
-      return;
-    }
-
-    // moving
-    if (!this._isMoving) {
-      this._isMoving = true;
-
-      this._start = { x, y };
-      this._prevCoords = { x, y };
-    }
-
-    // prevent defaults
-
-    if (this.props.preventDefault) {
-      event.preventDefault();
-    }
-
-    // Optionally disable pointer events during movement
-    this._togglePointerEvents(false);
-
-    // Trigger 'move' callback with relevant data
-    this.callbacks.tbt('move', {
-      event,
-      start: this.start,
-      coords: this.coords,
-      step: this.step,
-      diff: this.diff,
-      total: this.total,
-    });
-  }
-
-  /**
-   * Handles the end of a drag event and initiates cleanup.
-   */
-  protected _handleEnd() {
-    super._handleEnd(null);
-
-    // Reset
-    this._total = { x: 0, y: 0 };
-    this._isMoving = false;
-
-    // Re-enable pointer events
-    this._togglePointerEvents(true);
-  }
-
-  /** Cancel dragging */
-  public cancel() {
-    this._handleEnd();
-  }
-
-  /**
-   * Toggles pointer events on or off.
-   *
-   * @param isEnabled - If true, pointer events will be re-enabled.
-   */
-  protected _togglePointerEvents(isEnabled: boolean) {
-    if (!(this.container instanceof HTMLElement)) {
-      return;
-    }
-
-    const { total } = this;
-    const { threshold } = this.props;
-
-    const isEnoughToBlockListeners = total.x > threshold || total.y > threshold;
-
-    const isDisabled = isEnabled ? false : isEnoughToBlockListeners;
-
-    this.container.style.pointerEvents = isDisabled ? 'none' : '';
-  }
-}

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

@@ -1,15 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { Component } from '.';
-
-type TComponent = typeof Component;
-
-const meta: Meta<TComponent> = {
-  title: 'Components/DraggerMove',
-  component: Component,
-};
-
-export default meta;
-
-export const Default: StoryObj<TComponent> = {
-  args: {},
-};

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

@@ -1,89 +0,0 @@
-import React, { FC, useEffect, useRef, useState } from 'react';
-import { DraggerMove } from '..';
-
-export const Component: FC = () => {
-  const thumbRef = useRef<HTMLDivElement>(null);
-
-  const [dragger, setDragger] = useState<DraggerMove>();
-
-  useEffect(() => {
-    const thumb = thumbRef.current;
-    if (!thumb) {
-      return undefined;
-    }
-
-    const instance = new DraggerMove({
-      container: thumb,
-    });
-
-    setDragger(instance);
-
-    instance.addCallback('move', ({ diff }) => {
-      thumb.style.transition = '';
-      thumb.style.transform = `translate(${diff.x}px, ${diff.y}px)`;
-    });
-
-    instance.addCallback('end', () => {
-      thumb.style.transition = 'transform 0.35s';
-      thumb.style.transform = '';
-    });
-
-    return () => instance?.destroy();
-  }, []);
-
-  return (
-    <>
-      <button
-        type="button"
-        onClick={() => dragger?.changeProps({ isEnabled: true })}
-      >
-        Enable
-      </button>
-
-      <button
-        type="button"
-        onClick={() => dragger?.changeProps({ isEnabled: false })}
-      >
-        Disable
-      </button>
-
-      <div
-        style={{
-          position: 'relative',
-          marginTop: 10,
-          width: '300px',
-          height: '300px',
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'center',
-          backgroundColor: '#ccc',
-        }}
-      >
-        <div
-          ref={thumbRef}
-          id="drag-thumb"
-          style={{
-            position: 'relative',
-            width: '250px',
-            height: '250px',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            backgroundColor: '#000',
-            cursor: 'pointer',
-            textAlign: 'center',
-            color: '#fff',
-            opacity: 0.75,
-            touchAction: 'pan-y',
-          }}
-        >
-          <a href="/" style={{ color: 'currentcolor' }}>
-            Drag me
-          </a>
-        </div>
-      </div>
-    </>
-  );
-};

package/src/components/DraggerMove/types.ts

@@ -1,37 +0,0 @@
-import { NDraggerBase } from '../DraggerBase';
-
-export namespace NDraggerMove {
-  export interface IStaticProps extends NDraggerBase.IStaticProps {}
-
-  export interface IChangeableProps extends NDraggerBase.IChangeableProps {
-    /**
-     * Threshold value in px. If "touch distance" will be lower than this value then dragger move events will not trigger
-     * @default 5
-     */
-    threshold?: number;
-  }
-
-  export interface ICallbacksTypes extends NDraggerBase.ICallbacksTypes {
-    /**
-     * Callback triggered during the drag movement, providing details about the current, step, and difference coordinates.
-     */
-    move: IMoveParameter;
-  }
-
-  export interface IMoveParameter extends NDraggerBase.IStartParameter {
-    /**
-     * The step difference in coordinates between the current and previous position during dragging.
-     */
-    step: NDraggerBase.IVector2;
-
-    /**
-     * The difference in coordinates between the start position and the current position during dragging.
-     */
-    diff: NDraggerBase.IVector2;
-
-    /**
-     * Total movement
-     */
-    total: NDraggerBase.IVector2;
-  }
-}

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

@@ -1,27 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { Component } from '.';
-
-type TComponent = typeof Component;
-
-const meta: Meta<TComponent> = {
-  title: 'Components/Marquee',
-  component: Component,
-};
-
-export default meta;
-
-export const Default: StoryObj<TComponent> = {
-  args: {},
-};
-
-export const WithPauseOnHover: StoryObj<TComponent> = {
-  args: {
-    pauseOnHover: true,
-  },
-};
-
-export const WithReverseSpeed: StoryObj<TComponent> = {
-  args: {
-    speed: -1,
-  },
-};

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

@@ -1,76 +0,0 @@
-import React, { FC, useEffect, useRef, useState } from 'react';
-import { Marquee, NMarquee } from '..';
-import { times } from '@/utils/internal/times';
-
-interface IProps extends NMarquee.IChangeableProps {}
-
-export const Component: FC<IProps> = (props) => {
-  const ref = useRef<HTMLDivElement>(null);
-
-  const [width, setWidth] = useState(400);
-  const [marquee, setMarquee] = useState<Marquee | undefined>();
-
-  useEffect(() => {
-    if (!ref.current) {
-      return undefined;
-    }
-
-    const instance = new Marquee({
-      ...props,
-      container: ref.current,
-      gap: 10,
-      isCentered: true,
-    });
-
-    setMarquee(instance);
-
-    return () => instance.destroy();
-  }, [props]);
-
-  return (
-    <>
-      <button type="button" onClick={() => setWidth((val) => val + 20)}>
-        Rezize (changes parent width)
-      </button>
-
-      <button
-        type="button"
-        onClick={() => marquee?.changeProps({ isEnabled: true })}
-      >
-        Play
-      </button>
-
-      <button
-        type="button"
-        onClick={() => marquee?.changeProps({ isEnabled: false })}
-      >
-        Pause
-      </button>
-
-      <button type="button" onClick={() => marquee?.render()}>
-        Manual render
-      </button>
-
-      <button type="button" onClick={() => marquee?.destroy()}>
-        Destroy
-      </button>
-
-      <br />
-
-      <br />
-
-      <div style={{ background: '#ccc', width, fontSize: 20 }}>
-        <div ref={ref}>
-          {times(
-            (index) => (
-              <div key={index}>
-                <span>Text {index}</span>
-              </div>
-            ),
-            3,
-          )}
-        </div>
-      </div>
-    </>
-  );
-};