vevet 3.20.0 → 4.0.0-beta.0

package/src/components/SmoothScroll/types.ts

@@ -1,119 +0,0 @@
-import { NComponent } from '@/base/Component/types';
-import { AnimationFrame } from '../AnimationFrame';
-import { TOnResizeTarget } from '@/utils/listeners/onResize';
-
-export namespace NSmoothScroll {
-  export interface IStaticProps extends NComponent.IStaticProps {
-    /**
-     * Container selector
-     * @default '#v-smooth-scroll'
-     */
-    container?: string | HTMLElement;
-    /**
-     * Scrollable elements inside the wrapper
-     * @default false
-     */
-    elements?:
-      | false
-      | string
-      | NodeListOf<HTMLElement>
-      | HTMLElement
-      | HTMLElement[];
-    /**
-     * Pass an `AnimationFrame` instance if you want to control scrolling animation outside this class.
-     * @default false
-     */
-    animationFrame?: false | AnimationFrame;
-    /**
-     * Viewport target
-     * @default 'any'
-     */
-    viewportTarget?: TOnResizeTarget;
-    /**
-     * Timeout of resize event
-     * @default 0
-     */
-    resizeDebounce?: number;
-    /**
-     * If need to add will-change to scrollable elements
-     * @default true
-     */
-    hasWillChange?: boolean;
-    /**
-     * Sometimes scrolling may be choppy because of large decimal values in transforms.
-     * In such cases you may want to use this property.
-     * It works on the basis of "toFixed()" method. Only integers
-     * @default 2
-     */
-    translatePrecision?: false | number;
-  }
-
-  export interface IChangeableProps extends NComponent.IChangeableProps {
-    /**
-     * Scrolling is enabled
-     * @default true
-     */
-    isEnabled?: boolean;
-    /**
-     * Use wheel
-     * @default true
-     */
-    hasWheel?: boolean;
-    /**
-     * Wheel speed
-     * @default 1
-     */
-    wheelSpeed?: number;
-    /**
-     * Main scrolling direction
-     * @default 'vertical'
-     */
-    direction?: 'horizontal' | 'vertical';
-    /**
-     * Inverse scrolling values
-     * @default false
-     */
-    isInversedHandlerDirection?: boolean;
-    /**
-     * Automatically stop animation frame when the target and current values are equal
-     * @default true
-     */
-    shouldAutoStop?: boolean;
-    /**
-     * Stop propagation when scrolling
-     * @default true
-     */
-    hasStopPropagation?: boolean;
-    /**
-     * Linear interpolation (from 0 to 1). Scroll elements may have different lerp values: via `smoothScrollLerp` property or the attribute `data-smooth-scroll-lerp`.
-     * @default 0.1
-     */
-    lerp?: number;
-    /**
-     * On different screens with different FPS, animation may be slower or faster.
-     * This property is to normalize animation speed across different screens.
-     * @default true
-     */
-    isFpsNormalized?: boolean;
-    /**
-     * @default 0.1
-     */
-    lerpApproximation?: number;
-  }
-
-  export interface ICallbacksTypes extends NComponent.ICallbacksTypes {
-    render: undefined;
-    resize: undefined;
-    wheel: IWheelParameter;
-  }
-
-  export interface IWheelParameter {
-    event: WheelEvent;
-  }
-
-  export interface IElement extends HTMLElement {
-    smoothScrollTop: number;
-    smoothScrollLeft: number;
-    smoothScrollLerp?: number;
-  }
-}

package/src/components/SmoothScrollDragPlugin/types.ts

@@ -1,40 +0,0 @@
-import { NPlugin } from '@/base/Plugin/types';
-
-export namespace NSmoothScrollDragPlugin {
-  export interface IStaticProps extends NPlugin.IStaticProps {}
-
-  export interface IChangeableProps extends NPlugin.IChangeableProps {
-    /**
-     * Enable dragger
-     * @default true
-     */
-    isEnabled?: boolean;
-    /**
-     * Dragger speed
-     * @default 1
-     */
-    speed?: number;
-    /**
-     * Linear interpolation for `SmoothScroll` (from 0 to 1);
-     * If false, the value of `SmoothScroll.props.lerp` will be used.
-     * @default false
-     */
-    lerp?: number | false;
-    /**
-     * Stop propagation
-     * @default false
-     */
-    stopPropagationThreshold?: false | number;
-    /**
-     * Stop propagation direction
-     * @default 'y'
-     */
-    stopPropagationDirection?: 'x' | 'y';
-  }
-
-  export interface ICallbacksTypes extends NPlugin.ICallbacksTypes {
-    start: undefined;
-    move: undefined;
-    end: undefined;
-  }
-}

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

@@ -1,135 +0,0 @@
-import React, { FC, useEffect, useRef, useState } from 'react';
-import { Timeline } from '..';
-import { EaseInOutBounce, spreadScope } from '@/utils/math';
-import { BaseTimeline } from '../../BaseTimeline';
-
-export const Nested: FC = () => {
-  const containerRef = 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', ({ p }) => {
-      if (inputRef.current) {
-        inputRef.current.value = `${p}`;
-      }
-    });
-
-    if (containerRef.current) {
-      const children = Array.from(
-        containerRef.current.children,
-      ) as HTMLElement[];
-
-      const scopes = spreadScope(children.length, 0.9);
-
-      children.forEach((child, index) => {
-        const nestedTm = new BaseTimeline({
-          nestedScope: scopes[index],
-          easing: EaseInOutBounce,
-        });
-
-        nestedTm.addCallback('progress', ({ e }) => {
-          // eslint-disable-next-line no-param-reassign
-          child.style.transform = `scale(${e}, 1)`;
-        });
-
-        instance.addNestedTimeline(nestedTm);
-      });
-    }
-
-    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
-        ref={containerRef}
-        style={{
-          marginTop: 20,
-          width: '100%',
-          display: 'grid',
-          gap: 10,
-        }}
-      >
-        <div
-          style={{
-            height: '30px',
-            backgroundColor: '#F7DBA7',
-            transform: 'scale(0, 1)',
-          }}
-        />
-
-        <div
-          style={{
-            height: '30px',
-            backgroundColor: '#F1AB86',
-            transform: 'scale(0, 1)',
-          }}
-        />
-
-        <div
-          style={{
-            height: '30px',
-            backgroundColor: '#C57B57',
-            transform: 'scale(0, 1)',
-          }}
-        />
-
-        <div
-          style={{
-            height: '30px',
-            backgroundColor: '#1E2D2F',
-            transform: 'scale(0, 1)',
-          }}
-        />
-
-        <div
-          style={{
-            height: '30px',
-            backgroundColor: '#041F1E',
-            transform: 'scale(0, 1)',
-          }}
-        />
-      </div>
-    </>
-  );
-};

package/src/styles/globals/index.scss

@@ -1,18 +0,0 @@
-
-@include viewport-desktop {
-  .desktop-hide {
-    display: none !important;
-  }
-}
-
-@include viewport-tablet {
-  .tablet-hide {
-    display: none !important;
-  }
-}
-
-@include viewport-phone {
-  .phone-hide {
-    display: none !important;
-  }
-}

package/src/vevet.ts

@@ -1,4 +0,0 @@
-import { Application } from '.';
-
-export const vevet =
-  typeof window.vevetApp !== 'undefined' ? window.vevetApp : new Application();