cpk-ui 0.0.1

package/components/uis/Rating/Rating.test.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import {fireEvent, render} from '@testing-library/react-native';
+
+import type {RatingProps} from './Rating';
+import {Rating} from './Rating';
+import {createComponent} from '../../../../test/testUtils';
+
+const Component = (props?: RatingProps): JSX.Element =>
+  createComponent(<Rating {...props} />);
+
+describe('Rating', () => {
+  test('renders five stars', () => {
+    const {getAllByTestId} = render(
+      Component({
+        testID: 'star',
+      }),
+    );
+    const stars = getAllByTestId('star');
+    expect(stars).toHaveLength(5);
+  });
+
+  test('renders half stars when allowHalfRating is true', () => {
+    const {getAllByTestId} = render(
+      Component({
+        testID: 'half-star',
+        allowHalfRating: true,
+      }),
+    );
+    const halfStars = getAllByTestId('half-star');
+    expect(halfStars).toHaveLength(5);
+  });
+
+  test('renders `dooboo` iconType', () => {
+    const {getAllByTestId} = render(
+      Component({
+        testID: 'star',
+        iconType: 'dooboo',
+      }),
+    );
+    const stars = getAllByTestId('star');
+    expect(stars).toHaveLength(5);
+  });
+
+  test('calls onRatingUpdate when a star is clicked', () => {
+    const handleRatingUpdate = jest.fn();
+    const {getAllByRole} = render(
+      Component({
+        onRatingUpdate: handleRatingUpdate,
+      }),
+    );
+    const thirdStar = getAllByRole('button')[0];
+
+    fireEvent.press(thirdStar);
+
+    expect(handleRatingUpdate).toHaveBeenCalledWith(0.5);
+  });
+
+  test('calls onRatingUpdate when a half star is clicked', () => {
+    const handleRatingUpdate = jest.fn();
+    const {getAllByRole} = render(
+      Component({
+        onRatingUpdate: handleRatingUpdate,
+        allowHalfRating: true,
+      }),
+    );
+    const thirdHalfStar = getAllByRole('button')[1];
+
+    fireEvent.press(thirdHalfStar);
+
+    expect(handleRatingUpdate).toHaveBeenCalledWith(1);
+  });
+});

package/components/uis/Rating/Rating.tsx

@@ -0,0 +1,155 @@
+// React import is needed for expo-web
+import React, {useState} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
+import {Pressable, View} from 'react-native';
+import styled, {css} from '@emotion/native';
+
+import type {IconName} from '../Icon/Icon';
+import {Icon} from '../Icon/Icon';
+
+const Container = styled.View`
+  flex-direction: row;
+`;
+
+const StarContainer = styled.View`
+  padding: 1px;
+
+  flex-direction: row;
+`;
+
+type Styles = {
+  starContainer: StyleProp<ViewStyle>;
+};
+
+export type RatingProps = {
+  testID?: string;
+  styles?: Styles;
+  style?: StyleProp<ViewStyle>;
+  size?: number;
+  iconType?: 'star' | 'dooboo';
+  initialRating?: number;
+  direction?: 'horizontal' | 'vertical';
+  allowHalfRating?: boolean;
+  onRatingUpdate?: (score: number) => void;
+  disabled?: boolean;
+  color?: string;
+};
+
+export function Rating({
+  testID,
+  style,
+  styles,
+  initialRating = 0,
+  size = 24,
+  iconType = 'star',
+  onRatingUpdate,
+  direction = 'horizontal',
+  allowHalfRating = true,
+  disabled = false,
+  color,
+}: RatingProps): JSX.Element {
+  const [rating, setRating] = useState(initialRating);
+  const iconPrefix = iconType === 'star' ? 'Star' : 'QuestBox';
+
+  const handlePress = (newRating: number, halfPressed?: boolean): void => {
+    const convertedRating = newRating + (!halfPressed ? 0.5 : 0);
+
+    setRating(convertedRating);
+
+    if (onRatingUpdate) {
+      onRatingUpdate(convertedRating);
+    }
+  };
+
+  const renderStarIcon = ({
+    key,
+    position,
+  }: {
+    key: string;
+    position: number;
+  }): JSX.Element => {
+    const filled = rating >= position + (allowHalfRating ? 0.5 : 0);
+    const iconName: IconName = filled ? `${iconPrefix}Fill` : `${iconPrefix}`;
+    const halfFilled =
+      rating >= position && rating < position + (allowHalfRating ? 0.5 : 0);
+
+    return (
+      <StarContainer
+        key={key}
+        style={[
+          css`
+            width: ${size + 'px'};
+          `,
+          styles?.starContainer,
+        ]}
+        testID={testID}
+      >
+        {halfFilled && allowHalfRating ? (
+          <View style={{position: 'absolute'}}>
+            <Icon
+              color={color}
+              name={`${iconPrefix}` as IconName}
+              size={size}
+              style={{position: 'absolute'}}
+            />
+            <Icon
+              color={color}
+              name={`${iconPrefix}HalfFill` as IconName}
+              size={size}
+            />
+          </View>
+        ) : (
+          <Icon
+            color={color}
+            name={iconName}
+            size={size}
+            style={{position: 'absolute'}}
+          />
+        )}
+        <Pressable
+          accessibilityRole="button"
+          disabled={disabled}
+          onPress={() => handlePress(position, true)}
+        >
+          <View
+            style={{
+              width: size / 2,
+              height: size,
+              backgroundColor: 'transparent',
+            }}
+          />
+        </Pressable>
+        <Pressable
+          accessibilityRole="button"
+          disabled={disabled}
+          onPress={() => handlePress(position)}
+        >
+          <View
+            style={{
+              width: size / 2,
+              height: size,
+              backgroundColor: 'transparent',
+            }}
+          />
+        </Pressable>
+      </StarContainer>
+    );
+  };
+
+  return (
+    <Container
+      style={[
+        css`
+          flex-direction: ${direction === 'horizontal' ? 'row' : 'column'};
+        `,
+        style,
+      ]}
+    >
+      {[...Array(5)].map((_, index) => {
+        const position = index + (allowHalfRating ? 0.5 : 1);
+
+        return renderStarIcon({key: `${_}-${index}`, position});
+      })}
+    </Container>
+  );
+}

