@coldsurf/ocean-road 1.13.2

package/src/native/icon-button/icon-button.utils.ts

@@ -0,0 +1,114 @@
+import color from '@coldsurfers/ocean-road-design-tokens/js/color/variables';
+import { css } from '@emotion/native';
+import type { ButtonTheme } from '../../base/button';
+import type { IconButtonSize } from './icon-button.types';
+
+export const sizes = {
+  xs: 20,
+  sm: 24,
+  md: 28,
+  lg: 32,
+  xl: 36,
+};
+
+const sizesStringify = (size: IconButtonSize) => {
+  switch (size) {
+    case 'xs':
+      return `${sizes.xs}px`;
+    case 'sm':
+      return `${sizes.sm}px`;
+    case 'md':
+      return `${sizes.md}px`;
+    case 'lg':
+      return `${sizes.lg}px`;
+    case 'xl':
+      return `${sizes.xl}px`;
+    default:
+      return `${sizes.xs}px`;
+  }
+};
+
+const xsStyles = css`
+  width: ${sizesStringify('xs')};
+  height: ${sizesStringify('xs')};
+  border-radius: 10px;
+`;
+
+const smStyles = css`
+  width: ${sizesStringify('sm')};
+  height: ${sizesStringify('sm')};
+  border-radius: 12px;
+`;
+
+const mdStyles = css`
+  width: ${sizesStringify('md')};
+  height: ${sizesStringify('md')};
+  border-radius: 14px;
+`;
+
+const lgStyles = css`
+  width: ${sizesStringify('lg')};
+  height: ${sizesStringify('lg')};
+  border-radius: 16px;
+`;
+
+const xlStyles = css`
+  width: ${sizesStringify('xl')};
+  height: ${sizesStringify('xl')};
+  border-radius: 18px;
+`;
+
+export const getIconButtonSizeStyles = (size: IconButtonSize) => {
+  switch (size) {
+    case 'xs':
+      return xsStyles;
+    case 'sm':
+      return smStyles;
+    case 'md':
+      return mdStyles;
+    case 'lg':
+      return lgStyles;
+    case 'xl':
+      return xlStyles;
+    default:
+      return xsStyles;
+  }
+};
+
+const transparentStyles = css`
+  background-color: transparent;
+`;
+
+const transparentDarkGrayStyles = css`
+  background-color: ${color.oc.black.value};
+  opacity: 0.5;
+`;
+
+const whiteStyles = css`
+  background-color: ${color.oc.white.value};
+`;
+
+const pinkStyles = css`
+  background-color: ${color.oc.pink[9].value};
+`;
+
+const indigoStyles = css`
+  background-color: ${color.oc.indigo[9].value};
+`;
+
+export const getIconButtonBackgroundStyles = (theme: ButtonTheme) => {
+  switch (theme) {
+    case 'transparent':
+      return transparentStyles;
+    case 'transparentDarkGray':
+      return transparentDarkGrayStyles;
+    case 'white':
+      return whiteStyles;
+    case 'pink':
+      return pinkStyles;
+    case 'indigo':
+      return indigoStyles;
+    default:
+      return indigoStyles;
+  }
+};

package/src/native/icon-button/index.ts

@@ -0,0 +1 @@
+export * from './icon-button';

package/src/native/index.ts

@@ -0,0 +1,9 @@
+export * from './button';
+export * from './contexts';
+export * from './icon-button';
+export * from './modal';
+export * from './profile-thumbnail';
+export * from './spinner';
+export * from './text';
+export * from './text-input';
+export * from './toast';

package/src/native/modal/index.ts

@@ -0,0 +1,2 @@
+export * from './modal';
+export * from './modal.types';

package/src/native/modal/modal.styled.ts

@@ -0,0 +1,17 @@
+import styled from '@emotion/native';
+
+export const StyledModal = styled.Modal`
+  flex: 1;
+`;
+
+export const StyledModalBackground = styled.Pressable`
+  position: absolute;
+  z-index: 99;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  background-color: rgba(0, 0, 0, 0.5);
+  align-items: center;
+  justify-content: center;
+`;

package/src/native/modal/modal.tsx

