@kukkim/react-native-ui 0.1.0

package/src/components/icon/index.tsx

@@ -0,0 +1,54 @@
+import { StyleSheet, View } from 'react-native';
+import { type IconProps, sizeType } from './types';
+// import { useTheme } from '../../hooks/useTheme';
+import ArrowLeft from './ArrowLeft';
+import StarEmpty from './StarEmpty';
+import StarHalf from './StarHalf';
+import StarFull from './StarFull';
+import Check from './Check';
+import X from './X';
+// import { ArrowDownToLine } from './ArrowDownToLine';
+// import { ArrowDownWideNarrow } from './ArrowDownWideNarrow';
+// import { ChevronDown } from './ChevronDown';
+// import { RotateCw } from './RotateCw';
+// export { SquareArrowOutUpRight } from './SquareArrowOutUpRight';
+
+const iconMap = {
+  back: ArrowLeft,
+  star_empty: StarEmpty,
+  star_half: StarHalf,
+  star_full: StarFull,
+  check: Check,
+  close: X,
+} as const;
+
+export const CommonIcon = ({
+  iconType,
+  size = 'm',
+  color = 'black',
+  ...props
+}: IconProps) => {
+  // const { theme } = useTheme();
+
+  const IconComponent = iconMap[iconType];
+  if (!IconComponent) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container} {...props}>
+      <IconComponent
+        width={sizeType[size]}
+        height={sizeType[size]}
+        color={color}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    // margin: 5,
+    // padding: 5,
+  },
+});

package/src/components/icon/types.ts

@@ -0,0 +1,30 @@
+import { type ViewProps } from 'react-native';
+
+type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+
+export const sizeType: Record<SizeVariant, number> = {
+  s: 20,
+  m: 24,
+  l: 28,
+};
+
+export interface IconProps extends ViewProps {
+  iconType: // | 'setting'
+    // | 'search'
+    // | 'spinner'
+    | 'check'
+    | 'back'
+    | 'close'
+    // | 'apple'
+    // | 'facebook'
+    // | 'google'
+    // | 'close'
+    // | 'tune'
+    | 'star_empty'
+    | 'star_half'
+    | 'star_full';
+  type?: Variant;
+  size?: SizeVariant;
+  color?: string;
+}

package/src/components/image/index.tsx

@@ -0,0 +1,21 @@
+// import { useState } from 'react';
+import { Image, StyleSheet } from 'react-native';
+import { type CommonImageProps, sizeType } from './types';
+
+export const CommonImage = ({ size = 'm', ...props }: CommonImageProps) => {
+  // const [loading, setLoading] = useState(true);
+  return (
+    <Image
+      style={[styles.container, sizeType[size]]}
+      source={require('../../assets/images/defaultImage.png')}
+      // onLoad={({ nativeEvent }) => {
+      //   setLoading(false);
+      // }}
+      {...props}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {},
+});

package/src/components/image/types.ts

@@ -0,0 +1,20 @@
+import { type ImageProps, type ImageStyle } from 'react-native';
+
+// type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+
+export const sizeType: Record<SizeVariant, ImageStyle> = {
+  s: { width: 24, height: 24 },
+  m: { width: 48, height: 48 },
+  l: { width: 72, height: 72 },
+};
+
+export const avatarSizeType: Record<SizeVariant, ImageStyle> = {
+  s: { width: 24, height: 24, borderRadius: 12, borderWidth: 1 },
+  m: { width: 48, height: 48, borderRadius: 24, borderWidth: 1 },
+  l: { width: 72, height: 72, borderRadius: 36, borderWidth: 1 },
+};
+
+export interface CommonImageProps extends ImageProps {
+  size?: SizeVariant;
+}

package/src/components/index.ts

@@ -0,0 +1,12 @@
+export { CommonText } from './text';
+export { CommonButton } from './button';
+export { CommonBadge } from './badge';
+export { SafeAreaContainer, ScrollViewContainer } from './screenContainer';
+export { CommonIcon } from './icon';
+export { CommonRating } from './rating';
+export { CommonAvatar } from './avatar';
+export { CommonImage } from './image';
+export { CheckBox } from './checkBox';
+export { CommonHeader } from './header';
+export { CommonCard, FoldableCard } from './card';
+export { LinearProgressBar, CircularProgressBar } from './progressBar';

