@sqlrooms/s3-browser 0.0.0

package/.turbo/turbo-build.log

@@ -0,0 +1,4 @@
+
+> @sqlrooms/s3-browser@0.0.0 build /Users/ilya/Workspace/sqlrooms/packages/s3-browser
+> tsc
+

package/.turbo/turbo-dev.log

@@ -0,0 +1,50 @@
+
+
+> @sqlrooms/s3-browser@1.0.0 dev /Users/ilya/Workspace/sqlrooms/packages/s3-browser
+> tsc -w
+
+[7:31:02 PM] Starting compilation in watch mode...
+
+src/s3.ts:7:8 - error TS2307: Cannot find module '@aws-sdk/client-s3' or its corresponding type declarations.
+
+7 } from '@aws-sdk/client-s3';
+         ~~~~~~~~~~~~~~~~~~~~
+
+src/S3FileBrowser.tsx:83:5 - error TS2590: Expression produces a union type that is too complex to represent.
+
+ 83     <Flex position="relative" width="100%" height="100%" overflow="hidden">
+        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ 84       <Flex
+    ~~~~~~~~~~~
+... 
+245       </Flex>
+    ~~~~~~~~~~~~~
+246     </Flex>
+    ~~~~~~~~~~~
+
+../utils/src/color.ts:1:32 - error TS7016: Could not find a declaration file for module 'd3-color'. '/Users/ilya/Workspace/sqlrooms/node_modules/.pnpm/d3-color@3.1.0/node_modules/d3-color/src/index.js' implicitly has an 'any' type.
+  Try `npm i --save-dev @types/d3-color` if it exists or add a new declaration (.d.ts) file containing `declare module 'd3-color';`
+
+1 import {color as d3color} from 'd3-color';
+                                 ~~~~~~~~~~
+
+../utils/src/format.ts:1:27 - error TS7016: Could not find a declaration file for module 'd3-format'. '/Users/ilya/Workspace/sqlrooms/node_modules/d3-format/src/index.js' implicitly has an 'any' type.
+  Try `npm i --save-dev @types/d3-format` if it exists or add a new declaration (.d.ts) file containing `declare module 'd3-format';`
+
+1 import * as d3Format from 'd3-format';
+                            ~~~~~~~~~~~
+
+../utils/src/helpers.ts:1:26 - error TS7016: Could not find a declaration file for module 'd3-time-format'. '/Users/ilya/Workspace/sqlrooms/node_modules/.pnpm/d3-time-format@3.0.0/node_modules/d3-time-format/dist/d3-time-format.js' implicitly has an 'any' type.
+  Try `npm i --save-dev @types/d3-time-format` if it exists or add a new declaration (.d.ts) file containing `declare module 'd3-time-format';`
+
+1 import {timeFormat} from 'd3-time-format';
+                           ~~~~~~~~~~~~~~~~
+
+../utils/src/helpers.ts:2:20 - error TS7016: Could not find a declaration file for module 'seedrandom'. '/Users/ilya/Workspace/sqlrooms/node_modules/.pnpm/seedrandom@3.0.5/node_modules/seedrandom/index.js' implicitly has an 'any' type.
+  Try `npm i --save-dev @types/seedrandom` if it exists or add a new declaration (.d.ts) file containing `declare module 'seedrandom';`
+
+2 import {alea} from 'seedrandom';
+                     ~~~~~~~~~~~~
+
+[7:31:06 PM] Found 6 errors. Watching for file changes.
+

package/.turbo/turbo-lint.log

@@ -0,0 +1,4 @@
+
+> @sqlrooms/s3-browser@0.0.0 lint /Users/ilya/Workspace/sqlrooms/packages/s3-browser
+> eslint .
+

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+
+
+**Note:** Version bump only for package @sqlrooms/s3-browser

package/LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright 2025 Ilya Boyandin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/S3FileBrowser.d.ts

@@ -0,0 +1,13 @@
+import { FC } 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;
+};
+declare const S3FileBrowser: FC<Props>;
+export default S3FileBrowser;
+//# sourceMappingURL=S3FileBrowser.d.ts.map

