reacthub-pixitweenjs 0.2.109-alpha.7 → 0.3.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reacthub-pixitweenjs",
-  "version": "0.2.109-alpha.7",
+  "version": "0.3.0-alpha.3",
   "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>",
   "type": "module",
@@ -25,24 +25,36 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/khanzzirfan/reacthub-pixitweenjs"
+    "url": "https://github.com/khanzzirfan/reacthub-pixitweenjs",
+    "directory": ""
   },
   "bugs": {
     "url": "https://github.com/khanzzirfan/reacthub-pixitweenjs"
   },
-  "license": "Apache-2.0",
+  "homepage": "https://pixitweenjs.xyz",
+  "license": "SEE LICENSE IN LICENSE.md",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "build:prod": "tsc && vite build --mode production",
-    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "lint:fix": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives",
+    "lint:fix": "eslint src --ext ts,tsx --report-unused-disable-directives --fix",
     "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md}\"",
     "preview": "vite preview",
     "test": "vitest",
+    "test:render:frames": "jest --config jest.render.config.cjs",
+    "test:render:frames:update": "jest --config jest.render.config.cjs -u",
+    "test:3d": "playwright test --config=test-visualtests/render-3d/runner.config.ts",
+    "build:msdf-fonts": "cd tools/msdf-font-builder && npm install --no-save && node build.mjs",
+    "rasterize:ai": "node tools/ai-rasterize/cli.mjs --config tools/ai-rasterize/jobs.json",
     "storybook": "storybook dev -p 6006",
     "start": "npm run storybook",
     "build-storybook": "storybook build --loglevel warn",
+    "docs:install": "yarn --cwd docs-site install --immutable",
+    "docs:dev": "yarn --cwd docs-site start",
+    "docs:build": "yarn --cwd docs-site build",
+    "docs:serve": "yarn --cwd docs-site serve",
+    "docs:clear": "yarn --cwd docs-site clear",
     "init-msw": "msw init public/",
     "release": "standard-version --release-as patch &&npm publish --access public",
     "release:alpha": "standard-version --prerelease alpha &&npm publish --access public",
@@ -58,38 +70,36 @@
     "@giphy/js-fetch-api": "^4.1.2",
     "@giphy/js-types": "^4.1.0",
     "@giphy/react-components": "^5.6.1",
+    "@gsap/react": "^2.1.2",
     "@mdx-js/react": "^3",
-    "@pixi/assets": "^7.2.3",
-    "@pixi/filter-adjustment": "^5.1.1",
-    "@pixi/gif": "^2.1.0",
-    "@pixi/react": "~7.1.0",
-    "@pixi/sound": "^5.2.1",
-    "@react-gifs/tools": "^0.1.2",
+    "@pixi/react": "^8.0.5",
+    "@pixi/sound": "^6.0.1",
+    "@playwright/test": "^1.60.0",
+    "@remotion/bundler": "4.0.421",
+    "@remotion/cli": "4.0.421",
+    "@remotion/media-utils": "4.0.421",
+    "@remotion/renderer": "4.0.421",
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-terser": "^0.4.3",
-    "@storybook/addon-docs": "^10.0.2",
-    "@storybook/addon-essentials": "^9.0.0-alpha.12",
-    "@storybook/addon-interactions": "^9.0.0-alpha",
-    "@storybook/addon-links": "^10.0.2",
-    "@storybook/addon-onboarding": "^10.0.2",
-    "@storybook/builder-vite": "^10.0.2",
-    "@storybook/jest": "^0.2.3",
-    "@storybook/react-vite": "^10.0.2",
-    "@storybook/testing-library": "^0.2.0",
-    "@testing-library/dom": "^9.3.1",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^14.0.0",
+    "@storybook/addon-docs": "^10.4.0",
+    "@storybook/addon-links": "^10.4.0",
+    "@storybook/react-vite": "^10.4.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.0",
     "@types/dotenv": "^8.2.0",
