@teamturing/react-native-kit 1.1.0 → 1.2.0

package/src/component/Btn/InteractiveToggledIconBtn.tsx

@@ -0,0 +1,129 @@
+import { palette, spacing, Touch } from '@teamturing/react-native-kit';
+import type { Ref } from 'react';
+import { useEffect, forwardRef, useImperativeHandle, useCallback } from 'react';
+import type { ViewStyle } from 'react-native';
+import Animated, {
+  useSharedValue,
+  withTiming,
+  useAnimatedStyle,
+  interpolateColor,
+  withRepeat,
+  withSequence,
+  interpolate,
+  cancelAnimation,
+  Easing,
+  withDelay,
+} from 'react-native-reanimated';
+
+import type { IconName } from '../Icon';
+import AnimatedIcon from '../Icon/AnimatedIcon';
+
+type Variant = 'gray-primary' | 'lightgray-darkgray';
+const ColorByVariant: Record<
+  Variant,
+  {
+    idleColor: string;
+    idleBgColor: string;
+    blinkColor: string;
+    blinkBgColor: string;
+    activeColor: string;
+    activeBgColor: string;
+  }
+> = {
+  'gray-primary': {
+    idleColor: palette.gray900,
+    idleBgColor: palette.gray100,
+    blinkColor: palette.violet500,
+    blinkBgColor: palette.violet50,
+    activeColor: palette.white,
+    activeBgColor: palette.violet500,
+  },
+  'lightgray-darkgray': {
+    idleColor: palette.gray900,
+    idleBgColor: palette.gray100,
+    blinkColor: palette.white,
+    blinkBgColor: palette.gray900,
+    activeColor: palette.white,
+    activeBgColor: palette.gray900,
+  },
+};
+
+export type InteractiveToggledIconBtnRef = {
+  blink: () => void;
+};
+
+type Props = {
+  name: IconName;
+  onPress?: () => void;
+  value?: boolean;
+  variant?: Variant;
+};
+
+const commonStyle: ViewStyle = {
+  width: 48,
+  height: 48,
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: 999,
+};
+Animated.addWhitelistedUIProps({ fill: true });
+export const InteractiveToggledIconBtn = forwardRef(
+  ({ name, value, onPress, variant = 'gray-primary' }: Props, ref: Ref<InteractiveToggledIconBtnRef>) => {
+    const anim = useSharedValue(value ? 1 : 0);
+    const { blinkBgColor, activeBgColor, activeColor, idleColor, blinkColor, idleBgColor } = ColorByVariant[variant];
+
+    useEffect(() => {
+      cancelAnimation(anim);
+      anim.value = withTiming(value ? 1 : 0, { duration: 200 });
+    }, [value, anim]);
+
+    const animStyle = useAnimatedStyle(
+      () => ({
+        backgroundColor: interpolateColor(anim.value, [-1, 0, 1], [blinkBgColor, idleBgColor, activeBgColor]),
+        transform: [{ scale: interpolate(anim.value, [-1, 0, 0.4, 1], [1.2, 1, 0.9, 1]) }],
+      }),
+      [idleBgColor, blinkBgColor, activeBgColor],
+    );
+    const iconAnimStyle = useAnimatedStyle(
+      () => ({
+        color: interpolateColor(anim.value, [-1, 0, 1], [blinkColor, idleColor, activeColor]),
+      }),
+      [idleColor, blinkColor, activeColor],
+    );
+
+    const blink = useCallback(() => {
+      anim.value = withDelay(
+        2000,
+        withRepeat(
+          withSequence(
+            withTiming(-1, { duration: 400, easing: Easing.out(Easing.ease) }),
+            withTiming(0, { duration: 400, easing: Easing.in(Easing.ease) }),
+          ),
+
+          5,
+          true,
+        ),
+      );
+    }, [anim]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        blink,
+      }),
+      [blink],
+    );
+
+    return (
+      <Animated.View style={[commonStyle, animStyle]}>
+        <Touch
+          activeOpacity={1}
+          style={commonStyle}
+          hitSlop={{ top: spacing[1], right: spacing[1], bottom: spacing[1], left: spacing[1] }}
+          onPress={onPress}
+        >
+          <AnimatedIcon name={name} size={20} animatedStyle={iconAnimStyle} />
+        </Touch>
+      </Animated.View>
+    );
+  },
+);

