@noya-app/noya-file-explorer 0.0.2

package/src/utils/files.ts

@@ -0,0 +1,274 @@
+import { MediaItem, MediaMap } from "@noya-app/noya-schemas";
+import { path } from "imfs";
+import { ancestorPaths } from "tree-visit";
+import {
+  createMediaItemTree,
+  MediaItemTree,
+  rootMediaItem,
+} from "./mediaItemTree";
+
+export type FileKindFilter = "assets" | "directories" | "all";
+export type ExpandedMap = Record<string, boolean | undefined>;
+
+export type GetVisibleItemsOptions = {
+  expandedMap: ExpandedMap;
+  fileKindFilter: FileKindFilter;
+  rootItemId: string;
+  tree: MediaItemTree;
+  showAllDescendants: boolean;
+  showRootItem: boolean;
+};
+
+export const getVisibleItems = ({
+  expandedMap,
+  fileKindFilter,
+  rootItemId,
+  tree,
+  showAllDescendants,
+  showRootItem,
+}: GetVisibleItemsOptions) => {
+  const filteredItems: MediaItem[] = [];
+  const relativeRootItem =
+    tree.find(rootMediaItem, (item) => item.id === rootItemId) ?? rootMediaItem;
+
+  tree.visit(relativeRootItem, (item) => {
+    if (relativeRootItem.id === item.id) {
+      if (showRootItem) {
+        filteredItems.push(item);
+      }
+      return;
+    }
+    if (item.kind === "file" && fileKindFilter === "all") {
+      filteredItems.push(item);
+    }
+    if (
+      item.kind === "asset" &&
+      (fileKindFilter === "assets" || fileKindFilter === "all")
+    ) {
+      filteredItems.push(item);
+    }
+    if (
+      item.kind === "folder" &&
+      (fileKindFilter === "directories" || 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 validateMediaItemRename = ({
+  basename,
+  selectedItemPath,
+  media,
+}: {
+  basename: string;
+  selectedItemPath: string;
+  media: MediaMap;
+}): 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: MediaMap;
+  sourceItemPaths: string[];
+  targetItemPath: string;
+  tree: MediaItemTree;
+}) => {
+  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 = validateMediaItemRename({
+        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: MediaItemTree;
+  media: MediaMap;
+  selectedIds: string[];
+}) => {
+  const indexPath = tree.findIndexPath(
+    rootMediaItem,
+    (item) => item.id === selectedIds[0]
+  );
+  if (!indexPath) return;
+
+  // Get the grandparent folder (where items will be moved to)
+  const grandparentFolder = tree.access(
+    rootMediaItem,
+    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: MediaItem,
+  tree: MediaItemTree,
+  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: MediaItem;
+  expanded: boolean;
+  expandable: boolean;
+  expandedMap: ExpandedMap;
+  tree: MediaItemTree;
+}): ExpandedMap => {
+  const newExpandedMap = { ...expandedMap };
+  const inner = (item: MediaItem, expanded: boolean) => {
+    if (!expandable) return {};
+    // Don't allow toggling the fake root
+    if (item.id === rootMediaItem.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 deleteMediaItems = ({
+  selectedIds,
+  media,
+  tree,
+}: {
+  selectedIds: string[];
+  media: MediaMap;
+  tree: MediaItemTree;
+}): MediaMap => {
+  const itemsToDelete = selectedIds.flatMap((mediaItemId) => {
+    const mediaItem = tree.mediaItemsWithRoot.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: MediaMap;
+  tree: MediaItemTree;
+}) => {
+  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 = (mediaMap: MediaMap, folderId: string) => {
+  const tree = createMediaItemTree(mediaMap);
+
+  const indexPath = tree.findIndexPath(
+    rootMediaItem,
+    (item) => item.id === folderId
+  );
+
+  if (!indexPath) return [rootMediaItem];
+
+  return tree.accessPath(rootMediaItem, indexPath);
+};

package/src/utils/mediaItemTree.ts

@@ -0,0 +1,110 @@
+import {
+  AssetMediaItem,
+  FileMediaItem,
+  FolderMediaItem,
+  MediaItem,
+  MediaMap,
+} from "@noya-app/noya-schemas";
+import { uuid } from "@noya-app/noya-utils";
+import { path } from "imfs";
+import { defineTree } from "tree-visit";
+
+export const createMediaFolder = (
+  folder?: Omit<FolderMediaItem, "kind" | "id">
+): FolderMediaItem => {
+  return {
+    id: uuid(),
+    kind: "folder",
+    ...folder,
+  };
+};
+
+export const createMediaAsset = (
+  asset: Omit<AssetMediaItem, "kind" | "id">
+): AssetMediaItem => {
+  return {
+    id: uuid(),
+    kind: "asset",
+    ...asset,
+  };
+};
+
+export const createMediaFile = (
+  file: Omit<FileMediaItem, "kind" | "id">
+): FileMediaItem => {
+  return {
+    id: uuid(),
+    kind: "file",
+    ...file,
+  };
+};
+
+export const createMediaItem = (item: MediaItem) => {
+  return {
+    ...item,
+  };
+};
+
+export const rootMediaItem: MediaItem = {
+  id: "root",
+  kind: "folder",
+};
+
+export const rootMediaItemPath = ".";
+export const rootMediaItemName = "All Files";
+export const PLACEHOLDER_ITEM_NAME = "placeholder";
+
+export const createMediaItemTree = (mediaMap: MediaMap) => {
+  const sortedMediaMap = Object.fromEntries(
+    Object.entries(mediaMap).sort((a, b) => a[0].localeCompare(b[0]))
+  );
+  const parentToChildrenMap = new Map<string, MediaItem[]>();
+  const idToPathMap = new Map<string, string>();
+  idToPathMap.set(rootMediaItem.id, rootMediaItemPath);
+
+  for (const [itemPath, item] of Object.entries(sortedMediaMap)) {
+    const parentPath = path.dirname(itemPath);
+    const children = parentToChildrenMap.get(parentPath) ?? [];
+    children.push(item);
+    parentToChildrenMap.set(parentPath, children);
+    idToPathMap.set(item.id, itemPath);
+  }
+
+  const tree = defineTree<MediaItem>({
+    getChildren: (item) => {
+      const itemPath =
+        item === rootMediaItem ? rootMediaItemPath : idToPathMap.get(item.id);
+      if (!itemPath) return [];
+      return parentToChildrenMap.get(itemPath) ?? [];
+    },
+    onDetectCycle: "skip",
+    getIdentifier: (item) => item.id,
+  });
+
+  const result = tree.withOptions({
+    getLabel: (item) => idToPathMap.get(item.id) ?? "",
+  });
+
+  const mediaItemsWithRoot = [...Object.values(sortedMediaMap), rootMediaItem];
+  const getNameForId = (id: string) =>
+    id === rootMediaItem.id
+      ? rootMediaItemName
+      : path.basename(idToPathMap.get(id) ?? "");
+  const getParentIdForId = (id: string) => {
+    const itemPath = idToPathMap.get(id);
+    if (!itemPath) return;
+    const parentPath = path.dirname(itemPath);
+    return idToPathMap.get(parentPath);
+  };
+
+  return {
+    ...result,
+    idToPathMap,
+    parentToChildrenMap,
+    mediaItemsWithRoot,
+    getParentIdForId,
+    getNameForId,
+  };
+};
+
+export type MediaItemTree = ReturnType<typeof createMediaItemTree>;

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@repo/typescript-config/library.json"
+}

package/tsup.config.ts

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