@teamturing/react-native-kit 0.1.0 → 1.2.0

package/src/component/AnimatedNumber.tsx

@@ -0,0 +1,302 @@
+import { Txt, type Typography, type TextConfigProp, type TxtEllipsizeMode } from '@teamturing/react-native-kit';
+import { useEffect, useRef } from 'react';
+import { Animated, Easing, View } from 'react-native';
+
+import type { LayoutStyle } from './Layout';
+
+const numberWidthByTypography: Record<Typography, number> = {
+  'H1': 16,
+  'H2': 15,
+  'H3': 14,
+  'L': 12,
+  'L.Medium': 12,
+  'L.Bold': 12,
+  'M': 10,
+  'M.Medium': 11,
+  'M.Bold': 11,
+  'S': 9,
+  'S.Medium': 9,
+  'S.Bold': 10,
+  'XS': 7,
+  'XS.Medium': 7,
+  'XS.Bold': 7,
+};
+
+const commaWidthByTypography: Record<Typography, number> = {
+  'H1': 16 / 4,
+  'H2': 15 / 4,
+  'H3': 14 / 4,
+  'L': 12 / 4,
+  'L.Medium': 12 / 4,
+  'L.Bold': 12 / 4,
+  'M': 10 / 4,
+  'M.Medium': 11 / 4,
+  'M.Bold': 11 / 4,
+  'S': 9 / 4,
+  'S.Medium': 9 / 4,
+  'S.Bold': 10 / 4,
+  'XS': 7 / 4,
+  'XS.Medium': 7 / 4,
+  'XS.Bold': 7 / 4,
+};
+
+const numberHeightByTypography: Record<Typography, number> = {
+  'H1': 36,
+  'H2': 33,
+  'H3': 30,
+  'L': 27,
+  'L.Medium': 27,
+  'L.Bold': 27,
+  'M': 24,
+  'M.Medium': 24,
+  'M.Bold': 24,
+  'S': 21,
+  'S.Medium': 21,
+  'S.Bold': 21,
+  'XS': 18,
+  'XS.Medium': 18,
+  'XS.Bold': 18,
+};
+
+const TxtComponentByTypography: Record<Typography, Txt> = {
+  'H1': Txt.H1,
+  'H2': Txt.H2,
+  'H3': Txt.H3,
+  'L': Txt.L,
+  'L.Medium': Txt.L.Medium,
+  'L.Bold': Txt.L.Bold,
+  'M': Txt.M,
+  'M.Medium': Txt.M.Medium,
+  'M.Bold': Txt.M.Bold,
+  'S': Txt.S,
+  'S.Medium': Txt.S.Medium,
+  'S.Bold': Txt.S.Bold,
+  'XS': Txt.XS,
+  'XS.Medium': Txt.XS.Medium,
+  'XS.Bold': Txt.XS.Bold,
+};
+
+type Props = {
+  value: number;
+  fromValue: number;
+  txt?: Typography;
+  txtConfig?: TextConfigProp;
+  duration?: number;
+  delay?: number;
+  suffix?: string;
+  withComma?: boolean;
+  layout?: LayoutStyle;
+};
+
+const AnimatedNumber = ({
+  value,
+  fromValue,
+  txt = 'M.Medium',
+  txtConfig,
+  duration = 3000,
+  delay = 0,
+  suffix = '',
+  withComma = false,
+  layout,
+}: Props) => {
+  const numberWidth = numberWidthByTypography[txt];
+  const commaWidth = commaWidthByTypography[txt];
+
+  const isIncreasing = value - fromValue > 0;
+
+  const numberWithCommaRegex = /\B(?=(\d{3})+(?!\d))/g;
+  const fromValueString = fromValue.toString().replace(numberWithCommaRegex, withComma ? ',' : '');
+  const valueString = value.toString().replace(numberWithCommaRegex, withComma ? ',' : '');
+  const digitDifference = Math.abs(valueString.length - fromValueString.length);
+  const maxDigit = Math.max(fromValueString.length, valueString.length);
+
+  const fromValueArray = Array.from(fromValueString.padStart(maxDigit, '0'));
+  const valueArray = Array.from(valueString.padStart(maxDigit, '0'));
+
+  const minimumDigitIndexToAnimated = fromValueArray.findIndex((fromNumber, i) => fromNumber !== valueArray[i]);
+
+  const diffCommaCount = Array.from((isIncreasing ? valueString : fromValueString).slice(0, digitDifference)).filter(
+    (c) => c === ',',
+  ).length;
+  const diffNumberCount = digitDifference - diffCommaCount;
+
+  const delta = diffCommaCount * commaWidth + diffNumberCount * numberWidth;
+  const fromX = isIncreasing ? -delta : 0;
+  const toX = isIncreasing ? 0 : -delta;
+
+  const translateX = useRef(new Animated.Value(fromX)).current;
+  useEffect(() => {
+    const animation = Animated.timing(translateX, {
+      useNativeDriver: true,
+      toValue: toX,
+      easing: Easing.out(Easing.exp),
+      duration,
+      delay,
+    });
+    animation.start();
+
+    return animation.stop;
+  }, [delay, duration, toX, translateX]);
+
+  return (
+    <Animated.View
+      style={[
+        { overflow: 'hidden' },
+        {
+          transform: [
+            {
+              translateX: translateX.interpolate({
+                inputRange: [-Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER],
+                outputRange: [Number.MAX_SAFE_INTEGER, -Number.MAX_SAFE_INTEGER],
+              }),
+            },
+          ],
+        },
+        layout,
+      ]}
+    >
+      <Animated.View style={{ flexDirection: 'row', alignItems: 'center', transform: [{ translateX }] }}>
+        {Array(maxDigit)
+          .fill(0)
+          .map((_, i) => {
+            const animationDeleyPerDigit = duration / maxDigit / 10;
+            const commonProps = {
+              txt,
+              txtConfig: {
+                ellipsizeMode: 'clip' as TxtEllipsizeMode,
+                ...txtConfig,
+              },
+            };
+
+            return (
+              <View key={maxDigit - i}>
+                {fromValueArray[i] === ',' || valueArray[i] === ',' ? (
+                  <View>
+                    <CommaUnit {...commonProps} />
+                  </View>
+                ) : i < minimumDigitIndexToAnimated ? (
+                  <View>
+                    <NumberUnit {...commonProps} value={Number(valueArray[i])} />
+                  </View>
+                ) : (
+                  <View>
+                    <AnimatedNumberUnit
+                      {...commonProps}
+                      value={Number(valueArray[i])}
+                      fromValue={Number(fromValueArray[i])}
+                      isIncreasing={isIncreasing}
+                      duration={duration}
+                      delay={
+                        delay +
+                        (isIncreasing ? (maxDigit - 1 - i) * animationDeleyPerDigit : i * animationDeleyPerDigit)
+                      }
+                      isLowDigit={i !== minimumDigitIndexToAnimated}
+                    />
+                  </View>
+                )}
+              </View>
+            );
+          })}
+        {suffix ? TxtComponentByTypography[txt].render(suffix, txtConfig) : null}
+      </Animated.View>
+    </Animated.View>
+  );
+};
+
+type CommaUnitProps = {
+  txt: Typography;
+  txtConfig?: TextConfigProp;
+};
+
+const CommaUnit = ({ txt, txtConfig }: CommaUnitProps) => {
+  const commaWidth = commaWidthByTypography[txt];
+
+  return <View style={{ width: commaWidth }}>{TxtComponentByTypography[txt].render(',', { ...txtConfig })}</View>;
+};
+
+type NumberUnitProps = {
+  value: number;
+  txt: Typography;
+  txtConfig?: TextConfigProp;
+};
+
+const NumberUnit = ({ value, txt, txtConfig }: NumberUnitProps) => {
+  const numberWidth = numberWidthByTypography[txt];
+  const numberHeight = numberHeightByTypography[txt];
+
+  return (
+    <View style={{ width: numberWidth, height: numberHeight }}>
+      {TxtComponentByTypography[txt].render(`${value}`, txtConfig)}
+    </View>
+  );
+};
+
+type AnimatedNumberUnitProps = {
+  fromValue: number;
+  isIncreasing: boolean;
+  duration: number;
+  delay: number;
+  isLowDigit?: boolean;
+} & NumberUnitProps;
+
+const AnimatedNumberUnit = ({
+  value,
+  fromValue,
+  isIncreasing,
+  txt,
+  txtConfig,
+  duration,
+  delay,
+  isLowDigit = false,
+}: AnimatedNumberUnitProps) => {
+  const numberWidth = numberWidthByTypography[txt];
+  const numberHeight = numberHeightByTypography[txt];
+
+  const valueDifference =
+    (isIncreasing && value - fromValue > 0
+      ? value - fromValue
+      : isIncreasing && value - fromValue <= 0
+      ? value + 10 - fromValue
+      : !isIncreasing && value - fromValue >= 0
+      ? fromValue + 10 - value
+      : !isIncreasing && value - fromValue < 0
+      ? fromValue - value
+      : 0) + (isLowDigit ? 10 : 0);
+
+  const numbers = Array(valueDifference + 1)
+    .fill(isIncreasing ? fromValue : value)
+    .map((number, i) => (number + i) % 10);
+
+  const delta = numberHeight * valueDifference;
+  const fromY = isIncreasing ? -delta : 0;
+  const toY = isIncreasing ? 0 : -delta;
+
+  const translateY = useRef(new Animated.Value(fromY)).current;
+  useEffect(() => {
+    const animation = Animated.timing(translateY, {
+      useNativeDriver: true,
+      toValue: toY,
+      easing: Easing.out(Easing.cubic),
+      duration,
+      delay,
+    });
+    animation.start();
+
+    return animation.stop;
+  }, [delay, duration, toY, translateY]);
+
+  return (
+    <View style={{ width: numberWidth, height: numberHeight, overflow: 'hidden' }}>
+      <Animated.View style={{ transform: [{ translateY }] }}>
+        {[...numbers]
+          .reverse()
+          .map((number, i) =>
+            TxtComponentByTypography[txt].render(`${number}`, { key: i, align: 'center', ...txtConfig }),
+          )}
+      </Animated.View>
+    </View>
+  );
+};
+
+export { AnimatedNumber };
+export type { Props as AnimatedNumberProps };

