Many View Package Page Improvements, launch as main view package page (#790)

* remove useless placeholder images (not used)

* init pcb view

* add pcb view tab support, production filepath matching parity

* correctly show files in their directories

* wip directory browsing

* allow browsing into directories

* wip progress towards file selection

* add edit file links

* add bom and 3d views

* fix time ago, fix a lot of placeholder data

* redesign download button

* route to view package page

* code dropdown improvement

* add tab saving via hash

* type fixes

Author: seveibar

bun.lock

@@ -1,5 +1,6 @@
 import { NotFoundError } from "winterspec/middleware"
 import * as ZT from "../db/schema"
+import { normalizeProjectFilePath } from "fake-snippets-api/utils/normalizeProjectFilePath"
 export const getPackageFileIdFromFileDescriptor = async (
   descriptor:
     | { package_file_id: string }
@@ -26,7 +27,8 @@ export const getPackageFileIdFromFileDescriptor = async (
     const packageFile = ctx.db.packageFiles.find(
       (pf: ZT.PackageFile) =>
         pf.package_release_id === package_release_id &&
-        pf.file_path === file_path,
+        normalizeProjectFilePath(pf.file_path) ===
+          normalizeProjectFilePath(file_path),
     )
 
     if (!packageFile) {
@@ -68,7 +70,8 @@ export const getPackageFileIdFromFileDescriptor = async (
     const packageFile = ctx.db.packageFiles.find(
       (pf: ZT.PackageFile) =>
         pf.package_release_id === packageRelease.package_release_id &&
-        pf.file_path === file_path,
+        normalizeProjectFilePath(pf.file_path) ===
+          normalizeProjectFilePath(file_path),
     )
 
     if (!packageFile) {
@@ -109,7 +112,8 @@ export const getPackageFileIdFromFileDescriptor = async (
     const packageFile = ctx.db.packageFiles.find(
       (pf: ZT.PackageFile) =>
         pf.package_release_id === packageRelease.package_release_id &&
-        pf.file_path === file_path,
+        normalizeProjectFilePath(pf.file_path) ===
+          normalizeProjectFilePath(file_path),
     )
 
     if (!packageFile) {
@@ -154,7 +158,8 @@ export const getPackageFileIdFromFileDescriptor = async (
     const packageFile = ctx.db.packageFiles.find(
       (pf: ZT.PackageFile) =>
         pf.package_release_id === packageRelease.package_release_id &&
-        pf.file_path === file_path,
+        normalizeProjectFilePath(pf.file_path) ===
+          normalizeProjectFilePath(file_path),
     )
 
     if (!packageFile) {

fake-snippets-api/lib/package_file/get-package-file-id-from-file-descriptor.ts

@@ -0,0 +1,60 @@
+const RESTRICTED_DIRS = ["/node_modules/", "/dist/", "/.git/"]
+
+/**
+ * A normalized project path always starts with "./" and never ends with a slash.
+ * It has no backwards slashes and no double slashes. It does not go to parent
+ * directories. It is not a directory (must have a file extension)
+ *
+ * GOOD:
+ *  - src/index.ts
+ *  - README.md
+ *
+ * BAD:
+ * - ./README.md
+ * - ./src/index.ts
+ * - src\index.ts
+ * - ../README.md
+ * - ./src/
+ * - ./src
+ *
+ * Additionally, throw on directories that should never be included, e.g.
+ * - node_modules
+ * - dist
+ * - .git
+ */
+export const normalizeProjectFilePathAndValidate = (rawPath: string) => {
+  const normalizedPath = normalizeProjectFilePath(rawPath)
+
+  if (normalizedPath.includes("../")) {
+    throw new Error(
+      "Invalid project file path. Parent directories are not allowed.",
+    )
+  }
+
+  if (RESTRICTED_DIRS.some((dir) => normalizedPath.includes(dir))) {
+    throw new Error(
+      `Invalid project file path. Restricted directories (${RESTRICTED_DIRS.map(
+        (rd) => rd.slice(1, -1),
+      ).join(", ")}) are not allowed.`,
+    )
+  }
+
+  if (!normalizedPath.includes(".")) {
+    throw new Error(
+      `Invalid project file path. Must have a file extension. Given "${rawPath}"`,
+    )
+  }
+
+  return normalizedPath
+}
+
+export const normalizeProjectFilePath = (rawPath: string) => {
+  let normalizedPath = rawPath.trim() // Remove leading/trailing whitespace
+  normalizedPath = normalizedPath.replace(/\/+/g, "/") // Replace multiple consecutive slashes with a single slash
+  normalizedPath = normalizedPath.replace(/^\.\//, "") // Remove leading "./"
+  normalizedPath = normalizedPath.replace(/\/$/, "") // Remove trailing slash
+  normalizedPath = normalizedPath.replace(/\\/g, "/") // Replace backslashes with forward slashes
+  normalizedPath = normalizedPath.replace(/^\//, "") // Remove leading "/"
+
+  return normalizedPath
+}

fake-snippets-api/utils/normalizeProjectFilePath.ts

@@ -90,7 +90,7 @@
     "country-list": "^2.3.0",
     "date-fns": "^4.1.0",
     "dsn-converter": "^0.0.60",
-    "easyeda": "^0.0.62",
+    "easyeda": "^0.0.129",
     "embla-carousel-react": "^8.3.0",
     "extract-codefence": "^0.0.4",
     "fflate": "^0.8.2",
@@ -112,6 +112,7 @@
     "react-helmet": "^6.1.0",
     "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.53.0",
+    "react-hot-toast": "^2.5.2",
     "react-intersection-observer": "^9.14.1",
     "react-query": "^3.39.3",
     "react-resizable-panels": "^2.1.3",
@@ -135,7 +136,7 @@
     "@playwright/test": "^1.48.0",
     "@tscircuit/core": "^0.0.356",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
-    "@tscircuit/runframe": "^0.0.270",
+    "@tscircuit/runframe": "^0.0.304",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
     "@types/country-list": "^2.1.4",

package.json

@@ -120,7 +120,11 @@ function App() {
             <Route path="/preview" component={PreviewPage} />
             <Route path="/dev-login" component={DevLoginPage} />
             <Route path="/:username" component={UserProfilePage} />
-            <Route path="/:author/:snippetName" component={ViewSnippetPage} />
+            <Route path="/:author/:packageName" component={ViewPackagePage} />
+            <Route
+              path="/snippets/:author/:snippetName"
+              component={ViewSnippetPage}
+            />
           </Switch>
         </Suspense>
         <Toaster />