reacthub-pixitweenjs 0.2.7 → 0.2.8

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.8](https://github.com/khanzzirfan/reacthub-pixitweenjs/compare/v0.2.7...v0.2.8) (2023-08-27)
+
+
+### Bug Fixes
+
+* exported all pixi elements ([cec8ce1](https://github.com/khanzzirfan/reacthub-pixitweenjs/commit/cec8ce10588432fd775b6cd3cbb22118b034c4ca))
+
 ### [0.2.7](https://github.com/khanzzirfan/reacthub-pixitweenjs/compare/v0.2.6...v0.2.7) (2023-08-27)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reacthub-pixitweenjs",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "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",

package/src/components/PixiImageSprite/PixiImageSprite.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { PixiImageSprite } from ".";
 import { AppStateContextProvider } from "../../utils/AppStateProvider";
+import { Effects } from "../../types/Effects";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta = {
@@ -35,6 +36,11 @@ const meta = {
       scale: { control: "number", description: "scale of the sprite" },
       tint: { control: "number", description: "tint of the sprite" },
       blendMode: { control: "number", description: "blendMode of the sprite" },
+      effects: {
+        type: "string",
+        options: Object.values(Effects),
+        description: "filter effects of the sprite",
+      },
       colorCorrection: {
         control: "object",
         description: "colorCorrection of the sprite",
@@ -102,6 +108,7 @@ export const Normal: Story = {
       scale: 1,
       tint: 0xffffff,
       blendMode: 0,
+      effect: Effects.None,
       colorCorrection: {
         enabled: false,
         contrast: 1,
@@ -137,6 +144,7 @@ export const FadeIn: Story = {
       scale: 1,
       tint: 0xffffff,
       blendMode: 0,
+      effect: Effects.None,
       animation: "FADE_IN",
       colorCorrection: {},
     },
@@ -168,6 +176,7 @@ export const Filters: Story = {
       scale: 1,
       tint: 0xffffff,
       blendMode: 0,
+      effect: Effects.None,
       colorCorrection: {
         enabled: true,
         contrast: 1,
@@ -179,3 +188,33 @@ export const Filters: Story = {
     initialAlpha: 1,
   },
 };
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const FilterEffects: Story = {
+  render: (args: any) => (
+    <AppStateContextProvider {...args}>
+      <PixiImageSprite {...args} />
+    </AppStateContextProvider>
+  ),
+  args: {
+    uniqueId: "image-filtereffects001", // uniqueId of the sprite
+    src: "https://assets.codepen.io/693612/surya.svg",
+    applyTransformer: false,
+    startAt: 0,
+    endAt: 10,
+    transformation: {
+      x: 200,
+      y: 200,
+      width: 150,
+      height: 150,
+      anchor: 0.5,
+      rotation: 0,
+      alpha: 1,
+      scale: 1,
+      tint: 0xffffff,
+      blendMode: 0,
+      effect: Effects.BlackAndWhite,
+    },
+    initialAlpha: 1,
+  },
+};

package/src/components/index.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/src/index.ts

@@ -1,3 +1,3 @@
-export * from "./components/PixiImageSprite";
+export * from "./components";
 // Path: src\index.js
 export * from "./providers";

package/src/types/Effects.tsx

@@ -7,4 +7,5 @@ export enum Effects {
   RetroVintage = "RetroVintage",
   NightVision = "NightVision",
   Normal = "Normal",
+  None = "Normal",
 }