vevet 3.3.2 → 3.5.0

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

@@ -0,0 +1,66 @@
+/* eslint-disable no-param-reassign */
+import React, { FC, useEffect, useRef } from 'react';
+import { SlideProgress } from '..';
+
+export const Component: FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const colors = ['#A8E6CF', '#DCEDC1', '#FFD3B6', '#FFAAA5', '#FF8B94'];
+  const { length } = colors;
+
+  useEffect(() => {
+    if (!containerRef.current) {
+      return undefined;
+    }
+
+    const instance = new SlideProgress({
+      container: containerRef.current,
+      min: 0,
+      max: length - 1,
+      step: 0.5,
+    });
+
+    const elements = Array.from(containerRef.current.children) as HTMLElement[];
+
+    instance.addCallback('render', () => {
+      elements.forEach((element, index) => {
+        const y = instance.progress * -100 + index * 100;
+        element.style.transform = `translate(0, ${y}%)`;
+      });
+    });
+
+    instance.render();
+
+    return () => instance.destroy();
+  }, [length]);
+
+  return (
+    <>
+      <p>Scroll the block below</p>
+
+      <div
+        ref={containerRef}
+        style={{
+          position: 'relative',
+          width: 300,
+          height: 300,
+          overflow: 'hidden',
+        }}
+      >
+        {colors.map((color) => (
+          <div
+            key={color}
+            style={{
+              position: 'absolute',
+              top: '0',
+              left: '0',
+              width: '100%',
+              height: '100%',
+              backgroundColor: color,
+            }}
+          />
+        ))}
+      </div>
+    </>
+  );
+};

package/src/components/SlideProgress/types.ts

@@ -0,0 +1,71 @@
+import { NComponent } from '@/base/Component/types';
+import { NTimeline } from '../Timeline';
+
+export namespace NSlideProgress {
+  export interface IStaticProps extends NComponent.IStaticProps {
+    /** HTML Container */
+    container: HTMLElement;
+  }
+
+  export interface IChangeableProps extends NComponent.IChangeableProps {
+    /** Minimum progress value */
+    min: number;
+    /** Maximum progress value */
+    max: number;
+    /** Progress step */
+    step: number;
+    /**
+     * Linear interpolation ease
+     * @default 0.1
+     */
+    ease?: number;
+    /**
+     * Linear interpolation friction
+     * @default 0.5
+     */
+    friction?: number;
+    /**
+     * Use drag events
+     * @default true
+     */
+    hasDrag?: boolean;
+    /**
+     * Dragger speed
+     * @default 1
+     */
+    dragSpeed?: number;
+    /**
+     * Dragger direction
+     * @default 'y'
+     */
+    dragDirection?: 'x' | 'y';
+    /**
+     * Use wheel events
+     * @default true
+     */
+    hasWheel?: boolean;
+    /**
+     * Wheel speed
+     * @default 1
+     */
+    wheelSpeed?: number;
+  }
+
+  export interface ICallbacksTypes extends NComponent.ICallbacksTypes {
+    render: undefined;
+    step: undefined;
+  }
+
+  export interface IWithLerp {
+    current: number;
+    target: number;
+  }
+
+  export interface IToProps {
+    value: number;
+    /** @default 500 */
+    duration?: number;
+    onProgress?: (props: NTimeline.ICallbacksTypes['progress']) => void;
+    onEnd?: () => void;
+  }
+}

package/src/components/SmoothScroll/AnimatonFrame.ts

@@ -32,7 +32,7 @@ export class AnimationFrame {
         this._animationFrameEvent = this.props.outerAnimationFrame.addCallback(
           'frame',
           () => this.props.callback(),
-          { name: 'SmoothScroll' }
+          { name: 'SmoothScroll' },
         );
       }
 
