helix-lang 11.0.0

package/library/data-table/components/table/DataTable.tsx

@@ -0,0 +1,318 @@
+'use client';
+
+import { useState, useMemo, useCallback } from 'react';
+import SearchFilter from './SearchFilter';
+import ColumnToggle from './ColumnToggle';
+import ExportCSV from './ExportCSV';
+import BulkActions from './BulkActions';
+
+export interface Column<T> {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    render?: (value: unknown, row: T) => React.ReactNode;
+}
+
+interface DataTableProps<T extends Record<string, unknown>> {
+    data: T[];
+    columns: Column<T>[];
+    pageSize?: number;
+    searchable?: boolean;
+    exportable?: boolean;
+    selectable?: boolean;
+    onBulkDelete?: (ids: string[]) => void;
+    rowKey?: string;
+    exportFilename?: string;
+}
+
+type SortDirection = 'asc' | 'desc' | null;
+
+export default function DataTable<T extends Record<string, unknown>>({
+    data,
+    columns,
+    pageSize = 10,
+    searchable = true,
+    exportable = true,
+    selectable = true,
+    onBulkDelete,
+    rowKey = 'id',
+    exportFilename = 'data',
+}: DataTableProps<T>) {
+    const [search, setSearch] = useState('');
+    const [sortKey, setSortKey] = useState<string | null>(null);
+    const [sortDir, setSortDir] = useState<SortDirection>(null);
+    const [page, setPage] = useState(0);
+    const [visibleCols, setVisibleCols] = useState<Set<string>>(
+        () => new Set(columns.map((c) => c.key))
+    );
+    const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set());
+
+    // Filter
+    const filtered = useMemo(() => {
+        if (!search.trim()) return data;
+        const q = search.toLowerCase();
+        return data.filter((row) =>
+            columns.some((col) => {
+                const val = row[col.key];
+                return val !== null && val !== undefined && String(val).toLowerCase().includes(q);
+            })
+        );
+    }, [data, search, columns]);
+
+    // Sort
+    const sorted = useMemo(() => {
+        if (!sortKey || !sortDir) return filtered;
+        return [...filtered].sort((a, b) => {
+            const aVal = a[sortKey];
+            const bVal = b[sortKey];
+            if (aVal === bVal) return 0;
+            if (aVal === null || aVal === undefined) return 1;
+            if (bVal === null || bVal === undefined) return -1;
+            const cmp = String(aVal).localeCompare(String(bVal), undefined, { numeric: true });
+            return sortDir === 'asc' ? cmp : -cmp;
+        });
+    }, [filtered, sortKey, sortDir]);
+
+    // Paginate
+    const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));
+    const currentPage = Math.min(page, totalPages - 1);
+    const paginated = sorted.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
+
+    const activeColumns = columns.filter((c) => visibleCols.has(c.key));
+
+    const handleSort = useCallback(
+        (key: string) => {
+            if (sortKey === key) {
+                if (sortDir === 'asc') setSortDir('desc');
+                else if (sortDir === 'desc') {
+                    setSortKey(null);
+                    setSortDir(null);
+                }
+            } else {
+                setSortKey(key);
+                setSortDir('asc');
+            }
+            setPage(0);
+        },
+        [sortKey, sortDir]
+    );
+
+    const toggleRow = (id: string) => {
+        setSelectedRows((prev) => {
+            const next = new Set(prev);
+            if (next.has(id)) next.delete(id);
+            else next.add(id);
+            return next;
+        });
+    };
+
+    const selectAll = () => {
+        setSelectedRows(new Set(sorted.map((r) => String(r[rowKey]))));
+    };
+
+    const deselectAll = () => {
+        setSelectedRows(new Set());
+    };
+
+    const handleBulkDelete = () => {
+        if (onBulkDelete) {
+            onBulkDelete(Array.from(selectedRows));
+            setSelectedRows(new Set());
+        }
+    };
+
+    const toggleColumn = (key: string) => {
+        setVisibleCols((prev) => {
+            const next = new Set(prev);
+            if (next.has(key) && next.size > 1) next.delete(key);
+            else next.add(key);
+            return next;
+        });
+    };
+
+    return (
+        <div className="backdrop-blur-xl bg-white/5 border border-white/10 rounded-2xl overflow-hidden">
+            {/* Toolbar */}
+            <div className="p-4 border-b border-white/5 flex flex-col sm:flex-row gap-3">
+                {searchable && (
+                    <div className="flex-1 max-w-sm">
+                        <SearchFilter
+                            value={search}
+                            onChange={(v) => {
+                                setSearch(v);
+                                setPage(0);
+                            }}
+                        />
+                    </div>
+                )}
+                <div className="flex items-center gap-2 ml-auto">
+                    <ColumnToggle
+                        columns={columns}
+                        visibleColumns={visibleCols}
+                        onToggle={toggleColumn}
+                    />
+                    {exportable && (
+                        <ExportCSV
+                            data={sorted as Record<string, unknown>[]}
+                            columns={activeColumns}
+                            filename={exportFilename}
+                        />
+                    )}
+                </div>
+            </div>
+
+            {/* Bulk actions */}
+            {selectable && selectedRows.size > 0 && (
+                <div className="px-4 pt-3">
+                    <BulkActions
+                        selectedCount={selectedRows.size}
+                        totalCount={sorted.length}
+                        onSelectAll={selectAll}
+                        onDeselectAll={deselectAll}
+                        onDeleteSelected={handleBulkDelete}
+                        allSelected={selectedRows.size === sorted.length}
+                    />
+                </div>
+            )}
+
+            {/* Table */}
+            <div className="overflow-x-auto">
+                <table className="w-full">
+                    <thead>
+                        <tr className="border-b border-white/5">
+                            {selectable && (
+                                <th className="w-12 px-4 py-3">
+                                    <input
+                                        type="checkbox"
+                                        checked={paginated.length > 0 && paginated.every((r) => selectedRows.has(String(r[rowKey])))}
+                                        onChange={() => {
+                                            const pageIds = paginated.map((r) => String(r[rowKey]));
+                                            const allChecked = pageIds.every((id) => selectedRows.has(id));
+                                            setSelectedRows((prev) => {
+                                                const next = new Set(prev);
+                                                pageIds.forEach((id) => {
+                                                    if (allChecked) next.delete(id);
+                                                    else next.add(id);
+                                                });
+                                                return next;
+                                            });
+                                        }}
+                                        className="w-4 h-4 rounded border-white/20 bg-white/5 text-cyan-500 focus:ring-cyan-500/50 focus:ring-offset-0"
+                                    />
+                                </th>
+                            )}
+                            {activeColumns.map((col) => (
+                                <th
+                                    key={col.key}
+                                    className="px-4 py-3 text-left text-xs font-medium text-white/40 uppercase tracking-wider"
+                                >
+                                    {col.sortable !== false ? (
+                                        <button
+                                            onClick={() => handleSort(col.key)}
+                                            className="flex items-center gap-1 hover:text-white/70 transition-colors"
+                                        >
+                                            {col.label}
+                                            <span className="text-[10px]">
+                                                {sortKey === col.key
+                                                    ? sortDir === 'asc'
+                                                        ? '\u25B2'
+                                                        : '\u25BC'
+                                                    : '\u25B4\u25BE'}
+                                            </span>
+                                        </button>
+                                    ) : (
+                                        col.label
+                                    )}
+                                </th>
+                            ))}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {paginated.length === 0 ? (
+                            <tr>
+                                <td
+                                    colSpan={activeColumns.length + (selectable ? 1 : 0)}
+                                    className="px-4 py-12 text-center text-white/30 text-sm"
+                                >
+                                    No results found
+                                </td>
+                            </tr>
+                        ) : (
+                            paginated.map((row, idx) => {
+                                const id = String(row[rowKey]);
+                                const isSelected = selectedRows.has(id);
+                                return (
+                                    <tr
+                                        key={id || idx}
+                                        className={`border-b border-white/5 hover:bg-white/[0.03] transition-colors ${
+                                            isSelected ? 'bg-cyan-500/5' : ''
+                                        }`}
+                                    >
+                                        {selectable && (
+                                            <td className="px-4 py-3">
+                                                <input
+                                                    type="checkbox"
+                                                    checked={isSelected}
+                                                    onChange={() => toggleRow(id)}
+                                                    className="w-4 h-4 rounded border-white/20 bg-white/5 text-cyan-500 focus:ring-cyan-500/50 focus:ring-offset-0"
+                                                />
+                                            </td>
+                                        )}
+                                        {activeColumns.map((col) => (
+                                            <td key={col.key} className="px-4 py-3 text-sm text-white/70">
+                                                {col.render
+                                                    ? col.render(row[col.key], row)
+                                                    : String(row[col.key] ?? '')}
+                                            </td>
+                                        ))}
+                                    </tr>
+                                );
+                            })
+                        )}
+                    </tbody>
+                </table>
+            </div>
+
+            {/* Pagination */}
+            <div className="px-4 py-3 border-t border-white/5 flex items-center justify-between">
+                <p className="text-sm text-white/40">
+                    Showing {currentPage * pageSize + 1} to{' '}
+                    {Math.min((currentPage + 1) * pageSize, sorted.length)} of {sorted.length} results
+                </p>
+                <div className="flex items-center gap-1">
+                    <button
+                        onClick={() => setPage(0)}
+                        disabled={currentPage === 0}
+                        className="px-2 py-1 text-sm text-white/50 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+                    >
+                        First
+                    </button>
+                    <button
+                        onClick={() => setPage((p) => Math.max(0, p - 1))}
+                        disabled={currentPage === 0}
+                        className="px-3 py-1.5 bg-white/5 border border-white/10 rounded text-sm text-white/70 hover:bg-white/10 disabled:opacity-30 disabled:cursor-not-allowed transition-all"
+                    >
+                        Prev
+                    </button>
+                    <span className="px-3 py-1.5 text-sm text-white/50">
+                        {currentPage + 1} / {totalPages}
+                    </span>
+                    <button
+                        onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
+                        disabled={currentPage >= totalPages - 1}
+                        className="px-3 py-1.5 bg-white/5 border border-white/10 rounded text-sm text-white/70 hover:bg-white/10 disabled:opacity-30 disabled:cursor-not-allowed transition-all"
+                    >
+                        Next
+                    </button>
+                    <button
+                        onClick={() => setPage(totalPages - 1)}
+                        disabled={currentPage >= totalPages - 1}
+                        className="px-2 py-1 text-sm text-white/50 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+                    >
+                        Last
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}

