add tooltips, refactor other page nav, bump SDK, various tweaks

common/styleguide.tsx

@@ -47,7 +47,7 @@ export const darkColors = {
   background: '#19191f',
   subHeader: '#14141a',
   border: '#2a2e36',
-  veryDark: '#0e0e11',
+  veryDark: '#111114',
   dark: '#14141a',
   powder: '#262a36',
   pewter: '#767C8E',

components/Button.tsx

@@ -49,6 +49,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     borderRadius: 4,
+    // @ts-ignore
     outlineOffset: 1,
   },
 });

components/Explore/ExploreSection.tsx

@@ -73,9 +73,7 @@ const ExploreSection = ({
   return (
     <>
       <H3 style={styles.subHeader} id={hashLink}>
-        <View style={styles.subHeaderIcon}>
-          {createElement(icon, { fill: color, width: 30, height: 30 })}
-        </View>
+        {createElement(icon, { fill: color, width: 30, height: 30 })}
         <A
           href={`#${hashLink}`}
           target="_self"
@@ -108,16 +106,13 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
   },
   subHeader: {
+    display: 'flex',
+    gap: 16,
     marginTop: 16,
     marginBottom: 8,
-  },
-  subHeaderIcon: {
-    marginTop: 4,
-    marginRight: 12,
-    float: 'left',
+    alignItems: 'center',
   },
   subHeaderTitle: {
-    marginTop: 16,
     fontSize: 26,
     fontWeight: '700',
     textDecorationLine: 'none',

components/Filters/FilterButton.tsx

@@ -0,0 +1,88 @@
+import { useContext } from 'react';
+import { StyleSheet, View, ViewStyle } from 'react-native';
+
+import { FILTER_PLATFORMS } from './helpers';
+import { colors, darkColors, P } from '../../common/styleguide';
+import CustomAppearanceContext from '../../context/CustomAppearanceContext';
+import { Query } from '../../types';
+import { Button } from '../Button';
+import { Filter as FilterIcon } from '../Icons';
+
+type FilterButtonProps = {
+  query: Query;
+  onPress: () => void;
+  isFilterVisible: boolean;
+  style?: ViewStyle;
+};
+
+export const FilterButton = ({ isFilterVisible, query, onPress, style }: FilterButtonProps) => {
+  const { isDark } = useContext(CustomAppearanceContext);
+
+  const params = [
+    ...FILTER_PLATFORMS.map(platform => platform.param),
+    'hasExample',
+    'hasImage',
+    'hasTypes',
+    'isMaintained',
+    'isPopular',
+    'isRecommended',
+    'wasRecentlyUpdated',
+    'newArchitecture',
+  ];
+
+  const filterCount = Object.keys(query).reduce(
+    (acc, q) => (params.includes(q) ? acc + 1 : acc),
+    0
+  );
+
+  return (
+    <Button
+      onPress={onPress}
+      style={[
+        styles.button,
+        { backgroundColor: isDark ? darkColors.border : colors.gray5 },
+        isFilterVisible && styles.activeButton,
+        style,
+      ]}>
+      <View style={styles.displayHorizontal}>
+        <View style={styles.iconContainer}>
+          <FilterIcon
+            fill={isFilterVisible ? colors.gray7 : filterCount > 0 ? colors.primary : colors.white}
+            width={14}
+            height={12}
+          />
+        </View>
+        <P style={[styles.buttonText, isFilterVisible && styles.activeButtonText]}>
+          Filters{filterCount > 0 ? `: ${filterCount}` : ''}
+        </P>
+      </View>
+    </Button>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    height: 24,
+    paddingHorizontal: 8,
+  },
+  activeButton: {
+    backgroundColor: colors.primary,
+  },
+  buttonText: {
+    fontSize: 14,
+    color: colors.white,
+    marginLeft: 6,
+    fontWeight: '500',
+    userSelect: 'none',
+  },
+  activeButtonText: {
+    color: colors.gray7,
+  },
+  iconContainer: {
+    top: 1,
+  },
+  displayHorizontal: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});

components/Filters/ToggleLink.tsx

@@ -0,0 +1,39 @@
+import Link from 'next/link';
+import { Platform, StyleSheet, View } from 'react-native';
+
+import { P, colors } from '../../common/styleguide';
+import urlWithQuery from '../../util/urlWithQuery';
+import { CheckBox } from '../CheckBox';
+
+export const ToggleLink = ({ query, paramName, title, basePath = '/' }) => {
+  const isSelected = !!query[paramName];
+
+  return (
+    <Link
+      href={urlWithQuery(basePath, {
+        ...query,
+        [paramName]: !isSelected,
+        offset: null,
+      })}
+      style={{ textDecoration: 'none' }}>
+      <View style={styles.link}>
+        <CheckBox value={isSelected} color={colors.primaryDark} />
+        <P style={{ fontSize: 14 }}>{title}</P>
+      </View>
+    </Link>
+  );
+};
+
+const styles = StyleSheet.create({
+  link: {
+    ...Platform.select({
+      web: {
+        cursor: 'pointer',
+      },
+    }),
+    marginRight: 16,
+    marginVertical: 4,
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+});

components/Filters/helpers.ts

@@ -0,0 +1,30 @@
+export const FILTER_PLATFORMS = [
+  {
+    param: 'android',
+    title: 'Android',
+  },
+  {
+    param: 'expo',
+    title: 'Expo Go',
+  },
+  {
+    param: 'ios',
+    title: 'iOS',
+  },
+  {
+    param: 'macos',
+    title: 'macOS',
+  },
+  {
+    param: 'tvos',
+    title: 'tvOS',
+  },
+  {
+    param: 'web',
+    title: 'Web',
+  },
+  {
+    param: 'windows',
+    title: 'Windows',
+  },
+];

components/Filters.tsx → components/Filters/index.tsx

@@ -1,121 +1,18 @@
-import Link from 'next/link';
 import { useContext } from 'react';
-import { Platform, StyleSheet, View, ViewStyle } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 
-import { Button } from './Button';
-import { CheckBox } from './CheckBox';
-import { Filter as FilterIcon } from './Icons';
-import { colors, P, Headline, layout, darkColors } from '../common/styleguide';
-import CustomAppearanceContext from '../context/CustomAppearanceContext';
-import { Query } from '../types';
-import urlWithQuery from '../util/urlWithQuery';
+import { ToggleLink } from './ToggleLink';
+import { FILTER_PLATFORMS } from './helpers';
+import { colors, Headline, layout, darkColors } from '../../common/styleguide';
+import CustomAppearanceContext from '../../context/CustomAppearanceContext';
+import { Query } from '../../types';
 
 type FiltersProps = {
   query: Query;
   style?: ViewStyle | ViewStyle[];
   basePath?: string;
 };
 
-type FilterButtonProps = {
-  query: Query;
-  onPress: () => void;
-  isFilterVisible: boolean;
-};
-
-const platforms = [
-  {
-    param: 'android',
-    title: 'Android',
-  },
-  {
-    param: 'expo',
-    title: 'Expo Go',
-  },
-  {
-    param: 'ios',
-    title: 'iOS',
-  },
-  {
-    param: 'macos',
-    title: 'macOS',
-  },
-  {
-    param: 'tvos',
-    title: 'tvOS',
-  },
-  {
-    param: 'web',
-    title: 'Web',
-  },
-  {
-    param: 'windows',
-    title: 'Windows',
-  },
-];
-
-const ToggleLink = ({ query, paramName, title, basePath = '/' }) => {
-  const isSelected = !!query[paramName];
-
-  return (
-    <Link
-      href={urlWithQuery(basePath, {
-        ...query,
-        [paramName]: !isSelected,
-        offset: null,
-      })}
-      style={{ textDecoration: 'none' }}>
-      <View style={styles.link}>
-        <CheckBox value={isSelected} color={colors.primaryDark} />
-        <P style={{ fontSize: 14 }}>{title}</P>
-      </View>
-    </Link>
-  );
-};
-
-export const FilterButton = ({ isFilterVisible, query, onPress }: FilterButtonProps) => {
-  const { isDark } = useContext(CustomAppearanceContext);
-
-  const params = [
-    ...platforms.map(platform => platform.param),
-    'hasExample',
-    'hasImage',
-    'hasTypes',
-    'isMaintained',
-    'isPopular',
-    'isRecommended',
-    'wasRecentlyUpdated',
-    'newArchitecture',
-  ];
-
-  const filterCount = Object.keys(query).reduce(
-    (acc, q) => (params.includes(q) ? acc + 1 : acc),
-    0
-  );
-
-  return (
-    <Button
-      onPress={onPress}
-      style={[
-        styles.button,
-        { backgroundColor: isDark ? darkColors.border : colors.gray5 },
-        isFilterVisible && styles.activeButton,
-      ]}>
-      <View style={styles.displayHorizontal}>
-        <View style={styles.iconContainer}>
-          <FilterIcon
-            fill={isFilterVisible ? colors.gray7 : filterCount > 0 ? colors.primary : colors.white}
-            width={14}
-            height={12}
-          />
-        </View>
-        <P style={[styles.buttonText, isFilterVisible && styles.activeButtonText]}>
-          Filters{filterCount > 0 ? `: ${filterCount}` : ''}
-        </P>
-      </View>
-    </Button>
-  );
-};
-
 export const Filters = ({ query, style, basePath = '/' }: FiltersProps) => {
   const { isDark } = useContext(CustomAppearanceContext);
   const isMainSearch = basePath === '/';
@@ -131,7 +28,7 @@ export const Filters = ({ query, style, basePath = '/' }: FiltersProps) => {
       <View style={styles.container}>
         <Headline style={styles.title}>Platform</Headline>
         <View style={styles.optionsContainer}>
-          {platforms.map(platform => (
+          {FILTER_PLATFORMS.map(platform => (
             <ToggleLink
               key={platform.param}
               query={query}
@@ -259,38 +156,4 @@ const styles = StyleSheet.create({
   title: {
     marginBottom: 8,
   },
-  link: {
-    ...Platform.select({
-      web: {
-        cursor: 'pointer',
-      },
-    }),
-    marginRight: 16,
-    marginVertical: 4,
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
-  button: {
-    height: 24,
-    paddingHorizontal: 8,
-  },
-  activeButton: {
-    backgroundColor: colors.primary,
-  },
-  buttonText: {
-    fontSize: 14,
-    color: colors.white,
-    marginLeft: 6,
-    fontWeight: '500',
-  },
-  activeButtonText: {
-    color: colors.gray7,
-  },
-  iconContainer: {
-    top: 1,
-  },
-  displayHorizontal: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
 });