react-ui-animate 2.0.0 → 3.0.0-rc.0

package/example/src/components/Wheel.tsx

@@ -0,0 +1,39 @@
+import { useWheel } from 'react-ui-animate';
+
+export const Wheel = () => {
+  const bind = useWheel(function (event) {
+    console.log('WHEEL', event);
+  });
+
+  return (
+    <>
+      <div
+        {...bind()}
+        style={{
+          width: 500,
+          height: 500,
+          overflowY: 'auto',
+          backgroundColor: '#3399ff',
+        }}
+      >
+        <div style={{ height: 2000 }} />
+      </div>
+
+      <div style={{ height: 2000 }} />
+
+      {Array(5)
+        .fill(null)
+        .map((_, i) => (
+          <div
+            key={i}
+            style={{
+              width: 100,
+              height: 100,
+              backgroundColor: '#3399ff',
+              marginBottom: 10,
+            }}
+          />
+        ))}
+    </>
+  );
+};

package/example/src/components/index.ts

@@ -0,0 +1,18 @@
+export * from './Draggable';
+export * from './Gestures';
+export * from './MountedBlock';
+export * from './ScrollableBlock';
+export * from './svgLine';
+export * from './useAnimatedValue';
+export * from './useMountedValue';
+export * from './MouseMove';
+export * from './Scroll';
+export * from './Wheel';
+export * from './Gestures';
+export * from './Interpolation';
+export * from './MultistageTransition';
+export * from './Loop';
+export * from './SnapTo';
+export * from './TransitionBlock';
+export * from './useAnimatedValue';
+export * from './useMountedValue';

package/example/src/components/svgLine.tsx

@@ -0,0 +1,48 @@
+import {
+  useAnimatedValue,
+  useDrag,
+  AnimationConfigUtils,
+  fluid,
+} from 'react-ui-animate';
+
+export function SVGLine() {
+  const dragX = useAnimatedValue(0, { immediate: true });
+  const followX = useAnimatedValue(0, { ...AnimationConfigUtils.ELASTIC });
+
+  const circleBind = useDrag(({ movementX }) => {
+    dragX.value = movementX;
+    followX.value = movementX;
+  });
+
+  return (
+    <div className='App'>
+      <svg
+        style={{
+          border: '1px solid #3399ff',
+        }}
+        width={200}
+        height={200}
+        xmlns='http://www.w3.org/2000/svg'
+      >
+        <fluid.line
+          x1={followX.value}
+          y1='10'
+          x2={dragX.value}
+          y2='50'
+          stroke='black'
+        />
+        <fluid.circle cx={followX.value} cy='10' r='2' fill='red' />
+        <fluid.circle
+          {...circleBind()}
+          style={{
+            cursor: 'pointer',
+          }}
+          cx={dragX.value}
+          cy='50'
+          r='5'
+          fill='red'
+        />
+      </svg>
+    </div>
+  );
+}

package/example/src/components/useAnimatedValue.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useAnimatedValue, AnimatedBlock } from 'react-ui-animate';
+
+export const UseAnimatedValue: React.FC = () => {
+  // const width = useAnimatedValue(100);
+  const bg = useAnimatedValue('position');
+
+  return (
+    <>
+      <AnimatedBlock
+        a={bg.value}
+        style={{
+          width: 100,
+          height: 100,
+          backgroundColor: 'red',
+          position: bg.value,
+          left: 0,
+          top: 0,
+        }}
+      />
+      <button onClick={() => (bg.value = 'absolute')}>Animate</button>
+      {/* <button onClick={() => (bg.value = '#00ff00')}>Green</button> */}
+
+      {/* <div style={{ perspective: 200 }}>
+        <AnimatedBlock
+          style={{
+            perspective: 400,
+            width: width.value,
+            height: 100,
+            backgroundColor: interpolate(
+              width.value,
+              [100, 500],
+              ['#3399ff', 'red']
+            ),
+            translateX: interpolate(width.value, [100, 500], [0, 200]),
+            rotateX: interpolate(width.value, [100, 500], [0, 45]),
+          }}
+        />
+      </div>
+
+      <button
+        onClick={() => {
+          width.value = 100;
+        }}
+      >
+        LEFT
+      </button>
+      <button
+        onClick={() => {
+          width.value = 500;
+        }}
+      >
+        RIGHT
+      </button> */}
+    </>
+  );
+};

