Skip to content

initial implementation of package code browser #2377

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Simek merged 16 commits into from
Apr 17, 2026
Merged

initial implementation of package code browser #2377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
fa22b88
initial implementation of package code browser
Simek Apr 16, 2026
88075ba
disable preview of some files, improve highlight, code tweaks
Simek Apr 16, 2026
60b7bc7
UI tweaks, improve mobile view
Simek Apr 16, 2026
e40d670
add ability to preview image files
Simek Apr 16, 2026
51a514b
hover indicator for file rows, UI and code highlight tweaks
Simek Apr 16, 2026
eb0b9df
render files as a tree, group file into directories
Simek Apr 16, 2026
75bc960
tweak files tree UI, implement file warnings, disallow large files pr…
Simek Apr 16, 2026
36d6a98
Merge branch 'main' of https://github.com/react-native-community/dire…
Simek Apr 16, 2026
aba968d
lint fix after rebase
Simek Apr 16, 2026
63cd6c7
expand disable preview list, more file warnings, fix large image preview
Simek Apr 16, 2026
54995b3
improve shiki custom theme, other code highlight tweaks
Simek Apr 17, 2026
55c746a
add file search, small visual tweaks
Simek Apr 17, 2026
44bd041
collapse directory paths without a content to reduce nesting
Simek Apr 17, 2026
8f9c1a8
enable line numbers in file content highlighter
Simek Apr 17, 2026
bfcbdf6
allow code preview of SVGs, support regex matching for file warnings
Simek Apr 17, 2026
9555187
disable preview for few more files, expand warning and highlight rule…
Simek Apr 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
250 changes: 250 additions & 0 deletions components/Icons/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1366,3 +1366,253 @@ export function Spinner({ width = 24, height = 24, style }: IconProps) {
</Svg>
);
}

export function FileIcon({ width = 24, height = 24, style }: IconProps) {
return (
<Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
<path
d="M200,224H56a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h96l56,56V216A8,8,0,0,1,200,224Z"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="16"
/>
<polyline
points="152 32 152 88 208 88"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="16"
/>
<line
x1="96"
y1="136"
x2="160"
y2="136"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="16"
/>
<line
x1="96"
y1="168"
x2="160"
y2="168"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="16"
/>
</Svg>
);
}

export function DownloadFileIcon({ width = 24, height = 24, style }: IconProps) {
return (
<Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
<path
d="M200,224H56a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h96l56,56V216A8,8,0,0,1,200,224Z"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="16"
/>
<polyline
points="152 32 152 88 208 88"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="16"
/>
<line
x1="128"
y1="120"
x2="128"
y2="184"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="16"
/>
<polyline
points="104 160 128 184 152 160"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="16"
/>
</Svg>
);
}

export function TempFileIcon({ width = 24, height = 24, style }: IconProps) {
return (
<Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
<path
d="M72,224H56a8,8,0,0,1-8-8V184"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="16"
/>
<polyline
points="120 32 152 32 208 88 208 136"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="16"
/>
<path
d="M48,64V40a8,8,0,0,1,8-8H80"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="16"
/>
<polyline
points="152 32 152 88 208 88"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="16"
/>
<path
d="M208,176v40a8,8,0,0,1-8,8h-8"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="16"
/>
<line
x1="48"
y1="104"
x2="48"
y2="144"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="16"
/>
<line
x1="112"
y1="224"
x2="152"
y2="224"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="16"
/>
</Svg>
);
}

export function FolderIcon({ width = 24, height = 24, style }: IconProps) {
return (
<Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
<path
d="M216.89,208H39.38A7.4,7.4,0,0,1,32,200.62V80H216a8,8,0,0,1,8,8V200.89A7.11,7.11,0,0,1,216.89,208Z"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="16"
/>
<path
d="M32,80V56a8,8,0,0,1,8-8H92.69a8,8,0,0,1,5.65,2.34L128,80"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="16"
/>
</Svg>
);
}

export function ImageFileIcon({ width = 24, height = 24, style }: IconProps) {
return (
<Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
<rect
x="40"
y="40"
width="176"
height="176"
rx="8"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="16"
/>
<circle
cx="96"
cy="96"
r="16"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="16"
/>
<path
d="M56.69,216,166.34,106.34a8,8,0,0,1,11.32,0L216,144.69"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="16"
/>
</Svg>
);
}

export function CodeIcon({ width = 24, height = 24, style }: IconProps) {
return (
<Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
<polyline
points="64 88 16 128 64 168"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="16"
/>
<polyline
points="192 88 240 128 192 168"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="16"
/>
<line
x1="160"
y1="40"
x2="96"
y2="216"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="16"
/>
</Svg>
);
}
2 changes: 1 addition & 1 deletion components/NavigationTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import tw from '~/util/tailwind';
type Props = {
title: string;
path?: string;
counter?: number;
counter?: number | string;
};

function NavigationTab({ title, counter, path = `/${title.toLowerCase()}` }: Props) {
Expand Down
Loading