@teamturing/react-native-kit 1.1.0 → 1.2.0

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

@@ -0,0 +1,99 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import { useSx } from '@react-native-styled-system/core';
+import React, { useRef, useCallback, useEffect, useImperativeHandle, forwardRef } from 'react';
+import type { ViewStyle, ViewProps } from 'react-native';
+import { Animated } from 'react-native';
+
+import { useTimeoutHandler, useUnmount } from '../../../hook';
+import { is } from '../../../util';
+
+type Props = React.PropsWithChildren<
+  {
+    startAnimationValue?: number;
+    enableResetAtRestart?: boolean;
+    disableFirstAnimation?: boolean;
+    buildAnimation: (value: Animated.Value) => Animated.CompositeAnimation;
+    buildAnimatedStyle: (value: Animated.Value) => Animated.AnimatedProps<ViewStyle>;
+    delay?: number;
+    onAnimationComplete?: () => void;
+  } & Animated.AnimatedProps<ViewProps> &
+    SxProps
+>;
+
+export type ImperativeAnimationProps = Omit<Props, 'buildAnimatedStyle' | 'buildAnimation'>;
+
+export type ImperativeAnimationRef = {
+  start: () => void;
+  reset: () => void;
+};
+
+const ImperativeAnimation = forwardRef((props: Props, ref: React.Ref<ImperativeAnimationRef>) => {
+  const { getStyle, filteredProps } = useSx(props);
+  const {
+    enableResetAtRestart,
+    disableFirstAnimation,
+    buildAnimation,
+    buildAnimatedStyle,
+    startAnimationValue = 0,
+    delay = 0,
+    onAnimationComplete,
+    ...rest
+  } = filteredProps;
+
+  const onAnimationCompleteRef = useRef<Function>();
+  onAnimationCompleteRef.current = onAnimationComplete;
+  const value = useRef(new Animated.Value(startAnimationValue)).current;
+
+  const anim = useRef<Animated.CompositeAnimation>();
+  const startAnimation = useCallback(() => {
+    anim.current?.stop();
+    if (enableResetAtRestart) {
+      value.setValue(startAnimationValue);
+    }
+    anim.current = buildAnimation(value);
+    if (is.function(onAnimationCompleteRef.current)) {
+      anim.current?.start(({ finished }) => {
+        if (finished) {
+          onAnimationCompleteRef.current?.();
+        }
+      });
+    } else {
+      anim.current?.start();
+    }
+  }, [value, enableResetAtRestart, buildAnimation, startAnimationValue]);
+
+  const isFirstAnimation = useRef(true);
+
+  const delayTimeoutHandler = useTimeoutHandler();
+  useEffect(() => {
+    if (isFirstAnimation.current) {
+      if (!disableFirstAnimation) {
+        if (delay > 0) {
+          delayTimeoutHandler.current = setTimeout(startAnimation, delay);
+        } else {
+          startAnimation();
+        }
+      }
+      isFirstAnimation.current = false;
+    }
+  }, [startAnimation, disableFirstAnimation, delay, delayTimeoutHandler]);
+  useUnmount(() => {
+    anim.current?.stop();
+  });
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      start: startAnimation,
+      reset: () => {
+        anim.current?.stop();
+        value.setValue(startAnimationValue);
+      },
+    }),
+    [startAnimation, startAnimationValue, value],
+  );
+
+  return <Animated.View style={[getStyle(), buildAnimatedStyle(value)]} {...rest} />;
+});
+
+export { ImperativeAnimation };

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

