vevet 2.17.0 → 3.0.0-beta.0

package/src/base/MutableProps/stories/index.tsx

@@ -0,0 +1,77 @@
+import React, { FC, useEffect, useState } from 'react';
+import { MutableProps } from '..';
+
+interface IStaticProps {
+  neverChange: 'never change';
+}
+
+interface IChangeableProps {
+  viewport: string;
+  device: string;
+  name: string;
+}
+
+export const Component: FC = () => {
+  const [features, setFeatures] = useState<any>({});
+
+  useEffect(() => {
+    const props = new MutableProps<IStaticProps, IChangeableProps>(
+      {
+        neverChange: 'never change',
+        viewport: 'none',
+        device: 'none',
+        name: 'first name',
+      },
+      () => {
+        // eslint-disable-next-line no-console
+        console.log('changed on viewport resize', { ...props.props });
+
+        setFeatures({ ...props.props });
+      }
+    );
+
+    props.changeProps({ name: 'second name' });
+
+    props.addResponsiveProps({
+      breakpoint: 'device_mobile',
+      settings: { device: 'mobile' },
+    });
+
+    props.addResponsiveProps({
+      breakpoint: 'device_tablet',
+      settings: { device: 'tablet' },
+    });
+
+    props.addResponsiveProps({
+      breakpoint: 'device_phone',
+      settings: { device: 'phone' },
+    });
+
+    props.addResponsiveProps({
+      breakpoint: 'viewport_desktop',
+      settings: { viewport: 'desktop' },
+    });
+
+    props.addResponsiveProps({
+      breakpoint: 'viewport_tablet',
+      settings: { viewport: 'tablet' },
+    });
+
+    props.addResponsiveProps({
+      breakpoint: 'viewport_phone',
+      settings: { viewport: 'phone' },
+    });
+
+    return () => props.destroy();
+  }, []);
+
+  return (
+    <div>
+      {Object.entries(features).map(([key, value]) => (
+        <div key={key}>
+          {key}: {String(value)}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/base/MutableProps/types.ts

@@ -0,0 +1,26 @@
+export namespace NMutableProps {
+  export interface IResponsive<S> {
+    /**
+     * The breakpoint at which properties will change.
+     * Available breakpoints:
+     * <ul>
+     *   <li>any number - width breakpoint</li>
+     *   <li>'d' - for desktop size</li>
+     *   <li>'t' - for tablet size</li>
+     *   <li>'p' - for phone size</li>
+     *   <li>'phone' - for phone devices</li>
+     *   <li>'tablet' - for tablet devices</li>
+     *   <li>'mobile' - for phone or tablet devices</li>
+     * </ul>
+     */
+    breakpoint:
+      | number
+      | 'viewport_desktop'
+      | 'viewport_tablet'
+      | 'viewport_phone'
+      | 'device_phone'
+      | 'device_tablet'
+      | 'device_mobile';
+    settings: Partial<S>;
+  }
+}

package/src/base/Plugin/index.ts

@@ -0,0 +1,38 @@
+import { Module } from '../Module';
+import { NPlugin } from './types';
+
+export type { NPlugin };
+
+/**
+ * A class for Plugins.
+ */
+export abstract class Plugin<
+  StaticProps extends NPlugin.IStaticProps = NPlugin.IStaticProps,
+  ChangeableProps extends NPlugin.IChangeableProps = NPlugin.IChangeableProps,
+  CallbacksTypes extends NPlugin.ICallbacksTypes = NPlugin.ICallbacksTypes,
+  Component = any
+> extends Module<StaticProps, ChangeableProps, CallbacksTypes> {
+  constructor(initialProps?: StaticProps & ChangeableProps) {
+    super(initialProps, false);
+  }
+
+  private _component!: Component;
+
+  get component() {
+    return this._component;
+  }
+
+  set component(value) {
+    this._component = value;
+  }
+
+  public init() {
+    if (!this.component) {
+      throw new Error(
+        'Component is unknown. Be sure that `plugin.component` is non-nullable.'
+      );
+    }
+
+    super.init();
+  }
+}

package/src/base/Plugin/types.ts

@@ -0,0 +1,9 @@
+import { NModule } from '../Module/types';
+
+export namespace NPlugin {
+  export interface IStaticProps {}
+
+  export interface IChangeableProps {}
+
+  export interface ICallbacksTypes extends NModule.ICallbacksTypes {}
+}

package/src/base/index.ts

@@ -0,0 +1,5 @@
+export * from './Callbacks';
+export * from './Component';
+export * from './Module';
+export * from './MutableProps';
+export * from './Plugin';

package/src/components/AnimationFrame/index.ts

@@ -0,0 +1,225 @@
+import { Component as ComponentClass } from '@/base/Component';
+import { NAnimationFrame } from './types';
+
+export type { NAnimationFrame };
+
+/**
+ * Launch an animation frame with a certain FPS
+ */
+export class AnimationFrame<
+  StaticProps extends NAnimationFrame.IStaticProps = NAnimationFrame.IStaticProps,
+  ChangeableProps extends NAnimationFrame.IChangeableProps = NAnimationFrame.IChangeableProps,
+  CallbacksTypes extends NAnimationFrame.ICallbacksTypes = NAnimationFrame.ICallbacksTypes
+> extends ComponentClass<StaticProps, ChangeableProps, CallbacksTypes> {
+  protected _getDefaultProps() {
+    return {
+      ...super._getDefaultProps(),
+      fps: 'auto',
+      autoFpsFrames: 50,
+      isEnabled: false,
+    };
+  }
+
+  /** If the frame is launched */
+  private _isPlaying: boolean;
+
+  get isPlaying() {
+    return this._isPlaying;
+  }
+
+  /** The animation frame */
+  private _frame: number | null;
+
+  /** Last frame time */
+  private _frameIndex: number;
+
+  /** First frame time */
+  private _firstFrameTime: null | number;
+
+  /** Last frame time */
+  private _lastFrameTime: null | number;
+
+  /** Array of frame time durations */
+  private _frameDurations: number[];
+
+  /** Computed fps */
+  private _computedFPS: number;
+
+  /** Computed real time fps */
+  get computedFPS() {
+    return this._computedFPS;
+  }
+
+  /** Coefficient of standard fps (60) divided by computed fps */
+  get easeMultiplier() {
+    return 60 / this.computedFPS;
+  }
+
+  constructor(initialProps?: StaticProps & ChangeableProps, canInit = true) {
+    super(initialProps, false);
+
+    this._isPlaying = false;
+    this._frame = null;
+    this._frameIndex = -1;
+    this._firstFrameTime = null;
+    this._lastFrameTime = null;
+    this._frameDurations = [];
+    this._computedFPS = this.props.fps !== 'auto' ? this.props.fps : 60;
+
+    if (canInit) {
+      this.init();
+    }
+  }
+
+  protected _init() {
+    super._init();
+
+    if (this.props.isEnabled) {
+      this.play();
+    }
+  }
+
+  protected _onPropsMutate() {
+    super._onPropsMutate();
+
+    this._frameIndex = -1;
+    this._firstFrameTime = null;
+    this._lastFrameTime = null;
+
+    if (this.props.isEnabled) {
+      this._play();
+    } else {
+      this._pause();
+    }
+  }
+
+  /** Play animation */
+  public play() {
+    if (this.isDestroyed) {
+      return;
+    }
+
+    if (this.props.isEnabled) {
+      return;
+    }
+
+    this.changeProps({ isEnabled: true } as ChangeableProps);
+  }
+
+  /** Play animation */
+  private _play() {
+    if (this.isPlaying) {
+      return;
+    }
+
+    this._isPlaying = true;
+
+    this.callbacks.tbt('play', undefined);
+    this.callbacks.tbt('toggle', undefined);
+
+    this._frame = window.requestAnimationFrame(this._animate.bind(this));
+  }
+
+  /** Pause animation */
+  public pause() {
+    if (!this.props.isEnabled) {
+      return;
+    }
+
+    this.changeProps({ isEnabled: false } as ChangeableProps);
+  }
+
+  /** Pause animation */
+  private _pause() {
+    if (!this.isPlaying) {
+      return;
+    }
+
+    if (this._frame) {
+      window.cancelAnimationFrame(this._frame);
+      this._frame = null;
+    }
+
+    this._isPlaying = false;
+
+    this.callbacks.tbt('pause', undefined);
+    this.callbacks.tbt('toggle', undefined);
+  }
+
+  /** Launch the animation frame */
+  private _animate() {
+    if (!this._isPlaying) {
+      return;
+    }
+
+    this._frame = window.requestAnimationFrame(this._animate.bind(this));
+
+    // update time
+    const startTime = +new Date();
+    if (this._firstFrameTime === null) {
+      this._firstFrameTime = startTime;
+    }
+
+    // calculate frame index
+    const minFrameDuration =
+      this.props.fps === 'auto' ? 1 : 1000 / this.props.fps;
+    const newFrameIndex = Math.floor(
+      (startTime - this._firstFrameTime) / minFrameDuration
+    );
+
+    // break if frame index the same
+    if (newFrameIndex <= this._frameIndex) {
+      return;
+    }
+
+    // update frame index
+    this._frameIndex = newFrameIndex;
+
+    // compute fps
+    this._computeFPS(startTime);
+
+    // launch callbacks
+    this.callbacks.tbt('frame', undefined);
+
+    // update vars
+    this._lastFrameTime = startTime;
+  }
+
+  /** Compute real-time FPS */
+  private _computeFPS(startTime: number) {
+    const lastFrameDuration = startTime - (this._lastFrameTime ?? startTime);
+
+    // skip frames that seem not real
+    if (lastFrameDuration <= 0 || lastFrameDuration > 250) {
+      return;
+    }
+
+    this._frameDurations.push(lastFrameDuration);
+
+    if (this._frameDurations.length < this.props.autoFpsFrames) {
+      return;
+    }
+
+    const totalFramesDuration = this._frameDurations.reduce(
+      (prev, curr) => prev + curr
+    );
+
+    const approximateFrameDuration =
+      totalFramesDuration / this._frameDurations.length;
+
+    const computedFPS = Math.floor(1000 / approximateFrameDuration);
+    const normalizedFPS = Math.round(computedFPS / 10) * 10;
+
+    this._computedFPS = normalizedFPS;
+
+    // clear durations
+    this._frameDurations = [];
+  }
+
+  /** Destroy the animation frame */
+  protected _destroy() {
+    this.pause();
+
+    super._destroy();
+  }
+}

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

@@ -0,0 +1,28 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { Component } from '.';
+
+type TComponent = typeof Component;
+
+const meta: Meta<TComponent> = {
+  title: 'Components/AnimationFrame',
+  component: Component,
+};
+
+export default meta;
+
+export const Default: StoryObj<TComponent> = {
+  args: {
+    fps: 'auto',
+  },
+  argTypes: {
+    fps: {
+      control: 'text',
+    },
+  },
+};
+
+export const ExactFPS: StoryObj<TComponent> = {
+  args: {
+    fps: 20,
+  },
+};

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

@@ -0,0 +1,75 @@
+import React, { FC, useEffect, useState } from 'react';
+import { AnimationFrame, NAnimationFrame } from '..';
+
+interface IProps {
+  fps: 'auto' | number;
+}
+
+export const Component: FC<IProps> = ({ fps }) => {
+  const [animationFrame, setAnimationFrame] = useState<AnimationFrame>();
+
+  const [targetFps, setTargetFps] =
+    useState<NAnimationFrame.IChangeableProps['fps']>(0);
+  const [computedFps, setComputedFps] = useState(0);
+  const [time, setTime] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  useEffect(() => {
+    const frame = new AnimationFrame({ fps }, false);
+
+    frame.addResponsiveProps({
+      breakpoint: 'viewport_phone',
+      settings: {
+        fps: 10,
+      },
+    });
+
+    frame.init();
+    frame.init();
+
+    setAnimationFrame(frame);
+    setTargetFps(frame.props.fps);
+
+    frame.addCallback('propsMutate', () => setTargetFps(frame.props.fps));
+
+    frame.addCallback('frame', () => {
+      setComputedFps(frame.computedFPS);
+      setTime(+new Date());
+    });
+
+    frame.addCallback('toggle', () => setIsPlaying(frame.isPlaying));
+
+    frame.addCallback('destroy', () => {
+      // eslint-disable-next-line no-console
+      console.log('destroy');
+    });
+
+    return () => frame.destroy();
+  }, [fps]);
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => animationFrame?.play()}
+        disabled={isPlaying}
+      >
+        Play
+      </button>
+
+      <button
+        type="button"
+        onClick={() => animationFrame?.pause()}
+        disabled={!isPlaying}
+      >
+        Pause
+      </button>
+
+      <ul>
+        <li>Target FPS: {targetFps}</li>
+        <li>Computed FPS: {computedFps}</li>
+        <li>Time: {time}</li>
+      </ul>
+    </div>
+  );
+};

package/src/components/AnimationFrame/types.ts

@@ -0,0 +1,30 @@
+import { NComponent } from '@/base/Component/types';
+
+export namespace NAnimationFrame {
+  export interface IStaticProps extends NComponent.IStaticProps {}
+
+  export interface IChangeableProps extends NComponent.IChangeableProps {
+    /**
+     * Frames per second
+     * @default 'auto'
+     */
+    fps?: 'auto' | number;
+    /**
+     * How many frames to be tested to detect real FPS
+     * @default 50
+     */
+    autoFpsFrames?: number;
+    /**
+     * Enabled animation
+     * @default false
+     */
+    isEnabled?: boolean;
+  }
+
+  export interface ICallbacksTypes extends NComponent.ICallbacksTypes {
+    play: undefined;
+    pause: undefined;
+    toggle: undefined;
+    frame: undefined;
+  }
+}

package/src/components/BaseTimeline/index.ts

@@ -0,0 +1,120 @@
+import { Component as ComponentClass } from '@/base/Component';
+import { NBaseTimeline } from './types';
+import { clampScope, easing } from '@/utils/math';
+import { uid } from '@/utils/common';
+
+export type { NBaseTimeline };
+
+/**
+ * `BaseTimeline` is the base class for the `Timeline` itself.
+ * The difference between the coponents is that `BaseTimeline` has no autonomous animation.
+ */
+export class BaseTimeline<
+  StaticProps extends NBaseTimeline.IStaticProps = NBaseTimeline.IStaticProps,
+  ChangeableProps extends NBaseTimeline.IChangeableProps = NBaseTimeline.IChangeableProps,
+  CallbacksTypes extends NBaseTimeline.ICallbacksTypes = NBaseTimeline.ICallbacksTypes
+> extends ComponentClass<StaticProps, ChangeableProps, CallbacksTypes> {
+  protected _getDefaultProps() {
+    return {
+      ...super._getDefaultProps(),
+      easing: this.app.props.easing,
+      scope: [0, 1],
+      hasNestedEasingProgress: false,
+    };
+  }
+
+  /** Global timeline progress */
+  private _progress: number;
+
+  /** Global timeline progress */
+  get progress() {
+    return this._progress;
+  }
+
+  set progress(val: number) {
+    this._progress = val;
+
+    this._handleProgressUpdate();
+  }
+
+  /** Easing progress */
+  private _easing: number;
+
+  /** Easing progress */
+  get easing() {
+    return this._easing;
+  }
+
+  /** Nested timelines */
+  private _nestedTimelines: { id: string; timeline: BaseTimeline }[];
+
+  constructor(initialProps?: StaticProps & ChangeableProps, canInit = true) {
+    super(initialProps, false);
+
+    // set default vars
+    this._progress = 0;
+    this._easing = 0;
+    this._nestedTimelines = [];
+
+    if (canInit) {
+      this.init();
+    }
+  }
+
+  /** Add a nested timeline */
+  public addNestedTimeline(timeline: BaseTimeline) {
+    const id = uid();
+
+    this._nestedTimelines.push({ id, timeline });
+
+    return {
+      remove: () => {
+        this._nestedTimelines = this._nestedTimelines.filter(
+          ({ id: nestedTimelineId }) => nestedTimelineId !== id
+        );
+      },
+    };
+  }
+
+  /** Handle progress event */
+  protected _handleProgressUpdate() {
+    this._easing = easing(this._progress, this.props.easing);
+
+    this.callbacks.tbt('progress', {
+      progress: this._progress,
+      easing: this._easing,
+    });
+
+    this._renderNestedTimelines();
+  }
+
+  /** Render nested timelines */
+  private _renderNestedTimelines() {
+    const { length } = this._nestedTimelines;
+    if (length === 0) {
+      return;
+    }
+
+    const progressForNestedTimeline = this.props.hasNestedEasingProgress
+      ? this.easing
+      : this.progress;
+
+    this._nestedTimelines.forEach(({ timeline }) => {
+      const timelineProgress = clampScope(
+        progressForNestedTimeline,
+        timeline.props.nestedScope,
+        [0, 1]
+      );
+
+      // eslint-disable-next-line no-param-reassign
+      timeline.progress = timelineProgress;
+    });
+  }
+
+  /** Destroy the module */
+  protected _destroy() {
+    super._destroy();
+
+    this._nestedTimelines.forEach(({ timeline }) => timeline.destroy());
+  }
+}

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

@@ -0,0 +1,65 @@
+import React, { FC, useEffect, useRef, useState } from 'react';
+import { BaseTimeline } from '..';
+import { Easing } from '@/utils/math';
+
+export const Basic: FC = () => {
+  const thumbRef = useRef<HTMLDivElement>(null);
+
+  const [timeline, setTimeline] = useState<BaseTimeline>();
+
+  useEffect(() => {
+    const instance = new BaseTimeline({ easing: Easing.easeInOutBounce });
+    setTimeline(instance);
+
+    instance.addCallback('progress', ({ easing }) => {
+      if (!thumbRef.current) {
+        return;
+      }
+
+      thumbRef.current.style.left = `${easing * 100}%`;
+    });
+
+    return () => instance.destroy();
+  }, []);
+
+  return (
+    <>
+      <input
+        type="range"
+        min={0}
+        max={1}
+        defaultValue={0}
+        step={0.0001}
+        style={{ width: '100%' }}
+        onChange={(event) => {
+          if (timeline) {
+            timeline.progress = 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>
+    </>
+  );
+};