@teamturing/react-native-kit 0.1.0 → 1.2.0

package/src/component/FloatingRoundChip.tsx

@@ -0,0 +1,52 @@
+import { palette, spacing } from '@teamturing/react-native-kit';
+import type { ReactElement } from 'react';
+import type { ColorValue, ViewStyle } from 'react-native';
+
+import { type IconName, Icon } from './Icon';
+import { GapW } from './Layout/Gap';
+import { RowCenter } from './Layout/Row';
+
+type Props = {
+  highlightColor?: ColorValue;
+  renderContent: ReactElement;
+  leadingIcon?: IconName;
+  trailingIcon?: IconName;
+  style?: ViewStyle;
+};
+export const FloatingRoundChip = ({
+  highlightColor = palette.violet500,
+  renderContent,
+  leadingIcon,
+  style,
+  trailingIcon,
+}: Props) => {
+  return (
+    <RowCenter
+      style={[
+        {
+          borderWidth: 2,
+          borderColor: highlightColor,
+          borderRadius: 999,
+          paddingHorizontal: spacing[3],
+          paddingVertical: spacing[2],
+          backgroundColor: palette.white,
+        },
+        style,
+      ]}
+    >
+      {leadingIcon ? (
+        <>
+          <Icon name={leadingIcon} size={16} fill={highlightColor} />
+          <GapW unit={1} />
+        </>
+      ) : null}
+      {renderContent}
+      {trailingIcon ? (
+        <>
+          <GapW unit={1} />
+          <Icon name={trailingIcon} size={16} fill={highlightColor} />
+        </>
+      ) : null}
+    </RowCenter>
+  );
+};

package/src/component/GradientBorderContainer.tsx

@@ -0,0 +1,55 @@
+import MaskedView from '@react-native-masked-view/masked-view';
+import { gradient as Gradient, type GradientProps, GradientCollection } from '@teamturing/react-native-kit';
+import type { PropsWithChildren } from 'react';
+import type { ViewProps } from 'react-native';
+import { View, StyleSheet } from 'react-native';
+
+type Props = PropsWithChildren<
+  {
+    borderWidth?: number;
+    borderRadius?: number;
+    gradient?: GradientProps;
+    borderType?: 'outer' | 'stroke' | 'inner';
+  } & ViewProps
+>;
+const GradientBorderContainer = ({
+  borderWidth = 1,
+  borderRadius = 0,
+  gradient = Gradient.gradient4,
+  children,
+  borderType = 'stroke',
+  style,
+  ...props
+}: Props) => {
+  const padding = borderType === 'stroke' ? -borderWidth / 2 : borderType === 'inner' ? 0 : -borderWidth;
+  return (
+    <View key={1} style={[style, { borderWidth: 0 }]} {...props}>
+      {children}
+      <View style={StyleSheet.absoluteFill} pointerEvents={'none'}>
+        <MaskedView
+          pointerEvents={'none'}
+          style={{
+            position: 'absolute',
+            top: padding,
+            bottom: padding,
+            left: padding,
+            right: padding,
+          }}
+          maskElement={
+            <View
+              pointerEvents={'none'}
+              accessibilityElementsHidden
+              importantForAccessibility={'no'}
+              style={[StyleSheet.absoluteFill, { borderRadius, borderWidth }]}
+            />
+          }
+        >
+          <GradientCollection {...gradient} style={StyleSheet.absoluteFill} />
+        </MaskedView>
+      </View>
+    </View>
+  );
+};
+
+export { GradientBorderContainer };
+export type { Props as GradientBorderContainerProps };

package/src/component/GradientBorderContainer.web.tsx

@@ -0,0 +1,23 @@
+import { gradient as Gradient } from '@teamturing/react-native-kit';
+import { View } from 'react-native';
+
+import type { GradientBorderContainerProps } from './GradientBorderContainer';
+
+const GradientBorderContainer = ({
+  borderWidth = 1,
+  borderRadius = 0,
+  gradient = Gradient.gradient4,
+  children,
+  style,
+  ...props
+}: GradientBorderContainerProps) => {
+  const { colors } = gradient;
+
+  return (
+    <View key={1} style={[{ borderWidth, borderRadius, borderColor: colors[0] }, style]} {...props}>
+      {children}
+    </View>
+  );
+};
+
+export { GradientBorderContainer };

package/src/component/GradientCollection.tsx

