reacthub-pixitweenjs 0.2.107-alpha.106 → 0.2.107-alpha.108

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Chroma Software Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -16,19 +16,16 @@ Make sure you install the devDependencies in your project.
 
 ```js
 npm install
-    "@pixi-essentials/react-bindings": "2.0.0",
-    "@pixi-essentials/transformer": "2.5.6",
-    "@pixi/assets": "6.5.9",
-    "@pixi/basis": "6.5.9",
-    "@pixi/filter-adjustment": "5.1.1",
-    "@pixi/gif": "1.1.3",
-    "@pixi/interaction": "6.5.9",
-    "@pixi/picture": "^3.0.3",
-    "@pixi/react": "7.0.0",
-    "@pixi/sound": "^4.3.1",
-    "pixi-filters": "5.1.1",
-    "pixi-svg": "3.2.0",
-    "pixi.js": "6.5.9",
+    "@pixi/gif": "^2.1.0",
+    "@pixi/react": "~7.1.0",
+    "@pixi/sound": "^5.2.1",
+    "pixi-filters": "^5.2.1",
+    "pixi-svg": "^3.2.0",
+    "pixi.js": "^7.2.3",
+    "gsap": "3.11.5",
+    "howler": "^2.2.3",
+    "lottie-web": "^5.10.2",
+    "react-custom-events": "^1.1.1",
 ```
 
 ## Description
