@vertesia/ui 0.60.0 → 0.61.0

package/src/features/store/objects/layout/DocumentTableColumn.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import { ColumnLayout, ContentObjectItem } from '@vertesia/common';
+
+import renderers from './renderers';
+
+const defaultRenderer = renderers.string();
+
+function resolveField(object: ContentObjectItem, path: string[]) {
+    let p = object as any;
+    if (!p) return undefined;
+    if (!path.length) return p;
+    const last = path.length - 1;
+    for (let i = 0; i < last; i++) {
+        p = p[path[i]];
+        if (!p) {
+            return undefined;
+        }
+    }
+    return p[path[last]];
+}
+
+function splitPath(path: string) {
+    if (!path || path === '.') {
+        return [];
+    }
+    return path.split('.');
+}
+
+// Extend the ColumnLayout type to include our custom render function
+export interface ExtendedColumnLayout extends Omit<ColumnLayout, 'field'> {
+    field?: string;
+    render?: (item: ContentObjectItem) => React.ReactNode;
+}
+
+export class DocumentTableColumn {
+    renderer: (value: any, index: number) => React.ReactNode = defaultRenderer;
+    path: string[];
+    fallbackPath?: string[];
+    constructor(public layout: ExtendedColumnLayout) {
+        this.path = splitPath(layout.field || '');
+        this.fallbackPath = layout.fallback ? splitPath(layout.fallback) : undefined;
+
+        // If there's a custom render function, use it
+        if (layout.render) {
+            this.renderer = (_value: any, _index: number) => null; // Placeholder, we'll use render directly
+        } else {
+            // Otherwise use the type-based renderer
+            const type = layout.type || 'string';
+            const i = type.indexOf('?');
+            if (i > 0) {
+                const name = type.substring(0, i);
+                const params = new URLSearchParams(type.substring(i + 1));
+                this.renderer = renderers[name](params);
+            } else {
+                this.renderer = renderers[type]();
+            }
+        }
+    }
+
+    get name() {
+        return this.layout.name;
+    }
+
+    resolveValue(object: ContentObjectItem) {
+        let value = resolveField(object, this.path);
+        if (value === undefined && this.fallbackPath) {
+            value = resolveField(object, this.fallbackPath);
+        }
+        if (value === undefined) {
+            value = this.layout.default;
+        }
+        return value;
+    }
+
+    render(object: ContentObjectItem, index: number) {
+        // If there's a custom render function, wrap its result in a td
+        if (this.layout.render) {
+            return <td key={index} className="whitespace-nowrap px-3 py-4 text-sm">{this.layout.render(object)}</td>;
+        }
+        // Otherwise use the type-based renderer with the resolved value
+        return this.renderer(this.resolveValue(object), index);
+    }
+}

package/src/features/store/objects/layout/documentLayout.tsx