@@ -0,0 +1,51 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import { useSx } from '@react-native-styled-system/core';
+import { type GradientProps, useRefValue } from '@teamturing/react-native-kit';
+import dayjs from 'dayjs';
+import { parseToHsl } from 'polished';
+import { type PropsWithChildren } from 'react';
+import type { ViewProps } from 'react-native';
+import { View } from 'react-native';
+import { Svg, LinearGradient, Stop, Defs, Rect } from 'react-native-svg';
+
+type Props = PropsWithChildren<GradientProps & ViewProps>;
+
+const GradientCollection = (props: Props & SxProps) => {
+  const { filteredProps, getStyle } = useSx(props, { fallback: { overflow: 'hidden' } });
+  const { colors, locations, start = { x: 0, y: 0 }, end = { x: 0, y: 1 }, children, ...rest } = filteredProps;
+  const key = useRefValue(() => dayjs().valueOf() + Math.random());
+  return (
+    <View style={getStyle()} {...rest}>
+      <Svg
+        preserveAspectRatio={'none'}
+        style={{ width: '100%', height: '100%', position: 'absolute' }}
+        viewBox={'0 0 10 10'}
+      >
+        <Defs>
+          <LinearGradient id={`gradientCollection-${key}`} x1={start.x} y1={start.y} x2={end.x} y2={end.y}>
+            {colors.map((stopColor, i) => {
+              const offset = `${locations[i] * 100}%`;
+
+              const hsl = parseToHsl(stopColor);
+              const stopOpacity = 'alpha' in hsl ? hsl.alpha : 1;
+
+              return (
+                <Stop
+                  key={`${stopColor}-${offset}-${i}`}
+                  offset={offset}
+                  stopColor={stopColor}
+                  stopOpacity={stopOpacity}
+                />
+              );
+            })}
+          </LinearGradient>
+        </Defs>
+        <Rect width={10} height={10} fill={`url(#gradientCollection-${key})`} />
+      </Svg>
+      {children}
+    </View>
+  );
+};
+
+export { GradientCollection };
+export type { Props as GradientCollecitonProps };

package/src/component/GradientMask.tsx

@@ -0,0 +1,39 @@
+import MaskedView from '@react-native-masked-view/masked-view';
+import type { SxProps } from '@react-native-styled-system/core';
+import { useSx } from '@react-native-styled-system/core';
+import { type GradientType, gradient } from '@teamturing/react-native-kit';
+import type { PropsWithChildren } from 'react';
+import type { ViewProps } from 'react-native';
+import { View, StyleSheet } from 'react-native';
+
+import { GradientCollection } from './GradientCollection';
+
+type Props = PropsWithChildren<
+  {
+    gradient?: GradientType;
+    disabled?: boolean;
+  } & ViewProps &
+    SxProps
+>;
+const GradientMask = (props: Props) => {
+  const { filteredProps, getStyle } = useSx(props);
+
+  const { children, gradient: _gradientKey = 'gradient4', disabled, ...viewProps } = filteredProps;
+
+  if (disabled) {
+    return <View {...viewProps}>{children}</View>;
+  }
+  return (
+    // @ts-ignore
+    <MaskedView maskElement={<>{children}</>} {...viewProps} style={getStyle()}>
+      {/* layout purpose */}
+      <View style={{ opacity: 0 }} pointerEvents={'none'} importantForAccessibility={'no'}>
+        {children}
+      </View>
+      <GradientCollection {...gradient[_gradientKey]} style={StyleSheet.absoluteFill} />
+    </MaskedView>
+  );
+};
+
+export { GradientMask };
+export type { Props as GradientMaskProps };

package/src/component/GradientMask.web.tsx

