@zikojs/framer-motion 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,38 @@
+# @zikojs/motion
+
+A lightweight adapter that adds ZikoJS UIElement support to Motion / Framer Motion.
+
+The Motion API remains the same. The only difference is that `UIElement` and `UIElement[]` can now be used directly as animation targets.
+
+## install
+
+```bash
+npm i @zikojs/motion
+```
+Usage
+
+Instead of manually accessing the underlying DOM element:
+
+```js
+import { animate } from "framer-motion";
+
+animate(box.element, { x: 100 }, { duration: 1 });
+```
+
+you can pass the `UIElement` directly:
+
+```js
+import { animate } from "@zikojs/motion";
+
+animate(box, { x: 100 }, { duration: 1 });
+```
+
+## Features
+
+- ***🎯 UIElement targets*** : Use ZikoJS UIElement directly as a motion target.
+- ***📦 UIElement arrays*** : Animate UIElement[] without manually accessing .element.
+- ***🔀 Mixed targets*** : Combine UIElement and HTMLElement targets.
+- ***🧩 Same motion API*** : No new syntax or alternative animation API.
+- ***🔌 Drop-in adapter*** : Works as a thin layer on top of motion.
+- ***🌐 Native DOM support*** : Existing HTMLElement targets continue to work.
+- ***🪶 Lightweight*** : Only adapts targets; motion handles the animation itself.

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@zikojs/framer-motion",
+  "version": "0.1.0",
+  "description": "framer-motion adapter for zikojs",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "zakaria elaloui",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zikojs/addons.git",
+    "directory": "packages/framer-motion"
+  },
+  "keywords": [
+    "zikojs",
+    "ziko",
+    "framer-motion",
+    "animation"
+  ],
+  "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": {
+    "framer-motion": "^3.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/index.js

@@ -0,0 +1,45 @@
+import { motion as originalMotion } from "framer-motion";
+import { UIElement } from "ziko/dom";
+
+const resolveTarget = (target) => (target instanceof UIElement ? target?.element : target);
+
+/**
+ * Wraps a motion component or HTML tag to unpack Ziko UIElement instances in props/ref
+ */
+const wrapComponent = (Component) => {
+  return (props) => {
+    const resolvedProps = { ...props };
+
+    // Resolve target element inside ref if passed as UIElement
+    if (resolvedProps.ref && resolvedProps.ref instanceof UIElement) {
+      resolvedProps.ref = resolveTarget(resolvedProps.ref);
+    }
+
+    return Component(resolvedProps);
+  };
+};
+
+// Proxy to dynamically capture motion.div, motion.span, motion(Component), etc.
+export const motion = new Proxy(originalMotion, {
+  get(target, prop) {
+    const orig = target[prop];
+    return typeof orig === "function" ? wrapComponent(orig) : orig;
+  },
+  apply(target, thisArg, argArray) {
+    const Component = target(...argArray);
+    return wrapComponent(Component);
+  }
+});
+
+/**
+ * Adapter for Motion core animation utilities (e.g. animate)
+ */
+export function animate(target, keyframes, options) {
+  const resolved = Array.isArray(target)
+    ? target.map(resolveTarget)
+    : resolveTarget(target);
+
+  return originalMotion.animate
+    ? originalMotion.animate(resolved, keyframes, options)
+    : null;
+}