scoring tweaks, clarifications (#1321)

react-native-community · Oct 16, 2024 · 4c309fd · 4c309fd
1 parent c6f7dea
commit 4c309fd
Show file tree

Hide file tree

Showing 11 changed files with 1,830 additions and 1,820 deletions.
diff --git a/assets/data.json b/assets/data.json
diff --git a/components/Explore/ExploreSection.tsx b/components/Explore/ExploreSection.tsx
@@ -49,8 +49,8 @@ const renderLibs = (list: LibraryType[], count = 4) => {
           <LibraryWithLoading
             key={`explore-item-${index}-${item.github.name}`}
             library={item}
-            showPopularity
-            skipMeta
+            showTrendingMark
+            skipMetadata
           />
         ))}
     </View>

diff --git a/components/Library/PopularityMark.tsx → components/Library/TrendingMark.tsx b/components/Library/PopularityMark.tsx → components/Library/TrendingMark.tsx
@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 
 import { colors, darkColors, P, A } from '../../common/styleguide';
 import CustomAppearanceContext from '../../context/CustomAppearanceContext';
@@ -8,6 +8,47 @@ import { Library as LibraryType } from '../../types';
 type Props = {
   library: LibraryType | { popularity: number };
   markOnly?: boolean;
+  style?: ViewStyle;
+};
+
+const TrendingMark = ({ library, style, markOnly = false }: Props) => {
+  const { isDark } = useContext(CustomAppearanceContext);
+  const { popularity = -100 } = library;
+  const popularityStyles = getPopularityStyles(popularity, markOnly);
+  const markBackgroundColor = isDark ? darkColors.border : colors.gray2;
+
+  const content = (
+    <>
+      <View
+        style={[
+          styles.popularityMark,
+          styles.popularityMarkBackground,
+          { backgroundColor: markBackgroundColor, top: markOnly ? 11 : 7 },
+        ]}
+      />
+      <View style={[styles.popularityMark, popularityStyles]} />
+      <P
+        style={[
+          styles.popularityScore,
+          {
+            color: popularityStyles.backgroundColor,
+            marginBottom: markOnly ? 0 : 6,
+            fontSize: markOnly ? 15 : 12,
+          },
+        ]}>
+        {getPopularityGrade(popularity)}
+        {!markOnly && ` (${(popularity * 100).toFixed(1)})`}
+      </P>
+    </>
+  );
+
+  return markOnly ? (
+    <View style={[styles.container, style]}>{content}</View>
+  ) : (
+    <A href="/scoring" style={[styles.container, styles.scoringLink, style]}>
+      {content}
+    </A>
+  );
 };
 
 const getPopularityStyles = (popularity, markOnly) => {
@@ -59,46 +100,6 @@ const getPopularityGrade = popularity => {
   }
 };
 