package/src/component/Btn/index.ts

@@ -0,0 +1,10 @@
+import Btn, {
+  type BaseBtnProps as BtnProps,
+  type BaseBtnSize as BtnSize,
+  type BaseBtnVariant as BtnVariant,
+} from './BaseBtn';
+import IconBtn, { type IconBtnProps } from './IconBtn';
+
+export { IconBtn, Btn, type BtnProps, type BtnSize, type BtnVariant, type IconBtnProps };
+export * from './FixedBottomCTABtn';
+export * from './InteractiveToggledIconBtn';

package/src/component/Card.tsx

@@ -0,0 +1,22 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import { useSx } from '@react-native-styled-system/core';
+import React from 'react';
+import { View } from 'react-native';
+
+type Props = {} & SxProps;
+
+const Card = ({ children, ...props }: React.PropsWithChildren<Props>) => {
+  const { getStyle } = useSx(props, {
+    fallback: {
+      bg: 'gray50',
+      borderWidth: 0,
+      borderColor: 'transparent',
+      radius: 20,
+      overflow: 'hidden',
+    },
+  });
+  return <View style={getStyle()}>{children}</View>;
+};
+
+export { Card };
+export type { Props as CardProps };

package/src/component/Carousel.tsx

@@ -0,0 +1,57 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import { useStableCallback, Chip } from '@teamturing/react-native-kit';
+import type { Ref } from 'react';
+import { useState } from 'react';
+import type { TCarouselProps as BaseCarouselProps, ICarouselInstance } from 'react-native-reanimated-carousel';
+import BaseCarousel from 'react-native-reanimated-carousel';
+
+import { Box } from './Box';
+import { type PaginatorProps, Paginator } from './Paginator';
+
+type Props<T> = {
+  enablePaginator?: boolean;
+  showPageIndexPerMaxPageIndex?: boolean;
+  onProgressChange?: (index: number) => void;
+  sx?: SxProps;
+  paginator?: Partial<PaginatorProps>;
+  innerRef?: Ref<ICarouselInstance>;
+} & Omit<BaseCarouselProps<T>, 'onProgressChange' | 'style'>;
+
+const Carousel = <T,>({
+  enablePaginator = false,
+  showPageIndexPerMaxPageIndex = false,
+  data,
+  sx,
+  onProgressChange,
+  paginator,
+  innerRef,
+  ...props
+}: Props<T>) => {
+  const [pageIndex, setPageIndex] = useState<number>(0);
+
+  const handleProgressChange = useStableCallback((_, indexFloat: number) => {
+    let result = Math.round(indexFloat);
+    if (result >= data.length) {
+      result = 0;
+    }
+    if (pageIndex !== result) {
+      setPageIndex(result);
+      onProgressChange?.(result);
+    }
+  });
+
+  return (
+    <Box sx={sx}>
+      <BaseCarousel<T> ref={innerRef} data={data} onProgressChange={handleProgressChange} {...(props as any)} />
+      {enablePaginator ? (
+        <Paginator value={pageIndex} maxValue={data.length} dotSize={10} dotColor={'white'} mt={4} {...paginator} />
+      ) : null}
+      {showPageIndexPerMaxPageIndex ? (
+        <Chip variant={'dim'} size={'l'} text={`${pageIndex + 1}/${data.length}`} mt={4} />
+      ) : null}
+    </Box>
+  );
+};
+
+export { Carousel };
+export type { Props as CarouselProps };

package/src/component/Chip.tsx