package/components/uis/StatusbarBrightness/StatusBarBrightness.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StatusBar } from 'react-native';
+import { useTheme } from '../../../providers/ThemeProvider';
+function StatusBarBrightness({ type }) {
+    const { themeType } = useTheme();
+    const statusColor = type
+        ? type
+        : themeType === 'light'
+            ? 'dark-content'
+            : 'light-content';
+    return _jsx(StatusBar, { barStyle: statusColor });
+}
+export default StatusBarBrightness;

package/components/uis/StatusbarBrightness/StatusBarBrightness.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {View} from 'react-native';
+import type {RenderAPI} from '@testing-library/react-native';
+import {render} from '@testing-library/react-native';
+
+import {createComponent} from '../../../../test/testUtils';
+import StatusBarBrightness from './StatusBarBrightness';
+import {ThemeProvider} from '../../../providers/ThemeProvider';
+
+let testingLib: RenderAPI;
+
+const Component = (): JSX.Element =>
+  createComponent(
+    <View>
+      <StatusBarBrightness />
+    </View>,
+  );
+
+describe('[StatusBarBrightness]', () => {
+  it('should render without crashing', () => {
+    testingLib = render(Component());
+
+    const json = testingLib.toJSON();
+
+    expect(json).toBeTruthy();
+  });
+
+  it('should render [dark] mode', () => {
+    testingLib = render(
+      <ThemeProvider initialThemeType="dark">
+        <View>
+          <StatusBarBrightness />
+        </View>
+      </ThemeProvider>,
+    );
+
+    const json = testingLib.toJSON();
+
+    expect(json).toBeTruthy();
+  });
+});

package/components/uis/StatusbarBrightness/StatusBarBrightness.tsx

@@ -0,0 +1,17 @@
+import type {StatusBarStyle} from 'react-native';
+import {StatusBar} from 'react-native';
+import {useTheme} from '../../../providers/ThemeProvider';
+
+function StatusBarBrightness({type}: {type?: StatusBarStyle}): JSX.Element {
+  const {themeType} = useTheme();
+
+  const statusColor: StatusBarStyle = type
+    ? type
+    : themeType === 'light'
+      ? 'dark-content'
+      : 'light-content';
+
+  return <StatusBar barStyle={statusColor} />;
+}
+
+export default StatusBarBrightness;

package/components/uis/Styled/StyledComponents.js