@@ -0,0 +1,32 @@
+import React, { forwardRef } from 'react';
+import { Animated, Easing } from 'react-native';
+
+import { type ImperativeAnimationProps, type ImperativeAnimationRef, ImperativeAnimation } from './ImperativeAnimation';
+
+type Props = { duration?: number; iterations?: number; shakeX?: number } & ImperativeAnimationProps;
+export const Shake = forwardRef(
+  ({ duration = 70, iterations = 10, shakeX = 1.5, ...rest }: Props, ref: React.Ref<ImperativeAnimationRef>) => {
+    return (
+      <ImperativeAnimation
+        ref={ref}
+        disableFirstAnimation
+        enableResetAtRestart
+        buildAnimation={(value) =>
+          Animated.loop(
+            Animated.timing(value, {
+              toValue: 1,
+              easing: Easing.linear,
+              duration,
+              useNativeDriver: true,
+            }),
+            { iterations },
+          )
+        }
+        buildAnimatedStyle={(value) => ({
+          transform: [{ translateX: value.interpolate({ inputRange: [0, 0.5, 1], outputRange: [0, shakeX, 0] }) }],
+        })}
+        {...rest}
+      />
+    );
+  },
+);

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

@@ -0,0 +1,22 @@
+import React, { forwardRef } from 'react';
+import { Animated } from 'react-native';
+
+import { type ImperativeAnimationProps, type ImperativeAnimationRef, ImperativeAnimation } from './ImperativeAnimation';
+
+type Props = {
+  duration?: number;
+  startTranslationY?: number;
+} & ImperativeAnimationProps;
+export const SlideIn = forwardRef(
+  ({ duration = 500, startTranslationY = -56, ...rest }: Props, ref: React.Ref<ImperativeAnimationRef>) => {
+    return (
+      <ImperativeAnimation
+        ref={ref}
+        startAnimationValue={startTranslationY}
+        buildAnimation={(value) => Animated.timing(value, { useNativeDriver: true, toValue: 0, duration })}
+        buildAnimatedStyle={(value) => ({ transform: [{ translateY: value }] })}
+        {...rest}
+      />
+    );
+  },
+);

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

@@ -0,0 +1,41 @@
+import React, { forwardRef } from 'react';
+import { Animated } from 'react-native';
+
+import { type ImperativeAnimationProps, type ImperativeAnimationRef, ImperativeAnimation } from './ImperativeAnimation';
+
+type Props = {
+  duration?: number;
+  slideInDuration?: number;
+  slideOutDuration?: number;
+  startTranslationY?: number;
+  endTranslationY?: number;
+} & ImperativeAnimationProps;
+export const SlideInOut = forwardRef(
+  (
+    {
+      duration = 5000,
+      slideInDuration = 500,
+      slideOutDuration = 500,
+      startTranslationY = -50,
+      endTranslationY = 50,
+      ...rest
+    }: Props,
+    ref: React.Ref<ImperativeAnimationRef>,
+  ) => {
+    return (
+      <ImperativeAnimation
+        ref={ref}
+        startAnimationValue={startTranslationY}
+        buildAnimation={(value) =>
+          Animated.sequence([
+            Animated.timing(value, { useNativeDriver: true, toValue: 0, duration: slideInDuration }),
+            Animated.delay(Math.max(0, duration - (slideInDuration + slideOutDuration))),
+            Animated.timing(value, { useNativeDriver: true, toValue: endTranslationY, duration: slideOutDuration }),
+          ])
+        }
+        buildAnimatedStyle={(value) => ({ transform: [{ translateY: value }] })}
+        {...rest}
+      />
+    );
+  },
+);

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

@@ -0,0 +1,6 @@
+export * from './ImperativeAnimation';
+export * from './FadeIn';
+export * from './FadeInOut';
+export * from './Shake';
+export * from './SlideIn';
+export * from './SlideInOut';

package/src/component/Animation/implicit/OpacityAnimatedView.tsx

