vevet 4.4.2 → 5.0.1

package/src/Vevet/index.ts

@@ -1,96 +0,0 @@
-import version from '../version';
-import { createOnPageLoad } from './events/createOnPageLoad';
-import { IVevetProps } from './types';
-import { fetchWebpSupport } from './utils/fetchWebpSupport';
-import { PCancelable } from '@/utils/common/PCancelable';
-import { createViewport } from './events/createViewport';
-import { IVevet } from './global';
-import { getDeviceInfo } from './utils/getDeviceInfo';
-
-export function Vevet(input: Partial<IVevetProps>): IVevet {
-  // set default properties
-
-  const defaultProps: IVevetProps = {
-    tablet: 1199,
-    phone: 899,
-    easing: [0.25, 0.1, 0.25, 1],
-    resizeDebounce: 16,
-    checkWebpSupport: true,
-  };
-
-  const props = { ...defaultProps, ...input };
-
-  const prefix = 'v-';
-
-  // device info
-
-  const { osName, browserName, device } = getDeviceInfo();
-  const isPhone = device.phone;
-  const isTablet = device.tablet;
-  const isMobile = device.phone || device.tablet;
-  const isDesktop = !isMobile;
-
-  // events
-
-  const pageLoad = createOnPageLoad(prefix);
-  const viewport = createViewport(props, isMobile, prefix);
-
-  // output
-
-  const output: IVevet = {
-    version,
-    props,
-    prefix,
-    isPhone,
-    isTablet,
-    isDesktop,
-    isMobile,
-    osName,
-    browserName,
-    isWebpSupported: false,
-    isPageLoaded: false,
-    viewport,
-    doc: document,
-    html: document.documentElement,
-    body: document.body,
-    onPageLoad: () =>
-      new PCancelable((resolve: (...arg: any) => void) =>
-        pageLoad.onLoad(resolve),
-      ),
-  };
-
-  // update props on page load
-
-  pageLoad.onLoad(() => {
-    output.isPageLoaded = true;
-  });
-
-  // set device features
-
-  (function setDeviceFeatures() {
-    const { html } = output;
-
-    html.classList.add(`${prefix}os-${osName}`);
-
-    html.classList.add(`${prefix}browser-${browserName}`);
-
-    html.classList.toggle(`${prefix}phone`, output.isPhone);
-
-    html.classList.toggle(`${prefix}tablet`, output.isTablet);
-
-    html.classList.toggle(`${prefix}mobile`, output.isMobile);
-
-    html.classList.toggle(`${prefix}desktop`, output.isDesktop);
-
-    // check webp support
-    if (props.checkWebpSupport) {
-      fetchWebpSupport()
-        .then(() => {
-          output.isWebpSupported = true;
-        })
-        .catch(() => {});
-    }
-  })();
-
-  return output;
-}

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

package/src/Vevet/stories/index.tsx

@@ -1,43 +0,0 @@
-import React, { FC, useCallback, useEffect, useState } from 'react';
-import { getApp } from '@/utils/internal/getApp';
-import { pickObjectProps } from '@/utils/internal/pickObjectProps';
-
-export const Component: FC = () => {
-  const [features, setFeatures] =
-    useState<Record<string, boolean | number | string>>();
-
-  const updateFeatures = useCallback(() => {
-    const object = pickObjectProps(getApp(), [
-      'version',
-      'prefix',
-      'isDesktop',
-      'isTablet',
-      'isPhone',
-      'isMobile',
-      'browserName',
-      'osName',
-      'isWebpSupported',
-      'isPageLoaded',
-    ]);
-
-    setFeatures(object);
-  }, []);
-
-  useEffect(() => updateFeatures(), [updateFeatures]);
-
-  return (
-    <div>
-      <button type="button" onClick={updateFeatures}>
-        Update features
-      </button>
-
-      {features &&
-        Object.keys(features).map((key) => {
-          const value = features[key];
-          const stringValue = String(value);
-
-          return <div key={key}>{`${key}: ${stringValue}`}</div>;
-        })}
-    </div>
-  );
-};

package/src/Vevet/types.ts

@@ -1,41 +0,0 @@
-import { TEasingType } from '@/utils/math';
-
-/**
- * Application configuration properties for initializing Vevet.
- */
-export interface IVevetProps {
-  /**
-   * Tablet identification max width in pixels.
-   * When changing this property, you need to
-   * update SASS variables: `$viewport-tablet`. The values must be equal.
-   * @default 1199
-   */
-  tablet: number;
-
-  /**
-   * Phone identification max width in pixels.
-   * When changing this property, you need to
-   * update SASS variables: `$viewport-phone`. The values must be equal.
-   * @default 899
-   */
-  phone: number;
-
-  /**
-   * Timeout (in ms) for viewport callbacks debouncing.
-   * @default 16
-   */
-  resizeDebounce: number;
-
-  /**
-   * Default easing function used in animations.
-   * Accepts a cubic-bezier array, function or an easing name defined {@link https://antonbobrov.github.io/easing-progress/|here}.
-   * @default [.25, .1, .25, 1]
-   */
-  easing: TEasingType;
-
-  /**
-   * Enable or disable WebP support check in the browser.
-   * @default false
-   */
-  checkWebpSupport: boolean;
-}

