@kukkim/react-native-ui 0.1.0

package/src/components/button/index.ts

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

package/src/components/button/types.ts

@@ -0,0 +1,29 @@
+import {
+  type PressableProps,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+
+type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+
+export const sizeType: Record<SizeVariant, ViewStyle> = {
+  s: { width: 16, height: 16 },
+  m: { width: 20, height: 20 },
+  l: { width: 24, height: 24 },
+};
+
+export const fontSizeType: Record<SizeVariant, TextStyle> = {
+  s: { fontSize: 12 },
+  m: { fontSize: 16 },
+  l: { fontSize: 20 },
+};
+
+export interface ButtonProps extends PressableProps {
+  type?: Variant;
+  size?: SizeVariant;
+}
+
+export interface CommonButtonProps extends ButtonProps {
+  title?: string;
+}

package/src/components/card/commonCard.tsx

@@ -0,0 +1,67 @@
+import { StyleSheet, View } from 'react-native';
+import { CommonText } from '../text';
+import { type CommonCardProps } from './types';
+import { useTheme } from '../../hooks/useTheme';
+
+const CommonCard = ({ children, type = 'primary', title }: CommonCardProps) => {
+  const { theme } = useTheme();
+  return (
+    <View style={styles.container}>
+      {title && (
+        <View
+          style={[
+            styles.titleContainer,
+            {
+              backgroundColor: theme.colors[type],
+            },
+          ]}
+        >
+          <CommonText
+            style={[
+              styles.titleText,
+              {
+                color: theme.colors.white,
+              },
+            ]}
+          >
+            {title}
+          </CommonText>
+        </View>
+      )}
+      <View
+        style={[
+          styles.contentContainer,
+          {
+            borderColor: theme.colors[type],
+          },
+        ]}
+      >
+        {children}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    padding: 10,
+  },
+  titleContainer: {
+    alignSelf: 'flex-start',
+    borderRadius: 5,
+    marginLeft: 5,
+    padding: 5,
+    zIndex: 1,
+  },
+  titleText: {
+    fontSize: 20,
+  },
+  contentContainer: {
+    borderWidth: 2,
+    borderRadius: 5,
+    padding: 10,
+  },
+});
+
+export default CommonCard;

package/src/components/card/foldableCard.tsx

@@ -0,0 +1,88 @@
+import { StyleSheet, View, Pressable } from 'react-native';
+import { CommonText } from '../text';
+import { type FoldableCardProps } from './types';
+import { useTheme } from '../../hooks/useTheme';
+// import Animated, {
+//   FadeIn,
+//   FadeOut,
+//   LinearTransition,
+// } from 'react-native-reanimated';
+
+//TODO: React-native-reanimated 적용시키기
+// const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+const FoldableCard = ({
+  children,
+  type = 'primary',
+  title,
+  value,
+  onPress,
+}: FoldableCardProps) => {
+  const { theme } = useTheme();
+  return (
+    <View style={styles.container}>
+      <Pressable
+        // <AnimatedPressable
+        style={[
+          styles.titleContainer,
+          {
+            backgroundColor: theme.colors[type],
+          },
+        ]}
+        onPress={onPress}
+        // layout={LinearTransition.duration(200)}
+      >
+        <CommonText
+          style={[
+            styles.titleText,
+            {
+              color: theme.colors.white,
+            },
+          ]}
+        >
+          {title}
+        </CommonText>
+        {/* </AnimatedPressable> */}
+      </Pressable>
+      {value && (
+        <View
+          // <Animated.View
+          // entering={FadeIn}
+          // exiting={FadeOut}
+          style={[
+            styles.contentContainer,
+            {
+              borderColor: theme.colors[type],
+            },
+          ]}
+        >
+          {children}
+          {/* </Animated.View> */}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    padding: 10,
+  },
+  titleContainer: {
+    alignSelf: 'flex-start',
+    borderRadius: 5,
+    marginLeft: 5,
+    padding: 5,
+    zIndex: 1,
+  },
+  titleText: {
+    fontSize: 20,
+  },
+  contentContainer: {
+    borderWidth: 2,
+    borderRadius: 5,
+    padding: 10,
+  },
+});
+
+export default FoldableCard;

package/src/components/card/index.ts

@@ -0,0 +1,4 @@
+import CommonCard from './commonCard';
+import FoldableCard from './foldableCard';
+
+export { CommonCard, FoldableCard };

package/src/components/card/types.ts

@@ -0,0 +1,18 @@
+import { type ViewProps, type ViewStyle } from 'react-native';
+
+type Variant = 'primary' | 'secondary';
+
+export interface CardProps extends ViewProps {
+  type?: Variant;
+}
+
+export interface CommonCardProps extends CardProps {
+  title?: string;
+}
+
+export interface FoldableCardProps extends CardProps {
+  title: string;
+  titleStyle?: ViewStyle;
+  value: boolean;
+  onPress?: () => void;
+}

package/src/components/checkBox/index.tsx

@@ -0,0 +1,41 @@
+import { Pressable, StyleSheet } from 'react-native';
+import { type CheckBoxProps, sizeType } from './types';
+import { useTheme } from '../../hooks/useTheme';
+import { CommonIcon } from '../icon';
+
+export const CheckBox = ({
+  size = 'm',
+  disabled,
+  value,
+  onPress,
+  ...props
+}: CheckBoxProps) => {
+  const { theme } = useTheme();
+  return (
+    <Pressable
+      onPress={onPress}
+      style={[
+        sizeType[size],
+        styles.container,
+        disabled
+          ? { borderColor: theme.colors.disabled }
+          : { borderColor: theme.colors.primary },
+      ]}
+      disabled={disabled}
+      {...props}
+    >
+      {value && (
+        <CommonIcon
+          color={disabled ? theme.colors.disabled : theme.colors.primary}
+          iconType="check"
+        />
+      )}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderWidth: 1,
+  },
+});

