@teamturing/react-native-kit 1.1.0 → 1.2.0

package/src/component/Switch.tsx

@@ -0,0 +1,86 @@
+import { palette } from '@teamturing/react-native-kit';
+import { useEffect, useRef } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { Animated, TouchableOpacity } from 'react-native';
+
+const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity);
+
+type SwitchProps = {
+  testID?: string;
+  value: boolean;
+  onValueChanged?: (value: boolean) => void;
+  style?: StyleProp<ViewStyle>;
+  disabled?: boolean;
+};
+const Switch = ({ value, onValueChanged, style, testID, disabled }: SwitchProps) => {
+  const animValue = useRef(new Animated.Value(value ? 1 : 0)).current;
+  useEffect(() => {
+    Animated.spring(animValue, { useNativeDriver: false, toValue: value ? 1 : 0 }).start();
+
+    return () => {
+      animValue.stopAnimation();
+    };
+  }, [value, animValue]);
+
+  const cursorTranslationX = animValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [2, 22],
+  });
+  const backgroundColor = animValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [palette.gray200, palette.violet500],
+  });
+
+  const { containerWidth, containerHeight, containerRadius, thumbRadius } = {
+    containerWidth: 51,
+    containerHeight: 31,
+    containerRadius: 9999,
+    thumbRadius: 27 / 2,
+  };
+
+  return (
+    <AnimatedTouchableOpacity
+      {...{ disabled, testID }}
+      accessibilityLabel={`switch ${value ? 'on' : 'off'}`}
+      onPress={() => onValueChanged?.(!value)}
+      activeOpacity={0.8}
+      style={[
+        {
+          width: containerWidth,
+          height: containerHeight,
+          backgroundColor,
+          borderRadius: containerRadius,
+          justifyContent: 'center',
+        },
+        disabled && value
+          ? { backgroundColor: palette.violet100 }
+          : disabled && !value
+          ? { backgroundColor: palette.gray100 }
+          : null,
+        style,
+      ]}
+      hitSlop={{
+        left: 12,
+        top: 12,
+        bottom: 12,
+        right: 12,
+      }}
+    >
+      <Animated.View
+        pointerEvents={'none'}
+        style={[
+          {
+            width: thumbRadius * 2,
+            height: thumbRadius * 2,
+            backgroundColor: palette.white,
+            borderRadius: thumbRadius,
+          },
+          { transform: [{ translateX: cursorTranslationX }] },
+        ]}
+      />
+    </AnimatedTouchableOpacity>
+  );
+};
+
+export { Switch };
+export type { SwitchProps };

package/src/component/Tab/BaseTab.tsx

@@ -0,0 +1,58 @@
+import { Txt } from '@teamturing/react-native-kit';
+import React from 'react';
+import { View, Pressable } from 'react-native';
+
+type Props = {
+  tabs: string[];
+  selectedIndex: number;
+  onSelected?: (index: number) => void;
+  onReselected?: (index: number) => void;
+
+  renderContainer?: (children: React.ReactElement) => React.ReactElement;
+  renderTab?: (arg: { text: string; isSelected: boolean; index: number }) => React.ReactElement;
+  testID?: string;
+
+  stretchItemWidth?: boolean;
+};
+export type BaseTabPropsWithoutRenderProps = Omit<
+  Props,
+  'renderContainer' | 'renderSelectedTab' | 'renderUnselectedTab' | 'stretchItemWidth'
+>;
+const BaseTab = ({
+  selectedIndex,
+  tabs,
+  onSelected,
+  onReselected,
+  renderContainer = (children) => <View style={{ flexDirection: 'row' }}>{children}</View>,
+  renderTab = ({ text, isSelected }) => (isSelected ? Txt.M.Medium.render(text) : Txt.M.Gray500.render(text)),
+  testID = 'BaseTab',
+  stretchItemWidth = true,
+}: Props) => {
+  const tabElements = (
+    <>
+      {tabs.map((tab, i) => (
+        <Pressable
+          testID={`${testID}/${tab}`}
+          onPress={() => {
+            if (i !== selectedIndex) {
+              onSelected?.(i);
+            } else {
+              onReselected?.(i);
+            }
+          }}
+          key={i}
+          style={[
+            stretchItemWidth ? { flex: 1 } : {},
+            { alignItems: 'center', justifyContent: 'center', height: 'auto' },
+          ]}
+        >
+          {renderTab({ text: tab, isSelected: i === selectedIndex, index: i })}
+        </Pressable>
+      ))}
+    </>
+  );
+
+  return renderContainer(tabElements);
+};
+
+export { BaseTab };

package/src/component/Tab/IndicatorTab.tsx