@@ -43,7 +43,7 @@ export class AnimationFrame {
     if (!this._innerAnimationFrame) {
       this._innerAnimationFrame = new AnimationFrameClass({ fps: 'auto' });
       this._innerAnimationFrame.addCallback('frame', () =>
-        this.props.callback()
+        this.props.callback(),
       );
     }
 

package/src/components/SmoothScroll/Elements.ts

@@ -61,8 +61,8 @@ export class Elements {
       this._elements = Array.from(
         selectAll(
           this.props.elements,
-          this.props.container
-        ) as NodeListOf<NSmoothScroll.IElement>
+          this.props.container,
+        ) as NodeListOf<NSmoothScroll.IElement>,
       );
     } else {
       this._elements = [this._wrapper as NSmoothScroll.IElement];
@@ -123,7 +123,7 @@ export class Elements {
     return array.every(
       ({ smoothScrollLeft, smoothScrollTop }) =>
         smoothScrollLeft === array[0].smoothScrollLeft &&
-        smoothScrollTop === array[0].smoothScrollTop
+        smoothScrollTop === array[0].smoothScrollTop,
     );
   }
 

package/src/components/SmoothScroll/index.ts

@@ -15,8 +15,10 @@ export type { NSmoothScroll };
  */
 export class SmoothScroll<
     StaticProps extends NSmoothScroll.IStaticProps = NSmoothScroll.IStaticProps,
-    ChangeableProps extends NSmoothScroll.IChangeableProps = NSmoothScroll.IChangeableProps,
-    CallbacksTypes extends NSmoothScroll.ICallbacksTypes = NSmoothScroll.ICallbacksTypes
+    ChangeableProps extends
+      NSmoothScroll.IChangeableProps = NSmoothScroll.IChangeableProps,
+    CallbacksTypes extends
+      NSmoothScroll.ICallbacksTypes = NSmoothScroll.ICallbacksTypes,
   >
   extends ComponentClass<StaticProps, ChangeableProps, CallbacksTypes>
   implements IScrollLike
@@ -48,14 +50,14 @@ export class SmoothScroll<
   }
 
   /** Scroll container */
-  private _container: HTMLElement;
+  protected _container: HTMLElement;
 
   /** Scroll container */
   get container() {
     return this._container;
   }
 
-  private _elements: Elements;
+  protected _elements: Elements;
 
   /**
    * Scroll wrapper. If the element does not exist indide the `container`,
@@ -194,7 +196,7 @@ export class SmoothScroll<
   protected _isInstant?: boolean;
 
   /** Animation frame */
-  private _animationFrame: AnimationFrame;
+  protected _animationFrame: AnimationFrame;
 
   /** Frame index */
   protected _frameIndex: number;
@@ -288,7 +290,7 @@ export class SmoothScroll<
 
     // wheel
     this.addEventListener(this.container, 'wheel', (event) =>
-      this.handleWheel(event)
+      this.handleWheel(event),
     );
 
     // prevent native scroll
@@ -299,7 +301,7 @@ export class SmoothScroll<
   }
 
   /** Set resize events */
-  private _setResize() {
+  protected _setResize() {
     const { viewportTarget, resizeDebounce } = this.props;
 
     // resize handler
@@ -324,7 +326,7 @@ export class SmoothScroll<
             this._recalculateScrollSizes();
           }
         }) as any,
-        { isProtected: true, name: this.name }
+        { isProtected: true, name: this.name },
       );
     }
   }
@@ -365,7 +367,7 @@ export class SmoothScroll<
   /** Resize the scene */
   protected _resize(
     /** If the method was called natively on window resize */
-    isNative = false
+    isNative = false,
   ) {
     const { container, wrapper } = this;
 
@@ -507,13 +509,13 @@ export class SmoothScroll<
       element.smoothScrollLeft = this._lerp(
         element.smoothScrollLeft,
         this._targetLeft,
-        elementLerp
+        elementLerp,
       );
 
       element.smoothScrollTop = this._lerp(
         element.smoothScrollTop,
         this._targetTop,
-        elementLerp
+        elementLerp,
       );
     }
   }

package/src/components/SmoothScroll/stories/Default.tsx

@@ -55,7 +55,7 @@ export const DefaultComponent: FC = () => {
                 dolores placeat mollitia illum?
               </div>
             ),
-            40
+            40,
           )}
         </div>
       </div>

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

@@ -80,7 +80,7 @@ export const WithHorizontalComponent: FC = () => {
                   Lorem ipsum
                 </div>
               ),
-              20
+              20,
             )}
           </div>
         </div>

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

@@ -60,7 +60,7 @@ export const WithInnerLerpComponent: FC = () => {
                 dolores placeat mollitia illum?
               </div>
             ),
-            40
+            40,
           )}
         </div>
       </div>

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

@@ -15,9 +15,9 @@ export const Default: StoryFn<typeof DefaultComponent> = (props) => (
 );
 
 export const WithInnerLerp: StoryFn<typeof WithInnerLerpComponent> = (
-  props
+  props,
 ) => <WithInnerLerpComponent {...props} />;
 
 export const WithHorizontal: StoryFn<typeof WithHorizontalComponent> = (
-  props
+  props,
 ) => <WithHorizontalComponent {...props} />;

