reacthub-pixitweenjs 0.2.109-alpha.5 → 0.2.109-alpha.7

package/dist/pixitweenjs-logo-dark.svg

@@ -0,0 +1,98 @@
+<svg width="600" height="200" viewBox="0 0 600 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <!-- Gradient for the logo - brighter for dark mode -->
+    <linearGradient id="logoDarkGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#64B5F6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#42A5F5;stop-opacity:1" />
+    </linearGradient>
+    
+    <!-- Gradient for text - brighter -->
+    <linearGradient id="textDarkGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#64B5F6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#42A5F5;stop-opacity:1" />
+    </linearGradient>
+
+    <!-- Glow effect for dark mode -->
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
+      <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+  
+  <!-- Dark background (optional, for preview) -->
+  <rect width="600" height="200" fill="#0d1117"/>
+  
+  <!-- Film strip frame -->
+  <g id="filmStrip" filter="url(#glow)">
+    <!-- Main frame -->
+    <rect x="30" y="40" width="150" height="120" rx="8" fill="none" stroke="url(#logoDarkGradient)" stroke-width="4"/>
+    
+    <!-- Film holes - top -->
+    <rect x="40" y="45" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
+    <rect x="60" y="45" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
+    <rect x="80" y="45" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
+    <rect x="100" y="45" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
+    <rect x="120" y="45" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
+    <rect x="140" y="45" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
+    <rect x="160" y="45" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
+    
+    <!-- Film holes - bottom -->
+    <rect x="40" y="147" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
+    <rect x="60" y="147" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
+    <rect x="80" y="147" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
+    <rect x="100" y="147" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
+    <rect x="120" y="147" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
+    <rect x="140" y="147" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
+    <rect x="160" y="147" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
+    
+    <!-- Timeline bars inside -->
+    <rect x="50" y="75" width="50" height="4" rx="2" fill="url(#logoDarkGradient)" opacity="0.7"/>
+    <rect x="50" y="90" width="70" height="4" rx="2" fill="url(#logoDarkGradient)" opacity="0.7"/>
+    <rect x="50" y="105" width="40" height="4" rx="2" fill="url(#logoDarkGradient)" opacity="0.7"/>
+    <rect x="50" y="120" width="60" height="4" rx="2" fill="url(#logoDarkGradient)" opacity="0.7"/>
+    
+    <!-- Play button circle with animation -->
+    <g>
+      <circle cx="135" cy="100" r="22" fill="none" stroke="url(#logoDarkGradient)" stroke-width="3" opacity="0.9">
+        <animateTransform
+          attributeName="transform"
+          attributeType="XML"
+          type="rotate"
+          from="0 135 100"
+          to="360 135 100"
+          dur="3s"
+          repeatCount="indefinite"/>
+      </circle>
+      
+      <!-- Play triangle -->
+      <polygon points="130,90 130,110 148,100" fill="url(#logoDarkGradient)"/>
+    </g>
+  </g>
+  
+  <!-- Text: PixiTweenJS -->
+  <text x="200" y="100" font-family="'Segoe UI', -apple-system, system-ui, sans-serif" font-size="52" font-weight="700" fill="url(#textDarkGradient)" filter="url(#glow)">
+    PixiTweenJS
+  </text>
+  
+  <!-- Tagline -->
+  <text x="200" y="130" font-family="'Segoe UI', -apple-system, system-ui, sans-serif" font-size="20" font-weight="400" fill="#90CAF9" opacity="0.9">
+    Timeline-based canvas animation
+  </text>
+  
+  <!-- Decorative elements - brighter sparkles -->
+  <g opacity="0.6">
+    <!-- Small sparkles -->
+    <circle cx="190" cy="65" r="2" fill="#64B5F6">
+      <animate attributeName="opacity" values="0.6;1;0.6" dur="2s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="570" cy="75" r="2" fill="#64B5F6">
+      <animate attributeName="opacity" values="0.6;1;0.6" dur="2.5s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="210" cy="145" r="2" fill="#64B5F6">
+      <animate attributeName="opacity" values="0.6;1;0.6" dur="3s" repeatCount="indefinite"/>
+    </circle>
+  </g>
+</svg>