package/library/data-table/components/table/ExportCSV.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+interface ExportCSVProps<T extends Record<string, unknown>> {
+    data: T[];
+    columns: { key: string; label: string }[];
+    filename?: string;
+}
+
+function escapeCSVField(value: unknown): string {
+    const str = String(value ?? '');
+    if (str.includes(',') || str.includes('"') || str.includes('\n')) {
+        return `"${str.replace(/"/g, '""')}"`;
+    }
+    return str;
+}
+
+export default function ExportCSV<T extends Record<string, unknown>>({
+    data,
+    columns,
+    filename = 'export',
+}: ExportCSVProps<T>) {
+    const handleExport = () => {
+        const header = columns.map((col) => escapeCSVField(col.label)).join(',');
+        const rows = data.map((row) =>
+            columns.map((col) => escapeCSVField(row[col.key])).join(',')
+        );
+        const csv = [header, ...rows].join('\n');
+
+        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `${filename}-${new Date().toISOString().slice(0, 10)}.csv`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+    };
+
+    return (
+        <button
+            onClick={handleExport}
+            disabled={data.length === 0}
+            className="flex items-center gap-2 px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-sm text-white/70 hover:bg-white/10 hover:text-white disabled:opacity-40 disabled:cursor-not-allowed transition-all"
+        >
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+            </svg>
+            Export CSV
+        </button>
+    );
+}

