@pstdio/ui 0.0.2 → 0.0.4

package/src/components/column-file-browser.tsx

@@ -1,380 +0,0 @@
-import { Box, Button, HStack, Menu, Portal, Stack, Text } from "@chakra-ui/react";
-import { ChevronRight, FileText, Folder } from "lucide-react";
-import { type DragEvent, useEffect, useState } from "react";
-
-import { EmptyState } from "./empty-state";
-import { MenuItem } from "./menu-item";
-
-export interface ColumnFileItem {
-  id: string;
-  name: string;
-  type: "file" | "folder";
-  meta?: string;
-  children?: ColumnFileItem[];
-}
-
-interface ColumnData<T extends ColumnFileItem> {
-  items: T[];
-  selectedFolderId?: string;
-  breadcrumb: T[];
-}
-
-interface ColumnFileBrowserProps<T extends ColumnFileItem> {
-  items: T[];
-  activePath?: T[];
-  onFolderOpen?: (folder: T, path: T[]) => void;
-  onFileOpen?: (file: T, path: T[]) => void;
-  onDeleteItem?: (item: T, path: T[]) => void;
-  onDownloadFile?: (file: T, path: T[]) => void;
-  onDropFiles?: (files: File[], folder: T | null, path: T[]) => void;
-  emptyLabel?: string;
-  canDeleteItem?: (item: T, path: T[]) => boolean;
-  onUploadClick?: () => void;
-}
-
-const buildColumns = <T extends ColumnFileItem>(items: T[], selectedPath: string[]): ColumnData<T>[] => {
-  const columns: ColumnData<T>[] = [];
-
-  let currentItems = items;
-  let breadcrumb: T[] = [];
-
-  columns.push({
-    items: currentItems,
-    selectedFolderId: selectedPath[0],
-    breadcrumb,
-  });
-
-  for (let index = 0; index < selectedPath.length; index++) {
-    const folderId = selectedPath[index];
-    const folder = currentItems.find((item) => item.id === folderId && item.type === "folder");
-
-    if (!folder) break;
-
-    breadcrumb = [...breadcrumb, folder];
-    currentItems = (folder.children as T[] | undefined) ?? [];
-
-    columns.push({
-      items: currentItems,
-      selectedFolderId: selectedPath[index + 1],
-      breadcrumb,
-    });
-  }
-
-  return columns;
-};
-
-const findFirstFilePath = <T extends ColumnFileItem>(items: T[]) => {
-  const stack: Array<{ item: T; path: T[] }> = [];
-
-  for (let index = items.length - 1; index >= 0; index -= 1) {
-    stack.push({ item: items[index] as T, path: [] });
-  }
-
-  while (stack.length > 0) {
-    const current = stack.pop();
-
-    if (!current) break;
-
-    const { item, path } = current;
-
-    if (item.type === "file") {
-      if (path.length === 0) continue;
-
-      return { path, file: item };
-    }
-
-    const children = item.children as T[] | undefined;
-
-    if (!children || children.length === 0) continue;
-
-    const nextPath = [...path, item];
-
-    for (let index = children.length - 1; index >= 0; index -= 1) {
-      stack.push({ item: children[index] as T, path: nextPath });
-    }
-  }
-
-  return null;
-};
-
-const buildFolderPathIds = <T extends ColumnFileItem>(path: T[]) => {
-  return path.filter((item) => item.type === "folder").map((item) => item.id);
-};
-
-const resolveActiveFileId = <T extends ColumnFileItem>(path: T[]) => {
-  const lastItem = path[path.length - 1] ?? null;
-
-  if (lastItem?.type !== "file") {
-    return null;
-  }
-
-  return lastItem.id;
-};
-
-const isSamePath = (nextPath: string[], currentPath: string[]) => {
-  if (nextPath.length !== currentPath.length) return false;
-
-  return nextPath.every((value, index) => value === currentPath[index]);
-};
-
-interface ColumnItemRowProps<T extends ColumnFileItem> {
-  item: T;
-  columnIndex: number;
-  breadcrumb: T[];
-  selectedFolderId?: string;
-  activeFileId: string | null;
-  allowContextMenu: boolean;
-  canDeleteItem?: (item: T, path: T[]) => boolean;
-  onFolderOpen?: (folder: T, path: T[]) => void;
-  onFileOpen?: (file: T, path: T[]) => void;
-  onDeleteItem?: (item: T, path: T[]) => void;
-  onDownloadFile?: (file: T, path: T[]) => void;
-  onDragOver: (event: DragEvent) => void;
-  onDropToFolder: (event: DragEvent, folder: T | null, path: T[]) => void;
-  onUpdateSelectedPath: (nextPath: string[]) => void;
-  onUpdateActiveFileId: (nextActiveFileId: string | null) => void;
-}
-
-const ColumnItemRow = <T extends ColumnFileItem>(props: ColumnItemRowProps<T>) => {
-  const {
-    item,
-    columnIndex,
-    breadcrumb,
-    selectedFolderId,
-    activeFileId,
-    allowContextMenu,
-    canDeleteItem,
-    onFolderOpen,
-    onFileOpen,
-    onDeleteItem,
-    onDownloadFile,
-    onDragOver,
-    onDropToFolder,
-    onUpdateSelectedPath,
-    onUpdateActiveFileId,
-  } = props;
-
-  const isFolder = item.type === "folder";
-  const itemPath = [...breadcrumb, item];
-  const canDownloadFile = Boolean(onDownloadFile) && !isFolder;
-  const allowDelete = Boolean(onDeleteItem) && (canDeleteItem ? canDeleteItem(item, itemPath) : true);
-  const hasContextActions = allowContextMenu && (canDownloadFile || allowDelete);
-  const isSelectedFolder = selectedFolderId === item.id;
-  const isActiveFile = !isFolder && activeFileId === item.id;
-
-  const handleItemClick = () => {
-    const basePathIds = breadcrumb.slice(0, columnIndex).map((entry) => entry.id);
-
-    if (isFolder) {
-      const nextPath = [...basePathIds, item.id];
-      onUpdateSelectedPath(nextPath);
-      onUpdateActiveFileId(null);
-      onFolderOpen?.(item, itemPath);
-      return;
-    }
-
-    onUpdateSelectedPath(basePathIds);
-    onUpdateActiveFileId(item.id);
-    onFileOpen?.(item, itemPath);
-  };
-
-  const handleDeleteClick = () => {
-    if (!allowDelete) return;
-    onDeleteItem?.(item, itemPath);
-  };
-
-  const handleDownloadClick = () => {
-    if (!canDownloadFile) return;
-    onDownloadFile?.(item, itemPath);
-  };
-
-  const content = (
-    <MenuItem
-      id={item.id}
-      primaryLabel={item.name}
-      secondaryLabel={item.meta}
-      leftIcon={isFolder ? Folder : FileText}
-      rightIcon={isFolder ? ChevronRight : null}
-      isSelected={isSelectedFolder || isActiveFile}
-      onClick={handleItemClick}
-    />
-  );
-
-  const itemSurface = (
-    <Box
-      width="100%"
-      onDragOver={isFolder ? onDragOver : undefined}
-      onDrop={(event) => onDropToFolder(event, item, itemPath)}
-    >
-      {content}
-    </Box>
-  );
-
-  if (!hasContextActions) {
-    return <Menu.Root>{itemSurface}</Menu.Root>;
-  }
-
-  return (
-    <Menu.Root>
-      <Menu.ContextTrigger asChild>{itemSurface}</Menu.ContextTrigger>
-      <Portal>
-        <Menu.Positioner>
-          <Menu.Content minW="180px" bg="bg" zIndex="popover">
-            {canDownloadFile ? (
-              <Menu.Item value="download" onClick={handleDownloadClick}>
-                Download
-              </Menu.Item>
-            ) : null}
-            {allowDelete ? (
-              <Menu.Item value="delete" color="fg.error" onClick={handleDeleteClick}>
-                Delete
-              </Menu.Item>
-            ) : null}
-          </Menu.Content>
-        </Menu.Positioner>
-      </Portal>
-    </Menu.Root>
-  );
-};
-
-export const ColumnFileBrowser = <T extends ColumnFileItem>(props: ColumnFileBrowserProps<T>) => {
-  const {
-    items,
-    activePath,
-    emptyLabel = "This folder is empty.",
-    onFolderOpen,
-    onFileOpen,
-    onDeleteItem,
-    onDownloadFile,
-    onDropFiles,
-    canDeleteItem,
-    onUploadClick,
-  } = props;
-
-  const [selectedPath, setSelectedPath] = useState<string[]>([]);
-  const [activeFileId, setActiveFileId] = useState<string | null>(null);
-
-  const columns = buildColumns<T>(items, selectedPath);
-  const firstFolder = items.find((item) => item.type === "folder") ?? null;
-  const hasExternalPath = Boolean(activePath && activePath.length > 0);
-
-  const handleDragOver = (event: DragEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-  };
-
-  const handleDrop = (event: DragEvent, folder: T | null, path: T[]) => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    const files = Array.from(event.dataTransfer?.files ?? []);
-
-    if (files.length === 0) return;
-
-    onDropFiles?.(files, folder, path);
-  };
-
-  useEffect(() => {
-    if (!activePath) return;
-
-    const nextSelectedPath = buildFolderPathIds(activePath);
-    const nextActiveFileId = resolveActiveFileId(activePath);
-    const hasMatchingPath = isSamePath(nextSelectedPath, selectedPath);
-
-    if (hasMatchingPath && nextActiveFileId === activeFileId) return;
-
-    setSelectedPath(nextSelectedPath);
-    setActiveFileId(nextActiveFileId);
-  }, [activeFileId, activePath, selectedPath]);
-
-  useEffect(() => {
-    if (hasExternalPath) return;
-    if (selectedPath.length > 0) return;
-    if (activeFileId) return;
-
-    const defaultFilePath = findFirstFilePath(items);
-
-    if (defaultFilePath) {
-      const folderPathIds = defaultFilePath.path.map((folder) => folder.id);
-      const deepestFolder = defaultFilePath.path[defaultFilePath.path.length - 1] ?? null;
-
-      if (folderPathIds.length > 0 && deepestFolder) {
-        setSelectedPath(folderPathIds);
-        onFolderOpen?.(deepestFolder, defaultFilePath.path);
-      }
-
-      return;
-    }
-
-    if (!firstFolder) return;
-
-    setSelectedPath([firstFolder.id]);
-    onFolderOpen?.(firstFolder, [firstFolder]);
-  }, [activeFileId, firstFolder, hasExternalPath, items, onFolderOpen, selectedPath]);
-
-  return (
-    <Stack height="100%" direction="row" gap="0">
-      {columns.map((column, columnIndex) => {
-        const allowContextMenu = column.breadcrumb.length > 0 && (Boolean(onDeleteItem) || Boolean(onDownloadFile));
-        const parentFolder = column.breadcrumb[column.breadcrumb.length - 1] ?? null;
-
-        return (
-          <Stack
-            gap="xs"
-            p="xs"
-            height="100%"
-            key={column.breadcrumb.map((item) => item.id).join("/") || "root"}
-            minW="240px"
-            maxW="320px"
-            borderRightWidth="1px"
-          >
-            <HStack justify="flex-end" gap="0">
-              <Text textStyle="paragraph/S/regular" color="fg.muted">
-                {column.items.length} item{column.items.length === 1 ? "" : "s"}
-              </Text>
-            </HStack>
-
-            <Stack
-              gap="xs"
-              onDragOver={handleDragOver}
-              onDrop={(event) => handleDrop(event, parentFolder, column.breadcrumb)}
-            >
-              {column.items.map((item) => (
-                <ColumnItemRow
-                  key={item.id}
-                  item={item}
-                  columnIndex={columnIndex}
-                  breadcrumb={column.breadcrumb}
-                  selectedFolderId={column.selectedFolderId}
-                  activeFileId={activeFileId}
-                  allowContextMenu={allowContextMenu}
-                  canDeleteItem={canDeleteItem}
-                  onFolderOpen={onFolderOpen}
-                  onFileOpen={onFileOpen}
-                  onDeleteItem={onDeleteItem}
-                  onDownloadFile={onDownloadFile}
-                  onDragOver={handleDragOver}
-                  onDropToFolder={handleDrop}
-                  onUpdateSelectedPath={setSelectedPath}
-                  onUpdateActiveFileId={setActiveFileId}
-                />
-              ))}
-
-              {column.items.length === 0 ? (
-                <Box borderWidth="1px" borderColor="border.muted" p="md" height="100%">
-                  <EmptyState title={emptyLabel} size="sm" textAlign="left" alignItems="flex-start" height="100%">
-                    {onUploadClick ? (
-                      <Button size="sm" variant="outline" onClick={onUploadClick}>
-                        Upload files
-                      </Button>
-                    ) : null}
-                  </EmptyState>
-                </Box>
-              ) : null}
-            </Stack>
-          </Stack>
-        );
-      })}
-    </Stack>
-  );
-};

