correct package commit link, types improvements, deps bump (#1873)

Author: Simek

bun.lock

@@ -188,7 +188,7 @@ const getLinkHoverStyles = (isDark: boolean) => ({
   textDecorationColor: isDark ? darkColors.powder : colors.gray4,
 });
 
-export const HoverEffect = ({ children }) => {
+export function HoverEffect({ children }: PropsWithChildren) {
   const [isHovered, setIsHovered] = useState(false);
   const [isActive, setIsActive] = useState(false);
 
@@ -203,4 +203,4 @@ export const HoverEffect = ({ children }) => {
       {children}
     </View>
   );
-};
+}

common/styleguide.tsx

@@ -3,15 +3,15 @@ import { StyleSheet, View } from 'react-native';
 
 import { colors, darkColors } from '~/common/styleguide';
 import CustomAppearanceContext from '~/context/CustomAppearanceContext';
-import { Library } from '~/types';
+import { LibraryType } from '~/types';
 
 import { Info } from './Icons';
 import { NewArchitectureTag } from './Library/NewArchitectureTag';
 import { Tag } from './Tag';
 import Tooltip from './Tooltip';
 
 type Props = {
-  library: Library;
+  library: LibraryType;
 };
 
 export function CompatibilityTags({ library }: Props) {

components/CompatibilityTags.tsx

@@ -5,7 +5,11 @@ import { H2, A, P } from '~/common/styleguide';
 import Navigation from './Navigation';
 import PageMeta from './PageMeta';
 
-const ErrorState = ({ statusCode }) => {
+type Props = {
+  statusCode: number;
+};
+
+function ErrorState({ statusCode }: Props) {
   return (
     <>
       <PageMeta title="Error" description="Uh oh, something went wrong" />
@@ -20,7 +24,7 @@ const ErrorState = ({ statusCode }) => {
       </View>
     </>
   );
-};
+}
 
 const styles = StyleSheet.create({
   container: {

components/ErrorState.tsx

@@ -6,7 +6,7 @@ import { A, colors, darkColors, H3, P } from '~/common/styleguide';
 import { IconProps } from '~/components/Icons';
 import LoadingContent from '~/components/Library/LoadingContent';
 import CustomAppearanceContext from '~/context/CustomAppearanceContext';
-import { Library as LibraryType, Query } from '~/types';
+import { LibraryType, Query } from '~/types';
 import urlWithQuery from '~/util/urlWithQuery';
 
 const LibraryWithLoading = dynamic(() => import('~/components/Library'), {

components/Explore/ExploreSection.tsx

@@ -2,11 +2,19 @@ import Link from 'next/link';
 import { Platform, StyleSheet, View } from 'react-native';
 
 import { P, colors } from '~/common/styleguide';
+import { type Query } from '~/types';
 import urlWithQuery from '~/util/urlWithQuery';
 
 import { CheckBox } from '../CheckBox';
 
-export const ToggleLink = ({ query, paramName, title, basePath = '/' }) => {
+type Props = {
+  query: Query;
+  paramName: string;
+  title: string;
+  basePath?: string;
+};
+
+export function ToggleLink({ query, paramName, title, basePath = '/' }: Props) {
   const isSelected = !!query[paramName];
 
   return (
@@ -23,7 +31,7 @@ export const ToggleLink = ({ query, paramName, title, basePath = '/' }) => {
       </View>
     </Link>
   );
-};
+}
 
 const styles = StyleSheet.create({
   link: {

components/Filters/ToggleLink.tsx

@@ -25,7 +25,7 @@ type PlatformProps = {
   style?: ViewStyle;
 };
 
-const Platform = ({ name, pkgName, url, Icon, style }: PlatformProps) => {
+function Platform({ name, pkgName, url, Icon, style }: PlatformProps) {
   const { isDark } = useContext(CustomAppearanceContext);
 
   const packageHoverStyle = {
@@ -46,7 +46,7 @@ const Platform = ({ name, pkgName, url, Icon, style }: PlatformProps) => {
       </View>
     </A>
   );
-};
+}
 
 const Footer = () => {
   const { isDark } = useContext(CustomAppearanceContext);

components/Footer.tsx

@@ -1,17 +1,21 @@
-const getAnalyticsScript = (id: string) => {
+function getAnalyticsScript(id: string) {
   return `
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());
 gtag('config', '${id}');
 `.replace(/\n/g, '');
-};
+}
 
-const GoogleAnalytics = ({ id }) => (
-  <>
-    <script async src={`https://www.googletagmanager.com/gtag/js?id=${id}`} />
-    <script dangerouslySetInnerHTML={{ __html: getAnalyticsScript(id) }} />
-  </>
-);
+type Props = {
+  id: string;
+};
 
-export default GoogleAnalytics;
+export default function GoogleAnalytics({ id }: Props) {
+  return (
+    <>
+      <script async src={`https://www.googletagmanager.com/gtag/js?id=${id}`} />
+      <script dangerouslySetInnerHTML={{ __html: getAnalyticsScript(id) }} />
+    </>
+  );
+}

components/GoogleAnalytics.tsx

@@ -3,7 +3,7 @@ import { Image, StyleSheet, View } from 'react-native';
 
 import { H3, A, P } from '~/common/styleguide';
 import LoadingContent from '~/components/Library/LoadingContent';
-import { type Library as LibraryType } from '~/types';
+import { type LibraryType } from '~/types';
 
 type Props = {
   libraries: LibraryType[];

components/Libraries.tsx

@@ -3,7 +3,7 @@ import { Platform, StyleSheet, View } from 'react-native';
 
 import { colors, A, P, Caption, darkColors } from '~/common/styleguide';
 import CustomAppearanceContext from '~/context/CustomAppearanceContext';
-import { Library as LibraryType } from '~/types';
+import { type LibraryType } from '~/types';
 
 import { DirectoryScore } from './DirectoryScore';
 import {
@@ -40,7 +40,7 @@ function generateData({ github, score, npm, npmPkg }: LibraryType, isDark: boole
         </A>
       ),
     },
-    npm.downloads
+    npm?.downloads
       ? {
           id: 'downloads',
           icon: <Download fill={iconColor} width={16} height={18} />,