@@ -0,0 +1,21 @@
+import { TouchableWithoutFeedback } from 'react-native';
+import { StyledModal, StyledModalBackground } from './modal.styled';
+import type { ModalProps } from './modal.types';
+
+export const Modal = ({
+  children,
+  visible = false,
+  transparent = true,
+  onPressBackground,
+}: ModalProps) => (
+  <StyledModal
+    supportedOrientations={['landscape', 'portrait']}
+    visible={visible}
+    transparent={transparent}
+    animationType="slide"
+  >
+    <StyledModalBackground onPress={onPressBackground}>
+      <TouchableWithoutFeedback>{children}</TouchableWithoutFeedback>
+    </StyledModalBackground>
+  </StyledModal>
+);

package/src/native/modal/modal.types.ts

@@ -0,0 +1,8 @@
+import type { PropsWithChildren } from 'react';
+import type { GestureResponderEvent } from 'react-native';
+
+export type ModalProps = PropsWithChildren<{
+  visible?: boolean;
+  transparent?: boolean;
+  onPressBackground?: (event: GestureResponderEvent) => void;
+}>;

package/src/native/profile-thumbnail/index.ts

@@ -0,0 +1 @@
+export * from './profile-thumbnail';

package/src/native/profile-thumbnail/profile-thumbnail.tsx

@@ -0,0 +1,91 @@
+import { useMemo } from 'react';
+import { Image, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native';
+import { colors } from '../../tokens';
+import { useColorScheme } from '../contexts';
+import { Text } from '../text';
+
+const PROFILE_THUMBNAIL_SIZE = {
+  md: {
+    width: 62,
+    height: 62,
+  },
+  sm: {
+    width: 42,
+    height: 42,
+  },
+  lg: {
+    width: 92,
+    height: 92,
+  },
+} as const;
+
+type ProfileThumbnailProps = {
+  size?: 'md' | 'sm' | 'lg';
+  type?: 'square' | 'circle';
+  emptyBgText: string;
+  imageUrl?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+export const ProfileThumbnail = ({
+  size = 'md',
+  emptyBgText,
+  imageUrl,
+  type = 'square',
+  style,
+}: ProfileThumbnailProps) => {
+  const { semantics } = useColorScheme();
+  const sizeStyle = useMemo(() => {
+    return PROFILE_THUMBNAIL_SIZE[size];
+  }, [size]);
+  const borderRadiusStyle = useMemo(() => {
+    switch (type) {
+      case 'circle':
+        return {
+          borderRadius: sizeStyle.width / 2,
+        };
+      case 'square':
+        return { borderRadius: 4 };
+      default:
+        return {
+          borderRadius: 4,
+        };
+    }
+  }, [sizeStyle.width, type]);
+  return (
+    <View
+      style={[
+        styles.wrapper,
+        sizeStyle,
+        borderRadiusStyle,
+        {
+          backgroundColor: semantics.background[4],
+        },
+        style,
+      ]}
+    >
+      {emptyBgText ? (
+        <Text weight="bold" style={styles.bgText}>
+          {emptyBgText}
+        </Text>
+      ) : null}
+      {imageUrl && <Image source={{ uri: imageUrl }} style={[styles.image, borderRadiusStyle]} />}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  bgText: {
+    color: colors.oc.white.value,
+    position: 'absolute',
+    fontSize: 14,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+});

package/src/native/spinner/index.ts

@@ -0,0 +1 @@
+export * from './spinner';

package/src/native/spinner/spinner.tsx

@@ -0,0 +1,75 @@
+import styled from '@emotion/native';
+import { LoaderCircle } from 'lucide-react-native';
+import { useEffect, useMemo } from 'react';
+import { type ColorValue, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native';
+import Reanimated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import { colors } from '../../tokens';
+
+const AnimatedLoaderIcon = Reanimated.createAnimatedComponent(LoaderCircle);
+
+const LoaderIcon = styled(AnimatedLoaderIcon)`
+  color: ${colors.oc.cyan[5].value};
+`;
+
+interface Props {
+  positionCenter?: boolean;
+  size?: number | 'small' | 'large' | 'medium';
+  color?: ColorValue;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const Spinner = ({ positionCenter = false, size = 'large', color, style }: Props) => {
+  const rotation = useSharedValue(0); // Shared value for rotation
+
+  // Animated style for rotation
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ rotate: `${rotation.value}deg` }],
+    };
+  });
+
+  const sizeNumber = useMemo(() => {
+    switch (size) {
+      case 'large':
+        return 42;
+      case 'small':
+        return 20;
+      case 'medium':
+        return 32;
+      default:
+        return 42;
+    }
+  }, [size]);
+
+  useEffect(() => {
+    // Start the rotation animation
+    rotation.value = withRepeat(
+      withTiming(360, { duration: 600 }), // Full rotation in 2000ms
+      -1, // Infinite repeat
+      false // Reverse the direction after each cycle
+    );
+  }, [rotation]);
+
+  return (
+    <View style={[positionCenter && styles.positionCenter, style]}>
+      <View style={styles.animationWrapper}>
+        <LoaderIcon size={sizeNumber} color={color} style={animatedStyle} />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  positionCenter: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'transparent',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  animationWrapper: { justifyContent: 'center', alignItems: 'center' },
+});