@@ -0,0 +1,130 @@
+import { Animated } from 'react-native';
+import styled from '@emotion/native';
+import { isEmptyObject } from '../../../utils/theme';
+import { light } from '../../../utils/colors';
+// 기본 theme 설정 함수
+const resolveTheme = (theme) => isEmptyObject(theme) ? light : theme;
+// ButtonWrapper Component
+export const ButtonWrapper = styled.View `
+  border-width: ${({ outlined }) => (outlined ? '1px' : undefined)};
+  background-color: ${({ theme, type, outlined, loading, disabled }) => {
+    theme = resolveTheme(theme);
+    if (loading) {
+        return outlined ? undefined : theme.button[type].bg;
+    }
+    if (disabled) {
+        return undefined;
+    }
+    return outlined ? theme.bg.basic : theme.button[type ?? 'primary'].bg;
+}};
+  border-color: ${({ theme, type, disabled }) => {
+    theme = resolveTheme(theme);
+    if (disabled) {
+        return theme.bg.basic;
+    }
+    return theme.button[type].bg;
+}};
+`;
+// ButtonText Component
+export const ButtonText = styled.Text `
+  font-family: Pretendard;
+  color: ${({ theme, outlined, type, disabled }) => {
+    theme = resolveTheme(theme);
+    if (outlined) {
+        return theme.text.basic;
+    }
+    if (disabled) {
+        return theme.text.disabled;
+    }
+    return theme.button[type].text;
+}};
+`;
+// CheckboxWrapperOutlined Component
+export const CheckboxWrapperOutlined = styled(Animated.View) `
+  border-width: 1px;
+  border-color: ${({ theme, type, disabled }) => {
+    theme = resolveTheme(theme);
+    if (disabled) {
+        return theme.bg.disabled;
+    }
+    return type === 'light'
+        ? theme.role.primary
+        : theme.button[type ?? 'primary'].bg;
+}};
+`;
+// CheckboxWrapper Component
+export const CheckboxWrapper = styled(Animated.View) `
+  background-color: ${({ theme, checked, type, disabled }) => {
+    theme = resolveTheme(theme);
+    if (disabled) {
+        return undefined;
+    }
+    if (!checked) {
+        return theme.bg.disabled;
+    }
+    return type === 'light'
+        ? theme.role.primary
+        : theme.button[type ?? 'primary'].bg;
+}};
+`;
+// RadioButtonWrapper Component
+export const RadioButtonWrapper = styled.View `
+  border-width: 1px;
+  border-color: ${({ theme, type, selected, disabled }) => {
+    theme = resolveTheme(theme);
+    if (disabled) {
+        return theme.bg.disabled;
+    }
+    if (!selected) {
+        return theme.text.basic;
+    }
+    return type === 'light'
+        ? theme.role.primary
+        : theme.button[type ?? 'primary'].bg;
+}};
+`;
+// RadioWrapper Component
+export const RadioWrapper = styled(Animated.View) `
+  background-color: ${({ theme, selected, type, disabled }) => {
+    theme = resolveTheme(theme);
+    if (disabled) {
+        return theme.bg.disabled;
+    }
+    if (!selected) {
+        return theme.role.primary;
+    }
+    return theme.button[type ?? 'primary'].bg;
+}};
+`;
+// ColoredText Component
+export const ColoredText = styled.Text `
+  font-family: Pretendard;
+  color: ${({ theme, selected, type, disabled }) => {
+    theme = resolveTheme(theme);
+    if (disabled) {
+        return undefined;
+    }
+    if (!selected) {
+        return theme.text.basic;
+    }
+    return type === 'light'
+        ? theme.role.primary
+        : theme.button[type ?? 'primary'].bg;
+}};
+`;
+// SnackbarWrapper Component
+export const SnackbarWrapper = styled(Animated.View) `
+  background-color: ${({ theme, type }) => {
+    theme = resolveTheme(theme);
+    return !type ? theme.bg.disabled : theme.button[type ?? 'light'].bg;
+}};
+  flex-direction: row;
+  text-align: left;
+  align-items: center;
+  align-self: center;
+  position: absolute;
+  font-size: 16px;
+  padding: 10px 20px;
+  bottom: 20px;
+  border-radius: 20px;
+`;

package/components/uis/Styled/StyledComponents.tsx