@@ -0,0 +1,53 @@
+import { palette, Txt, spacing, Badge } from '@teamturing/react-native-kit';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { View } from 'react-native';
+
+import { type BaseTabPropsWithoutRenderProps, BaseTab } from './BaseTab';
+
+type Props = {
+  redDotIndice?: number[];
+  style?: StyleProp<ViewStyle>;
+} & BaseTabPropsWithoutRenderProps;
+const IndicatorTab = ({ redDotIndice, style, testID = 'IndicatorTab', ...rest }: Props) => {
+  return (
+    <BaseTab
+      renderContainer={(children) => (
+        <View style={[{ borderBottomWidth: 1, borderBottomColor: palette.gray200, flexDirection: 'row' }, style]}>
+          {children}
+        </View>
+      )}
+      renderTab={({ isSelected, text, index }) => {
+        const textElement = isSelected ? Txt.M.Medium.render(text) : Txt.M.Gray500.render(text);
+        return (
+          <View
+            style={{
+              borderBottomWidth: 2,
+              borderBottomColor: isSelected ? palette.violet500 : palette.transparent,
+              alignItems: 'center',
+              width: '100%',
+              justifyContent: 'center',
+              paddingVertical: spacing[3],
+            }}
+          >
+            {redDotIndice?.includes(index) ? wrapWithRedDot() : textElement}
+          </View>
+        );
+
+        function wrapWithRedDot() {
+          return (
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <View style={{ width: 12 }} />
+              {textElement}
+              <Badge color={palette.red500} size={6} layout={{ top: -8 }} />
+            </View>
+          );
+        }
+      }}
+      testID={testID}
+      stretchItemWidth
+      {...rest}
+    />
+  );
+};
+
+export { IndicatorTab };

package/src/component/Tab/RoundTab.tsx