package/example/src/components/useMountedValue.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import {
+  useMountedValue,
+  AnimatedBlock,
+  bInterpolate,
+  useAnimatedValue,
+} from 'react-ui-animate';
+
+export const UseMountedValue: React.FC = () => {
+  const x = useAnimatedValue(0);
+  const [open, setOpen] = React.useState(true);
+  const mountedValue = useMountedValue(open, {
+    from: 0,
+    enter: 1,
+    exit: 0,
+    config: {
+      duration: 200,
+    },
+    enterConfig: { duration: 2000 },
+  });
+
+  return (
+    <>
+      <AnimatedBlock
+        radius={x.value}
+        style={{
+          width: 100,
+          height: 100,
+          backgroundColor: '#3399ff',
+          translateX: 100,
+          rotate: x.value,
+        }}
+        onClick={() => (x.value = 45)}
+      />
+      {mountedValue(
+        (animation, mounted) =>
+          mounted && (
+            <AnimatedBlock
+              style={{
+                width: bInterpolate(animation.value, 100, 500),
+                height: 100,
+                backgroundColor: bInterpolate(
+                  animation.value,
+                  'red',
+                  '#3399ff'
+                ),
+                translateX: 45,
+              }}
+            />
+          )
+      )}
+
+      <button
+        onClick={() => {
+          setOpen((prev) => !prev);
+        }}
+      >
+        ANIMATE ME
+      </button>
+    </>
+  );
+};

package/example/src/index.css

@@ -0,0 +1,8 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+}

package/example/src/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import './index.css';
+
+import App from './App';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/example/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "lib": [
+      "dom",
+      "es2015"
+    ],
+    "downlevelIteration": true,
+    "jsx": "react-jsx",
+    "target": "es5",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "allowSyntheticDefaultImports": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src"
+  ]
+}

package/package.json

@@ -1,48 +1,48 @@
-{
-  "name": "react-ui-animate",
-  "version": "2.0.0",
-  "description": "React library for gestures and animation",
-  "main": "dist/index.js",
-  "dependencies": {
-    "@raidipesh78/re-motion": "^2.0.1"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0  || >=17.0.0 || >=18.0.0"
-  },
-  "devDependencies": {
-    "@types/node": "^16.11.36",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.4",
-    "@types/resize-observer-browser": "^0.1.6",
-    "babel-core": "^6.26.3",
-    "babel-runtime": "^6.26.0",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "rollup": "^2.35.1",
-    "rollup-plugin-typescript2": "^0.29.0",
-    "typescript": "^4.1.3"
-  },
-  "scripts": {
-    "build": "rollup -c",
-    "start": "rollup -c -w",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "version:minor": "npm version --no-git-tag-version minor",
-    "version:major": "npm version --no-git-tag-version major",
-    "version:patch": "npm version --no-git-tag-version patch"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/dipeshrai123/react-ui-animate.git"
-  },
-  "keywords": [
-    "gesture",
-    "animation",
-    "react-ui-animate"
-  ],
-  "author": "Dipesh Rai",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/dipeshrai123/react-ui-animate/issues"
-  },
-  "homepage": "https://github.com/dipeshrai123/react-ui-animate#readme"
-}
+{
+  "name": "react-ui-animate",
+  "version": "3.0.0-rc.0",
+  "description": "React library for gestures and animation",
+  "main": "dist/index.js",
+  "peerDependencies": {
+    "react": ">=16.8.0  || >=17.0.0 || >=18.0.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.14.9",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/resize-observer-browser": "^0.1.11",
+    "babel-core": "^5.8.38",
+    "babel-runtime": "^6.26.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup": "^4.18.0",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "typescript": "^5.5.2"
+  },
+  "scripts": {
+    "dev:start": "pm2 start ecosystem.config.js",
+    "dev:end": "pm2 stop ecosystem.config.js",
+    "build": "rollup -c",
+    "start": "rollup -c -w",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "version:minor": "npm version --no-git-tag-version minor",
+    "version:major": "npm version --no-git-tag-version major",
+    "version:patch": "npm version --no-git-tag-version patch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dipeshrai123/react-ui-animate.git"
+  },
+  "keywords": [
+    "gesture",
+    "animation",
+    "react-ui-animate"
+  ],
+  "author": "Dipesh Rai",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/dipeshrai123/react-ui-animate/issues"
+  },
+  "homepage": "https://github.com/dipeshrai123/react-ui-animate#readme"
+}

package/{rollup.config.js → rollup.config.mjs}

@@ -1,18 +1,18 @@
-import typescript from "rollup-plugin-typescript2";
-
-import pkg from "./package.json";
-
-export default {
-  input: "src/index.ts",
-  output: [
-    {
-      file: pkg.main,
-      format: "cjs",
-      exports: "named",
-      sourcemap: true,
-      strict: false,
-    },
-  ],
-  plugins: [typescript({ objectHashIgnoreUnknownHack: true })],
-  external: ["react", "react-dom"],
-};
+import typescript from "rollup-plugin-typescript2";
+
+import pkg from "./package.json" assert { type: "json" };
+
+export default {
+  input: "src/index.ts",
+  output: [
+    {
+      file: pkg.main,
+      format: "cjs",
+      exports: "named",
+      sourcemap: true,
+      strict: false,
+    },
+  ],
+  plugins: [typescript()],
+  external: ["react", "react-dom"],
+};