package/src/components/progressBar/circularProgressBar.tsx

@@ -0,0 +1,64 @@
+import { StyleSheet, View } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import { type ProgressBarProps, sizeType, strokeWidthType } from './types';
+import { useTheme } from '../../hooks/useTheme';
+
+const CircularProgressBar = ({
+  type = 'primary',
+  size = 'm',
+  value,
+  style,
+  ...props
+}: ProgressBarProps) => {
+  const { theme } = useTheme();
+
+  const progress = Math.min(Math.max(value, 0), 1);
+
+  const svgSize = sizeType[size];
+  const strokeWidth = strokeWidthType[size];
+
+  const radius = (svgSize - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+
+  const strokeDashoffset = circumference * (1 - progress);
+
+  return (
+    <View style={[styles.container, style]} {...props}>
+      <Svg
+        width={svgSize}
+        height={svgSize}
+        viewBox={`0 0 ${svgSize} ${svgSize}`}
+      >
+        <Circle
+          cx={svgSize / 2}
+          cy={svgSize / 2}
+          r={radius}
+          stroke={theme.colors.disabled}
+          strokeWidth={strokeWidth}
+          fill="none"
+        />
+
+        <Circle
+          cx={svgSize / 2}
+          cy={svgSize / 2}
+          r={radius}
+          stroke={theme.colors[type]}
+          strokeWidth={strokeWidth}
+          fill="none"
+          strokeLinecap="round"
+          strokeDasharray={circumference}
+          strokeDashoffset={strokeDashoffset}
+          rotation="-90"
+          originX={svgSize / 2}
+          originY={svgSize / 2}
+        />
+      </Svg>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {},
+});
+
+export default CircularProgressBar;

package/src/components/progressBar/index.ts

@@ -0,0 +1,5 @@
+// TODO: progressbar에 react-native-reanimated를 이용한 animation적용 필요.
+import LinearProgressBar from './linearProgressBar';
+import CircularProgressBar from './circularProgressBar';
+
+export { LinearProgressBar, CircularProgressBar };

package/src/components/progressBar/linearProgressBar.tsx

@@ -0,0 +1,51 @@
+import { StyleSheet, View } from 'react-native';
+import { type ProgressBarProps } from './types';
+import { useTheme } from '../../hooks/useTheme';
+
+const LinearProgressBar = ({
+  type = 'primary',
+  value,
+  style,
+  ...props
+}: ProgressBarProps) => {
+  const { theme } = useTheme();
+  const progress = Math.min(Math.max(value, 0), 1);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: theme.colors.disabled,
+        },
+        style,
+      ]}
+      {...props}
+    >
+      <View
+        style={[
+          styles.progress,
+          {
+            width: `${progress * 100}%`,
+            backgroundColor: theme.colors[type],
+          },
+        ]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: 8,
+    borderRadius: 999,
+    overflow: 'hidden',
+  },
+  progress: {
+    height: '100%',
+    borderRadius: 999,
+  },
+});
+
+export default LinearProgressBar;

package/src/components/progressBar/types.ts

@@ -0,0 +1,22 @@
+import { type ViewProps } from 'react-native';
+
+type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+
+export const sizeType: Record<SizeVariant, number> = {
+  s: 32,
+  m: 48,
+  l: 60,
+};
+
+export const strokeWidthType: Record<SizeVariant, number> = {
+  s: 4,
+  m: 6,
+  l: 12,
+};
+
+export interface ProgressBarProps extends ViewProps {
+  type?: Variant;
+  size?: SizeVariant;
+  value: number;
+}

package/src/components/rating/index.tsx

