improve types, refactor A and Button, small tweaks (#2102)

Simek · web-flow · commit 6417c9895fa8 · 2026-01-09T11:48:51.000+01:00
diff --git a/bun.lock b/bun.lock
diff --git a/common/styleguide.tsx b/common/styleguide.tsx
@@ -4,12 +4,13 @@ import Link from 'next/link';
 import { type ComponentType, type CSSProperties, type PropsWithChildren, useState } from 'react';
 import {
   StyleSheet,
-  type TextStyle,
-  View,
+  Pressable,
   useWindowDimensions,
   type StyleProp,
   type ViewStyle,
+  type PressableProps,
 } from 'react-native';
+import { type Style } from 'twrnc';
 
 import tw from '~/util/tailwind';
 
@@ -42,7 +43,7 @@ type CustomTextProps = TextProps &
 
 export function createTextComponent(
   Element: ComponentType<TextProps>,
-  textStyle?: StyleProp<TextStyle>
+  textStyle?: StyleProp<Style>
 ) {
   function TextComponent({ children, style, id, numberOfLines }: CustomTextProps) {
     const elementStyle = Element?.displayName
@@ -55,7 +56,7 @@ export function createTextComponent(
         numberOfLines={numberOfLines}
         style={[
           tw`font-sans font-normal my-0 text-black dark:text-white`,
-          elementStyle as StyleProp<TextStyle>,
+          elementStyle as StyleProp<Style>,
           textStyle,
           style,
         ]}>
@@ -81,10 +82,10 @@ export const Caption = createTextComponent(HtmlElements.P, textStyles.caption);
 export const Label = createTextComponent(HtmlElements.P, textStyles.label);
 
 type AProps = PropsWithChildren<{
-  style?: StyleProp<TextStyle>;
+  style?: StyleProp<Style>;
   target?: string;
   href: string;
-  hoverStyle?: StyleProp<TextStyle>;
+  hoverStyle?: StyleProp<Style>;
   containerStyle?: CSSProperties;
 }>;
 
@@ -98,6 +99,7 @@ export function A({ href, target, children, style, hoverStyle, containerStyle, .
     const passedStyle = StyleSheet.flatten(style);
     return (
       <Link
+        {...rest}
         href={href}
         onPointerEnter={() => setIsHovered(true)}
         onPointerLeave={() => setIsHovered(false)}
@@ -130,26 +132,23 @@ export function A({ href, target, children, style, hoverStyle, containerStyle, .
   );
 }
 
-type HoverEffectProps = PropsWithChildren<{ style?: StyleProp<ViewStyle> }>;
-
-export function HoverEffect({ children, style }: HoverEffectProps) {
-  const [isHovered, setIsHovered] = useState(false);
-  const [isActive, setIsActive] = useState(false);
+type HoverEffectProps = PressableProps & { style?: StyleProp<ViewStyle> };
 
+export function HoverEffect({ children, style, onPress, ...rest }: HoverEffectProps) {
   return (
-    <View
-      style={[
+    <Pressable
+      style={({ hovered, pressed }) => [
         { transition: 'opacity 0.33s' },
-        isHovered && tw`opacity-75`,
-        isActive && tw`opacity-50`,
+        hovered && tw`opacity-75`,
+        pressed && tw`opacity-50`,
         style,
       ]}
-      onPointerEnter={() => setIsHovered(true)}
-      onPointerLeave={() => setIsHovered(false)}
-      onPointerDown={() => setIsActive(true)}
-      onPointerUp={() => setIsActive(false)}
-      accessible={false}>
+      accessible={false}
+      focusable={false}
+      tabIndex={onPress ? 0 : -1}
+      onPress={onPress}
+      {...rest}>
       {children}
-    </View>
+    </Pressable>
   );
 }
diff --git a/components/Button.tsx b/components/Button.tsx
@@ -1,17 +1,16 @@
-import { A } from '@expo/html-elements';
 import { type PropsWithChildren } from 'react';
-import { type TextStyle, Pressable, type StyleProp, type ViewStyle } from 'react-native';
+import { type TextStyle, type StyleProp, type ViewStyle, View } from 'react-native';
+import { type Style } from 'twrnc';
 
-import { HoverEffect, P } from '~/common/styleguide';
+import { A, HoverEffect, P } from '~/common/styleguide';
 import tw from '~/util/tailwind';
 
 type Props = PropsWithChildren & {
   href?: string;
   onPress?: () => void;
   openInNewTab?: boolean;
   style?: StyleProp<TextStyle>;
-  containerStyle?: StyleProp<ViewStyle>;
-  tabIndex?: number;
+  containerStyle?: StyleProp<Style>;
 };
 
 export function Button({
@@ -21,34 +20,35 @@ export function Button({
   style,
   containerStyle,
   openInNewTab,
-  tabIndex,
   ...rest
 }: Props) {
   const isLink = !!href;
   const buttonStyle = [
-    tw`justify-center items-center rounded outline-offset-1 select-none bg-primary-darker dark:bg-primary-dark`,
+    tw`justify-center items-center rounded outline-offset-1 cursor-pointer select-none bg-primary-darker dark:bg-primary-dark`,
     style,
-  ];
+  ] as ViewStyle[];
 
   const content = typeof children === 'string' ? <P>{children}</P> : children;
 
   return (
-    <HoverEffect style={containerStyle}>
+    <HoverEffect
+      style={containerStyle}
+      onPress={isLink ? undefined : onPress}
+      tabIndex={isLink ? -1 : 0}>
       {isLink ? (
         <A
           href={href}
-          style={tw`rounded font-sans`}
-          tabIndex={tabIndex}
+          style={[tw`rounded font-sans`, isLink && containerStyle]}
           {...(openInNewTab ? { target: '_blank' } : {})}
           {...rest}>
-          <Pressable focusable={false} style={buttonStyle} accessible={false}>
+          <View focusable={false} style={buttonStyle} accessible={false}>
             {content}
-          </Pressable>
+          </View>
         </A>
       ) : (
-        <Pressable onPress={onPress} style={buttonStyle} role="button" {...rest}>
+        <View role="button" focusable={false} style={buttonStyle} accessible={false} {...rest}>
           {content}
-        </Pressable>
+        </View>
       )}
     </HoverEffect>
   );
diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx
@@ -89,7 +89,8 @@ export default function Footer() {
           <View style={[tw`self-center`, isSmallScreen && tw`items-center mt-6`]}>
             <A
               href="https://vercel.com/?utm_source=rndir&utm_campaign=oss"
-              aria-label="Vercel banner">
+              aria-label="Vercel banner"
+              style={tw`flex`}>
               <VercelBanner />
             </A>
           </View>
diff --git a/components/Library/ConfigPlugin.tsx b/components/Library/ConfigPlugin.tsx
@@ -1,13 +1,14 @@
-import { type StyleProp, type TextStyle } from 'react-native';
+import { type StyleProp } from 'react-native';
+import { type Style } from 'twrnc';
 
 import { A, P } from '~/common/styleguide';
 import { type LibraryDataEntryType } from '~/types';
 
 type Props = {
   configPlugin?: LibraryDataEntryType['configPlugin'];
-  hoverStyle?: StyleProp<TextStyle>;
-  linkStyles?: StyleProp<TextStyle>;
-  paragraphStyles?: StyleProp<TextStyle>;
+  hoverStyle?: StyleProp<Style>;
+  linkStyles?: StyleProp<Style>;
+  paragraphStyles?: StyleProp<Style>;
 };
 
 export function ConfigPluginContent({
diff --git a/components/Library/TrendingMark.tsx b/components/Library/TrendingMark.tsx
@@ -1,14 +1,15 @@
-import { View, type ViewStyle } from 'react-native';
+import { View, type ViewStyle, type TextStyle } from 'react-native';
+import { type Style } from 'twrnc';
 
-import { P, A, HoverEffect } from '~/common/styleguide';
+import { A, P, HoverEffect } from '~/common/styleguide';
 import { type LibraryType } from '~/types';
 import { getPopularityGrade } from '~/util/scoring';
 import tw from '~/util/tailwind';
 
 type Props = {
   library: LibraryType | { popularity: number };
   markOnly?: boolean;
-  style?: ViewStyle;
+  style?: TextStyle | ViewStyle;
 };
 
 export default function TrendingMark({ library, style, markOnly = false }: Props) {
@@ -45,10 +46,10 @@ export default function TrendingMark({ library, style, markOnly = false }: Props
   );
 
   return markOnly ? (
-    <View style={[tw`mb-1`, style]}>{content}</View>
+    <View style={[tw`mb-1`, style as ViewStyle]}>{content}</View>
   ) : (
     <HoverEffect>
-      <A href="/scoring" style={[tw`flex relative items-start no-underline`, style]}>
+      <A href="/scoring" style={[tw`flex relative items-start no-underline`, style as Style]}>
         {content}
       </A>
     </HoverEffect>
diff --git a/components/Package/EntityCounter.tsx b/components/Package/EntityCounter.tsx
@@ -1,11 +1,12 @@
-import { type StyleProp, type TextStyle } from 'react-native';
+import { type StyleProp } from 'react-native';
+import { type Style } from 'twrnc';
 
 import { Label } from '~/common/styleguide';
 import tw from '~/util/tailwind';
 
 type Props = {
   count: number;
-  style?: StyleProp<TextStyle>;
+  style?: StyleProp<Style>;
 };
 
 export default function EntityCounter({ count, style }: Props) {
diff --git a/components/Package/ReadmeCodeBlock.tsx b/components/Package/ReadmeCodeBlock.tsx
@@ -11,10 +11,10 @@ type Props = {
   theme: Theme;
 };
 
+const SHIKI_OPTS = { langAlias: { gradle: 'groovy' } } as const;
+
 export default function ReadmeCodeBlock({ code, theme, lang }: Props) {
-  const highlighter = useShikiHighlighter(code, lang, theme, {
-    langAlias: { gradle: 'groovy' },
-  });
+  const highlighter = useShikiHighlighter(code, lang, theme, SHIKI_OPTS);
 
   const copyButton = (
     <Tooltip
diff --git a/components/Package/TrustedBadge.tsx b/components/Package/TrustedBadge.tsx
@@ -8,7 +8,7 @@ export default function TrustedBadge() {
   return (
     <Tooltip
       trigger={
-        <View>
+        <View role="button" aria-label="Trusted publisher">
           <Verified width={16} height={16} style={tw`text-success`} />
         </View>
       }>
diff --git a/components/TopBar.tsx b/components/TopBar.tsx
@@ -47,7 +47,8 @@ export default function TopBar() {
                 <Button
                   aria-label="Toggle theme"
                   onPress={toggleTheme}
-                  style={tw`size-8.5 px-1 bg-transparent rounded-full`}>
+                  style={tw`size-8.5 px-1 bg-transparent`}
+                  containerStyle={tw`rounded-full`}>
                   {tw.prefixMatch('dark') ? (
                     <ThemeLight style={tw`text-white`} />
                   ) : (
@@ -64,8 +65,8 @@ export default function TopBar() {
                 <Button
                   aria-label="Tools"
                   href="/tools"
-                  style={tw`size-8.5 px-1 bg-transparent rounded-full`}
-                  tabIndex={-1}>
+                  style={tw`size-8.5 px-1 bg-transparent`}
+                  containerStyle={tw`rounded-full`}>
                   <Tools style={tw`text-white`} />
                 </Button>
               </View>
@@ -79,8 +80,8 @@ export default function TopBar() {
                   openInNewTab
                   aria-label="GitHub repository"
                   href="https://github.com/react-native-community/directory"
-                  style={tw`size-8.5 px-1 bg-transparent rounded-full`}
-                  tabIndex={-1}>
+                  style={tw`size-8.5 px-1 bg-transparent`}
+                  containerStyle={tw`rounded-full`}>
                   <GitHub style={tw`text-white`} />
                 </Button>
               </View>
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "@sentry/react": "^10.32.1",
     "crypto-js": "^4.2.0",
     "es-toolkit": "^1.43.0",
-    "expo": "54.0.30",
+    "expo": "54.0.31",
     "expo-font": "^14.0.10",
     "next": "^16.1.1",
     "node-emoji": "^2.2.0",
diff --git a/react-native-libraries.json b/react-native-libraries.json
@@ -19023,10 +19023,7 @@
   },
   {
     "githubUrl": "https://github.com/comertcimen/expo-skoverlay",
-    "npmPkg": "expo-skoverlay",
-    "examples": [
-      "https://github.com/comertcimen/expo-skoverlay/tree/main/example"
-    ],
+    "examples": ["https://github.com/comertcimen/expo-skoverlay/tree/main/example"],
     "ios": true,
     "newArchitecture": true
   }
diff --git a/types/index.ts b/types/index.ts
@@ -1,3 +1,5 @@
+import 'expo/types/react-native-web.d.ts';
+
 import { type ReactElement, type ReactNode } from 'react';
 
 import { type NewArchSupportStatus } from '~/util/newArchStatus';