@@ -0,0 +1,69 @@
+import { Table, TBody, Spinner } from "@vertesia/ui/core";
+import { ContentObjectItem, ColumnLayout } from "@vertesia/common";
+import clsx from "clsx";
+import { ChangeEvent } from "react";
+import { DocumentIcon } from "../components/DocumentIcon";
+import { DocumentSelection } from "../DocumentSelectionProvider";
+import { DocumentTableColumn } from "./DocumentTableColumn";
+
+interface ViewProps {
+    objects: ContentObjectItem[];
+    isLoading: boolean;
+    layout?: ColumnLayout[];
+    onRowClick?: (object: ContentObjectItem) => void;
+    onSelectionChange: ((object: ContentObjectItem, ev: ChangeEvent<HTMLInputElement>) => void);
+    selection: DocumentSelection;
+    toggleAll?: (ev: ChangeEvent<HTMLInputElement>) => void;
+    columns: DocumentTableColumn[];
+}
+
+export function DocumentTableView({ objects, selection, isLoading, onRowClick, columns, toggleAll, onSelectionChange }: ViewProps) {
+    return (
+        <Table className="w-full border-t">
+            <thead>
+                <tr>
+                    {selection && <th><input type="checkbox" onChange={toggleAll} /></th>}
+                    {columns.map((col) => (
+                        <th key={col.name}>{col.name}</th>
+                    ))}
+                </tr>
+            </thead>
+            <TBody isLoading={isLoading} columns={columns.length}>
+                {
+                    objects?.map((obj: ContentObjectItem) => {
+                        return (
+                            <tr key={obj.id} className='cursor-pointer hover:bg-muted' onClick={() => {
+                                onRowClick && onRowClick(obj)
+                            }}>
+                                {selection &&
+                                    <td onClick={ev => ev.stopPropagation()}>
+                                        <input checked={selection.isSelected(obj.id)} type="checkbox"
+                                            onChange={(ev: ChangeEvent<HTMLInputElement>) => onSelectionChange(obj, ev)} />
+                                    </td>
+                                }
+                                {columns.map((col, index) => col.render(obj, index))}
+                            </tr>
+                        )
+                    })
+                }
+                {objects.length === 0 && <tr><td colSpan={columns.length + (selection ? 1 : 0)} className="text-center">No objects. Just drag and drop documents or images here to create content objects.</td></tr>}
+            </TBody>
+        </Table>
+    )
+}
+
+export function DocumentGridView({ objects, selection, isLoading, onSelectionChange }: ViewProps) {
+
+    return (
+        <>
+            <div className={clsx("bg-white opacity-40 absolute inset-0 z-50 flex justify-center items-center", isLoading ? "block" : "hidden")}>
+                <Spinner size='xl' />
+            </div>
+            <div className="w-full gap-2 grid lg:grid-cols-6">
+                {objects.map((document) => (
+                    <DocumentIcon key={document.id} document={document} selection={selection} onSelectionChange={onSelectionChange} />
+                ))}
+            </div>
+        </>
+    )
+}

package/src/features/store/objects/layout/index.ts

@@ -0,0 +1,2 @@
+export * from "./DocumentTableColumn";
+export * from "./documentLayout";

package/src/features/store/objects/layout/knowledge.md

