Skip to content

Commit 27b6e92

Browse files
SimekSimek
authored
upgrade to React 19, refactor interactions, cleanup data (#1754)
1 parent 0e6f851 commit 27b6e92

7 files changed

Lines changed: 182 additions & 203 deletions

File tree

‎bun.lock‎

Lines changed: 108 additions & 109 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎common/styleguide.tsx‎

Lines changed: 25 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import * as HtmlElements from '@expo/html-elements';
22
import Link from 'next/link';
3-
import { PropsWithChildren, PropsWithRef, useContext, useRef } from 'react';
4-
import { StyleSheet, TextStyle, View } from 'react-native';
5-
import { useHover, useDimensions, useActive } from 'react-native-web-hooks';
3+
import { PropsWithChildren, useContext, useState } from 'react';
4+
import { StyleSheet, TextStyle, View, useWindowDimensions } from 'react-native';
65

76
import CustomAppearanceContext from '../context/CustomAppearanceContext';
87

@@ -11,9 +10,7 @@ export const layout = {
1110
};
1211

1312
export const useLayout = () => {
14-
const {
15-
window: { width },
16-
} = useDimensions();
13+
const { width } = useWindowDimensions();
1714
return {
1815
isSmallScreen: width < 800,
1916
isBelowMaxWidth: width < layout.maxWidth,
@@ -80,13 +77,11 @@ const textStyles = StyleSheet.create({
8077

8178
type TextStyles = TextStyle | TextStyle[];
8279

83-
type TextProps = PropsWithRef<
84-
PropsWithChildren<{
85-
style?: TextStyles;
86-
id?: string;
87-
numberOfLines?: number;
88-
}>
89-
>;
80+
type TextProps = PropsWithChildren<{
81+
style?: TextStyles;
82+
id?: string;
83+
numberOfLines?: number;
84+
}>;
9085

9186
const createTextComponent = (Element: any, textStyle?: TextStyles) => {
9287
const TextComponent = ({ children, style, id, numberOfLines }: TextProps) => {
@@ -130,8 +125,7 @@ type AProps = PropsWithChildren<{
130125

131126
export const A = ({ href, target = '_blank', children, style, hoverStyle, ...rest }: AProps) => {
132127
const { isDark } = useContext(CustomAppearanceContext);
133-
const linkRef = useRef();
134-
const isHovered = useHover(linkRef);
128+
const [isHovered, setIsHovered] = useState(false);
135129

136130
const linkStyles = getLinkStyles(isDark);
137131
const linkHoverStyles = getLinkHoverStyles(isDark);
@@ -146,22 +140,22 @@ export const A = ({ href, target = '_blank', children, style, hoverStyle, ...res
146140
...(isHovered && linkHoverStyles),
147141
...(style as any),
148142
...(isHovered && hoverStyle),
149-
}}
150-
ref={linkRef}>
143+
}}>
151144
{children}
152145
</Link>
153146
);
154147
}
155148

156149
return (
157-
<HtmlElements.A
158-
{...rest}
159-
href={href}
160-
target={target}
161-
style={[linkStyles, isHovered && linkHoverStyles, style, isHovered && hoverStyle]}
162-
ref={linkRef}>
163-
{children}
164-
</HtmlElements.A>
150+
<View onPointerEnter={() => setIsHovered(true)} onPointerLeave={() => setIsHovered(false)}>
151+
<HtmlElements.A
152+
{...rest}
153+
href={href}
154+
hrefAttrs={{ target }}
155+
style={[linkStyles, isHovered && linkHoverStyles, style, isHovered && hoverStyle]}>
156+
{children}
157+
</HtmlElements.A>
158+
</View>
165159
);
166160
};
167161

@@ -180,14 +174,16 @@ const getLinkHoverStyles = (isDark: boolean) => ({
180174
});
181175

182176
export const HoverEffect = ({ children }) => {
183-
const ref = useRef();
184-
const isHovered = useHover(ref);
185-
const isActive = useActive(ref);
177+
const [isHovered, setIsHovered] = useState(false);
178+
const [isActive, setIsActive] = useState(false);
186179

187180
return (
188181
<View
189-
ref={ref}
190182
style={[isHovered && { opacity: 0.8 }, isActive && { opacity: 0.5 }]}
183+
onPointerEnter={() => setIsHovered(true)}
184+
onPointerLeave={() => setIsHovered(false)}
185+
onPointerDown={() => setIsActive(true)}
186+
onPointerUp={() => setIsActive(false)}
191187
accessible={false}>
192188
{children}
193189
</View>

‎components/Filters/ClearButton.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
import { useRef } from 'react';
2-
import { Pressable } from 'react-native';
3-
import { useHover } from 'react-native-web-hooks';
1+
import { useState } from 'react';
2+
import { Pressable, PressableProps } from 'react-native';
43

54
import { colors } from '~/common/styleguide';
65

76
import { XIcon } from '../Icons';
87
import Tooltip from '../Tooltip';
98

10-
type ClearButtonProps = {
11-
onPress: () => void;
12-
};
9+
type ClearButtonProps = Pick<PressableProps, 'onPress'>;
1310

1411
export const ClearButton = ({ onPress }: ClearButtonProps) => {
15-
const xIconRef = useRef();
16-
const isXIconHovered = useHover(xIconRef);
12+
const [isXIconHovered, setIsXIconHovered] = useState(false);
1713
return (
1814
<Tooltip
1915
sideOffset={8}
2016
trigger={
21-
<Pressable ref={xIconRef} onPress={onPress} aria-label="Clear all">
17+
<Pressable
18+
onHoverIn={() => setIsXIconHovered(true)}
19+
onHoverOut={() => setIsXIconHovered(false)}
20+
onPress={onPress}
21+
aria-label="Clear all">
2222
<XIcon fill={isXIconHovered ? colors.primary : colors.white} width={12} height={12} />
2323
</Pressable>
2424
}>

‎components/Sort.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { Picker } from '@react-native-picker/picker';
22
import Router from 'next/router';
3-
import { useContext, useEffect, useRef, useState } from 'react';
3+
import { useContext, useEffect, useState } from 'react';
44
import { Pressable, StyleSheet, View } from 'react-native';
5-
import { useHover } from 'react-native-web-hooks';
65

76
import { colors, darkColors, P } from '~/common/styleguide';
87
import CustomAppearanceContext from '~/context/CustomAppearanceContext';
@@ -57,11 +56,9 @@ export const SortButton = ({ query: { order, direction, offset }, query }: SortB
5756
const [paginationOffset, setPaginationOffset] = useState<number | undefined>(
5857
typeof offset === 'string' ? parseInt(offset, 10) : offset
5958
);
59+
const [isSortIconHovered, setIsSortIconHovered] = useState(false);
6060
const { isDark } = useContext(CustomAppearanceContext);
6161

62-
const sortIconRef = useRef();
63-
const isSortIconHovered = useHover(sortIconRef);
64-
6562
useEffect(() => {
6663
const url = urlWithQuery('/', {
6764
...query,
@@ -86,7 +83,8 @@ export const SortButton = ({ query: { order, direction, offset }, query }: SortB
8683
sideOffset={8}
8784
trigger={
8885
<Pressable
89-
ref={sortIconRef}
86+
onHoverIn={() => setIsSortIconHovered(true)}
87+
onHoverOut={() => setIsSortIconHovered(false)}
9088
style={sortDirection === 'ascending' && styles.flippedIcon}
9189
aria-label="Toggle sort direction"
9290
onPress={() => {

‎package.json‎

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -17,43 +17,42 @@
1717
"precommit": "simple-git-hooks && lint-staged"
1818
},
1919
"dependencies": {
20-
"@expo/html-elements": "0.12.2",
20+
"@expo/html-elements": "^0.12.5",
2121
"@expo/match-media": "^0.4.0",
22-
"@radix-ui/react-hover-card": "^1.1.7",
23-
"@radix-ui/react-tooltip": "^1.2.0",
24-
"@react-native-async-storage/async-storage": "^2.1.2",
22+
"@radix-ui/react-hover-card": "^1.1.14",
23+
"@radix-ui/react-tooltip": "^1.2.7",
24+
"@react-native-async-storage/async-storage": "^2.2.0",
2525
"@react-native-picker/picker": "^2.11.1",
26-
"@sentry/react": "^8.46.0",
26+
"@sentry/react": "^9.35.0",
2727
"@vercel/blob": "^0.27.3",
28-
"expo": "^53.0.13",
29-
"expo-font": "~13.3.1",
28+
"expo": "53.0.17",
29+
"expo-font": "~13.3.2",
3030
"lodash": "^4.17.21",
31-
"next": "^15.3.4",
31+
"next": "^15.3.5",
3232
"node-emoji": "^2.2.0",
33-
"react": "^18.3.1",
33+
"react": "19.0.0",
3434
"react-content-loader": "^7.0.2",
35-
"react-dom": "^18.3.1",
35+
"react-dom": "19.0.0",
3636
"react-easy-linkify": "^1.0.8",
37-
"react-native": "0.79.4",
38-
"react-native-safe-area-context": "^5.4.0",
39-
"react-native-svg": "^15.11.2",
37+
"react-native": "0.79.5",
38+
"react-native-safe-area-context": "^5.5.1",
39+
"react-native-svg": "^15.12.0",
4040
"react-native-web": "^0.20.0",
41-
"react-native-web-hooks": "^3.0.2",
4241
"use-debounce": "^10.0.5"
4342
},
4443
"devDependencies": {
4544
"@expo/next-adapter": "^6.0.0",
46-
"@next/bundle-analyzer": "^15.3.4",
47-
"@types/bun": "^1.2.17",
48-
"@types/lodash": "^4.17.19",
49-
"@types/react": "^18.3.12",
45+
"@next/bundle-analyzer": "^15.3.5",
46+
"@types/bun": "^1.2.18",
47+
"@types/lodash": "^4.17.20",
48+
"@types/react": "~19.0.10",
5049
"ajv-cli": "^5.0.0",
5150
"browserslist": "^4.25.1",
5251
"cheerio": "^1.1.0",
5352
"cross-fetch": "^4.1.0",
54-
"dotenv": "^16.4.7",
55-
"eslint": "^9.29.0",
56-
"eslint-config-next": "^15.3.4",
53+
"dotenv": "^17.0.1",
54+
"eslint": "^9.30.1",
55+
"eslint-config-next": "^15.3.5",
5756
"eslint-config-universe": "^15.0.3",
5857
"lint-staged": "^15.5.1",
5958
"next-compose-plugins": "^2.2.1",

‎pages/api/libraries/index.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,9 @@ export default function handler(req: NextApiRequest, res: NextApiResponse) {
8989

9090
const relevanceSortedLibraries =
9191
querySearch?.length && (!req.query.order || req.query.order === 'relevance')
92-
? Sorting.relevance([...filteredLibraries])
92+
? sortDirection === 'ascending'
93+
? Sorting.relevance([...filteredLibraries]).reverse()
94+
: Sorting.relevance([...filteredLibraries])
9395
: filteredLibraries;
9496
const filteredAndPaginatedLibraries = take(drop(relevanceSortedLibraries, offset), limit);
9597

‎react-native-libraries.json‎

Lines changed: 13 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4335,7 +4335,11 @@
43354335
"newArchitecture": false,
43364336
"newArchitectureNote": "Microsoft no longer maintains this library and has no plans to add New Architecture support.",
43374337
"unmaintained": true,
4338-
"alternatives": ["@appzung/react-native-code-push", "@bravemobile/react-native-code-push", "expo-updates"]
4338+
"alternatives": [
4339+
"@appzung/react-native-code-push",
4340+
"@bravemobile/react-native-code-push",
4341+
"expo-updates"
4342+
]
43394343
},
43404344
{
43414345
"githubUrl": "https://github.com/plmok61/react-navigation-transitions",
@@ -15942,9 +15946,7 @@
1594215946
{
1594315947
"githubUrl": "https://github.com/sjwall/react-native-aria-description/tree/main/lib",
1594415948
"npmPkg": "react-native-aria-description",
15945-
"examples": [
15946-
"https://github.com/sjwall/react-native-aria-description/tree/main/example"
15947-
],
15949+
"examples": ["https://github.com/sjwall/react-native-aria-description/tree/main/example"],
1594815950
"ios": true,
1594915951
"android": true,
1595015952
"web": true,
@@ -15953,7 +15955,6 @@
1595315955
},
1595415956
{
1595515957
"githubUrl": "https://github.com/primus/eventemitter3",
15956-
"npmPkg": "eventemitter3",
1595715958
"ios": true,
1595815959
"android": true,
1595915960
"web": true,
@@ -15962,7 +15963,6 @@
1596215963
},
1596315964
{
1596415965
"githubUrl": "https://github.com/theboringlok/react-native-place-autocomplete-picker",
15965-
"npmPkg": "react-native-place-autocomplete-picker",
1596615966
"examples": [
1596715967
"https://github.com/theboringlok/react-native-place-autocomplete-picker/tree/main/example"
1596815968
],
@@ -15976,13 +15976,11 @@
1597615976
},
1597715977
{
1597815978
"githubUrl": "https://github.com/superwall/expo-superwall",
15979-
"examples": [
15980-
"https://github.com/superwall/expo-superwall/tree/main/example"
15981-
],
15979+
"examples": ["https://github.com/superwall/expo-superwall/tree/main/example"],
1598215980
"ios": true,
1598315981
"android": true,
1598415982
"newArchitecture": true
15985-
},
15983+
},
1598615984
{
1598715985
"githubUrl": "https://github.com/SolankiYogesh/rn-turbo-location-enabler",
1598815986
"examples": ["https://github.com/SolankiYogesh/rn-turbo-location-enabler/tree/main/example"],
@@ -15992,19 +15990,15 @@
1599215990
{
1599315991
"githubUrl": "https://github.com/Iterable/react-native-sdk",
1599415992
"npmPkg": "@iterable/react-native-sdk",
15995-
"examples": [
15996-
"https://github.com/Iterable/react-native-sdk/tree/master/example"
15997-
],
15993+
"examples": ["https://github.com/Iterable/react-native-sdk/tree/master/example"],
1599815994
"ios": true,
1599915995
"android": true,
1600015996
"newArchitecture": true
1600115997
},
1600215998
{
1600315999
"githubUrl": "https://github.com/Iterable/iterable-expo-plugin",
1600416000
"npmPkg": "@iterable/expo-plugin",
16005-
"examples": [
16006-
"https://github.com/Iterable/iterable-expo-plugin/tree/main/example"
16007-
],
16001+
"examples": ["https://github.com/Iterable/iterable-expo-plugin/tree/main/example"],
1600816002
"ios": true,
1600916003
"android": true,
1601016004
"newArchitecture": false
@@ -16022,21 +16016,15 @@
1602216016
{
1602316017
"githubUrl": "https://github.com/moyasar/moyasar-react-native",
1602416018
"npmPkg": "react-native-moyasar-sdk",
16025-
"examples": [
16026-
"https://github.com/moyasar/moyasar-react-native/tree/main/example"
16027-
],
16019+
"examples": ["https://github.com/moyasar/moyasar-react-native/tree/main/example"],
1602816020
"ios": true,
1602916021
"android": true
1603016022
},
1603116023
{
1603216024
"githubUrl": "https://github.com/cornejobarraza/expo-libvlc-player",
16033-
"npmPkg": "expo-libvlc-player",
16034-
"examples": [
16035-
"https://github.com/cornejobarraza/expo-libvlc-player/tree/master/example"
16036-
],
16025+
"examples": ["https://github.com/cornejobarraza/expo-libvlc-player/tree/master/example"],
1603716026
"ios": true,
1603816027
"android": true,
16039-
"expoGo": false,
1604016028
"newArchitecture": true
1604116029
},
1604216030
{
@@ -16056,10 +16044,7 @@
1605616044
},
1605716045
{
1605816046
"githubUrl": "https://github.com/cashfree/react-native-cashfree-pg-sdk",
16059-
"npmPkg": "react-native-cashfree-pg-sdk",
16060-
"examples": [
16061-
"https://github.com/cashfree/react-native-cashfree-pg-sdk/tree/master/example"
16062-
],
16047+
"examples": ["https://github.com/cashfree/react-native-cashfree-pg-sdk/tree/master/example"],
1606316048
"ios": true,
1606416049
"android": true
1606516050
}

0 commit comments

Comments
 (0)