@design.estate/dees-catalog 3.47.1 → 3.48.3

package/ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-preview.ts

@@ -0,0 +1,540 @@
+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 { formatSize, getFileName } from './utilities.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-storage-preview': DeesStoragePreview;
+  }
+}
+
+@customElement('dees-storage-preview')
+export class DeesStoragePreview extends DeesElement {
+  @property({ type: Object })
+  public accessor dataProvider: IS3DataProvider | null = null;
+
+  @property({ type: String })
+  public accessor bucketName: string = '';
+
+  @property({ type: String })
+  public accessor objectKey: string = '';
+
+  @state()
+  private accessor loading: boolean = false;
+
+  @state()
+  private accessor saving: boolean = false;
+
+  @state()
+  private accessor content: string = '';
+
+  @state()
+  private accessor originalTextContent: string = '';
+
+  @state()
+  private accessor hasChanges: boolean = false;
+
+  @state()
+  private accessor editing: boolean = false;
+
+  @state()
+  private accessor contentType: string = '';
+
+  @state()
+  private accessor fileSize: number = 0;
+
+  @state()
+  private accessor lastModified: string = '';
+
+  @state()
+  private accessor error: string = '';
+
+  public static styles = [
+    cssManager.defaultStyles,
+    themeDefaultStyles,
+    css`
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      .preview-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      .preview-header {
+        padding: 12px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#333')};
+      }
+
+      .preview-title {
+        font-size: 14px;
+        font-weight: 500;
+        margin-bottom: 8px;
+        word-break: break-all;
+      }
+
+      .preview-meta {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 16px;
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#71717a', '#888')};
+      }
+
+      .meta-item {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .preview-content {
+        flex: 1;
+        overflow: hidden;
+      }
+
+      .preview-content dees-preview {
+        width: 100%;
+        height: 100%;
+      }
+
+      .preview-content.code-editor {
+        padding: 0;
+        overflow: hidden;
+      }
+
+      .preview-content.code-editor dees-input-code {
+        height: 100%;
+      }
+
+      .preview-actions {
+        padding: 12px;
+        border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#333')};
+        display: flex;
+        gap: 8px;
+      }
+
+      .action-btn {
+        flex: 1;
+        padding: 8px 16px;
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
+        border: 1px solid ${cssManager.bdTheme('#d4d4d8', '#404040')};
+        color: ${cssManager.bdTheme('#3f3f46', '#e0e0e0')};
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 13px;
+        transition: all 0.15s;
+      }
+
+      .action-btn:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.15)')};
+      }
+
+      .action-btn.danger {
+        background: rgba(239, 68, 68, 0.2);
+        border-color: #ef4444;
+        color: #f87171;
+      }
+
+      .action-btn.danger:hover {
+        background: rgba(239, 68, 68, 0.3);
+      }
+
+      .action-btn.primary {
+        background: rgba(59, 130, 246, 0.3);
+        border-color: #3b82f6;
+        color: #60a5fa;
+      }
+
+      .action-btn.primary:hover {
+        background: rgba(59, 130, 246, 0.4);
+      }
+
+      .action-btn.primary:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .action-btn.secondary {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.05)')};
+        border-color: ${cssManager.bdTheme('#d4d4d8', '#555')};
+        color: ${cssManager.bdTheme('#71717a', '#aaa')};
+      }
+
+      .action-btn.secondary:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.1)')};
+        color: ${cssManager.bdTheme('#18181b', '#fff')};
+      }
+
+      .unsaved-indicator {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 10px;
+        background: rgba(251, 191, 36, 0.1);
+        border: 1px solid rgba(251, 191, 36, 0.3);
+        border-radius: 4px;
+        font-size: 12px;
+        color: #fbbf24;
+      }
+
+      .unsaved-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #fbbf24;
+      }
+
+      .empty-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: ${cssManager.bdTheme('#a1a1aa', '#666')};
+        text-align: center;
+        padding: 24px;
+      }
+
+      .empty-state svg {
+        width: 48px;
+        height: 48px;
+        margin-bottom: 12px;
+        opacity: 0.5;
+      }
+
+      .loading-state {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: ${cssManager.bdTheme('#71717a', '#888')};
+      }
+
+      .error-state {
+        padding: 16px;
+        color: #f87171;
+        text-align: center;
+      }
+    `,
+  ];
+
+  updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('objectKey') || changedProperties.has('bucketName')) {
+      if (this.objectKey) {
+        this.loadObject();
+      } else {
+        this.content = '';
+        this.contentType = '';
+        this.error = '';
+        this.originalTextContent = '';
+        this.hasChanges = false;
+        this.editing = false;
+      }
+    }
+  }
+
+  private async loadObject() {
+    if (!this.objectKey || !this.bucketName || !this.dataProvider) return;
+
+    this.loading = true;
+    this.error = '';
+    this.hasChanges = false;
+    this.editing = false;
+
+    try {
+      const result = await this.dataProvider.getObject(this.bucketName, this.objectKey);
+      if (!result) {
+        this.error = 'Object not found';
+        this.loading = false;
+        return;
+      }
+      this.content = result.content || '';
+      this.contentType = result.contentType || '';
+      this.fileSize = result.size || 0;
+      this.lastModified = result.lastModified || '';
+
+      if (this.isText()) {
+        this.originalTextContent = this.getTextContent();
+      }
+    } catch (err) {
+      console.error('Error loading object:', err);
+      this.error = 'Failed to load object';
+    }
+
+    this.loading = false;
+  }
+
+  private formatDate(dateStr: string): string {
+    if (!dateStr) return '-';
+    const date = new Date(dateStr);
+    return date.toLocaleString();
+  }
+
+  private isImage(): boolean {
+    return this.contentType.startsWith('image/');
+  }
+
+  private isText(): boolean {
+    return (
+      this.contentType.startsWith('text/') ||
+      this.contentType === 'application/json' ||
+      this.contentType === 'application/xml' ||
+      this.contentType === 'application/javascript'
+    );
+  }
+
+  private getTextContent(): string {
+    try {
+      const binaryString = atob(this.content);
+      const bytes = new Uint8Array(binaryString.length);
+      for (let i = 0; i < binaryString.length; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+      }
+      return new TextDecoder('utf-8').decode(bytes);
+    } catch {
+      return 'Unable to decode content';
+    }
+  }
+
+  private async handleDownload() {
+    try {
+      const blob = new Blob([Uint8Array.from(atob(this.content), (c) => c.charCodeAt(0))], {
+        type: this.contentType,
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = getFileName(this.objectKey);
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error('Error downloading:', err);
+    }
+  }
+
+  private async handleDelete() {
+    if (!this.dataProvider) return;
+    if (!confirm(`Delete "${getFileName(this.objectKey)}"?`)) return;
+
+    try {
+      await this.dataProvider.deleteObject(this.bucketName, this.objectKey);
+      this.dispatchEvent(
+        new CustomEvent('object-deleted', {
+          detail: { key: this.objectKey },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    } catch (err) {
+      console.error('Error deleting object:', err);
+    }
+  }
+
+  private getLanguage(): string {
+    const ext = this.objectKey.split('.').pop()?.toLowerCase() || '';
+    const languageMap: Record<string, string> = {
+      ts: 'typescript',
+      tsx: 'typescript',
+      js: 'javascript',
+      jsx: 'javascript',
+      mjs: 'javascript',
+      cjs: 'javascript',
+      json: 'json',
+      html: 'html',
+      htm: 'html',
+      css: 'css',
+      scss: 'scss',
+      sass: 'scss',
+      less: 'less',
+      md: 'markdown',
+      markdown: 'markdown',
+      xml: 'xml',
+      yaml: 'yaml',
+      yml: 'yaml',
+      py: 'python',
+      rb: 'ruby',
+      go: 'go',
+      rs: 'rust',
+      java: 'java',
+      c: 'c',
+      cpp: 'cpp',
+      h: 'c',
+      hpp: 'cpp',
+      cs: 'csharp',
+      php: 'php',
+      sh: 'shell',
+      bash: 'shell',
+      zsh: 'shell',
+      sql: 'sql',
+      graphql: 'graphql',
+      gql: 'graphql',
+      dockerfile: 'dockerfile',
+      txt: 'plaintext',
+    };
+    return languageMap[ext] || 'plaintext';
+  }
+
+  private handleContentChange(event: CustomEvent) {
+    const newValue = event.detail as string;
+    this.hasChanges = newValue !== this.originalTextContent;
+  }
+
+  private handleEdit() {
+    this.editing = true;
+  }
+
+  private handleDiscard() {
+    const codeEditor = this.shadowRoot?.querySelector('dees-input-code') as any;
+    if (codeEditor) {
+      codeEditor.value = this.originalTextContent;
+    }
+    this.hasChanges = false;
+    this.editing = false;
+  }
+
+  private async handleSave() {
+    if (!this.hasChanges || this.saving || !this.dataProvider) return;
+
+    this.saving = true;
+
+    try {
+      const codeEditor = this.shadowRoot?.querySelector('dees-input-code') as any;
+      const currentContent = codeEditor?.value ?? '';
+
+      const encoder = new TextEncoder();
+      const bytes = encoder.encode(currentContent);
+      const base64Content = btoa(String.fromCharCode(...bytes));
+
+      const success = await this.dataProvider.putObject(
+        this.bucketName,
+        this.objectKey,
+        base64Content,
+        this.contentType
+      );
+
+      if (success) {
+        this.originalTextContent = currentContent;
+        this.hasChanges = false;
+        this.editing = false;
+        this.content = base64Content;
+      }
+    } catch (err) {
+      console.error('Error saving object:', err);
+    }
+
+    this.saving = false;
+  }
+
+  render() {
+    if (!this.objectKey) {
+      return html`
+        <div class="preview-container">
+          <div class="empty-state">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+              <polyline points="14 2 14 8 20 8" />
+            </svg>
+            <p>Select a file to preview</p>
+          </div>
+        </div>
+      `;
+    }
+
+    if (this.loading) {
+      return html`
+        <div class="preview-container">
+          <div class="loading-state">Loading...</div>
+        </div>
+      `;
+    }
+
+    if (this.error) {
+      return html`
+        <div class="preview-container">
+          <div class="error-state">${this.error}</div>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="preview-container">
+        <div class="preview-header">
+          <div class="preview-title">${getFileName(this.objectKey)}</div>
+          <div class="preview-meta">
+            <span class="meta-item">${this.contentType}</span>
+            <span class="meta-item">${formatSize(this.fileSize)}</span>
+            <span class="meta-item">${this.formatDate(this.lastModified)}</span>
+            ${this.hasChanges ? html`
+              <span class="unsaved-indicator">
+                <span class="unsaved-dot"></span>
+                Unsaved changes
+              </span>
+            ` : ''}
+          </div>
+        </div>
+
+        <div class="preview-content ${this.editing ? 'code-editor' : ''}">
+          ${this.editing
+            ? html`
+                <dees-input-code
+                  .value=${this.originalTextContent}
+                  .language=${this.getLanguage()}
+                  height="100%"
+                  @content-change=${(e: CustomEvent) => this.handleContentChange(e)}
+                ></dees-input-code>
+              `
+            : this.isText()
+              ? html`
+                  <dees-preview
+                    .textContent=${this.originalTextContent}
+                    .filename=${getFileName(this.objectKey)}
+                    .language=${this.getLanguage()}
+                    .showToolbar=${true}
+                    .showFilename=${false}
+                  ></dees-preview>
+                `
+              : html`
+                  <dees-preview
+                    .base64=${this.content}
+                    .mimeType=${this.contentType}
+                    .filename=${getFileName(this.objectKey)}
+                    .showToolbar=${true}
+                    .showFilename=${false}
+                  ></dees-preview>
+                `
+          }
+        </div>
+
+        <div class="preview-actions">
+          ${this.editing
+            ? html`
+                <button class="action-btn secondary" @click=${this.handleDiscard}>
+                  ${this.hasChanges ? 'Discard' : 'Cancel'}
+                </button>
+                <button
+                  class="action-btn primary"
+                  @click=${this.handleSave}
+                  ?disabled=${this.saving || !this.hasChanges}
+                >
+                  ${this.saving ? 'Saving...' : 'Save'}
+                </button>
+              `
+            : html`
+                ${this.isText()
+                  ? html`<button class="action-btn" @click=${this.handleEdit}>Edit</button>`
+                  : ''}
+                <button class="action-btn" @click=${this.handleDownload}>Download</button>
+                <button class="action-btn danger" @click=${this.handleDelete}>Delete</button>
+              `
+          }
+        </div>
+      </div>
+    `;
+  }
+}

package/ts_web/elements/00group-dataview/dees-storage-browser/index.ts

@@ -0,0 +1,6 @@
+export * from './dees-storage-browser.js';
+export * from './dees-storage-columns.js';
+export * from './dees-storage-keys.js';
+export * from './dees-storage-preview.js';
+export * from './interfaces.js';
+export { formatSize, formatCount, getFileName, validateMove, getParentPrefix, getContentType, getDefaultContent, getPathSegments } from './utilities.js';

package/ts_web/elements/00group-dataview/dees-storage-browser/interfaces.ts

@@ -0,0 +1,37 @@
+/**
+ * S3 Data Provider interface - implement this to connect the S3 browser to your backend
+ */
+
+export interface IS3Object {
+  key: string;
+  size?: number;
+  lastModified?: string;
+  isPrefix?: boolean;
+}
+
+export interface IS3ChangeEvent {
+  type: 'add' | 'modify' | 'delete';
+  key: string;
+  bucket: string;
+  size?: number;
+  lastModified?: Date;
+}
+
+export interface IS3DataProvider {
+  listObjects(bucket: string, prefix?: string, delimiter?: string): Promise<{ objects: IS3Object[]; 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>;
+  deletePrefix(bucket: string, prefix: string): Promise<boolean>;
+  getObjectUrl(bucket: string, key: string): Promise<string>;
+  moveObject(bucket: string, sourceKey: string, destKey: string): Promise<{ success: boolean; error?: string }>;
+  movePrefix(bucket: string, sourcePrefix: string, destPrefix: string): Promise<{ success: boolean; movedCount?: number; error?: string }>;
+}
+
+export interface IColumn {
+  prefix: string;
+  objects: IS3Object[];
+  prefixes: string[];
+  selectedItem: string | null;
+  width: number;
+}

package/ts_web/elements/00group-dataview/dees-storage-browser/utilities.ts

@@ -0,0 +1,120 @@
+/**
+ * Shared utilities for S3 browser components
+ */
+
+export interface IMoveValidation {
+  valid: boolean;
+  error?: string;
+}
+
+/**
+ * Format a byte size into a human-readable string
+ */
+export function formatSize(bytes?: number): string {
+  if (bytes === undefined || bytes === null) return '-';
+  if (bytes === 0) return '0 B';
+
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  let size = bytes;
+  let unitIndex = 0;
+
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex++;
+  }
+
+  return `${size.toFixed(unitIndex > 0 ? 1 : 0)} ${units[unitIndex]}`;
+}
+
+/**
+ * Format a count into a compact human-readable string
+ */
+export function formatCount(count?: number): string {
+  if (count === undefined || count === null) return '';
+  if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`;
+  if (count >= 1000) return `${(count / 1000).toFixed(1)}K`;
+  return count.toString();
+}
+
+/**
+ * Extract the file name from a path
+ */
+export function getFileName(path: string): string {
+  const parts = path.replace(/\/$/, '').split('/');
+  return parts[parts.length - 1] || path;
+}
+
+/**
+ * Validates if a move operation is allowed
+ */
+export function validateMove(sourceKey: string, destPrefix: string): IMoveValidation {
+  if (sourceKey.endsWith('/')) {
+    if (destPrefix.startsWith(sourceKey)) {
+      return { valid: false, error: 'Cannot move a folder into itself' };
+    }
+  }
+
+  const sourceParent = getParentPrefix(sourceKey);
+  if (sourceParent === destPrefix) {
+    return { valid: false, error: 'Item is already in this location' };
+  }
+
+  return { valid: true };
+}
+
+/**
+ * Gets the parent prefix (directory) of a given key
+ */
+export function getParentPrefix(key: string): string {
+  const trimmed = key.endsWith('/') ? key.slice(0, -1) : key;
+  const lastSlash = trimmed.lastIndexOf('/');
+  return lastSlash >= 0 ? trimmed.substring(0, lastSlash + 1) : '';
+}
+
+/**
+ * Get content type from file extension
+ */
+export function getContentType(ext: string): string {
+  const contentTypes: Record<string, string> = {
+    json: 'application/json',
+    txt: 'text/plain',
+    html: 'text/html',
+    css: 'text/css',
+    js: 'application/javascript',
+    ts: 'text/typescript',
+    md: 'text/markdown',
+    xml: 'application/xml',
+    yaml: 'text/yaml',
+    yml: 'text/yaml',
+    csv: 'text/csv',
+  };
+  return contentTypes[ext] || 'application/octet-stream';
+}
+
+/**
+ * Get default content for a new file based on extension
+ */
+export function getDefaultContent(ext: string): string {
+  const defaults: Record<string, string> = {
+    json: '{\n  \n}',
+    html: '<!DOCTYPE html>\n<html>\n<head>\n  <title></title>\n</head>\n<body>\n  \n</body>\n</html>',
+    md: '# Title\n\n',
+    txt: '',
+  };
+  return defaults[ext] || '';
+}
+
+/**
+ * Parse a prefix into cumulative path segments
+ */
+export function getPathSegments(prefix: string): string[] {
+  if (!prefix) return [];
+  const parts = prefix.split('/').filter(p => p);
+  const segments: string[] = [];
+  let cumulative = '';
+  for (const part of parts) {
+    cumulative += part + '/';
+    segments.push(cumulative);
+  }
+  return segments;
+}

package/ts_web/elements/00group-dataview/index.ts

@@ -3,3 +3,4 @@ export * from './dees-dataview-codebox/index.js';
 export * from './dees-dataview-statusobject/index.js';
 export * from './dees-table/index.js';
 export * from './dees-statsgrid/index.js';
+export * from './dees-storage-browser/index.js';