package/src/components/content-placeholder.tsx

@@ -1,21 +0,0 @@
-import { Box, type BoxProps, Text, type TextProps } from "@chakra-ui/react";
-
-export interface ContentPlaceholderProps extends BoxProps {}
-
-export const ContentPlaceholder = (props: ContentPlaceholderProps) => (
-  <Box
-    {...props}
-    css={{
-      backgroundClip: "padding-box",
-      backgroundImage: `url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.2' fillRule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E")`,
-      display: "flex",
-      width: "100%",
-    }}
-  />
-);
-
-export const Label = (props: TextProps) => (
-  <Box p="2">
-    <Text color="fg.muted" fontWeight="medium" textStyle="sm" whiteSpace="nowrap" {...props} />
-  </Box>
-);

package/src/components/data-table/build-columns.tsx

@@ -1,78 +0,0 @@
-import { chakra, Text } from "@chakra-ui/react";
-import { isValidElement, type ReactNode } from "react";
-
-import { columnHelper, formatDisplayValue, getIcon, isDisplayValue } from "./helpers";
-import type { RowData } from "./types";
-
-const getSortValue = (value: unknown) => {
-  return isDisplayValue(value) ? value.sortValue : value;
-};
-
-const compareValues = (valueA: unknown, valueB: unknown) => {
-  if (valueA === valueB) return 0;
-  if (valueA === null || valueA === undefined) return 1;
-  if (valueB === null || valueB === undefined) return -1;
-
-  if (typeof valueA === "number" && typeof valueB === "number") {
-    return valueA - valueB;
-  }
-
-  return String(valueA).localeCompare(String(valueB));
-};
-
-export function buildColumns(data: RowData[], columnKeys: string[], columnIcons?: Partial<Record<string, ReactNode>>) {
-  const rowIndexColumn = columnHelper.accessor((_row, rowIndex) => rowIndex + 1, {
-    header: "",
-    id: "rowIndex",
-    enableResizing: false,
-    size: 20,
-    cell: (info) => (
-      <chakra.span display={"block"} textStyle={"paragraph/S/regular"} textAlign={"center"}>
-        {info.getValue()}
-      </chakra.span>
-    ),
-  });
-
-  const dataColumns = columnKeys.map((key) => {
-    const fallBackKey = key || "-";
-    const columnValues = data.map((row) => row[fallBackKey]);
-    const customIcon = columnIcons?.[fallBackKey];
-    const headerIcon = customIcon === undefined ? getIcon(columnValues) : customIcon;
-
-    return columnHelper.accessor((row) => row[fallBackKey], {
-      id: fallBackKey,
-      header: () => {
-        if (!headerIcon) return fallBackKey;
-        return (
-          <chakra.span display="inline-flex" alignItems="center" gap="4px">
-            {headerIcon}
-            <chakra.span>{fallBackKey}</chakra.span>
-          </chakra.span>
-        );
-      },
-      cell: (info) => {
-        const value = info.getValue();
-        const displayValue = formatDisplayValue(value);
-        if (isValidElement(displayValue)) {
-          return (
-            <chakra.span display="inline-flex" maxWidth="full">
-              {displayValue}
-            </chakra.span>
-          );
-        }
-        return (
-          <Text width="fit-content" textStyle="paragraph/S/regular">
-            {displayValue}
-          </Text>
-        );
-      },
-      sortingFn: (rowA, rowB) => {
-        const valueA = getSortValue(rowA.original[fallBackKey]);
-        const valueB = getSortValue(rowB.original[fallBackKey]);
-        return compareValues(valueA, valueB);
-      },
-    });
-  });
-
-  return [rowIndexColumn, ...dataColumns];
-}

package/src/components/data-table/data-table.css

@@ -1,51 +0,0 @@
-.data-table {
-  table-layout: fixed;
-}
-
-.data-table.full-width {
-  width: 100%;
-  table-layout: auto;
-}
-
-.data-table tr {
-  width: fit-content;
-}
-
-.data-table.full-width tr {
-  width: 100%;
-}
-
-.data-table .resizer {
-  position: absolute;
-  top: 0;
-  height: 100%;
-  right: 0;
-  width: 5px;
-  background-color: var(--chakra-colors-border-primary);
-  opacity: 0.5;
-  cursor: col-resize;
-  user-select: none;
-  touch-action: none;
-}
-
-.data-table .resizer.isResizing {
-  opacity: 1;
-}
-
-@media (hover: hover) {
-  .data-table .resizer {
-    opacity: 0;
-  }
-
-  .data-table *:hover > .resizer {
-    opacity: 1;
-  }
-}
-
-.data-table .resizer.ltr {
-  right: 0;
-}
-
-.data-table .resizer.rtl {
-  left: 0;
-}