package/src/component/Animation/etc/CircleEffectAnimation.tsx

@@ -0,0 +1,97 @@
+import type { PropsWithChildren } from 'react';
+import Animated, {
+  useSharedValue,
+  useAnimatedProps,
+  interpolate,
+  Extrapolation,
+  withTiming,
+} from 'react-native-reanimated';
+import Svg, { Circle } from 'react-native-svg';
+
+import { useMount } from '../../../hook';
+import { palette } from '../../../theme';
+import { px } from '../../../util';
+import { Box } from '../../Box';
+
+const ACircle = Animated.createAnimatedComponent(Circle);
+export const CircleEffectAnimation = ({ childSize: size = 24, children }: PropsWithChildren<{ childSize: number }>) => {
+  const animValue = useSharedValue(0);
+
+  const effectSize = (size * 5) / 3;
+
+  const maxStrokeWidth = size / 6;
+
+  const r1 = size / 12;
+  const r2 = size / 5;
+  const r3 = size / 8;
+
+  const ringAnimProps = useAnimatedProps(() => {
+    const strokeWidth = interpolate(animValue.value, [0, 0.05, 0.6], [maxStrokeWidth, maxStrokeWidth, 1]);
+    return {
+      r: size / 2 + (maxStrokeWidth / 3) * 2 + (maxStrokeWidth - strokeWidth) / 2,
+      strokeWidth,
+      opacity: interpolate(animValue.value, [0, 0.05, 0.4, 0.5], [0, 0.25, 0.25, 0], Extrapolation.CLAMP),
+    };
+  }, []);
+
+  const circle1AnimProps = useAnimatedProps(() => {
+    return {
+      r: r1 * interpolate(animValue.value, [0, 0.05, 0.3, 1], [0.8, 1, 1, 0.7]),
+      opacity: interpolate(animValue.value, [0, 0.1, 0.5, 1], [0, 0.5, 0.5, 0]),
+      cx: (effectSize / 2) * (1 - Math.cos(Math.PI / 4 - animValue.value / 6)),
+      cy: (effectSize / 2) * (1 + Math.sin(Math.PI / 4 - animValue.value / 8)),
+    };
+  }, []);
+
+  const circle2AnimProps = useAnimatedProps(() => {
+    const r_p = (size + maxStrokeWidth * 2) / 2 + interpolate(animValue.value, [0, 0.05, 0.8, 1], [-r2, -r2, 0]);
+    return {
+      r: r2 * interpolate(animValue.value, [0, 0.05, 0.3, 1], [0.8, 1, 1, 0.7]),
+      opacity: interpolate(animValue.value, [0, 0.1, 0.5, 1], [0, 0.5, 0.5, 0]),
+      cx: effectSize / 2 - r_p * Math.cos(Math.PI / 3),
+      cy: effectSize / 2 + r_p * Math.sin(Math.PI / 3),
+    };
+  }, []);
+
+  const circle3AnimProps = useAnimatedProps(() => {
+    const r_p = (size + maxStrokeWidth * 2) / 2 + r3 * animValue.value;
+    return {
+      r: r3 * interpolate(animValue.value, [0, 0.05, 0.3, 1], [0.8, 1, 1, 0.7]),
+      opacity: interpolate(animValue.value, [0, 0.1, 0.5, 1], [0, 1, 1, 0]),
+      cx: effectSize / 2 + r_p * Math.cos(Math.PI / 3),
+      cy: effectSize / 2 - r_p * Math.sin(Math.PI / 3),
+    };
+  }, []);
+
+  useMount(() => {
+    // animValue.value = withRepeat(withDelay(1000, withTiming(1, { duration: 500 })), -1, false);
+    animValue.value = withTiming(1, { duration: 500 });
+  });
+
+  return (
+    <Box width={px(size)} alignSelf={'center'}>
+      <Svg
+        width={effectSize}
+        height={effectSize}
+        viewBox={`0 0 ${effectSize} ${effectSize}`}
+        style={{
+          position: 'absolute',
+          top: -(effectSize - size) / 2,
+          left: -(effectSize - size) / 2,
+        }}
+      >
+        <ACircle
+          cx={effectSize / 2}
+          cy={effectSize / 2}
+          fill={'transparent'}
+          stroke={palette.violet500}
+          animatedProps={ringAnimProps}
+        />
+        <ACircle fill={palette.violet400} animatedProps={circle1AnimProps} />
+        <ACircle fill={palette.violet400} animatedProps={circle2AnimProps} />
+        <ACircle fill={palette.violet400} animatedProps={circle3AnimProps} />
+      </Svg>
+      {children}
+    </Box>
+  );
+};