@@ -0,0 +1,150 @@
+import { useSx } from '@react-native-styled-system/core';
+import { gradient } from '@teamturing/react-native-kit';
+import { parseToHsl } from 'polished';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+import { Stop } from 'react-native-svg';
+
+import { Box } from './Box';
+import type { GradientMaskProps } from './GradientMask';
+
+/* text, svg(fill), img 지원 */
+const GradientMask = ({ onLayout, ...props }: GradientMaskProps) => {
+  const { filteredProps, getStyle } = useSx(props);
+  const { children, gradient: _gradientKey = 'gradient4', disabled, ...viewProps } = filteredProps;
+
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!ref.current || disabled) {
+      return;
+    }
+
+    const { colors, start = { x: 0, y: 0 }, locations, end = { x: 0, y: 1 } } = gradient[_gradientKey];
+
+    const direction = end?.x === 1 ? (end?.y === 1 ? 'to right bottom' : 'to right') : 'to bottom';
+    const colorsWithPercent = colors.map((color, index) => [color, `${locations[index] * 100}%`].join(' ')).join(', ');
+    const gradientStyle = `linear-gradient(${direction}, ${colorsWithPercent})`;
+
+    /* text */
+    Array.from(ref.current?.getElementsByTagName('div') ?? []).forEach((ele) => {
+      if (ele.childNodes.length === 1 && ele.childNodes[0].nodeType === Node.TEXT_NODE) {
+        ele.setAttribute('style', ele.style.cssText + `background: ${gradientStyle} text; color:transparent;`);
+      }
+    });
+
+    /* svg */
+    const svgs = Array.from(ref.current?.getElementsByTagName('svg') ?? []);
+
+    if (svgs.length > 0) {
+      const gradientId = 'gradientCollection';
+
+      const createDefsWithGradient = () => {
+        const svgns = 'http://www.w3.org/2000/svg';
+        const defsNode = document.createElementNS(svgns, 'defs');
+        const linearGradientNode = document.createElementNS(svgns, 'linearGradient');
+        colors.forEach((stopColor, i) => {
+          const offset = `${locations[i] * 100}%`;
+
+          const hsl = parseToHsl(stopColor);
+          const stopOpacity = 'alpha' in hsl ? hsl.alpha : 1;
+
+          const stopNode = document.createElementNS(svgns, 'stop');
+          stopNode.setAttribute('key', `${stopColor}-${offset}-${i}`);
+          stopNode.setAttribute('offset', offset);
+          stopNode.setAttribute('stop-color', stopColor);
+          stopNode.setAttribute('stop-opacity', `${stopOpacity}`);
+
+          linearGradientNode.appendChild(stopNode);
+          return (
+            <Stop key={`${stopColor}-${offset}-${i}`} offset={offset} stopColor={stopColor} stopOpacity={stopOpacity} />
+          );
+        });
+
+        linearGradientNode.setAttribute('id', `${gradientId}`);
+        linearGradientNode.setAttribute('x1', `${start.x}`);
+        linearGradientNode.setAttribute('y1', `${start.y}`);
+        linearGradientNode.setAttribute('x2', `${end.x}`);
+        linearGradientNode.setAttribute('y2', `${end.y}`);
+
+        defsNode.appendChild(linearGradientNode);
+        return defsNode;
+      };
+
+      svgs.forEach((svg) => {
+        svg.innerHTML = svg.innerHTML.replace(/fill="#[0-9A-Fa-f]{6}"/g, `fill="url('#${gradientId}')"`);
+        const def = createDefsWithGradient();
+        svg.appendChild(def);
+      });
+    }
+
+    /* img */
+    const imgs = Array.from(ref.current?.getElementsByTagName('img') ?? []);
+    imgs.forEach((img) => {
+      const div = document.createElement('div');
+      div.setAttribute(
+        'style',
+        `width: 100%; height: 100%;
+        -webkit-mask-size: contain; mask-size: contain;
+        mask-image: url(${img.src}); -webkit-mask-image: url(${img.src}); 
+        background: ${gradientStyle};`,
+      );
+      const parent = img.parentElement;
+      if (parent) {
+        parent.innerHTML = '';
+        parent?.appendChild(div);
+      }
+    });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [disabled]);
+
+  const [canProcessingImg, setCanProcessingImg] = useState(false);
+
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      setCanProcessingImg(true);
+      onLayout?.(event);
+    },
+    [onLayout],
+  );
+
+  useEffect(() => {
+    if (!ref.current || disabled || !canProcessingImg) {
+      return;
+    }
+
+    const { colors, locations, end = { x: 0, y: 1 } } = gradient[_gradientKey];
+
+    const direction = end?.x === 1 ? (end?.y === 0 ? 'to right' : 'to right bottom') : 'to bottom';
+    const colorsWithPercent = colors.map((color, index) => [color, `${locations[index] * 100}%`].join(' ')).join(', ');
+    const gradientStyle = `linear-gradient(${direction}, ${colorsWithPercent})`;
+
+    /* img */
+    const imgs = Array.from(ref.current?.getElementsByTagName('img') ?? []);
+    imgs.forEach((img) => {
+      const div = document.createElement('div');
+      div.setAttribute(
+        'style',
+        `width: 100%; height: 100%;
+        -webkit-mask-size: contain; mask-size: contain;
+        mask-image: url(${img.src}); -webkit-mask-image: url(${img.src}); 
+        background: ${gradientStyle};`,
+      );
+      const parent = img.parentElement;
+      if (parent) {
+        parent.innerHTML = '';
+        parent?.appendChild(div);
+      }
+    });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [disabled, canProcessingImg]);
+
+  return (
+    <Box ref={ref as any} onLayout={handleLayout} {...viewProps} style={getStyle()}>
+      {children}
+    </Box>
+  );
+};
+
+export { GradientMask };

