From d35aaa2286bf1ab7a67e6f38dd8387580f2e3a6d Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Wed, 10 Jan 2024 11:01:58 +0100 Subject: [PATCH] add tooltips, refactor other page nav, bump SDK, tweaks (#1096) --- common/styleguide.tsx | 2 +- components/Button.tsx | 1 + components/Explore/ExploreSection.tsx | 13 +- components/Filters/FilterButton.tsx | 88 + components/Filters/ToggleLink.tsx | 39 + components/Filters/helpers.ts | 30 + components/{Filters.tsx => Filters/index.tsx} | 151 +- components/Footer.tsx | 52 +- components/Header.tsx | 30 +- components/Library/DirectoryScore.tsx | 68 +- components/Library/MetaData.tsx | 2 +- components/Library/PopularityMark.tsx | 2 +- components/Navigation.tsx | 28 +- components/Search.tsx | 4 +- components/Sort.tsx | 44 +- components/Tooltip.tsx | 25 + package.json | 38 +- pages/popular.tsx | 1 + pages/scoring.tsx | 1 + pages/trending.tsx | 25 +- styles/styles.css | 80 +- yarn.lock | 2549 +++++++++-------- 22 files changed, 1780 insertions(+), 1493 deletions(-) create mode 100644 components/Filters/FilterButton.tsx create mode 100644 components/Filters/ToggleLink.tsx create mode 100644 components/Filters/helpers.ts rename components/{Filters.tsx => Filters/index.tsx} (55%) create mode 100644 components/Tooltip.tsx diff --git a/common/styleguide.tsx b/common/styleguide.tsx index 025094d5..6a014246 100644 --- a/common/styleguide.tsx +++ b/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', diff --git a/components/Button.tsx b/components/Button.tsx index 2cb3da7a..f12aba3b 100644 --- a/components/Button.tsx +++ b/components/Button.tsx @@ -49,6 +49,7 @@ const styles = StyleSheet.create({ justifyContent: 'center', alignItems: 'center', borderRadius: 4, + // @ts-ignore outlineOffset: 1, }, }); diff --git a/components/Explore/ExploreSection.tsx b/components/Explore/ExploreSection.tsx index 09597b2c..4c93928f 100644 --- a/components/Explore/ExploreSection.tsx +++ b/components/Explore/ExploreSection.tsx @@ -73,9 +73,7 @@ const ExploreSection = ({ return ( <>

- - {createElement(icon, { fill: color, width: 30, height: 30 })} - + {createElement(icon, { fill: color, width: 30, height: 30 })} 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 ( + + ); +}; + +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', + }, +}); diff --git a/components/Filters/ToggleLink.tsx b/components/Filters/ToggleLink.tsx new file mode 100644 index 00000000..bbb6a0c1 --- /dev/null +++ b/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 ( + + + +

{title}

+ + + ); +}; + +const styles = StyleSheet.create({ + link: { + ...Platform.select({ + web: { + cursor: 'pointer', + }, + }), + marginRight: 16, + marginVertical: 4, + alignItems: 'center', + flexDirection: 'row', + }, +}); diff --git a/components/Filters/helpers.ts b/components/Filters/helpers.ts new file mode 100644 index 00000000..d99a3f72 --- /dev/null +++ b/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', + }, +]; diff --git a/components/Filters.tsx b/components/Filters/index.tsx similarity index 55% rename from components/Filters.tsx rename to components/Filters/index.tsx index 4999d92b..c64caf94 100644 --- a/components/Filters.tsx +++ b/components/Filters/index.tsx @@ -1,14 +1,11 @@ -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; @@ -16,106 +13,6 @@ type FiltersProps = { 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 ( - - - -

{title}

- - - ); -}; - -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 ( - - ); -}; - 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) => { Platform - {platforms.map(platform => ( + {FILTER_PLATFORMS.map(platform => ( { const { isDark } = useContext(CustomAppearanceContext); - const { isSmallScreen } = useLayout(); - const packageNameStyles = [ - styles.platformPackageName, - { backgroundColor: isDark ? darkColors.powder : colors.gray2 }, - ]; - const packageNameHoverStyle = { - backgroundColor: isDark ? colors.primary : colors.sky, + const packageHoverStyle = { + backgroundColor: isDark ? darkColors.powder : colors.gray2, + borderRadius: 8, }; - const iconColor = isDark ? darkColors.pewter : colors.gray5; - const borderLeftColor = isDark ? darkColors.border : colors.gray2; return ( - - {createElement(Icon, { fill: iconColor, width: 32, height: 32 })} -

{name}

- - {pkgName} - - + + + {createElement(Icon, { + fill: isDark ? darkColors.pewter : colors.gray5, + width: 32, + height: 32, + })} +

{name}

+

{pkgName}

+ + ); }; @@ -149,6 +140,7 @@ const styles = StyleSheet.create({ footerTextWrapper: { flexDirection: 'row', paddingHorizontal: 16, + marginTop: 12, }, footerTextContainer: { flex: 1, @@ -163,15 +155,18 @@ const styles = StyleSheet.create({ marginTop: 4, justifyContent: 'center', flexWrap: 'wrap', + gap: 14, + marginBottom: 28, }, platformItem: { - minWidth: '15%', - paddingHorizontal: 24, - marginBottom: 28, + minWidth: 180, + paddingHorizontal: 8, + paddingVertical: 16, + borderRadius: 8, alignItems: 'center', }, platformName: { - marginTop: 8, + marginTop: 12, }, platformPackageName: { fontSize: 12, @@ -179,7 +174,7 @@ const styles = StyleSheet.create({ borderRadius: 4, paddingHorizontal: 8, lineHeight: 22, - marginTop: 8, + marginTop: 2, }, bannerContainer: { alignSelf: 'center', @@ -197,6 +192,7 @@ const styles = StyleSheet.create({ paddingTop: 48, paddingBottom: 32, }, + itemLink: { backgroundColor: 'none', borderWidth: 1, borderColor: 'transparent' }, }); export default Footer; diff --git a/components/Header.tsx b/components/Header.tsx index fd11458f..e9308987 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -4,6 +4,7 @@ import { StyleSheet, View, Text } from 'react-native'; import { Button } from './Button'; import { GitHub, Logo, Plus } from './Icons'; +import Tooltip from './Tooltip'; import { layout, colors, H5, P, darkColors, useLayout } from '../common/styleguide'; import CustomAppearanceContext from '../context/CustomAppearanceContext'; @@ -28,25 +29,32 @@ const Header = () => {

- - + + + + + }> + Toggle theme +