package/src/components/checkBox/types.ts

@@ -0,0 +1,16 @@
+import { type PressableProps, type ViewStyle } from 'react-native';
+
+type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+
+export const sizeType: Record<SizeVariant, ViewStyle> = {
+  s: { width: 16, height: 16 },
+  m: { width: 20, height: 20 },
+  l: { width: 24, height: 24 },
+};
+
+export interface CheckBoxProps extends PressableProps {
+  type?: Variant;
+  size?: SizeVariant;
+  value: Boolean;
+}

package/src/components/header/commonHeader.tsx

@@ -0,0 +1,55 @@
+import { StyleSheet, View, Pressable } from 'react-native';
+import { CommonText } from '../text';
+import { type HeaderProps } from './types';
+import { CommonIcon } from '../icon';
+
+const CommonHeader = ({ title, left, right, style, ...props }: HeaderProps) => {
+  return (
+    <View style={[styles.container, styles.flexRow, style]} {...props}>
+      <View style={styles.center} pointerEvents="none">
+        <CommonText size="m" numberOfLines={1}>
+          {title}
+        </CommonText>
+      </View>
+      <Pressable style={[styles.flexRow, styles.side]} onPress={left?.onPress}>
+        {left?.icon ? <CommonIcon iconType={left.icon} /> : null}
+        <CommonText size="m">{left?.title}</CommonText>
+      </Pressable>
+      <Pressable
+        style={[styles.flexRow, styles.side, styles.right]}
+        onPress={right?.onPress}
+      >
+        <CommonText size="m">{right?.title}</CommonText>
+        {right?.icon ? <CommonIcon iconType={right.icon} /> : null}
+      </Pressable>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: 56,
+    paddingHorizontal: 8,
+    gap: 10,
+  },
+  center: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  side: {
+    flex: 1,
+    gap: 5,
+  },
+  right: {
+    justifyContent: 'flex-end',
+  },
+  flexRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
+
+export default CommonHeader;

package/src/components/header/index.ts

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

package/src/components/header/types.ts

@@ -0,0 +1,30 @@
+import { type TextStyle, type ViewProps, type ViewStyle } from 'react-native';
+
+type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+
+export const sizeType: Record<SizeVariant, ViewStyle> = {
+  s: { width: 16, height: 16 },
+  m: { width: 20, height: 20 },
+  l: { width: 24, height: 24 },
+};
+
+export const fontSizeType: Record<SizeVariant, TextStyle> = {
+  s: { fontSize: 10 },
+  m: { fontSize: 12 },
+  l: { fontSize: 14 },
+};
+
+interface HeaderAction {
+  icon?: 'back' | 'close';
+  title?: string;
+  onPress?: () => void;
+}
+
+export interface HeaderProps extends ViewProps {
+  type?: Variant;
+  size?: SizeVariant;
+  title?: string;
+  left?: HeaderAction;
+  right?: HeaderAction;
+}

package/src/components/icon/ArrowDownToLine.tsx

@@ -0,0 +1,21 @@
+// import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import type { SvgProps } from 'react-native-svg';
+const SvgArrowDownToLine = (props: SvgProps) => (
+  <Svg
+    // xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    stroke={props.color}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    // className="arrow-down-to-line_svg__lucide arrow-down-to-line_svg__lucide-arrow-down-to-line-icon arrow-down-to-line_svg__lucide-arrow-down-to-line"
+    viewBox="0 0 24 24"
+    width={props.width ?? 24}
+    height={props.height ?? 24}
+    {...props}
+  >
+    <Path d="M12 17V3M6 11l6 6 6-6M19 21H5" />
+  </Svg>
+);
+export default SvgArrowDownToLine;

package/src/components/icon/ArrowDownWideNarrow.tsx

@@ -0,0 +1,21 @@
+// import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import type { SvgProps } from 'react-native-svg';
+const SvgArrowDownWideNarrow = (props: SvgProps) => (
+  <Svg
+    // xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    stroke={props.color}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    // className="arrow-down-wide-narrow_svg__lucide arrow-down-wide-narrow_svg__lucide-arrow-down-wide-narrow-icon arrow-down-wide-narrow_svg__lucide-arrow-down-wide-narrow"
+    viewBox="0 0 24 24"
+    width={props.width ?? 24}
+    height={props.height ?? 24}
+    {...props}
+  >
+    <Path d="m3 16 4 4 4-4M7 20V4M11 4h10M11 8h7M11 12h4" />
+  </Svg>
+);
+export default SvgArrowDownWideNarrow;

package/src/components/icon/ArrowLeft.tsx

@@ -0,0 +1,21 @@
+// import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import type { SvgProps } from 'react-native-svg';
+const SvgArrowLeft = (props: SvgProps) => (
+  <Svg
+    // xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    stroke={props.color}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    // className="arrow-left_svg__lucide arrow-left_svg__lucide-arrow-left-icon arrow-left_svg__lucide-arrow-left"
+    viewBox="0 0 24 24"
+    width={props.width ?? 24}
+    height={props.height ?? 24}
+    {...props}
+  >
+    <Path d="m12 19-7-7 7-7M19 12H5" />
+  </Svg>
+);
+export default SvgArrowLeft;

package/src/components/icon/Check.tsx

@@ -0,0 +1,21 @@
+// import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import type { SvgProps } from 'react-native-svg';
+const SvgCheck = (props: SvgProps) => (
+  <Svg
+    // xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    stroke={props.color}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    // className="check_svg__lucide check_svg__lucide-check-icon check_svg__lucide-check"
+    viewBox="0 0 24 24"
+    width={props.width ?? 24}
+    height={props.height ?? 24}
+    {...props}
+  >
+    <Path d="M20 6 9 17l-5-5" />
+  </Svg>
+);
+export default SvgCheck;

package/src/components/icon/ChevronDown.tsx

@@ -0,0 +1,21 @@
+// import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import type { SvgProps } from 'react-native-svg';
+const SvgChevronDown = (props: SvgProps) => (
+  <Svg
+    // xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    stroke={props.color}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    // className="chevron-down_svg__lucide chevron-down_svg__lucide-chevron-down-icon chevron-down_svg__lucide-chevron-down"
+    viewBox="0 0 24 24"
+    width={props.width ?? 24}
+    height={props.height ?? 24}
+    {...props}
+  >
+    <Path d="m6 9 6 6 6-6" />
+  </Svg>
+);
+export default SvgChevronDown;

package/src/components/icon/Copy.tsx

@@ -0,0 +1,22 @@
+// import * as React from 'react';
+import Svg, { Rect, Path } from 'react-native-svg';
+import type { SvgProps } from 'react-native-svg';
+const SvgCopy = (props: SvgProps) => (
+  <Svg
+    // xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    stroke={props.color}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    // className="copy_svg__lucide copy_svg__lucide-copy-icon copy_svg__lucide-copy"
+    viewBox="0 0 24 24"
+    width={props.width ?? 24}
+    height={props.height ?? 24}
+    {...props}
+  >
+    <Rect width={14} height={14} x={8} y={8} rx={2} ry={2} />
+    <Path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+  </Svg>
+);
+export default SvgCopy;

package/src/components/icon/RotateCw.tsx

@@ -0,0 +1,22 @@
+// import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import type { SvgProps } from 'react-native-svg';
+const SvgRotateCw = (props: SvgProps) => (
+  <Svg
+    // xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    stroke={props.color}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    // className="rotate-cw_svg__lucide rotate-cw_svg__lucide-rotate-cw-icon rotate-cw_svg__lucide-rotate-cw"
+    viewBox="0 0 24 24"
+    width={props.width ?? 24}
+    height={props.height ?? 24}
+    {...props}
+  >
+    <Path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
+    <Path d="M21 3v5h-5" />
+  </Svg>
+);
+export default SvgRotateCw;

package/src/components/icon/SquareArrowOutUpRight.tsx

@@ -0,0 +1,21 @@
+// import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import type { SvgProps } from 'react-native-svg';
+const SvgSquareArrowOutUpRight = (props: SvgProps) => (
+  <Svg
+    // xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    stroke={props.color}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    // className="square-arrow-out-up-right_svg__lucide square-arrow-out-up-right_svg__lucide-square-arrow-out-up-right-icon square-arrow-out-up-right_svg__lucide-square-arrow-out-up-right"
+    viewBox="0 0 24 24"
+    width={props.width ?? 24}
+    height={props.height ?? 24}
+    {...props}
+  >
+    <Path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6M21 3l-9 9M15 3h6v6" />
+  </Svg>
+);
+export default SvgSquareArrowOutUpRight;

package/src/components/icon/StarEmpty.tsx

@@ -0,0 +1,21 @@
+// import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import type { SvgProps } from 'react-native-svg';
+const SvgStarEmpty = (props: SvgProps) => (
+  <Svg
+    // xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    stroke={props.color}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    // className="star-empty_svg__lucide star-empty_svg__lucide-star-icon star-empty_svg__lucide-star"
+    viewBox="0 0 24 24"
+    width={props.width ?? 24}
+    height={props.height ?? 24}
+    {...props}
+  >
+    <Path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.12 2.12 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.12 2.12 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.12 2.12 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16z" />
+  </Svg>
+);
+export default SvgStarEmpty;

package/src/components/icon/StarFull.tsx

@@ -0,0 +1,21 @@
+// import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import type { SvgProps } from 'react-native-svg';
+const SvgStarFull = (props: SvgProps) => (
+  <Svg
+    // xmlns="http://www.w3.org/2000/svg"
+    fill={props.color}
+    stroke={props.color}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    // className="star-full_svg__lucide star-full_svg__lucide-star-icon star-full_svg__lucide-star"
+    viewBox="0 0 24 24"
+    width={props.width ?? 24}
+    height={props.height ?? 24}
+    {...props}
+  >
+    <Path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.12 2.12 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.12 2.12 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.12 2.12 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16z" />
+  </Svg>
+);
+export default SvgStarFull;

package/src/components/icon/StarHalf.tsx

@@ -0,0 +1,32 @@
+// import * as React from 'react';
+import Svg, { Defs, ClipPath, Path } from 'react-native-svg';
+import type { SvgProps } from 'react-native-svg';
+const SvgStarHalf = (props: SvgProps) => (
+  <Svg
+    // xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width={props.width ?? 24}
+    height={props.height ?? 24}
+    {...props}
+  >
+    <Defs>
+      <ClipPath id="star-half_svg__a">
+        <Path d="M0 0h12v24H0z" />
+      </ClipPath>
+    </Defs>
+    <Path
+      fill={props.color}
+      d="m12 2.5 2.93 5.94 6.56.96-4.75 4.63 1.12 6.53L12 17.5l-5.86 3.06 1.12-6.53L2.51 9.4l6.56-.96z"
+      clipPath="url(#star-half_svg__a)"
+    />
+    <Path
+      fill="none"
+      stroke={props.color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="m12 2.5 2.93 5.94 6.56.96-4.75 4.63 1.12 6.53L12 17.5l-5.86 3.06 1.12-6.53L2.51 9.4l6.56-.96z"
+    />
+  </Svg>
+);
+export default SvgStarHalf;

package/src/components/icon/X.tsx

@@ -0,0 +1,21 @@
+// import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import type { SvgProps } from 'react-native-svg';
+const SvgX = (props: SvgProps) => (
+  <Svg
+    // xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    stroke={props.color}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    // className="x_svg__lucide x_svg__lucide-x-icon x_svg__lucide-x"
+    viewBox="0 0 24 24"
+    width={props.width ?? 24}
+    height={props.height ?? 24}
+    {...props}
+  >
+    <Path d="M18 6 6 18M6 6l12 12" />
+  </Svg>
+);
+export default SvgX;