react-native-community · Simek · Oct 17, 2024 · Oct 18, 2024
diff --git a/common/styleguide.tsx b/common/styleguide.tsx
@@ -189,7 +189,6 @@ export const HoverEffect = ({ children }) => {
     <View
       ref={ref}
       style={[isHovered && { opacity: 0.8 }, isActive && { opacity: 0.5 }]}
-      focusable={false}
       accessible={false}>
       {children}
     </View>

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -45,7 +45,7 @@ const Header = () => {
           </Tooltip>
           <Button
             openInNewTab
-            aria-label="GitHub"
+            aria-label="GitHub repository"
             href="https://github.com/react-native-community/directory"
             style={[styles.button, styles.themeButtonSmall]}>
             <GitHub fill={isDark ? colors.white : colors.black} />

diff --git a/components/Library/TrendingMark.tsx b/components/Library/TrendingMark.tsx
@@ -62,7 +62,7 @@ const getPopularityStyles = (popularity, markOnly) => {
   } else if (popularity > 0.25) {
     return {
       width: 24,
-      backgroundColor: '#e20026',
+      backgroundColor: '#e70a2f',
       top,
     };
   } else if (popularity > 0.1) {

diff --git a/components/Library/index.tsx b/components/Library/index.tsx
@@ -51,7 +51,7 @@ const Library = ({ library, skipMetadata, showTrendingMark }: Props) => {
           <Tooltip
             sideOffset={8}
             trigger={
-              <View style={styles.popularityContainer}>
+              <View style={styles.trendingMarkContainer}>
                 <TrendingMark library={library} />
               </View>
             }>
@@ -236,7 +236,7 @@ const styles = StyleSheet.create({
   unmaintained: {
     opacity: 0.88,
   },
-  popularityContainer: {
+  trendingMarkContainer: {
     alignSelf: 'flex-start',
   },
 });

diff --git a/components/Navigation.tsx b/components/Navigation.tsx
@@ -3,7 +3,7 @@ import { StyleSheet, View } from 'react-native';
 
 import ContentContainer from './ContentContainer';
 import NavigationTab from './NavigationTab';
-import { colors, darkColors, H1, P } from '../common/styleguide';
+import { colors, darkColors, H1, H2 } from '../common/styleguide';
 import CustomAppearanceContext from '../context/CustomAppearanceContext';
 
 type NavigationProps = PropsWithChildren<{
@@ -33,7 +33,7 @@ const Navigation = ({ title, description, children, noHeader = false }: Navigati
             { backgroundColor: isDark ? darkColors.dark : colors.gray6 },
           ]}>
           <H1 style={styles.header}>{title}</H1>
-          <P style={styles.headerDescription}>{description}</P>
+          <H2 style={styles.headerDescription}>{description}</H2>
           {children}
         </View>
       ) : null}
@@ -62,6 +62,8 @@ const styles = StyleSheet.create({
   headerDescription: {
     textAlign: 'center',
     color: colors.pewter,
+    fontWeight: '500',
+    fontSize: 16,
     paddingTop: 4,
     paddingBottom: 6,
     paddingHorizontal: 40,

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -34,7 +34,7 @@ const App = ({ pageProps, Component }) => (
           <Head>
             <meta
               name="viewport"
-              content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover"
+              content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,viewport-fit=cover"
             />
             <style>
               {`html { 

diff --git a/pages/api/libraries/index.ts b/pages/api/libraries/index.ts
@@ -75,6 +75,7 @@ export default function handler(req: NextApiRequest, res: NextApiResponse) {
     isRecommended: req.query.isRecommended,
     wasRecentlyUpdated: req.query.wasRecentlyUpdated,
     minPopularity: req.query.minPopularity,
+    minMonthlyDownloads: req.query.minMonthlyDownloads,
     newArchitecture: req.query.newArchitecture,
     skipLibs: req.query.skipLibs,
     skipTools: req.query.skipTools,

diff --git a/pages/trending.tsx b/pages/trending.tsx
@@ -93,7 +93,7 @@ const Trending = ({ data, query }) => {
 Trending.getInitialProps = async (ctx: NextPageContext) => {
   const trendingQuery = {
     ...ctx.query,
-    ...{ minPopularity: 5, order: 'popularity' as QueryOrder },
+    ...{ minPopularity: 5, minMonthlyDownloads: 1000, order: 'popularity' as QueryOrder },
   };
   const url = getApiUrl(urlWithQuery('/libraries', trendingQuery), ctx);
   const response = await fetch(url);

diff --git a/types/index.ts b/types/index.ts
@@ -33,6 +33,7 @@ export type Query = {
   isRecommended?: string;
   wasRecentlyUpdated?: string;
   minPopularity?: string | number;
+  minMonthlyDownloads?: string | number;
   newArchitecture?: string;
 };
 

diff --git a/util/search.js b/util/search.js
@@ -46,14 +46,17 @@ export const handleFilterLibraries = ({
   isRecommended,
   wasRecentlyUpdated,
   minPopularity,
+  minMonthlyDownloads,
   newArchitecture,
   skipLibs,
   skipTools,
   skipTemplates,
 }) => {
   const viewerHasChosenTopic = !isEmptyOrNull(queryTopic);
   const viewerHasTypedSearch = !isEmptyOrNull(querySearch);
+
   const minPopularityValue = minPopularity && parseFloat(minPopularity) / 100;
+  const minMonthlyDownloadsValue = minMonthlyDownloads && parseInt(minMonthlyDownloads, 10);
 
   const processedLibraries = viewerHasTypedSearch
     ? libraries.map(library => ({
@@ -169,8 +172,15 @@ export const handleFilterLibraries = ({
       return false;
     }
 
-    if (minPopularityValue) {
+    if (minPopularityValue && minMonthlyDownloadsValue) {
+      return (
+        library.popularity >= minPopularityValue &&
+        library.npm.downloads >= minMonthlyDownloadsValue
+      );
+    } else if (minPopularityValue) {
       return library.popularity >= minPopularityValue;
+    } else if (minMonthlyDownloadsValue) {
+      return library.npm.downloads >= minMonthlyDownloadsValue;
     }
 
     if (!viewerHasChosenTopic && !viewerHasTypedSearch) {