tweak platform icons and UI elements, add analyzer, bump Expo

react-native-community · Apr 27, 2024 · 298ecf9 · 298ecf9
1 parent aeb97ca
commit 298ecf9
Show file tree

Hide file tree

Showing 11 changed files with 827 additions and 749 deletions.
diff --git a/.env.example b/.env.example
@@ -1 +1,2 @@
-GITHUB_TOKEN=your-token
+GITHUB_TOKEN=your-token
+ANALYZE=false
diff --git a/.gitignore b/.gitignore
@@ -11,32 +11,14 @@ npm-debug.*
 # macOS
 .DS_Store
 
-# Expo Web
-web-build
-web-report
-
-# Expo Native
+# Expo
 .expo
-*.jks
-*.p8
-*.p12
-*.key
-*.mobileprovision
-*.orig.*
 
 # Next.js
 .next/*
-out/
-
-# Next.js production
+analyze/
 build/
-
-# Next.js dependencies
-.pnp
-.pnp.js
-
-# Now.js
-.now
+out/
 
 # IDEs
 .idea

diff --git a/common/styleguide.tsx b/common/styleguide.tsx
@@ -52,8 +52,8 @@ export const darkColors = {
   powder: '#262a36',
   pewter: '#767C8E',
   secondary: '#a2a7ab',
-  warningLight: '#4B3F03',
-  warning: '#685603',
+  warningLight: '#2f2704',
+  warning: '#9a810c',
 };
 
 const baseTextStyles = {

diff --git a/components/CompatibilityTags.tsx b/components/CompatibilityTags.tsx
@@ -20,12 +20,9 @@ const Tag = ({ label, tagStyle, showCheck = true }: TagProps) => {
   const { isDark } = useContext(CustomAppearanceContext);
   return (
     <View key={label} style={[styles.tag, tagStyle]}>
-      {showCheck ? (
-        <Check width={14} height={10} fill={isDark ? darkColors.secondary : undefined} />
-      ) : null}
+      {showCheck ? <Check width={12} height={8} fill={colors.gray5} /> : null}
       <Label
         style={[
-          showCheck ? styles.textWithIcon : styles.text,
           {
             color: isDark ? darkColors.secondary : colors.black,
           },
@@ -93,22 +90,17 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     flexWrap: 'wrap',
     marginBottom: -4,
+    gap: 6,
   },
   tag: {
     flexDirection: 'row',
     alignItems: 'center',
     borderWidth: 1,
-    marginRight: 8,
-    borderRadius: 2,
-    paddingHorizontal: 6,
+    borderRadius: 4,
+    paddingHorizontal: 8,
     paddingVertical: 4,
     marginBottom: 4,
     userSelect: 'none',
-  },
-  textWithIcon: {
-    marginLeft: 4,
-  },
-  text: {
-    marginHorizontal: 4,
+    gap: 4,
   },
 });
diff --git a/components/Icons/index.tsx b/components/Icons/index.tsx
@@ -1,4 +1,4 @@
-import { Path, Svg } from 'react-native-svg';
+import { Path, Rect, Svg } from 'react-native-svg';
 
 import { colors } from '../../common/styleguide';
 
@@ -307,24 +307,27 @@ export function PlatformTvOS({ width = 18, height = 18, fill = colors.black }: P
 
 export function PlatformMacOS({ width = 18, height = 18, fill = colors.black }: Props) {
   return (
-    <Svg width={width} height={height} viewBox="0 0 24 24" fill="none">
-      <Path d="M4 5h16v11H4z" opacity=".3" fill={fill} />
+    <Svg width={width} height={height} viewBox="0 0 32 32" fill="none">
+      <Path opacity="0.3" d="M4 6H28V24.439H20.5V27H11.5V24.439H4V6Z" fill={fill} />
       <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M30 23.5C30 24.9667 28.9667 26 27.5 26H32C32 27.1733 31.4667 28 30 28H2C0.533333 28 0 27.1733 0 26H4.5C3.03333 26 2 24.9667 2 23.5V7.5C2 6.03333 3.5 5 4.5 5H27.5C28.5 5 30 6.03333 30 7.5V23.5ZM12 26L13 27H19L20 26H12ZM5.33333 7C4.68141 7.01656 3.97921 7.7128 4 8.5V22.5C3.99334 23.2469 4.65987 23.9831 5.33333 24H26.6667C27.3754 23.9965 28.0046 23.2237 28 22.5V8.5C28.0197 7.72884 27.3523 6.99362 26.6667 7H18.5V8L18 8.5H14L13.5 8L13.5 7H5.33333Z"
         fill={fill}
-        d="M20 18c1.1 0 1.99-.9 1.99-2L22 5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2H0c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2h-4zM4 5h16v11H4V5zm8 14c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"
       />
     </Svg>
   );
 }
 
 export function PlatformIOS({ width = 18, height = 18, fill = colors.black }: Props) {
   return (
-    <Svg width={width} height={height} viewBox="0 0 18 18" fill="none">
-      <Path d="M5 2.5h8v13H5v-13z" opacity=".3" fill={fill} />
+    <Svg width={width} height={height} viewBox="0 0 32 32" fill="none">
       <Path
+        d="M22.5 0H9.5C7.5 0 6 1.5 6 3.5V28.5C6 30.5 7.5 32 9.5 32H22.5C24.5 32 26 30.5 26 28.5V3.5C26 1.5 24.5 0 22.5 0ZM24 28.5C24.0026 29.1545 23.2965 29.9913 22.5 30H9.5C8.72277 30.0108 8.00356 29.1706 8 28.5V3.5C8.00219 2.64538 8.78312 2.00046 9.5 2H22.5C23.2749 1.99957 24.0009 2.69315 24 3.5V28.5Z"
         fill={fill}
-        d="M12.9 0H5.1c-1 0-1.6.7-1.6 1.6v14.8c0 .9.7 1.6 1.6 1.6H13c.8 0 1.6-.7 1.6-1.6V1.6C14.5.7 13.8 0 12.9 0zm.1 15.5H5v-13h8v13z"
       />
+      <Rect x="13" y="3" width="6" height="2" rx="1" fill={fill} />
+      <Path opacity="0.3" d="M8 2H24V30H8V2Z" fill={fill} />
     </Svg>
   );
 }
@@ -342,13 +345,11 @@ export function PlatformAndroid({ width = 18, height = 18, fill = colors.black }
 
 export function PlatformWeb({ width = 18, height = 18, fill = colors.black }: Props) {
   return (
-    <Svg width={width} height={height} viewBox="0 0 24 24" fill="none">
-      <rect height="3.5" opacity=".3" width="10.5" x="4" y="9" fill={fill} />
-      <rect height="3.5" opacity=".3" width="10.5" x="4" y="14.5" fill={fill} />
-      <rect height="9" opacity=".3" width="3.5" x="16.5" y="9" fill={fill} />
+    <Svg width={width} height={height} viewBox="0 0 32 32" fill="none">
+      <Path opacity="0.3" d="M27 10H5V25H27V10Z" fill={fill} />
       <Path
         fill={fill}
-        d="M20,4H4C2.9,4,2.01,4.9,2.01,6L2,18c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V6C22,4.9,21.1,4,20,4z M14.5,18L4,18v-3.5h10.5 V18z M14.5,12.5H4V9h10.5V12.5z M20,18l-3.5,0V9H20V18z"
+        d="M27.2 5H4.8C3.26 5 2.014 6.29375 2.014 7.875L2 25.125C2 26.7063 3.26 28 4.8 28H27.2C28.74 28 30 26.7063 30 25.125V7.875C30 6.29375 28.74 5 27.2 5ZM20 25H5V19H20V25ZM20 17H5V10H20V17ZM27 25H22V10H27V25Z"
       />
     </Svg>
   );
@@ -357,7 +358,7 @@ export function PlatformWeb({ width = 18, height = 18, fill = colors.black }: Pr
 export function PlatformWindows({ width = 18, height = 18, fill = colors.black }: Props) {
   return (
     <Svg width={width} height={height} viewBox="0 0 32 32" fill="none">
-      <path
+      <Path
         fill={fill}
         d="M0,4.5l13.1-1.8l0,12.6L0,15.5L0,4.5z M13.1,16.8l0,12.6L0,27.7l0-10.9L13.1,16.8z M14.7,2.5L32,0v15.2l-17.3,0.1L14.7,2.5z M32,17l0,15.1l-17.3-2.4l0-12.7L32,17z"
       />
@@ -368,7 +369,7 @@ export function PlatformWindows({ width = 18, height = 18, fill = colors.black }
 export function PlatformExpo({ width = 18, height = 18, fill = colors.black }: Props) {
   return (
     <Svg width={width} height={height} viewBox="0 0 24 22" fill="none">
-      <path
+      <Path
         fill={fill}
         d="M11.39 8.269c.19-.277.397-.312.565-.312.168 0 .447.035.637.312 1.49 2.03 3.95 6.075 5.765 9.06 1.184 1.945 2.093 3.44 2.28 3.63.7.714 1.66.269 2.218-.541.549-.797.701-1.357.701-1.954 0-.407-7.958-15.087-8.759-16.309C14.027.98 13.775.683 12.457.683h-.988c-1.315 0-1.505.297-2.276 1.472C8.392 3.377.433 18.057.433 18.463c0 .598.153 1.158.703 1.955.558.81 1.518 1.255 2.218.54.186-.19 1.095-1.684 2.279-3.63 1.815-2.984 4.267-7.029 5.758-9.06z"
       />
@@ -379,13 +380,13 @@ export function PlatformExpo({ width = 18, height = 18, fill = colors.black }: P
 export function PlatformVisionOS({ width = 18, height = 18, fill = colors.black }: Props) {
   return (
     <Svg width={width} height={height} viewBox="0 0 392 222" fill="none">
-      <path
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M360.71 49.8576C362.706 52.7425 363.922 54.5 365.5 54.5C398 54.5001 396.5 113 382 136C379.833 161.667 359.851 217.719 296 221.5C258.761 223.705 235.907 205.678 218.926 192.284C209.231 184.637 201.45 178.5 194 178.5C186.773 178.5 178.966 184.671 169.233 192.365C152.168 205.855 129.182 224.024 93.0227 221.815C31.0458 218.029 11.6496 161.897 9.54646 136.194C-4.52801 113.161 -5.98401 54.5776 25.5622 54.5776C27.0938 54.5776 28.2742 52.8175 30.2118 49.9285C38.7116 37.2549 61.7829 2.85439 193 0C328.184 2.85033 351.953 37.2019 360.71 49.8576ZM196 26.0001L197.201 26C254.529 25.9966 347.957 25.991 356.505 96.1585C365.274 168.142 333.328 182.604 316.309 190.308C315.494 190.677 314.714 191.03 313.974 191.373C297.771 198.89 259.797 196.886 224.354 164.312C219.966 160.637 208.152 153.288 196 153.288C183.848 153.288 172.034 160.637 167.646 164.312C132.203 196.886 94.2287 198.89 78.0262 191.373C77.2861 191.03 76.5057 190.677 75.691 190.308C58.6722 182.604 26.7261 168.142 35.4949 96.1585C44.0425 25.991 137.471 25.9966 194.799 26L196 26.0001Z"
         fill={fill}
       />
-      <path
+      <Path
         d="M197.201 26L196 26.0001L194.799 26C137.471 25.9966 44.0425 25.991 35.4949 96.1585C26.3064 171.588 61.8238 183.856 78.0262 191.373C94.2287 198.89 132.203 196.886 167.646 164.312C172.034 160.637 183.848 153.288 196 153.288C208.152 153.288 219.966 160.637 224.354 164.312C259.797 196.886 297.771 198.89 313.974 191.373C330.176 183.856 365.694 171.588 356.505 96.1585C347.957 25.991 254.529 25.9966 197.201 26Z"
         fill={fill}
         fillOpacity="0.25"
@@ -397,7 +398,7 @@ export function PlatformVisionOS({ width = 18, height = 18, fill = colors.black
 export function ReactLogo({ width = 18, height = 18, fill = colors.black }: Props) {
   return (
     <Svg width={width} height={height} viewBox="0 0 512 512" fill="none">
-      <path
+      <Path
         fill={fill}
         d="M418.2 177.2c-5.4-1.8-10.8-3.5-16.2-5.1.9-3.7 1.7-7.4 2.5-11.1 12.3-59.6 4.2-107.5-23.1-123.3-26.3-15.1-69.2.6-112.6 38.4-4.3 3.7-8.5 7.6-12.5 11.5-2.7-2.6-5.5-5.2-8.3-7.7-45.5-40.4-91.1-57.4-118.4-41.5-26.2 15.2-34 60.3-23 116.7 1.1 5.6 2.3 11.1 3.7 16.7-6.4 1.8-12.7 3.8-18.6 5.9C38.3 196.2 0 225.4 0 255.6c0 31.2 40.8 62.5 96.3 81.5 4.5 1.5 9 3 13.6 4.3-1.5 6-2.8 11.9-4 18-10.5 55.5-2.3 99.5 23.9 114.6 27 15.6 72.4-.4 116.6-39.1 3.5-3.1 7-6.3 10.5-9.7 4.4 4.3 9 8.4 13.6 12.4 42.8 36.8 85.1 51.7 111.2 36.6 27-15.6 35.8-62.9 24.4-120.5-.9-4.4-1.9-8.9-3-13.5 3.2-.9 6.3-1.9 9.4-2.9 57.7-19.1 99.5-50 99.5-81.7 0-30.3-39.4-59.7-93.8-78.4zM282.9 92.3c37.2-32.4 71.9-45.1 87.7-36 16.9 9.7 23.4 48.9 12.8 100.4-.7 3.4-1.4 6.7-2.3 10-22.2-5-44.7-8.6-67.3-10.6-13-18.6-27.2-36.4-42.6-53.1 3.9-3.7 7.7-7.2 11.7-10.7zM167.2 307.5c5.1 8.7 10.3 17.4 15.8 25.9-15.6-1.7-31.1-4.2-46.4-7.5 4.4-14.4 9.9-29.3 16.3-44.5 4.6 8.8 9.3 17.5 14.3 26.1zm-30.3-120.3c14.4-3.2 29.7-5.8 45.6-7.8-5.3 8.3-10.5 16.8-15.4 25.4-4.9 8.5-9.7 17.2-14.2 26-6.3-14.9-11.6-29.5-16-43.6zm27.4 68.9c6.6-13.8 13.8-27.3 21.4-40.6s15.8-26.2 24.4-38.9c15-1.1 30.3-1.7 45.9-1.7s31 .6 45.9 1.7c8.5 12.6 16.6 25.5 24.3 38.7s14.9 26.7 21.7 40.4c-6.7 13.8-13.9 27.4-21.6 40.8-7.6 13.3-15.7 26.2-24.2 39-14.9 1.1-30.4 1.6-46.1 1.6s-30.9-.5-45.6-1.4c-8.7-12.7-16.9-25.7-24.6-39s-14.8-26.8-21.5-40.6zm180.6 51.2c5.1-8.8 9.9-17.7 14.6-26.7 6.4 14.5 12 29.2 16.9 44.3-15.5 3.5-31.2 6.2-47 8 5.4-8.4 10.5-17 15.5-25.6zm14.4-76.5c-4.7-8.8-9.5-17.6-14.5-26.2-4.9-8.5-10-16.9-15.3-25.2 16.1 2 31.5 4.7 45.9 8-4.6 14.8-10 29.2-16.1 43.4zM256.2 118.3c10.5 11.4 20.4 23.4 29.6 35.8-19.8-.9-39.7-.9-59.5 0 9.8-12.9 19.9-24.9 29.9-35.8zM140.2 57c16.8-9.8 54.1 4.2 93.4 39 2.5 2.2 5 4.6 7.6 7-15.5 16.7-29.8 34.5-42.9 53.1-22.6 2-45 5.5-67.2 10.4-1.3-5.1-2.4-10.3-3.5-15.5-9.4-48.4-3.2-84.9 12.6-94zm-24.5 263.6c-4.2-1.2-8.3-2.5-12.4-3.9-21.3-6.7-45.5-17.3-63-31.2-10.1-7-16.9-17.8-18.8-29.9 0-18.3 31.6-41.7 77.2-57.6 5.7-2 11.5-3.8 17.3-5.5 6.8 21.7 15 43 24.5 63.6-9.6 20.9-17.9 42.5-24.8 64.5zm116.6 98c-16.5 15.1-35.6 27.1-56.4 35.3-11.1 5.3-23.9 5.8-35.3 1.3-15.9-9.2-22.5-44.5-13.5-92 1.1-5.6 2.3-11.2 3.7-16.7 22.4 4.8 45 8.1 67.9 9.8 13.2 18.7 27.7 36.6 43.2 53.4-3.2 3.1-6.4 6.1-9.6 8.9zm24.5-24.3c-10.2-11-20.4-23.2-30.3-36.3 9.6.4 19.5.6 29.5.6 10.3 0 20.4-.2 30.4-.7-9.2 12.7-19.1 24.8-29.6 36.4zm130.7 30c-.9 12.2-6.9 23.6-16.5 31.3-15.9 9.2-49.8-2.8-86.4-34.2-4.2-3.6-8.4-7.5-12.7-11.5 15.3-16.9 29.4-34.8 42.2-53.6 22.9-1.9 45.7-5.4 68.2-10.5 1 4.1 1.9 8.2 2.7 12.2 4.9 21.6 5.7 44.1 2.5 66.3zm18.2-107.5c-2.8.9-5.6 1.8-8.5 2.6-7-21.8-15.6-43.1-25.5-63.8 9.6-20.4 17.7-41.4 24.5-62.9 5.2 1.5 10.2 3.1 15 4.7 46.6 16 79.3 39.8 79.3 58 0 19.6-34.9 44.9-84.8 61.4zm-149.7-15c25.3 0 45.8-20.5 45.8-45.8s-20.5-45.8-45.8-45.8c-25.3 0-45.8 20.5-45.8 45.8s20.5 45.8 45.8 45.8z"
       />

diff --git a/components/Library/UnmaintainedLabel.tsx b/components/Library/UnmaintainedLabel.tsx
@@ -13,15 +13,15 @@ const UnmaintainedLabel = () => {
         style={[
           styles.unmaintainedTextContainer,
           {
-            backgroundColor: isDark ? darkColors.warning : colors.warningLight,
+            backgroundColor: isDark ? darkColors.warningLight : colors.warningLight,
           },
         ]}>
-        <Warning width={16} height={16} fill={isDark ? colors.gray2 : colors.warningDark} />
+        <Warning width={16} height={16} fill={isDark ? darkColors.warning : colors.warningDark} />
         <Label
           style={[
             styles.unmaintainedText,
             {
-              color: isDark ? colors.gray2 : colors.warningDark,
+              color: isDark ? darkColors.warning : colors.warningDark,
             },
           ]}>
           This library is not actively maintained
@@ -43,8 +43,8 @@ const styles = StyleSheet.create({
     paddingLeft: 20,
     paddingRight: 12,
     paddingVertical: 6,
-    borderTopRightRadius: 2,
-    borderBottomRightRadius: 2,
+    borderTopRightRadius: 4,
+    borderBottomRightRadius: 4,
   },
   unmaintainedText: {
     marginLeft: 6,

diff --git a/next.config.js b/next.config.js
@@ -1,9 +1,12 @@
 const { withExpo } = require('@expo/next-adapter');
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+});
 const withPlugins = require('next-compose-plugins');
 const withFonts = require('next-fonts');
 const withImages = require('next-images');
 
-module.exports = withPlugins([withExpo, withImages, withFonts], {
+module.exports = withPlugins([withExpo, withImages, withFonts, withBundleAnalyzer], {
   productionBrowserSourceMaps: true,
   swcMinify: true,
   eslint: {
@@ -15,6 +18,7 @@ module.exports = withPlugins([withExpo, withImages, withFonts], {
   transpilePackages: [
     '@expo/html-elements',
     '@react-native-picker/picker',
+    '@sentry/react',
     'react-native-safe-area-context',
     'react-native-svg',
     'react-native-web',

diff --git a/package.json b/package.json
@@ -23,22 +23,22 @@
     "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@react-native-async-storage/async-storage": "^1.23.1",
-    "@react-native-picker/picker": "^2.7.2",
-    "@sentry/react": "^7.109.0",
+    "@react-native-picker/picker": "^2.7.5",
+    "@sentry/react": "^7.112.2",
     "@vercel/analytics": "^1.2.2",
-    "expo": "^50.0.14",
-    "expo-font": "~11.10.3",
+    "expo": "^51.0.0-preview.7",
+    "expo-font": "~12.0.4",
     "lodash": "^4.17.21",
-    "next": "^14.1.4",
+    "next": "^14.2.3",
     "node-emoji": "^2.1.3",
     "react": "18.2.0",
     "react-content-loader": "^7.0.0",
     "react-dom": "18.2.0",
     "react-easy-linkify": "^1.0.8",
-    "react-native": "0.73.6",
-    "react-native-safe-area-context": "^4.9.0",
-    "react-native-svg": "^15.1.0",
-    "react-native-web": "^0.19.10",
+    "react-native": "0.74.0",
+    "react-native-safe-area-context": "^4.10.1",
+    "react-native-svg": "^15.2.0",
+    "react-native-web": "^0.19.11",
     "react-native-web-hooks": "^3.0.2",
     "use-debounce": "^10.0.0"
   },
@@ -47,15 +47,16 @@
     "@babel/node": "^7.23.9",
     "@babel/preset-env": "^7.24.4",
     "@expo/next-adapter": "^6.0.0",
+    "@next/bundle-analyzer": "^14.2.3",
     "@types/react": "^18.2.74",
     "ajv-cli": "^5.0.0",
     "browserslist": "^4.23.0",
     "cheerio": "^1.0.0-rc.12",
     "cross-fetch": "^4.0.0",
     "dotenv": "^16.4.5",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.1.4",
-    "eslint-config-universe": "^12.0.0",
+    "eslint-config-next": "^14.2.3",
+    "eslint-config-universe": "^12.0.1",
     "isomorphic-fetch": "^3.0.0",
     "jsonfile": "^6.1.0",
     "lint-staged": "^15.2.2",
@@ -64,7 +65,7 @@
     "next-images": "^1.8.5",
     "prettier": "^3.2.5",
     "simple-git-hooks": "^2.11.1",
-    "typescript": "^5.4.4",
+    "typescript": "^5.4.5",
     "user-agent-data-types": "^0.4.2",
     "yarn-deduplicate": "^6.0.2"
   },

diff --git a/pages/404.js → pages/404.tsx b/pages/404.js → pages/404.tsx
diff --git a/pages/scoring.tsx b/pages/scoring.tsx
@@ -38,7 +38,7 @@ const Scoring = () => {
     color: isDark ? colors.gray2 : colors.black,
   };
   const calloutStyle = {
-    color: isDark ? colors.gray2 : colors.black,
+    color: isDark ? darkColors.warning : colors.warningDark,
     backgroundColor: isDark ? darkColors.warningLight : colors.warningLight,
     borderLeftColor: isDark ? darkColors.warning : colors.warning,
   };