add ability to maximize code browser, other tweaks (#2403)

Author: Simek

README.md

@@ -34,6 +34,10 @@
 - Use the [template](#new-library-entry-template) as a guide.
 - Submit a PR.
 
+> [!TIP]
+> You can also use the React Native Directory CLI to submit a library directly from the terminal. Run `bunx rn-directory submit` from the package root folder.
+> - https://github.com/Simek/rn-directory
+
 ### New library entry template
 
 > [!IMPORTANT]

components/Icons/index.tsx

@@ -1639,3 +1639,81 @@ export function FileMetadataIcon({ width = 24, height = 24, style }: IconProps)
     </Svg>
   );
 }
+
+export function MaximizeIcon({ width = 24, height = 24, style }: IconProps) {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
+      <polyline
+        points="168 48 208 48 208 88"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <polyline
+        points="88 208 48 208 48 168"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <polyline
+        points="208 168 208 208 168 208"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <polyline
+        points="48 88 48 48 88 48"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+    </Svg>
+  );
+}
+
+export function MinimizeIcon({ width = 24, height = 24, style }: IconProps) {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
+      <polyline
+        points="208 96 160 96 160 48"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <polyline
+        points="48 160 96 160 96 208"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <polyline
+        points="160 208 160 160 208 160"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <polyline
+        points="96 48 96 96 48 96"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+    </Svg>
+  );
+}

components/InputKeyHint.tsx

@@ -14,7 +14,7 @@ export default function InputKeyHint({ content }: Props) {
       return (
         <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`}>
+          style={tw`font-mono min-w-6 rounded-[3px] bg-palette-gray5 px-1 py-[3px] text-center tracking-[0.25px] text-tertiary dark:bg-powder dark:text-secondary`}>
           {entry.key}
         </Label>
       );

components/Package/CodeBrowser/CodeBrowserContent.tsx

@@ -20,15 +20,24 @@ import tw from '~/util/tailwind';
 import CodeBrowserContentFooter from './CodeBrowserContentFooter';
 import CodeBrowserContentHeader from './CodeBrowserContentHeader';
 import CodeBrowserContentHighlighter from './CodeBrowserContentHighlighter';
+import DisplayModeButton from './DisplayModeButton';
 import DownloadFileButton from './DownloadFileButton';
 
 type Props = {
   packageName: string;
+  isBrowserMaximized: boolean;
+  toggleMaximized: () => void;
   filePath: string;
   fileData?: UnpkgMeta['files'][number];
 };
 
-export default function CodeBrowserContent({ packageName, filePath, fileData }: Props) {
+export default function CodeBrowserContent({
+  packageName,
+  isBrowserMaximized,
+  toggleMaximized,
+  filePath,
+  fileData,
+}: Props) {
   const [rawPreview, setRawPreview] = useState(false);
   const [imageData, setImageData] = useState<
     SyntheticEvent<HTMLImageElement>['currentTarget'] | null
@@ -64,7 +73,12 @@ export default function CodeBrowserContent({ packageName, filePath, fileData }:
   if (isLoading) {
     return (
       <>
-        <CodeBrowserContentHeader filePath={filePath} />
+        <CodeBrowserContentHeader filePath={filePath}>
+          <DisplayModeButton
+            isBrowserMaximized={isBrowserMaximized}
+            toggleMaximized={toggleMaximized}
+          />
+        </CodeBrowserContentHeader>
         <View style={tw`flex flex-1 items-center justify-center`}>
           <ThreeDotsLoader />
         </View>
@@ -103,6 +117,10 @@ export default function CodeBrowserContent({ packageName, filePath, fileData }:
               label="Copy"
               style={tw`relative right-0 top-0`}
             />
+            <DisplayModeButton
+              isBrowserMaximized={isBrowserMaximized}
+              toggleMaximized={toggleMaximized}
+            />
           </View>
         </CodeBrowserContentHeader>
         <CodeBrowserContentHighlighter
@@ -146,6 +164,10 @@ export default function CodeBrowserContent({ packageName, filePath, fileData }:
           {(isPreviewDisabled || isImageFile) && (
             <DownloadFileButton filePath={filePath} packageName={packageName} />
           )}
+          <DisplayModeButton
+            isBrowserMaximized={isBrowserMaximized}
+            toggleMaximized={toggleMaximized}
+          />
         </View>
       </CodeBrowserContentHeader>
       <View style={tw`flex flex-1 items-center justify-center`}>

components/Package/CodeBrowser/DisplayModeButton.tsx

@@ -0,0 +1,36 @@
+import { Pressable, View } from 'react-native';
+
+import { useLayout } from '~/common/styleguide';
+import { MinimizeIcon } from '~/components/Icons';
+import InputKeyHint from '~/components/InputKeyHint';
+import Tooltip from '~/components/Tooltip';
+import tw from '~/util/tailwind';
+
+type Props = {
+  isBrowserMaximized: boolean;
+  toggleMaximized: () => void;
+};
+
+export default function DisplayModeButton({ isBrowserMaximized, toggleMaximized }: Props) {
+  const { isSmallScreen } = useLayout();
+
+  const Icon = isBrowserMaximized ? MinimizeIcon : MinimizeIcon;
+
+  return (
+    <Tooltip
+      trigger={
+        <Pressable onPress={toggleMaximized}>
+          <Icon style={tw`size-5 text-palette-gray4 dark:text-pewter`} />
+        </Pressable>
+      }>
+      {isBrowserMaximized ? (
+        <View style={[tw`flex flex-row items-center gap-1.5`, !isSmallScreen && tw`-mr-1`]}>
+          <span>Minimize code browser</span>
+          {!isSmallScreen && <InputKeyHint content={[{ key: 'Esc' }]} />}
+        </View>
+      ) : (
+        'Maximize code browser'
+      )}
+    </Tooltip>
+  );
+}