@noya-app/noya-file-explorer 0.0.16 → 0.0.18

package/src/__tests__/validateMediaItemRename.test.ts

@@ -1,6 +1,6 @@
 import { MediaMap } from "@noya-app/noya-schemas";
 import { expect, it } from "bun:test";
-import { validateMediaItemRename } from "../utils/files";
+import { mediaValidateMediaItemRename } from "../utils/files";
 import { createMediaAsset, createMediaFolder } from "../utils/mediaItemTree";
 
 it("should return true for valid rename with no conflicts", () => {
@@ -11,7 +11,7 @@ it("should return true for valid rename with no conflicts", () => {
     "dir1/file1.jpg": file1,
   };
 
-  const result = validateMediaItemRename({
+  const result = mediaValidateMediaItemRename({
     basename: "newname.jpg",
     selectedItemPath: "dir1/file1.jpg",
     media: mediaMap,
@@ -30,7 +30,7 @@ it("should return false when a file with the same name already exists", () => {
     "dir1/file2.jpg": file2,
   };
 
-  const result = validateMediaItemRename({
+  const result = mediaValidateMediaItemRename({
     basename: "file2.jpg",
     selectedItemPath: "dir1/file1.jpg",
     media: mediaMap,
@@ -47,7 +47,7 @@ it("should return false when renaming a file to its own name", () => {
     "dir1/file1.jpg": file1,
   };
 
-  const result = validateMediaItemRename({
+  const result = mediaValidateMediaItemRename({
     basename: "file1.jpg",
     selectedItemPath: "dir1/file1.jpg",
     media: mediaMap,
@@ -64,7 +64,7 @@ it("should return true when renaming a folder with no conflicts", () => {
     "dir1/dir2": dir2,
   };
 
-  const result = validateMediaItemRename({
+  const result = mediaValidateMediaItemRename({
     basename: "newdir",
     selectedItemPath: "dir1/dir2",
     media: mediaMap,
@@ -83,7 +83,7 @@ it("should return false when a folder with the same name already exists", () =>
     "dir1/dir3": dir3,
   };
 
-  const result = validateMediaItemRename({
+  const result = mediaValidateMediaItemRename({
     basename: "dir3",
     selectedItemPath: "dir1/dir2",
     media: mediaMap,
@@ -100,7 +100,7 @@ it("should handle special characters in basename", () => {
     "dir1/file1.jpg": file1,
   };
 
-  const result = validateMediaItemRename({
+  const result = mediaValidateMediaItemRename({
     basename: "new-file@name.jpg",
     selectedItemPath: "dir1/file1.jpg",
     media: mediaMap,
@@ -121,7 +121,7 @@ it("should return true when renaming to a name that exists in a different direct
     "dir2/file2.jpg": file2,
   };
 
-  const result = validateMediaItemRename({
+  const result = mediaValidateMediaItemRename({
     basename: "file2.jpg",
     selectedItemPath: "dir1/file1.jpg",
     media: mediaMap,
@@ -138,7 +138,7 @@ it("should return false when trying to rename to an empty basename", () => {
     "dir1/file1.jpg": file1,
   };
 
-  const result = validateMediaItemRename({
+  const result = mediaValidateMediaItemRename({
     basename: "",
     selectedItemPath: "dir1/file1.jpg",
     media: mediaMap,
@@ -159,7 +159,7 @@ it("should handle deep nested directories", () => {
     "dir1/dir2/dir3/file1.jpg": file1,
   };
 
-  const result = validateMediaItemRename({
+  const result = mediaValidateMediaItemRename({
     basename: "renamed.jpg",
     selectedItemPath: "dir1/dir2/dir3/file1.jpg",
     media: mediaMap,
@@ -189,7 +189,7 @@ it("should return false when basename contains invalid filesystem characters", (
   ];
 
   invalidNames.forEach((basename) => {
-    const result = validateMediaItemRename({
+    const result = mediaValidateMediaItemRename({
       basename,
       selectedItemPath: "dir1/file1.jpg",
       media: mediaMap,

package/src/index.ts

@@ -1,4 +1,6 @@
 import "./index.css";
 export * from "./MediaCollection";
+export * from "./ResourceExplorer";
 export * from "./utils/files";
 export * from "./utils/mediaItemTree";
+export * from "./utils/resourceUtils";

package/src/utils/files.ts

@@ -6,27 +6,28 @@ import {
   MediaItemTree,
   rootMediaItem,
 } from "./mediaItemTree";
+import { basenameValidator } from "./resourceUtils";
 
-export type FileKindFilter = "assets" | "directories" | "all";
-export type ExpandedMap = Record<string, boolean | undefined>;
+export type MediaFileKindFilter = "assets" | "directories" | "all";
+export type MediaExpandedMap = Record<string, boolean | undefined>;
 
-export type GetVisibleItemsOptions = {
-  expandedMap: ExpandedMap;
-  fileKindFilter: FileKindFilter;
+export type MediaGetVisibleItemsOptions = {
+  expandedMap: MediaExpandedMap;
+  fileKindFilter: MediaFileKindFilter;
   rootItemId: string;
   tree: MediaItemTree;
   showAllDescendants: boolean;
   showRootItem: boolean;
 };
 
-export const getVisibleItems = ({
+export const mediaGetVisibleItems = ({
   expandedMap,
   fileKindFilter,
   rootItemId,
   tree,
   showAllDescendants,
   showRootItem,
-}: GetVisibleItemsOptions) => {
+}: MediaGetVisibleItemsOptions) => {
   const filteredItems: MediaItem[] = [];
   const relativeRootItem =
     tree.find(rootMediaItem, (item) => item.id === rootItemId) ?? rootMediaItem;
@@ -61,23 +62,7 @@ export const getVisibleItems = ({
   return filteredItems;
 };
 
-/**
- * Validates if a basename follows typical file naming conventions
- * Disallows:
- * - Path separators (/ and \)
- * - Characters typically invalid in filesystems (<, >, :, ", |, ?, *)
- * - Empty names
- */
-export const basenameValidator = (basename: string): boolean => {
-  // Check for empty string
-  if (!basename || basename.trim() === "") return false;
-
-  // Simple regex matching common invalid filesystem characters
-  const invalidCharsRegex = /[/\\<>:"|?*]/;
-  return !invalidCharsRegex.test(basename);
-};
-
-export const validateMediaItemRename = ({
+export const mediaValidateMediaItemRename = ({
   basename,
   selectedItemPath,
   media,
@@ -94,7 +79,7 @@ export const validateMediaItemRename = ({
   return true;
 };
 
-export const movePathsIntoTarget = ({
+export const mediaMovePathsIntoTarget = ({
   media,
   sourceItemPaths,
   targetItemPath,
@@ -126,7 +111,7 @@ export const movePathsIntoTarget = ({
         ancestorPath,
         newAncestorPath
       );
-      const newPathIsValid = validateMediaItemRename({
+      const newPathIsValid = mediaValidateMediaItemRename({
         basename: path.basename(descendantPath),
         selectedItemPath: newDescendantPath,
         media,
@@ -140,7 +125,7 @@ export const movePathsIntoTarget = ({
   return mediaClone;
 };
 
-export const moveUpAFolder = ({
+export const mediaMoveUpAFolder = ({
   tree,
   media,
   selectedIds,
@@ -166,7 +151,7 @@ export const moveUpAFolder = ({
   const sourceItemPaths = selectedIds
     .map((id) => tree.idToPathMap.get(id))
     .filter((path): path is string => Boolean(path));
-  return movePathsIntoTarget({
+  return mediaMovePathsIntoTarget({
     media,
     targetItemPath: grandparentFolderPath,
     sourceItemPaths,
@@ -174,7 +159,7 @@ export const moveUpAFolder = ({
   });
 };
 
-export const getDepthMap = (
+export const mediaGetDepthMap = (
   item: MediaItem,
   tree: MediaItemTree,
   showAllDescendants: boolean
@@ -190,7 +175,7 @@ export const getDepthMap = (
   return depthMap;
 };
 
-export const updateExpandedMap = ({
+export const mediaUpdateExpandedMap = ({
   item,
   expanded,
   expandable,
@@ -200,9 +185,9 @@ export const updateExpandedMap = ({
   item: MediaItem;
   expanded: boolean;
   expandable: boolean;
-  expandedMap: ExpandedMap;
+  expandedMap: MediaExpandedMap;
   tree: MediaItemTree;
-}): ExpandedMap => {
+}): MediaExpandedMap => {
   const newExpandedMap = { ...expandedMap };
   const inner = (item: MediaItem, expanded: boolean) => {
     if (!expandable) return {};
@@ -219,7 +204,7 @@ export const updateExpandedMap = ({
   return newExpandedMap;
 };
 
-export const deleteMediaItems = ({
+export const mediaDeleteMediaItems = ({
   selectedIds,
   media,
   tree,
@@ -244,7 +229,7 @@ export const deleteMediaItems = ({
   );
 };
 
-export const moveMediaInsideFolder = ({
+export const mediaMoveMediaInsideFolder = ({
   sourceItemIds,
   targetItemId,
   media,
@@ -262,7 +247,7 @@ export const moveMediaInsideFolder = ({
     .map((id) => tree.idToPathMap.get(id))
     .filter((path): path is string => Boolean(path));
 
-  return movePathsIntoTarget({
+  return mediaMovePathsIntoTarget({
     media,
     sourceItemPaths,
     targetItemPath,
@@ -270,7 +255,10 @@ export const moveMediaInsideFolder = ({
   });
 };
 
-export const getParentDirectories = (mediaMap: MediaMap, folderId: string) => {
+export const mediaGetParentDirectories = (
+  mediaMap: MediaMap,
+  folderId: string
+) => {
   const tree = createMediaItemTree(mediaMap);
 
   const indexPath = tree.findPath(
@@ -283,7 +271,7 @@ export const getParentDirectories = (mediaMap: MediaMap, folderId: string) => {
   return tree.accessPath(rootMediaItem, indexPath);
 };
 
-export const renameMediaItemAndDescendantPaths = ({
+export const mediaRenameMediaItemAndDescendantPaths = ({
   newName,
   selectedItemPath,
   media,

package/src/utils/handleFileDrop.ts

@@ -1,6 +1,13 @@
-import { Asset, MediaItem, MediaMap } from "@noya-app/noya-schemas";
+import {
+  createAssetResource,
+  createDirectoryResource,
+  Resource,
+  ResourceCreate,
+  ResourceCreateMap,
+  ResourceMap,
+} from "@noya-app/noya-schemas";
+import { Base64, uuid } from "@noya-app/noya-utils";
 import { path } from "imfs";
-import { createMediaAsset, createMediaFolder } from "./mediaItemTree";
 
 function isDirectoryEntry(
   entry: FileSystemEntry
@@ -13,16 +20,16 @@ function isFileEntry(entry: FileSystemEntry): entry is FileSystemFileEntry {
 }
 
 export async function handleDataTransfer({
+  accessibleByFileId,
   dataTransfer,
   rootItemPath,
-  media,
-  uploadAsset,
+  resourceMap,
 }: {
+  accessibleByFileId: string;
   dataTransfer: DataTransfer;
   rootItemPath: string;
-  media: MediaMap;
-  uploadAsset: (file: File) => Promise<Asset>;
-}): Promise<MediaMap | undefined> {
+  resourceMap: ResourceMap;
+}): Promise<ResourceCreateMap | undefined> {
   try {
     const dataTransferItems = Array.from(dataTransfer.items ?? []);
 
@@ -114,26 +121,42 @@ export async function handleDataTransfer({
       }
     }
 
-    const folderEntries: [string, MediaItem][] = Array.from(folderRelativePaths)
+    const folderEntries: [string, Resource][] = Array.from(folderRelativePaths)
       .map((rel) => path.join(rootItemPath, rel))
-      .filter((full) => !media[full])
-      .map((full) => [full, createMediaFolder() as MediaItem]);
+      .filter((full) => !resourceMap[full])
+      .map((full) => [
+        full,
+        createDirectoryResource({
+          id: uuid(),
+          path: full,
+          accessibleByFileId,
+          stableId: uuid(),
+        }) as Resource,
+      ]);
 
     const uploadResults = await Promise.all(
       dropped.map(
-        async ({ file, relativePath }): Promise<[string, MediaItem]> => {
-          const asset = await uploadAsset(file);
-
+        async ({ file, relativePath }): Promise<[string, ResourceCreate]> => {
           return [
             path.join(rootItemPath, relativePath),
-            createMediaAsset({ assetId: asset.id }) as MediaItem,
+            createAssetResource({
+              id: uuid(),
+              asset: {
+                content: Base64.encode(await file.arrayBuffer()),
+                contentType: file.type,
+                encoding: "base64",
+              },
+              path: path.join(rootItemPath, relativePath),
+              accessibleByFileId,
+              stableId: uuid(),
+            }) as Resource,
           ];
         }
       )
     );
 
     return {
-      ...media,
+      ...resourceMap,
       ...Object.fromEntries([...folderEntries, ...uploadResults]),
     };
   } catch (error) {

package/src/utils/resourceUtils.ts

@@ -0,0 +1,329 @@
+import {
+  createResourceTree,
+  Resource,
+  ResourceMap,
+  ResourceTree,
+  rootResource,
+} from "@noya-app/noya-schemas";
+import { path } from "imfs";
+import { ancestorPaths } from "tree-visit";
+
+export type FileKindFilter = "assets" | "directories" | "resources" | "all";
+export type ExpandedMap = Record<string, boolean | undefined>;
+
+export type GetVisibleItemsOptions = {
+  expandedMap: ExpandedMap;
+  fileKindFilter: FileKindFilter;
+  rootItemId: string;
+  tree: ResourceTree;
+  showAllDescendants: boolean;
+  showRootItem: boolean;
+};
+
+export const getVisibleItems = ({
+  expandedMap,
+  fileKindFilter,
+  rootItemId,
+  tree,
+  showAllDescendants,
+  showRootItem,
+}: GetVisibleItemsOptions) => {
+  const filteredItems: Resource[] = [];
+  const relativeRootItem =
+    tree.find(rootResource, (item) => item.id === rootItemId) ?? rootResource;
+
+  tree.visit(relativeRootItem, (item) => {
+    if (relativeRootItem.id === item.id) {
+      if (showRootItem) {
+        filteredItems.push(item);
+      }
+      return;
+    }
+    if (item.type === "file" && fileKindFilter === "all") {
+      filteredItems.push(item);
+    }
+    if (
+      item.type === "asset" &&
+      (fileKindFilter === "assets" || fileKindFilter === "all")
+    ) {
+      filteredItems.push(item);
+    }
+    if (
+      item.type === "directory" &&
+      (fileKindFilter === "directories" || fileKindFilter === "all")
+    ) {
+      filteredItems.push(item);
+    }
+    if (
+      item.type === "resource" &&
+      (fileKindFilter === "resources" || fileKindFilter === "all")
+    ) {
+      filteredItems.push(item);
+    }
+    if (!expandedMap[item.id] || !showAllDescendants) return "skip";
+  });
+  return filteredItems;
+};
+
+/**
+ * Validates if a basename follows typical file naming conventions
+ * Disallows:
+ * - Path separators (/ and \)
+ * - Characters typically invalid in filesystems (<, >, :, ", |, ?, *)
+ * - Empty names
+ */
+export const basenameValidator = (basename: string): boolean => {
+  // Check for empty string
+  if (!basename || basename.trim() === "") return false;
+
+  // Simple regex matching common invalid filesystem characters
+  const invalidCharsRegex = /[/\\<>:"|?*]/;
+  return !invalidCharsRegex.test(basename);
+};
+
+export const validateResourceRename = ({
+  basename,
+  selectedItemPath,
+  media,
+}: {
+  basename: string;
+  selectedItemPath: string;
+  media: ResourceMap;
+}): boolean => {
+  if (!basenameValidator(basename)) return false;
+  const newItemPath = path.join(path.dirname(selectedItemPath), basename);
+  // traverse the tree and check if there is already a path with the new name
+  const newPathExists = media[newItemPath];
+  if (newPathExists) return false;
+  return true;
+};
+
+export const movePathsIntoTarget = ({
+  media,
+  sourceItemPaths,
+  targetItemPath,
+  tree,
+}: {
+  media: ResourceMap;
+  sourceItemPaths: string[];
+  targetItemPath: string;
+  tree: ResourceTree;
+}) => {
+  const ancestors = ancestorPaths(
+    sourceItemPaths.map((path) => path.split("/"))
+  );
+  const mediaClone = { ...media };
+  for (const ancestor of ancestors) {
+    const ancestorPath = ancestor.join("/");
+    const ancestorItem = mediaClone[ancestorPath];
+    const newAncestorPath = path.join(
+      targetItemPath,
+      path.basename(ancestorPath)
+    );
+    if (!ancestorItem) continue;
+    const descendantPaths = tree
+      .flat(ancestorItem)
+      .map((item) => tree.idToPathMap.get(item.id));
+    for (const descendantPath of descendantPaths) {
+      if (!descendantPath) continue;
+      const newDescendantPath = descendantPath.replace(
+        ancestorPath,
+        newAncestorPath
+      );
+      const newPathIsValid = validateResourceRename({
+        basename: path.basename(descendantPath),
+        selectedItemPath: newDescendantPath,
+        media,
+      });
+      if (newPathIsValid) {
+        mediaClone[newDescendantPath] = mediaClone[descendantPath];
+        delete mediaClone[descendantPath];
+      }
+    }
+  }
+  return mediaClone;
+};
+
+export const moveUpAFolder = ({
+  tree,
+  media,
+  selectedIds,
+}: {
+  tree: ResourceTree;
+  media: ResourceMap;
+  selectedIds: string[];
+}) => {
+  const indexPath = tree.findPath(
+    rootResource,
+    (item) => item.id === selectedIds[0]
+  );
+  if (!indexPath) return;
+
+  // Get the grandparent folder (where items will be moved to)
+  const grandparentFolder = tree.access(
+    rootResource,
+    indexPath.slice(0, indexPath.length - 2)
+  );
+  const grandparentFolderPath = tree.idToPathMap.get(grandparentFolder.id);
+  if (!grandparentFolderPath) return;
+
+  const sourceItemPaths = selectedIds
+    .map((id) => tree.idToPathMap.get(id))
+    .filter((path): path is string => Boolean(path));
+  return movePathsIntoTarget({
+    media,
+    targetItemPath: grandparentFolderPath,
+    sourceItemPaths,
+    tree,
+  });
+};
+
+export const getDepthMap = (
+  item: Resource,
+  tree: ResourceTree,
+  showAllDescendants: boolean
+): Record<string, number> => {
+  const depthMap: Record<string, number> = {};
+  tree.visit(item, (item, indexPath) => {
+    if (showAllDescendants) {
+      depthMap[item.id] = Math.max(indexPath.length - 1, 0);
+    } else {
+      depthMap[item.id] = 0;
+    }
+  });
+  return depthMap;
+};
+
+export const updateExpandedMap = ({
+  item,
+  expanded,
+  expandable,
+  expandedMap,
+  tree,
+}: {
+  item: Resource;
+  expanded: boolean;
+  expandable: boolean;
+  expandedMap: ExpandedMap;
+  tree: ResourceTree;
+}): ExpandedMap => {
+  const newExpandedMap = { ...expandedMap };
+  const inner = (item: Resource, expanded: boolean) => {
+    if (!expandable) return {};
+    // Don't allow toggling the fake root
+    if (item.id === rootResource.id) return {};
+    if (!expanded) {
+      // recursively collapse all children
+      const children = tree.getChildren(item, []);
+      children.forEach((child) => inner(child, false));
+    }
+    newExpandedMap[item.id] = expanded;
+  };
+  inner(item, expanded);
+  return newExpandedMap;
+};
+
+export const deleteResources = ({
+  selectedIds,
+  media,
+  tree,
+}: {
+  selectedIds: string[];
+  media: ResourceMap;
+  tree: ResourceTree;
+}): ResourceMap => {
+  const itemsToDelete = selectedIds.flatMap((mediaItemId) => {
+    const mediaItem = tree.resourcesWithRoot.find(
+      (item) => item.id === mediaItemId
+    );
+    if (!mediaItem) return [];
+    return tree.flat(mediaItem);
+  });
+  const itemKeysToDelete = new Set(
+    itemsToDelete.map((item) => tree.idToPathMap.get(item.id))
+  );
+
+  return Object.fromEntries(
+    Object.entries(media).filter(([key]) => !itemKeysToDelete.has(key))
+  );
+};
+
+export const moveMediaInsideFolder = ({
+  sourceItemIds,
+  targetItemId,
+  media,
+  tree,
+}: {
+  sourceItemIds: string[];
+  targetItemId: string;
+  media: ResourceMap;
+  tree: ResourceTree;
+}) => {
+  const targetItemPath = tree.idToPathMap.get(targetItemId);
+  if (!targetItemPath) return media;
+
+  const sourceItemPaths = sourceItemIds
+    .map((id) => tree.idToPathMap.get(id))
+    .filter((path): path is string => Boolean(path));
+
+  return movePathsIntoTarget({
+    media,
+    sourceItemPaths,
+    targetItemPath,
+    tree,
+  });
+};
+
+export const getParentDirectories = (
+  resourceMap: ResourceMap,
+  folderId: string
+) => {
+  const tree = createResourceTree(resourceMap);
+
+  const indexPath = tree.findPath(rootResource, (item) => item.id === folderId);
+
+  if (!indexPath) return [rootResource];
+
+  return tree.accessPath(rootResource, indexPath);
+};
+
+export const renameResourceAndDescendantPaths = ({
+  newName,
+  selectedItemPath,
+  media,
+  tree,
+}: {
+  newName: string;
+  selectedItemPath: string;
+  media: ResourceMap;
+  tree: ResourceTree;
+}) => {
+  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],
+      path: newDescendantPath,
+    };
+    delete mediaClone[descendantPath];
+  }
+
+  return mediaClone;
+};