package/library/data-table/components/table/SearchFilter.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+interface SearchFilterProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+}
+
+export default function SearchFilter({
+    value,
+    onChange,
+    placeholder = 'Search...',
+}: SearchFilterProps) {
+    return (
+        <div className="relative">
+            <svg
+                className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-white/30"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+            >
+                <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                />
+            </svg>
+            <input
+                type="text"
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                placeholder={placeholder}
+                className="w-full pl-10 pr-4 py-2 bg-white/5 border border-white/10 rounded-lg text-white text-sm placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500/50 transition-all"
+            />
+            {value && (
+                <button
+                    onClick={() => onChange('')}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-white/30 hover:text-white/60 transition-colors"
+                >
+                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            )}
+        </div>
+    );
+}

package/library/data-table/manifest.json

@@ -0,0 +1,20 @@
+{
+    "name": "data-table",
+    "version": "1.0.0",
+    "description": "Full-featured data table with sorting, pagination, search, column visibility, CSV export, and bulk actions",
+    "author": "AD AI Engine",
+    "category": "data",
+    "dependencies": [],
+    "files": {
+        "components": [
+            "components/table/DataTable.tsx",
+            "components/table/SearchFilter.tsx",
+            "components/table/ColumnToggle.tsx",
+            "components/table/ExportCSV.tsx",
+            "components/table/BulkActions.tsx"
+        ],
+        "api": []
+    },
+    "schema": null,
+    "instructions": "1. Import DataTable and pass your columns and data\n2. DataTable integrates SearchFilter, ColumnToggle, ExportCSV, and BulkActions automatically\n3. Define columns with { key, label, sortable?, render? }\n4. Provide onBulkDelete callback for bulk delete functionality"
+}