package/src/component/Header/BackButtonHeader.tsx

@@ -0,0 +1,29 @@
+import { IconBtn } from '../Btn';
+import type { IconBtnProps } from '../Btn/IconBtn';
+
+import { type HeaderProps, Header } from './Header';
+
+export const BackButtonHeader = ({
+  left = [],
+  onPressBack,
+  testID,
+  backButtonVariant = 'plain-gray700',
+  ...rest
+}: HeaderProps & { onPressBack?: () => void; backButtonVariant?: IconBtnProps['variant'] }) => {
+  return (
+    <Header
+      left={[
+        <IconBtn
+          name={'chevron_left'}
+          size={'m'}
+          variant={backButtonVariant}
+          onPress={onPressBack}
+          testID={`${testID}/back`}
+        />,
+        ...left,
+      ]}
+      {...rest}
+      testID={testID}
+    />
+  );
+};

package/src/component/Header/CloseButtonHeader.tsx

@@ -0,0 +1,27 @@
+import { IconBtn } from '../Btn';
+
+import { type HeaderProps, Header } from './Header';
+
+export const CloseButtonHeader = ({
+  right = [],
+  onPressClose,
+  testID,
+  ...rest
+}: HeaderProps & { onPressClose?: () => void }) => {
+  return (
+    <Header
+      right={[
+        ...right,
+        <IconBtn
+          name={'close'}
+          size={'m'}
+          variant={'plain-gray700'}
+          onPress={onPressClose}
+          testID={`${testID}/close`}
+        />,
+      ]}
+      {...rest}
+      testID={testID}
+    />
+  );
+};

package/src/component/Header/Header.tsx

@@ -0,0 +1,120 @@
+import { type Spacing, Txt, is, useDynamicLayout, spacing, RowCenter, palette } from '@teamturing/react-native-kit';
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+
+import { OpacityAnimatedView } from '../Animation';
+import { Box } from '../Box';
+
+type Props = {
+  title?: string;
+  renderTitle?: (title?: string) => React.ReactNode;
+  left?: (React.ReactElement | undefined | null | boolean)[];
+  right?: (React.ReactElement | undefined | null | boolean)[];
+  isTopSafeAreaConsumed?: boolean;
+  hideElements?: boolean;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+  enableTitleFadeAnimation?: boolean;
+  shrinkPaddingHorizontalEvenWideLayout?: boolean;
+  leftTitleLayout?: boolean;
+  isHeaderShowingAtCenter?: boolean;
+  showBottomDivider?: boolean;
+  rightElementGap?: Spacing;
+};
+export const HeaderHeight = 48;
+const Header = ({
+  title,
+  renderTitle = (title) => Txt.L.Bold.render(title, { numberOfLines: 1 }),
+  left = [],
+  right = [],
+  isTopSafeAreaConsumed,
+  hideElements,
+  testID,
+  style,
+  enableTitleFadeAnimation,
+  shrinkPaddingHorizontalEvenWideLayout = false,
+  leftTitleLayout,
+  isHeaderShowingAtCenter = true,
+  showBottomDivider = false,
+  rightElementGap = 3,
+}: Props) => {
+  if (leftTitleLayout && is.notEmptyArray(left)) {
+    throw new Error('Header - leftTitleLayout는 left와 같이 쓰일 수 없습니다');
+  }
+  const { sfTop, sidePadding, sfLeft } = useDynamicLayout();
+
+  const backgroundColor = (StyleSheet.flatten(style) || {})?.backgroundColor || 'transparent';
+
+  return (
+    <View
+      style={[
+        {
+          justifyContent: 'flex-end',
+          paddingTop: isTopSafeAreaConsumed ? 0 : sfTop,
+          backgroundColor,
+        },
+      ]}
+      testID={testID}
+    >
+      <View style={{ paddingHorizontal: shrinkPaddingHorizontalEvenWideLayout ? spacing[5] + sfLeft : sidePadding }}>
+        <RowCenter
+          style={[
+            {
+              justifyContent: 'space-between',
+              height: HeaderHeight,
+            },
+            style,
+          ]}
+        >
+          {leftTitleLayout ? (
+            <OpacityAnimatedView
+              duration={150}
+              opacity={enableTitleFadeAnimation ? (isHeaderShowingAtCenter ? 0 : 1) : 1}
+            >
+              {Txt.H2.render(title)}
+            </OpacityAnimatedView>
+          ) : null}
+          <Box center absoluteFill pointerEvents={'box-none'}>
+            <OpacityAnimatedView
+              duration={150}
+              opacity={enableTitleFadeAnimation ? (isHeaderShowingAtCenter ? 1 : 0) : leftTitleLayout ? 0 : 1}
+              style={{ paddingHorizontal: spacing[8] }}
+            >
+              {renderTitle(title)}
+            </OpacityAnimatedView>
+          </Box>
+          {!hideElements ? (
+            <RowCenter
+              style={{ marginHorizontal: -spacing[1], justifyContent: 'space-between', flex: 1 }}
+              pointerEvents={'box-none'}
+            >
+              <RowCenter style={{ flex: 1 }} gapX={3} pointerEvents={'box-none'}>
+                {left
+                  ?.filter((e) => !is.boolean(e) && !is.undefined(e) && !is.null(e))
+                  ?.map((element, i) => (
+                    <React.Fragment key={i}>{element}</React.Fragment>
+                  ))}
+              </RowCenter>
+              <RowCenter pointerEvents={'box-none'} gapX={rightElementGap}>
+                {right
+                  ?.filter((e) => !is.boolean(e) && !is.undefined(e))
+                  ?.map((element, i) => (
+                    <React.Fragment key={i}>{element}</React.Fragment>
+                  ))}
+              </RowCenter>
+            </RowCenter>
+          ) : null}
+        </RowCenter>
+      </View>
+      <OpacityAnimatedView
+        duration={150}
+        opacity={showBottomDivider ? 1 : 0}
+        style={{ borderBottomWidth: 1, borderBottomColor: palette.gray100 }}
+      />
+    </View>
+  );
+};
+
+export { Header };
+export type { Props as HeaderProps };