package/src/Vevet/utils/fetchWebpSupport.ts

@@ -1,20 +0,0 @@
-import { PCancelable } from '@/utils/common/PCancelable';
-
-export function fetchWebpSupport() {
-  return new PCancelable((resolve, reject) => {
-    const testWebP = new Image();
-
-    testWebP.onload = () => {
-      if (testWebP.width === 1) {
-        resolve();
-      } else {
-        reject();
-      }
-    };
-
-    testWebP.onerror = reject;
-
-    testWebP.src =
-      'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=';
-  });
-}

package/src/Vevet/utils/getDeviceInfo.ts

@@ -1,17 +0,0 @@
-import { detect } from 'detect-browser';
-import isMobileJs from 'ismobilejs';
-
-export function getDeviceInfo() {
-  const browserData = detect();
-
-  const osName = (browserData?.os || '')?.split(' ')[0].toLowerCase();
-  const browserName = (browserData?.name || '').toLowerCase();
-
-  const device = isMobileJs();
-
-  return {
-    osName,
-    browserName,
-    device,
-  };
-}

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

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

@@ -1,48 +0,0 @@
-/* eslint-disable no-console */
-import React, { FC, useEffect } from 'react';
-import { Callbacks } from '..';
-
-interface ICallbacks {
-  onAdd: undefined;
-  onDelete: undefined;
-}
-
-export const Component: FC = () => {
-  useEffect(() => {
-    const callbacks = new Callbacks<ICallbacks>();
-
-    callbacks.add('onAdd', () => console.log('callback on add #1'));
-
-    const addCallback2 = callbacks.add('onAdd', () =>
-      console.log('callback on add #2'),
-    );
-
-    const addCallback3 = callbacks.add(
-      'onAdd',
-      () => console.log('callback on add #3'),
-      { isProtected: true },
-    );
-
-    callbacks.add('onDelete', () => console.log('callback on delete'));
-
-    console.log('--- All callbacks by the target "onAdd" will be executed:');
-    callbacks.tbt('onAdd', undefined);
-
-    console.log('--- addCallback2 will be removed:');
-    addCallback2.remove();
-    callbacks.tbt('onAdd', undefined);
-    console.log('---');
-
-    console.log('--- addCallback3 cannot be removed because it is protected:');
-    addCallback3.remove();
-    callbacks.tbt('onAdd', undefined);
-    console.log('---');
-
-    console.log('--- Execute all callbacks by the target "onDelete":');
-    callbacks.tbt('onDelete', undefined);
-
-    return () => callbacks.destroy();
-  }, []);
-
-  return <p>Open the console to see the output</p>;
-};

package/src/base/Component/index.ts

@@ -1,58 +0,0 @@
-import { Module } from '../Module';
-import { Plugin } from '../Plugin';
-import { NComponent } from './types';
-
-export type { NComponent };
-
-/**
- * A class representing a component that extends the functionality of the {@link Module} class.
- * It allows for the addition of plugins, which can further extend or enhance the component's behavior.
- */
-export class Component<
-  StaticProps extends NComponent.IStaticProps = NComponent.IStaticProps,
-  ChangeableProps extends
-    NComponent.IChangeableProps = NComponent.IChangeableProps,
-  CallbacksTypes extends
-    NComponent.ICallbacksTypes = NComponent.ICallbacksTypes,
-> extends Module<StaticProps, ChangeableProps, CallbacksTypes> {
-  /**
-   * Holds the list of inner plugins associated with the component.
-   * Plugins can enhance the component's functionality.
-   */
-  private _plugins?: Plugin[];
-
-  /**
-   * Adds a plugin to the component. The plugin is initialized upon being added,
-   * and the plugin's `component` property is set to the current component instance.
-   *
-   * @param plugin - An instance of the {@link Plugin} class to be added.
-   */
-  public addPlugin<T extends Plugin<any, any, any, any>>(plugin: T) {
-    if (typeof this._plugins === 'undefined') {
-      this._plugins = [];
-    }
-
-    this._plugins.push(plugin);
-
-    // eslint-disable-next-line no-param-reassign
-    plugin.component = this;
-    plugin.init();
-  }
-
-  /**
-   * Destroys all plugins associated with the component.
-   * This ensures proper cleanup when the component is destroyed.
-   */
-  private _destroyPlugins() {
-    this._plugins?.forEach((plugin) => plugin.destroy());
-  }
-
-  /**
-   * Destroys the component, ensuring that all plugins are properly destroyed as well.
-   */
-  protected _destroy() {
-    super._destroy();
-
-    this._destroyPlugins();
-  }
-}

