fix keybinds, caution icon and dependency row appearance, add libs (#2291)

Author: Simek

components/Icons/index.tsx

@@ -1107,6 +1107,7 @@ export function CautionBlockquote({ width = 24, height = 24, style }: IconProps)
         x2="128"
         y2="80"
         fill="none"
+        stroke="currentColor"
         strokeLinecap="round"
         strokeLinejoin="round"
         strokeWidth="24"
@@ -1118,7 +1119,7 @@ export function CautionBlockquote({ width = 24, height = 24, style }: IconProps)
         strokeMiterlimit="10"
         strokeWidth="24"
       />
-      <Circle cx="128" cy="172" r="24" fill="currentColor" />
+      <Circle cx="128" cy="172" r="16" fill="currentColor" />
     </Svg>
   );
 }

components/InputKeyHint.tsx

@@ -8,20 +8,19 @@ type Props = {
   }[];
 };
 
-export const focusHintLabel = tw`font-light text-palette-gray4`;
-export const focusHintKey = tw`min-w-6 rounded-[3px] bg-palette-gray5 px-1 py-[3px] text-center tracking-[0.75px] text-tertiary dark:bg-powder`;
-
 export default function InputKeyHint({ content }: Props) {
   return content.map(entry => {
     if ('key' in entry) {
       return (
-        <Label key={`key-${entry.key}`} style={focusHintKey}>
+        <Label
+          key={`key-${entry.key}`}
+          style={tw`min-w-6 rounded-[3px] bg-palette-gray5 px-1 py-[3px] text-center tracking-[0.75px] text-tertiary dark:bg-powder dark:text-secondary`}>
           {entry.key}
         </Label>
       );
     } else if ('label' in entry) {
       return (
-        <Label key={`key-${entry.label}`} style={focusHintLabel}>
+        <Label key={`key-${entry.label}`} style={tw`font-light text-palette-gray4`}>
           {entry.label}
         </Label>
       );

components/Package/DependencyRow.tsx

@@ -18,12 +18,14 @@ type Props = {
 
 export default function DependencyRow({ name, data, packageVersion }: Props) {
   const { isSmallScreen } = useLayout();
+
   const isDataString = typeof data === 'string';
+  const versionString = isDataString ? data : data.version;
+  const hasLongVersion = versionString.length > 18;
   const versionLabel = getVersionLabel(
-    isDataString ? data : data.version,
+    versionString,
     typeof packageVersion === 'string' ? packageVersion : undefined
   );
-  const hasLongVersion = typeof versionLabel !== 'string' || versionLabel.length > 18;
 
   return (
     <View

react-native-libraries.json

@@ -20069,5 +20069,56 @@
     "npmPkg": "react-zlib-js",
     "ios": true,
     "android": true
+  },
+  {
+    "githubUrl": "https://github.com/hyochan/react-native-audio-recorder-player",
+    "ios": true,
+    "android": true,
+    "web": true,
+    "alternatives": ["react-native-nitro-sound"]
+  },
+  {
+    "githubUrl": "https://github.com/expo/expo-asset-utils",
+    "ios": true,
+    "android": true,
+    "web": true,
+    "alternatives": ["expo-asset", "expo-file-system"]
+  },
+  {
+    "githubUrl": "https://github.com/acostalima/react-native-polyfill-globals",
+    "ios": true,
+    "android": true
+  },
+  {
+    "githubUrl": "https://github.com/ide/react-native-button",
+    "ios": true,
+    "android": true
+  },
+  {
+    "githubUrl": "https://github.com/glepur/react-native-swipe-gestures",
+    "ios": true,
+    "android": true
+  },
+  {
+    "githubUrl": "https://github.com/naeemur/react-native-wheel-color-picker",
+    "images": ["https://naeemur.github.io/asset-bucket/rn-wheel-color-picker.gif"],
+    "ios": true,
+    "android": true,
+    "web": true
+  },
+  {
+    "githubUrl": "https://github.com/nandorojo/sf-symbols-typescript",
+    "ios": true,
+    "macos": true,
+    "tvos": true,
+    "visionos": true
+  },
+  {
+    "githubUrl": "https://github.com/expo/expo/tree/main/packages/@expo/metro-runtime",
+    "npmPkg": "@expo/metro-runtime",
+    "ios": true,
+    "macos": true,
+    "tvos": true,
+    "visionos": true
   }
 ]

styles/styles.css

@@ -522,6 +522,15 @@ select {
       display: block;
     }
 
+    &.note,
+    &.tip,
+    &.important,
+    &.warning,
+    &.caution {
+      padding-block-start: 0.5rem;
+      padding-block-end: 0.5rem;
+    }
+
     &.note {
       border-left-color: #4493f8;
 
@@ -703,10 +712,6 @@ select {
     }
   }
 
-  td:empty {
-    display: none;
-  }
-
   th {
     background-color: var(--table-header-background);
   }