package/dist/pixitweenjs-logo.svg

@@ -0,0 +1,97 @@
+<svg width="600" height="200" viewBox="0 0 600 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <!-- Gradient for the logo -->
+    <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#4FC3F7;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#29B6F6;stop-opacity:1" />
+    </linearGradient>
+    
+    <!-- Gradient for text -->
+    <linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#29B6F6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#039BE5;stop-opacity:1" />
+    </linearGradient>
+
+    <!-- Animation for the play circle -->
+    <animateTransform
+      id="playAnimation"
+      attributeName="transform"
+      attributeType="XML"
+      type="rotate"
+      from="0 135 100"
+      to="360 135 100"
+      dur="3s"
+      repeatCount="indefinite"/>
+  </defs>
+  
+  <!-- Film strip frame -->
+  <g id="filmStrip">
+    <!-- Main frame -->
+    <rect x="30" y="40" width="150" height="120" rx="8" fill="none" stroke="url(#logoGradient)" stroke-width="4"/>
+    
+    <!-- Film holes - top -->
+    <rect x="40" y="45" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
+    <rect x="60" y="45" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
+    <rect x="80" y="45" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
+    <rect x="100" y="45" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
+    <rect x="120" y="45" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
+    <rect x="140" y="45" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
+    <rect x="160" y="45" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
+    
+    <!-- Film holes - bottom -->
+    <rect x="40" y="147" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
+    <rect x="60" y="147" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
+    <rect x="80" y="147" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
+    <rect x="100" y="147" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
+    <rect x="120" y="147" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
+    <rect x="140" y="147" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
+    <rect x="160" y="147" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
+    
+    <!-- Timeline bars inside -->
+    <rect x="50" y="75" width="50" height="4" rx="2" fill="url(#logoGradient)" opacity="0.6"/>
+    <rect x="50" y="90" width="70" height="4" rx="2" fill="url(#logoGradient)" opacity="0.6"/>
+    <rect x="50" y="105" width="40" height="4" rx="2" fill="url(#logoGradient)" opacity="0.6"/>
+    <rect x="50" y="120" width="60" height="4" rx="2" fill="url(#logoGradient)" opacity="0.6"/>
+    
+    <!-- Play button circle with animation -->
+    <g>
+      <circle cx="135" cy="100" r="22" fill="none" stroke="url(#logoGradient)" stroke-width="3" opacity="0.8">
+        <animateTransform
+          attributeName="transform"
+          attributeType="XML"
+          type="rotate"
+          from="0 135 100"
+          to="360 135 100"
+          dur="3s"
+          repeatCount="indefinite"/>
+      </circle>
+      
+      <!-- Play triangle -->
+      <polygon points="130,90 130,110 148,100" fill="url(#logoGradient)"/>
+    </g>
+  </g>
+  
+  <!-- Text: PixiTweenJS -->
+  <text x="200" y="100" font-family="'Segoe UI', -apple-system, system-ui, sans-serif" font-size="52" font-weight="700" fill="url(#textGradient)">
+    PixiTweenJS
+  </text>
+  
+  <!-- Tagline -->
+  <text x="200" y="130" font-family="'Segoe UI', -apple-system, system-ui, sans-serif" font-size="20" font-weight="400" fill="#64B5F6" opacity="0.8">
+    Timeline-based canvas animation
+  </text>
+  
+  <!-- Decorative elements -->
+  <g opacity="0.3">
+    <!-- Small sparkles -->
+    <circle cx="190" cy="65" r="2" fill="#29B6F6">
+      <animate attributeName="opacity" values="0.3;1;0.3" dur="2s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="570" cy="75" r="2" fill="#29B6F6">
+      <animate attributeName="opacity" values="0.3;1;0.3" dur="2.5s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="210" cy="145" r="2" fill="#29B6F6">
+      <animate attributeName="opacity" values="0.3;1;0.3" dur="3s" repeatCount="indefinite"/>
+    </circle>
+  </g>
+</svg>

package/dist/stories/Features/TimelineTest.stories.d.ts