@@ -0,0 +1,200 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import { px, palette, Txt, gradient, type TextConfig, spacing, GradientCollection } from '@teamturing/react-native-kit';
+import { transparentize } from 'polished';
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import type { BoxProps } from './Box';
+import { Box } from './Box';
+import type { GradientCollecitonProps } from './GradientCollection';
+import type { IconName, IconProps } from './Icon';
+import { Icon } from './Icon';
+
+export type ChipSize = 'l' | 'm' | 's';
+export type ChipVariant =
+  | 'primary'
+  | 'secondary'
+  | 'outlined'
+  | 'gray'
+  | 'red'
+  | 'yellow'
+  | 'green'
+  | 'gradient1'
+  | 'dim'
+  | 'outlined-gray300'
+  | 'blue'
+  | 'blue50';
+
+const commonStyle: SxProps = {
+  alignSelf: 'center',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: 9999,
+  overflow: 'hidden',
+};
+const styleBySize: Record<ChipSize, SxProps> = {
+  l: {
+    px: 2,
+    h: px(29),
+  },
+  m: {
+    px: 2,
+    h: px(26),
+  },
+  s: {
+    px: 2,
+    h: px(19),
+  },
+};
+const styleByVariant: Record<ChipVariant, SxProps> = {
+  'primary': {
+    backgroundColor: 'violet500',
+  },
+  'secondary': {
+    backgroundColor: 'violet50',
+  },
+  'outlined': {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: 'violet500',
+  },
+  'gray': {
+    backgroundColor: 'gray100',
+  },
+  'red': {
+    backgroundColor: 'red50',
+  },
+  'yellow': {
+    backgroundColor: 'yellow50',
+  },
+  'green': {
+    backgroundColor: 'green50',
+  },
+  'gradient1': {},
+  'dim': {
+    backgroundColor: transparentize(0.4, palette.black),
+  },
+  'outlined-gray300': {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: 'gray300',
+  },
+  'blue': {
+    backgroundColor: 'blue500',
+  },
+  'blue50': {
+    backgroundColor: 'blue50',
+  },
+};
+const gradientCollectionPropsByVarient: Record<ChipVariant, GradientCollecitonProps | undefined> = {
+  'primary': undefined,
+  'secondary': undefined,
+  'outlined': undefined,
+  'gray': undefined,
+  'red': undefined,
+  'yellow': undefined,
+  'green': undefined,
+  'gradient1': {
+    style: [StyleSheet.absoluteFill],
+    ...gradient.gradient1,
+  },
+  'dim': undefined,
+  'outlined-gray300': undefined,
+  'blue': undefined,
+  'blue50': undefined,
+};
+const txtBySize = {
+  l: Txt.S.Medium,
+  m: Txt.XS.Medium,
+  s: Txt.XXS.Medium,
+};
+const txtConfigByVariant: Record<ChipVariant, Partial<TextConfig>> = {
+  'primary': {
+    color: palette.white,
+  },
+  'secondary': {
+    color: palette.violet500,
+  },
+  'outlined': {
+    color: palette.violet500,
+  },
+  'gray': {
+    color: palette.gray700,
+  },
+  'red': {
+    color: palette.red500,
+  },
+  'yellow': {
+    color: palette.yellow500,
+  },
+  'green': {
+    color: palette.green500,
+  },
+  'gradient1': { color: palette.white },
+  'dim': { color: palette.white },
+  'outlined-gray300': {
+    color: palette.gray700,
+  },
+  'blue': { color: palette.white },
+  'blue50': {
+    color: palette.blue500,
+  },
+};
+const iconSpacingBySize: Record<ChipSize, keyof typeof spacing> = {
+  l: 1,
+  m: 0.5,
+  s: 0,
+};
+
+type Props = {
+  size?: ChipSize;
+  variant?: ChipVariant;
+  text?: string;
+  leadingIcon?: IconName;
+  renderLeadingIcon?: (iconProps: IconProps) => React.ReactNode;
+  trailingIcon?: IconName;
+  renderTrailingIcon?: (iconProps: IconProps) => React.ReactNode;
+  pointerEvents?: BoxProps['pointerEvents'];
+} & SxProps;
+
+const Chip = ({
+  size = 'm',
+  variant = 'primary',
+  text,
+  leadingIcon,
+  renderLeadingIcon = (iconProps) => <Icon {...iconProps} />,
+  trailingIcon,
+  renderTrailingIcon = (iconProps) => <Icon {...iconProps} />,
+  pointerEvents,
+  ...sxProps
+}: Props) => {
+  return (
+    <Box
+      sx={{ ...commonStyle, ...sxProps, ...styleBySize[size], ...styleByVariant[variant] }}
+      pointerEvents={pointerEvents}
+    >
+      {variant === 'gradient1' ? <GradientCollection {...gradientCollectionPropsByVarient[variant]!} /> : null}
+      {leadingIcon
+        ? renderLeadingIcon({
+            name: leadingIcon,
+            size: 16,
+            mr: text ? iconSpacingBySize[size] : 0,
+            fill: txtConfigByVariant[variant].color,
+          })
+        : null}
+      {txtBySize[size].render(text, txtConfigByVariant[variant])}
+      {trailingIcon
+        ? renderTrailingIcon({
+            name: trailingIcon,
+            size: 16,
+            ml: text ? iconSpacingBySize[size] : 0,
+            fill: txtConfigByVariant[variant].color,
+          })
+        : null}
+    </Box>
+  );
+};
+
+export { Chip };
+export type { Props as ChipProps };

