Skip to content

Commit bb454e5

Browse files
SimekSimek
authored
initial implementation of package code browser (#2377)
* initial implementation of package code browser * disable preview of some files, improve highlight, code tweaks * UI tweaks, improve mobile view * add ability to preview image files * hover indicator for file rows, UI and code highlight tweaks * render files as a tree, group file into directories * tweak files tree UI, implement file warnings, disallow large files preview * lint fix after rebase * expand disable preview list, more file warnings, fix large image preview * improve shiki custom theme, other code highlight tweaks * add file search, small visual tweaks * collapse directory paths without a content to reduce nesting * enable line numbers in file content highlighter * allow code preview of SVGs, support regex matching for file warnings * disable preview for few more files, expand warning and highlight rule lists
1 parent ff3ecb7 commit bb454e5

24 files changed

+1225
-20
lines changed

‎components/Icons/index.tsx‎

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1366,3 +1366,253 @@ export function Spinner({ width = 24, height = 24, style }: IconProps) {
13661366
</Svg>
13671367
);
13681368
}
1369+
1370+
export function FileIcon({ width = 24, height = 24, style }: IconProps) {
1371+
return (
1372+
<Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
1373+
<path
1374+
d="M200,224H56a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h96l56,56V216A8,8,0,0,1,200,224Z"
1375+
fill="none"
1376+
stroke="currentColor"
1377+
strokeLinecap="round"
1378+
strokeLinejoin="round"
1379+
strokeWidth="16"
1380+
/>
1381+
<polyline
1382+
points="152 32 152 88 208 88"
1383+
fill="none"
1384+
stroke="currentColor"
1385+
strokeLinecap="round"
1386+
strokeLinejoin="round"
1387+
strokeWidth="16"
1388+
/>
1389+
<line
1390+
x1="96"
1391+
y1="136"
1392+
x2="160"
1393+
y2="136"
1394+
fill="none"
1395+
stroke="currentColor"
1396+
strokeLinecap="round"
1397+
strokeLinejoin="round"
1398+
strokeWidth="16"
1399+
/>
1400+
<line
1401+
x1="96"
1402+
y1="168"
1403+
x2="160"
1404+
y2="168"
1405+
fill="none"
1406+
stroke="currentColor"
1407+
strokeLinecap="round"
1408+
strokeLinejoin="round"
1409+
strokeWidth="16"
1410+
/>
1411+
</Svg>
1412+
);
1413+
}
1414+
1415+
export function DownloadFileIcon({ width = 24, height = 24, style }: IconProps) {
1416+
return (
1417+
<Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
1418+
<path
1419+
d="M200,224H56a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h96l56,56V216A8,8,0,0,1,200,224Z"
1420+
fill="none"
1421+
stroke="currentColor"
1422+
strokeLinecap="round"
1423+
strokeLinejoin="round"
1424+
strokeWidth="16"
1425+
/>
1426+
<polyline
1427+
points="152 32 152 88 208 88"
1428+
fill="none"
1429+
stroke="currentColor"
1430+
strokeLinecap="round"
1431+
strokeLinejoin="round"
1432+
strokeWidth="16"
1433+
/>
1434+
<line
1435+
x1="128"
1436+
y1="120"
1437+
x2="128"
1438+
y2="184"
1439+
fill="none"
1440+
stroke="currentColor"
1441+
strokeLinecap="round"
1442+
strokeLinejoin="round"
1443+
strokeWidth="16"
1444+
/>
1445+
<polyline
1446+
points="104 160 128 184 152 160"
1447+
fill="none"
1448+
stroke="currentColor"
1449+
strokeLinecap="round"
1450+
strokeLinejoin="round"
1451+
strokeWidth="16"
1452+
/>
1453+
</Svg>
1454+
);
1455+
}
1456+
1457+
export function TempFileIcon({ width = 24, height = 24, style }: IconProps) {
1458+
return (
1459+
<Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
1460+
<path
1461+
d="M72,224H56a8,8,0,0,1-8-8V184"
1462+
fill="none"
1463+
stroke="currentColor"
1464+
strokeLinecap="round"
1465+
strokeLinejoin="round"
1466+
strokeWidth="16"
1467+
/>
1468+
<polyline
1469+
points="120 32 152 32 208 88 208 136"
1470+
fill="none"
1471+
stroke="currentColor"
1472+
strokeLinecap="round"
1473+
strokeLinejoin="round"
1474+
strokeWidth="16"
1475+
/>
1476+
<path
1477+
d="M48,64V40a8,8,0,0,1,8-8H80"
1478+
fill="none"
1479+
stroke="currentColor"
1480+
strokeLinecap="round"
1481+
strokeLinejoin="round"
1482+
strokeWidth="16"
1483+
/>
1484+
<polyline
1485+
points="152 32 152 88 208 88"
1486+
fill="none"
1487+
stroke="currentColor"
1488+
strokeLinecap="round"
1489+
strokeLinejoin="round"
1490+
strokeWidth="16"
1491+
/>
1492+
<path
1493+
d="M208,176v40a8,8,0,0,1-8,8h-8"
1494+
fill="none"
1495+
stroke="currentColor"
1496+
strokeLinecap="round"
1497+
strokeLinejoin="round"
1498+
strokeWidth="16"
1499+
/>
1500+
<line
1501+
x1="48"
1502+
y1="104"
1503+
x2="48"
1504+
y2="144"
1505+
fill="none"
1506+
stroke="currentColor"
1507+
strokeLinecap="round"
1508+
strokeLinejoin="round"
1509+
strokeWidth="16"
1510+
/>
1511+
<line
1512+
x1="112"
1513+
y1="224"
1514+
x2="152"
1515+
y2="224"
1516+
fill="none"
1517+
stroke="currentColor"
1518+
strokeLinecap="round"
1519+
strokeLinejoin="round"
1520+
strokeWidth="16"
1521+
/>
1522+
</Svg>
1523+
);
1524+
}
1525+
1526+
export function FolderIcon({ width = 24, height = 24, style }: IconProps) {
1527+
return (
1528+
<Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
1529+
<path
1530+
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"
1531+
fill="none"
1532+
stroke="currentColor"
1533+
strokeLinecap="round"
1534+
strokeLinejoin="round"
1535+
strokeWidth="16"
1536+
/>
1537+
<path
1538+
d="M32,80V56a8,8,0,0,1,8-8H92.69a8,8,0,0,1,5.65,2.34L128,80"
1539+
fill="none"
1540+
stroke="currentColor"
1541+
strokeLinecap="round"
1542+
strokeLinejoin="round"
1543+
strokeWidth="16"
1544+
/>
1545+
</Svg>
1546+
);
1547+
}
1548+
1549+
export function ImageFileIcon({ width = 24, height = 24, style }: IconProps) {
1550+
return (
1551+
<Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
1552+
<rect
1553+
x="40"
1554+
y="40"
1555+
width="176"
1556+
height="176"
1557+
rx="8"
1558+
fill="none"
1559+
stroke="currentColor"
1560+
strokeLinecap="round"
1561+
strokeLinejoin="round"
1562+
strokeWidth="16"
1563+
/>
1564+
<circle
1565+
cx="96"
1566+
cy="96"
1567+
r="16"
1568+
fill="none"
1569+
stroke="currentColor"
1570+
strokeLinecap="round"
1571+
strokeLinejoin="round"
1572+
strokeWidth="16"
1573+
/>
1574+
<path
1575+
d="M56.69,216,166.34,106.34a8,8,0,0,1,11.32,0L216,144.69"
1576+
fill="none"
1577+
stroke="currentColor"
1578+
strokeLinecap="round"
1579+
strokeLinejoin="round"
1580+
strokeWidth="16"
1581+
/>
1582+
</Svg>
1583+
);
1584+
}
1585+
1586+
export function CodeIcon({ width = 24, height = 24, style }: IconProps) {
1587+
return (
1588+
<Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
1589+
<polyline
1590+
points="64 88 16 128 64 168"
1591+
fill="none"
1592+
stroke="currentColor"
1593+
strokeLinecap="round"
1594+
strokeLinejoin="round"
1595+
strokeWidth="16"
1596+
/>
1597+
<polyline
1598+
points="192 88 240 128 192 168"
1599+
fill="none"
1600+
stroke="currentColor"
1601+
strokeLinecap="round"
1602+
strokeLinejoin="round"
1603+
strokeWidth="16"
1604+
/>
1605+
<line
1606+
x1="160"
1607+
y1="40"
1608+
x2="96"
1609+
y2="216"
1610+
fill="none"
1611+
stroke="currentColor"
1612+
strokeLinecap="round"
1613+
strokeLinejoin="round"
1614+
strokeWidth="16"
1615+
/>
1616+
</Svg>
1617+
);
1618+
}

‎components/NavigationTab.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import tw from '~/util/tailwind';
88
type Props = {
99
title: string;
1010
path?: string;
11-
counter?: number;
11+
counter?: number | string;
1212
};
1313

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

0 commit comments

Comments
 (0)