@@ -38,3 +35,27 @@ PixiTweenJs is designed to help you build animated time-controlled canvas elemen
 ## Usage
 
 Visit the [storybook](https://64b9d71094fa7aed0c7291cf-bpnkkrlkgw.chromatic.com)
+
+## Documentation
+
+## License
+
+This library is licensed under the MIT License. See the LICENSE.md file for details.
+
+Note: This library comes with restrictions. You are not allowed to copy, modify, or sell this library or any derivative work on behalf of the original author. Usage is permitted only under the terms specified in the license.
+
+For example:
+
+- Allowed: Use in personal and non-commercial projects.
+- Not Allowed: Copying, modification, or commercial use without explicit permission.
+
+## Contributing
+
+Want to contribute to pixitweenjs? Our [contributing guide](Contribution.md) has you covered.
+
+## See also
+
+- [editly](https://github.com/mifi/editly) - Declarative video API I also created earlier
+- [remotion](https://github.com/remotion-dev/remotion) - Great inspiration
+
+Made with ❤️ in 🇦🇺

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reacthub-pixitweenjs",
-  "version": "0.2.107-alpha.106",
+  "version": "0.2.107-alpha.108",
   "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.es.js",
@@ -36,11 +36,12 @@
     "test": "vitest",
     "storybook": "storybook dev -p 6006",
     "start": "npm run storybook",
-    "build-storybook": "storybook build",
+    "build-storybook": "storybook build --loglevel warn",
     "init-msw": "msw init public/",
     "release": "standard-version --release-as patch &&npm publish",
     "release:alpha": "standard-version --prerelease alpha &&npm publish",
-    "chromatic": "env-cmd -f .env.dev chromatic --auto-accept-changes"
+    "chromatic": "env-cmd -f .env.dev chromatic --auto-accept-changes",
+    "deploy": "netlify deploy --prod"
   },
   "devDependencies": {
     "@chakra-ui/icons": "^2.0.15",
@@ -84,6 +85,7 @@
     "@vitejs/plugin-react": "^4.0.3",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "@welldone-software/why-did-you-render": "^7.0.1",
+    "audiomotion-analyzer": "^4.3.0",
     "chromatic": "^6.7.3",
     "debug": "^4.3.4",
     "dotenv": "^16.0.1",
@@ -113,7 +115,6 @@
     "react-dom": "^18.2.0",
     "react-fast-compare": "^3.2.0",
     "reacthub-react-bindings": "latest",
-    "siriwave": "^2.4.0",
     "standard-version": "^9.5.0",
     "storybook": "^7.1.0",
     "storybook-react-context": "^0.6.0",

package/dist/components/PixiAnimatedSprite/PixiAnimatedSprite.d.ts

@@ -1,23 +0,0 @@
-import * as React from "react";
-import * as PIXI from "pixi.js";
-type PixiAnimatedSpriteProps = {
-    forwardRef: any;
-    isPlaying: boolean;
-    images?: string[] | undefined;
-    initialFrame?: number | undefined;
-    scale?: number | [number, number];
-    x: number;
-    y: number;
-    width?: number;
-    height?: number;
-    anchor?: number;
-    rotation?: number;
-    alpha?: number;
-    animationSpeed?: number;
-    textures?: PIXI.Texture[] | undefined;
-    loop?: boolean;
-    onComplete?: () => void;
-    onFrameChange?: (currentFrame: number) => void;
-};
-declare const PixiAnimatedSprite: React.MemoExoticComponent<({ isPlaying, forwardRef, ...props }: PixiAnimatedSpriteProps) => import("react/jsx-runtime").JSX.Element>;
-export default PixiAnimatedSprite;

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

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

package/dist/components/PixiAudioSprite/HowlerAudioSprite.d.ts

@@ -1,19 +0,0 @@
-import { Howl } from "howler";
-interface HowlerAudioPlayerProps {
-    src: string;
-    start: number;
-    end: number;
-}
-interface IHowlerAudioPlayer {
-    sound: Howl | null;
-    isPlaying: boolean;
-    currentTime: number;
-    handlePause: () => void;
-    handlePlay: () => void;
-    togglePlay: () => void;
-    handleSeek: (newTime: number) => void;
-    playFromTime: (time: number) => void;
-}
-type UseHowlerAudioPlayer = (props: HowlerAudioPlayerProps) => IHowlerAudioPlayer;
-declare const useHowlerAudioPlayer: UseHowlerAudioPlayer;
-export default useHowlerAudioPlayer;

package/dist/components/PixiAudioSprite/PixiAudioSprite.d.ts

@@ -1,15 +0,0 @@
-import * as React from "react";
-import { PixiBaseSpriteProps, ForwardedRefResponse } from "../../types/BaseProps";
-export interface PixiAudioSpriteProps extends PixiBaseSpriteProps {
-    uniqueId: string;
-    src: string;
-    startAt: number;
-    endAt: number;
-    audioStartAt: number;
-    audioEndAt: number;
-    mute: boolean;
-    speed: number;
-    visible: boolean;
-}
-declare const PixiAudioSprite: React.ForwardRefExoticComponent<PixiAudioSpriteProps & React.RefAttributes<ForwardedRefResponse | null>>;
-export default PixiAudioSprite;

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

@@ -1,53 +0,0 @@
-/// <reference types="react" />
-import type { StoryObj } from "@storybook/react";
-declare const meta: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<import("./PixiAudioSprite").PixiAudioSpriteProps & import("react").RefAttributes<import("../..").ForwardedRefResponse | null>>;
-    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
-    tags: string[];
-    argTypes: {
-        uniqueId: {
-            control: string;
-            description: string;
-        };
-        src: {
-            control: string;
-            description: string;
-        };
-        startAt: {
-            control: string;
-            description: string;
-        };
-        endAt: {
-            control: string;
-            description: string;
-        };
-        audioStartAt: {
-            control: string;
-            description: string;
-        };
-        audioEndAt: {
-            control: string;
-            description: string;
-        };
-        mute: {
-            control: string;
-            description: string;
-        };
-        speed: {
-            control: string;
-            description: string;
-        };
-        visible: {
-            control: string;
-            description: string;
-        };
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Normal: Story;
-export declare const Visualization: Story;
-export declare const Speech: Story;
-export declare const Muted: Story;
-export declare const SplitPosition: Story;

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

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

package/dist/components/PixiGifSprite/PixiGifGsapSync.d.ts

@@ -1,19 +0,0 @@
-import * as React from "react";
-import { PixiBaseSpriteProps, ForwardedRefResponse } from "../../types/BaseProps";
-export interface PixiGifSpriteProps extends PixiBaseSpriteProps {
-    uniqueId: string;
-    src: string;
-    startAt: number;
-    endAt: number;
-    frameStartAt: number;
-    frameEndAt: number;
-    locked: boolean;
-    loop: boolean;
-}
-/**
- * PixiGifSprite Component is used to render gif image
- * @param props Gif Sprite props
- * @returns
- */
-declare const PixiGifSprite: React.ForwardRefExoticComponent<PixiGifSpriteProps & React.RefAttributes<ForwardedRefResponse | null>>;
-export default PixiGifSprite;

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

@@ -1,153 +0,0 @@
-/// <reference types="react" />
-import type { StoryObj } from "@storybook/react";
-declare const meta: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<import("./PixiGifGsapSync").PixiGifSpriteProps & import("react").RefAttributes<import("../../types").ForwardedRefResponse | null>>;
-    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
-    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;
-        };
-        visible: {
-            control: string;
-            description: string;
-        };
-        onAnchorTransformationEnd: {
-            action: string;
-            description: string;
-        };
-        pointerdown: {
-            action: string;
-            description: string;
-        };
-        pointerup: {
-            action: string;
-            description: string;
-        };
-        mousedown: {
-            action: string;
-            description: string;
-        };
-        mouseup: {
-            action: string;
-            description: string;
-        };
-        pointerover: {
-            action: string;
-            description: string;
-        };
-        mouseover: {
-            action: string;
-            description: string;
-        };
-        mouseout: {
-            action: string;
-            description: string;
-        };
-        pointerout: {
-            action: string;
-            description: string;
-        };
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Normal: Story;
-export declare const Multiple: Story;
-export declare const FadeIn: Story;
-export declare const Filters: Story;
-export declare const SplitPosition: Story;
-export declare const SplitStartPos: Story;
-export declare const StipopGif: Story;

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

@@ -1,2 +0,0 @@
-export { default as PixiGifSprite } from "./PixiGifGsapSync";
-export * from "./PixiGifGsapSync";

package/dist/components/PixiGsapAnims/FadeIn.d.ts

@@ -1,11 +0,0 @@
-import * as React from "react";
-interface FadeInProps {
-    children: React.ReactNode;
-    vars: {
-        duration: number;
-        ease: string;
-    };
-    effect?: "pluse" | "bouncein" | "spin";
-}
-declare function FadeIn(props: FadeInProps): import("react/jsx-runtime").JSX.Element;
-export { FadeIn };

package/dist/components/PixiGsapAnims/PixiFlipContainer.d.ts

@@ -1,9 +0,0 @@
-import * as React from "react";
-interface PixiFlipContainerProps {
-    children: React.ReactNode;
-    startAt: number;
-    duration: number;
-    uniqueId?: string;
-}
-declare function PixiFlipContainer(props: PixiFlipContainerProps): import("react/jsx-runtime").JSX.Element;
-export { PixiFlipContainer };

package/dist/components/PixiImageSprite/PixiImageSprite.d.ts

@@ -1,4 +0,0 @@
-import * as React from "react";
-import { PixiBaseSpriteProps, ForwardedRefResponse } from "../../types/BaseProps";
-declare const PixiImageSprite: React.ForwardRefExoticComponent<PixiBaseSpriteProps & React.RefAttributes<ForwardedRefResponse | null>>;
-export default PixiImageSprite;

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

@@ -1,136 +0,0 @@
-/// <reference types="react" />
-import type { StoryObj } from "@storybook/react";
-import { Effects } from "../../types/Effects";
-declare const meta: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<import("../../types").PixiBaseSpriteProps & import("react").RefAttributes<import("../../types").ForwardedRefResponse | null>>;
-    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
-    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;
-            };
-            effects: {
-                type: string;
-                options: Effects[];
-                description: string;
-            };
-            colorCorrection: {
-                control: string;
-                description: string;
-                enabled: {
-                    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;
-        };
-        visible: {
-            control: string;
-            description: string;
-        };
-        onAnchorTransformationEnd: {
-            action: string;
-            description: string;
-        };
-        pointerdown: {
-            action: string;
-            description: string;
-        };
-        pointerout: {
-            action: string;
-            description: string;
-        };
-        pointerover: {
-            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;
-export declare const FilterEffects: Story;
-export declare const Overlays: Story;
-export declare const PointerTests: Story;
-export declare const Animation: Story;
-export declare const PointerAnimation: Story;

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

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

package/dist/components/PixiLottieSprite/PixiLottieSprite.d.ts

@@ -1,14 +0,0 @@
-import * as React from "react";
-import { PixiBaseSpriteProps, ForwardedRefResponse } from "../../types/BaseProps";
-export interface PixiLottieSpriteProps extends PixiBaseSpriteProps {
-    uniqueId: string;
-    src: string;
-    startAt: number;
-    endAt: number;
-    frameStartAt: number;
-    frameEndAt: number;
-    locked: boolean;
-    loop: boolean;
-}
-declare const PixiLottieSprite: React.ForwardRefExoticComponent<PixiLottieSpriteProps & React.RefAttributes<ForwardedRefResponse | null>>;
-export default PixiLottieSprite;