package/src/base/Component/types.ts

@@ -1,24 +0,0 @@
-import { NModule } from '../Module/types';
-
-export namespace NComponent {
-  /**
-   * Static properties for a component.
-   * These properties remain constant throughout the lifecycle of the component.
-   * This interface extends {@link NModule.IStaticProps}, inheriting the static properties defined for modules.
-   */
-  export interface IStaticProps extends NModule.IStaticProps {}
-
-  /**
-   * Changeable properties for a component.
-   * These properties may change during the component's lifecycle, such as in response to window resizing or user actions.
-   * This interface extends {@link NModule.IChangeableProps}, inheriting the mutable properties defined for modules.
-   */
-  export interface IChangeableProps extends NModule.IChangeableProps {}
-
-  /**
-   * Available callback types for a component.
-   * These callbacks allow external interaction with the component's lifecycle events.
-   * This interface extends {@link NModule.ICallbacksTypes}, inheriting the callbacks defined for modules.
-   */
-  export interface ICallbacksTypes extends NModule.ICallbacksTypes {}
-}

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

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

@@ -1,69 +0,0 @@
-import React, { FC, useEffect, useState } from 'react';
-import { Module, NModule } from '..';
-
-interface IStaticProps extends NModule.IStaticProps {
-  staticName: 'My name';
-}
-
-interface IChangeableProps extends NModule.IChangeableProps {
-  weight: number;
-  height: number;
-}
-
-interface ICallbacks extends NModule.ICallbacksTypes {}
-
-export const Component: FC = () => {
-  const [features, setFeatures] = useState<any>({});
-
-  useEffect(() => {
-    const module = new Module<IStaticProps, IChangeableProps, ICallbacks>(
-      {
-        staticName: 'My name',
-        weight: 70,
-        height: 175,
-      },
-      false,
-    );
-
-    module.addResponsiveProps({
-      breakpoint: 'viewport_phone',
-      settings: {
-        weight: 80,
-      },
-    });
-
-    module.init();
-    setFeatures(module.props);
-
-    module.addCallback('propsChange', () => {
-      // eslint-disable-next-line no-console
-      console.log('change props');
-
-      setFeatures({ ...module.props });
-    });
-
-    module.addCallback('propsMutate', () => {
-      // eslint-disable-next-line no-console
-      console.log('mutate props');
-
-      setFeatures({ ...module.props });
-    });
-
-    const timeout = setTimeout(() => {
-      module.changeProps({ weight: 90 });
-    }, 2500);
-
-    return () => {
-      module.destroy();
-      clearTimeout(timeout);
-    };
-  }, []);
-
-  return (
-    <div>
-      {Object.entries(features).map(([key, value]) => (
-        <div key={key}>{`${key}: ${value}`}</div>
-      ))}
-    </div>
-  );
-};

package/src/base/MutableProps/index.ts

