@zikojs/canvas-confetti 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ZAKARIA ELALAOUI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# @zikojs/confetti

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@zikojs/canvas-confetti",
+  "version": "0.1.0",
+  "description": "",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "zakaria elalaoui",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zikojs/addons.git",
+    "directory": "packages/canvas-confetti"
+  },
+  "keywords": [
+    "zikojs",
+    "canvas-confetti"
+  ],
+  "exports": {
+    ".": {
+      "import": "./src/index.js",
+      "types": "./src/index.d.ts"
+    }
+  },
+  "files": [
+    "src",
+    "dist",
+    "LICENCE"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^1.0.0",
+    "cross-env": "^10.1.0",
+    "rollup": "^4.63.1"
+  },
+  "dependencies": {
+    "canvas-confetti": "^1.9.4",
+    "zextra": "^1.15.0",
+    "ziko": "2.0.0-beta.9"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "cross-env NODE_ENV=development rollup --config rollup.config.js",
+    "watch": "cross-env NODE_ENV=development rollup --config rollup.config.js -w",
+    "build": "cross-env NODE_ENV=production rollup --config rollup.config.js"
+  }
+}

package/src/canvas/index.js

@@ -0,0 +1,164 @@
+import { UIElement } from "ziko/dom";
+import { call_with_optional_props } from "ziko/dom/internal-utils";
+import confetti from "canvas-confetti";
+
+export class ConfettiEffect {
+  constructor(options = {}) {
+    this.options = options;
+  }
+
+  fire(confettiInstance, overrides = {}) {
+    if (typeof confettiInstance === "function") {
+      confettiInstance({
+        ...this.options,
+        ...overrides,
+      });
+    }
+  }
+}
+
+export class BurstEffect extends ConfettiEffect {
+  constructor(options = {}) {
+    super({
+      particleCount: 100,
+      spread: 70,
+      origin: { y: 0.6 },
+      ...options,
+    });
+  }
+}
+
+export class SnowEffect extends ConfettiEffect {
+  constructor(options = {}) {
+    super({
+      particleCount: 1,
+      startVelocity: 0,
+      ticks: 200,
+      gravity: 0.3,
+      origin: {
+        x: Math.random(),
+        y: Math.random() * 0.99 - 0.2,
+      },
+      colors: ["#ffffff"],
+      shapes: ["circle"],
+      scalar: 0.8,
+      drift: Math.random() - 0.5,
+      ...options,
+    });
+  }
+}
+
+export class FireworksEffect extends ConfettiEffect {
+  fire(confettiInstance) {
+    const duration = this.options.duration || 3000;
+    const animationEnd = Date.now() + duration;
+    const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
+
+    const interval = setInterval(() => {
+      const timeLeft = animationEnd - Date.now();
+      if (timeLeft <= 0) return clearInterval(interval);
+
+      const particleCount = 50 * (timeLeft / duration);
+      confettiInstance({
+        ...defaults,
+        ...this.options,
+        particleCount,
+        origin: { x: Math.random(), y: Math.random() - 0.2 },
+      });
+    }, 250);
+  }
+}
+
+// Component Factory Helpers
+export const Burst = (options) => new BurstEffect(options);
+export const Snow = (options) => new SnowEffect(options);
+export const Fireworks = (options) => new FireworksEffect(options);
+
+/**
+ * Main Confetti Wrapper Component
+ */
+export class UIConfettiCanvas extends UIElement {
+  constructor(props = {}, ...effects) {
+    super({ element: "canvas" });
+    this.props = props;
+    this._effects = effects.flat();
+    this.confettiInstance = null;
+
+    const width = props.width || "100%";
+    const height = props.height || "100%";
+
+    this.style({
+      position: props.position || "fixed",
+      top: "0",
+      left: "0",
+      width: typeof width === "number" ? `${width}px` : width,
+      height: typeof height === "number" ? `${height}px` : height,
+      pointerEvents: "none",
+      zIndex: props.zIndex ?? 999,
+    });
+
+    requestAnimationFrame(() => this.initCanvas());
+  }
+
+  initCanvas() {
+    this.confettiInstance = confetti.create(this.element, {
+      resize: true,
+      useWorker: this.props.useWorker ?? true,
+    });
+
+    // Auto-fire initial declarative effects if passed
+    this._effects.forEach((effect) => {
+      if (effect instanceof ConfettiEffect) {
+        effect.fire(this.confettiInstance);
+      }
+    });
+  }
+
+  /**
+   * Fires a specific effect preset or raw options object
+   */
+  fire(effectOrOptions = {}, overrides = {}) {
+    if (!this.confettiInstance) return this;
+
+    if (effectOrOptions instanceof ConfettiEffect) {
+      effectOrOptions.fire(this.confettiInstance, overrides);
+    } else if (typeof effectOrOptions === "object") {
+      this.confettiInstance({
+        particleCount: 80,
+        spread: 60,
+        ...effectOrOptions,
+        ...overrides,
+      });
+    }
+    return this;
+  }
+
+  /**
+   * Triggers a burst origin near a specific DOM element (e.g. Button)
+   */
+  fireFromElement(targetElement, options = {}) {
+    if (!this.confettiInstance || !targetElement) return this;
+
+    const rect = targetElement.getBoundingClientRect();
+    const x = (rect.left + rect.width / 2) / window.innerWidth;
+    const y = (rect.top + rect.height / 2) / window.innerHeight;
+
+    this.fire(options, { origin: { x, y } });
+    return this;
+  }
+
+  reset() {
+    if (this.confettiInstance) {
+      this.confettiInstance.reset();
+    }
+    return this;
+  }
+
+  destroy() {
+    this.reset();
+    this.confettiInstance = null;
+    return this;
+  }
+}
+
+export const Confetti = call_with_optional_props(UIConfettiCanvas);

package/src/index.js

@@ -0,0 +1,2 @@
+export * from './canvas/index.js'
+export * from './effects/index.js'