@@ -0,0 +1,41 @@
+import { useTimeoutHandler } from '@teamturing/react-native-kit';
+import type { PropsWithChildren } from 'react';
+import { useRef, useEffect, useState } from 'react';
+import type { ViewProps } from 'react-native';
+import { Animated } from 'react-native';
+
+type Props = { opacity: number; duration?: number; dropChildrenWhenInvisible?: boolean } & ViewProps;
+const OpacityAnimatedView = ({
+  opacity,
+  duration = 300,
+  style,
+  dropChildrenWhenInvisible = false,
+  children,
+  ...rest
+}: PropsWithChildren<Props>) => {
+  const opacityValue = useRef(new Animated.Value(opacity)).current;
+  const timeoutHandler = useTimeoutHandler();
+  const [dropChildren, setDropChildren] = useState(!!(dropChildrenWhenInvisible && opacity === 0));
+  useEffect(() => {
+    clearTimeout(timeoutHandler.current);
+    const anim = Animated.timing(opacityValue, { useNativeDriver: true, toValue: opacity, duration });
+    anim.start();
+    if (opacity <= 0 && dropChildrenWhenInvisible) {
+      timeoutHandler.current = setTimeout(() => setDropChildren(true), duration);
+    } else {
+      setDropChildren(false);
+    }
+    return () => {
+      clearTimeout(timeoutHandler.current);
+      anim.stop();
+    };
+  }, [opacity, duration, opacityValue, dropChildrenWhenInvisible, timeoutHandler]);
+
+  return (
+    <Animated.View style={[style, { opacity: opacityValue }]} {...rest}>
+      {dropChildren ? null : children}
+    </Animated.View>
+  );
+};
+
+export { OpacityAnimatedView };

package/src/component/Animation/implicit/ZoomIn.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useRef } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { Animated, Easing } from 'react-native';
+
+type Props = {
+  delay?: number;
+  style?: StyleProp<ViewStyle>;
+};
+
+const ZoomIn = ({ delay = 0, style, children }: React.PropsWithChildren<Props>) => {
+  const scale = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const animation = Animated.timing(scale, {
+      useNativeDriver: true,
+      toValue: 1,
+      duration: 700,
+      delay,
+      easing: Easing.bezier(0, 1.59, 0.78, 1.01),
+    });
+    animation.start();
+
+    return animation.stop;
+  }, [delay, scale]);
+
+  return <Animated.View style={[{ alignSelf: 'flex-start', transform: [{ scale }] }, style]}>{children}</Animated.View>;
+};
+
+export { ZoomIn };

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

@@ -0,0 +1,2 @@
+export * from './OpacityAnimatedView';
+export * from './ZoomIn';

package/src/component/Animation/index.ts

@@ -0,0 +1,3 @@
+export * from './etc';
+export * from './imperative';
+export * from './implicit';

package/src/component/Badge.tsx

@@ -0,0 +1,15 @@
+import { palette } from '@teamturing/react-native-kit';
+import { View } from 'react-native';
+
+import type { LayoutStyle } from './Layout/LayoutStyle';
+
+type Props = {
+  layout?: LayoutStyle;
+  color?: string;
+  size?: number;
+};
+const Badge = ({ layout, color = palette.violet500, size = 6 }: Props) => {
+  return <View style={[{ borderRadius: 9999, backgroundColor: color, width: size, height: size }, layout]} />;
+};
+
+export { Badge };

package/src/component/Banner/BannerItem.tsx

@@ -0,0 +1,57 @@
+import { Txt, is, spacing } from '@teamturing/react-native-kit';
+import React from 'react';
+import { View } from 'react-native';
+
+import { type IconName, type IconProps, Icon } from '../Icon';
+import { type ImgSource, Img } from '../Img/Img';
+import { GapW } from '../Layout/Gap';
+
+export type BannerItemProps = {
+  icon?: {
+    name: IconName;
+    fill?: IconProps['fill'];
+  };
+  image?: ImgSource;
+  text?: string;
+  renderText?: (text: string) => React.ReactElement;
+  showsChevron?: boolean;
+  renderTrailing?: () => React.ReactElement;
+  renderLeading?: () => React.ReactElement;
+  testID?: string;
+};
+const BannerItem = ({
+  icon,
+  image,
+  renderText = (text) => Txt.S.Medium.render(text, { numberOfLines: 1, testID: `${testID}/text` }),
+  text,
+  showsChevron = true,
+  renderTrailing,
+  renderLeading,
+  testID = 'BannerItem',
+}: BannerItemProps) => {
+  const renderLeadingElement = () => {
+    if (is.function(renderLeading)) {
+      return (
+        <>
+          {renderLeading()}
+          <GapW unit={2} />
+        </>
+      );
+    } else if (icon) {
+      return <Icon name={icon.name} fill={icon.fill} size={24} mr={2} />;
+    } else if (image) {
+      return Img.S24.render(image, { style: { marginRight: spacing[2] } });
+    } else {
+      return null;
+    }
+  };
+  return (
+    <View testID={testID} style={{ flexDirection: 'row', alignItems: 'center' }}>
+      {renderLeadingElement()}
+      <View style={{ flex: 1, marginRight: spacing[2] }}>{renderText(text || '')}</View>
+      {is.function(renderTrailing) ? renderTrailing() : showsChevron ? <Icon name={'chevron_right'} size={16} /> : null}
+    </View>
+  );
+};
+
+export { BannerItem };