package/src/native/text/index.ts

@@ -0,0 +1,2 @@
+export * from './text';
+export * from './text.types';

package/src/native/text/text.tsx

@@ -0,0 +1,51 @@
+import { Text as RNText, StyleSheet } from 'react-native';
+import { colors } from '../../tokens';
+import type { TextProps } from './text.types';
+
+export const Text = ({ children, weight = 'regular', style, ...others }: TextProps) => {
+  const fontFamilySet = {
+    thin: styles.thin,
+    light: styles.light,
+    regular: styles.regular,
+    medium: styles.medium,
+    bold: styles.bold,
+    extraBold: styles.extraBold,
+  };
+  const flattenedStyle = StyleSheet.flatten(style);
+  const lineHeight = (flattenedStyle?.fontSize ?? 0) * 1.205;
+  return (
+    <RNText
+      {...others}
+      style={[
+        fontFamilySet[weight],
+        styles.defaultColor,
+        { lineHeight: lineHeight, letterSpacing: 0.24, includeFontPadding: false },
+        style,
+      ]}
+    >
+      {children}
+    </RNText>
+  );
+};
+
+const styles = StyleSheet.create({
+  thin: {
+    fontFamily: 'Pretendard-Thin',
+  },
+  light: {
+    fontFamily: 'Pretendard-Light',
+  },
+  regular: {
+    fontFamily: 'Pretendard-Regular',
+  },
+  medium: {
+    fontFamily: 'Pretendard-Medium',
+  },
+  bold: {
+    fontFamily: 'Pretendard-Bold',
+  },
+  extraBold: {
+    fontFamily: 'Pretendard-ExtraBold',
+  },
+  defaultColor: { color: colors.oc.black.value },
+});

package/src/native/text/text.types.ts

@@ -0,0 +1,5 @@
+import type { TextProps as RNTextProps } from 'react-native';
+
+export interface TextProps extends RNTextProps {
+  weight?: 'thin' | 'light' | 'regular' | 'medium' | 'bold' | 'extraBold';
+}

package/src/native/text-input/index.ts

@@ -0,0 +1,2 @@
+export * from './text-input';
+export * from './text-input.types';

package/src/native/text-input/text-input.tsx

