design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(storage-browser): rename S3-specific storage browser interfaces to generic storage types

Browse Source
This commit is contained in:
Jürgen Kunz
2026-03-14 17:10:20 +00:00
parent c55eb948fe
commit eb055e7214
9 changed files with 34 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
changelog.md
View File

@@ -1,5 +1,12 @@
# Changelog
## 2026-03-14 - 3.48.4 - fix(storage-browser)
rename S3-specific storage browser interfaces to generic storage types
- Replaces IS3DataProvider, IS3Object, and IS3ChangeEvent with generic storage interface names across storage browser components
- Updates demo provider naming and user-facing demo text from S3 browser to Storage browser
- Aligns interface and utility comments with storage-agnostic terminology
## 2026-03-14 - 3.48.3 - fix(dataview)
rename dees-s3-browser exports and custom elements to dees-storage-browser

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@design.estate/dees-catalog',
version: '3.48.3',
version: '3.48.4',
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
}

14
ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-browser.demo.ts
View File

@@ -1,16 +1,16 @@
import { html } from '@design.estate/dees-element';
import type { IS3DataProvider, IS3Object } from './interfaces.js';
import type { IStorageDataProvider, IStorageObject } from './interfaces.js';
import './dees-storage-browser.js';
// Mock in-memory S3 data provider for demo purposes
class MockS3DataProvider implements IS3DataProvider {
// Mock in-memory storage data provider for demo purposes
class MockStorageDataProvider implements IStorageDataProvider {
private objects: Map<string, { content: string; contentType: string; size: number; lastModified: string }> = new Map();
constructor() {
const now = new Date().toISOString();
// Seed with sample data
this.objects.set('documents/readme.md', {
content: btoa('# Welcome\n\nThis is a demo S3 browser.\n'),
content: btoa('# Welcome\n\nThis is a demo Storage browser.\n'),
contentType: 'text/markdown',
size: 42,
lastModified: now,
@@ -59,9 +59,9 @@ class MockS3DataProvider implements IS3DataProvider {
});
}
async listObjects(bucket: string, prefix?: string, delimiter?: string): Promise<{ objects: IS3Object[]; prefixes: string[] }> {
async listObjects(bucket: string, prefix?: string, delimiter?: string): Promise<{ objects: IStorageObject[]; prefixes: string[] }> {
const pfx = prefix || '';
const objects: IS3Object[] = [];
const objects: IStorageObject[] = [];
const prefixes = new Set<string>();
for (const [key, data] of this.objects) {
@@ -149,7 +149,7 @@ export const demoFunc = () => html`
</style>
<div class="demo-container">
<dees-storage-browser
.dataProvider=${new MockS3DataProvider()}
.dataProvider=${new MockStorageDataProvider()}
.bucketName=${'demo-bucket'}
></dees-storage-browser>
</div>

10
ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-browser.ts
View File

@@ -1,7 +1,7 @@
import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
import { themeDefaultStyles } from '../../00theme.js';
import { demoFunc } from './dees-storage-browser.demo.js';
import type { IS3DataProvider, IS3ChangeEvent } from './interfaces.js';
import type { IStorageDataProvider, IStorageChangeEvent } from './interfaces.js';
import './dees-storage-columns.js';
import './dees-storage-keys.js';
import './dees-storage-preview.js';
@@ -20,7 +20,7 @@ export class DeesStorageBrowser extends DeesElement {
public static demoGroups = ['Data View'];
@property({ type: Object })
public accessor dataProvider: IS3DataProvider | null = null;
public accessor dataProvider: IStorageDataProvider | null = null;
@property({ type: String })
public accessor bucketName: string = '';
@@ -30,7 +30,7 @@ export class DeesStorageBrowser extends DeesElement {
* Pass a function that takes a callback and returns an unsubscribe function.
*/
@property({ type: Object })
public accessor onChangeEvent: ((callback: (event: IS3ChangeEvent) => void) => (() => void)) | null = null;
public accessor onChangeEvent: ((callback: (event: IStorageChangeEvent) => void) => (() => void)) | null = null;
@state()
private accessor viewType: TViewType = 'columns';
@@ -288,7 +288,7 @@ export class DeesStorageBrowser extends DeesElement {
}
try {
this.changeUnsubscribe = this.onChangeEvent((event: IS3ChangeEvent) => {
this.changeUnsubscribe = this.onChangeEvent((event: IStorageChangeEvent) => {
this.handleChange(event);
});
this.isStreamConnected = true;
@@ -306,7 +306,7 @@ export class DeesStorageBrowser extends DeesElement {
this.isStreamConnected = false;
}
private handleChange(event: IS3ChangeEvent) {
private handleChange(event: IStorageChangeEvent) {
this.recentChangeCount++;
this.refreshKey++;
}

4
ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-columns.ts
View File

@@ -1,7 +1,7 @@
import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
import { themeDefaultStyles } from '../../00theme.js';
import type { IS3DataProvider, IS3Object, IColumn } from './interfaces.js';
import type { IStorageDataProvider, IStorageObject, IColumn } from './interfaces.js';
import { getFileName, validateMove, getParentPrefix, getContentType, getDefaultContent, getPathSegments } from './utilities.js';
// FileSystem API types for drag-and-drop folder support
@@ -32,7 +32,7 @@ declare global {
@customElement('dees-storage-columns')
export class DeesStorageColumns extends DeesElement {
@property({ type: Object })
public accessor dataProvider: IS3DataProvider | null = null;
public accessor dataProvider: IStorageDataProvider | null = null;
@property({ type: String })
public accessor bucketName: string = '';

6
ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-keys.ts
View File

@@ -1,7 +1,7 @@
import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
import { themeDefaultStyles } from '../../00theme.js';
import type { IS3DataProvider, IS3Object } from './interfaces.js';
import type { IStorageDataProvider, IStorageObject } from './interfaces.js';
import { formatSize, getFileName, validateMove, getParentPrefix, getContentType, getDefaultContent, getPathSegments } from './utilities.js';
declare global {
@@ -13,7 +13,7 @@ declare global {
@customElement('dees-storage-keys')
export class DeesStorageKeys extends DeesElement {
@property({ type: Object })
public accessor dataProvider: IS3DataProvider | null = null;
public accessor dataProvider: IStorageDataProvider | null = null;
@property({ type: String })
public accessor bucketName: string = '';
@@ -25,7 +25,7 @@ export class DeesStorageKeys extends DeesElement {
public accessor refreshKey: number = 0;
@state()
private accessor allKeys: IS3Object[] = [];
private accessor allKeys: IStorageObject[] = [];
@state()
private accessor prefixes: string[] = [];

4
ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-preview.ts
View File

@@ -1,6 +1,6 @@
import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
import { themeDefaultStyles } from '../../00theme.js';
import type { IS3DataProvider } from './interfaces.js';
import type { IStorageDataProvider } from './interfaces.js';
import { formatSize, getFileName } from './utilities.js';
declare global {
@@ -12,7 +12,7 @@ declare global {
@customElement('dees-storage-preview')
export class DeesStoragePreview extends DeesElement {
@property({ type: Object })
public accessor dataProvider: IS3DataProvider | null = null;
public accessor dataProvider: IStorageDataProvider | null = null;
@property({ type: String })
public accessor bucketName: string = '';

12
ts_web/elements/00group-dataview/dees-storage-browser/interfaces.ts
View File

@@ -1,15 +1,15 @@
/**
* S3 Data Provider interface - implement this to connect the S3 browser to your backend
* Storage Data Provider interface - implement this to connect the storage browser to your backend
*/
export interface IS3Object {
export interface IStorageObject {
key: string;
size?: number;
lastModified?: string;
isPrefix?: boolean;
}
export interface IS3ChangeEvent {
export interface IStorageChangeEvent {
type: 'add' | 'modify' | 'delete';
key: string;
bucket: string;
@@ -17,8 +17,8 @@ export interface IS3ChangeEvent {
lastModified?: Date;
}
export interface IS3DataProvider {
listObjects(bucket: string, prefix?: string, delimiter?: string): Promise<{ objects: IS3Object[]; prefixes: string[] }>;
export interface IStorageDataProvider {
listObjects(bucket: string, prefix?: string, delimiter?: string): Promise<{ objects: IStorageObject[]; prefixes: string[] }>;
getObject(bucket: string, key: string): Promise<{ content: string; contentType: string; size: number; lastModified: string }>;
putObject(bucket: string, key: string, base64Content: string, contentType: string): Promise<boolean>;
deleteObject(bucket: string, key: string): Promise<boolean>;
@@ -30,7 +30,7 @@ export interface IS3DataProvider {
export interface IColumn {
prefix: string;
objects: IS3Object[];
objects: IStorageObject[];
prefixes: string[];
selectedItem: string | null;
width: number;

2
ts_web/elements/00group-dataview/dees-storage-browser/utilities.ts
View File

@@ -1,5 +1,5 @@
/**
* Shared utilities for S3 browser components
* Shared utilities for Storage browser components
*/
export interface IMoveValidation {