@sqlrooms/s3-browser 0.0.0

package/eslint.config.js

@@ -0,0 +1,4 @@
+import {config} from '@sqlrooms/eslint-config/react-internal';
+
+/** @type {import("eslint").Linter.Config} */
+export default config;

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@sqlrooms/s3-browser",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "types": "src/index.ts",
+  "module": "dist/index.js",
+  "type": "module",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@aws-sdk/client-s3": "^3.726.1",
+    "@sqlrooms/ui": "0.0.0",
+    "@sqlrooms/utils": "0.0.0",
+    "lucide-react": "^0.473.0",
+    "zod": "^3.24.1"
+  },
+  "peerDependencies": {
+    "react": "*"
+  },
+  "scripts": {
+    "dev": "tsc -w",
+    "build": "tsc",
+    "lint": "eslint ."
+  },
+  "gitHead": "4b0c709542475e4f95db0b2a8405ecadcf2ec186"
+}

package/src/S3FileBrowser.tsx

@@ -0,0 +1,220 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+  Button,
+  Checkbox,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  cn,
+} from '@sqlrooms/ui';
+import {Undo2Icon, FolderIcon} from 'lucide-react';
+import {formatBytes, formatTimeRelative} from '@sqlrooms/utils';
+import {FC, useCallback, useEffect, useMemo} from 'react';
+import {S3FileOrDirectory} from './S3FileOrDirectory';
+
+type Props = {
+  files?: S3FileOrDirectory[];
+  selectedFiles: string[];
+  selectedDirectory: string;
+  onCanConfirmChange: (canConfirm: boolean) => void;
+  onChangeSelectedDirectory: (directory: string) => void;
+  onChangeSelectedFiles: (files: string[]) => void;
+};
+
+const S3FileBrowser: FC<Props> = (props) => {
+  const {
+    files,
+    selectedDirectory,
+    selectedFiles,
+    onCanConfirmChange,
+    onChangeSelectedFiles,
+    onChangeSelectedDirectory,
+  } = props;
+
+  useEffect(() => {
+    onCanConfirmChange(Boolean(selectedFiles?.length));
+  }, [selectedFiles, onCanConfirmChange]);
+
+  const handleSelectFile = useCallback(
+    (key: string) => {
+      if (selectedFiles.includes(key)) {
+        onChangeSelectedFiles(selectedFiles.filter((id) => id !== key));
+      } else {
+        onChangeSelectedFiles([...selectedFiles, key]);
+      }
+    },
+    [onChangeSelectedFiles, selectedFiles],
+  );
+
+  const handleSelectDirectory = useCallback(
+    (key: string) => {
+      onChangeSelectedDirectory(`${selectedDirectory}${key}/`);
+    },
+    [selectedDirectory, onChangeSelectedDirectory],
+  );
+
+  const filesInDirectory = useMemo(
+    () => files?.filter(({isDirectory}) => !isDirectory) ?? [],
+    [files],
+  );
+
+  const handleSelectAll = useCallback(() => {
+    if (selectedFiles.length === filesInDirectory.length) {
+      onChangeSelectedFiles([]);
+    } else {
+      onChangeSelectedFiles(filesInDirectory.map(({key}) => key) ?? []);
+    }
+  }, [filesInDirectory, onChangeSelectedFiles, selectedFiles.length]);
+
+  const parentDirectory = useMemo(() => {
+    const dir = selectedDirectory.split('/').slice(0, -2).join('/');
+    return dir ? `${dir}/` : '';
+  }, [selectedDirectory]);
+
+  return (
+    <div className="relative w-full h-full overflow-hidden">
+      <div className="absolute w-full h-full overflow-x-auto overflow-y-auto flex flex-col py-0 items-start">
+        <div className="w-full rounded-lg border border-gray-600 overflow-y-auto">
+          <Table disableWrapper>
+            <TableHeader>
+              {selectedDirectory ? (
+                <TableRow>
+                  <TableCell
+                    colSpan={5}
+                    className="py-3 text-gray-100 bg-gray-800"
+                  >
+                    <div className="flex gap-2 items-center">
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() =>
+                          onChangeSelectedDirectory(parentDirectory)
+                        }
+                      >
+                        <Undo2Icon className="w-3 h-3 mr-1" />
+                        ..
+                      </Button>
+                      <Breadcrumb>
+                        <BreadcrumbList>
+                          <BreadcrumbItem>
+                            <BreadcrumbLink
+                              onClick={() => onChangeSelectedDirectory('')}
+                              className="text-xs text-blue-400"
+                            >
+                              Home
+                            </BreadcrumbLink>
+                          </BreadcrumbItem>
+
+                          {selectedDirectory.split('/').map((directory, i) => {
+                            if (!directory) return null;
+                            const path = selectedDirectory
+                              .split('/')
+                              .slice(0, i + 1)
+                              .join('/')
+                              .concat('/');
+                            const isCurrent = path === selectedDirectory;
+                            return (
+                              <BreadcrumbItem key={i}>
+                                <BreadcrumbSeparator />
+                                <BreadcrumbLink
+                                  className={cn(
+                                    'text-xs text-blue-400',
+                                    isCurrent &&
+                                      'cursor-default hover:no-underline',
+                                  )}
+                                  onClick={() => {
+                                    if (!isCurrent) {
+                                      onChangeSelectedDirectory(path);
+                                    }
+                                  }}
+                                >
+                                  {directory}
+                                </BreadcrumbLink>
+                              </BreadcrumbItem>
+                            );
+                          })}
+                        </BreadcrumbList>
+                      </Breadcrumb>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ) : null}
+              <TableRow className="sticky top-0 z-[2] bg-gray-600">
+                <TableHead className="w-[1%]">
+                  <Checkbox
+                    checked={selectedFiles.length === filesInDirectory.length}
+                    onCheckedChange={handleSelectAll}
+                  />
+                </TableHead>
+                <TableHead className="py-2 text-white">Name</TableHead>
+                <TableHead className="py-2 text-white">Type</TableHead>
+                <TableHead className="text-white text-right">Size</TableHead>
+                <TableHead className="text-white text-right">
+                  Modified
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {files?.map((object) => {
+                const {key, isDirectory} = object;
+                return (
+                  <TableRow
+                    key={key}
+                    className="cursor-pointer text-blue-300 hover:bg-blue-700 hover:text-white"
+                    onClick={(evt) => {
+                      if (isDirectory) {
+                        handleSelectDirectory(key);
+                      } else {
+                        handleSelectFile(key);
+                        evt.preventDefault(); // prevent double change when clicking checkbox
+                      }
+                    }}
+                  >
+                    <TableCell>
+                      <Checkbox
+                        disabled={isDirectory}
+                        checked={selectedFiles.includes(key)}
+                      />
+                    </TableCell>
+                    <TableCell className="text-xs">
+                      {isDirectory ? (
+                        <div className="flex items-center gap-2">
+                          <FolderIcon className="w-4 h-4" />
+                          <span>{`${key}/`}</span>
+                        </div>
+                      ) : (
+                        key
+                      )}
+                    </TableCell>
+                    <TableCell className="text-xs">
+                      {isDirectory ? 'Directory' : object.contentType}
+                    </TableCell>
+                    <TableCell className="text-xs text-right">
+                      {!isDirectory && object.size !== undefined
+                        ? formatBytes(object.size)
+                        : ''}
+                    </TableCell>
+                    <TableCell className="text-xs text-right">
+                      {!isDirectory && object.lastModified
+                        ? formatTimeRelative(object.lastModified)
+                        : ''}
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default S3FileBrowser;

package/src/S3FileOrDirectory.ts

@@ -0,0 +1,16 @@
+import {z} from 'zod';
+
+export const S3FileOrDirectory = z.union([
+  z.object({
+    key: z.string(),
+    isDirectory: z.literal(true),
+  }),
+  z.object({
+    key: z.string(),
+    isDirectory: z.literal(false),
+    lastModified: z.date().optional(),
+    size: z.number().optional(),
+    contentType: z.string().optional(),
+  }),
+]);
+export type S3FileOrDirectory = z.infer<typeof S3FileOrDirectory>;

package/src/index.ts

@@ -0,0 +1,3 @@
+export {default as S3FileBrowser} from './S3FileBrowser';
+export * from './s3';
+export * from './S3FileOrDirectory';

package/src/s3.ts

@@ -0,0 +1,103 @@
+import {
+  DeleteObjectCommand,
+  HeadObjectCommand,
+  ListObjectsCommand,
+  ListObjectsV2Command,
+  S3Client,
+} from '@aws-sdk/client-s3';
+import {S3FileOrDirectory} from './S3FileOrDirectory';
+
+export async function listFilesAndDirectoriesWithPrefix(
+  S3: S3Client,
+  bucket: string,
+  prefix?: string,
+): Promise<S3FileOrDirectory[]> {
+  const command = new ListObjectsV2Command({
+    Bucket: bucket,
+    Prefix: prefix ? `${prefix}${prefix.endsWith('/') ? '' : '/'}` : '',
+    Delimiter: '/',
+  });
+
+  const response = await S3.send(command);
+
+  const objects: S3FileOrDirectory[] = [];
+
+  const removePrefix = (key: string) => {
+    if (!prefix) {
+      return key;
+    }
+    return key.replace(prefix ?? '', '');
+  };
+
+  if (response.CommonPrefixes) {
+    for (const commonPrefix of response.CommonPrefixes) {
+      if (commonPrefix.Prefix) {
+        // Extract the directory name from the CommonPrefixes
+        const directoryName = removePrefix(commonPrefix.Prefix).slice(0, -1);
+        objects.push({key: directoryName, isDirectory: true});
+      }
+    }
+  }
+
+  if (response.Contents) {
+    for (const content of response.Contents) {
+      const key = content.Key;
+      if (key) {
+        // Exclude subdirectories by checking if the Key ends with '/'
+        if (!key.endsWith('/')) {
+          const fileName = removePrefix(key);
+
+          const headCommand = new HeadObjectCommand({
+            Bucket: bucket,
+            Key: key,
+          });
+
+          const headResponse = await S3.send(headCommand);
+
+          objects.push({
+            key: fileName,
+            isDirectory: false,
+            lastModified: content.LastModified,
+            size: content.Size,
+            contentType: headResponse.ContentType,
+          });
+        }
+      }
+    }
+  }
+
+  return objects;
+}
+
+// async function listBucketContents(
+//   prefix: string,
+// ): Promise<ListObjectsCommandOutput> {
+//   if (!prefix.length) {
+//     throw new Error('Prefix cannot be empty');
+//   }
+//   const listObjectsCommand = new ListObjectsCommand({
+//     Bucket: S3_BUCKET_NAME,
+//     Prefix: `${prefix}/`,
+//   });
+//   const response = await S3.send(listObjectsCommand);
+//   return response;
+// }
+
+/**
+ * Delete all files with the given prefix
+ * @param prefix
+ */
+export async function deleteS3Files(
+  S3: S3Client,
+  bucket: string,
+  prefix: string,
+) {
+  const data = await S3.send(
+    new ListObjectsCommand({Bucket: bucket, Prefix: `${prefix}/`}),
+  );
+  if (data.Contents?.length) {
+    for (const obj of data.Contents) {
+      await S3.send(new DeleteObjectCommand({Bucket: bucket, Key: obj.Key}));
+    }
+  }
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@sqlrooms/typescript-config/react-library.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["src", "turbo"],
+  "exclude": ["node_modules", "dist"]
+}