reacthub-pixitweenjs 0.2.2 → 0.2.4

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,6 +1,6 @@
 {
   "name": "reacthub-pixitweenjs",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "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",
@@ -12,19 +12,21 @@
     "url": "https://github.com/khanzzirfan/reacthub-gsap-pixiez/issues"
   },
   "license": "MIT",
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
+  "dependencies": {},
   "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",
@@ -45,17 +47,39 @@
     "@pixi/react": "7.0.0",
     "@pixi/sound": "^4.3.1",
     "@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/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/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",
     "@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",
+    "jsdom": "^21.1.2",
+    "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",
+    "react-fast-compare": "^3.2.0",
+    "chromatic": "^6.7.3",
+    "debug": "^4.3.4",
+    "dotenv": "^16.0.1",
+    "env-cmd": "^10.1.0",
     "framer-motion": "^8.4.0",
     "gsap": "3.11.5",
     "lodash": "4.17.21",
@@ -67,9 +91,20 @@
     "prop-types": "^15.8.1",
     "react-custom-events": "^1.1.1",
     "react-gsap": "^3.2.1",
-    "storybook": "^7.0.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "storybook-react-context": "^0.6.0",
     "standard-version": "^9.5.0",
-    "vite": "^4.2.0"
+    "storybook": "^7.1.0",
+    "stylelint": "^15.10.2",
+    "stylelint-config-prettier": "^9.0.5",
+    "stylelint-config-recommended-scss": "^11.0.0",
+    "stylelint-config-standard": "^33.0.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"
   }
 }

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/{stories/PixiImageSprite/PixiImageSprite.stories.js → components/PixiImageSprite/PixiImageSprite.stories.tsx}