@@ -0,0 +1,238 @@
+# Layout System Knowledge
+
+## Overview
+The layout system provides a flexible way to define table and grid layouts for content objects and documents.
+
+## Column Layout System
+
+### Column Layout Definition
+```typescript
+interface ColumnLayout {
+    name: string;       // Display name of the column
+    field: string;      // Dot notation path to the data field
+    fallback?: string;  // Fallback field if primary is empty
+    type?: string;      // Data type for the column
+    default?: any;      // Default value if field is undefined
+}
+```
+
+### Field Path Notation
+- Uses dot notation to access nested properties
+- Example: `properties.title` accesses title in properties object
+- Special path "." returns the entire object
+- Supports fallback fields with the `fallback` property
+- Nested paths: `user.profile.name`
+- Array access: `items.0.name`
+
+### Available Column Types
+Complete list of supported types:
+
+1. **string** - Text display
+2. **number** - Numeric display
+3. **date** - Date/time display
+4. **objectLink** - Clickable object reference
+5. **typeLink** - Type reference display
+
+### Column Types and Renderers
+Built-in renderers with parameters:
+
+1. **string**
+   - `slice`: Take substring from index
+   - `max_length`: Maximum string length
+   - `upper`: Convert to uppercase
+   - `lower`: Convert to lowercase
+   - `capitalize`: Capitalize first letter
+   - `ellipsis`: Add ... at end
+
+2. **number**
+   - `currency`: Format as currency (e.g., USD)
+   - `decimals`: Number of decimal places (default: 2)
+
+3. **objectLink**
+   - `title`: Property to use as title (default: "title")
+   - `underline`: Link underline style (default: "hover")
+
+4. **date**
+   - `localized`: Use localized format (e.g., "LLL")
+   - `relative`: Use relative time ("fromNow"/"toNow")
+
+### Parameter Syntax
+Parameters are added using URL query string syntax:
+```typescript
+"type": "string?max_length=50&ellipsis"
+"type": "number?currency=USD&decimals=2"
+"type": "date?relative=fromNow"
+```
+
+## Layout Configuration Examples
+
+### Basic Table Layout
+```json
+{
+  "layout": [
+    {
+      "name": "Title",
+      "field": "properties.title",
+      "fallback": "name",
+      "type": "string"
+    },
+    {
+      "name": "Created",
+      "field": "created_at",
+      "type": "date?relative=fromNow"
+    }
+  ]
+}
+```
+
+### Complex Table Layout
+```json
+{
+  "layout": [
+    {
+      "name": "ID",
+      "field": "id",
+      "type": "string?slice=-7"
+    },
+    {
+      "name": "Name",
+      "field": ".",
+      "type": "objectLink?title=name&underline=always"
+    },
+    {
+      "name": "Price",
+      "field": "price",
+      "type": "number?currency=USD&decimals=2",
+      "default": 0
+    },
+    {
+      "name": "Status",
+      "field": "status",
+      "type": "string?upper=true"
+    },
+    {
+      "name": "Last Update",
+      "field": "updated_at",
+      "type": "date?localized=LLL"
+    }
+  ]
+}
+```
+
+### Search Results Layout
+```json
+{
+  "layout": [
+    {
+      "name": "Document",
+      "field": ".",
+      "type": "objectLink"
+    },
+    {
+      "name": "Score",
+      "field": "score",
+      "type": "number?decimals=3"
+    },
+    {
+      "name": "Type",
+      "field": "type",
+      "type": "typeLink"
+    }
+  ]
+}
+```
+
+## Common Error Cases
+
+### Field Path Errors
+- Invalid path: Using undefined nested properties
+- Wrong case: Property names are case-sensitive
+- Missing fallback: No fallback for potentially undefined fields
+
+### Type Parameter Errors
+- Invalid parameter names: Using undefined parameters
+- Wrong parameter values: Using incorrect value types
+- Missing required parameters: Not providing required parameters
+
+### Best Practices to Avoid Errors
+- Always validate field paths exist in your data
+- Provide fallbacks for optional fields
+- Use type parameters appropriately
+- Test layouts with empty/null data
+- Verify parameter values are correct
+
+## Grid Layout System
+
+### Document Grid Layout
+- Supports responsive grid layouts
+- Default configuration: `lg:grid-cols-6`
+- Handles document icons and empty states
+- Supports drag and drop functionality
+
+### Grid Layout Features
+- Responsive column sizing
+- Empty state handling
+- Loading states
+- Drag and drop file upload
+- Type selection modal integration
+
+## Best Practices
+
+### Column Definition
+- Always provide a name for clarity
+- Use fallbacks for critical fields
+- Specify type when needed for formatting
+- Keep field paths simple and clear
+- Use type parameters for fine-grained control
+
+### Layout Implementation
+- Use consistent naming conventions
+- Implement proper loading states
+- Handle empty states gracefully
+- Support responsive layouts
+- Consider selection requirements
+
+### Data Access
+- Use dot notation for nested data
+- Provide fallback values
+- Handle missing data gracefully
+- Support type-safe access
+- Use default values where appropriate
+
+## Validation Rules
+
+### Field Names
+- Must be valid JavaScript property names
+- Case-sensitive
+- No spaces or special characters (except dots)
+
+### Type Names
+- Must be one of the defined types
+- Case-sensitive
+- Parameters must be valid for the type
+
+### Parameter Values
+- Must match expected types
+- Numbers must be valid numbers
+- Booleans must be "true" or "false"
+- Strings must be properly escaped
+
+## Integration Points
+
+### With Search Results
+- Used in SearchResults component
+- Supports filtering and sorting
+- Handles pagination
+- Supports custom layouts
+
+### With Document Display
+- Used in DocumentGridLayout
+- Supports document icons
+- Handles file uploads
+- Manages type selection
+
+### With Selection System
+- Supports single/multi select
+- Range selection with shift-click
+- Selection persistence
+- Selection change callbacks

package/src/features/store/objects/layout/renderers.tsx

