@quintype/native-components 2.20.27 → 2.20.28-beta.1

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [2.20.28](https://github.com/quintype/native-components/compare/v2.20.27...v2.20.28) (2024-05-17)
+
 ### [2.20.27](https://github.com/quintype/native-components/compare/v2.20.26...v2.20.27) (2024-05-17)
 
 ### [2.20.26](https://github.com/quintype/native-components/compare/v2.20.25...v2.20.26) (2024-05-17)

package/bin-dev-scripts/standard-version-release.sh

@@ -1,15 +1,15 @@
-#!/bin/bash -e
+# #!/bin/bash -e
 
-npm install
-git diff --quiet
+# npm install
+# git diff --quiet
 
-BRANCH=$(git symbolic-ref --short HEAD)
+# BRANCH=$(git symbolic-ref --short HEAD)
 
-if [ "$BRANCH" == 'master' ]
-then
-  npx standard-version
-else
-  npx standard-version --prerelease "$(git symbolic-ref --short HEAD | sed s:/:-:g )" --skip.changelog=true
-fi
+# if [ "$BRANCH" == 'master' ]
+# then
+#   npx standard-version
+# else
+#   npx standard-version --prerelease "$(git symbolic-ref --short HEAD | sed s:/:-:g )" --skip.changelog=true
+# fi
 
-git push --follow-tags origin "$BRANCH"
+# git push --follow-tags origin "$BRANCH"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.20.27",
+  "version": "2.20.28-beta.1",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -23,7 +23,8 @@
     "react-native-pdf": "^5.1.4",
     "react-native-render-html": "^4.2.3",
     "react-native-share": "^8.1.0",
-    "rn-fetch-blob": "^0.10.16"
+    "rn-fetch-blob": "^0.10.16",
+    "react-native-star-rating-widget": "^1.7.3"
   },
   "peerDependencies": {
     "@react-navigation/native": ">=5.7.3",

package/src/components/Rating/index.js

@@ -0,0 +1,45 @@
+import PropTypes from "prop-types";
+import React, { useContext } from "react";
+import { View } from "react-native";
+import { Text } from "../Text";
+import {ratingStyles} from './styles'
+import { AppTheme } from "../../utils";
+import { StarRatingDisplay } from 'react-native-star-rating-widget';
+
+export const RatingLayout = ({ reviewTitle, ratingValue, ratingLabel }) => {  
+    const { theme } = useContext(AppTheme);
+    const {
+      COLORS, FONT_FAMILY, FONT_SIZE
+    } = theme;
+    const styles = ratingStyles(COLORS, FONT_SIZE, FONT_FAMILY);
+    
+    return (
+        <View style={styles.container}>
+          {reviewTitle && <Text
+            style={styles.reviewTitle}
+          >
+            {reviewTitle}
+          </Text>}
+          {ratingValue && <View style={styles.child}>
+            <Text
+              style={styles.ratingLable}
+            >
+              {`${ratingLabel}/5`}
+            </Text>
+            <StarRatingDisplay
+              rating={ratingValue}
+              starSize={FONT_SIZE.title}
+              color={COLORS.REVIEW_STAR_COLOR ?? '#F5A623'}
+              style={styles.starContiner}
+              starStyle={styles.starStyle}
+            />
+          </View>}
+        </View>
+      );
+};
+
+RatingLayout.propTypes = {
+  reviewTitle: PropTypes.string.isRequired,
+  ratingValue: PropTypes.number.isRequired,
+  ratingLabel: PropTypes.string.isRequired
+};

package/src/components/Rating/styles.js

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native';
+
+export const ratingStyles = (COLORS, FONT_SIZE, FONT_FAMILY) => StyleSheet.create({
+  container: { marginLeft: 10, marginTop: 10 },
+  reviewTitle: {
+    fontSize: FONT_SIZE.h2,
+    fontWeight: "700",
+    lineHeight: 24,
+    fontFamily: FONT_FAMILY.primary,
+    color: COLORS.BRAND_BLACK,
+    marginBottom:7
+  },
+  child: { display: "flex", flexDirection: "row", alignItems: "center"},
+  ratingLabel: {
+    fontSize: FONT_SIZE.h2,
+    fontWeight: "700",
+    lineHeight: 24,
+    fontFamily: FONT_FAMILY.secondary,
+    color: COLORS.BRAND_BLACK,
+  },
+  starContainer: { marginLeft: 10 },
+  starStyle: { marginHorizontal: 0 }
+});

package/src/components/SecondaryStoryCardNew/index.js

@@ -9,6 +9,7 @@ import {
   TouchableOpacityProps,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import {
   AppTheme,
   getImageMetadata,
@@ -74,6 +75,12 @@ const SecondaryStoryCardNewBase = (props) => {
     </View>
   );
 
+  const showMaterialIcon = (name) => (
+    <View style={styles.storyType}>
+      <MaterialIcon name={name} size={14} color={COLORS.MONO7}/>
+    </View>
+  )
+
   const showStoryType = () => {
     switch (story['story-template']) {
       case 'text':
@@ -84,6 +91,8 @@ const SecondaryStoryCardNewBase = (props) => {
         return showIcon('play');
       case 'live-blog':
         return showLiveBlogIcon();
+      case 'review':
+        return showMaterialIcon('star-face')
       default:
         null;
     }

package/src/components/StoryHeader/index.js

@@ -18,6 +18,7 @@ import { storyHeaderStyles } from './styles';
 import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/content-constants/constants';
 
 import { DailyMotionPlayer } from '../DailyMotionPlayer';
+import { RatingLayout } from '../Rating';
 const getHeroImage = (cdn, story) => {
   const imageSlug = story['hero-image-s3-key'];
   if (!imageSlug) return null;
@@ -73,7 +74,8 @@ export const StoryHeader = (props) => {
   const caption = story['hero-image-caption'];
   const attribution = story['hero-image-attribution'];
   const isPremiumStory = story['access'] === 'subscription';
-
+  const reviewTitle = story['metadata'] && story['metadata']['review-title'];
+  const reviewData = story['metadata'] && story['metadata']['review-rating'];
 
   const showAttribution = () => {
     if (!caption && !attribution) {
@@ -128,6 +130,7 @@ export const StoryHeader = (props) => {
         cdn={props.cdn}
         readtime={story['read-time']}
       />
+      {reviewTitle && <RatingLayout reviewTitle={reviewTitle} ratingValue={reviewData?.value} ratingLabel={reviewData?.label}/>}
     </View>
   );
 };