package/src/component/CloneWithGlobalPositionView.tsx

@@ -0,0 +1,49 @@
+import { useTimeoutHandler, is } from '@teamturing/react-native-kit';
+import React, { useRef } from 'react';
+import type { ViewProps } from 'react-native';
+import { View } from 'react-native';
+
+type GlobalLayoutParams = { x: number; y: number; width: number; height: number };
+type Props = {
+  onLayoutGlobal?: (params: GlobalLayoutParams) => void;
+  onLayoutGlobalWithClonedChildren?: (params: GlobalLayoutParams & { element: React.ReactElement }) => void;
+  measureDelay?: number;
+  cloneChildren?: React.ReactElement;
+} & Omit<ViewProps, 'onLayout' | 'collapsible'>;
+const CloneWithGlobalPositionView = ({
+  onLayoutGlobal,
+  onLayoutGlobalWithClonedChildren,
+  measureDelay = 500,
+  children,
+  cloneChildren,
+  ...rest
+}: Props) => {
+  const ref = useRef<View>(null);
+  const timeoutHandler = useTimeoutHandler();
+  return (
+    <View
+      {...rest}
+      collapsable={false}
+      ref={ref}
+      onLayout={
+        !is.function(onLayoutGlobal) && !is.function(onLayoutGlobalWithClonedChildren)
+          ? undefined
+          : () => {
+              timeoutHandler.current = setTimeout(() => {
+                ref.current?.measure((_, __, width, height, pageX, pageY) => {
+                  onLayoutGlobal?.({ height, width, x: pageX, y: pageY });
+                  if (is.function(onLayoutGlobalWithClonedChildren)) {
+                    const cloned = cloneChildren || React.cloneElement(<>{children}</>);
+                    onLayoutGlobalWithClonedChildren?.({ height, width, x: pageX, y: pageY, element: cloned });
+                  }
+                });
+              }, measureDelay);
+            }
+      }
+    >
+      {children}
+    </View>
+  );
+};
+
+export { CloneWithGlobalPositionView };

package/src/component/DialogHandler.tsx

@@ -0,0 +1,26 @@
+import {
+  useDialogHandler,
+  type UseDialogWithParamsHandler,
+  useDialogWithParamsHandler,
+} from '@teamturing/react-native-kit';
+import type React from 'react';
+
+export const DialogHandler = ({
+  children,
+}: {
+  children: (params: ReturnType<typeof useDialogHandler>) => React.ReactElement;
+}) => {
+  const { dialogRef, open, close } = useDialogHandler();
+
+  return children({ dialogRef, open, close });
+};
+
+export const DialogWithParamsHandler = <Params,>({
+  children,
+}: {
+  children: (params: UseDialogWithParamsHandler<Params>) => React.ReactElement;
+}) => {
+  const { dialogRef, open, close } = useDialogWithParamsHandler<Params>();
+
+  return children({ dialogRef, open, close });
+};

package/src/component/Dot.tsx

@@ -0,0 +1,40 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import { useSx } from '@react-native-styled-system/core';
+import { type PaletteColor, palette } from '@teamturing/react-native-kit';
+import { View } from 'react-native';
+
+import { Box } from './Box';
+
+type Props = {
+  sx?: SxProps;
+  color?: PaletteColor;
+  borderColor?: PaletteColor;
+  size?: number;
+  borderWidth?: number;
+  testID?: string;
+};
+const Dot = ({ color = 'green500', borderColor = 'white', size = 12, borderWidth = 0, testID, sx }: Props) => {
+  const { getStyle } = useSx(sx);
+  return (
+    <Box
+      testID={testID}
+      style={[
+        {
+          backgroundColor: palette[borderColor],
+          padding: borderWidth,
+          width: size,
+          height: size,
+          borderRadius: 999,
+          justifyContent: 'center',
+          alignItems: 'center',
+        },
+        getStyle(),
+      ]}
+      pointerEvents={'none'}
+    >
+      <View style={{ backgroundColor: palette[color], width: '100%', height: '100%', borderRadius: 999 }} />
+    </Box>
+  );
+};
+
+export { Dot };