package/dist/S3FileBrowser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"S3FileBrowser.d.ts","sourceRoot":"","sources":["../src/S3FileBrowser.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAC,EAAE,EAAkC,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AAEtD,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC5B,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,kBAAkB,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,yBAAyB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,qBAAqB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,KAAK,CA2L5B,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/S3FileBrowser.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { useCallback, useEffect, useMemo } from 'react';
+const S3FileBrowser = (props) => {
+    const { files, selectedDirectory, selectedFiles, onCanConfirmChange, onChangeSelectedFiles, onChangeSelectedDirectory, } = props;
+    useEffect(() => {
+        onCanConfirmChange(Boolean(selectedFiles?.length));
+    }, [selectedFiles, onCanConfirmChange]);
+    const handleSelectFile = useCallback((key) => {
+        if (selectedFiles.includes(key)) {
+            onChangeSelectedFiles(selectedFiles.filter((id) => id !== key));
+        }
+        else {
+            onChangeSelectedFiles([...selectedFiles, key]);
+        }
+    }, [onChangeSelectedFiles, selectedFiles]);
+    const handleSelectDirectory = useCallback((key) => {
+        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 (_jsx("div", { className: "relative w-full h-full overflow-hidden", children: _jsx("div", { className: "absolute w-full h-full overflow-x-auto overflow-y-auto flex flex-col py-0 items-start", children: _jsx("div", { className: "w-full rounded-lg border border-gray-600 overflow-y-auto", children: _jsxs(Table, { disableWrapper: true, children: [_jsxs(TableHeader, { children: [selectedDirectory ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, className: "py-3 text-gray-100 bg-gray-800", children: _jsxs("div", { className: "flex gap-2 items-center", children: [_jsxs(Button, { size: "sm", variant: "outline", onClick: () => onChangeSelectedDirectory(parentDirectory), children: [_jsx(Undo2Icon, { className: "w-3 h-3 mr-1" }), ".."] }), _jsx(Breadcrumb, { children: _jsxs(BreadcrumbList, { children: [_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbLink, { onClick: () => onChangeSelectedDirectory(''), className: "text-xs text-blue-400", children: "Home" }) }), selectedDirectory.split('/').map((directory, i) => {
+                                                                if (!directory)
+                                                                    return null;
+                                                                const path = selectedDirectory
+                                                                    .split('/')
+                                                                    .slice(0, i + 1)
+                                                                    .join('/')
+                                                                    .concat('/');
+                                                                const isCurrent = path === selectedDirectory;
+                                                                return (_jsxs(BreadcrumbItem, { children: [_jsx(BreadcrumbSeparator, {}), _jsx(BreadcrumbLink, { className: cn('text-xs text-blue-400', isCurrent &&
+                                                                                'cursor-default hover:no-underline'), onClick: () => {
+                                                                                if (!isCurrent) {
+                                                                                    onChangeSelectedDirectory(path);
+                                                                                }
+                                                                            }, children: directory })] }, i));
+                                                            })] }) })] }) }) })) : null, _jsxs(TableRow, { className: "sticky top-0 z-[2] bg-gray-600", children: [_jsx(TableHead, { className: "w-[1%]", children: _jsx(Checkbox, { checked: selectedFiles.length === filesInDirectory.length, onCheckedChange: handleSelectAll }) }), _jsx(TableHead, { className: "py-2 text-white", children: "Name" }), _jsx(TableHead, { className: "py-2 text-white", children: "Type" }), _jsx(TableHead, { className: "text-white text-right", children: "Size" }), _jsx(TableHead, { className: "text-white text-right", children: "Modified" })] })] }), _jsx(TableBody, { children: files?.map((object) => {
+                                const { key, isDirectory } = object;
+                                return (_jsxs(TableRow, { 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
+                                        }
+                                    }, children: [_jsx(TableCell, { children: _jsx(Checkbox, { disabled: isDirectory, checked: selectedFiles.includes(key) }) }), _jsx(TableCell, { className: "text-xs", children: isDirectory ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FolderIcon, { className: "w-4 h-4" }), _jsx("span", { children: `${key}/` })] })) : (key) }), _jsx(TableCell, { className: "text-xs", children: isDirectory ? 'Directory' : object.contentType }), _jsx(TableCell, { className: "text-xs text-right", children: !isDirectory && object.size !== undefined
+                                                ? formatBytes(object.size)
+                                                : '' }), _jsx(TableCell, { className: "text-xs text-right", children: !isDirectory && object.lastModified
+                                                ? formatTimeRelative(object.lastModified)
+                                                : '' })] }, key));
+                            }) })] }) }) }) }));
+};
+export default S3FileBrowser;

