vevet 4.4.1 → 5.0.0

package/src/components/CustomScroll/stories/WithHorizontal.tsx

@@ -1,91 +0,0 @@
-import React, { FC, useEffect, useRef, useState } from 'react';
-import { CustomScroll } from '..';
-import { times } from '@/utils/internal/times';
-
-export const WithHorizontalComponent: FC = () => {
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const [scroll, setScroll] = useState<CustomScroll>();
-
-  useEffect(() => {
-    if (!containerRef.current) {
-      return undefined;
-    }
-
-    const instance = new CustomScroll({
-      container: containerRef.current,
-      elements: '.js-element',
-      direction: 'horizontal',
-      isInversedHandlerDirection: true,
-    });
-
-    setScroll(instance);
-
-    return () => instance.destroy();
-  }, []);
-
-  return (
-    <div>
-      <button
-        type="button"
-        onClick={() => scroll?.changeProps({ isEnabled: true })}
-      >
-        Enable
-      </button>
-
-      <button
-        type="button"
-        onClick={() => scroll?.changeProps({ isEnabled: false })}
-      >
-        Disable
-      </button>
-
-      <br />
-
-      <br />
-
-      <div
-        ref={containerRef}
-        className="v-custom-scroll"
-        style={{ height: 500, maxWidth: 500, backgroundColor: '#ccc' }}
-      >
-        <div className="v-custom-scroll__wrapper">
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'row',
-              alignItems: 'center',
-              justifyContent: 'flex-start',
-              width: 'max-content',
-            }}
-          >
-            {times(
-              (index, count) => (
-                <div
-                  key={index}
-                  className="js-element"
-                  data-custom-scroll-lerp={0.1 - (index / count) * 0.035}
-                  style={{
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-
-                    minWidth: 200,
-                    height: 200,
-
-                    background: '#333',
-                    color: '#fff',
-                  }}
-                >
-                  Lorem ipsum
-                </div>
-              ),
-              20,
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/components/CustomScroll/stories/WithInnerLerp.tsx

@@ -1,70 +0,0 @@
-import React, { FC, useEffect, useRef, useState } from 'react';
-import { CustomScroll } from '..';
-import { times } from '@/utils/internal/times';
-
-export const WithInnerLerpComponent: FC = () => {
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const [scroll, setScroll] = useState<CustomScroll>();
-
-  useEffect(() => {
-    if (!containerRef.current) {
-      return undefined;
-    }
-
-    const instance = new CustomScroll({
-      container: containerRef.current,
-      elements: '.js-element',
-    });
-
-    setScroll(instance);
-
-    return () => instance.destroy();
-  }, []);
-
-  return (
-    <div>
-      <button
-        type="button"
-        onClick={() => scroll?.changeProps({ isEnabled: true })}
-      >
-        Enable
-      </button>
-
-      <button
-        type="button"
-        onClick={() => scroll?.changeProps({ isEnabled: false })}
-      >
-        Disable
-      </button>
-
-      <br />
-
-      <br />
-
-      <div
-        ref={containerRef}
-        className="v-custom-scroll"
-        style={{ height: 500, maxWidth: 500, backgroundColor: '#ccc' }}
-      >
-        <div className="v-custom-scroll__wrapper">
-          {times(
-            (index, count) => (
-              <div
-                key={index}
-                className="js-element"
-                data-custom-scroll-lerp={0.5 - (index / count) * 0.35}
-              >
-                Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                Pariatur quibusdam fugit at quos. Quod repellendus placeat
-                provident. Iste saepe veniam iure, reiciendis a dolor in commodi
-                dolores placeat mollitia illum?
-              </div>
-            ),
-            40,
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};

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

@@ -1,23 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react';
-import React from 'react';
-import { DefaultComponent } from './Default';
-import { WithInnerLerpComponent } from './WithInnerLerp';
-import { WithHorizontalComponent } from './WithHorizontal';
-
-const meta: Meta = {
-  title: 'Components/CustomScroll',
-};
-
-export default meta;
-
-export const Default: StoryFn<typeof DefaultComponent> = (props) => (
-  <DefaultComponent {...props} />
-);
-
-export const WithInnerLerp: StoryFn<typeof WithInnerLerpComponent> = (
-  props,
-) => <WithInnerLerpComponent {...props} />;
-
-export const WithHorizontal: StoryFn<typeof WithHorizontalComponent> = (
-  props,
-) => <WithHorizontalComponent {...props} />;

package/src/components/CustomScroll/types.ts

@@ -1,165 +0,0 @@
-import { NComponent } from '@/base/Component/types';
-import { AnimationFrame } from '../AnimationFrame';
-import { TOnResizeTarget } from '@/utils/listeners/onResize';
-
-export namespace NCustomScroll {
-  export interface IStaticProps extends NComponent.IStaticProps {
-    /**
-     * Selector or HTMLElement for the scrollable container.
-     * @default '#v-custom-scroll'
-     */
-    container?: string | HTMLElement;
-
-    /**
-     * Defines the scrollable elements inside the wrapper. Can be a selector, a list of elements, or a single element.
-     * If set to `false`, no specific elements are defined.
-     * @default false
-     */
-    elements?:
-      | false
-      | string
-      | NodeListOf<HTMLElement>
-      | HTMLElement
-      | HTMLElement[];
-
-    /**
-     * Optional `AnimationFrame` instance to control scrolling animation externally.
-     * @default false
-     */
-    animationFrame?: false | AnimationFrame;
-
-    /**
-     * Target for the viewport resize event.
-     * @default 'any'
-     */
-    viewportTarget?: TOnResizeTarget;
-
-    /**
-     * Timeout value for the resize event, useful for debouncing resize calculations.
-     * @default 0
-     */
-    resizeDebounce?: number;
-
-    /**
-     * If `true`, the `will-change` CSS property will be applied to the scrollable elements to improve performance.
-     * @default true
-     */
-    hasWillChange?: boolean;
-
-    /**
-     * Sets precision for the `transform` property by limiting the number of decimal places.
-     * Helps prevent choppy scrolling caused by large decimal values in transforms.
-     * Set to `false` to disable precision rounding.
-     * @default 2
-     */
-    translatePrecision?: false | number;
-  }
-
-  export interface IChangeableProps extends NComponent.IChangeableProps {
-    /**
-     * If `true`, scrolling is enabled.
-     * @default true
-     */
-    isEnabled?: boolean;
-
-    /**
-     * If `true`, enables scrolling via mouse wheel.
-     * @default true
-     */
-    hasWheel?: boolean;
-
-    /**
-     * Defines the scroll speed multiplier for the mouse wheel.
-     * @default 1
-     */
-    wheelSpeed?: number;
-
-    /**
-     * Defines the main scrolling direction. Can be either horizontal or vertical.
-     * @default 'vertical'
-     */
-    direction?: 'horizontal' | 'vertical';
-
-    /**
-     * Inverts the scroll direction. Useful for reversed scrolling behaviors.
-     * @default false
-     */
-    isInversedHandlerDirection?: boolean;
-
-    /**
-     * Automatically stops the animation frame when the target and current scroll values are equal.
-     * Improves performance by preventing unnecessary renders.
-     * @default true
-     */
-    shouldAutoStop?: boolean;
-
-    /**
-     * If `true`, stops propagation of the scroll event to parent elements.
-     * @default true
-     */
-    hasStopPropagation?: boolean;
-
-    /**
-     * Linear interpolation factor for smooth scrolling. Scroll elements can override this value using the `customScrollLerp` property or the "data-custom-scroll-lerp" attribute.
-     * @default 0.1
-     */
-    lerp?: number;
-
-    /**
-     * Normalizes the scroll speed across different screens by accounting for varying FPS rates.
-     * @default true
-     */
-    isFpsNormalized?: boolean;
-
-    /**
-     * Approximation factor for interpolation, used to prevent animation from getting too slow at very small differences between current and target values.
-     * @default 0.1
-     */
-    lerpApproximation?: number;
-  }
-
-  export interface ICallbacksTypes extends NComponent.ICallbacksTypes {
-    /**
-     * Fired when the component renders a new scroll frame.
-     */
-    render: undefined;
-
-    /**
-     * Fired when the component or viewport is resized.
-     */
-    resize: undefined;
-
-    /**
-     * Fired when a scroll event is detected from a mouse wheel interaction.
-     */
-    wheel: IWheelParameter;
-  }
-
-  export interface IWheelParameter {
-    /**
-     * The original wheel event that triggered the scroll.
-     */
-    event: WheelEvent;
-  }
-
-  /**
-   * Represents a scrollable element within the CustomScroll component.
-   * These elements can track custom scroll positions and include custom interpolation settings.
-   */
-  export interface IElement extends HTMLElement {
-    /**
-     * The current custom scroll top value for this element.
-     */
-    customScrollTop: number;
-
-    /**
-     * The current custom scroll left value for this element.
-     */
-    customScrollLeft: number;
-
-    /**
-     * Optional custom interpolation (lerp) value specific to this element.
-     */
-    customScrollLerp?: number;
-  }
-}

package/src/components/CustomScrollDragPlugin/index.ts

@@ -1,236 +0,0 @@
-import { Plugin } from '@/base/Plugin';
-import { NCustomScrollDragPlugin } from './types';
-import type { CustomScroll as CustomScrollInstance } from '../CustomScroll';
-import { DraggerMove, NDraggerMove } from '../DraggerMove';
-import { NCallbacks } from '@/base/Callbacks';
-
-export type { NCustomScrollDragPlugin };
-
-/**
- * Plugin to add dragging functionality to a `CustomScroll` instance.
- * It allows the user to control the scroll by dragging within the container.
- *
- * @link See examples https://antonbobrov.github.io/vevet-demo/custom-scroll/
- *
- * @link See docs https://antonbobrov.github.io/vevet/classes/CustomScrollDragPlugin.html
- */
-export class CustomScrollDragPlugin<
-  StaticProp extends
-    NCustomScrollDragPlugin.IStaticProps = NCustomScrollDragPlugin.IStaticProps,
-  ChangeableProp extends
-    NCustomScrollDragPlugin.IChangeableProps = NCustomScrollDragPlugin.IChangeableProps,
-  CallbacksTypes extends
-    NCustomScrollDragPlugin.ICallbacksTypes = NCustomScrollDragPlugin.ICallbacksTypes,
-> extends Plugin<
-  StaticProp,
-  ChangeableProp,
-  CallbacksTypes,
-  CustomScrollInstance
-> {
-  protected _getDefaultProps() {
-    return {
-      ...super._getDefaultProps(),
-      isEnabled: true,
-      speed: 1,
-      lerp: false,
-      stopPropagationThreshold: false,
-      stopPropagationDirection: 'y',
-    };
-  }
-
-  /** Instance of the DraggerMove component that handles dragging. */
-  protected _dragger?: DraggerMove;
-
-  /** List of callbacks added to the CustomScroll instance. */
-  protected _componentCallbacks?: NCallbacks.IAddedCallback[];
-
-  /** Holds the previous lerp value of the CustomScroll component. */
-  protected _prevComponentLerp?: number;
-
-  /**
-   * Determines whether dragging is currently active.
-   */
-  get isDragging() {
-    return this._dragger?.isDragging ?? false;
-  }
-
-  protected _init() {
-    super._init();
-
-    this._toggleDragger();
-
-    this.component.container.style.touchAction = 'none';
-  }
-
-  protected _onPropsMutate() {
-    super._onPropsMutate();
-
-    this._toggleDragger();
-  }
-
-  /**
-   * Enables or disables the dragger based on the `isEnabled` property.
-   */
-  protected _toggleDragger() {
-    if (this.props.isEnabled) {
-      this._addDragger();
-    } else {
-      this._removeDragger();
-    }
-  }
-
-  /**
-   * Adds the dragger functionality to the CustomScroll instance.
-   */
-  protected _addDragger() {
-    if (this._dragger) {
-      return;
-    }
-
-    const { component } = this;
-
-    this._dragger = new DraggerMove({
-      container: component.container,
-      threshold: 0,
-      preventDefault: false,
-    });
-
-    this._dragger.addCallback('start', () => this._handleDragStart());
-
-    this._dragger.addCallback('move', (data) => this._handleDragMove(data));
-
-    this._dragger.addCallback('end', () => this._handleDragEnd());
-
-    if (!this._componentCallbacks) {
-      this._componentCallbacks = [];
-    }
-
-    this._componentCallbacks.push(
-      component.addCallback('wheel', () => this._dragger?.cancel(), {
-        name: this.name,
-      }),
-    );
-  }
-
-  /**
-   * Removes the dragger and cleans up callbacks.
-   */
-  protected _removeDragger() {
-    if (!this._dragger) {
-      return;
-    }
-
-    this._dragger.destroy();
-    this._dragger = undefined;
-
-    this._componentCallbacks?.forEach((callback) => callback.remove());
-    this._componentCallbacks = [];
-  }
-
-  /**
-   * Determines if dragging is possible based on the current scroll state.
-   */
-  protected _getIsDragAvailable() {
-    const { component } = this;
-
-    if (!component.props.isEnabled) {
-      return false;
-    }
-
-    if (
-      component.maxScrollableWidth <= 0 &&
-      component.maxScrollableHeight <= 0
-    ) {
-      return false;
-    }
-
-    return true;
-  }
-
-  /**
-   * Handles the start of dragging.
-   */
-  protected _handleDragStart() {
-    if (!this._getIsDragAvailable()) {
-      return;
-    }
-
-    const { component } = this;
-
-    if (typeof this.props.lerp === 'number') {
-      this._prevComponentLerp = component.props.lerp;
-      component.changeProps({ lerp: this.props.lerp });
-    }
-
-    this.callbacks.tbt('start', undefined);
-  }
-
-  /**
-   * Handles the dragging move event and updates scroll values.
-   */
-  protected _handleDragMove({
-    event,
-    coords,
-    start,
-    step,
-  }: NDraggerMove.ICallbacksTypes['move']) {
-    if (!this._getIsDragAvailable()) {
-      return;
-    }
-
-    const { component, props } = this;
-
-    const {
-      stopPropagationThreshold: threshold,
-      stopPropagationDirection: direction,
-    } = props;
-
-    if (typeof threshold === 'number' && event.cancelable) {
-      const diffX = Math.abs(coords.x - start.x);
-      const diffY = Math.abs(coords.y - start.y);
-
-      if (
-        (diffX > threshold && direction === 'x') ||
-        (diffY > threshold && direction === 'y')
-      ) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    }
-
-    const x = step.x * props.speed;
-    const y = step.y * props.speed;
-
-    component.targetLeft -= x;
-    component.targetTop -= y;
-
-    component.wrapper.style.pointerEvents = 'none';
-    component.wrapper.style.userSelect = 'none';
-
-    this.callbacks.tbt('move', undefined);
-  }
-
-  /**
-   * Handles the end of dragging and restores the scroll state.
-   */
-  protected _handleDragEnd() {
-    const { component } = this;
-
-    component.wrapper.style.pointerEvents = '';
-    component.wrapper.style.userSelect = '';
-
-    if (typeof this._prevComponentLerp === 'number') {
-      component.changeProps({ lerp: this._prevComponentLerp });
-      this._prevComponentLerp = undefined;
-    }
-
-    this.callbacks.tbt('end', undefined);
-  }
-
-  /** Cleans up and destroys the plugin. */
-  protected _destroy() {
-    super._destroy();
-
-    this._removeDragger();
-  }
-}

package/src/components/CustomScrollDragPlugin/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/CustomScrollDragPlugin',
-  component: Component,
-};
-
-export default meta;
-
-export const Default: StoryObj<TComponent> = {};

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

@@ -1,81 +0,0 @@
-import React, { FC, useEffect, useRef, useState } from 'react';
-import { CustomScrollDragPlugin } from '..';
-import { CustomScroll } from '@/components/CustomScroll';
-import { times } from '@/utils/internal/times';
-
-export const Component: FC = () => {
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const [scroll, setScroll] = useState<CustomScroll>();
-
-  useEffect(() => {
-    if (!containerRef.current) {
-      return undefined;
-    }
-
-    const instance = new CustomScroll({
-      container: containerRef.current,
-    });
-
-    setScroll(instance);
-
-    instance.addPlugin(new CustomScrollDragPlugin());
-
-    return () => instance.destroy();
-  }, []);
-
-  return (
-    <div>
-      <button
-        type="button"
-        onClick={() => scroll?.changeProps({ isEnabled: true })}
-      >
-        Enable
-      </button>
-
-      <button
-        type="button"
-        onClick={() => scroll?.changeProps({ isEnabled: false })}
-      >
-        Disable
-      </button>
-
-      <br />
-
-      <br />
-
-      <div
-        ref={containerRef}
-        className="v-custom-scroll"
-        style={{ height: 500, maxWidth: 500, backgroundColor: '#ccc' }}
-      >
-        <div className="v-custom-scroll__wrapper">
-          <button type="button">Test button</button>
-
-          <br />
-
-          <br />
-
-          <input type="text" placeholder="Test input" />
-
-          {times(
-            (index) => (
-              <div key={index}>
-                {'Lorem ipsum dolor sit amet '}
-
-                <br />
-
-                <br />
-
-                <button type="button">Test button</button>
-              </div>
-            ),
-            40,
-          )}
-
-          <button type="button">Test button</button>
-        </div>
-      </div>
-    </div>
-  );
-};