vevet 4.4.2 → 5.0.1

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

@@ -1,80 +0,0 @@
-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 });
-      },
-    );
-
-    const timeout = setTimeout(() => {
-      props.changeProps({ name: 'second name' });
-    }, 1000);
-
-    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 () => {
-      clearTimeout(timeout);
-      props.destroy();
-    };
-  }, []);
-
-  return (
-    <div>
-      {Object.entries(features).map(([key, value]) => (
-        <div key={key}>{`${key}: ${value}`}</div>
-      ))}
-    </div>
-  );
-};

package/src/base/MutableProps/types.ts

@@ -1,33 +0,0 @@
-export namespace NMutableProps {
-  export interface IResponsive<S> {
-    /**
-     * Defines the breakpoint at which the properties should change.
-     * The `breakpoint` can represent either a specific screen width (in pixels)
-     * or a predefined device type or viewport size.
-     *
-     * Available breakpoints:
-     * <ul>
-     *   <li><code>number</code> - Width breakpoint in pixels, e.g., 768 for tablets or 1024 for desktops.</li>
-     *   <li><code>'viewport_desktop'</code> - When the viewport width is categorized as desktop size.</li>
-     *   <li><code>'viewport_tablet'</code> - When the viewport width is categorized as tablet size.</li>
-     *   <li><code>'viewport_phone'</code> - When the viewport width is categorized as phone size.</li>
-     *   <li><code>'device_phone'</code> - When the user is on a phone device, regardless of viewport size.</li>
-     *   <li><code>'device_tablet'</code> - When the user is on a tablet device, regardless of viewport size.</li>
-     *   <li><code>'device_mobile'</code> - When the user is on any mobile device (either phone or tablet).</li>
-     * </ul>
-     */
-    breakpoint:
-      | number
-      | 'viewport_desktop'
-      | 'viewport_tablet'
-      | 'viewport_phone'
-      | 'device_phone'
-      | 'device_tablet'
-      | 'device_mobile';
-
-    /**
-     * The property settings that should be applied when the defined breakpoint is matched.
-     */
-    settings: Partial<S>;
-  }
-}

package/src/base/Plugin/index.ts