package/src/component/Animation/etc/FadeInOutLoop.tsx

@@ -0,0 +1,66 @@
+import React, { useRef, useEffect } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { Animated, Easing } from 'react-native';
+
+type Props = {
+  style?: StyleProp<ViewStyle>;
+  opacityOut?: number;
+  durationIn?: number;
+  durationOut?: number;
+  delay?: number;
+  iterations?: number;
+};
+
+const FadeInOutLoop = ({
+  style,
+  children,
+  durationIn = 500,
+  durationOut = 500,
+  opacityOut = 0,
+  delay = 0,
+  iterations = 1,
+}: React.PropsWithChildren<Props>) => {
+  const opacityValue = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    const easing = Easing.inOut(Easing.cubic);
+    const anim = Animated.loop(
+      Animated.sequence([
+        Animated.loop(
+          Animated.sequence([
+            Animated.timing(opacityValue, {
+              useNativeDriver: true,
+              toValue: opacityOut,
+              duration: durationIn,
+              easing,
+            }),
+            Animated.timing(opacityValue, { useNativeDriver: true, toValue: 1, duration: durationOut, easing }),
+          ]),
+          { iterations },
+        ),
+        Animated.delay(delay),
+      ]),
+    );
+
+    anim.start();
+
+    return () => {
+      anim.stop();
+    };
+  }, [opacityValue, durationIn, durationOut, opacityOut, delay, iterations]);
+
+  return (
+    <Animated.View
+      style={[
+        style,
+        {
+          opacity: opacityValue,
+        },
+      ]}
+    >
+      {children}
+    </Animated.View>
+  );
+};
+
+export { FadeInOutLoop };