package/src/components/SmoothScrollDragPlugin/index.ts

@@ -10,9 +10,12 @@ export type { NSmoothScrollDragPlugin };
  * Add dragger to `SmoothScroll`
  */
 export class SmoothScrollDragPlugin<
-  StaticProp extends NSmoothScrollDragPlugin.IStaticProps = NSmoothScrollDragPlugin.IStaticProps,
-  ChangeableProp extends NSmoothScrollDragPlugin.IChangeableProps = NSmoothScrollDragPlugin.IChangeableProps,
-  CallbacksTypes extends NSmoothScrollDragPlugin.ICallbacksTypes = NSmoothScrollDragPlugin.ICallbacksTypes
+  StaticProp extends
+    NSmoothScrollDragPlugin.IStaticProps = NSmoothScrollDragPlugin.IStaticProps,
+  ChangeableProp extends
+    NSmoothScrollDragPlugin.IChangeableProps = NSmoothScrollDragPlugin.IChangeableProps,
+  CallbacksTypes extends
+    NSmoothScrollDragPlugin.ICallbacksTypes = NSmoothScrollDragPlugin.ICallbacksTypes,
 > extends Plugin<
   StaticProp,
   ChangeableProp,
@@ -31,10 +34,10 @@ export class SmoothScrollDragPlugin<
   }
 
   /** Dragger component */
-  private _dragger?: DraggerMove;
+  protected _dragger?: DraggerMove;
 
   /** Component callbacks */