package/src/component/Header/index.ts

@@ -0,0 +1,3 @@
+export * from './BackButtonHeader';
+export * from './CloseButtonHeader';
+export * from './Header';

package/src/component/HorizontalStackedBar.tsx

@@ -0,0 +1,28 @@
+import { View } from 'react-native';
+
+import { Grid } from './Layout/Grid';
+
+type Props<T> = {
+  data: T[];
+  getValue: (datum: T) => number;
+  getColor: (datum: T) => string;
+};
+
+const HorizontalStackedBar = <T,>({ data, getValue, getColor }: Props<T>) => {
+  const totalValue = data.reduce((acc, cur) => acc + getValue(cur), 0);
+  return (
+    <View style={{ borderRadius: 8, overflow: 'hidden' }}>
+      <Grid spacing={0.5}>
+        {data.map((datum, i) =>
+          getValue(datum) > 0 ? (
+            <Grid.Unit key={i} size={getValue(datum) / totalValue}>
+              <View style={{ backgroundColor: getColor(datum), height: 24 }} />
+            </Grid.Unit>
+          ) : null,
+        )}
+      </Grid>
+    </View>
+  );
+};
+
+export { HorizontalStackedBar };

package/src/component/Icon/AnimatedIcon.tsx

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import type { AnimatedStyle } from 'react-native-reanimated';
+
+import { withReanimated } from '../../hoc';
+import type { LayoutStyle } from '../Layout/LayoutStyle';
+
+import * as Icons from './Icons';
+
+export type IconName = keyof typeof Icons;
+type Props = {
+  name: IconName;
+  size?: number;
+  layout?: LayoutStyle;
+  animatedStyle?: AnimatedStyle;
+};
+
+const AnimatedIcon = ({ name, size = 24, layout, animatedStyle }: Props) => {
+  if (!name.endsWith('_animation')) {
+    // eslint-disable-next-line no-console
+    console.warn('Name of icon in AnimatedIcon should be ended with _animation');
+  }
+  // eslint-disable-next-line import/namespace
+  const IconComponent = useMemo(() => withReanimated(Icons[name]), [name]);
+  return <IconComponent width={size} height={size} style={[layout, animatedStyle]} />;
+};
+
+export default AnimatedIcon;