package/dist/S3FileOrDirectory.d.ts

@@ -0,0 +1,31 @@
+import { z } from 'zod';
+export declare const S3FileOrDirectory: z.ZodUnion<[z.ZodObject<{
+    key: z.ZodString;
+    isDirectory: z.ZodLiteral<true>;
+}, "strip", z.ZodTypeAny, {
+    key: string;
+    isDirectory: true;
+}, {
+    key: string;
+    isDirectory: true;
+}>, z.ZodObject<{
+    key: z.ZodString;
+    isDirectory: z.ZodLiteral<false>;
+    lastModified: z.ZodOptional<z.ZodDate>;
+    size: z.ZodOptional<z.ZodNumber>;
+    contentType: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    key: string;
+    isDirectory: false;
+    size?: number | undefined;
+    lastModified?: Date | undefined;
+    contentType?: string | undefined;
+}, {
+    key: string;
+    isDirectory: false;
+    size?: number | undefined;
+    lastModified?: Date | undefined;
+    contentType?: string | undefined;
+}>]>;
+export type S3FileOrDirectory = z.infer<typeof S3FileOrDirectory>;
+//# sourceMappingURL=S3FileOrDirectory.d.ts.map

package/dist/S3FileOrDirectory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"S3FileOrDirectory.d.ts","sourceRoot":"","sources":["../src/S3FileOrDirectory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,CAAC,EAAC,MAAM,KAAK,CAAC;AAEtB,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;IAY5B,CAAC;AACH,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

package/dist/S3FileOrDirectory.js

@@ -0,0 +1,14 @@
+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(),
+    }),
+]);

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as S3FileBrowser } from './S3FileBrowser';
+export * from './s3';
+export * from './S3FileOrDirectory';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,IAAI,aAAa,EAAC,MAAM,iBAAiB,CAAC;AACzD,cAAc,MAAM,CAAC;AACrB,cAAc,qBAAqB,CAAC"}

package/dist/index.js

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

package/dist/s3.d.ts

@@ -0,0 +1,9 @@
+import { S3Client } from '@aws-sdk/client-s3';
+import { S3FileOrDirectory } from './S3FileOrDirectory';
+export declare function listFilesAndDirectoriesWithPrefix(S3: S3Client, bucket: string, prefix?: string): Promise<S3FileOrDirectory[]>;
+/**
+ * Delete all files with the given prefix
+ * @param prefix
+ */
+export declare function deleteS3Files(S3: S3Client, bucket: string, prefix: string): Promise<void>;
+//# sourceMappingURL=s3.d.ts.map

package/dist/s3.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"s3.d.ts","sourceRoot":"","sources":["../src/s3.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,QAAQ,EACT,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AAEtD,wBAAsB,iCAAiC,CACrD,EAAE,EAAE,QAAQ,EACZ,MAAM,EAAE,MAAM,EACd,MAAM,CAAC,EAAE,MAAM,GACd,OAAO,CAAC,iBAAiB,EAAE,CAAC,CAwD9B;AAgBD;;;GAGG;AACH,wBAAsB,aAAa,CACjC,EAAE,EAAE,QAAQ,EACZ,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,iBAUf"}

package/dist/s3.js

@@ -0,0 +1,74 @@
+import { DeleteObjectCommand, HeadObjectCommand, ListObjectsCommand, ListObjectsV2Command, } from '@aws-sdk/client-s3';
+export async function listFilesAndDirectoriesWithPrefix(S3, bucket, prefix) {
+    const command = new ListObjectsV2Command({
+        Bucket: bucket,
+        Prefix: prefix ? `${prefix}${prefix.endsWith('/') ? '' : '/'}` : '',
+        Delimiter: '/',
+    });
+    const response = await S3.send(command);
+    const objects = [];
+    const removePrefix = (key) => {
+        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, bucket, prefix) {
+    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 }));
+        }
+    }
+}