@madeja-studio/telar/src/animation/animation.ts

UI component library by Madeja Studio

import type { AnimatableNumericValue, ViewStyle } from 'react-native';

import { type Interpolation, type SpringValue } from '@react-spring/native';

export interface Animation<TValues extends Record<string, number>> {
  from: TValues;
  style?: (values: ToMaybeSpringValues<TValues>) => SpringStyle<ViewStyle>;
  to: TValues;
}

export type AnimationFactory<
  TInput,
  TValues extends Record<string, number> = Record<string, number>,
> = (props?: TInput) => Animation<TValues>;

export type MaybeSpringValue<T> = SpringValue<T> | T;

/**
 * A helper type that traverses all its subtypes recursively and transform
 * all string and number values into a union of their type or their corresponding
 * react-spring interpolation types.
 */
type SpringStyle<T> =
  T extends Array<infer U>
    ? Array<SpringStyle<U>>
    : T extends number
      ? AnimatableNumericValue | Interpolation<number>
      : T extends string
        ? AnimatableNumericValue | Interpolation<string>
        : { [K in keyof T]: SpringStyle<T[K]> };

type ToMaybeSpringValues<T extends Record<string, number>> = {
  [K in keyof T]: MaybeSpringValue<number>;
};