react-ui-animate 4.1.2 → 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,203 +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
+---
 
-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:
+## Getting Started
 
-```javascript
-import { animate, useValue } from 'react-ui-animate';
+The `react-ui-animate` library provides a straightforward way to add animations and gestures to your React components. Below are some common use cases.
 
-export default function () {
-  // Initialize an animated opacity value
-  const opacity = useValue(0);
+### 1. useValue
+
+Use `useValue` to initialize and update an animated value.
+
+```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 (
-    <div>
-      {/* animate.div component uses the animated opacity value */}
-      <animate.div
-        style={{
-          opacity: opacity.value, // using opacity with value property
-          width: 100,
-          padding: 20,
-          background: '#39F',
+    <>
+      <button
+        onClick={() => {
+          setWidth(withSequence([withTiming(100), withSpring(0)]));
+        }}
+      >
+        SEQUENCE (100 → 0)
+      </button>
+      <button
+        onClick={() => {
+          setWidth(withSpring(200));
+        }}
+      >
+        SPRING (→ 200)
+      </button>
+      <button
+        onClick={() => {
+          setWidth(400);
         }}
       >
-        ANIMATED
-      </animate.div>
+        IMMEDIATE (→ 400)
+      </button>
 
-      {/* Clicking the button changes the opacity smoothly to 1 */}
-      <button onClick={() => (opacity.value = 1)}>Animate Me</button>
-    </div>
+      <animate.div
+        style={{
+          width,
+          height: 100,
+          backgroundColor: 'red',
+          left: 0,
+          top: 0,
+        }}
+      />
+    </>
   );
-}
-```
-
-In this example, clicking the "Animate Me" button smoothly changes the opacity of the animated block from 0 to 1.
-
-### Key Features
-
-#### `useValue()`
-
-The `useValue()` hook is central to creating animations. It initializes an animated value and allows you to seamlessly update it to create dynamic effects.
-
-```javascript
-const opacity = useValue(0); // Start with opacity set to 0
-
-// Use in style
-style={{
-  opacity: opacity.value, // Access the animated opacity value
-}}
-
-// Update the value on user interaction
-onClick={() => (opacity.value = 1)} // Changes the opacity to 1
-```
-
-#### `animate.div`
-
-`animate.div` is a special component designed to work with `useValue()`. It simplifies animating elements by directly using animated values.
-
-```javascript
-const width = useValue(100); // Start with a width of 100
-
-<animate.div
-  style={{
-    width: width.value,
-    height: 100,
-    backgroundColor: '#39f',
-  }}
-/>;
-```
-
-#### `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); // Start with a width of 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.
-
-#### Dynamic Animations and Sequence Transitions
-
-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:
+### 2. useMount
 
-```jsx
-x.value = withTiming(10, { duration: 5000 });
-```
+Use `useMount` to animate component mount and unmount transitions.
 
-To create sequential transitions using the `withSequence` function with dynamic modifiers like `withSpring` and `withTiming`:
+```tsx
+import React from 'react';
+import {
+  animate,
+  useMount,
+  withDecay,
+  withSequence,
+  withSpring,
+  withTiming,
+} from 'react-ui-animate';
 
-```jsx
-x.value = withSequence([withSpring(50), withTiming(100), 200]);
-```
+export const UseMount: React.FC = () => {
+  const [open, setOpen] = React.useState(true);
+  const mounted = useMount(open, { from: 0, enter: 1, exit: 0 });
 
-To delay an animation using the withDelay function:
-
-```jsx
-x.value = withDelay(1000, withSpring(100));
+  return (
+    <>
+      {mounted(
+        (animation, isMounted) =>
+          isMounted && (
+            <animate.div
+              style={{
+                width: 100,
+                height: 100,
+                backgroundColor: 'teal',
+                opacity: animation,
+              }}
+            />
+          )
+      )}
+
+      <button onClick={() => setOpen((prev) => !prev)}>ANIMATE ME</button>
+    </>
+  );
+};
 ```
 
-In this example, a spring animation to `100` will be applied after a 1-second delay.
+### 3. Interpolation
 
-#### `useMount()`
+Interpolate values for complex mappings like color transitions or movement.
 
-The `useMount()` hook facilitates managing the mounting and unmounting of a component with animations.
+```tsx
+import React, { useLayoutEffect, useState } from 'react';
+import { animate, useValue, withSpring } from 'react-ui-animate';
 
-```jsx
-import { useMount } from 'react-ui-animate';
+export const Interpolation: React.FC = () => {
+  const [open, setOpen] = useState(false);
+  const [x, setX] = useValue(0);
 
-export default function App() {
-  const [visible, setVisible] = useState(false);
+  useLayoutEffect(() => {
+    setX(withSpring(open ? 500 : 0));
+  }, [open, setX]);
 
-  const open = useMount(visible, {
-    from: 0,
-    enter: 1,
-    exit: 0,
-  });
+  return (
+    <>
+      <animate.div
+        style={{
+          width: 100,
+          height: 100,
+          backgroundColor: x.to([0, 500], ['red', 'blue']),
+          translateX: x,
+        }}
+      />
 
-  return open((animation, mounted) => mounted && <animate.div />);
-}
+      <button onClick={() => setOpen((p) => !p)}>ANIMATE ME</button>
+    </>
+  );
+};
 ```
 