@@ -0,0 +1,164 @@
+import { Txt, FontWeight, spacing, palette, is, Dot, px } from '@teamturing/react-native-kit';
+import type { ColorValue, ViewStyle } from 'react-native';
+
+import { Box } from '../Box';
+import type { IconName, IconProps } from '../Icon';
+import { Icon } from '../Icon';
+import { Row, RowCenter } from '../Layout';
+
+import { type BaseTabPropsWithoutRenderProps, BaseTab } from './BaseTab';
+
+type RoundTabSize = 'l' | 'm' | 's';
+type Variant = 'default' | 'plain' | 'dim';
+const TextComponentBySize: Record<RoundTabSize, Txt> = {
+  l: Txt.M,
+  m: Txt.S,
+  s: Txt.XS,
+};
+const StyleBySize: Record<
+  RoundTabSize,
+  { selectedFontWeight: FontWeight; iconSize: number; paddingHorizontal: number }
+> = {
+  l: {
+    selectedFontWeight: FontWeight.Bold,
+    iconSize: 20,
+    paddingHorizontal: spacing[4],
+  },
+  m: {
+    selectedFontWeight: FontWeight.Medium,
+    iconSize: 20,
+    paddingHorizontal: spacing[4],
+  },
+  s: {
+    selectedFontWeight: FontWeight.Medium,
+    iconSize: 16,
+    paddingHorizontal: spacing[3],
+  },
+};
+const StyleByVariant: Record<Variant, { backgroundColor: ColorValue; padding: number; gap: number }> = {
+  default: {
+    backgroundColor: palette.gray100,
+    padding: spacing[1],
+    gap: spacing[0],
+  },
+  plain: {
+    backgroundColor: palette.white,
+    padding: 0,
+    gap: spacing[3],
+  },
+  dim: {
+    backgroundColor: palette.transparent,
+    padding: 0,
+    gap: spacing[3],
+  },
+};
+const ContextualStyleByVariant: ({ isSelected }: { isSelected: boolean }) => Record<
+  Variant,
+  {
+    tabItemStyle: ViewStyle;
+    iconProps: Partial<Omit<IconProps, 'name'>>;
+    textColor: ColorValue;
+  }
+> = ({ isSelected }) => ({
+  default: {
+    tabItemStyle: {
+      backgroundColor: isSelected ? palette.white : palette.transparent,
+
+      borderWidth: 1,
+      borderColor: isSelected ? palette.gray200 : palette.transparent,
+    },
+    iconProps: {
+      fill: isSelected ? palette.gray900 : palette.gray300,
+    },
+    textColor: isSelected ? palette.gray900 : palette.gray500,
+  },
+  plain: {
+    tabItemStyle: {
+      backgroundColor: isSelected ? palette.gray100 : palette.transparent,
+    },
+    iconProps: {
+      fill: isSelected ? palette.gray900 : palette.gray300,
+    },
+    textColor: isSelected ? palette.gray900 : palette.gray500,
+  },
+  dim: {
+    tabItemStyle: {
+      backgroundColor: isSelected ? palette.gray900 : palette.transparent,
+    },
+    iconProps: {
+      fill: palette.gray300,
+    },
+    textColor: isSelected ? palette.white : palette.gray300,
+  },
+});
+
+type Props = {
+  size?: RoundTabSize;
+  redDotIndice?: number[];
+  variant?: Variant;
+  leadingIcons?: ({ active: IconName; inActive: IconName } | null)[];
+} & BaseTabPropsWithoutRenderProps;
+const RoundTab = ({ size = 'm', redDotIndice = [], variant = 'default', leadingIcons, ...rest }: Props) => {
+  const { backgroundColor, padding, gap } = StyleByVariant[variant];
+  return (
+    <BaseTab
+      renderContainer={(children) => (
+        <Row
+          style={{
+            backgroundColor: backgroundColor,
+            borderRadius: 9999,
+            padding,
+            gap,
+          }}
+        >
+          {children}
+        </Row>
+      )}
+      renderTab={({ isSelected, text, index }) => {
+        const { iconProps, tabItemStyle, textColor } = ContextualStyleByVariant({ isSelected })[variant];
+        const { iconSize, selectedFontWeight, paddingHorizontal } = StyleBySize[size];
+        const textElement = isSelected
+          ? TextComponentBySize[size].render(text, { weight: selectedFontWeight, color: textColor })
+          : TextComponentBySize[size].render(text, { color: textColor });
+
+        const activeIcon =
+          leadingIcons && leadingIcons.length > index && is.plainObject(leadingIcons[index])
+            ? leadingIcons[index]!.active
+            : null;
+        const inActiveIcon =
+          leadingIcons && leadingIcons.length > index && is.plainObject(leadingIcons[index])
+            ? leadingIcons[index]!.inActive
+            : null;
+
+        return (
+          <Box
+            center
+            style={[
+              {
+                borderRadius: 9999,
+                paddingVertical: spacing[2],
+                paddingHorizontal: paddingHorizontal,
+                width: '100%',
+              },
+              tabItemStyle,
+            ]}
+          >
+            <RowCenter style={{ gap: spacing[1] }}>
+              {activeIcon && inActiveIcon ? (
+                <Icon size={iconSize} {...iconProps} name={isSelected ? activeIcon : inActiveIcon} />
+              ) : null}
+              {textElement}
+              {redDotIndice?.includes(index) ? (
+                <Dot color={'red500'} size={6} sx={{ position: 'absolute', top: px(-2), right: px(-8) }} />
+              ) : null}
+            </RowCenter>
+          </Box>
+        );
+      }}
+      stretchItemWidth={variant === 'default'}
+      {...rest}
+    />
+  );
+};
+
+export { RoundTab };

package/src/component/Tab/index.ts

@@ -0,0 +1,3 @@
+export * from './BaseTab';
+export * from './RoundTab';
+export * from './IndicatorTab';

package/src/component/TabPager.tsx

