cpk-ui 0.5.5 → 0.7.0

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

@@ -1,98 +0,0 @@
-import React, {type ReactElement} 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): ReactElement =>
-  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);
-  });
-
-  describe('sizes', () => {
-    test('renders with small size', () => {
-      const testingLib = render(Component({size: 'small'}));
-      const json = testingLib.toJSON();
-      expect(json).toBeTruthy();
-    });
-
-    test('renders with medium size', () => {
-      const testingLib = render(Component({size: 'medium'}));
-      const json = testingLib.toJSON();
-      expect(json).toBeTruthy();
-    });
-
-    test('renders with large size', () => {
-      const testingLib = render(Component({size: 'large'}));
-      const json = testingLib.toJSON();
-      expect(json).toBeTruthy();
-    });
-
-    test('renders with custom numeric size', () => {
-      const testingLib = render(Component({size: 32}));
-      const json = testingLib.toJSON();
-      expect(json).toBeTruthy();
-    });
-  });
-});

package/src/components/uis/Rating/Rating.tsx

@@ -1,200 +0,0 @@
-// React import is needed for expo-web
-import React, {useCallback, useMemo, useState, type ReactElement} from 'react';
-import type {StyleProp, ViewStyle} from 'react-native';
-import {Pressable, View} from 'react-native';
-import {styled, css} from 'kstyled';
-
-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 RatingSizeType = 'small' | 'medium' | 'large' | number;
-
-export type RatingProps = {
-  testID?: string;
-  styles?: Styles;
-  style?: StyleProp<ViewStyle>;
-  size?: RatingSizeType;
-  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 = 'medium',
-  iconType = 'star',
-  onRatingUpdate,
-  direction = 'horizontal',
-  allowHalfRating = true,
-  disabled = false,
-  color,
-}: RatingProps): ReactElement {
-  const iconSize = typeof size === 'number'
-    ? size
-    : size === 'small'
-      ? 18
-      : size === 'large'
-        ? 32
-        : 24;
-  const [rating, setRating] = useState(initialRating);
-
-  const iconPrefix = useMemo(
-    () => (iconType === 'star' ? 'Star' : 'QuestBox'),
-    [iconType]
-  );
-
-  const containerStyles = useMemo(
-    () => [
-      css`
-        flex-direction: ${direction === 'horizontal' ? 'row' : 'column'};
-      `,
-      style,
-    ],
-    [direction, style]
-  );
-
-  const starContainerStyles = useMemo(
-    () => [
-      css`
-        width: ${size}px;
-      `,
-      styles?.starContainer,
-    ],
-    [size, styles?.starContainer]
-  );
-
-  const handlePress = useCallback(
-    (newRating: number, halfPressed?: boolean) => {
-      const convertedRating = newRating + (!halfPressed ? 0.5 : 0);
-
-      setRating(convertedRating);
-
-      if (onRatingUpdate) {
-        onRatingUpdate(convertedRating);
-      }
-    },
-    [onRatingUpdate]
-  );
-
-  const renderStarIcon = useCallback(
-    ({
-      key,
-      position,
-    }: {
-      key: string;
-      position: number;
-    }): ReactElement => {
-      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={starContainerStyles}
-          testID={testID}
-        >
-          {halfFilled && allowHalfRating ? (
-            <View style={{position: 'absolute'}}>
-              <Icon
-                color={color}
-                name={`${iconPrefix}` as IconName}
-                size={iconSize}
-                style={{position: 'absolute'}}
-              />
-              <Icon
-                color={color}
-                name={`${iconPrefix}HalfFill` as IconName}
-                size={iconSize}
-              />
-            </View>
-          ) : (
-            <Icon
-              color={color}
-              name={iconName}
-              size={iconSize}
-              style={{position: 'absolute'}}
-            />
-          )}
-          <Pressable
-            accessibilityRole="button"
-            disabled={disabled}
-            onPress={() => handlePress(position, true)}
-          >
-            <View
-              style={{
-                width: iconSize / 2,
-                height: iconSize,
-                backgroundColor: 'transparent',
-              }}
-            />
-          </Pressable>
-          <Pressable
-            accessibilityRole="button"
-            disabled={disabled}
-            onPress={() => handlePress(position)}
-          >
-            <View
-              style={{
-                width: iconSize / 2,
-                height: iconSize,
-                backgroundColor: 'transparent',
-              }}
-            />
-          </Pressable>
-        </StarContainer>
-      );
-    },
-    [
-      rating,
-      allowHalfRating,
-      iconPrefix,
-      starContainerStyles,
-      testID,
-      color,
-      size,
-      disabled,
-      handlePress,
-    ]
-  );
-
-  const stars = useMemo(
-    () =>
-      [...Array(5)].map((_, index) => {
-        const position = index + (allowHalfRating ? 0.5 : 1);
-
-        return renderStarIcon({key: `${_}-${index}`, position});
-      }),
-    [allowHalfRating, renderStarIcon]
-  );
-
-  return (
-    <Container style={containerStyles}>
-      {stars}
-    </Container>
-  );
-}
-
-export default React.memo(Rating) as typeof Rating;