@@ -0,0 +1,200 @@
+import {Animated} from 'react-native';
+import styled from '@emotion/native';
+import {CpkTheme, isEmptyObject} from '../../../utils/theme';
+import {light} from '../../../utils/colors';
+
+export type ButtonType =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'light';
+
+export type SnackbarType =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'warning'
+  | 'info'
+  | 'danger';
+
+// 기본 theme 설정 함수
+const resolveTheme = (theme?: CpkTheme) =>
+  isEmptyObject(theme) ? light : theme!;
+
+// ButtonWrapper Component
+export const ButtonWrapper = styled.View<{
+  type?: ButtonType;
+  outlined?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+}>`
+  border-width: ${({outlined}) => (outlined ? '1px' : undefined)};
+  background-color: ${({theme, type, outlined, loading, disabled}) => {
+    theme = resolveTheme(theme);
+
+    if (loading) {
+      return outlined ? undefined : theme.button[type!].bg;
+    }
+    if (disabled) {
+      return undefined;
+    }
+    return outlined ? theme.bg.basic : theme.button[type ?? 'primary'].bg;
+  }};
+  border-color: ${({theme, type, disabled}) => {
+    theme = resolveTheme(theme);
+
+    if (disabled) {
+      return theme.bg.basic;
+    }
+    return theme.button[type!].bg;
+  }};
+`;
+
+// ButtonText Component
+export const ButtonText = styled.Text<{
+  outlined?: boolean;
+  type?: ButtonType | SnackbarType;
+  disabled?: boolean;
+  loading?: boolean;
+  theme?: CpkTheme;
+}>`
+  font-family: Pretendard;
+  color: ${({theme, outlined, type, disabled}) => {
+    theme = resolveTheme(theme);
+
+    if (outlined) {
+      return theme.text.basic;
+    }
+    if (disabled) {
+      return theme.text.disabled;
+    }
+    return theme.button[type!].text;
+  }};
+`;
+
+// CheckboxWrapperOutlined Component
+export const CheckboxWrapperOutlined = styled(Animated.View)<{
+  type: ButtonType;
+  disabled?: boolean;
+  checked?: boolean;
+}>`
+  border-width: 1px;
+  border-color: ${({theme, type, disabled}) => {
+    theme = resolveTheme(theme);
+
+    if (disabled) {
+      return theme.bg.disabled;
+    }
+    return type === 'light'
+      ? theme.role.primary
+      : theme.button[type ?? 'primary'].bg;
+  }};
+`;
+
+// CheckboxWrapper Component
+export const CheckboxWrapper = styled(Animated.View)<{
+  type: ButtonType;
+  disabled?: boolean;
+  checked?: boolean;
+}>`
+  background-color: ${({theme, checked, type, disabled}) => {
+    theme = resolveTheme(theme);
+
+    if (disabled) {
+      return undefined;
+    }
+    if (!checked) {
+      return theme.bg.disabled;
+    }
+    return type === 'light'
+      ? theme.role.primary
+      : theme.button[type ?? 'primary'].bg;
+  }};
+`;
+
+// RadioButtonWrapper Component
+export const RadioButtonWrapper = styled.View<{
+  type: ButtonType;
+  selected?: boolean;
+  disabled?: boolean;
+}>`
+  border-width: 1px;
+  border-color: ${({theme, type, selected, disabled}) => {
+    theme = resolveTheme(theme);
+
+    if (disabled) {
+      return theme.bg.disabled;
+    }
+    if (!selected) {
+      return theme.text.basic;
+    }
+    return type === 'light'
+      ? theme.role.primary
+      : theme.button[type ?? 'primary'].bg;
+  }};
+`;
+
+// RadioWrapper Component
+export const RadioWrapper = styled(Animated.View)<{
+  type: ButtonType;
+  disabled?: boolean;
+  selected?: boolean;
+}>`
+  background-color: ${({theme, selected, type, disabled}) => {
+    theme = resolveTheme(theme);
+
+    if (disabled) {
+      return theme.bg.disabled;
+    }
+    if (!selected) {
+      return theme.role.primary;
+    }
+    return theme.button[type ?? 'primary'].bg;
+  }};
+`;
+
+// ColoredText Component
+export const ColoredText = styled.Text<{
+  type: ButtonType;
+  disabled?: boolean;
+  selected?: boolean;
+}>`
+  font-family: Pretendard;
+  color: ${({theme, selected, type, disabled}) => {
+    theme = resolveTheme(theme);
+
+    if (disabled) {
+      return undefined;
+    }
+    if (!selected) {
+      return theme.text.basic;
+    }
+    return type === 'light'
+      ? theme.role.primary
+      : theme.button[type ?? 'primary'].bg;
+  }};
+`;
+
+// SnackbarWrapper Component
+export const SnackbarWrapper = styled(Animated.View)<{
+  type?: SnackbarType;
+  checked?: boolean;
+}>`
+  background-color: ${({theme, type}) => {
+    theme = resolveTheme(theme);
+
+    return !type ? theme.bg.disabled : theme.button[type ?? 'light'].bg;
+  }};
+  flex-direction: row;
+  text-align: left;
+  align-items: center;
+  align-self: center;
+  position: absolute;
+  font-size: 16px;
+  padding: 10px 20px;
+  bottom: 20px;
+  border-radius: 20px;
+`;