reacthub-pixitweenjs 0.2.12 → 0.2.13

package/dist/components/PixiVideoSprite/PixiVideoSprite.stories.d.ts

@@ -0,0 +1,183 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: import("react").FC<{
+        uniqueId: string;
+        src: string;
+        startAt: number;
+        endAt: number;
+        frameStartAt: number;
+        frameEndAt: number;
+        mute: boolean;
+        locked: boolean;
+        initialAlpha: number;
+        transformation: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+            anchor: number;
+            rotation?: number | undefined;
+            alpha?: number | undefined;
+            scale?: number | [number, number] | undefined;
+            tint?: number | undefined;
+            blendMode?: number | undefined;
+            animation?: string | undefined;
+            colorCorrection?: {
+                enabled?: boolean | undefined;
+                temperature?: number | undefined;
+                hue?: number | undefined;
+                contrast?: number | undefined;
+                saturation?: number | undefined;
+                exposure?: number | undefined;
+                reset?: boolean | undefined;
+                sharpness?: number | undefined;
+                value?: number | undefined;
+                levels?: number | undefined;
+                luminance?: number | undefined;
+                enhance?: number | undefined;
+                blurRadius?: number | undefined;
+                red?: number | undefined;
+                green?: number | undefined;
+                blue?: number | undefined;
+                alpha?: number | undefined;
+                scaleInput?: number | undefined;
+            } | undefined;
+            effect?: string | undefined;
+        };
+        pointerdown?: (() => void) | undefined;
+        pointerup?: (() => void) | undefined;
+        mousedown?: (() => void) | undefined;
+        mouseup?: (() => void) | undefined;
+        pointerover?: (() => void) | undefined;
+        mouseover?: (() => void) | undefined;
+        mouseout?: (() => void) | undefined;
+        applyTransformer?: boolean | undefined;
+        onAnchorTransformationEnd?: ((endData: any) => void) | undefined;
+    }>;
+    tags: string[];
+    argTypes: {
+        uniqueId: {
+            control: string;
+            description: string;
+        };
+        src: {
+            control: string;
+            description: string;
+        };
+        transformation: {
+            control: string;
+            description: string;
+            x: {
+                control: string;
+                description: string;
+            };
+            y: {
+                control: string;
+                description: string;
+            };
+            width: {
+                control: string;
+                description: string;
+            };
+            height: {
+                control: string;
+                description: string;
+            };
+            anchor: {
+                control: string;
+                description: string;
+            };
+            rotation: {
+                control: string;
+                description: string;
+            };
+            alpha: {
+                control: string;
+                min: number;
+                max: number;
+                description: string;
+            };
+            scale: {
+                control: string;
+                description: string;
+            };
+            tint: {
+                control: string;
+                description: string;
+            };
+            blendMode: {
+                control: string;
+                description: string;
+            };
+            colorCorrection: {
+                control: string;
+                description: string;
+                brightness: {
+                    control: string;
+                    description: string;
+                };
+                contrast: {
+                    control: string;
+                    description: string;
+                };
+                saturation: {
+                    control: string;
+                    description: string;
+                };
+                alpha: {
+                    control: string;
+                    description: string;
+                };
+            };
+        };
+        applyTransformer: {
+            control: string;
+            description: string;
+        };
+        startAt: {
+            control: string;
+            description: string;
+        };
+        endAt: {
+            control: string;
+            description: string;
+        };
+        frameStartAt: {
+            control: string;
+            description: string;
+        };
+        frameEndAt: {
+            control: string;
+            description: string;
+        };
+        mute: {
+            control: string;
+            description: string;
+        };
+        locked: {
+            control: string;
+            description: string;
+        };
+        initialAlpha: {
+            control: string;
+            min: number;
+            max: number;
+            description: string;
+        };
+        onAnchorTransformationEnd: {
+            action: string;
+            description: string;
+        };
+        pointerdown: {
+            action: string;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Normal: Story;
+export declare const FadeIn: Story;
+export declare const Filters: Story;

package/dist/components/PixiVideoSprite/index.d.ts

@@ -0,0 +1 @@
+export { default as PixiVideoSprite } from "./PixiVideoSprite";

package/dist/components/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./PixiImageSprite";
+export * from "./PixiSVGSprite";
+export * from "./PixiAudioSprite";
+export * from "./PixiGifSprite";
+export * from "./PixiTextSprite";
+export * from "./PixiVideoSprite";
+export * from "./PixiAnimatedSprite";

package/dist/hocs/AbstractContainer.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { PixiBaseSpriteProps } from "../types/BaseProps";
+declare const AbstractContainer: React.FC<PixiBaseSpriteProps>;
+export default AbstractContainer;

package/dist/hocs/WithFilterContainer.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { Container } from "@pixi/react";
+import * as PIXI from "pixi.js";
+import { PixiBaseSpriteProps } from "../types/BaseProps";
+import { TransformationEnd } from "../types/transformation";
+declare const withFilterContainer: <P extends object>(WrappedComponent: React.ComponentType<P & PixiBaseSpriteProps>) => {
+    new (props: P & PixiBaseSpriteProps): {
+        imageRef: React.RefObject<PIXI.Sprite>;
+        containerRef: React.RefObject<PIXI.Container<PIXI.DisplayObject>>;
+        parentNode: React.RefObject<PIXI.Container<PIXI.DisplayObject>>;
+        imgGroupRef: React.RefObject<PIXI.Container<PIXI.DisplayObject>>;
+        transformerRef: React.RefObject<PIXI.Container<PIXI.DisplayObject>>;
+        isMounted: React.RefObject<boolean>;
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        /** handle on tranformer onchange */
+        handleOnTransformChange: () => void;
+        handleOnTransformEnd: (endData: TransformationEnd) => void;
+        setIsMouseOverTransformer: (isMouseOverTransformer: boolean) => void;
+        render(): import("react/jsx-runtime").JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & PixiBaseSpriteProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<P & PixiBaseSpriteProps>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<P & PixiBaseSpriteProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P & PixiBaseSpriteProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<P & PixiBaseSpriteProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P & PixiBaseSpriteProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & PixiBaseSpriteProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P & PixiBaseSpriteProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P & PixiBaseSpriteProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+export default withFilterContainer;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./components";
+export * from "./providers";
+export * from "./types";

package/dist/providers/GsapPixieContextProvider.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+interface GsapPixieContextProps {
+    gsapCtx: React.MutableRefObject<any>;
+    tl: React.MutableRefObject<any>;
+    play: boolean;
+    isDragging: boolean;
+    handlePlay: () => void;
+    handlePause: () => void;
+    handleReset: () => void;
+    handleSeek: (value: number) => void;
+    handleSeekTest: () => void;
+    handleRestart: () => void;
+    handleRepeat: () => void;
+    playerTimeRef: React.MutableRefObject<number>;
+    totalDuration: number;
+}
+declare const GsapPixieContext: React.Context<GsapPixieContextProps>;
+declare const Events: {
+    STOP: string;
+    PAUSE: string;
+    PLAY: string;
+    RESUME: string;
+    RESTART: string;
+    REPEAT: string;
+    SEEK: string;
+    RESET: string;
+    DRAGGING_START: string;
+    DRAGGING_END: string;
+};
+declare const GsapPixieContextProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export { GsapPixieContext, GsapPixieContextProvider, Events };

package/dist/providers/index.d.ts

@@ -0,0 +1 @@
+export * from "./GsapPixieContextProvider";

package/dist/types/Animations.d.ts

@@ -0,0 +1,40 @@
+export declare enum Animations {
+    FADE_IN = "FADE_IN",
+    FADE_OUT = "FADE_OUT",
+    FADE_IN_OUT = "FADE_IN_OUT",
+    SLIDE_IN_LEFT = "SLIDE_IN_LEFT",
+    SLIDE_IN_RIGHT = "SLIDE_IN_RIGHT",
+    SLIDE_IN_TOP = "SLIDE_IN_TOP",
+    SLIDE_IN_BOTTOM = "SLIDE_IN_BOTTOM",
+    SLIDE_OUT_LEFT = "SLIDE_OUT_LEFT",
+    SLIDE_OUT_RIGHT = "SLIDE_OUT_RIGHT",
+    SLIDE_OUT_TOP = "SLIDE_OUT_TOP",
+    SLIDE_OUT_BOTTOM = "SLIDE_OUT_BOTTOM",
+    ZOOM_IN = "ZOOM_IN",
+    ZOOM_OUT = "ZOOM_OUT",
+    ZOOM_IN_OUT = "ZOOM_IN_OUT",
+    BOUNCE_IN = "BOUNCE_IN",
+    BOUNCE_OUT = "BOUNCE_OUT",
+    BOUNCE_IN_OUT = "BOUNCE_IN_OUT",
+    ELASTIC_IN = "ELASTIC_IN",
+    ELASTIC_OUT = "ELASTIC_OUT",
+    ELASTIC_IN_OUT = "ELASTIC_IN_OUT",
+    BACK_IN = "BACK_IN",
+    BACK_OUT = "BACK_OUT",
+    BACK_IN_OUT = "BACK_IN_OUT",
+    CIRCULAR_IN = "CIRCULAR_IN",
+    CIRCULAR_OUT = "CIRCULAR_OUT",
+    CIRCULAR_IN_OUT = "CIRCULAR_IN_OUT",
+    EXPO_IN = "EXPO_IN",
+    EXPO_OUT = "EXPO_OUT",
+    EXPO_IN_OUT = "EXPO_IN_OUT",
+    SINE_IN = "SINE_IN",
+    SINE_OUT = "SINE_OUT",
+    SINE_IN_OUT = "SINE_IN_OUT",
+    BOUNCE = "BOUNCE",
+    ELASTIC = "ELASTIC",
+    BACK = "BACK",
+    CIRCULAR = "CIRCULAR",
+    EXPO = "EXPO",
+    SINE = "SINE"
+}

package/dist/types/BaseProps.d.ts

@@ -0,0 +1,56 @@
+/// <reference types="react" />
+import { Effects } from "./Effects";
+export interface PixiBaseSpriteProps {
+    children?: React.ReactNode;
+    uniqueId: string;
+    src?: string;
+    path?: string;
+    text?: string;
+    startAt: number;
+    endAt: number;
+    initialAlpha: number;
+    transformation: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        anchor: number;
+        rotation?: number;
+        alpha?: number;
+        scale?: number | [number, number];
+        tint?: number;
+        blendMode?: number;
+        animation?: string;
+        colorCorrection?: {
+            enabled?: boolean;
+            temperature?: number;
+            hue?: number;
+            contrast?: number;
+            saturation?: number;
+            brightness?: number;
+            exposure?: number;
+            reset?: boolean;
+            sharpness?: number;
+            value?: number;
+            levels?: number;
+            luminance?: number;
+            enhance?: number;
+            blurRadius?: number;
+            red?: number;
+            green?: number;
+            blue?: number;
+            alpha?: number;
+            scaleInput?: number;
+        };
+        effect?: Effects;
+    };
+    pointerdown?: () => void;
+    pointerup?: () => void;
+    mousedown?: () => void;
+    mouseup?: () => void;
+    pointerover?: () => void;
+    mouseover?: () => void;
+    mouseout?: () => void;
+    applyTransformer?: boolean;
+    onAnchorTransformationEnd?: (endData: any) => void;
+}

package/dist/types/BlendModes.d.ts

@@ -0,0 +1,19 @@
+export declare enum BlendModes {
+    NORMAL = 0,
+    ADD = 1,
+    MULTIPLY = 2,
+    SCREEN = 3,
+    OVERLAY = 4,
+    DARKEN = 5,
+    LIGHTEN = 6,
+    COLOR_DODGE = 7,
+    COLOR_BURN = 8,
+    HARD_LIGHT = 9,
+    SOFT_LIGHT = 10,
+    DIFFERENCE = 11,
+    EXCLUSION = 12,
+    HUE = 13,
+    SATURATION = 14,
+    COLOR = 15,
+    LUMINOSITY = 16
+}

package/dist/types/Effects.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Effects enum
+ */
+export declare enum Effects {
+    BlackAndWhite = "BlackAndWhite",
+    Sepia = "Sepia",
+    RetroVintage = "RetroVintage",
+    NightVision = "NightVision",
+    Normal = "Normal",
+    None = "Normal"
+}

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Animations";
+export * from "./BaseProps";
+export * from "./BlendModes";
+export * from "./transformation";

package/dist/types/transformation.d.ts

@@ -0,0 +1,12 @@
+export interface Transformation {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotate: number;
+    scale: [number, number];
+}
+export interface TransformationEnd {
+    uniqueId: string;
+    transformation: Transformation;
+}

package/dist/utils/AppStateProvider.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+interface AppState {
+    transformation: {
+        [key: string]: unknown;
+    };
+}
+interface AppStateContextProviderProps extends AppState {
+    children: React.ReactNode;
+}
+export declare const AppStateContextProvider: React.FC<AppStateContextProviderProps>;
+export {};

package/dist/utils/AppStateStage.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+interface AppStateStageProps {
+    children: React.ReactNode;
+}
+declare const AppStateStage: React.FC<AppStateStageProps>;
+export default AppStateStage;

package/dist/utils/AppWrapper.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+interface AppProps {
+    children: React.ReactNode;
+    backgroundColor?: string;
+}
+export declare const AppWrapper: React.FC<AppProps>;
+export {};

package/dist/utils/ContextBridge.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+declare const ContextBridge: <T>({ children, Context, render, }: {
+    children: React.ReactNode;
+    Context: React.Context<T>;
+    render: (children: React.ReactNode) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ContextBridge;

package/dist/utils/GsapAnim.d.ts

@@ -0,0 +1,29 @@
+interface Ease {
+    from?: {
+        duration: number;
+        ease: string;
+        y?: number;
+        x?: number;
+    };
+    fromTo?: {
+        from: {
+            y?: number;
+            x?: number;
+            alpha?: number;
+        };
+        to: {
+            ease: string;
+            y?: number;
+            x?: number;
+            alpha?: number;
+            duration: number;
+        };
+    };
+    to?: {
+        ease: string;
+        alpha: number;
+        duration: number;
+    };
+}
+export declare const getAnimByName: (animate: string) => Ease;
+export {};

package/dist/utils/InteractionManager.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+type PixiInteractionManagerProps = {
+    children: React.ReactNode;
+    options?: {
+        [key: string]: unknown;
+    };
+};
+/**
+ * Initialize Pixi Interaction Manager
+ * @param param0
+ * @returns
+ * @see https://pixijs.download/dev/docs/PIXI.InteractionManager.html
+ * @see https://pixijs.download/dev/docs/PIXI.InteractionManager.html#moveWhenInside
+ * @see https://pixijs.download/dev/docs/PIXI.InteractionManager.html#on
+ *
+ * */
+declare const InteractionManager: ({ children, options, }: PixiInteractionManagerProps) => import("react").ReactNode;
+export default InteractionManager;

package/dist/utils/PixiStage.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+interface StageProps {
+    children: React.ReactNode;
+    width: number;
+    height: number;
+    options: any;
+}
+declare const Stage: React.FC<StageProps>;
+export default Stage;

package/dist/utils/PixiTransformer.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+type PixiTransformerProps = {
+    pixiTransformerRef: React.MutableRefObject<any>;
+    imageRef: React.MutableRefObject<any>;
+    isMounted: boolean;
+    transformCommit?: (data: any) => void;
+    transformChange?: (data: any) => void;
+    mouseoverEvent?: (flag: boolean) => void;
+    onDoubleClick?: (data: any) => void;
+    uniqueId?: string;
+};
+/**
+ * Initialize PixiTransformer to transform the image
+ * @param param0
+ * @returns
+ */
+declare const PixiTransformer: ({ pixiTransformerRef, imageRef, isMounted, transformCommit, transformChange, mouseoverEvent, onDoubleClick, uniqueId, }: PixiTransformerProps) => import("react/jsx-runtime").JSX.Element;
+export default PixiTransformer;

package/dist/utils/VideoSeekBar.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const VideoSeekBar: React.FC;

package/dist/utils/useDebounce.d.ts

@@ -0,0 +1 @@
+export declare function useDebounce<T>(value: T, delay?: number): T;

package/dist/utils/useDeepEffect.d.ts

@@ -0,0 +1,4 @@
+type EffectFunc = () => void;
+type Deps = ReadonlyArray<unknown>;
+declare const useDeepEffect: (effectFunc: EffectFunc, deps: Deps) => void;
+export default useDeepEffect;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "reacthub-pixitweenjs",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "description": "reacthub-pixitweenjs is a library that provides a powerful combination of React, PixiJS, GSAP, and image manipulation capabilities in a timeline sequence. With this library, you can easily create stunning animations and interactive graphics for your React applications",
   "author": "khanzzirfan <reacthub.ai@gmail.com>",
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
+  "main": "dist/index.es.js",
+  "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "keywords": [
     "pixijs",
@@ -53,6 +53,8 @@
     "@pixi/react": "~7.1.0",
     "@pixi/sound": "^5.2.1",
     "@react-gifs/tools": "^0.1.2",
+    "@rollup/plugin-commonjs": "^25.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.1",
     "@storybook/addon-essentials": "^7.1.0",
     "@storybook/addon-interactions": "^7.1.0",
     "@storybook/addon-links": "^7.1.0",
@@ -114,9 +116,9 @@
     "typescript": "^5.1.6",
     "typescript-plugin-css-modules": "^5.0.1",
     "vite": "^4.4.4",
+    "vite-plugin-dts": "^3.5.2",
     "vite-plugin-environment": "^1.1.3",
     "vite-plugin-stylelint": "^4.3.0",
     "vitest": "^0.30.1"
-  },
-  "dependencies": {}
+  }
 }

package/dist/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>