@@ -1,6 +1,7 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 
 declare const meta: {
+    id: string;
     title: string;
     component: (props: import('./TimelineTest').TimelineProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
@@ -8,7 +9,7 @@ declare const meta: {
         sequences: {
             description: string;
             control: {
-                type: string;
+                type: "object";
             };
         };
     };

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "reacthub-pixitweenjs",
-  "version": "0.2.109-alpha.5",
+  "version": "0.2.109-alpha.7",
   "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",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -68,6 +69,8 @@
     "@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",
@@ -120,6 +123,7 @@
     "react-fast-compare": "^3.2.0",
     "standard-version": "^9.5.0",
     "storybook": "^10.0.2",
+    "storybook-multilevel-sort": "^2.1.0",
     "stylelint": "^15.10.2",
     "stylelint-config-standard": "^33.0.0",
     "svgpath": "^2.6.0",
@@ -133,5 +137,8 @@
   },
   "dependencies": {
     "@uiw/react-color-sketch": "^2.3.2"
+  },
+  "engines": {
+    "node": ">=18.12.0"
   }
 }

package/dist/components/PixiTransformer/MenuIcons.d.ts

@@ -1,40 +0,0 @@
-declare const MENUS_ICONS: {
-    ARROW_DOWN: string;
-    ARROW_UP: string;
-    COLOR: string;
-    COPY: string;
-    DELETE: string;
-    TRASH: string;
-    EYE: string;
-    EYE_SLASH: string;
-    LOCK: string;
-    UNLOCK: string;
-    PASTE: string;
-    PENCIL: string;
-    PLUS: string;
-    MINUS: string;
-    ROTATE: string;
-    SCALE: string;
-    SAVE: string;
-    RESET: string;
-    SETTINGS: string;
-    ZOOM_IN: string;
-    ZOOM_OUT: string;
-    ALIGN_LEFT: string;
-    ALIGN_CENTER: string;
-    ALIGN_RIGHT: string;
-    DISTRIBUTE_HORIZONTALLY: string;
-    DISTRIBUTE_VERTICALLY: string;
-    FLIP_HORIZONTAL: string;
-    FLIP_VERTICAL: string;
-    ROTATE_LEFT: string;
-    ROTATE_RIGHT: string;
-    SCALE_DOWN: string;
-    SCALE_UP: string;
-    ADJUST_EQUALISER: string;
-    ADJUST_EQUALISER_SLIDERS: string;
-    ADJUST_HORIZONTAL_SLIDERS: string;
-    COLOR_FILL: string;
-};
-declare const MAX_RECENT_COLORS = 10;
-export { MENUS_ICONS, MAX_RECENT_COLORS };

package/dist/components/PixiTransformer/MenuUtils.d.ts

@@ -1,2 +0,0 @@
-import * as PIXI from "pixi.js";
-export declare const createColorPreviewGraphics: (color: string, size: number) => PIXI.Graphics;

package/dist/components/PixiTransformer/PixiColorPicker.d.ts

@@ -1,14 +0,0 @@
-import * as React from "react";
-interface Position {
-    x: number;
-    y: number;
-}
-interface ColorPickerPortalProps {
-    position: Position;
-    color: string;
-    onChange: (color: string) => void;
-    onClose: () => void;
-    recentColors?: string[];
-}
-declare const ColorPickerPortal: ({ position, color, onChange, onClose, }: ColorPickerPortalProps) => React.ReactPortal;
-export default ColorPickerPortal;

package/dist/components/PixiTransformer/PixiDropdownMenu.d.ts

@@ -1,15 +0,0 @@
-import * as PIXI from "pixi.js";
-interface AlignmentOption {
-    icon: string;
-    label: string;
-    action: () => void;
-}
-interface DropdownPosition {
-    x: number;
-    y: number;
-}
-declare const useDropDownMenu: (setShowAlignmentDropdown: (show: boolean) => void) => {
-    createMenu: (showAlignmentDropdown: boolean, alignmentOptions: AlignmentOption[], dropdownPosition: DropdownPosition) => (() => void) | undefined;
-    dropdownRef: import('react').MutableRefObject<PIXI.Container<PIXI.DisplayObject> | null>;
-};
-export default useDropDownMenu;