package/src/component/Animation/etc/LeftAndRight.tsx

@@ -0,0 +1,26 @@
+import { useMount } from '@teamturing/react-native-kit';
+import type { PropsWithChildren } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, Easing } from 'react-native-reanimated';
+
+type Props = {
+  style?: StyleProp<Omit<ViewStyle, 'transform'>>;
+  duration?: number;
+  translation?: number;
+};
+const LeftAndRight = ({ style, children, duration = 400, translation = 4 }: PropsWithChildren<Props>) => {
+  const animValue = useSharedValue(0);
+  const animStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: animValue.value }],
+  }));
+  useMount(() => {
+    animValue.value = withRepeat(
+      withTiming(translation, { duration: duration, easing: Easing.inOut(Easing.quad) }),
+      -1,
+      true,
+    );
+  });
+  return <Animated.View style={[style, animStyle]}>{children}</Animated.View>;
+};
+
+export { LeftAndRight };

package/src/component/Animation/etc/Pulse.tsx

@@ -0,0 +1,76 @@
+import React, { useRef, useEffect } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { Animated, Easing } from 'react-native';
+
+type Props = {
+  style?: StyleProp<ViewStyle>;
+  scaleX?: number;
+  scaleY?: number;
+
+  durationIn?: number;
+  durationOut?: number;
+  translateYOffset?: number;
+};
+
+const Pulse = ({
+  style,
+  children,
+  scaleX = 1.1,
+  scaleY = 1.1,
+  durationIn = 500,
+  durationOut = 500,
+  translateYOffset = 0,
+}: React.PropsWithChildren<Props>) => {
+  const scaleXValue = useRef(new Animated.Value(1)).current;
+  const scaleYValue = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    const easing = Easing.inOut(Easing.cubic);
+    const xAnim = Animated.sequence([
+      Animated.timing(scaleXValue, {
+        useNativeDriver: true,
+        toValue: scaleX,
+        duration: durationIn,
+        easing,
+      }),
+      Animated.timing(scaleXValue, { useNativeDriver: true, toValue: 1, duration: durationOut, easing }),
+    ]);
+    const yAnim = Animated.sequence([
+      Animated.timing(scaleYValue, {
+        useNativeDriver: true,
+        toValue: scaleY,
+        duration: durationIn,
+        easing,
+      }),
+      Animated.timing(scaleYValue, { useNativeDriver: true, toValue: 1, duration: durationOut, easing }),
+    ]);
+
+    const anim = Animated.loop(Animated.parallel([xAnim, yAnim]), { resetBeforeIteration: true });
+
+    anim.start();
+
+    return () => {
+      anim.stop();
+    };
+  }, [scaleXValue, scaleYValue, scaleX, scaleY, durationIn, durationOut]);
+
+  return (
+    <Animated.View
+      style={[
+        style,
+        {
+          transform: [
+            { translateY: translateYOffset },
+            { scaleX: scaleXValue },
+            { scaleY: scaleYValue },
+            { translateY: -translateYOffset },
+          ],
+        },
+      ]}
+    >
+      {children}
+    </Animated.View>
+  );
+};
+
+export { Pulse };