@@ -0,0 +1,72 @@
+import color from '@coldsurfers/ocean-road-design-tokens/js/color/variables';
+import { forwardRef, memo, useCallback, useState } from 'react';
+import { TextInput as RNTextInput, StyleSheet } from 'react-native';
+import { colors } from '../../tokens';
+import { useColorScheme } from '../contexts';
+import type { TextInputProps } from './text-input.types';
+
+const DEFAULT_FONT_SIZE = 12;
+
+const _TextInput = forwardRef<RNTextInput, TextInputProps>(({ style, ...otherProps }, ref) => {
+  const { semantics, colorScheme } = useColorScheme();
+  const [focused, setFocused] = useState<boolean>(false);
+  const flattenedStyle = StyleSheet.flatten(style);
+  const lineHeight = (flattenedStyle?.fontSize ?? DEFAULT_FONT_SIZE) * 1.275;
+  const onFocus = useCallback(() => {
+    setFocused(true);
+  }, []);
+  const onBlur = useCallback(() => {
+    setFocused(false);
+  }, []);
+  return (
+    <RNTextInput
+      ref={ref}
+      placeholderTextColor={'#b0b6b7'}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      {...otherProps}
+      style={[
+        styles.textInput,
+        {
+          color: semantics.foreground[1],
+          backgroundColor: semantics.background[4],
+          borderColor: colorScheme === 'light' ? semantics.border[2] : semantics.border[1],
+        },
+        focused && {
+          borderColor: colorScheme === 'light' ? semantics.border[1] : semantics.border[2],
+        },
+        typeof otherProps.editable === 'boolean' && !otherProps.editable && styles.disabled,
+        {
+          lineHeight,
+        },
+        style,
+      ]}
+    />
+  );
+});
+
+export const TextInput = memo(_TextInput);
+
+const styles = StyleSheet.create({
+  textInput: {
+    // borderColor: colors.oc.gray[6].value,
+    borderWidth: 2,
+    borderRadius: 24,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 16,
+    paddingBottom: 16,
+    backgroundColor: color.oc.white.value,
+    fontFamily: 'Pretendard',
+    includeFontPadding: false,
+  },
+  focused: {
+    borderColor: colors.oc.gray[4].value,
+    borderWidth: 2,
+  },
+  disabled: {
+    backgroundColor: '#f4eded',
+  },
+});
+
+_TextInput.displayName = 'TextInput';

package/src/native/text-input/text-input.types.ts

@@ -0,0 +1,3 @@
+import type { TextInputProps as RNTextInputProps } from 'react-native';
+
+export interface TextInputProps extends RNTextInputProps {}

package/src/native/toast/index.ts

@@ -0,0 +1,2 @@
+export * from './toast';
+export * from './toast.types';

package/src/native/toast/toast.styled.ts

@@ -0,0 +1,40 @@
+import color from '@coldsurfers/ocean-road-design-tokens/js/color/variables';
+import styled from '@emotion/native';
+import { Text } from '../text';
+import type { ToastType } from './toast.types';
+
+export const StyledToastContainer = styled.View`
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  position: absolute;
+  bottom: 24px;
+  left: 0px;
+  right: 0px;
+`;
+
+export const StyledToastPressable = styled.Pressable<{ type: ToastType }>`
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  border-radius: 24px;
+  background-color: ${({ type }) => {
+    switch (type) {
+      case 'info':
+        return color.oc.black.value;
+      case 'warning':
+        return color.oc.yellow[9].value;
+      case 'error':
+        return color.oc.pink[9].value;
+      default:
+        return color.oc.black.value;
+    }
+  }};
+`;
+
+export const StyledToastText = styled(Text)`
+  font-weight: 700;
+  color: ${color.oc.white.value};
+  font-size: 14px;
+`;

package/src/native/toast/toast.tsx

@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+import type { GestureResponderEvent } from 'react-native';
+import { StyledToastContainer, StyledToastPressable, StyledToastText } from './toast.styled';
+import type { ToastProps } from './toast.types';
+
+export const Toast = ({ type, message, onPress }: ToastProps) => {
+  const handlePress = useCallback(
+    (e: GestureResponderEvent) => {
+      if (onPress) {
+        onPress(e);
+      }
+    },
+    [onPress]
+  );
+
+  return (
+    <StyledToastContainer>
+      <StyledToastPressable type={type} onPress={handlePress}>
+        <StyledToastText>{message}</StyledToastText>
+      </StyledToastPressable>
+    </StyledToastContainer>
+  );
+};

package/src/native/toast/toast.types.ts

@@ -0,0 +1,10 @@
+import type { GestureResponderEvent } from 'react-native';
+
+export interface ToastProps {
+  type: ToastType;
+  message: string;
+  onPress?: (event: GestureResponderEvent) => void;
+  autoCloseOnPress?: boolean;
+}
+
+export type ToastType = 'info' | 'warning' | 'error';