@@ -0,0 +1,139 @@
+import { NavLink } from "@vertesia/ui/router";
+import dayjs from "dayjs";
+import LocalizedFormat from "dayjs/plugin/localizedFormat";
+import RelativeTime from "dayjs/plugin/relativeTime";
+import { shortId } from "../../../utils";
+dayjs.extend(RelativeTime);
+dayjs.extend(LocalizedFormat);
+
+const renderers: Record<string, (params?: URLSearchParams) => (value: any, index: number) => React.ReactNode> = {
+    string(params?: URLSearchParams) {
+        let transforms: ((value: string) => string)[] = [];
+        if (params) {
+            const slice = params.get("slice");
+            if (slice) {
+                transforms.push((value: string) => value.slice(parseInt(slice)));
+            }
+            const max_length = params.get("max_length");
+            if (max_length) {
+                transforms.push((value: string) => value.slice(0, parseInt(max_length)));
+            }
+            if (params.has("upper")) {
+                transforms.push((value: string) => value.toUpperCase());
+            }
+            if (params.has("lower")) {
+                transforms.push((value: string) => value.toLowerCase());
+            }
+            if (params.has("capitalize")) {
+                transforms.push((value: string) => value[0].toUpperCase() + value.substring(1));
+            }
+            if (params.has("ellipsis")) {
+                transforms.push((value: string) => value + "...");
+            }
+        }
+        return (value: any, index: number) => {
+            let v: string;
+            if (value) {
+                v = String(value);
+                if (transforms.length > 0) {
+                    for (const t of transforms) {
+                        v = t(v);
+                    }
+                }
+            } else {
+                v = "";
+            }
+
+            return <td key={index}>{v}</td>;
+        };
+    },
+
+    fileSize(_params?: URLSearchParams) {
+        return (value: any, index: number) => {
+            let fileSize = "";
+            if (value) {
+                const bytes = Number(value);
+                if (!isNaN(bytes)) {
+                    const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+                    if (bytes === 0) {
+                        fileSize = "0 Bytes";
+                    } else {
+                        const i = Math.floor(Math.log(bytes) / Math.log(1024));
+                        fileSize = `${(bytes / Math.pow(1024, i)).toFixed(2)} ${sizes[i]}`;
+                    }
+                } else {
+                    fileSize = String(value);
+                }
+            }
+            return <td key={index}>{fileSize}</td>;
+        };
+    },
+
+    number(params?: URLSearchParams) {
+        let currency: string | undefined;
+        let decimals: string | undefined;
+        if (params) {
+            currency = params.get("currency") || undefined;
+            decimals = params.get("decimals") || undefined;
+        }
+
+        const digits = decimals ? parseInt(decimals) : 2;
+
+        return (value: any, index: number) => {
+            let v = new Intl.NumberFormat("en-US", {
+                style: currency ? "currency" : "decimal",
+                currency,
+                maximumFractionDigits: digits,
+            }).format(value);
+            return <td key={index}>{v}</td>;
+        };
+    },
+    // value must be the object itself
+    objectLink(params?: URLSearchParams) {
+        let title = "title";
+        //let underline = "hover";
+        if (params) {
+            title = params.get("title") || "title";
+            //underline = params.get("underline") || "hover";
+        }
+        return (value: any, index: number) => {
+            return (
+                <td key={index}>
+                    <NavLink
+                        topLevelNav
+                        className="underline text-indigo-800 dark:text-indigo-300"
+                        href={`/store/objects/${value.id}`}
+                    >
+                        {value.properties?.[title] || value.name || shortId(value.id)}
+                    </NavLink>
+                </td>
+            );
+        };
+    },
+    typeLink(_params?: URLSearchParams) {
+        return (value: any, index: number) => {
+            return <td key={index}>{value?.name || "n/a"}</td>;
+        };
+    },
+    date(params?: URLSearchParams) {
+        let method = "format";
+        let arg: string | undefined = "LLL";
+        if (params) {
+            const localized = params.get("localized");
+            if (localized) {
+                arg = localized;
+            } else {
+                const relative = params.get("relative");
+                if (relative) {
+                    method = relative; // fromNow or toNow
+                    arg = undefined;
+                }
+            }
+        }
+        return (value: any, index: number) => {
+            return <td key={index}>{(dayjs(value) as any)[method](arg)}</td>;
+        };
+    },
+};
+
+export default renderers;