react-ui-animate 4.2.0 → 4.3.0-rc.1

package/.releaserc.json

@@ -0,0 +1,33 @@
+{
+  "branches": [
+    { "name": "main", "channel": "latest" },
+    { "name": "next", "prerelease": "rc" }
+  ],
+  "plugins": [
+    [
+      "@semantic-release/commit-analyzer",
+      {
+        "preset": "angular",
+        "releaseRules": [
+          { "type": "chore", "release": false },
+          { "type": "docs", "release": false }
+        ]
+      }
+    ],
+    "@semantic-release/release-notes-generator",
+    [
+      "@semantic-release/npm",
+      {
+        "npmPublish": true
+      }
+    ],
+    [
+      "@semantic-release/git",
+      {
+        "assets": ["package.json", "CHANGELOG.md"],
+        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+      }
+    ],
+    "@semantic-release/github"
+  ]
+}

package/README.md

@@ -6,215 +6,200 @@
 
 ### Install
 
-You can install react-ui-animate via `npm` or `yarn`:
+You can install `react-ui-animate` via `npm` or `yarn`:
 
 ```sh
-npm i react-ui-animate
+npm install react-ui-animate
 ```
 
 ```sh
 yarn add react-ui-animate
 ```
 
-### Getting Started
+---
+
+## Getting Started
+
+The `react-ui-animate` library provides a straightforward way to add animations and gestures to your React components. Below are some common use cases.
 
-The `react-ui-animate` library provides a straightforward way to add animations and gestures to your React components. Here’s how you can get started quickly:
+### 1. useValue
 
