@noya-app/noya-file-explorer 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-file-explorer",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -20,13 +20,13 @@
     "dev": "npm run build:main -- --watch"
   },
   "dependencies": {
-    "@noya-app/noya-designsystem": "0.1.50",
-    "@noya-app/noya-icons": "0.1.7",
-    "@noya-app/noya-multiplayer-react": "0.1.53",
+    "@noya-app/noya-designsystem": "0.1.52",
+    "@noya-app/noya-icons": "0.1.8",
+    "@noya-app/noya-multiplayer-react": "0.1.55",
     "@noya-app/noya-keymap": "0.1.3",
-    "@noya-app/react-utils": "0.1.17",
+    "@noya-app/react-utils": "0.1.18",
     "@noya-app/noya-utils": "0.1.5",
-    "@noya-app/noya-schemas": "0.1.4",
+    "@noya-app/noya-schemas": "0.1.5",
     "imfs": "^0.1.0",
     "browser-fs-access": "0.35.0"
   },

package/src/MediaCollection.tsx

@@ -32,7 +32,7 @@ import {
   useAssetManager,
   useAssets,
 } from "@noya-app/noya-multiplayer-react";
-import { MediaItem, MediaMap } from "@noya-app/noya-schemas";
+import { FileMediaItem, MediaItem, MediaMap } from "@noya-app/noya-schemas";
 import { groupBy, isDeepEqual } from "@noya-app/noya-utils";
 import {
   downloadUrl,
@@ -71,21 +71,86 @@ import {
   getVisibleItems,
   moveMediaInsideFolder,
   moveUpAFolder,
+  renameMediaItemAndDescendantPaths,
   updateExpandedMap,
   validateMediaItemRename,
 } from "./utils/files";
 
+const extensionToContentType = {
+  svg: "image/svg+xml",
+  png: "image/png",
+  jpeg: "image/jpeg",
+} as const;
+
+function encodeFileContentForThumbnail(
+  pathProp: string,
+  item: FileMediaItem
+): { contentType: string; url?: string } | undefined {
+  const extension = path.extname(pathProp).slice(1);
+  const contentType =
+    extensionToContentType[extension as keyof typeof extensionToContentType];
+
+  if (contentType) {
+    if (item.encoding === "base64") {
+      return {
+        contentType,
+        url: `data:${contentType};base64,${item.content}`,
+      };
+    } else {
+      try {
+        return {
+          contentType,
+          url: `data:${contentType},${encodeURIComponent(item.content)}`,
+        };
+      } catch (error) {
+        console.warn("Failed to encode content:", error);
+        return { contentType };
+      }
+    }
+  }
+
+  return undefined;
+}
+
 const MediaThumbnailInternal = memoGeneric(
-  ({ item, selected }: CollectionThumbnailProps<MediaItem>) => {
+  ({
+    item,
+    selected,
+    size,
+    path: pathProp,
+  }: CollectionThumbnailProps<MediaItem> & {
+    path?: string;
+  }) => {
     const asset = useAsset(item.kind === "asset" ? item.assetId : undefined);
     const isRoot = item.id === rootMediaItem.id;
     const isFolder = item.kind === "folder";
+    const isFile = item.kind === "file";
+
+    let contentType: string | undefined;
+    let url: string | undefined;
+
+    if (asset) {
+      contentType = asset.contentType;
+      url = asset.url;
+    } else if (isFile && pathProp) {
+      const encoded = encodeFileContentForThumbnail(pathProp, item);
+
+      if (encoded) {
+        contentType = encoded.contentType;
+        url = encoded.url;
+      }
+    }
+
+    const fileName = pathProp ? path.basename(pathProp) : undefined;
+
     return (
       <MediaThumbnail
-        contentType={asset?.contentType}
+        contentType={contentType}
         iconName={isRoot ? "HomeIcon" : isFolder ? "FolderIcon" : undefined}
-        url={asset?.url}
+        url={url}
         selected={selected}
+        size={size}
+        fileName={fileName}
       />
     );
   }
@@ -120,10 +185,12 @@ type MediaCollectionProps = {
   ) => void;
   selectedIds?: string[];
   media: MediaMap;
-  setMedia: (
+  setMedia?: (
     metadata: Partial<MultiplayerPatchMetadata>,
     media: MediaMap
   ) => void;
+  /** @default false */
+  readOnly?: boolean;
   /** @default "list" */
   viewType?: CollectionViewType;
   /**
@@ -174,7 +241,8 @@ export const MediaCollection = memo(
       onSelectionChange,
       selectedIds: selectedIdsProp,
       media,
-      setMedia,
+      setMedia: setMediaProp,
+      readOnly = false,
       viewType = "list",
       fileKindFilter = "all",
       showRootItem = false,
@@ -196,18 +264,34 @@ export const MediaCollection = memo(
     },
     ref
   ) {
+    const setMedia = useCallback(
+      (...args: Parameters<Extract<typeof setMediaProp, Function>>) => {
+        setMediaProp?.(...args);
+      },
+      [setMediaProp]
+    );
     const tree = useMemo(() => createMediaItemTree(media), [media]);
     const [tempItem, setTempItem] = useState<[string, MediaItem] | undefined>(
       undefined
     );
-    const treeWithTempItem = useMemo(
-      () =>
-        createMediaItemTree({
-          ...media,
-          ...(tempItem ? { [tempItem[0]]: tempItem[1] } : {}),
-        }),
+    const mediaWithTempItem = useMemo(
+      () => ({
+        ...media,
+        ...(tempItem ? { [tempItem[0]]: tempItem[1] } : {}),
+      }),
       [media, tempItem]
     );
+    const treeWithTempItem = useMemo(
+      () => createMediaItemTree(mediaWithTempItem),
+      [mediaWithTempItem]
+    );
+    const temp = useMemo(
+      () => ({
+        media: mediaWithTempItem,
+        tree: treeWithTempItem,
+      }),
+      [mediaWithTempItem, treeWithTempItem]
+    );
     const [selectedIds, setSelectedIds] = useControlledOrUncontrolled<string[]>(
       {
         defaultValue: [],
@@ -273,14 +357,6 @@ export const MediaCollection = memo(
       return itemPath.startsWith(path.dirname(firstSelectedPath));
     });
 
-    // Convert size prop to grid size if in grid view
-    const gridSize = useMemo(() => {
-      if (viewType === "grid") {
-        return size;
-      }
-      return "medium";
-    }, [viewType, size]);
-
     useEffect(() => {
       if (initialExpanded) {
         setExpandedMap(initialExpanded);
@@ -318,31 +394,29 @@ export const MediaCollection = memo(
           selectedItem.id
         );
         if (!selectedItemPath) return;
-        const mediaWithTempItem = {
-          ...media,
-          ...(tempItem ? { [tempItem[0]]: tempItem[1] } : {}),
-        };
         const renameIsValid = validateMediaItemRename({
           basename: newName,
           selectedItemPath,
-          media: mediaWithTempItem,
+          media: temp.media,
         });
         if (!renameIsValid) {
           setTempItem(undefined);
           return;
         }
-        const mediaClone = { ...media };
-        delete mediaClone[selectedItemPath];
+        const mediaWithRenamedDescendantPaths =
+          renameMediaItemAndDescendantPaths({
+            newName,
+            selectedItemPath,
+            media: temp.media,
+            tree: temp.tree,
+          });
         setMedia(
           { name: "Rename media item", timestamp: Date.now() },
-          {
-            ...mediaClone,
-            [path.join(path.dirname(selectedItemPath), newName)]: selectedItem,
-          }
+          mediaWithRenamedDescendantPaths
         );
         setTempItem(undefined);
       },
-      [media, renamable, setMedia, tempItem, treeWithTempItem.idToPathMap]
+      [renamable, setMedia, temp.media, temp.tree, treeWithTempItem.idToPathMap]
     );
 
     const handleAddFolder = useCallback(
@@ -650,10 +724,12 @@ export const MediaCollection = memo(
           onSelect={(action) => handleMenuAction(action, selectedMediaItems)}
           selected={selected}
           onOpenChange={onOpenChange}
+          variant={viewType === "grid" ? "normal" : "bare"}
           style={{
             backgroundColor: selected
-              ? cssVars.colors.primaryPastel
+              ? cssVars.colors.selectedListItemBackground
               : "transparent",
+            color: selected ? cssVars.colors.selectedListItemText : undefined,
           }}
         />
       );
@@ -662,6 +738,7 @@ export const MediaCollection = memo(
       handleMenuAction,
       renderActionProp,
       selectedMediaItems,
+      viewType,
     ]);
 
     useImperativeHandle(ref, () => ({
@@ -682,12 +759,14 @@ export const MediaCollection = memo(
         <FileExplorerLayout
           title={title ?? rootMediaItemName}
           right={
-            <FileExplorerUploadButton
-              showUploadButton={showUploadButton}
-              onUpload={() => handleUpload(rootMediaItem.id)}
-            >
-              {right}
-            </FileExplorerUploadButton>
+            !readOnly && (
+              <FileExplorerUploadButton
+                showUploadButton={showUploadButton}
+                onUpload={() => handleUpload(rootMediaItem.id)}
+              >
+                {right}
+              </FileExplorerUploadButton>
+            )
           }
           className={className}
         >
@@ -696,7 +775,7 @@ export const MediaCollection = memo(
             scrollable={scrollable}
             items={visibleItems}
             viewType={viewType}
-            size={gridSize}
+            size={size}
             getId={(file) => file.id}
             getName={(file) => {
               if (file.id === tempItem?.[1].id) {
@@ -729,14 +808,19 @@ export const MediaCollection = memo(
             onRename={onRename}
             renamable={renamable}
             selectedIds={selectedIds}
-            renderThumbnail={(props) => <MediaThumbnailInternal {...props} />}
+            renderThumbnail={(props) => (
+              <MediaThumbnailInternal
+                {...props}
+                path={tree.idToPathMap.get(props.item.id)}
+              />
+            )}
             renderAction={renderAction}
             renderDetail={(file, selected) => {
               if (file.kind !== "asset") return null;
               const asset = assets.find((a) => a.id === file.assetId);
               if (!asset) return null;
               return (
-                <FileExplorerDetail selected={selected}>
+                <FileExplorerDetail selected={selected} size={size}>
                   {(asset.size / 1024).toFixed(1)}KB
                 </FileExplorerDetail>
               );
@@ -763,11 +847,11 @@ export const MediaCollection = memo(
               if (position !== "inside" || targetItem.kind === "asset") {
                 return false;
               }
-              const sourcePath = tree.findIndexPath(
+              const sourcePath = tree.findPath(
                 rootMediaItem,
                 (item) => item.id === sourceItem.id
               );
-              const targetPath = tree.findIndexPath(
+              const targetPath = tree.findPath(
                 rootMediaItem,
                 (item) => item.id === targetItem.id
               );

package/src/__tests__/renameMediaItemAndDescendantPaths.test.ts

@@ -0,0 +1,139 @@
+import { MediaMap } from "@noya-app/noya-schemas";
+import { expect, it } from "bun:test";
+import { renameMediaItemAndDescendantPaths } from "../utils/files";
+import {
+  createMediaAsset,
+  createMediaFolder,
+  createMediaItemTree,
+} from "../utils/mediaItemTree";
+
+it("should rename a folder with no children", () => {
+  const dir1 = createMediaFolder();
+  const media: MediaMap = { dir1 };
+
+  const tree = createMediaItemTree(media);
+
+  const result = renameMediaItemAndDescendantPaths({
+    newName: "renamed-dir",
+    selectedItemPath: "dir1",
+    media,
+    tree,
+  });
+
+  expect(result).toEqual({ "renamed-dir": dir1 });
+  expect(result).not.toHaveProperty("dir1");
+});
+
+it("should rename a folder and update paths of its immediate children", () => {
+  const dir1 = createMediaFolder();
+  const child1 = createMediaAsset({ assetId: "asset1" });
+  const child2 = createMediaFolder();
+  const media: MediaMap = {
+    dir1,
+    "dir1/child1": child1,
+    "dir1/child2": child2,
+  };
+  const tree = createMediaItemTree(media);
+
+  const result = renameMediaItemAndDescendantPaths({
+    newName: "renamed-dir",
+    selectedItemPath: "dir1",
+    media,
+    tree,
+  });
+
+  expect(result).toEqual({
+    "renamed-dir": dir1,
+    "renamed-dir/child1": child1,
+    "renamed-dir/child2": child2,
+  });
+  expect(result).not.toHaveProperty("dir1");
+  expect(result).not.toHaveProperty("dir1/child1");
+  expect(result).not.toHaveProperty("dir1/child2");
+});
+
+it("should rename a folder and update paths of all nested descendants", () => {
+  const dir1 = createMediaFolder();
+  const dir2 = createMediaFolder();
+  const dir3 = createMediaFolder();
+  const asset1 = createMediaAsset({ assetId: "asset1" });
+  const media: MediaMap = {
+    dir1,
+    "dir1/dir2": dir2,
+    "dir1/dir2/dir3": dir3,
+    "dir1/dir2/dir3/asset1": asset1,
+  };
+  const tree = createMediaItemTree(media);
+
+  const result = renameMediaItemAndDescendantPaths({
+    newName: "renamed-dir",
+    selectedItemPath: "dir1",
+    media,
+    tree,
+  });
+
+  expect(result).toEqual({
+    "renamed-dir": dir1,
+    "renamed-dir/dir2": dir2,
+    "renamed-dir/dir2/dir3": dir3,
+    "renamed-dir/dir2/dir3/asset1": asset1,
+  });
+  expect(result).not.toHaveProperty("dir1");
+  expect(result).not.toHaveProperty("dir1/dir2");
+  expect(result).not.toHaveProperty("dir1/dir2/dir3");
+  expect(result).not.toHaveProperty("dir1/dir2/dir3/asset1");
+});
+
+it("should rename a file (asset) correctly", () => {
+  const dir1 = createMediaFolder();
+  const asset1 = createMediaAsset({ assetId: "asset1" });
+  const asset2 = createMediaAsset({ assetId: "asset2" });
+  const media: MediaMap = {
+    dir1,
+    "dir1/asset1": asset1,
+    "dir1/asset2": asset2,
+  };
+  const tree = createMediaItemTree(media);
+
+  const result = renameMediaItemAndDescendantPaths({
+    newName: "renamed-asset.png",
+    selectedItemPath: "dir1/asset1",
+    media,
+    tree,
+  });
+
+  expect(result).toEqual({
+    dir1,
+    "dir1/renamed-asset.png": asset1,
+    "dir1/asset2": asset2,
+  });
+  expect(result).not.toHaveProperty("dir1/asset1");
+});
+
+it("should preserve other unrelated paths when renaming", () => {
+  const dir1 = createMediaFolder();
+  const dir2 = createMediaFolder();
+  const asset1 = createMediaAsset({ assetId: "asset1" });
+  const asset2 = createMediaAsset({ assetId: "asset2" });
+  const media: MediaMap = {
+    dir1,
+    dir2,
+    "dir1/asset1": asset1,
+    "dir2/asset2": asset2,
+  };
+  const tree = createMediaItemTree(media);
+
+  const result = renameMediaItemAndDescendantPaths({
+    newName: "renamed-dir",
+    selectedItemPath: "dir1",
+    media,
+    tree,
+  });
+
+  expect(result).toEqual({
+    "renamed-dir": dir1,
+    "renamed-dir/asset1": asset1,
+    dir2,
+    "dir2/asset2": asset2,
+  });
+});

package/src/utils/files.ts

@@ -90,6 +90,7 @@ export const validateMediaItemRename = ({
   if (newPathExists) return false;
   return true;
 };
+
 export const movePathsIntoTarget = ({
   media,
   sourceItemPaths,
@@ -135,6 +136,7 @@ export const movePathsIntoTarget = ({
   }
   return mediaClone;
 };
+
 export const moveUpAFolder = ({
   tree,
   media,
@@ -144,7 +146,7 @@ export const moveUpAFolder = ({
   media: MediaMap;
   selectedIds: string[];
 }) => {
-  const indexPath = tree.findIndexPath(
+  const indexPath = tree.findPath(
     rootMediaItem,
     (item) => item.id === selectedIds[0]
   );
@@ -168,6 +170,7 @@ export const moveUpAFolder = ({
     tree,
   });
 };
+
 export const getDepthMap = (
   item: MediaItem,
   tree: MediaItemTree,
@@ -183,6 +186,7 @@ export const getDepthMap = (
   });
   return depthMap;
 };
+
 export const updateExpandedMap = ({
   item,
   expanded,
@@ -211,6 +215,7 @@ export const updateExpandedMap = ({
   inner(item, expanded);
   return newExpandedMap;
 };
+
 export const deleteMediaItems = ({
   selectedIds,
   media,
@@ -235,6 +240,7 @@ export const deleteMediaItems = ({
     Object.entries(media).filter(([key]) => !itemKeysToDelete.has(key))
   );
 };
+
 export const moveMediaInsideFolder = ({
   sourceItemIds,
   targetItemId,
@@ -260,10 +266,11 @@ export const moveMediaInsideFolder = ({
     tree,
   });
 };
+
 export const getParentDirectories = (mediaMap: MediaMap, folderId: string) => {
   const tree = createMediaItemTree(mediaMap);
 
-  const indexPath = tree.findIndexPath(
+  const indexPath = tree.findPath(
     rootMediaItem,
     (item) => item.id === folderId
   );
@@ -272,3 +279,41 @@ export const getParentDirectories = (mediaMap: MediaMap, folderId: string) => {
 
   return tree.accessPath(rootMediaItem, indexPath);
 };
+
+export const renameMediaItemAndDescendantPaths = ({
+  newName,
+  selectedItemPath,
+  media,
+  tree,
+}: {
+  newName: string;
+  selectedItemPath: string;
+  media: MediaMap;
+  tree: MediaItemTree;
+}) => {
+  const mediaClone = { ...media };
+  const selectedItem = mediaClone[selectedItemPath];
+  if (!selectedItem) return mediaClone;
+
+  const parentPath = path.dirname(selectedItemPath);
+  const newItemPath = path.join(parentPath, newName);
+
+  const descendants = tree
+    .flat(selectedItem)
+    .map((item) => tree.idToPathMap.get(item.id));
+
+  // Update all descendants' paths
+  for (const descendantPath of descendants) {
+    if (!descendantPath) continue;
+
+    // Use the same approach as movePathsIntoTarget
+    const newDescendantPath = descendantPath.replace(
+      selectedItemPath,
+      newItemPath
+    );
+    mediaClone[newDescendantPath] = mediaClone[descendantPath];
+    delete mediaClone[descendantPath];
+  }
+
+  return mediaClone;
+};

package/tsup.config.ts

@@ -1,4 +1,3 @@
-import fixReactVirtualized from "esbuild-plugin-react-virtualized";
 import { defineConfig } from "tsup";
 
 export default defineConfig({
@@ -6,8 +5,7 @@ export default defineConfig({
   format: ["cjs", "esm"],
   dts: true,
   sourcemap: true,
-  noExternal: ["react-virtualized", "@noya-app/noya-designsystem/index.css"],
-  esbuildPlugins: [fixReactVirtualized],
+  noExternal: ["@noya-app/noya-designsystem/index.css"],
   // https://github.com/egoist/tsup/issues/619
   splitting: false,
 });