-In this example,
+---
 
-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.
+## API Overview
 
-### Gestures
+- **`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 `react-ui-animate` library also provides several hooks for handling different types of gestures:
+## 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.
+`react-ui-animate` also provides hooks for handling gestures:
 
-**Example**: `useDrag`
+- `useDrag`
+- `useMove`
+- `useScroll`
+- `useWheel`
 
-Here’s an example of using the useDrag hook to enable drag gestures:
+**Example: `useDrag`**
 
-```jsx
-import { useValue, animate, useDrag } from 'react-ui-animate';
+```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 : 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, // Use translateX with animated 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.1.2",
+  "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.1.0"
+    "@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",
@@ -20,19 +25,25 @@
     "babel-runtime": "^6.26.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "rimraf": "^6.0.1",
     "rollup": "^4.18.0",
     "rollup-plugin-typescript2": "^0.36.0",
+    "semantic-release": "^24.2.6",
     "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",
+    "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 { withConfig } from './withConfig';
-export { withDecay } from './withDecay';
-export { withDelay } from './withDelay';
-export { withEase } from './withEase';
-export { withSequence } from './withSequence';
-export { withSpring } from './withSpring';
-export { withTiming } from './withTiming';
-export { withLoop } from './withLoop';

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

@@ -1,5 +0,0 @@
-import type { UseValueConfig } from '../hooks';
-import type { UpdateValue } from '../core/FluidController';
-export interface WithOnCallbacks extends Pick<UseValueConfig, 'onRest' | 'onStart' | 'onChange'> {
-}
-export declare const withConfig: (toValue: number, config?: UseValueConfig) => UpdateValue;

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

@@ -1,7 +0,0 @@
-import type { UseValueConfig } from '../hooks';
-import type { WithOnCallbacks } from './withConfig';
-import type { UpdateValue } from '../core/FluidController';
-interface WithDecayConfig extends Pick<UseValueConfig, 'velocity' | 'deceleration'>, WithOnCallbacks {
-}
-export declare const withDecay: (config?: WithDecayConfig) => UpdateValue;
-export {};

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

@@ -1,6 +0,0 @@
-import type { UseValueConfig } from '../hooks';
-import type { UpdateValue } from '../core/FluidController';
-export declare const withDelay: (delay: number, animation: {
-    toValue: number;
-    config?: UseValueConfig;
-}) => UpdateValue;

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

@@ -1,6 +0,0 @@
-import { type WithOnCallbacks } from './withConfig';
-import type { UpdateValue } from '../core/FluidController';
-interface WithEaseConfig extends WithOnCallbacks {
-}
-export declare const withEase: (toValue: number, config?: WithEaseConfig) => UpdateValue;
-export {};

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

@@ -1,2 +0,0 @@
-import type { UpdateValue } from '../core/FluidController';
-export declare const withLoop: (updateValue: UpdateValue | UpdateValue[], loop: number) => UpdateValue[];

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

@@ -1,2 +0,0 @@
-import { type UpdateValue } from '../core/FluidController';
-export declare const withSequence: (animations: Array<UpdateValue | number | Array<UpdateValue | number>>) => UpdateValue[];

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

@@ -1,7 +0,0 @@
-import { type UseValueConfig } from '../hooks';
-import { type WithOnCallbacks } from './withConfig';
-import type { UpdateValue } from '../core/FluidController';
-interface WithSpringConfig extends Pick<UseValueConfig, 'mass' | 'friction' | 'tension'>, WithOnCallbacks {
-}
-export declare const withSpring: (toValue: number, config?: WithSpringConfig) => UpdateValue;
-export {};

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

@@ -1,7 +0,0 @@
-import { type UseValueConfig } from '../hooks';
-import { type WithOnCallbacks } from './withConfig';
-import type { UpdateValue } from '../core/FluidController';
-interface WithTimingConfig extends Pick<UseValueConfig, 'duration' | 'easing'>, WithOnCallbacks {
-}
-export declare const withTiming: (toValue: number, config?: WithTimingConfig) => UpdateValue;
-export {};

package/dist/animation/core/FluidArrayController.d.ts

@@ -1,7 +0,0 @@
-import type { UpdateValue, UseFluidValueConfig } from './FluidController';
-export declare class FluidArrayController {
-    private fluidControllers;
-    constructor(values: number[] | string[], config?: UseFluidValueConfig);
-    setFluid(updateValue: Array<UpdateValue | UpdateValue[]>, callback?: () => void): void;
-    getFluid(): import("@raidipesh78/re-motion").FluidValue[];
-}

package/dist/animation/core/FluidController.d.ts

@@ -1,34 +0,0 @@
-import { FluidValue } from '@raidipesh78/re-motion';
-type Fn<T, U> = (value: T) => U;
-export interface UseFluidValueConfig {
-    mass?: number;
-    tension?: number;
-    friction?: number;
-    duration?: number;
-    easing?: Fn<number, number>;
-    immediate?: boolean;
-    delay?: number;
-    restDistance?: number;
-    onChange?: Fn<number | string, void>;
-    onRest?: Fn<number | string, void>;
-    onStart?: Fn<number | string, void>;
-    decay?: boolean;
-    velocity?: number;
-    deceleration?: number;
-    loop?: number;
-}
-export type UpdateValue = {
-    toValue?: number | string;
-    config?: UseFluidValueConfig;
-};
-export declare class FluidController {
-    private fluid;
-    private defaultConfig?;
-    private iterationsSoFar;
-    constructor(value: number | string, config?: UseFluidValueConfig);
-    private getAnimation;
-    private runAnimation;
-    setFluid(updateValue: UpdateValue | UpdateValue[], callback?: (value: number) => void): void;
-    getFluid(): FluidValue;
-}
-export {};

package/dist/animation/core/useFluidValue.d.ts

@@ -1,3 +0,0 @@
-import { FluidValue } from '@raidipesh78/re-motion';
-import { UpdateValue, UseFluidValueConfig } from './FluidController';
-export declare const useFluidValue: <T extends number | string>(value: T, config?: UseFluidValueConfig) => [FluidValue, (updateValue: UpdateValue | UpdateValue[], callback?: () => void) => void];

package/dist/animation/core/useFluidValues.d.ts

@@ -1,3 +0,0 @@
-import { FluidValue } from '@raidipesh78/re-motion';
-import { UpdateValue, UseFluidValueConfig } from './FluidController';
-export declare const useFluidValues: <T extends number[] | string[]>(value: T, config?: UseFluidValueConfig) => [FluidValue[], (updateValue: Array<UpdateValue | UpdateValue[]>, callback?: () => void) => void];

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

@@ -1,18 +0,0 @@
-import { FluidValue } from '@raidipesh78/re-motion';
-import type { UpdateValue, UseFluidValueConfig } from './FluidController';
-export interface UseMountConfig {
-    from: number;
-    enter: number | UpdateValue | number[] | UpdateValue[];
-    exit: number | UpdateValue | number[] | UpdateValue[];
-    config?: UseFluidValueConfig;
-}
-/**
- * `useMount`
- *
- * applies mounting and unmounting of a component according to state change
- * applying transitions
- *
- * @param state - boolean indicating mount state of a component
- * @param config - the config object `UseMountConfig`
- */
-export declare const useMount: (state: boolean, config: UseMountConfig) => (callback: (animation: FluidValue, mounted: boolean) => React.ReactNode) => import("react").ReactNode;

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

@@ -1,59 +0,0 @@
-import { Easing } from '@raidipesh78/re-motion';
-export declare const AnimationConfig: {
-    ELASTIC: {
-        mass: number;
-        friction: number;
-        tension: number;
-    };
-    BOUNCE: {
-        duration: number;
-        easing: typeof Easing.bounce;
-    };
-    EASE: {
-        mass: number;
-        friction: number;
-        tension: number;
-    };
-    STIFF: {
-        mass: number;
-        friction: number;
-        tension: number;
-    };
-    WOOBLE: {
-        mass: number;
-        friction: number;
-        tension: number;
-    };
-    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;
-    };
-};

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

@@ -1,2 +0,0 @@
-import { UpdateValue, UseFluidValueConfig } from '../core/FluidController';
-export declare function getToValue(value: number | string | UpdateValue, config?: UseFluidValueConfig): UpdateValue;

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

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

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

@@ -1 +0,0 @@
-export declare const isDefined: <T>(value: T) => value is NonNullable<T>;

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

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

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

@@ -1,15 +0,0 @@
-import { FluidValue } from '@raidipesh78/re-motion';
-import { UseMountConfig as UseInternalMountConfig } from '../core/useMount';
-export interface UseMountConfig extends UseInternalMountConfig {
-}
-/**
- * `useMount` handles mounting and unmounting of a component which captures current state
- * passed as an argument (`state`) and exposes the shadow state which handles the mount and unmount
- * of a component.
- *
- * @param { boolean } state - Boolean indicating the component should mount or unmount.
- * @param { UseMountConfig } config - Animation configuration.
- */
-export declare function useMount(state: boolean, config: UseMountConfig): (cb: (value: {
-    value: FluidValue;
-}, mounted: boolean) => React.ReactNode) => import("react").ReactNode;