package/src/component/Banner/BannerRectangle.tsx

@@ -0,0 +1,36 @@
+import { palette, spacing } from '../../theme';
+import is from '../../util/is';
+import { Box } from '../Box';
+import type { LayoutStyle } from '../Layout';
+import { PressableDelayed } from '../Pressable';
+
+import { type BannerItemProps, BannerItem } from './BannerItem';
+
+type Props = {
+  layout?: LayoutStyle;
+  onPress?: () => void;
+  backgroundColor?: keyof typeof palette;
+} & BannerItemProps;
+const BannerRectangle = ({ layout, onPress, backgroundColor = 'gray100', testID, ...rest }: Props) => {
+  return (
+    <PressableDelayed
+      testID={`${testID}/button`}
+      disabled={!is.function(onPress)}
+      onPress={onPress}
+      style={({ pressed }) => [
+        layout,
+        {
+          paddingVertical: spacing[4],
+          backgroundColor: palette[backgroundColor],
+          opacity: pressed ? 0.8 : 1,
+        },
+      ]}
+    >
+      <Box px={'sidePadding'} backgroundColor={'transparent'}>
+        <BannerItem {...rest} showsChevron={is.function(onPress)} testID={testID} />
+      </Box>
+    </PressableDelayed>
+  );
+};
+
+export { BannerRectangle };

package/src/component/Banner/index.ts

@@ -0,0 +1,2 @@
+export * from './BannerItem';
+export * from './BannerRectangle';

package/src/component/BaseWebView.tsx

@@ -0,0 +1,34 @@
+import { memo, useMemo, forwardRef, type ForwardedRef } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { Platform } from 'react-native';
+import type { WebViewProps } from 'react-native-webview';
+import WebView from 'react-native-webview';
+
+type Props = { minHeight?: number } & WebViewProps;
+const BaseWebView = memo(
+  forwardRef(({ minHeight, style, ...rest }: Props, ref: ForwardedRef<WebView>) => {
+    const memoizedStyle = useMemo<StyleProp<ViewStyle>>(
+      () => [style, { opacity: 0.99, minHeight: minHeight || 1 }],
+      [style, minHeight],
+    );
+    return (
+      <WebView
+        ref={ref}
+        {...rest}
+        androidLayerType={'hardware'}
+        showsVerticalScrollIndicator={Platform.OS === 'web'}
+        showsHorizontalScrollIndicator={false}
+        scalesPageToFit={true}
+        setSupportMultipleWindows={false}
+        overScrollMode={'never'}
+        contentMode={'mobile'}
+        style={memoizedStyle}
+        cacheMode={'LOAD_CACHE_ELSE_NETWORK'}
+        webviewDebuggingEnabled={__DEV__}
+        textZoom={100}
+      />
+    );
+  }),
+);
+export type { Props as BaseWebViewProps };
+export { BaseWebView };

package/src/component/Box/index.tsx

@@ -0,0 +1,10 @@
+import { createSxComponent } from '@react-native-styled-system/core';
+import { motify } from 'moti';
+import type { ComponentProps } from 'react';
+import { View } from 'react-native';
+
+export const Box = createSxComponent(View)();
+export type BoxProps = ComponentProps<typeof Box>;
+
+export const MotiBox = motify(Box)();
+export type MotiBoxProps = ComponentProps<typeof MotiBox>;