-  private _componentCallbacks?: NCallbacks.IAddedCallback[];
+  protected _componentCallbacks?: NCallbacks.IAddedCallback[];
 
   /** If is dragging at the moment */
   get isDragging() {
@@ -44,7 +47,7 @@ export class SmoothScrollDragPlugin<
   /**
    * Current lerp of SmoothScroll
    */
-  private _prevComponentLerp?: number;
+  protected _prevComponentLerp?: number;
 
   /** Initialize the class */
   protected _init() {
@@ -60,7 +63,7 @@ export class SmoothScrollDragPlugin<
   }
 
   /** Add or remove dragger */
-  private _toggleDragger() {
+  protected _toggleDragger() {
     if (this.props.isEnabled) {
       this._addDragger();
     } else {
@@ -69,7 +72,7 @@ export class SmoothScrollDragPlugin<
   }
 
   /** Add dragger */
-  private _addDragger() {
+  protected _addDragger() {
     if (this._dragger) {
       return;
     }
@@ -93,12 +96,12 @@ export class SmoothScrollDragPlugin<
     this._componentCallbacks.push(
       component.addCallback('wheel', () => this._dragger?.cancel(), {
         name: this.name,
-      })
+      }),
     );
   }
 
   /** Remove dragger */
-  private _removeDragger() {
+  protected _removeDragger() {
     if (!this._dragger) {
       return;
     }
@@ -111,7 +114,7 @@ export class SmoothScrollDragPlugin<
   }
 
   /** Check if dragging is available */
-  private _getIsDragAvailable() {
+  protected _getIsDragAvailable() {
     const { component } = this;
 
     if (!component.props.isEnabled) {
@@ -130,7 +133,7 @@ export class SmoothScrollDragPlugin<
   }
 
   /** Callback on dragging start */
-  private _handleDragStart() {
+  protected _handleDragStart() {
     if (!this._getIsDragAvailable()) {
       return;
     }
@@ -148,7 +151,7 @@ export class SmoothScrollDragPlugin<
   }
 
   /** Callback on drag move */
-  private _handleDragMove({
+  protected _handleDragMove({
     event,
     coords,
     start,
@@ -199,7 +202,7 @@ export class SmoothScrollDragPlugin<
   /**
    * Callback on dragging end
    */
-  private _handleDragEnd() {
+  protected _handleDragEnd() {
     const { component } = this;
 
     // update styles

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

@@ -65,7 +65,7 @@ export const Component: FC = () => {
                 <button type="button">Test button</button>
               </div>
             ),
-            40
+            40,
           )}
 
           <button type="button">Test button</button>

package/src/components/SmoothScrollKeyboardPlugin/index.ts

@@ -9,9 +9,12 @@ export type { NSmoothScrollKeyboardPlugin };
  * Add keyboard navigation
  */
 export class SmoothScrollKeyboardPlugin<
-  StaticProps extends NSmoothScrollKeyboardPlugin.IStaticProps = NSmoothScrollKeyboardPlugin.IStaticProps,
-  ChangeableProps extends NSmoothScrollKeyboardPlugin.IChangeableProps = NSmoothScrollKeyboardPlugin.IChangeableProps,
-  CallbacksTypes extends NSmoothScrollKeyboardPlugin.ICallbacksTypes = NSmoothScrollKeyboardPlugin.ICallbacksTypes
+  StaticProps extends
+    NSmoothScrollKeyboardPlugin.IStaticProps = NSmoothScrollKeyboardPlugin.IStaticProps,
+  ChangeableProps extends
+    NSmoothScrollKeyboardPlugin.IChangeableProps = NSmoothScrollKeyboardPlugin.IChangeableProps,
+  CallbacksTypes extends
+    NSmoothScrollKeyboardPlugin.ICallbacksTypes = NSmoothScrollKeyboardPlugin.ICallbacksTypes,
 > extends Plugin<
   StaticProps,
   ChangeableProps,
@@ -25,19 +28,19 @@ export class SmoothScrollKeyboardPlugin<
     };
   }
 
-  private _tabDebounceTimeout?: NodeJS.Timeout;
+  protected _tabDebounceTimeout?: NodeJS.Timeout;
 
   /** Initialize the class */
   protected _init() {
     super._init();
 
     this.addEventListener(window, 'keydown', (event) =>
-      this._handleKeydown(event)
+      this._handleKeydown(event),
     );
   }
 
   /** Check if keyboard events may be ignored */
-  private _canIgnoreKeyboardEvents() {
+  protected _canIgnoreKeyboardEvents() {
     const { activeElement } = document;
 
     return (
@@ -48,7 +51,7 @@ export class SmoothScrollKeyboardPlugin<
   }
 
   /** Check if scroll container is in viewport */
-  private _checkScrollContainerInViewport() {
+  protected _checkScrollContainerInViewport() {
     const { viewport } = this.app;
 
     const bounding = this.component.container.getBoundingClientRect();
@@ -62,7 +65,7 @@ export class SmoothScrollKeyboardPlugin<
   }
 
   /** Check if scroll ended */
-  private _checkIsEndOfScroll() {
+  protected _checkIsEndOfScroll() {
     const { component } = this;
 
     return (

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

@@ -65,7 +65,7 @@ export const Component: FC = () => {
                 <button type="button">Test button</button>
               </div>
             ),
-            40
+            40,
           )}
 
           <button type="button">Test button</button>

package/src/components/SplitText/index.ts

@@ -11,8 +11,10 @@ export type { NSplitText };
  */
 export class SplitText<
   StaticProps extends NSplitText.IStaticProps = NSplitText.IStaticProps,
-  ChangeableProps extends NSplitText.IChangeableProps = NSplitText.IChangeableProps,
-  CallbacksTypes extends NSplitText.ICallbacksTypes = NSplitText.ICallbacksTypes
+  ChangeableProps extends
+    NSplitText.IChangeableProps = NSplitText.IChangeableProps,
+  CallbacksTypes extends
+    NSplitText.ICallbacksTypes = NSplitText.ICallbacksTypes,
 > extends ComponentClass<StaticProps, ChangeableProps, CallbacksTypes> {
   protected _getDefaultProps() {
     return {
@@ -31,16 +33,16 @@ export class SplitText<
   }
 
   /** Initial text */
-  private _initialText: string;
+  protected _initialText: string;
 
   /** Initial HTML content */
-  private _initialHTML: string;
+  protected _initialHTML: string;
 
   /** If the text is already split into letters and words */
-  private _isBaseSplit: boolean;
+  protected _isBaseSplit: boolean;
 
   /** Text container */
-  private _container: HTMLElement;
+  protected _container: HTMLElement;
 
   /** Text container */
   get container() {
@@ -48,7 +50,7 @@ export class SplitText<
   }
 
   /** Letters */
-  private _letters: NSplitText.ILetter[];
+  protected _letters: NSplitText.ILetter[];
 
   /** Letters */
   get letters() {
@@ -56,7 +58,7 @@ export class SplitText<
   }
 
   /** Words */
-  private _words: NSplitText.IWord[];
+  protected _words: NSplitText.IWord[];
 
   /** Words */
   get words() {
@@ -64,7 +66,7 @@ export class SplitText<
   }
 
   /** Lines */
-  private _lines: NSplitText.ILine[];
+  protected _lines: NSplitText.ILine[];
 
   /** Lines */
   get lines() {
@@ -88,7 +90,7 @@ export class SplitText<
     this._initialText = this._initialText.replace(/\s+\n/gm, '\n');
     this._initialText = this._initialText.replace(
       /<br( ?)(\/?)>/gm,
-      String.fromCharCode(10)
+      String.fromCharCode(10),
     );
 
     // a11y
@@ -112,7 +114,7 @@ export class SplitText<
   }
 
   /** Set resize events */
-  private _setResize() {
+  protected _setResize() {
     const { viewportTarget, resizeDebounce, hasLines } = this.props;
 
     if (!hasLines) {
@@ -156,7 +158,7 @@ export class SplitText<
   }
 
   /** Split the text into words */
-  private _splitIntoWords() {
+  protected _splitIntoWords() {
     const chars = this._initialText.split('');
 
     // create words
@@ -244,7 +246,7 @@ export class SplitText<
   }
 
   /** Split the text into letters */
-  private _splitIntoLetters() {
+  protected _splitIntoLetters() {
     // check if need to have letters
     if (!this.props.hasLetters) {
       return;
@@ -283,7 +285,7 @@ export class SplitText<
   }
 
   /** Append split words to the container */
-  private _appendWords() {
+  protected _appendWords() {
     this._words.forEach((word) => {
       this.container.appendChild(word.element);
 
@@ -298,7 +300,7 @@ export class SplitText<
   }
 
   /** Split the text into lines */
-  private _splitIntoLines() {
+  protected _splitIntoLines() {
     // first of all, remove all previous lines
     this._removeLines();
 
@@ -371,7 +373,7 @@ export class SplitText<
   }
 
   /** Remove all lines */
-  private _removeLines() {
+  protected _removeLines() {
     this._lines.forEach(({ element }) => element.remove());
     this._lines = [];
 

package/src/components/Timeline/index.ts

@@ -9,8 +9,9 @@ export type { NTimeline };
  */
 export class Timeline<
   StaticProps extends NTimeline.IStaticProps = NTimeline.IStaticProps,
-  ChangeableProps extends NTimeline.IChangeableProps = NTimeline.IChangeableProps,
-  CallbacksTypes extends NTimeline.ICallbacksTypes = NTimeline.ICallbacksTypes
+  ChangeableProps extends
+    NTimeline.IChangeableProps = NTimeline.IChangeableProps,
+  CallbacksTypes extends NTimeline.ICallbacksTypes = NTimeline.ICallbacksTypes,
 > extends BaseTimeline<StaticProps, ChangeableProps, CallbacksTypes> {
   protected _getDefaultProps() {
     return {
@@ -21,10 +22,10 @@ export class Timeline<
   }
 
   /** The animation frame */
-  private _animationFrame?: number;
+  protected _animationFrame?: number;
 
   /** Last time when animationFrame callback has been called */
-  private _animationFrameLastTime: number;
+  protected _animationFrameLastTime: number;
 
   /** Timeline is playing */
   get isPlaying() {
@@ -32,7 +33,7 @@ export class Timeline<
   }
 
   /** Timeline is reversed */
-  private _isReversed: boolean;
+  protected _isReversed: boolean;
 
   /** Timeline is reversed */
   get isReversed() {
@@ -40,7 +41,7 @@ export class Timeline<
   }
 
   /** Timeline is paused */
-  private _isPaused: boolean;
+  protected _isPaused: boolean;
 
   /** Timeline is paused */
   get isPaused() {
@@ -116,7 +117,7 @@ export class Timeline<
   }
 
   /** Start animation */
-  private _animate() {
+  protected _animate() {
     if (this.isPaused) {
       return;
     }
@@ -148,7 +149,7 @@ export class Timeline<
 
     // continue animation
     this._animationFrame = window.requestAnimationFrame(
-      this._animate.bind(this)
+      this._animate.bind(this),
     );
   }
 

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

@@ -25,7 +25,7 @@ export const Nested: FC = () => {
 
     if (containerRef.current) {
       const children = Array.from(
-        containerRef.current.children
+        containerRef.current.children,
       ) as HTMLElement[];
 
       const scopes = spreadScope(children.length, 0.9);

package/src/components/index.ts

@@ -11,6 +11,7 @@ export * from './ProgressPreloader';
 export * from './ScrollBar';
 export * from './ScrollView';
 export * from './SectionScrollProgress';
+export * from './SlideProgress';
 export * from './SmoothScroll';
 export * from './SmoothScrollDragPlugin';
 export * from './SmoothScrollKeyboardPlugin';