package/src/component/Animation/etc/UpAndDown.tsx

@@ -0,0 +1,26 @@
+import { useMount } from '@teamturing/react-native-kit';
+import type { PropsWithChildren } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, Easing } from 'react-native-reanimated';
+
+type Props = {
+  style?: StyleProp<Omit<ViewStyle, 'transform'>>;
+  duration?: number;
+  translation?: number;
+};
+const UpAndDown = ({ style, children, duration = 400, translation = 4 }: PropsWithChildren<Props>) => {
+  const animValue = useSharedValue(0);
+  const animStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: animValue.value }],
+  }));
+  useMount(() => {
+    animValue.value = withRepeat(
+      withTiming(translation, { duration: duration, easing: Easing.inOut(Easing.quad) }),
+      -1,
+      true,
+    );
+  });
+  return <Animated.View style={[style, animStyle]}>{children}</Animated.View>;
+};
+
+export { UpAndDown };

package/src/component/Animation/etc/index.ts

@@ -0,0 +1,5 @@
+export * from './CircleEffectAnimation';
+export * from './FadeInOutLoop';
+export * from './LeftAndRight';
+export * from './Pulse';
+export * from './UpAndDown';

package/src/component/Animation/imperative/FadeIn.tsx

@@ -0,0 +1,23 @@
+import React, { forwardRef } from 'react';
+import { Animated } from 'react-native';
+
+import { type ImperativeAnimationProps, type ImperativeAnimationRef, ImperativeAnimation } from './ImperativeAnimation';
+
+type Props = {
+  duration?: number;
+  alphaFrom?: number;
+  alphaTo?: number;
+} & ImperativeAnimationProps;
+export const FadeIn = forwardRef(
+  ({ duration = 500, alphaFrom = 0, alphaTo = 1, ...rest }: Props, ref: React.Ref<ImperativeAnimationRef>) => {
+    return (
+      <ImperativeAnimation
+        ref={ref}
+        startAnimationValue={alphaFrom}
+        buildAnimation={(value) => Animated.timing(value, { useNativeDriver: true, toValue: alphaTo, duration })}
+        buildAnimatedStyle={(value) => ({ opacity: value })}
+        {...rest}
+      />
+    );
+  },
+);

package/src/component/Animation/imperative/FadeInOut.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef } from 'react';
+import { Animated } from 'react-native';
+
+import { type ImperativeAnimationRef, type ImperativeAnimationProps, ImperativeAnimation } from './ImperativeAnimation';
+
+type Props = {
+  duration?: number;
+  fadeInDuration?: number;
+  fadeOutDuration?: number;
+} & ImperativeAnimationProps;
+export const FadeInOut = forwardRef(
+  (
+    { duration = 5000, fadeInDuration = 500, fadeOutDuration = 500, ...rest }: Props,
+    ref: React.Ref<ImperativeAnimationRef>,
+  ) => {
+    return (
+      <ImperativeAnimation
+        ref={ref}
+        buildAnimation={(value) =>
+          Animated.sequence([
+            Animated.timing(value, { useNativeDriver: true, toValue: 1, duration: fadeInDuration }),
+            Animated.delay(Math.max(0, duration - (fadeInDuration + fadeOutDuration))),
+            Animated.timing(value, { useNativeDriver: true, toValue: 0, duration: fadeOutDuration }),
+          ])
+        }
+        buildAnimatedStyle={(value) => ({ opacity: value })}
+        {...rest}
+      />
+    );
+  },
+);