-```javascript
-import { animate, useValue } from 'react-ui-animate';
+Use `useValue` to initialize and update an animated value.
 
-export default function () {
-  const opacity = useValue(0); // Initialize
+```tsx
+import React from 'react';
+import {
+  animate,
+  useValue,
+  withSpring,
+  withTiming,
+  withSequence,
+} from 'react-ui-animate';
+
+export const UseValue: React.FC = () => {
+  const [width, setWidth] = useValue(100);
 
   return (
     <>
-      <animate.div
-        style={{
-          opacity: opacity.value, // Apply
-          width: 100,
-          padding: 20,
-          background: '#39F',
+      <button
+        onClick={() => {
+          setWidth(withSequence([withTiming(100), withSpring(0)]));
         }}
       >
-        ANIMATED
-      </animate.div>
-      
-      <button 
+        SEQUENCE (100 → 0)
+      </button>
+      <button
         onClick={() => {
-          opacity.value = 1 // Update
+          setWidth(withSpring(200));
         }}
       >
-        Animate Me
+        SPRING (→ 200)
       </button>
+      <button
+        onClick={() => {
+          setWidth(400);
+        }}
+      >
+        IMMEDIATE (→ 400)
+      </button>
+
+      <animate.div
+        style={{
+          width,
+          height: 100,
+          backgroundColor: 'red',
+          left: 0,
+          top: 0,
+        }}
+      />
     </>
   );
-}
+};
 ```
 
-In this example, clicking the `Animate Me` button changes the opacity from 0 to 1.
-
----
+### 2. useMount
 
-### Implementation Steps
+Use `useMount` to animate component mount and unmount transitions.
 
-#### 1. Initialize
+```tsx
+import React from 'react';
+import {
+  animate,
+  useMount,
+  withDecay,
+  withSequence,
+  withSpring,
+  withTiming,
+} from 'react-ui-animate';
 
-The `useValue()` hook is central to creating animations. It initializes an animated value and allows you to seamlessly update it to create dynamic effects.
+export const UseMount: React.FC = () => {
+  const [open, setOpen] = React.useState(true);
+  const mounted = useMount(open, { from: 0, enter: 1, exit: 0 });
 
-```javascript
-const opacity = useValue(0); // Initialize a animation value 0
+  return (
+    <>
+      {mounted(
+        (animation, isMounted) =>
+          isMounted && (
+            <animate.div
+              style={{
+                width: 100,
+                height: 100,
+                backgroundColor: 'teal',
+                opacity: animation,
+              }}
+            />
+          )
+      )}
+
+      <button onClick={() => setOpen((prev) => !prev)}>ANIMATE ME</button>
+    </>
+  );
+};
 ```
 
-#### 2. Apply
+### 3. Interpolation
 
-`animate.div` is a special component designed to work with `useValue()`. It simplifies animating elements by directly using animated values.
+Interpolate values for complex mappings like color transitions or movement.
 
-```jsx
-import { useValue, animate } from 'react-ui-animate'
+```tsx
+import React, { useLayoutEffect, useState } from 'react';
+import { animate, useValue, withSpring } from 'react-ui-animate';
 
-const width = useValue(100); // Start with a width of 100
+export const Interpolation: React.FC = () => {
+  const [open, setOpen] = useState(false);
+  const [x, setX] = useValue(0);
 
-<animate.div
-  style={{
-    width: width.value,
-    height: 100,
-    backgroundColor: '#39f',
-  }}
-/>;
-```
+  useLayoutEffect(() => {
+    setX(withSpring(open ? 500 : 0));
+  }, [open, setX]);
 
-#### 3. Update
-
-To update the value simply assign the initialized animated node with a value.
-
-```jsx
-import { useValue, withSpring } from 'react-ui-animate';
-
-const width = useValue(100);
+  return (
+    <>
+      <animate.div
+        style={{
+          width: 100,
+          height: 100,
+          backgroundColor: x.to([0, 500], ['red', 'blue']),
+          translateX: x,
+        }}
+      />
 
-<button 
-  onClick={() => {
-      // Update
-      width.value = withSpring(400); 
-  }}
->
-  Update
-</button>
+      <button onClick={() => setOpen((p) => !p)}>ANIMATE ME</button>
+    </>
+  );
+};
 ```
 
-In this example, `withSpring` runs spring animation when updating the value.
-
 ---
 
-#### `interpolate`
-
-The `interpolate()` function is useful for mapping values from one range to another, enabling more complex animations.
-
-```javascript
-import { useValue, animate, interpolate } from 'react-ui-animate';
-
-const width = useValue(100);
-
-<animate.div
-  style={{
-    width: width.value,
-    height: 100,
-    backgroundColor: interpolate(width.value, [100, 200], ['red', 'blue']),
-  }}
-/>;
-```
-
-In this example, as the width changes from 100 to 200, the background color smoothly transitions from red to blue.
-
-#### Modifiers
-
-You can dynamically modify animation configurations by assigning values to an animated value using various animation functions.
-
-To apply a spring animation and update the value to `10`:
-
-```jsx
-x.value = withSpring(10);
-```
-
-To apply a timing animation with a duration of 5000 milliseconds:
+## API Overview
 
-```jsx
-x.value = withTiming(10, { duration: 5000 });
-```
-
-To create sequential transitions using the `withSequence` function with dynamic modifiers like `withSpring` and `withTiming`:
-
-```jsx
-x.value = withSequence([withSpring(50), withTiming(100), withEase(200)]);
-```
-
-#### `useMount()`
+- **`useValue(initial)`**: Initializes an animated value.
+- **`animate`**: JSX wrapper for animatable elements (`animate.div`, `animate.span`, etc.).
+- **Modifiers**: `withSpring`, `withTiming`, `withDecay`, `withSequence` — functions to define animation behavior.
+- **`useMount(state, config)`**: Manages mount/unmount transitions. `config` includes `from`, `enter`, and `exit` values.
 
-The `useMount()` hook facilitates managing the mounting and unmounting of a component with animations.
+## Gestures
 
-```jsx
-import { useMount } from 'react-ui-animate';
-
-export default function App() {
-  const [visible, setVisible] = useState(false);
-
-  const open = useMount(visible);
-
-  return open((animation, mounted) => mounted && <animate.div />);
-}
-```
+`react-ui-animate` also provides hooks for handling gestures:
 
-In this example,
+- `useDrag`
+- `useMove`
+- `useScroll`
+- `useWheel`
 
-1. A state variable `visible` determines whether the component is visible.
-2. The `useMount` hook takes `visible` as an argument and provides animation states for mounting and unmounting.
-3. The `open` function, returned by `useMount`, is used to conditionally render `animate.div` based on the `mounted` boolean and apply the transition animation.
+**Example: `useDrag`**
 
----
-
-### Gestures
-
-The `react-ui-animate` library also provides several hooks for handling different types of gestures:
-
-1. `useDrag`: Handles drag gestures on elements.
-2. `useMouseMove`: Handles mouse movements.
-3. `useScroll`: Handles scrolling of the document.
-4. `useWheel`: Handles wheel rotation gestures.
-5. `useGesture`: Handles combinations of various gestures.
-
-**Example**: `useDrag`
-
-Here’s an example of using the useDrag hook to enable drag gestures:
-
-```jsx
+```tsx
+import React from 'react';
 import { useValue, animate, useDrag, withSpring } from 'react-ui-animate';
 
-export const Draggable = () => {
-  const translateX = useValue(0);
+export const Draggable: React.FC = () => {
+  const ref = useRef(null);
+  const [translateX, setTranslateX] = useValue(0);
 
-  const bind = useDrag(function ({ down, movementX }) {
-    translateX.value = down ? movementX : withSpring(0);
+  useDrag(ref, ({ down, movement }) => {
+    setTranslateX(down ? movement.x : withSpring(0));
   });
 
   return (
     <animate.div
-      {...bind()}
+      ref={ref}
       style={{
         width: 100,
         height: 100,
         backgroundColor: '#3399ff',
-        translateX: translateX.value,
+        translateX,
       }}
     />
   );
 };
 ```
 
-In this example, the blue block can be dragged horizontally by clicking and dragging.
-
 ## Documentation
 
-For detailed documentation and examples, visit the official [react-ui-animate documentation](http://react-ui-animate.js.org/).
+For detailed documentation and examples, visit the official [react-ui-animate documentation](https://react-ui-animate.js.org/).
 
 ## License
 

package/package.json

@@ -1,16 +1,21 @@
 {
   "name": "react-ui-animate",
-  "version": "4.2.0",
+  "version": "4.3.0-rc.1",
   "description": "React library for gestures and animation",
   "main": "dist/index.js",
   "peerDependencies": {
     "react": ">=16.8.0  || >=17.0.0 || >=18.0.0"
   },
   "dependencies": {
-    "@raidipesh78/re-motion": "^4.2.1"
+    "@raidipesh78/re-motion": "^5.2.3"
   },
   "devDependencies": {
     "@rollup/plugin-terser": "^0.4.4",
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^11.0.3",
+    "@semantic-release/npm": "^12.0.2",
+    "@semantic-release/release-notes-generator": "^14.0.3",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.14.9",
     "@types/react": "^18.3.3",
@@ -23,16 +28,22 @@
     "rimraf": "^6.0.1",
     "rollup": "^4.18.0",
     "rollup-plugin-typescript2": "^0.36.0",
+    "semantic-release": "^24.2.6",
     "typescript": "^5.5.2"
   },
   "scripts": {
     "clean": "rimraf -rf dist",
     "build": "npm run clean && rollup -c",
     "start": "npm run clean && rollup -c -w",
+    "start:dev": "cd example && npm start",
     "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"
+    "version:patch": "npm version --no-git-tag-version patch",
+    "version:rc": "npm version prerelease --no-git-tag-version --preid=rc",
+    "version:prepatch": "npm version prepatch --no-git-tag-version --preid=rc",
+    "publish:next": "npm publish --tag next",
+    "publish:latest": "npm publish --tag latest"
   },
   "repository": {
     "type": "git",

package/dist/animation/controllers/index.d.ts

@@ -1,8 +0,0 @@
-export { withDecay } from './withDecay';
-export { withDelay } from './withDelay';
-export { withSequence } from './withSequence';
-export { withSpring } from './withSpring';
-export { withTiming } from './withTiming';
-export { withLoop } from './withLoop';
-export { withNative } from './withNative';
-export { withEase } from './withEase';

package/dist/animation/controllers/withDecay.d.ts

@@ -1,11 +0,0 @@
-import { FluidValue } from '@raidipesh78/re-motion';
-import type { WithCallbacks } from '../types';
-interface WithDecayConfig extends WithCallbacks {
-    velocity?: number;
-    deceleration?: number;
-}
-export declare const withDecay: (config?: WithDecayConfig, callback?: (result: any) => void) => (value: FluidValue) => {
-    controller: import("@raidipesh78/re-motion/dist/controllers/types").ControllerAnimation;
-    callback: ((result: any) => void) | undefined;
-};
-export {};

package/dist/animation/controllers/withDelay.d.ts

@@ -1,4 +0,0 @@
-export declare const withDelay: (ms: number, callback?: (result: any) => void) => () => {
-    controller: import("@raidipesh78/re-motion/dist/controllers/types").ControllerAnimation;
-    callback: ((result: any) => void) | undefined;
-};

package/dist/animation/controllers/withEase.d.ts

@@ -1,8 +0,0 @@
-import type { WithCallbacks } from '../types';
-interface WithEaseConfig extends WithCallbacks {
-}
-export declare const withEase: (toValue: number, config?: WithEaseConfig, callback?: (result: any) => void) => (value: import("@raidipesh78/re-motion").FluidValue) => {
-    controller: import("@raidipesh78/re-motion/dist/controllers/types").ControllerAnimation;
-    callback: ((result: any) => void) | undefined;
-};
-export {};

package/dist/animation/controllers/withLoop.d.ts

@@ -1,8 +0,0 @@
-import { FluidValue, loop } from '@raidipesh78/re-motion';
-export declare const withLoop: (animations: (value: FluidValue) => {
-    controller: ReturnType<typeof loop>;
-    callback?: (result: any) => void;
-}, iterations: number, callback?: (result: any) => void) => (value: FluidValue) => {
-    controller: import("@raidipesh78/re-motion/dist/controllers/types").ControllerAnimation;
-    callback: ((result: any) => void) | undefined;
-};

package/dist/animation/controllers/withNative.d.ts

@@ -1,5 +0,0 @@
-import { FluidValue } from '@raidipesh78/re-motion';
-export declare const withNative: (toValue: number | string, callback?: (result: any) => void) => (value: FluidValue) => {
-    controller: import("@raidipesh78/re-motion/dist/controllers/types").ControllerAnimation;
-    callback: ((result: any) => void) | undefined;
-};

package/dist/animation/controllers/withSequence.d.ts

@@ -1,8 +0,0 @@
-import { FluidValue, sequence } from '@raidipesh78/re-motion';
-export declare const withSequence: (animations: Array<(value: FluidValue) => {
-    controller: ReturnType<typeof sequence>;
-    callback?: (result: any) => void;
-}>, callback?: (result: any) => void) => (value: FluidValue) => {
-    controller: import("@raidipesh78/re-motion/dist/controllers/types").ControllerAnimation;
-    callback: ((result: any) => void) | undefined;
-};

package/dist/animation/controllers/withSpring.d.ts

@@ -1,12 +0,0 @@
-import { FluidValue } from '@raidipesh78/re-motion';
-import type { WithCallbacks } from '../types';
-interface WithSpringConfig extends WithCallbacks {
-    mass?: number;
-    friction?: number;
-    tension?: number;
-}
-export declare const withSpring: (toValue: number, config?: WithSpringConfig, callback?: (result: any) => void) => (value: FluidValue) => {
-    controller: import("@raidipesh78/re-motion/dist/controllers/types").ControllerAnimation;
-    callback: ((result: any) => void) | undefined;
-};
-export {};

package/dist/animation/controllers/withTiming.d.ts

@@ -1,11 +0,0 @@
-import { FluidValue } from '@raidipesh78/re-motion';
-import type { WithCallbacks } from '../types';
-interface WithTimingConfig extends WithCallbacks {
-    duration?: number;
-    easing?: (t: number) => number;
-}
-export declare const withTiming: (toValue: number, config?: WithTimingConfig, callback?: (result: any) => void) => (value: FluidValue) => {
-    controller: import("@raidipesh78/re-motion/dist/controllers/types").ControllerAnimation;
-    callback: ((result: any) => void) | undefined;
-};
-export {};

package/dist/animation/helpers/animationType.d.ts

@@ -1,63 +0,0 @@
-import { Easing } from '@raidipesh78/re-motion';
-export declare const AnimationConfig: {
-    Timing: {
-        BOUNCE: {
-            duration: number;
-            easing: typeof Easing.bounce;
-        };
-        EASE_IN: {
-            duration: number;
-            easing: (t: number) => number;
-        };
-        EASE_OUT: {
-            duration: number;
-            easing: (t: number) => number;
-        };
-        EASE_IN_OUT: {
-            duration: number;
-            easing: (t: number) => number;
-        };
-        POWER1: {
-            duration: number;
-            easing: (t: number) => number;
-        };
-        POWER2: {
-            duration: number;
-            easing: (t: number) => number;
-        };
-        POWER3: {
-            duration: number;
-            easing: (t: number) => number;
-        };
-        POWER4: {
-            duration: number;
-            easing: (t: number) => number;
-        };
-        LINEAR: {
-            duration: number;
-            easing: typeof Easing.linear;
-        };
-    };
-    Spring: {
-        ELASTIC: {
-            mass: number;
-            friction: number;
-            tension: number;
-        };
-        EASE: {
-            mass: number;
-            friction: number;
-            tension: number;
-        };
-        STIFF: {
-            mass: number;
-            friction: number;
-            tension: number;
-        };
-        WOBBLE: {
-            mass: number;
-            friction: number;
-            tension: number;
-        };
-    };
-};

package/dist/animation/helpers/getToValue.d.ts

@@ -1,2 +0,0 @@
-import { ToValue } from '../types';
-export declare function getToValue(val: string | number | ToValue): ToValue;

package/dist/animation/helpers/index.d.ts

@@ -1,2 +0,0 @@
-export * from './animationType';
-export * from './getToValue';

package/dist/animation/hooks/index.d.ts

@@ -1,3 +0,0 @@
-export * from './useValue';
-export * from './useMount';
-export * from './useValues';

package/dist/animation/hooks/useMount.d.ts

@@ -1,10 +0,0 @@
-import { FluidValue } from '@raidipesh78/re-motion';
-import type { ToValue } from '../types';
-export interface UseMountConfig {
-    from?: number;
-    enter?: ToValue;
-    exit?: ToValue;
-}
-export declare const useMount: (state: boolean, config?: UseMountConfig) => (fn: (animation: {
-    value: FluidValue;
-}, mounted: boolean) => React.ReactNode) => import("react").ReactNode;

package/dist/animation/hooks/useValue.d.ts

@@ -1,7 +0,0 @@
-import { FluidValue } from '@raidipesh78/re-motion';
-import type { ToValue } from '../types';
-export declare function useValue(initialValue: number | string): {
-    get value(): FluidValue;
-    set value(to: number | string | ToValue);
-    readonly currentValue: string | number;
-};

package/dist/animation/hooks/useValues.d.ts

@@ -1,7 +0,0 @@
-import { FluidValue } from '@raidipesh78/re-motion';
-import type { ToValue } from '../types';
-export declare function useValues(initialValue: number[] | string[]): {
-    get value(): FluidValue[];
-    set value(to: number[] | string[] | ToValue[]);
-    readonly currentValue: (string | number)[];
-};

package/dist/animation/index.d.ts

@@ -1,5 +0,0 @@
-export { interpolate, bInterpolate } from './interpolation';
-export { MountedBlock, ScrollableBlock } from './modules';
-export { useValue, useMount, useValues, type UseMountConfig } from './hooks';
-export { withSpring, withTiming, withSequence, withDelay, withDecay, withLoop, withEase, } from './controllers';
-export { AnimationConfig } from './helpers';

package/dist/animation/interpolation/colors.d.ts

@@ -1,25 +0,0 @@
-export declare const COLOR_NUMBER_REGEX: RegExp;
-export declare const HEX_NAME_COLOR: RegExp;
-interface classNameType {
-    [name: string]: string;
-}
-export declare const colorNames: classNameType;
-export declare function hexToRgba(hex: string): {
-    r: number;
-    g: number;
-    b: number;
-    a: number;
-};
-export declare function rgbaToHex(rgba: {
-    r: number;
-    g: number;
-    b: number;
-    a: number;
-}): string;
-export declare function processColor(color: number | string): {
-    r: number;
-    g: number;
-    b: number;
-    a: number;
-};
-export {};

package/dist/animation/interpolation/index.d.ts

@@ -1 +0,0 @@
-export { interpolate, bInterpolate } from './interpolate';