@@ -0,0 +1,106 @@
+import { Pressable, StyleSheet, View } from 'react-native';
+import { CommonIcon } from '../icon';
+import { useTheme } from '../../hooks/useTheme';
+import { type RatingProps, sizeType } from './types';
+
+export const CommonRating = ({
+  type = 'primary',
+  value,
+  onChange,
+  editable = false,
+  size = 'm',
+  maxRating = 5,
+}: RatingProps) => {
+  const { theme } = useTheme();
+  const renderStar = (index: number) => {
+    const starNumber = index + 1;
+
+    let iconType: 'star_empty' | 'star_half' | 'star_full' = 'star_empty';
+
+    if (value >= starNumber) {
+      iconType = 'star_full';
+    } else if (value >= starNumber - 0.5) {
+      iconType = 'star_half';
+    }
+
+    if (!editable) {
+      return (
+        <View key={index}>
+          <CommonIcon
+            iconType={iconType}
+            size={size}
+            color={theme.colors[type]}
+          />
+        </View>
+      );
+    }
+
+    return (
+      <View
+        key={index}
+        style={[
+          {
+            width: sizeType[size],
+            height: sizeType[size],
+          },
+          styles.starContainer,
+        ]}
+      >
+        <CommonIcon
+          iconType={iconType}
+          size={size}
+          color={theme.colors[type]}
+        />
+
+        {/* 왼쪽 절반 */}
+        <Pressable
+          style={[
+            StyleSheet.absoluteFillObject,
+            {
+              width: sizeType[size] / 2,
+            },
+            styles.left,
+          ]}
+          onPress={() => {
+            onChange?.(index + 0.5);
+          }}
+        />
+
+        {/* 오른쪽 절반 */}
+        <Pressable
+          style={[
+            StyleSheet.absoluteFillObject,
+            {
+              width: sizeType[size] / 2,
+              left: sizeType[size] / 2,
+            },
+          ]}
+          onPress={() => {
+            onChange?.(index + 1);
+          }}
+        />
+      </View>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      {Array.from({ length: maxRating }).map((_, index) => renderStar(index))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  starContainer: {
+    position: 'relative',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  left: {
+    left: 0,
+  },
+});

package/src/components/rating/types.ts

@@ -0,0 +1,17 @@
+type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+
+export const sizeType: Record<SizeVariant, number> = {
+  s: 20,
+  m: 24,
+  l: 28,
+};
+
+export interface RatingProps {
+  type?: Variant;
+  value: number;
+  onChange?: (rating: number) => void;
+  editable?: boolean;
+  size?: SizeVariant;
+  maxRating?: number;
+}

package/src/components/screenContainer/SafeAreaContainer.tsx

@@ -0,0 +1,22 @@
+import { useTheme } from '../../hooks/useTheme';
+import { StyleSheet, type ViewProps } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+const SafeAreaContainer = ({ children }: ViewProps) => {
+  const { theme } = useTheme();
+  return (
+    <SafeAreaView
+      style={[styles.container, { backgroundColor: theme.colors.background }]}
+    >
+      {children}
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export default SafeAreaContainer;

package/src/components/screenContainer/ScrollViewContainer.tsx

@@ -0,0 +1,19 @@
+import { ScrollView, StyleSheet, type ViewProps } from 'react-native';
+import SafeAreaContainer from './SafeAreaContainer';
+
+//TODO : SafeAreaContainer가 적용되지 않음.
+const ScrollViewContainer = ({ children }: ViewProps) => {
+  return (
+    <SafeAreaContainer>
+      <ScrollView style={[styles.container]}>{children}</ScrollView>
+    </SafeAreaContainer>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export default ScrollViewContainer;

package/src/components/screenContainer/index.ts

@@ -0,0 +1,4 @@
+import SafeAreaContainer from './SafeAreaContainer';
+import ScrollViewContainer from './ScrollViewContainer';
+
+export { SafeAreaContainer, ScrollViewContainer };

package/src/components/skeleton/index.tsx

@@ -0,0 +1 @@
+// TODO: skeleton 구현 필요

package/src/components/slider/index.tsx

@@ -0,0 +1 @@
+// TODO: slider 구현 필요

package/src/components/switch/index.tsx

@@ -0,0 +1 @@
+// TODO: switch 구현 필요

package/src/components/text/commonText.tsx

@@ -0,0 +1,27 @@
+import { StyleSheet, Text } from 'react-native';
+import { type CommonTextProps, fontSizeType } from './types';
+import { useTheme } from '../../hooks/useTheme';
+
+const CommonText = ({ size = 'm', children, style }: CommonTextProps) => {
+  const { theme } = useTheme();
+  return (
+    <Text
+      style={[
+        { color: theme.colors.text },
+        styles.innerText,
+        fontSizeType[size],
+        style,
+      ]}
+    >
+      {children}
+    </Text>
+  );
+};
+
+const styles = StyleSheet.create({
+  innerText: {
+    fontFamily: 'Roboto',
+  },
+});
+
+export default CommonText;

package/src/components/text/index.ts

@@ -0,0 +1,3 @@
+import CommonText from './commonText';
+
+export { CommonText };

package/src/components/text/types.ts

@@ -0,0 +1,16 @@
+import { type TextProps, type TextStyle } from 'react-native';
+
+type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+
+export const fontSizeType: Record<SizeVariant, TextStyle> = {
+  s: { fontSize: 12, fontWeight: '600' },
+  m: { fontSize: 24, fontWeight: '700' },
+  l: { fontSize: 36, fontWeight: '900' },
+};
+
+export interface CommonTextProps extends TextProps {
+  type?: Variant;
+  size?: SizeVariant;
+  isInner?: boolean;
+}

package/src/hooks/useTheme.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { ThemeContext } from '../theme/themeProvider';
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+
+  if (!context) {
+    throw new Error('useTheme must be used within ThemeProvider');
+  }
+
+  return context;
+}

package/src/index.tsx

@@ -0,0 +1,18 @@
+export {
+  CommonText,
+  CommonButton,
+  CommonBadge,
+  SafeAreaContainer,
+  ScrollViewContainer,
+  CommonIcon,
+  CommonRating,
+  CommonAvatar,
+  CommonImage,
+  CheckBox,
+  CommonHeader,
+  CommonCard,
+  FoldableCard,
+  LinearProgressBar,
+  CircularProgressBar,
+} from './components';
+export { ThemeProvider } from './theme/themeProvider';

package/src/theme/color.ts

@@ -0,0 +1,7 @@
+export const palette = {
+  blue500: '#3478F6',
+  gray100: '#F5F5F5',
+  gray900: '#111111',
+  red500: '#FF3B30',
+  yellow500: '#FFCC00',
+};

package/src/theme/style.ts

@@ -0,0 +1,15 @@
+export const spacing = {
+  none: 0,
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+};
+
+export const radius = {
+  sm: 4,
+  md: 8,
+  lg: 12,
+  full: 999,
+};

package/src/theme/themeProvider.tsx

@@ -0,0 +1,25 @@
+import { createContext, type PropsWithChildren, useMemo } from 'react';
+import { lightTheme, darkTheme, type AppTheme, type ThemeMode } from './themes';
+
+type ThemeContextValue = {
+  theme: AppTheme;
+  mode: ThemeMode;
+};
+
+export const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+type Props = PropsWithChildren<{
+  mode?: ThemeMode;
+}>;
+
+export function ThemeProvider({ children, mode = 'light' }: Props) {
+  const theme = useMemo(() => {
+    return mode === 'dark' ? darkTheme : lightTheme;
+  }, [mode]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, mode }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}

package/src/theme/themes.ts

@@ -0,0 +1,71 @@
+// theme/themes.ts
+
+import { palette } from './color';
+import { spacing, radius } from './style';
+
+export type ThemeMode = 'light' | 'dark';
+
+export interface ThemeColors {
+  background: string;
+  surface: string;
+  text: string;
+
+  white: string;
+  primary: string;
+  secondary: string;
+  warning: string;
+  danger: string;
+
+  border: string;
+  disabled: string;
+}
+
+export type ThemeSpacing = typeof spacing;
+export type ThemeRadius = typeof radius;
+
+export interface AppTheme {
+  mode: ThemeMode;
+  colors: ThemeColors;
+  spacing: ThemeSpacing;
+  radius: ThemeRadius;
+}
+
+export const lightTheme: AppTheme = {
+  mode: 'light',
+  colors: {
+    background: '#FFFFFF',
+    surface: palette.gray100,
+    text: palette.gray900,
+
+    white: '#FFFFFF',
+    primary: palette.blue500,
+    secondary: '#8E8E93',
+    warning: palette.yellow500,
+    danger: palette.red500,
+
+    border: '#E5E5EA',
+    disabled: '#C7C7CC',
+  },
+  spacing,
+  radius,
+};
+
+export const darkTheme: AppTheme = {
+  mode: 'dark',
+  colors: {
+    background: '#000000',
+    surface: '#1C1C1E',
+    text: '#FFFFFF',
+
+    white: '#FFFFFF',
+    primary: palette.blue500,
+    secondary: '#AEAEB2',
+    warning: palette.yellow500,
+    danger: palette.red500,
+
+    border: '#38383A',
+    disabled: '#48484A',
+  },
+  spacing,
+  radius,
+};