-    "@types/howler": "^2.2.8",
     "@types/quill": "^2.0.10",
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/three": "^0.184.1",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "@vitejs/plugin-react": "^4.0.3",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "@welldone-software/why-did-you-render": "^7.0.1",
+    "@vitejs/plugin-react": "^5.2.0",
+    "@vitejs/plugin-react-swc": "^4.0.0",
+    "@welldone-software/why-did-you-render": "^10.0.0",
+    "ae-to-json": "^1.1.2",
+    "after-effects": "^0.4.15",
     "audiomotion-analyzer": "^4.3.0",
     "chromatic": "^6.7.3",
     "debug": "^4.3.4",
@@ -100,43 +110,58 @@
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.5",
-    "eslint-plugin-storybook": "^10.0.2",
+    "eslint-plugin-storybook": "^10.4.0",
     "framer-motion": "^8.4.0",
-    "gifuct-js": "^2.1.2",
-    "gsap": "3.11.5",
-    "howler": "^2.2.3",
-    "jsdom": "^21.1.2",
+    "gsap": "^3.15.0",
+    "jest": "^29.7.0",
+    "jest-image-snapshot": "^6.4.0",
+    "jsdom": "^25.0.0",
     "lodash": "4.17.21",
     "lottie-web": "^5.10.2",
     "msw": "^2.4.2",
     "msw-storybook-addon": "^2.0.6",
-    "pixi-essentials-react-bindings-extended": "1.0.13",
-    "pixi-essentials-transformer-extended": "1.0.13",
-    "pixi-filters": "^5.3.0",
-    "pixi-svg": "^3.2.0",
-    "pixi.js": "^7.2.3",
-    "prop-types": "^15.8.1",
+    "pixi-filters": "^6.1.5",
+    "pixi.js": "^8.18.1",
     "quill": "^1.3.7",
-    "react": "^18.2.0",
+    "react": "^19.0.0",
     "react-custom-events": "^1.1.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.0.0",
     "react-fast-compare": "^3.2.0",
+    "remotion": "4.0.421",
     "standard-version": "^9.5.0",
-    "storybook": "^10.0.2",
+    "storybook": "^10.4.0",
     "storybook-multilevel-sort": "^2.1.0",
     "stylelint": "^15.10.2",
     "stylelint-config-standard": "^33.0.0",
     "svgpath": "^2.6.0",
     "typescript": "^5.1.6",
     "typescript-plugin-css-modules": "^5.0.1",
-    "vite": "^5.0.0",
-    "vite-plugin-dts": "^3.5.2",
+    "vite": "^7.0.0",
+    "vite-plugin-dts": "^5.0.0",
     "vite-plugin-environment": "^1.1.3",
     "vite-plugin-stylelint": "^4.3.0",