package/library/file-upload/app/api/upload/route.ts

@@ -0,0 +1,107 @@
+import { NextRequest, NextResponse } from 'next/server';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as crypto from 'crypto';
+
+const UPLOAD_DIR = path.join(process.cwd(), 'public', 'uploads');
+const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+const ALLOWED_TYPES = new Set([
+    'image/jpeg',
+    'image/png',
+    'image/gif',
+    'image/webp',
+    'application/pdf',
+    'text/csv',
+]);
+
+function ensureUploadDir() {
+    if (!fs.existsSync(UPLOAD_DIR)) {
+        fs.mkdirSync(UPLOAD_DIR, { recursive: true });
+    }
+}
+
+export async function POST(request: NextRequest) {
+    try {
+        const formData = await request.formData();
+        const file = formData.get('file');
+
+        if (!file || !(file instanceof Blob)) {
+            return NextResponse.json(
+                { error: 'No file provided' },
+                { status: 400 }
+            );
+        }
+
+        // Validate size
+        if (file.size > MAX_FILE_SIZE) {
+            return NextResponse.json(
+                { error: `File too large. Maximum size: ${MAX_FILE_SIZE / 1024 / 1024}MB` },
+                { status: 400 }
+            );
+        }
+
+        // Validate type
+        if (ALLOWED_TYPES.size > 0 && !ALLOWED_TYPES.has(file.type)) {
+            return NextResponse.json(
+                { error: `File type ${file.type} is not allowed` },
+                { status: 400 }
+            );
+        }
+
+        ensureUploadDir();
+
+        // Generate safe filename
+        const originalName = file instanceof File ? file.name : 'upload';
+        const ext = path.extname(originalName);
+        const hash = crypto.randomUUID().replace(/-/g, '').slice(0, 16);
+        const filename = `${Date.now()}-${hash}${ext}`;
+        const filePath = path.join(UPLOAD_DIR, filename);
+
+        // Write file
+        const buffer = Buffer.from(await file.arrayBuffer());
+        await fs.promises.writeFile(filePath, buffer);
+
+        return NextResponse.json({
+            message: 'File uploaded successfully',
+            filename,
+            originalName,
+            size: file.size,
+            type: file.type,
+            url: `/uploads/${filename}`,
+        });
+    } catch (error: unknown) {
+        const message = error instanceof Error ? error.message : 'Upload failed';
+        return NextResponse.json({ error: message }, { status: 500 });
+    }
+}
+
+export async function DELETE(request: NextRequest) {
+    try {
+        const { filename } = await request.json();
+
+        if (!filename || typeof filename !== 'string') {
+            return NextResponse.json(
+                { error: 'Filename is required' },
+                { status: 400 }
+            );
+        }
+
+        // Prevent path traversal
+        const safeName = path.basename(filename);
+        const filePath = path.join(UPLOAD_DIR, safeName);
+
+        if (!fs.existsSync(filePath)) {
+            return NextResponse.json(
+                { error: 'File not found' },
+                { status: 404 }
+            );
+        }
+
+        await fs.promises.unlink(filePath);
+
+        return NextResponse.json({ message: 'File deleted successfully' });
+    } catch (error: unknown) {
+        const message = error instanceof Error ? error.message : 'Delete failed';
+        return NextResponse.json({ error: message }, { status: 500 });
+    }
+}