@@ -1,13 +1,16 @@
-import { PixiImageSprite } from "./PixiImageSprite";
+import type { Meta, StoryObj } from "@storybook/react";
+import { PixiImageSprite } from ".";
+
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-export default {
+const meta = {
   title: "Components/ImageSprite",
   component: PixiImageSprite,
+
   tags: ["autodocs"],
   argTypes: {
-    backgroundColor: {
-      control: "color",
-      description: "background color for the application stage",
+    uniqueId: {
+      control: "text",
+      description: "uniqueId of the sprite",
     },
     src: {
       control: "text",
@@ -55,12 +58,25 @@ export default {
       max: 1,
       description: "sprite initial alpha value (default  1)",
     },
+    onAnchorTransformationEnd: {
+      action: "onAnchorTransformationEnd",
+      description:
+        "on transforamtion end the event is fire callback with latest sprite transformation properties.",
+    },
+    pointerdown: {
+      action: "pointerdown",
+      description: "pointerdown event",
+    },
   },
-};
+} satisfies Meta<typeof PixiImageSprite>;
+
+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 = {
+export const Normal: Story = {
   args: {
+    uniqueId: "surya001", // uniqueId of the sprite
     src: "https://assets.codepen.io/693612/surya.svg",
     transformation: {
       x: 100,
@@ -82,8 +98,9 @@ export const Normal = {
   },
 };
 
-export const FadeIn = {
+export const FadeIn: Story = {
   args: {
+    uniqueId: "surya002", // uniqueId of the sprite
     src: "https://assets.codepen.io/693612/surya.svg",
     transformation: {
       x: 100,

package/src/components/PixiImageSprite/PixiImageSprite.tsx

@@ -0,0 +1,346 @@
+import * as React from "react";
+import { useContext, useEffect, useRef, useState } from "react";
+// @ts-ignore
+import PropTypes from "prop-types";
+import { GsapPixieContext } from "../../providers/GsapPixieContextProvider";
+import { Sprite, Container, useApp, withFilters } from "@pixi/react";
+import { AdjustmentFilter } from "@pixi/filter-adjustment";
+import * as PIXI from "pixi.js";
+import gsap from "gsap";
+// @ts-ignore
+import isEmpty from "lodash/isEmpty";
+import { getAnimByName } from "../../utils/GsapAnim";
+import { usePixiTransformer } from "../../hooks/usePixiTransformer";
+import { TransformationEnd } from "../../types/transformation";
+
+type PixiImageSpriteProps = {
+  uniqueId: string;
+  src: 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;
+      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?: string;
+  };
+  pointerdown?: () => void;
+  pointerup?: () => void;
+  mousedown?: () => void;
+  mouseup?: () => void;
+  pointerover?: () => void;
+  mouseover?: () => void;
+  mouseout?: () => void;
+  applyTransformer?: boolean;
+  onAnchorTransformationEnd?: (endData: any) => void;
+};
+
+type EffectFunc = () => void;
+type Deps = ReadonlyArray<unknown>;
+
+const Filters = withFilters(Container, {
+  blur: PIXI.filters.BlurFilter,
+  adjust: AdjustmentFilter,
+  matrix: PIXI.filters.ColorMatrixFilter,
+});
+
+/** filter config */
+const config = {
+  dot: {
+    scale: 1,
+    angle: 5,
+  },
+  blur: {
+    blur: 0,
+    quality: 4,
+  },
+};
+
+/** CYAN Filters */
+const CYAN = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0];
+
+const PixiImageSprite: React.FC<PixiImageSpriteProps> = (props) => {
+  //// State
+  const [transform, setTransform] = useState({
+    x: 0,
+    y: 0,
+    width: 80,
+    height: 80,
+    rotate: 0,
+  });
+  const [isTransformerDragging, setIsTransformerDragging] = useState(false);
+  const [isMouseOverTransformer, setIsMouseOverTransformer] = useState(false);
+
+  console.log("allProps", props);
+  //// Refs
+  const imageRef = useRef<PIXI.Sprite>(null);
+  const containerRef = useRef<PIXI.Container>(null);
+  const parentNode = useRef<PIXI.Container>(null);
+  const imgGroupRef = useRef<PIXI.Container>(null);
+
+  //// Context
+  const { tl } = useContext(GsapPixieContext);
+
+  /// 1001
+  console.log("contxt Values", tl);
+  const {
+    uniqueId,
+    src,
+    startAt,
+    endAt,
+    initialAlpha,
+    transformation: {
+      x,
+      y,
+      width,
+      height,
+      anchor,
+      animation,
+      colorCorrection,
+      effect,
+    },
+    pointerdown,
+    pointerup,
+    mousedown,
+    mouseup,
+    pointerover,
+    mouseover,
+    mouseout,
+    applyTransformer,
+    onAnchorTransformationEnd,
+    ...restProps
+  } = props;
+
+  // color corrections
+  const {
+    enabled = false,
+    temperature = 1,
+    hue = 1,
+    contrast = 1,
+    saturation = 1,
+    exposure = 1,
+    reset,
+    sharpness = 1,
+    value = 0,
+    levels = 1,
+    luminance = 0,
+    enhance = 0,
+    blurRadius = 0,
+    red = 150,
+    green = 150,
+    blue = 150,
+    alpha = 1,
+    scaleInput = 1,
+  } = colorCorrection || {};
+
+  const app = useApp();
+  const PixiTransformer = useRef<any>(null);
+
+  /** adjustment filter */
+  const adjustments = {
+    brightness: exposure,
+    contrast,
+    saturation,
+    alpha,
+  };
+
+  // transformer to handle sprite transformation
+  const handleOnTransformEnd = React.useCallback(
+    (endData: TransformationEnd) => {
+      console.log("changeEnd", endData);
+      if (onAnchorTransformationEnd) {
+        onAnchorTransformationEnd(endData);
+      }
+    },
+    [],
+  );
+
+  // initialize usePixiTransformer hook
+  const { handleTransformer, removeTransformer, isDragging } =
+    usePixiTransformer({
+      uniqueId,
+      onTransformEnd: handleOnTransformEnd,
+      events: {},
+      mouseoverEvent: setIsMouseOverTransformer,
+      setDragging: setIsTransformerDragging,
+    });
+
+  useEffect(() => {
+    let ctx = gsap.context(() => {});
+    if (containerRef.current && tl.current) {
+      const data = {
+        duration: Number(endAt) - Number(startAt),
+      };
+
+      const ease = getAnimByName(animation || "None");
+      ctx = gsap.context(() => {
+        if (!isEmpty(ease.from)) {
+          tl.current
+            .from(containerRef.current, { ...ease.from }, startAt)
+            .to(imgGroupRef.current, { alpha: 1, duration: 0.2 }, startAt)
+            .from(imgGroupRef.current, { ...data }, startAt)
+            .to(containerRef.current, { alpha: 0, duration: 0.2 }, endAt - 0.2);
+        } else if (!isEmpty(ease.to)) {
+          tl.current
+            .to(
+              containerRef.current,
+              { alpha: 1, duration: 0.2, ...ease.to },
+              startAt,
+            )
+            .from(imgGroupRef.current, { ...data }, startAt)
+            .to(containerRef.current, { alpha: 0, duration: 0.2 }, endAt - 0.2);
+        } else if (!isEmpty(ease.fromTo)) {
+          tl.current
+            .fromTo(
+              containerRef.current,
+              ease.fromTo?.from,
+              ease.fromTo?.to,
+              startAt,
+            )
+            .from(imgGroupRef.current, { ...data }, startAt)
+            .to(containerRef.current, { alpha: 0, duration: 0.2 }, endAt - 0.2);
+        } else {
+          tl.current
+            .to(containerRef.current, { alpha: 1, duration: 0.01 }, startAt)
+            .from(imgGroupRef.current, { ...data }, startAt)
+            .to(
+              containerRef.current,
+              { alpha: 0, duration: 0.1 },
+              Number(endAt) - Number(0.1),
+            );
+        }
+      });
+    }
+    return () => ctx.revert(); // cleanup!
+  }, [animation, startAt, endAt]);
+
+  useEffect(() => {
+    setIsTransformerDragging(isDragging);
+  }, [isDragging]);
+
+  // apply transformer in use effect hook based on prop applyTransformer
+  useEffect(() => {
+    if (applyTransformer && containerRef.current && parentNode.current) {
+      handleTransformer(containerRef.current, parentNode.current);
+    }
+    return () => {
+      removeTransformer();
+    };
+  }, [removeTransformer, handleTransformer, applyTransformer]);
+
+  return (
+    // @ts-ignore
+    <Container ref={parentNode}>
+      {/* @ts-ignore */}
+      <Container
+        ref={containerRef}
+        alpha={initialAlpha}
+        position={[x, y]}
+        pivot={[x, y]}
+        width={width}
+        height={height}
+      >
+        {colorCorrection && colorCorrection.enabled ? (
+          <Filters
+            scale={1}
+            blur={{ blur: blurRadius, quality: 4 }}
+            adjust={adjustments}
+            apply={({ matrix }: { matrix: any }) => {
+              if (effect === "BlackAndWhite") {
+                matrix.desaturate();
+              } else if (effect === "Sepia") {
+                matrix.sepia();
+              } else if (effect === "RetroVintage") {
+                matrix.negative();
+              } else if (effect === "NightVision") {
+                matrix.negative();
+              } else if (effect === "Normal") {
+                matrix.reset();
+              }
+            }}
+            matrix={{
+              enabled: true,
+              // @ts-ignore
+              matrix: CYAN,
+            }}
+          >
+            {/* @ts-ignore */}
+            <Container ref={imgGroupRef}>
+              <Sprite
+                image={src}
+                width={width}
+                height={height}
+                anchor={anchor}
+                ref={imageRef}
+                x={x}
+                y={y}
+                // @ts-ignore
+                interactive={true}
+                pointerdown={pointerdown}
+                pointerup={pointerup}
+                pointerover={pointerover}
+                mousedown={mousedown}
+                mouseup={mouseup}
+                mouseover={mouseover}
+                mouseout={mouseout}
+              />
+            </Container>
+          </Filters>
+        ) : (
+          // @ts-ignore
+          <Container ref={imgGroupRef}>
+            <Sprite
+              image={src}
+              width={width}
+              height={height}
+              anchor={anchor}
+              ref={imageRef}
+              x={x}
+              y={y}
+              // @ts-ignore
+              interactive={true}
+              pointerdown={pointerdown}
+              pointerup={pointerup}
+              pointerover={pointerover}
+              mousedown={mousedown}
+              mouseup={mouseup}
+              mouseover={mouseover}
+              mouseout={mouseout}
+            />
+          </Container>
+        )}
+      </Container>
+    </Container>
+  );
+};
+
+export default PixiImageSprite;

package/src/components/PixiImageSprite/index.ts

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