@@ -1,61 +0,0 @@
-import { Module } from '../Module';
-import { NPlugin } from './types';
-
-export type { NPlugin };
-
-/**
- * A base abstract class for Plugins that extend the functionality of components.
- * A plugin is designed to attach to a component and modify or enhance its behavior.
- * It inherits from the {@link Module} class and adds functionality to work with a component.
- */
-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> {
-  /**
-   * Constructs the plugin.
-   *
-   * @param initialProps - Initial static and changeable properties for the plugin.
-   */
-  constructor(initialProps?: StaticProps & ChangeableProps) {
-    super(initialProps, false);
-  }
-
-  /**
-   * The component to which the plugin is attached.
-   * This property must be set before initializing the plugin.
-   */
-  private _component!: Component;
-
-  /**
-   * Retrieves the component to which this plugin is attached.
-   */
-  get component() {
-    return this._component;
-  }
-
-  /**
-   * Sets the component for this plugin. This method is called by the parent component when the plugin is added.
-   */
-  set component(value) {
-    this._component = value;
-  }
-
-  /**
-   * Initializes the plugin and ensures it is properly associated with a component.
-   * If the component is not set before calling `init`, it throws an error.
-   *
-   * @throws {Error} If `component` is not set.
-   */
-  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

@@ -1,20 +0,0 @@
-import { NModule } from '../Module/types';
-
-export namespace NPlugin {
-  /**
-   * Static properties for plugins. These properties remain constant throughout the lifecycle of the plugin.
-   */
-  export interface IStaticProps extends NModule.IStaticProps {}
-
-  /**
-   * Changeable properties for plugins. These properties can change dynamically during the lifecycle of the plugin.
-   * Extends from {@link NModule.IChangeableProps}, providing plugins with the ability to update their properties over time.
-   */
-  export interface IChangeableProps extends NModule.IChangeableProps {}
-
-  /**
-   * Defines the available callback types for plugins. These callbacks allow plugins to respond to lifecycle events or property changes.
-   * Extends from {@link NModule.ICallbacksTypes}, meaning that plugins share the same callback structure as modules.
-   */
-  export interface ICallbacksTypes extends NModule.ICallbacksTypes {}
-}

package/src/components/AnimationFrame/index.ts

@@ -1,225 +0,0 @@
-import { Component as ComponentClass } from '@/base/Component';
-import { NAnimationFrame } from './types';
-
-export type { NAnimationFrame };
-
-/**
- * Launches an animation frame with a specified FPS, allowing
- * control over playback and FPS calculations in real-time.
- *
- * @link See examples https://antonbobrov.github.io/vevet-demo/animation-frame/
- *
- * @link See docs https://antonbobrov.github.io/vevet/classes/AnimationFrame.html
- */
-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: 10,
-      isEnabled: false,
-    };
-  }
-
-  /** Whether the animation frame is currently playing */
-  protected _isPlaying: boolean;
-
-  /** Returns the current playback state of the animation frame */
-  get isPlaying() {
-    return this._isPlaying;
-  }
-
-  /** The ID of the currently active requestAnimationFrame, or `null` if inactive */
-  protected _raf: number | null;
-
-  /** Index of the current animation frame */
-  protected _rafIndex: number;
-
-  /** The timestamp of the first frame in the animation sequence */
-  protected _rafFirst: null | number;
-
-  /** The timestamp of the last frame in the animation sequence */
-  protected _rafLast: null | number;
-
-  /** Array storing the duration of each frame in milliseconds */
-  protected _durations: number[];
-
-  /** The computed frames per second based on real-time performance */
-  protected _computedFPS: number;
-
-  /** Returns the current computed FPS, which may differ from the set FPS */
-  get computedFPS() {
-    return this._computedFPS;
-  }
-
-  /** Coefficient that scales based on a target of 60 FPS compared to the computed FPS */
-  get fpsMultiplier() {
-    return 60 / this.computedFPS;
-  }
-
-  constructor(initialProps?: StaticProps & ChangeableProps, canInit = true) {
-    super(initialProps, false);
-
-    this._isPlaying = false;
-    this._raf = null;
-    this._rafIndex = -1;
-    this._rafFirst = null;
-    this._rafLast = null;
-    this._durations = [];
-    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._rafIndex = -1;
-    this._rafFirst = null;
-    this._rafLast = null;
-
-    if (this.props.isEnabled) {
-      this._play();
-    } else {
-      this._pause();
-    }
-  }
-
-  /** Begins the animation loop */
-  public play() {
-    if (this.isDestroyed) {
-      return;
-    }
-
-    if (this.props.isEnabled) {
-      return;
-    }
-
-    this.changeProps({ isEnabled: true } as ChangeableProps);
-  }
-
-  /** Internal method to start the animation loop */
-  protected _play() {
-    if (this.isPlaying) {
-      return;
-    }
-
-    this._isPlaying = true;
-
-    this.callbacks.tbt('play', undefined);
-    this.callbacks.tbt('toggle', undefined);
-
-    this._raf = window.requestAnimationFrame(this._animate.bind(this));
-  }
-
-  /** Pauses the animation loop */
-  public pause() {
-    if (!this.props.isEnabled) {
-      return;
-    }
-
-    this.changeProps({ isEnabled: false } as ChangeableProps);
-  }
-
-  /** Internal method to pause the animation loop */
-  protected _pause() {
-    if (!this.isPlaying) {
-      return;
-    }
-
-    if (this._raf) {
-      window.cancelAnimationFrame(this._raf);
-      this._raf = null;
-    }
-
-    this._isPlaying = false;
-
-    this.callbacks.tbt('pause', undefined);
-    this.callbacks.tbt('toggle', undefined);
-  }
-
-  /** Handles each frame of the animation, calculates FPS, and triggers callbacks */
-  protected _animate() {
-    if (!this._isPlaying) {
-      return;
-    }
-
-    this._raf = window.requestAnimationFrame(this._animate.bind(this));
-
-    const startTime = Date.now();
-    if (this._rafFirst === null) {
-      this._rafFirst = startTime;
-    }
-
-    const minFrameDuration =
-      this.props.fps === 'auto' ? 1 : 1000 / this.props.fps;
-    const newFrameIndex = Math.floor(
-      (startTime - this._rafFirst) / minFrameDuration,
-    );
-
-    if (newFrameIndex <= this._rafIndex) {
-      return;
-    }
-
-    this._rafIndex = newFrameIndex;
-
-    this._computeFPS(startTime);
-
-    this.callbacks.tbt('frame', undefined);
-
-    this._rafLast = startTime;
-  }
-
-  /** Computes the real-time FPS based on the duration between frames */
-  protected _computeFPS(startTime: number) {
-    const lastFrameDuration = startTime - (this._rafLast ?? startTime);
-
-    if (lastFrameDuration <= 0 || lastFrameDuration > 250) {
-      return;
-    }
-
-    this._durations.push(lastFrameDuration);
-
-    if (this._durations.length < this.props.autoFpsFrames) {
-      return;
-    }
-
-    const totalFramesDuration = this._durations.reduce(
-      (prev, curr) => prev + curr,
-    );
-
-    const approximateFrameDuration =
-      totalFramesDuration / this._durations.length;
-
-    const computedFPS = Math.floor(1000 / approximateFrameDuration);
-    const normalizedFPS = Math.round(computedFPS / 10) * 10;
-
-    this._computedFPS = normalizedFPS;
-
-    this._durations = [];
-  }
-
-  /** Destroys the animation frame and stops the loop */
-  protected _destroy() {
-    this.pause();
-
-    super._destroy();
-  }
-}

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

@@ -1,28 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,50 +0,0 @@
-import { NComponent } from '@/base/Component/types';
-
-export namespace NAnimationFrame {
-  export interface IStaticProps extends NComponent.IStaticProps {}
-
-  export interface IChangeableProps extends NComponent.IChangeableProps {
-    /**
-     * Frames per second (FPS) for the animation.
-     * If set to 'auto', the FPS will be dynamically determined based on the system's performance.
-     * @default 'auto'
-     */
-    fps?: 'auto' | number;
-
-    /**
-     * The number of frames to test for detecting the real FPS when 'auto' is selected.
-     * This determines how many frames are measured before calculating the average FPS.
-     * @default 10
-     */
-    autoFpsFrames?: number;
-
-    /**
-     * Determines whether the AnimationFrame is enabled or not.
-     * When set to `true`, the animation loop will run.
-     * @default false
-     */
-    isEnabled?: boolean;
-  }
-
-  export interface ICallbacksTypes extends NComponent.ICallbacksTypes {
-    /**
-     * Triggered when the animation starts playing.
-     */
-    play: undefined;
-
-    /**
-     * Triggered when the animation is paused.
-     */
-    pause: undefined;
-
-    /**
-     * Triggered when the animation toggles between play and pause.
-     */
-    toggle: undefined;
-
-    /**
-     * Triggered on each frame of the animation.
-     */
-    frame: undefined;
-  }
-}