-    "vitest": "^1.6.0"
+    "vitest": "^4.0.0"
   },
   "dependencies": {
-    "@uiw/react-color-sketch": "^2.3.2"
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.6.1",
+    "@react-three/postprocessing": "^3.0.4",
+    "@uiw/react-color-sketch": "^2.3.2",
+    "postprocessing": "^6.39.1",
+    "three": "^0.184.0",
+    "zod": "^3.22.3"
+  },
+  "peerDependencies": {
+    "@gsap/react": "^2.1.2",
+    "@pixi/react": "^8.0.5",
+    "@pixi/sound": "^6.0.1",
+    "audiomotion-analyzer": "^4.3.0",
+    "gsap": "^3.15.0",
+    "lottie-web": "^5.10.2",
+    "pixi-filters": "^6.1.5",
+    "pixi.js": "^8.18.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "engines": {
     "node": ">=18.12.0"

package/dist/assets/icon/transformericons/icons.d.ts

@@ -1,8 +0,0 @@
-export declare const opacityIcon: () => string;
-export declare const roundCornersIcon: () => string;
-export declare const deleteIcon: () => string;
-export declare const copyIcon: () => string;
-export declare const orderIcon: () => string;
-export declare const saveIcon: () => string;
-export declare const replaceImageIcon: () => string;
-export declare const chevronRightIcon: () => string;

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

@@ -1,12 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { PixiAudioSprite } from '.';
-
-declare const meta: Meta<typeof PixiAudioSprite>;
-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;
-export declare const WithUnifiedTransformer: Story;

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

@@ -1,163 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-
-import * as React from "react";
-declare const meta: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import('./PixiGifGsapSync').PixiGifSpriteProps & React.RefAttributes<import('../..').ForwardedRefResponse | null>>;
-    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
-    tags: string[];
-    argTypes: {
-        uniqueId: {
-            control: "text";
-            description: string;
-        };
-        src: {
-            control: "text";
-            description: string;
-        };
-        transformation: {
-            control: "object";
-            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: "boolean";
-            description: string;
-        };
-        startAt: {
-            control: "number";
-            description: string;
-        };
-        endAt: {
-            control: "number";
-            description: string;
-        };
-        frameStartAt: {
-            control: "number";
-            description: string;
-        };
-        frameEndAt: {
-            control: "number";
-            description: string;
-        };
-        visible: {
-            control: "boolean";
-            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;
-        };
-        onContainerRefReady: {
-            action: string;
-            description: string;
-        };
-        onSpriteRefReady: {
-            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;
-export declare const WithUnifiedTransformer: Story;

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

@@ -1,150 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-import { Effects } from '../../types/Effects';
-
-import * as React from "react";
-import * as PIXI from "pixi.js";
-declare const meta: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import('../..').PixiBaseSpriteProps & {
-        onContainerRefReady?: (uniqueId: string, ref: React.MutableRefObject<PIXI.Container | null>) => void;
-        onSpriteRefReady?: (uniqueId: string, ref: React.MutableRefObject<PIXI.Container | null>) => void;
-    } & React.RefAttributes<import('../..').ForwardedRefResponse | null>>;
-    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
-    tags: string[];
-    argTypes: {
-        uniqueId: {
-            control: "text";
-            description: string;
-        };
-        src: {
-            control: "text";
-            description: string;
-        };
-        transformation: {
-            control: "object";
-            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: "boolean";
-            description: string;
-        };
-        startAt: {
-            control: "number";
-            description: string;
-        };
-        endAt: {
-            control: "number";
-            description: string;
-        };
-        visible: {
-            control: "boolean";
-            description: string;
-        };
-        onAnchorTransformationEnd: {
-            action: string;
-            description: string;
-        };
-        onContainerRefReady: {
-            action: string;
-            description: string;
-        };
-        onSpriteRefReady: {
-            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 WithUnifiedTransformer: Story;
-export declare const Animation: Story;
-export declare const PointerAnimation: Story;

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

@@ -1,159 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-
-import * as React from "react";
-declare const meta: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import('./PixiLottieSprite').PixiLottieSpriteProps & React.RefAttributes<import('../..').ForwardedRefResponse | null>>;
-    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
-    tags: string[];
-    argTypes: {
-        uniqueId: {
-            control: "text";
-            description: string;
-        };
-        src: {
-            control: "text";
-            description: string;
-        };
-        transformation: {
-            control: "object";
-            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: "boolean";
-            description: string;
-        };
-        startAt: {
-            control: "number";
-            description: string;
-        };
-        endAt: {
-            control: "number";
-            description: string;
-        };
-        frameStartAt: {
-            control: "number";
-            description: string;
-        };
-        frameEndAt: {
-            control: "number";
-            description: string;
-        };
-        visible: {
-            control: "boolean";
-            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;
-        };
-        onContainerRefReady: {
-            action: string;
-            description: string;
-        };
-        onSpriteRefReady: {
-            action: string;
-            description: string;
-        };
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Normal: Story;
-export declare const Filter: Story;
-export declare const FadeIn: Story;
-export declare const WithUnifiedTransformer: Story;