feat(rating): add rating component

Author: minheq

jest.config.snapshot.js

@@ -7,6 +7,7 @@ module.exports = {
     '^.+\\.jsx?$': 'babel-jest',
     '^.+\\.mdx?$': '<rootDir>/tests/mdxTransformer.js',
   },
+  transformIgnorePatterns: ['/node_modules/(?!react-native-svg).+\\.js$'],
   moduleNameMapper: {
     '^docz$': '<rootDir>/tests/doczMock.js',
   },

package.json

@@ -42,6 +42,7 @@
     "exenv": "1.2.2",
     "focus-trap": "5.0.0",
     "react-icons": "3.7.0",
+    "react-native-svg": "9.4.0",
     "react-native-web": "0.11.2",
     "react-spring": "9.0.0-beta.1",
     "ts-essentials": "2.0.7"

src/components/Rating/Rating.mdx

@@ -0,0 +1,35 @@
+---
+name: Rating
+menu: Components
+---
+
+import { Counter as CounterContainer } from 'react-powerplug';
+import { Playground, Props } from 'docz';
+import { Rating } from '.';
+
+# Rating
+
+### Usage
+
+<Playground>
+  <CounterContainer initial={3}>
+    {({ count: rating, set }) => (
+      <Rating
+        value={rating}
+        size="small"
+        color="#67c6bb"
+        onChange={value => set(value)}
+        getStyles={(props, theme) => ({
+          containerStyle: {},
+          touchableStyle: {},
+          starColor: '#67c6bb', // defined as color prop
+          starSize: 40, // defined as size prop
+        })}
+      />
+    )}
+  </CounterContainer>
+</Playground>
+
+### Props
+
+<Props of={Rating} />

src/components/Rating/Rating.styles.ts

@@ -0,0 +1,38 @@
+import { ViewStyle } from 'react-native';
+
+import { ControlSize, TextColor, Theme } from '../../theme/ThemeInterface';
+import { getTextColor } from '../Typography/Text.styles';
+
+export interface RatingStylesProps {
+  size: ControlSize;
+  color: TextColor;
+}
+
+export type GetRatingStyles = (
+  progressStylesProps: RatingStylesProps,
+  theme: Theme,
+) => RatingStyles;
+
+export interface RatingStyles {
+  touchableStyle: ViewStyle;
+  containerStyle: ViewStyle;
+  starColor: string;
+  starSize: number;
+}
+
+export const getRatingStyles: GetRatingStyles = ({ size, color }, theme) => {
+  const starSize = theme.controlHeights[size];
+  const padding = theme.controlPaddings[size];
+
+  return {
+    containerStyle: {
+      flexDirection: 'row',
+    },
+    touchableStyle: {
+      paddingRight: padding,
+    },
+
+    starColor: getTextColor(theme.colors.text)(color),
+    starSize,
+  };
+};

src/components/Rating/Rating.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { DeepPartial } from 'ts-essentials';
+
+import { ControlSize, TextColor, useTheme } from '../../theme';
+import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
+import {
+  GetRatingStyles,
+  getRatingStyles,
+  RatingStyles,
+} from './Rating.styles';
+import { Star } from './Star';
+
+export interface RatingProps {
+  value?: number;
+  maxRating?: number;
+  size?: ControlSize;
+  getStyles?: ReplaceReturnType<GetRatingStyles, DeepPartial<RatingStyles>>;
+  onChange?: (value: number) => void;
+  color?: TextColor;
+}
+
+export const Rating = (props: RatingProps) => {
+  const {
+    value = 0,
+    maxRating = 5,
+    size = 'medium',
+    getStyles,
+    onChange = () => undefined,
+    color = 'primary',
+  } = props;
+  const theme = useTheme();
+
+  const { containerStyle, starColor, starSize, touchableStyle } = mergeStyles(
+    getRatingStyles,
+    getStyles,
+  )({ size, color }, theme);
+
+  return (
+    <View style={containerStyle}>
+      {new Array(maxRating).fill(0).map((_, index) => {
+        const currentValue = index + 1;
+        const isWithinRating = currentValue <= value;
+        const isLast = currentValue === maxRating;
+
+        return (
+          <TouchableOpacity
+            key={currentValue}
+            style={{
+              ...touchableStyle,
+              ...(isLast ? { paddingRight: 0 } : {}),
+            }}
+            onPress={() => onChange(currentValue)}
+          >
+            <Star color={starColor} size={starSize} isFilled={isWithinRating} />
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};

src/components/Rating/Star.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Polygon, Svg } from 'react-native-svg';
+
+import { useTheme } from '../../theme';
+
+export interface StarProps {
+  size?: number;
+  isFilled?: boolean;
+  color?: string;
+}
+
+export const Star = (props: StarProps) => {
+  const { size = 24, color, isFilled = false } = props;
+  const theme = useTheme();
+
+  const coercedSize = String(size);
+
+  const finalColor = color || theme.fills.subtle.yellow.backgroundColor;
+
+  return (
+    <Svg
+      width={coercedSize}
+      height={coercedSize}
+      viewBox={`0 0 24 24`}
+      fill={isFilled ? finalColor : 'none'}
+      stroke={finalColor}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <Polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+    </Svg>
+  );
+};

src/components/Rating/index.ts

@@ -0,0 +1,2 @@
+export * from './Rating';
+export * from './Star';

src/components/index.ts

@@ -1,25 +1,28 @@
 export * from './Alert';
 export * from './Avatar';
 export * from './Badge';
+export * from './Box';
 export * from './Button';
 export * from './Checkbox';
+export * from './Collapsible';
 export * from './Counter';
 export * from './Dialog';
 export * from './Divider';
-export * from './Helpers';
 export * from './Form';
-export * from './Box';
+export * from './Grid';
+export * from './Helpers';
+export * from './Inputs';
 export * from './ListItem';
 export * from './Loading';
 export * from './Modal';
 export * from './Overlay';
 export * from './Pickers';
-export * from './Positioner';
 export * from './Popover';
+export * from './Positioner';
 export * from './ProgressBar';
+export * from './Rating';
 export * from './SelectList';
 export * from './Switch';
-export * from './Inputs';
 export * from './Tabs';
 export * from './Toast';
 export * from './Typography';