@@ -1,197 +0,0 @@
-import { getApp } from '@/utils/internal/getApp';
-import { NCallbacks } from '../Callbacks/types';
-import { NMutableProps } from './types';
-
-export type { NMutableProps };
-
-/**
- * A class for managing mutable properties that can change based on window size (responsive design).
- * This allows certain properties to update dynamically when the window is resized or in response to manual changes.
- *
- * @example
- *
- * interface IStatic {
- *   static: string;
- * }
- *
- * interface IChangeable {
- *   changeable: string;
- * }
- *
- * const props = new MutableProps<IStatic, IChangeable>({
- *   static: '',
- *   changeable: 'something',
- * });
- *
- * props.addResponsiveProps({
- *   breakpoint: 'viewport_phone',
- *   settings: {
- *     changeable: 'phone',
- *   },
- * });
- *
- * props.changeProps({ changeable: 'changed' });
- */
-export class MutableProps<
-  StaticProps extends Record<string, any>,
-  ChangeableProps extends Record<string, any>,
-> {
-  /**
-   * A reference to the original properties (both static and changeable).
-   * These properties are only updated manually via {@linkcode changeProps}.
-   */
-  private _refProps: StaticProps & ChangeableProps;
-
-  /**
-   * The current active properties. These can be updated through both window resizing
-   * (via responsive rules) and manual changes through {@linkcode changeProps}.
-   */
-  private _props: StaticProps & ChangeableProps;
-
-  /**
-   * A set of responsive rules defining how properties should change based on viewport size or device type.
-   * Each rule is defined by a breakpoint and corresponding property settings.
-   */
-  private _responsiveRules: NMutableProps.IResponsive<ChangeableProps>[] = [];
-
-  /**
-   * The active breakpoints currently applied to the properties.
-   */
-  private _activeBreakpoints: (string | number)[];
-
-  /**
-   * A callback used to update properties when the viewport size changes.
-   */
-  private _viewportCallback?: NCallbacks.IAddedCallback;
-
-  /**
-   * Initializes the `MutableProps` instance with static and changeable properties,
-   * and sets up a mutation callback to be called when properties change.
-   *
-   * @param initProps - Initial properties, including both static and changeable properties.
-   * @param _onMutate - Callback function triggered whenever the properties change.
-   * @param _name - The name used to identify the set of responsive properties.
-   */
-  constructor(
-    initProps: StaticProps & ChangeableProps,
-    private _onMutate: () => void = () => {},
-    private _name = 'Responsive Props',
-  ) {
-    this._refProps = { ...initProps };
-    this._props = { ...initProps };
-    this._activeBreakpoints = [];
-  }
-
-  /**
-   * Retrieves the current properties.
-   * These may change either due to responsive rules or through manual updates.
-   */
-  get props() {
-    return this._props;
-  }
-
-  /**
-   * Adds responsive rules that define how the properties should change based on viewport breakpoints.
-   *
-   * @param rules - Responsive rules specifying breakpoints and corresponding property settings.
-   */
-  public addResponsiveProps(rules: NMutableProps.IResponsive<ChangeableProps>) {
-    this._responsiveRules.push(rules);
-
-    this._responseProps();
-
-    if (this._viewportCallback) {
-      return;
-    }
-
-    this._viewportCallback = getApp().viewport.callbacks.add(
-      'width',
-      this._responseProps.bind(this),
-      { name: this._name },
-    );
-  }
-
-  /**
-   * Handles updating the properties based on the current viewport size.
-   * It checks all responsive rules and applies the appropriate settings for active breakpoints.
-   */
-  private _responseProps() {
-    const app = getApp();
-    const { viewport } = app;
-
-    let newProps: (StaticProps & ChangeableProps) | false = false;
-    const statProp = { ...this._refProps };
-
-    const prevActiveBreakpointsString = [...this._activeBreakpoints].join('_');
-    this._activeBreakpoints = [];
-
-    // Evaluate each responsive rule to see if it should be applied
-    this._responsiveRules.forEach(({ settings, breakpoint }) => {
-      if (typeof breakpoint === 'number') {
-        if (viewport.width <= breakpoint) {
-          this._activeBreakpoints.push(breakpoint);
-          newProps = { ...statProp, ...settings };
-        }
-      } else if (typeof breakpoint === 'string') {
-        // viewport size
-        if (
-          (breakpoint === 'viewport_desktop' && viewport.isDesktop) ||
-          (breakpoint === 'viewport_tablet' && viewport.isTablet) ||
-          (breakpoint === 'viewport_phone' && viewport.isPhone)
-        ) {
-          this._activeBreakpoints.push(breakpoint);
-          newProps = { ...(newProps || statProp), ...settings };
-        }
-
-        // device type
-        if (
-          (breakpoint === 'device_phone' && app.isPhone) ||
-          (breakpoint === 'device_tablet' && app.isTablet) ||
-          (breakpoint === 'device_mobile' && app.isMobile)
-        ) {
-          this._activeBreakpoints.push(breakpoint);
-          newProps = { ...(newProps || statProp), ...settings };
-        }
-      }
-    });
-
-    // check if properties really changed
-    const activeBreakpointsString = this._activeBreakpoints.join('_');
-    const isPropsChanged =
-      activeBreakpointsString !== prevActiveBreakpointsString;
-
-    // if there's no breakpoint, restore the props
-    if (!newProps) {
-      this._props = { ...this._props, ...this._refProps };
-    } else {
-      // otherwise, change the properties
-      this._props = { ...this._props, ...(newProps as any) };
-    }
-
-    // Call the mutation callback if properties have changed
-    if (isPropsChanged) {
-      this._onMutate();
-    }
-  }
-
-  /**
-   * Manually changes the properties. The updated properties persist and trigger the mutation callback.
-   *
-   * @param props - A partial set of changeable properties to be updated.
-   */
-  public changeProps(props: Partial<ChangeableProps>) {
-    this._props = { ...this._props, ...props };
-    this._refProps = { ...this._refProps, ...props };
-
-    this._onMutate();
-  }
-
-  /**
-   * Cleans up and destroys the responsive properties.
-   */
-  public destroy() {
-    if (this._viewportCallback) {
-      this._viewportCallback.remove();
-    }
-  }
-}

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