package/src/component/DotLoadingIndicator.tsx

@@ -0,0 +1,54 @@
+import { generateArray } from '@mj-studio/js-util';
+import { type Spacing, palette, useMount } from '@teamturing/react-native-kit';
+import { useRef } from 'react';
+import type { ColorValue } from 'react-native';
+import { Animated, Easing } from 'react-native';
+
+import { RowCenter } from './Layout/Row';
+
+type Props = {
+  size?: number;
+  color?: ColorValue;
+  gap?: Spacing;
+  dotCount?: number;
+  duration?: number;
+  cycleDurationRatio?: number;
+};
+
+const DotLoadingIndicator = ({
+  size = 4,
+  color = palette.black,
+  gap = 2,
+  dotCount = 3,
+  duration = 1000,
+  /// 0 ~ 1
+  cycleDurationRatio = 0.5,
+}: Props) => {
+  const anim = useRef(new Animated.Value(0)).current;
+  const styles = generateArray(dotCount).map((i) => {
+    const pivot = i * ((1 / dotCount) * cycleDurationRatio);
+    return {
+      opacity: Animated.add(Animated.modulo(Animated.add(anim, pivot), 1), 0.3),
+    };
+  });
+
+  useMount(() => {
+    Animated.loop(Animated.timing(anim, { toValue: 1, easing: Easing.linear, useNativeDriver: true, duration }), {
+      iterations: -1,
+      resetBeforeIteration: false,
+    }).start();
+  });
+
+  return (
+    <RowCenter gapX={gap}>
+      {generateArray(dotCount).map((i) => (
+        <Animated.View
+          key={i}
+          style={[{ width: size, height: size, borderRadius: 999, backgroundColor: color }, styles[dotCount - 1 - i]]}
+        />
+      ))}
+    </RowCenter>
+  );
+};
+
+export { DotLoadingIndicator };

package/src/component/EmptyState.tsx

@@ -0,0 +1,70 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import { useSx } from '@react-native-styled-system/core';
+import { spacing, Txt, palette, is } from '@teamturing/react-native-kit';
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { View } from 'react-native';
+
+import type { BaseBtnProps } from './Btn/BaseBtn';
+import Btn from './Btn/BaseBtn';
+import type { IconName, IconProps } from './Icon';
+import { Icon } from './Icon';
+
+type Props = {
+  iconName?: IconName;
+  iconFill?: IconProps['fill'];
+  title: string;
+  renderTitle?: (title: string) => React.ReactNode;
+  description?: string;
+  renderDescription?: (description: string) => React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  action?: {
+    text: BaseBtnProps['text'];
+    onPress: BaseBtnProps['onPress'];
+    loading?: boolean;
+  };
+  testID?: string;
+} & SxProps;
+
+const EmptyState = (props: Props) => {
+  const {
+    iconName = 'exclamation_point_in_circle',
+    iconFill,
+    title,
+    renderTitle = (title) => Txt.L.Bold.render(title, { align: 'center' }),
+    description,
+    renderDescription = (description) => Txt.S.Medium.Gray500.render(description, { align: 'center' }),
+    action,
+    testID = 'EmptyState',
+  } = props;
+  const { getStyle } = useSx(props);
+  return (
+    <View
+      testID={testID}
+      style={[{ alignItems: 'center', justifyContent: 'center' }, getStyle()]}
+      pointerEvents={'box-none'}
+    >
+      <Icon name={iconName} fill={iconFill || palette.gray300} size={48} />
+      <View style={{ marginTop: spacing[2] }} pointerEvents={'none'}>
+        {renderTitle(title)}
+      </View>
+      {is.string(description) ? (
+        <View style={{ marginTop: spacing[2] }} pointerEvents={'none'}>
+          {renderDescription(description)}
+        </View>
+      ) : null}
+      {action ? (
+        <Btn
+          testID={`${testID}/action`}
+          layout={{ marginTop: spacing[6] }}
+          {...action}
+          size={'m'}
+          variant={'primary'}
+        />
+      ) : null}
+    </View>
+  );
+};
+
+export type { Props as EmptyStateProps };
+export { EmptyState };