reacthub-pixitweenjs 0.2.3 → 0.2.5

package/.storybook/{main.js → main.ts}

@@ -1,5 +1,7 @@
 /** @type { import('@storybook/react-vite').StorybookConfig } */
-const config = {
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   staticDirs: ["../public"],
   addons: [
@@ -19,5 +21,11 @@ const config = {
   docs: {
     autodocs: "tag",
   },
+  core: {
+    builder: "@storybook/builder-vite",
+  },
+  async viteFinal(config) {
+    return config;
+  },
 };
 export default config;

package/.storybook/{preview.jsx → preview.tsx}

@@ -1,5 +1,5 @@
-// import { GsapPixieContextProvider } from "../src/providers/GsapPixieContextProvider";
-import { App } from "../src/providers/ContextBridge";
+import React from "react";
+import { AppWrapper } from "../src/utils/AppWrapper";
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
@@ -14,11 +14,7 @@ const preview = {
 };
 
 export const decorators = [
-  (Story) => (
-    <App>
-      <Story />
-    </App>
-  ),
+  (Story) => <AppWrapper>{Story({ appState: "x" })}</AppWrapper>,
 ];
 
 export default preview;

package/CHANGELOG.md

@@ -2,6 +2,46 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.2.5](https://github.com/khanzzirfan/reacthub-pixitweenjs/compare/v0.2.4...v0.2.5) (2023-08-23)
+
+
+### Features
+
+* audio sprite instance added ([be6333e](https://github.com/khanzzirfan/reacthub-pixitweenjs/commit/be6333e640b9449f3efa9afdb182aaa399344a65))
+* Gif animation added to the library ([c4c5914](https://github.com/khanzzirfan/reacthub-pixitweenjs/commit/c4c5914069d5f1699d17a40167e3e928ccfd48bf))
+
+
+### Bug Fixes
+
+* updated pixi svg sprite ([d462599](https://github.com/khanzzirfan/reacthub-pixitweenjs/commit/d462599b88f6151df32d9d4036d31bbb82236383))
+* updated pixijs bindings and updated pixi libraries dependencies ([2d39ac7](https://github.com/khanzzirfan/reacthub-pixitweenjs/commit/2d39ac795a5a7d355d75642aa778b22c9a2ad2ce))
+
+### [0.2.4](https://github.com/khanzzirfan/reacthub-gsap-pixiez/compare/v0.2.3...v0.2.4) (2023-07-23)
+
+
+### Features
+
+* image sprite component intialadded ([7d9c54e](https://github.com/khanzzirfan/reacthub-gsap-pixiez/commit/7d9c54e90705ab778d1fc6abe4abc0021fd5f725))
+* typescript initialized and converted all components ([e0ce358](https://github.com/khanzzirfan/reacthub-gsap-pixiez/commit/e0ce358d3e99325413d3ab80121273e4ca5c1173))
+
+
+### Bug Fixes
+
+* added state management to each story ([56f9da8](https://github.com/khanzzirfan/reacthub-gsap-pixiez/commit/56f9da833d83fa532a5449e1bc595408d3d59168))
+* added state management to each story ([5a1325c](https://github.com/khanzzirfan/reacthub-gsap-pixiez/commit/5a1325c4c5c0369516ed4d77d5593d51ac8d32e4))
+* applied transformers ([761f9a6](https://github.com/khanzzirfan/reacthub-gsap-pixiez/commit/761f9a6daf859b6c9b48038d47e14d0b0171e01d))
+* applied transformers ([6af3376](https://github.com/khanzzirfan/reacthub-gsap-pixiez/commit/6af3376f9e45bbd148c6c2a6b10094866b062509))
+* props updated ([dd7fd7b](https://github.com/khanzzirfan/reacthub-gsap-pixiez/commit/dd7fd7b50b45d20efc8c9cf67d984da228905d38))
+* props updated ([907b7f4](https://github.com/khanzzirfan/reacthub-gsap-pixiez/commit/907b7f467fe051388d4fea7703611507e44a3dc4))
+* props updated ([3ead9f5](https://github.com/khanzzirfan/reacthub-gsap-pixiez/commit/3ead9f527a32258cbc05ac372600f3a44b51289a))
+* props updated ([0579e77](https://github.com/khanzzirfan/reacthub-gsap-pixiez/commit/0579e770b7e233b260243c5d764e1a061b638ead))
+* props updated ([f0cda33](https://github.com/khanzzirfan/reacthub-gsap-pixiez/commit/f0cda33fb5c7a3137d99277261a7f6ec83be61fd))
+* story introduction ([554eeee](https://github.com/khanzzirfan/reacthub-gsap-pixiez/commit/554eeee7c5c0ee346b6604f8b2c50070602779f2))
+* story introduction ([a6e994d](https://github.com/khanzzirfan/reacthub-gsap-pixiez/commit/a6e994db80719f96155155604f0d03ddbbd69a66))
+* updated files ([47d34dd](https://github.com/khanzzirfan/reacthub-gsap-pixiez/commit/47d34dd3357fb8f98f6a636536fb213ee1bd839b))
+* updated storybook addons actions information ([5f3d377](https://github.com/khanzzirfan/reacthub-gsap-pixiez/commit/5f3d377907be428a063b3032359604d5d31fb74e))
+* updated storybook addons actions information ([81ad504](https://github.com/khanzzirfan/reacthub-gsap-pixiez/commit/81ad504226cd16efaed3c067d84e1df4bb89d6d5))
+
 ### [0.2.3](https://github.com/khanzzirfan/reacthub-gsap-pixiez/compare/v0.2.2...v0.2.3) (2023-07-20)
 
 ### [0.2.2](https://github.com/khanzzirfan/reacthub-gsap-pixiez/compare/v0.2.1...v0.2.2) (2023-07-20)

package/README.md

@@ -1,4 +1,3 @@
-
 <h1 align="center">
   Welcome to Reacthub PixiTweenJS
 </h1>
@@ -13,9 +12,29 @@ To install the component packages using NPM/ Yarn:
   yarn add reacthub-pixitweenjs
 ```
 
+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",
+```
+
 ## Description
+
 PixiTweenJs is designed to help you build animated time-controlled canvas elements on web apps using extensible Pixijs Components underneath. The package composes the reacthub/pixitweenjs Web Component package. You can use these Web Components flexibly, either from npm packages, from the CDN, or you can bring it into your project to customize and extend it.
 
 ## Usage
-Visit the storybook
 
+Visit the [storybook](https://64b9d71094fa7aed0c7291cf-sinysbbbmx.chromatic.com/?path=/docs/components-imagesprite--docs)

package/build-storybook.log

@@ -0,0 +1,94 @@
+
+> reacthub-pixitweenjs@0.2.4 build-storybook
+> storybook build
+
+@storybook/cli v7.2.1
+
+info => Cleaning outputDir: C:\Users\khanz\AppData\Local\Temp\chromatic--44868-JPYg4DLcQ0mH
+info => Loading presets
+info => Building manager..
+info => Manager built (350 ms)
+info => Copying static files: C:\code\Code\bitbuckets\storybook\reacthub-pixitweenjs\node_modules\@storybook\manager\static at C:\Users\khanz\AppData\Local\Temp\chromatic--44868-JPYg4DLcQ0mH\sb-common-assets
+vite v4.4.9 building for production...
+
+./sb-common-assets/fonts.css doesn't exist at build time, it will remain unchanged to be resolved at runtime
+transforming...
+info => Copying static files: C:\code\Code\bitbuckets\storybook\reacthub-pixitweenjs\public at C:\Users\khanz\AppData\Local\Temp\chromatic--44868-JPYg4DLcQ0mH\
+node_modules/telejson/dist/index.mjs (1394:15) Use of eval in "node_modules/telejson/dist/index.mjs" is strongly discouraged as it poses security risks and may cause issues with minification.
+node_modules/telejson/dist/index.mjs (1397:18) Use of eval in "node_modules/telejson/dist/index.mjs" is strongly discouraged as it poses security risks and may cause issues with minification.
+✓ 2178 modules transformed.
+rendering chunks...
+computing gzip size...
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/direction-94a9917f.svg                         1.28 kB │ gzip:   0.71 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/flow-275142c6.svg                              1.39 kB │ gzip:   0.68 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/code-brackets-9ef6443e.svg                     1.46 kB │ gzip:   0.69 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/comments-f15a6837.svg                          1.53 kB │ gzip:   0.70 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/repo-fb4ece47.svg                              1.64 kB │ gzip:   0.83 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/plugin-57148314.svg                            2.17 kB │ gzip:   0.98 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/stackalt-2ad81543.svg                          2.55 kB │ gzip:   1.09 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/colors-ac9401f3.svg                            8.51 kB │ gzip:   3.61 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/iframe.html                                          12.74 kB │ gzip:   3.56 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/index-d475d2ea.js                              0.21 kB │ gzip:   0.17 kB │ map:     0.84 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/index-aefaebb0.js                              0.25 kB │ gzip:   0.20 kB │ map:     0.10 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/chunk-MSDTXLE7-e8876087.js                     0.33 kB │ gzip:   0.28 kB │ map:     1.29 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/extends-a5793c18.js                            0.46 kB │ gzip:   0.33 kB │ map:     2.00 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/index-e744116c.js                              0.53 kB │ gzip:   0.34 kB │ map:     4.29 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/WithTooltip-YBG737T3-8386b405.js               0.54 kB │ gzip:   0.31 kB │ map:     0.11 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/syntaxhighlighter-4OVWVELQ-97d9e0b2.js         0.56 kB │ gzip:   0.33 kB │ map:     0.12 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/react-18-0f8fd3cb.js                           0.59 kB │ gzip:   0.38 kB │ map:     2.65 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/preview-ddf73cda.js                            0.64 kB │ gzip:   0.38 kB │ map:     0.54 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/preview-5ef354f3.js                            0.69 kB │ gzip:   0.49 kB │ map:     3.93 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/_commonjsHelpers-de833af9.js                   0.75 kB │ gzip:   0.43 kB │ map:     0.11 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/index-356e4a49.js                              0.81 kB │ gzip:   0.51 kB │ map:     3.28 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/index-8d47fad6.js                              0.84 kB │ gzip:   0.55 kB │ map:     4.14 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/preview-b79ea209.js                            0.90 kB │ gzip:   0.60 kB │ map:     2.96 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/jsx-runtime-4ca860c5.js                        0.97 kB │ gzip:   0.61 kB │ map:     2.33 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/DocsRenderer-3PUGWF3O-731fd7e2.js              1.40 kB │ gzip:   0.75 kB │ map:     2.60 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/Installation-e42280fa.js                       1.80 kB │ gzip:   0.81 kB │ map:     2.48 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/preview-a60aa466.js                            2.40 kB │ gzip:   1.25 kB │ map:    11.11 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/index-d37d4223.js                              2.63 kB │ gzip:   1.30 kB │ map:     7.49 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/Git-DZ2D5ZUL-6ca74cd2.js                       3.06 kB │ gzip:   1.00 kB │ map:     7.21 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/preview-770cc08b.js                            3.22 kB │ gzip:   1.39 kB │ map:    10.25 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/AppStateProvider-98b23489.js                   3.39 kB │ gzip:   1.45 kB │ map:    14.42 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/Editing-7QFB6ZMG-a75b9a4e.js                   4.02 kB │ gzip:   1.12 kB │ map:    10.11 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/_getTag-0ebf12fe.js                            5.05 kB │ gzip:   2.30 kB │ map:    36.86 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/OS-YZ2Y4VYS-57059e39.js                        5.57 kB │ gzip:   2.20 kB │ map:     9.94 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/Introduction-def93083.js                       5.60 kB │ gzip:   2.14 kB │ map:     7.06 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/iframe-d69fca24.js                             6.95 kB │ gzip:   1.98 kB │ map:     6.18 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/index-61bf1805.js                              7.21 kB │ gzip:   2.95 kB │ map:    15.75 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/People-OD4EV7WZ-e23c0f1f.js                    7.64 kB │ gzip:   2.20 kB │ map:    16.31 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/preview-d8c963a4.js                            7.67 kB │ gzip:   1.60 kB │ map:    14.23 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/Documents-SGWAY3KW-a46f097b.js                 8.11 kB │ gzip:   1.61 kB │ map:    20.07 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/preview-25cb0eda.js                            8.33 kB │ gzip:   3.21 kB │ map:    29.44 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/PixiImageSprite.stories-7e5a4f44.js            9.26 kB │ gzip:   2.66 kB │ map:    14.69 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/Devices-SUYACUPO-5f5f7f3c.js                  11.12 kB │ gzip:   2.43 kB │ map:    24.80 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/_baseForOwn-bcc012ac.js                       12.26 kB │ gzip:   5.09 kB │ map:    97.95 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/PixiVideoSprite.stories-4587bff3.js           13.85 kB │ gzip:   3.94 kB │ map:    31.90 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/GlobalScrollAreaStyles-4LLX2B3H-865623c6.js   15.15 kB │ gzip:   2.85 kB │ map:    21.44 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/Logos-SJTNNI74-dfca754f.js                    15.65 kB │ gzip:   5.34 kB │ map:    30.02 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/Wayfinding-BB4H7CHP-0d20a672.js               19.02 kB │ gzip:   3.75 kB │ map:    47.57 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/Images-S2WTXNGG-1424b253.js                   20.72 kB │ gzip:   4.41 kB │ map:    49.06 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/preview-d06fc6bf.js                           21.08 kB │ gzip:   6.99 kB │ map:    68.34 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/Communicate-7JXCND2Z-d3f800fa.js              25.15 kB │ gzip:   6.58 kB │ map:    52.59 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/CRUD-I5EZL2FS-97d62e3d.js                     26.35 kB │ gzip:   5.92 kB │ map:    59.47 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/PixiGifSprite.stories-8b08b093.js             26.94 kB │ gzip:   8.65 kB │ map:    78.57 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/OverlayScrollbars-OL4C4TVX-03af70e8.js        28.95 kB │ gzip:  14.20 kB │ map:   108.16 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/PixiAudioSprite.stories-404cbd17.js           29.91 kB │ gzip:   8.32 kB │ map:    99.78 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/Color-6VNJS4EI-223d643c.js                    31.16 kB │ gzip:  11.69 kB │ map:   112.86 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/GsapAnim-96ba73b9.js                          36.15 kB │ gzip:   9.84 kB │ map:   160.28 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/PixiSvgPathSprite.stories-4715883c.js         46.25 kB │ gzip:  15.72 kB │ map:   175.56 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/index-52fb8234.js                             61.08 kB │ gzip:  16.39 kB │ map:   190.97 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/HTMLText-f020e808.js                          95.94 kB │ gzip:  28.08 kB │ map:   298.45 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/index-2801d3c9.js                            134.11 kB │ gzip:  43.23 kB │ map:   328.91 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/config-d8b72d70.js                           213.58 kB │ gzip:  66.40 kB │ map:   803.98 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/preview-d1ad52e5.js                          303.45 kB │ gzip: 102.80 kB │ map: 1,477.73 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/module-28e6bed8.js                           569.49 kB │ gzip: 180.91 kB │ map: 1,986.99 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/formatter-ZNWCFYAW-da868a3a.js               601.74 kB │ gzip: 185.08 kB │ map: 1,318.63 kB
+../../../../../Users/khanz/AppData/Local/Temp/chromatic--44868-JPYg4DLcQ0mH/assets/index-ab5a789e.js                            640.33 kB │ gzip: 195.67 kB │ map: 1,968.70 kB
+
+(!) Some chunks are larger than 500 kBs after minification. Consider:
+- Using dynamic import() to code-split the application
+- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
+- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
+✓ built in 29.71s
+info => Output directory: C:\Users\khanz\AppData\Local\Temp\chromatic--44868-JPYg4DLcQ0mH

package/index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

package/package.json

@@ -1,30 +1,31 @@
 {
   "name": "reacthub-pixitweenjs",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "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",
   "type": "module",
   "repository": {
     "type": "git",
-    "url": "https://github.com/khanzzirfan/reacthub-gsap-pixiez"
+    "url": "https://github.com/khanzzirfan/reacthub-pixitweenjs"
   },
   "bugs": {
-    "url": "https://github.com/khanzzirfan/reacthub-gsap-pixiez/issues"
+    "url": "https://github.com/khanzzirfan/reacthub-pixitweenjs"
   },
   "license": "MIT",
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "tsc && vite build",
+    "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",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md}\"",
     "preview": "vite preview",
+    "test": "vitest",
     "storybook": "storybook dev -p 6006",
     "start": "npm run storybook",
     "build-storybook": "storybook build",
     "init-msw": "msw init public/",
-    "release": "standard-version --release-as patch &&npm publish"
+    "release": "standard-version --release-as patch &&npm publish",
+    "chromatic": "env-cmd -f .env.dev chromatic"
   },
   "devDependencies": {
     "@chakra-ui/icons": "^2.0.15",
@@ -34,42 +35,73 @@
     "@giphy/js-fetch-api": "^4.1.2",
     "@giphy/js-types": "^4.1.0",
     "@giphy/react-components": "^5.6.1",
-    "@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/assets": "^7.2.3",
+    "@pixi/filter-adjustment": "^5.1.1",
+    "@pixi/react": "~7.1.0",
     "@react-gifs/tools": "^0.1.2",
-    "@storybook/addon-essentials": "^7.0.6",
-    "@storybook/addon-interactions": "^7.0.6",
-    "@storybook/addon-links": "^7.0.6",
-    "@storybook/blocks": "^7.0.6",
+    "@storybook/addon-essentials": "^7.1.0",
+    "@storybook/addon-interactions": "^7.1.0",
+    "@storybook/addon-links": "^7.1.0",
+    "@storybook/addon-onboarding": "^1.0.7",
+    "@storybook/addon-styling": "^1.3.4",
+    "@storybook/blocks": "^7.1.0",
+    "@storybook/builder-vite": "^7.1.0",
     "@storybook/jest": "^0.1.0",
-    "@storybook/react": "^7.0.6",
-    "@storybook/react-vite": "^7.0.6",
-    "@storybook/testing-library": "^0.0.14-next.2",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@vitejs/plugin-react": "^3.1.0",
+    "@storybook/react": "^7.1.0",
+    "@storybook/react-vite": "^7.1.0",
+    "@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",
+    "@types/dotenv": "^8.2.0",
+    "@types/howler": "^2.2.8",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@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",
+    "chromatic": "^6.7.3",
+    "debug": "^4.3.4",
+    "dotenv": "^16.0.1",
+    "env-cmd": "^10.1.0",
+    "eslint": "^8.45.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.5",
+    "eslint-plugin-storybook": "^0.6.12",
     "framer-motion": "^8.4.0",
+    "gifuct-js": "^2.1.2",
     "gsap": "3.11.5",
+    "howler": "^2.2.3",
+    "jsdom": "^21.1.2",
     "lodash": "4.17.21",
     "msw": "^1.2.1",
     "msw-storybook-addon": "^1.8.0",
-    "pixi-filters": "5.1.1",
-    "pixi-svg": "3.2.0",
-    "pixi.js": "6.5.9",
+    "pixi-filters": "^5.2.1",
+    "pixi-svg": "^3.2.0",
+    "pixi.js": "^7.2.3",
     "prop-types": "^15.8.1",
+    "react": "^18.2.0",
     "react-custom-events": "^1.1.1",
-    "react-gsap": "^3.2.1",
-    "storybook": "^7.0.6",
-    "storybook-react-context": "^0.6.0",
+    "react-dom": "^18.2.0",
+    "react-fast-compare": "^3.2.0",
+    "reacthub-react-bindings": "latest",
     "standard-version": "^9.5.0",
-    "vite": "^4.2.0"
+    "storybook": "^7.1.0",
+    "storybook-react-context": "^0.6.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": "^4.4.4",
+    "vite-plugin-environment": "^1.1.3",
+    "vite-plugin-stylelint": "^4.3.0",
+    "vitest": "^0.30.1"
+  },
+  "dependencies": {
+    "@pixi/sound": "^5.2.1"
   }
 }

package/src/App.tsx

@@ -0,0 +1,29 @@
+import { useState } from "react";
+import "./App.css";
+
+function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="App">
+      <div>
+        <a href="https://vitejs.dev" target="_blank"></a>
+        <a href="https://reactjs.org" target="_blank"></a>
+      </div>
+      <h1>Vite + React</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/App.jsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">
+        Click on the Vite and React logos to learn more
+      </p>
+    </div>
+  );
+}
+
+export default App;

package/src/components/PixiAnimatedSprite/PixiAnimatedSprite.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { AnimatedSprite as ReactPixiAnimatedSprite } from "@pixi/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;
+};
+
+const PixiAnimatedSpriteComp = ({
+  isPlaying,
+  forwardRef,
+  ...props
+}: PixiAnimatedSpriteProps) => {
+  const animationSprite = React.useRef<any>(null);
+
+  React.useImperativeHandle(forwardRef, () => animationSprite.current!, [
+    animationSprite,
+  ]);
+
+  React.useEffect(() => {
+    if (animationSprite.current === null) return;
+    const sprite = animationSprite.current;
+    sprite[isPlaying ? "gotoAndPlay" : "gotoAndStop"](sprite.currentFrame);
+  }, [isPlaying]);
+
+  return (
+    <ReactPixiAnimatedSprite
+      ref={animationSprite}
+      {...props}
+      isPlaying={isPlaying}
+    />
+  );
+};
+const PixiAnimatedSprite = React.memo(PixiAnimatedSpriteComp);
+export default PixiAnimatedSprite;

package/src/components/PixiAnimatedSprite/index.ts

@@ -0,0 +1,2 @@
+export { default as PixiAnimatedSprite } from "./PixiAnimatedSprite";
+// Path: src\components\PixiAnimatedSprite\index.ts

package/src/components/PixiAudioSprite/PixiAudioSprite.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PixiAudioSprite } from ".";
+import { AppStateContextProvider } from "../../utils/AppStateProvider";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta = {
+  title: "Components/AudioSprite",
+  component: PixiAudioSprite,
+
+  tags: ["autodocs"],
+  argTypes: {
+    uniqueId: {
+      control: "text",
+      description: "uniqueId of the sprite",
+    },
+    src: {
+      control: "text",
+      description: "source of the image",
+    },
+    startAt: { control: "number", description: "startAt" },
+    endAt: { control: "number", description: "endAt" },
+    mute: { control: "boolean", description: "mute" },
+    speed: { control: "number", description: "speed" },
+  },
+} satisfies Meta<typeof PixiAudioSprite>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Normal: Story = {
+  render: (args: any) => (
+    <AppStateContextProvider {...args}>
+      <PixiAudioSprite {...args} />
+    </AppStateContextProvider>
+  ),
+  args: {
+    uniqueId: "audio001", // uniqueId of the sprite
+    src: "https://eyecastvideoeditorfiles.s3.ap-southeast-2.amazonaws.com/public%2Firfan%40trolio.com%2F6472d56e805c3bffc3cded33%2Fvideos%2F8Qq3DKrGnQ%2Fpiano2-CoolEdit.mp3",
+    startAt: 0,
+    endAt: 5,
+    mute: false,
+    speed: 1,
+  },
+};
+
+export const Customized: Story = {
+  render: (args: any) => (
+    <AppStateContextProvider {...args}>
+      <PixiAudioSprite {...args} />
+    </AppStateContextProvider>
+  ),
+  args: {
+    uniqueId: "audio002", // uniqueId of the sprite
+    src: "https://eyecastvideoeditorfiles.s3.ap-southeast-2.amazonaws.com/public%2Firfan%40trolio.com%2F6472d56e805c3bffc3cded33%2Fvideos%2F8Qq3DKrGnQ%2Fpiano2-CoolEdit.mp3",
+    startAt: 0,
+    endAt: 5,
+    mute: true,
+    speed: 1,
+  },
+};