@@ -0,0 +1,54 @@
+import type { ReactElement } from 'react';
+import { useEffect, useState } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+
+type Props = {
+  tabElements: ReactElement[];
+  lazyMount?: boolean;
+  index: number;
+  style?: StyleProp<ViewStyle>;
+  activePageStyle?: StyleProp<ViewStyle>;
+  detachOnInActive?: boolean;
+  testID?: string;
+};
+const TabPager = ({
+  tabElements,
+  lazyMount = true,
+  index,
+  style,
+  detachOnInActive = false,
+  activePageStyle,
+  testID = 'TapPager',
+}: Props) => {
+  const size = tabElements.length;
+
+  const [mountedIndice, setMountedIndice] = useState(lazyMount ? [index] : [...new Array(size).keys()]);
+
+  useEffect(() => {
+    if (!mountedIndice.includes(index)) {
+      setMountedIndice((indice) => [...indice, index]);
+    }
+  }, [index, mountedIndice]);
+
+  return (
+    <View style={style} testID={testID}>
+      {tabElements.map((element, i) => {
+        const isActive = index === i;
+
+        return detachOnInActive && index !== i ? null : (
+          <View
+            testID={`${testID}/tab/${index}`}
+            key={i}
+            style={[StyleSheet.absoluteFill, { opacity: isActive ? 1 : 0 }, isActive ? activePageStyle : null]}
+            pointerEvents={isActive ? 'auto' : 'none'}
+          >
+            {mountedIndice.includes(i) ? element : null}
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+export { TabPager };

package/src/component/Tag.tsx

@@ -0,0 +1,193 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import { useSx } from '@react-native-styled-system/core';
+import {
+  Txt,
+  type TextConfig,
+  palette,
+  spacing,
+  gradient,
+  type LayoutStyle,
+  Touch,
+} from '@teamturing/react-native-kit';
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+
+import { type GradientCollecitonProps, GradientCollection } from './GradientCollection';
+import { type IconName, type IconProps, Icon } from './Icon';
+
+export type TagSize = 'm' | 's';
+export type TagVariant = 'gray-900' | 'violet-500' | 'outlined' | 'gradient1' | 'plain';
+
+const commonStyle: StyleProp<ViewStyle> = {
+  alignSelf: 'flex-start',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: 9999,
+  overflow: 'hidden',
+
+  backgroundColor: palette.transparent,
+  borderWidth: 1,
+  borderColor: palette.gray200,
+};
+const stylesByFullWidth: Record<'true' | 'false', ViewStyle> = {
+  true: { alignSelf: 'stretch' },
+  false: {},
+};
+const styleBySize: Record<TagSize, StyleProp<ViewStyle>> = {
+  m: {
+    paddingVertical: spacing['2'],
+    minHeight: 38,
+    paddingHorizontal: spacing['3'],
+  },
+  s: {
+    paddingVertical: spacing['2'],
+    minHeight: 34,
+    paddingHorizontal: spacing['3'],
+  },
+};
+const additionalStyleByVariant: Record<TagVariant, StyleProp<ViewStyle>> = {
+  'gray-900': {},
+  'violet-500': {},
+  'outlined': {},
+  'gradient1': {},
+  'plain': {
+    borderColor: palette.transparent,
+  },
+};
+
+const selectedStyleByVariant: Record<TagVariant, StyleProp<ViewStyle>> = {
+  'gray-900': {
+    backgroundColor: palette.gray900,
+    borderColor: palette.gray900,
+  },
+  'violet-500': {
+    backgroundColor: palette.violet50,
+    borderColor: palette.violet50,
+  },
+  'outlined': {
+    borderColor: palette.violet500,
+  },
+  'gradient1': {},
+  'plain': {},
+};
+const selectedGradientCollectionPropsByVarient: Record<TagVariant, GradientCollecitonProps | undefined> = {
+  'gray-900': undefined,
+  'violet-500': undefined,
+  'outlined': undefined,
+  'gradient1': {
+    style: [StyleSheet.absoluteFill],
+    ...gradient.gradient1,
+  },
+  'plain': undefined,
+};
+const txtBySize = {
+  m: Txt.S.Medium,
+  s: Txt.XS.Medium,
+};
+const txtConfigByVariant: Record<TagVariant, Partial<TextConfig>> = {
+  'gray-900': {
+    color: palette.gray500,
+  },
+  'violet-500': {
+    color: palette.gray500,
+  },
+  'outlined': {
+    color: palette.gray500,
+  },
+  'gradient1': {
+    color: palette.gray500,
+  },
+  'plain': {
+    color: palette.gray500,
+  },
+};
+const selectedTxtConfigByVariant: Record<TagVariant, Partial<TextConfig>> = {
+  'gray-900': {
+    color: palette.white,
+  },
+  'violet-500': {
+    color: palette.violet500,
+  },
+  'outlined': {
+    color: palette.violet500,
+  },
+  'gradient1': {
+    color: palette.white,
+  },
+  'plain': {
+    color: palette.gray900,
+  },
+};
+
+export type TagProps = {
+  size?: TagSize;
+  variant?: TagVariant;
+  text?: string;
+  leadingIcon?: IconName;
+  renderLeadingIcon?: (iconProps: IconProps) => React.ReactNode;
+  trailingIcon?: IconName;
+  renderTrailingIcon?: (iconProps: IconProps) => React.ReactNode;
+  value?: boolean;
+  onPress?: () => void;
+  layout?: StyleProp<LayoutStyle>;
+  fullWidth?: boolean;
+  testID?: string;
+} & SxProps;
+
+const Tag = (props: React.PropsWithChildren<TagProps>) => {
+  const { getStyle, filteredProps } = useSx(props);
+  const {
+    size = 'm',
+    variant = 'gray-900',
+    text,
+    leadingIcon,
+    renderLeadingIcon = (iconProps) => <Icon {...iconProps} />,
+    trailingIcon,
+    renderTrailingIcon = (iconProps) => <Icon {...iconProps} />,
+    value = false,
+    onPress,
+    layout,
+    fullWidth,
+    testID,
+  } = filteredProps;
+  return (
+    <Touch
+      testID={testID}
+      style={[
+        getStyle(),
+        commonStyle,
+        additionalStyleByVariant[variant],
+        stylesByFullWidth[fullWidth ? 'true' : 'false'],
+        styleBySize[size],
+        value ? selectedStyleByVariant[variant] : undefined,
+        layout,
+      ]}
+      onPress={onPress}
+    >
+      {variant === 'gradient1' && value === true ? (
+        <GradientCollection {...selectedGradientCollectionPropsByVarient[variant]!} />
+      ) : null}
+      {leadingIcon
+        ? renderLeadingIcon({
+            name: leadingIcon,
+            size: 16,
+            mr: 1,
+            fill: (value ? selectedTxtConfigByVariant[variant] : txtConfigByVariant[variant]).color as string,
+          })
+        : null}
+      {txtBySize[size].render(text, value ? selectedTxtConfigByVariant[variant] : txtConfigByVariant[variant])}
+      {trailingIcon
+        ? renderTrailingIcon({
+            name: trailingIcon,
+            size: 16,
+            ml: 1,
+            fill: (value ? selectedTxtConfigByVariant[variant] : txtConfigByVariant[variant]).color as string,
+          })
+        : null}
+    </Touch>
+  );
+};
+
+export { Tag };

package/src/component/TagHorizontalList.tsx

@@ -0,0 +1,92 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import { useSx } from '@react-native-styled-system/core';
+import { type TagProps, Tag, useTimeoutHandlers, spacing } from '@teamturing/react-native-kit';
+import type { Ref } from 'react';
+import { useRef, forwardRef, useImperativeHandle, useCallback } from 'react';
+import type { ScrollView } from 'react-native';
+import { View } from 'react-native';
+
+import is from '../util/is';
+
+import { useDynamicLayout } from './Layout/Layout/LayoutProvider';
+import { RowCenter } from './Layout/Row';
+import { StyledScrollView } from './StyledScrollView';
+
+type Props = {
+  tags: (TagProps & { key: string | number })[];
+  contentContainerSx?: SxProps;
+  autoScrollToCenter?: boolean;
+} & SxProps;
+export type TagHorizontalListRef = {
+  scrollTo: (params: { key: string | number }) => void;
+};
+const _TagHorizontalList = (props: Props, ref: Ref<TagHorizontalListRef>) => {
+  const { tags, autoScrollToCenter = true } = props;
+  const { getStyle } = useSx(props, { fallback: { flexGrow: 0 } });
+  const { screenWidth } = useDynamicLayout();
+  const scrollView = useRef<ScrollView>(null);
+  const tagCenterXOffset = useRef<Record<string | number, number>>({});
+
+  const scrollToKey = useCallback(({ key }: { key: string | number }) => {
+    if (key in tagCenterXOffset.current && is.number(tagCenterXOffset.current[key])) {
+      scrollView.current?.scrollTo({ x: tagCenterXOffset.current[key], animated: true });
+    }
+  }, []);
+  const initialScrollKey = useRef<string | number>(-1);
+  const { clearTimerAtUnmount, clearAllTimers: clearAllTimers } = useTimeoutHandlers();
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      scrollTo: scrollToKey,
+    }),
+    [scrollToKey],
+  );
+  return (
+    <StyledScrollView
+      ref={scrollView}
+      horizontal
+      style={getStyle()}
+      contentContainerSx={props.contentContainerSx}
+      showsHorizontalScrollIndicator={false}
+    >
+      <RowCenter gapX={2}>
+        {tags.map((tag, i) => {
+          if (autoScrollToCenter && tag.value && initialScrollKey.current === -1) {
+            initialScrollKey.current = tag.key;
+            clearTimerAtUnmount(setTimeout(() => scrollToKey({ key: tag.key }), 500));
+          }
+          return (
+            <View
+              key={tag.key}
+              onLayout={({
+                nativeEvent: {
+                  layout: { x, width },
+                },
+              }) => {
+                tagCenterXOffset.current[tag.key] = Math.max(0, x - (screenWidth - width) / 2 + spacing[i ? 1 : 0]);
+              }}
+            >
+              <Tag
+                variant={'gray-900'}
+                size={'m'}
+                {...tag}
+                onPress={
+                  autoScrollToCenter
+                    ? () => {
+                        clearAllTimers();
+                        scrollToKey({ key: tag.key });
+                        tag.onPress?.();
+                      }
+                    : tag.onPress
+                }
+              />
+            </View>
+          );
+        })}
+      </RowCenter>
+    </StyledScrollView>
+  );
+};
+
+export const TagHorizontalList = forwardRef(_TagHorizontalList);