package/dist/components/PixiTransformer/PixiMenuText.d.ts

@@ -1,2 +0,0 @@
-import * as PIXI from "pixi.js";
-export declare const style: PIXI.TextStyle;

package/dist/components/PixiTransformer/PixiTransformer.d.ts

@@ -1,20 +0,0 @@
-import { Transformer } from 'reacthub-react-bindings';
-import * as React from "react";
-type PixiTransformerProps = {
-    pixiTransformerRef: React.MutableRefObject<Transformer>;
-    imageRef: React.MutableRefObject<any>;
-    isMounted: boolean;
-    transformCommit?: (data: any) => void;
-    transformChange?: (data: any) => void;
-    mouseoverEvent?: (flag: boolean) => void;
-    onDoubleClick?: () => void;
-    uniqueId?: string;
-    isText?: boolean;
-};
-/**
- * Initialize PixiTransformer to transform the image
- * @param param0
- * @returns
- */
-declare const PixiTransformer: ({ pixiTransformerRef, imageRef, isMounted, transformCommit, transformChange, mouseoverEvent, onDoubleClick, uniqueId, isText, }: PixiTransformerProps) => import("react/jsx-runtime").JSX.Element;
-export default PixiTransformer;

package/dist/components/PixiTransformer/PixiTransformerMenu.d.ts

@@ -1,9 +0,0 @@
-import { Transformer } from '@pixi-essentials/transformer';
-
-interface TransformerMenuProps {
-    PixiTransformer: React.MutableRefObject<Transformer>;
-    uniqueId: string;
-    isText: boolean;
-}
-export declare const TransformerMenu: ({ PixiTransformer }: TransformerMenuProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/PixiTransformer/Transformer.d.ts

@@ -1,39 +0,0 @@
-import { Matrix } from '@pixi/math';
-import { TransformerHandle as TransformerHandleImpl, ITransformerCursors, ITransformerStyle, ITransformerHandleStyle } from '@pixi-essentials/transformer';
-
-import * as PIXI from "pixi.js";
-import * as React from "react";
-/** @internal */
-export type TransformerProps = {
-    boundingBoxes?: "all" | "groupOnly" | "none";
-    boxScalingEnabled?: boolean;
-    boxScalingTolerance?: number;
-    boxRotationEnabled?: boolean;
-    boxRotationTolerance?: number;
-    centeredScaling?: boolean;
-    cursors?: Partial<ITransformerCursors>;
-    enabledHandles?: Array<string>;
-    group?: PIXI.DisplayObject[];
-    handleConstructor?: typeof TransformerHandleImpl;
-    handleStyle?: Partial<ITransformerHandleStyle>;
-    lockAspectRatio?: boolean;
-    projectionTransform?: Matrix;
-    rotateEnabled?: boolean;
-    rotationSnaps?: number[];
-    rotationSnapTolerance?: number;
-    scaleEnabled?: boolean;
-    skewEnabled?: boolean;
-    skewRadius?: number;
-    skewSnaps?: number[];
-    skewSnapTolerance?: number;
-    translateEnabled?: boolean;
-    transientGroupTilt?: boolean;
-    transformchange?: (e: any) => void;
-    wireframeStyle?: Partial<ITransformerStyle>;
-};
-/**
- * Transformer component
- *
- * @see https://github.com/SukantPal/pixi-essentials/tree/master/packages/transformer
- */
-export declare const Transformer: React.FC<TransformerProps>;

package/dist/components/PixiTransformer/applyEventProps.d.ts

@@ -1,10 +0,0 @@
-import * as PIXI from "pixi.js";
-/**
- * Removes old listeners and applies the new ones passed in the props
- *
- * @param displayObject - display-object emitting events
- * @param events - object mapping handler prop-names to the fired events
- * @param oldProps - old props. If calling on first props being passed, this should be `{}`.
- * @param newProps - new props.
- */
-export declare function applyEventProps(displayObject: PIXI.DisplayObject, events: Record<string, string>, oldProps: any, newProps: any): void;

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

@@ -1 +0,0 @@
-export * from './Transformer';