-const PopularityMark = ({ library, markOnly = false }: Props) => {
-  const { isDark } = useContext(CustomAppearanceContext);
-  const { popularity = -1 } = library;
-  const popularityStyles = getPopularityStyles(popularity, markOnly);
-  const markBackgroundColor = isDark ? darkColors.border : colors.gray2;
-
-  const content = (
-    <>
-      <View
-        style={[
-          styles.popularityMark,
-          styles.popularityMarkBackground,
-          { backgroundColor: markBackgroundColor, top: markOnly ? 11 : 7 },
-        ]}
-      />
-      <View style={[styles.popularityMark, popularityStyles]} />
-      <P
-        style={[
-          styles.popularityScore,
-          {
-            color: popularityStyles.backgroundColor,
-            marginBottom: markOnly ? 0 : 6,
-            fontSize: markOnly ? 15 : 12,
-          },
-        ]}>
-        {getPopularityGrade(popularity)}
-        {!markOnly && ` (${(popularity * 100).toFixed(1)})`}
-      </P>
-    </>
-  );
-
-  return markOnly ? (
-    <View style={styles.container}>{content}</View>
-  ) : (
-    <A href="/scoring" style={[styles.container, styles.scoringLink]}>
-      {content}
-    </A>
-  );
-};
-
 const styles = StyleSheet.create({
   container: {
     marginBottom: 4,
@@ -123,4 +124,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default PopularityMark;
+export default TrendingMark;
diff --git a/components/Library/index.tsx b/components/Library/index.tsx
@@ -4,22 +4,23 @@ import { Linkify } from 'react-easy-linkify';
 import { Platform, StyleSheet, View } from 'react-native';
 
 import { MetaData } from './MetaData';
-import PopularityMark from './PopularityMark';
 import RecommendedLabel from './RecommendedLabel';
 import Thumbnail from './Thumbnail';
+import TrendingMark from './TrendingMark';
 import UnmaintainedLabel from './UnmaintainedLabel';
 import { colors, useLayout, A, darkColors, Headline } from '../../common/styleguide';
 import CustomAppearanceContext from '../../context/CustomAppearanceContext';
 import { Library as LibraryType } from '../../types';
 import { CompatibilityTags } from '../CompatibilityTags';
+import Tooltip from '../Tooltip';
 
 type Props = {
   library: LibraryType;
-  skipMeta?: boolean;
-  showPopularity?: boolean;
+  skipMetadata?: boolean;
+  showTrendingMark?: boolean;
 };
 
-const Library = ({ library, skipMeta, showPopularity }: Props) => {
+const Library = ({ library, skipMetadata, showTrendingMark }: Props) => {
   const { isDark } = useContext(CustomAppearanceContext);
   const { github } = library;
   const { isSmallScreen, isBelowMaxWidth } = useLayout();
@@ -40,13 +41,23 @@ const Library = ({ library, skipMeta, showPopularity }: Props) => {
           borderColor: isDark ? darkColors.border : colors.gray2,
         },
         isSmallScreen && styles.containerColumn,
-        skipMeta && styles.noMetaContainer,
-        skipMeta && (isSmallScreen || isBelowMaxWidth) && styles.noMetaColumnContainer,
+        skipMetadata && styles.noMetaContainer,
+        skipMetadata && (isSmallScreen || isBelowMaxWidth) && styles.noMetaColumnContainer,
         library.unmaintained && styles.unmaintained,
       ]}>
       <View style={styles.columnOne}>
         {library.unmaintained && <UnmaintainedLabel alternatives={library.alternatives} />}
-        {showPopularity && library.popularity && <PopularityMark library={library} />}
+        {showTrendingMark && library.popularity && (
+          <Tooltip
+            sideOffset={8}
+            trigger={
+              <View style={styles.popularityContainer}>
+                <TrendingMark library={library} />
+              </View>
+            }>
+            Trending Score is based on the last week to last month download rate.
+          </Tooltip>
+        )}
         <View style={isSmallScreen ? styles.containerColumn : styles.displayHorizontal}>
           <A
             href={library.githubUrl || github.urls.repo}
@@ -61,7 +72,7 @@ const Library = ({ library, skipMeta, showPopularity }: Props) => {
         </View>
         {github.description && github.description.length && (
           <View style={styles.verticalMargin}>
-            <Headline numberOfLines={skipMeta && 3} style={{ fontWeight: 300, lineHeight: 23 }}>
+            <Headline numberOfLines={skipMetadata && 3} style={{ fontWeight: 300, lineHeight: 23 }}>
               <Linkify
                 options={{
                   linkWrapper: props => <A {...props}>{props.children}</A>,
@@ -71,7 +82,7 @@ const Library = ({ library, skipMeta, showPopularity }: Props) => {
             </Headline>
           </View>
         )}
-        {!skipMeta && Platform.OS === 'web' && library.images && library.images.length ? (
+        {!skipMetadata && Platform.OS === 'web' && library.images && library.images.length ? (
           <View style={[styles.displayHorizontal, styles.imagesContainer]}>
             {library.images.map((image, index) => (
               <Thumbnail key={`${image}-${index}`} url={image} />
@@ -89,7 +100,7 @@ const Library = ({ library, skipMeta, showPopularity }: Props) => {
           </>
         ) : null}
       </View>
-      {skipMeta ? null : (
+      {skipMetadata ? null : (
         <View
           style={[
             styles.columnTwo,
@@ -225,6 +236,9 @@ const styles = StyleSheet.create({
   unmaintained: {
     opacity: 0.88,
   },
+  popularityContainer: {
+    alignSelf: 'flex-start',
+  },
 });
 
 export default Library;
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "@jlengstorf/get-share-image": "^1.0.2",
     "@radix-ui/react-hover-card": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.3",
-    "@react-native-async-storage/async-storage": "^1.24.0",
+    "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-picker/picker": "^2.8.1",
     "@sentry/react": "^8.33.1",
     "@vercel/blob": "^0.25.0",
@@ -38,7 +38,7 @@
     "react-content-loader": "^7.0.2",
     "react-dom": "18.2.0",
     "react-easy-linkify": "^1.0.8",
-    "react-native": "0.75.1",
+    "react-native": "0.75.4",
     "react-native-safe-area-context": "^4.11.0",
     "react-native-svg": "15.4.0",
     "react-native-web": "^0.19.12",