package/src/animation/core/controllers/Animation.ts

@@ -0,0 +1,27 @@
+import type { ResultType } from '../types/animation';
+
+/**
+ * Base Animation class
+ */
+export class Animation {
+  _active: boolean;
+  _onEnd: any;
+  /**
+   * it is necessary to add _onRest function as well
+   * because _onEnd is always re-assigned with onUpdate callback
+   * so that _onRest function is not fired, so we have to duplicate it
+   */
+  _onRest?: any;
+
+  _debounceOnEnd(result: ResultType) {
+    const onEnd = this._onEnd;
+    const onRest = this._onRest;
+    this._onEnd = null;
+    this._onRest = null;
+
+    onRest && onRest(result);
+    onEnd && onEnd(result);
+  }
+
+  stop() {}
+}

package/src/animation/core/controllers/FluidValue.ts

@@ -0,0 +1,97 @@
+import type {
+  Length,
+  ResultType,
+  SubscribeFn,
+  FluidValueConfig,
+  OnUpdateFn,
+  AssignValue,
+} from '../types/animation';
+import type { Fn } from '../types/common';
+
+/**
+ * Represents a fluid value that can animate between states.
+ */
+export class FluidValue {
+  public _subscribe: SubscribeFn;
+  public _value: Length;
+  public _config?: FluidValueConfig;
+  public _currentValue: { current: Length };
+  public _subscriptions: Map<{ uuid: number; property: string }, OnUpdateFn>;
+
+  public get: () => Length;
+
+  /**
+   * Creates a new FluidValue instance.
+   * @param initialValue - The initial value of the fluid value.
+   * @param config - Optional configuration for the fluid value.
+   */
+  constructor(initialValue: Length, config?: FluidValueConfig) {
+    this._subscriptions = new Map();
+    this._subscribe = (
+      onUpdate: OnUpdateFn,
+      property: string,
+      uuid: number
+    ) => {
+      for (const key of this._subscriptions.keys()) {
+        if (key.property === property) {
+          this._subscriptions.set(key, onUpdate);
+          return () => this._subscriptions.delete(key);
+        }
+      }
+
+      this._subscriptions.set({ uuid, property }, onUpdate);
+      return () => this._subscriptions.delete({ uuid, property });
+    };
+    this._value = initialValue;
+    this._currentValue = { current: initialValue };
+    this._config = config;
+    this.get = () => this._currentValue.current;
+  }
+
+  /**
+   * Animates from the current value to the updated value.
+   * Determines whether to perform a multi-stage or single-stage transition.
+   * @param updatedValue - The value to animate to, or a function that defines a multi-stage transition.
+   * @param config - Optional configuration for the animation.
+   * @param callback - Optional callback to be called after the animation ends.
+   */
+  setValue(
+    updatedValue: AssignValue,
+    config?: FluidValueConfig,
+    callback?: Fn<ResultType, void>
+  ) {
+    /** Multistage transition */
+    if (typeof updatedValue === 'function') {
+      updatedValue((nextValue, nextConfig) => {
+        const multiStagePromise = new Promise((resolve) => {
+          for (const subscriptionKey of this._subscriptions.keys()) {
+            const updater = this._subscriptions.get(subscriptionKey);
+
+            if (updater) {
+              updater(nextValue, nextConfig ?? config, function (result) {
+                if (result.finished) {
+                  resolve(nextValue);
+                }
+
+                if (callback) {
+                  callback(result);
+                }
+              });
+            }
+          }
+        });
+
+        return multiStagePromise;
+      });
+
+      return;
+    }
+
+    /** Singlestage transition */
+    for (const subscriptionKey of this._subscriptions.keys()) {
+      const updater = this._subscriptions.get(subscriptionKey);
+
+      updater && updater(updatedValue, config, callback);
+    }
+  }
+}

package/src/animation/core/controllers/RequestAnimationFrame.ts

@@ -0,0 +1,13 @@
+export const RequestAnimationFrame = {
+  current: (cb: any) => window.requestAnimationFrame(cb),
+  inject(injected: any) {
+    RequestAnimationFrame.current = injected;
+  },
+};
+
+export const CancelAnimationFrame = {
+  current: (id: any) => window.cancelAnimationFrame(id),
+  inject(injected: any) {
+    CancelAnimationFrame.current = injected;
+  },
+};