@varity-labs/sdk 2.0.0-alpha.1

package/dist/ui/components/ChartWidget.js

@@ -0,0 +1,82 @@
+/**
+ * Chart Widget Component
+ *
+ * Universal chart component supporting multiple chart types
+ */
+import React from 'react';
+import { Card, CardContent, Typography, Box, Skeleton } from '@mui/material';
+import { LineChart, Line, BarChart, Bar, AreaChart, Area, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+const DEFAULT_COLORS = [
+    '#1976d2', // blue
+    '#2e7d32', // green
+    '#ed6c02', // orange
+    '#d32f2f', // red
+    '#9c27b0', // purple
+    '#0288d1', // light blue
+    '#f57c00', // deep orange
+    '#c2185b' // pink
+];
+export const ChartWidget = ({ title, type, data, xKey = 'name', yKeys, labels = {}, loading = false, height = 300, colors = DEFAULT_COLORS, showLegend = true, showGrid = true }) => {
+    if (loading) {
+        return (React.createElement(Card, null,
+            React.createElement(CardContent, null,
+                React.createElement(Typography, { variant: "h6", gutterBottom: true }, title),
+                React.createElement(Skeleton, { variant: "rectangular", height: height }))));
+    }
+    if (!data || data.length === 0) {
+        return (React.createElement(Card, null,
+            React.createElement(CardContent, null,
+                React.createElement(Typography, { variant: "h6", gutterBottom: true }, title),
+                React.createElement(Box, { sx: {
+                        height,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        color: 'text.secondary'
+                    } },
+                    React.createElement(Typography, null, "No data available")))));
+    }
+    const renderChart = () => {
+        switch (type) {
+            case 'line':
+                return (React.createElement(LineChart, { data: data },
+                    showGrid && React.createElement(CartesianGrid, { strokeDasharray: "3 3" }),
+                    React.createElement(XAxis, { dataKey: xKey }),
+                    React.createElement(YAxis, null),
+                    React.createElement(Tooltip, null),
+                    showLegend && React.createElement(Legend, null),
+                    yKeys.map((key, index) => (React.createElement(Line, { key: key, type: "monotone", dataKey: key, stroke: colors[index % colors.length], strokeWidth: 2, dot: { r: 4 }, activeDot: { r: 6 }, name: labels[key] || key })))));
+            case 'bar':
+                return (React.createElement(BarChart, { data: data },
+                    showGrid && React.createElement(CartesianGrid, { strokeDasharray: "3 3" }),
+                    React.createElement(XAxis, { dataKey: xKey }),
+                    React.createElement(YAxis, null),
+                    React.createElement(Tooltip, null),
+                    showLegend && React.createElement(Legend, null),
+                    yKeys.map((key, index) => (React.createElement(Bar, { key: key, dataKey: key, fill: colors[index % colors.length], name: labels[key] || key })))));
+            case 'area':
+                return (React.createElement(AreaChart, { data: data },
+                    showGrid && React.createElement(CartesianGrid, { strokeDasharray: "3 3" }),
+                    React.createElement(XAxis, { dataKey: xKey }),
+                    React.createElement(YAxis, null),
+                    React.createElement(Tooltip, null),
+                    showLegend && React.createElement(Legend, null),
+                    yKeys.map((key, index) => (React.createElement(Area, { key: key, type: "monotone", dataKey: key, stroke: colors[index % colors.length], fill: colors[index % colors.length], fillOpacity: 0.6, name: labels[key] || key })))));
+            case 'pie':
+                // For pie chart, use first yKey
+                const pieDataKey = yKeys[0];
+                return (React.createElement(PieChart, null,
+                    React.createElement(Pie, { data: data, dataKey: pieDataKey, nameKey: xKey, cx: "50%", cy: "50%", outerRadius: 80, label: true }, data.map((_, index) => (React.createElement(Cell, { key: `cell-${index}`, fill: colors[index % colors.length] })))),
+                    React.createElement(Tooltip, null),
+                    showLegend && React.createElement(Legend, null)));
+            default:
+                return React.createElement("div", null,
+                    "Unsupported chart type: ",
+                    type);
+        }
+    };
+    return (React.createElement(Card, null,
+        React.createElement(CardContent, null,
+            React.createElement(Typography, { variant: "h6", gutterBottom: true, sx: { mb: 2 } }, title),
+            React.createElement(ResponsiveContainer, { width: "100%", height: height }, renderChart()))));
+};

package/dist/ui/components/DashboardLayout.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Dashboard Layout Component
+ *
+ * Responsive dashboard layout with sidebar and header
+ */
+import React from 'react';
+export interface NavigationItem {
+    /** Item label */
+    label: string;
+    /** Item icon */
+    icon?: React.ReactNode;
+    /** Click handler */
+    onClick: () => void;
+    /** Active state */
+    active?: boolean;
+}
+export interface DashboardLayoutProps {
+    /** Dashboard title */
+    title: string;
+    /** Navigation items */
+    navigation: NavigationItem[];
+    /** Children content */
+    children: React.ReactNode;
+    /** User info */
+    user?: {
+        name: string;
+        address: string;
+        avatar?: string;
+    };
+    /** User menu items */
+    userMenuItems?: Array<{
+        label: string;
+        onClick: () => void;
+    }>;
+    /** Logo */
+    logo?: React.ReactNode;
+    /** Drawer width */
+    drawerWidth?: number;
+}
+export declare const DashboardLayout: React.FC<DashboardLayoutProps>;
+//# sourceMappingURL=DashboardLayout.d.ts.map

package/dist/ui/components/DashboardLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardLayout.d.ts","sourceRoot":"","sources":["../../../src/ui/components/DashboardLayout.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAA;AA2BvC,MAAM,WAAW,cAAc;IAC7B,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,gBAAgB;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,oBAAoB;IACpB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,mBAAmB;IACnB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,oBAAoB;IACnC,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,uBAAuB;IACvB,UAAU,EAAE,cAAc,EAAE,CAAA;IAC5B,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,gBAAgB;IAChB,IAAI,CAAC,EAAE;QACL,IAAI,EAAE,MAAM,CAAA;QACZ,OAAO,EAAE,MAAM,CAAA;QACf,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,CAAA;IACD,sBAAsB;IACtB,aAAa,CAAC,EAAE,KAAK,CAAC;QACpB,KAAK,EAAE,MAAM,CAAA;QACb,OAAO,EAAE,MAAM,IAAI,CAAA;KACpB,CAAC,CAAA;IACF,WAAW;IACX,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAgM1D,CAAA"}

package/dist/ui/components/DashboardLayout.js

@@ -0,0 +1,102 @@
+/**
+ * Dashboard Layout Component
+ *
+ * Responsive dashboard layout with sidebar and header
+ */
+import React, { useState } from 'react';
+import { Box, Drawer, AppBar, Toolbar, Typography, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Divider, useTheme, useMediaQuery, Avatar, Menu, MenuItem } from '@mui/material';
+import { Menu as MenuIcon, ChevronLeft as ChevronLeftIcon, Dashboard as DashboardIcon, AccountCircle as AccountIcon } from '@mui/icons-material';
+export const DashboardLayout = ({ title, navigation, children, user, userMenuItems = [], logo, drawerWidth = 240 }) => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const [open, setOpen] = useState(!isMobile);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const handleDrawerToggle = () => {
+        setOpen(!open);
+    };
+    const handleUserMenuOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleUserMenuClose = () => {
+        setAnchorEl(null);
+    };
+    const drawer = (React.createElement(Box, null,
+        React.createElement(Toolbar, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                px: [1]
+            } },
+            logo || (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
+                React.createElement(DashboardIcon, { color: "primary" }),
+                React.createElement(Typography, { variant: "h6", noWrap: true, component: "div", color: "primary" }, title))),
+            isMobile && (React.createElement(IconButton, { onClick: handleDrawerToggle },
+                React.createElement(ChevronLeftIcon, null)))),
+        React.createElement(Divider, null),
+        React.createElement(List, null, navigation.map((item, index) => (React.createElement(ListItem, { key: index, disablePadding: true },
+            React.createElement(ListItemButton, { onClick: item.onClick, selected: item.active, sx: {
+                    '&.Mui-selected': {
+                        backgroundColor: 'primary.light',
+                        '&:hover': {
+                            backgroundColor: 'primary.light'
+                        }
+                    }
+                } },
+                item.icon && React.createElement(ListItemIcon, null, item.icon),
+                React.createElement(ListItemText, { primary: item.label }))))))));
+    return (React.createElement(Box, { sx: { display: 'flex', minHeight: '100vh' } },
+        React.createElement(AppBar, { position: "fixed", sx: {
+                width: { md: `calc(100% - ${open ? drawerWidth : 0}px)` },
+                ml: { md: `${open ? drawerWidth : 0}px` },
+                transition: theme.transitions.create(['margin', 'width'], {
+                    easing: theme.transitions.easing.sharp,
+                    duration: theme.transitions.duration.leavingScreen
+                })
+            } },
+            React.createElement(Toolbar, null,
+                React.createElement(IconButton, { color: "inherit", "aria-label": "open drawer", edge: "start", onClick: handleDrawerToggle, sx: { mr: 2 } },
+                    React.createElement(MenuIcon, null)),
+                React.createElement(Typography, { variant: "h6", noWrap: true, component: "div", sx: { flexGrow: 1 } }, title),
+                user && (React.createElement(React.Fragment, null,
+                    React.createElement(IconButton, { size: "large", "aria-label": "account of current user", "aria-controls": "menu-appbar", "aria-haspopup": "true", onClick: handleUserMenuOpen, color: "inherit" }, user.avatar ? (React.createElement(Avatar, { src: user.avatar, alt: user.name })) : (React.createElement(AccountIcon, null))),
+                    React.createElement(Menu, { id: "menu-appbar", anchorEl: anchorEl, anchorOrigin: {
+                            vertical: 'bottom',
+                            horizontal: 'right'
+                        }, keepMounted: true, transformOrigin: {
+                            vertical: 'top',
+                            horizontal: 'right'
+                        }, open: Boolean(anchorEl), onClose: handleUserMenuClose },
+                        React.createElement(MenuItem, { disabled: true },
+                            React.createElement(Typography, { variant: "body2", color: "text.secondary" }, user.name)),
+                        React.createElement(MenuItem, { disabled: true },
+                            React.createElement(Typography, { variant: "caption", color: "text.secondary" },
+                                user.address.slice(0, 6),
+                                "...",
+                                user.address.slice(-4))),
+                        React.createElement(Divider, null),
+                        userMenuItems.map((item, index) => (React.createElement(MenuItem, { key: index, onClick: () => {
+                                item.onClick();
+                                handleUserMenuClose();
+                            } }, item.label)))))))),
+        React.createElement(Drawer, { variant: isMobile ? 'temporary' : 'persistent', open: open, onClose: isMobile ? handleDrawerToggle : undefined, sx: {
+                width: drawerWidth,
+                flexShrink: 0,
+                '& .MuiDrawer-paper': {
+                    width: drawerWidth,
+                    boxSizing: 'border-box'
+                }
+            } }, drawer),
+        React.createElement(Box, { component: "main", sx: {
+                flexGrow: 1,
+                p: 3,
+                width: { md: `calc(100% - ${open ? drawerWidth : 0}px)` },
+                ml: { md: open ? 0 : `-${drawerWidth}px` },
+                transition: theme.transitions.create(['margin', 'width'], {
+                    easing: theme.transitions.easing.sharp,
+                    duration: theme.transitions.duration.leavingScreen
+                })
+            } },
+            React.createElement(Toolbar, null),
+            " ",
+            children)));
+};

package/dist/ui/components/DataTable.d.ts

@@ -0,0 +1,49 @@
+/**
+ * DataTable Component
+ *
+ * Universal data table with sorting, pagination, and actions
+ */
+import React from 'react';
+export interface Column {
+    /** Column identifier */
+    id: string;
+    /** Column label */
+    label: string;
+    /** Minimum width */
+    minWidth?: number;
+    /** Alignment */
+    align?: 'left' | 'right' | 'center';
+    /** Format function */
+    format?: (value: any) => React.ReactNode;
+    /** Sortable */
+    sortable?: boolean;
+}
+export interface DataTableProps {
+    /** Table columns */
+    columns: Column[];
+    /** Table data */
+    data: any[];
+    /** Loading state */
+    loading?: boolean;
+    /** Enable pagination */
+    pagination?: boolean;
+    /** Rows per page options */
+    rowsPerPageOptions?: number[];
+    /** Row actions */
+    actions?: {
+        onView?: (row: any) => void;
+        onEdit?: (row: any) => void;
+        onDelete?: (row: any) => void;
+        custom?: Array<{
+            icon: React.ReactNode;
+            label: string;
+            onClick: (row: any) => void;
+        }>;
+    };
+    /** Empty state message */
+    emptyMessage?: string;
+    /** Click handler for row */
+    onRowClick?: (row: any) => void;
+}
+export declare const DataTable: React.FC<DataTableProps>;
+//# sourceMappingURL=DataTable.d.ts.map

package/dist/ui/components/DataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/ui/components/DataTable.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAA;AAwBvC,MAAM,WAAW,MAAM;IACrB,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,oBAAoB;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;IACnC,sBAAsB;IACtB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,KAAK,CAAC,SAAS,CAAA;IACxC,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B,oBAAoB;IACpB,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,iBAAiB;IACjB,IAAI,EAAE,GAAG,EAAE,CAAA;IACX,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wBAAwB;IACxB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4BAA4B;IAC5B,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC7B,kBAAkB;IAClB,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;QAC3B,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;QAC3B,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;QAC7B,MAAM,CAAC,EAAE,KAAK,CAAC;YACb,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;YACrB,KAAK,EAAE,MAAM,CAAA;YACb,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;SAC5B,CAAC,CAAA;KACH,CAAA;IACD,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;CAChC;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA0N9C,CAAA"}

package/dist/ui/components/DataTable.js

@@ -0,0 +1,96 @@
+/**
+ * DataTable Component
+ *
+ * Universal data table with sorting, pagination, and actions
+ */
+import React, { useState } from 'react';
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TablePagination, TableSortLabel, Paper, IconButton, Box, Typography, Skeleton } from '@mui/material';
+import { Edit as EditIcon, Delete as DeleteIcon, Visibility as ViewIcon } from '@mui/icons-material';
+export const DataTable = ({ columns, data, loading = false, pagination = true, rowsPerPageOptions = [10, 25, 50, 100], actions, emptyMessage = 'No data available', onRowClick }) => {
+    const [page, setPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageOptions[0]);
+    const [orderBy, setOrderBy] = useState('');
+    const [order, setOrder] = useState('asc');
+    const handleChangePage = (_event, newPage) => {
+        setPage(newPage);
+    };
+    const handleChangeRowsPerPage = (event) => {
+        setRowsPerPage(parseInt(event.target.value, 10));
+        setPage(0);
+    };
+    const handleSort = (columnId) => {
+        const isAsc = orderBy === columnId && order === 'asc';
+        setOrder(isAsc ? 'desc' : 'asc');
+        setOrderBy(columnId);
+    };
+    const sortedData = React.useMemo(() => {
+        if (!orderBy)
+            return data;
+        return [...data].sort((a, b) => {
+            const aValue = a[orderBy];
+            const bValue = b[orderBy];
+            if (aValue === bValue)
+                return 0;
+            const comparison = aValue < bValue ? -1 : 1;
+            return order === 'asc' ? comparison : -comparison;
+        });
+    }, [data, order, orderBy]);
+    const paginatedData = pagination
+        ? sortedData.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+        : sortedData;
+    if (loading) {
+        return (React.createElement(TableContainer, { component: Paper },
+            React.createElement(Table, null,
+                React.createElement(TableHead, null,
+                    React.createElement(TableRow, null,
+                        columns.map((column) => (React.createElement(TableCell, { key: column.id, align: column.align || 'left' },
+                            React.createElement(Skeleton, { variant: "text" })))),
+                        actions && React.createElement(TableCell, null, "Actions"))),
+                React.createElement(TableBody, null, [...Array(5)].map((_, index) => (React.createElement(TableRow, { key: index },
+                    columns.map((column) => (React.createElement(TableCell, { key: column.id },
+                        React.createElement(Skeleton, { variant: "text" })))),
+                    actions && (React.createElement(TableCell, null,
+                        React.createElement(Skeleton, { variant: "circular", width: 32, height: 32 }))))))))));
+    }
+    if (data.length === 0) {
+        return (React.createElement(Paper, { sx: { p: 4, textAlign: 'center' } },
+            React.createElement(Typography, { variant: "body1", color: "text.secondary" }, emptyMessage)));
+    }
+    return (React.createElement(Paper, null,
+        React.createElement(TableContainer, null,
+            React.createElement(Table, { stickyHeader: true },
+                React.createElement(TableHead, null,
+                    React.createElement(TableRow, null,
+                        columns.map((column) => (React.createElement(TableCell, { key: column.id, align: column.align || 'left', style: { minWidth: column.minWidth } }, column.sortable !== false ? (React.createElement(TableSortLabel, { active: orderBy === column.id, direction: orderBy === column.id ? order : 'asc', onClick: () => handleSort(column.id) }, column.label)) : (column.label)))),
+                        actions && (React.createElement(TableCell, { align: "right", style: { minWidth: 120 } }, "Actions")))),
+                React.createElement(TableBody, null, paginatedData.map((row, index) => (React.createElement(TableRow, { hover: true, key: index, onClick: () => onRowClick?.(row), sx: {
+                        cursor: onRowClick ? 'pointer' : 'default',
+                        '&:last-child td, &:last-child th': { border: 0 }
+                    } },
+                    columns.map((column) => {
+                        const value = row[column.id];
+                        return (React.createElement(TableCell, { key: column.id, align: column.align || 'left' }, column.format ? column.format(value) : value));
+                    }),
+                    actions && (React.createElement(TableCell, { align: "right" },
+                        React.createElement(Box, { sx: { display: 'flex', gap: 0.5, justifyContent: 'flex-end' } },
+                            actions.onView && (React.createElement(IconButton, { size: "small", onClick: (e) => {
+                                    e.stopPropagation();
+                                    actions.onView(row);
+                                }, title: "View" },
+                                React.createElement(ViewIcon, { fontSize: "small" }))),
+                            actions.onEdit && (React.createElement(IconButton, { size: "small", onClick: (e) => {
+                                    e.stopPropagation();
+                                    actions.onEdit(row);
+                                }, title: "Edit" },
+                                React.createElement(EditIcon, { fontSize: "small" }))),
+                            actions.onDelete && (React.createElement(IconButton, { size: "small", color: "error", onClick: (e) => {
+                                    e.stopPropagation();
+                                    actions.onDelete(row);
+                                }, title: "Delete" },
+                                React.createElement(DeleteIcon, { fontSize: "small" }))),
+                            actions.custom?.map((action, idx) => (React.createElement(IconButton, { key: idx, size: "small", onClick: (e) => {
+                                    e.stopPropagation();
+                                    action.onClick(row);
+                                }, title: action.label }, action.icon)))))))))))),
+        pagination && (React.createElement(TablePagination, { rowsPerPageOptions: rowsPerPageOptions, component: "div", count: data.length, rowsPerPage: rowsPerPage, page: page, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage }))));
+};

package/dist/ui/components/EntityForm.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Entity Form Component
+ *
+ * Dynamic form generator based on entity field configuration
+ */
+import React from 'react';
+export interface FormField {
+    /** Field name/id */
+    name: string;
+    /** Field label */
+    label: string;
+    /** Field type - Universal support for all industries */
+    type: 'string' | 'number' | 'boolean' | 'enum' | 'array' | 'object' | 'currency' | 'decimal' | 'percentage' | 'date' | 'time' | 'datetime' | 'duration' | 'email' | 'phone' | 'url' | 'address' | 'ssn' | 'tax-id' | 'medical-code' | 'sku' | 'barcode' | 'rich-text' | 'markdown' | 'json' | 'file' | 'image' | 'document' | 'lookup' | 'multi-select' | 'coordinates' | 'color' | 'ip-address' | 'bytes' | 'bytes32';
+    /** Required field */
+    required?: boolean;
+    /** Help text */
+    helperText?: string;
+    /** Enum options (for enum/multi-select types) */
+    enumValues?: string[];
+    /** Validation rules */
+    validation?: {
+        min?: number;
+        max?: number;
+        minLength?: number;
+        maxLength?: number;
+        pattern?: string;
+        precision?: number;
+        fileTypes?: string[];
+        maxFileSize?: number;
+        custom?: (value: any) => string | null;
+    };
+    /** Default value */
+    defaultValue?: any;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+}
+export interface EntityFormProps {
+    /** Form fields */
+    fields: FormField[];
+    /** Form title */
+    title?: string;
+    /** Submit button text */
+    submitText?: string;
+    /** Cancel button text */
+    cancelText?: string;
+    /** Submit handler */
+    onSubmit: (data: Record<string, any>) => Promise<void> | void;
+    /** Cancel handler */
+    onCancel?: () => void;
+    /** Initial data (for edit mode) */
+    initialData?: Record<string, any>;
+    /** Loading state */
+    loading?: boolean;
+    /** Grid columns (2 or 1) */
+    columns?: 1 | 2;
+}
+export declare const EntityForm: React.FC<EntityFormProps>;
+//# sourceMappingURL=EntityForm.d.ts.map

package/dist/ui/components/EntityForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntityForm.d.ts","sourceRoot":"","sources":["../../../src/ui/components/EntityForm.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAA;AAoBvC,MAAM,WAAW,SAAS;IACxB,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,wDAAwD;IACxD,IAAI,EACA,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAC7D,UAAU,GAAG,SAAS,GAAG,YAAY,GACrC,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GACzC,OAAO,GAAG,OAAO,GAAG,KAAK,GACzB,SAAS,GACT,KAAK,GAAG,QAAQ,GAAG,cAAc,GAAG,KAAK,GAAG,SAAS,GACrD,WAAW,GAAG,UAAU,GAAG,MAAM,GACjC,MAAM,GAAG,OAAO,GAAG,UAAU,GAC7B,QAAQ,GAAG,cAAc,GAAG,aAAa,GAAG,OAAO,GAAG,YAAY,GAClE,OAAO,GAAG,SAAS,CAAA;IACvB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,uBAAuB;IACvB,UAAU,CAAC,EAAE;QACX,GAAG,CAAC,EAAE,MAAM,CAAA;QACZ,GAAG,CAAC,EAAE,MAAM,CAAA;QACZ,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;QACpB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,GAAG,IAAI,CAAA;KACvC,CAAA;IACD,oBAAoB;IACpB,YAAY,CAAC,EAAE,GAAG,CAAA;IAClB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B,kBAAkB;IAClB,MAAM,EAAE,SAAS,EAAE,CAAA;IACnB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,qBAAqB;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAC7D,qBAAqB;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACjC,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;CAChB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsXhD,CAAA"}

package/dist/ui/components/EntityForm.js

@@ -0,0 +1,182 @@
+/**
+ * Entity Form Component
+ *
+ * Dynamic form generator based on entity field configuration
+ */
+import React, { useState } from 'react';
+import { TextField, Select, MenuItem, FormControl, InputLabel, FormHelperText, Checkbox, FormControlLabel, Button, Box, Grid, Typography, Alert } from '@mui/material';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+export const EntityForm = ({ fields, title, submitText = 'Submit', cancelText = 'Cancel', onSubmit, onCancel, initialData = {}, loading = false, columns = 2 }) => {
+    const [formData, setFormData] = useState(fields.reduce((acc, field) => ({
+        ...acc,
+        [field.name]: initialData[field.name] ?? field.defaultValue ?? ''
+    }), {}));
+    const [errors, setErrors] = useState({});
+    const [submitError, setSubmitError] = useState('');
+    const validateField = (field, value) => {
+        if (field.required && !value) {
+            return `${field.label} is required`;
+        }
+        if (field.validation) {
+            const { min, max, pattern, custom } = field.validation;
+            if (field.type === 'number') {
+                const numValue = Number(value);
+                if (min !== undefined && numValue < min) {
+                    return `${field.label} must be at least ${min}`;
+                }
+                if (max !== undefined && numValue > max) {
+                    return `${field.label} must be at most ${max}`;
+                }
+            }
+            if (field.type === 'string' && pattern && value) {
+                const regex = new RegExp(pattern);
+                if (!regex.test(value)) {
+                    return `${field.label} format is invalid`;
+                }
+            }
+            if (custom) {
+                const customError = custom(value);
+                if (customError)
+                    return customError;
+            }
+        }
+        if (field.type === 'address' && value) {
+            const addressRegex = /^0x[a-fA-F0-9]{40}$/;
+            if (!addressRegex.test(value)) {
+                return 'Invalid Ethereum address';
+            }
+        }
+        return null;
+    };
+    const handleChange = (fieldName, value) => {
+        setFormData(prev => ({ ...prev, [fieldName]: value }));
+        // Clear error for this field
+        if (errors[fieldName]) {
+            setErrors(prev => {
+                const newErrors = { ...prev };
+                delete newErrors[fieldName];
+                return newErrors;
+            });
+        }
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setSubmitError('');
+        // Validate all fields
+        const newErrors = {};
+        fields.forEach(field => {
+            const error = validateField(field, formData[field.name]);
+            if (error) {
+                newErrors[field.name] = error;
+            }
+        });
+        if (Object.keys(newErrors).length > 0) {
+            setErrors(newErrors);
+            return;
+        }
+        try {
+            await onSubmit(formData);
+        }
+        catch (error) {
+            setSubmitError(error instanceof Error ? error.message : 'An error occurred');
+        }
+    };
+    const renderField = (field) => {
+        const value = formData[field.name] ?? '';
+        const error = errors[field.name];
+        // Get placeholder based on field type
+        const getPlaceholder = () => {
+            if (field.placeholder)
+                return field.placeholder;
+            switch (field.type) {
+                case 'address': return '0x...';
+                case 'email': return 'user@example.com';
+                case 'phone': return '+1 (555) 123-4567';
+                case 'url': return 'https://example.com';
+                case 'ssn': return '123-45-6789';
+                case 'tax-id': return '12-3456789';
+                case 'sku': return 'SKU-12345';
+                case 'ip-address': return '192.168.1.1';
+                case 'coordinates': return '40.7128, -74.0060';
+                default: return undefined;
+            }
+        };
+        // Text-based inputs (string and string-like types)
+        if (['string', 'address', 'bytes', 'bytes32', 'email', 'phone', 'url',
+            'ssn', 'tax-id', 'medical-code', 'sku', 'barcode', 'ip-address',
+            'coordinates', 'markdown', 'json'].includes(field.type)) {
+            return (React.createElement(TextField, { fullWidth: true, name: field.name, label: field.label, value: value, onChange: (e) => handleChange(field.name, e.target.value), required: field.required, error: !!error, helperText: error || field.helperText, disabled: field.disabled || loading, placeholder: getPlaceholder(), type: field.type === 'email' ? 'email' : field.type === 'url' ? 'url' : 'text' }));
+        }
+        // Multi-line text inputs
+        if (['rich-text', 'time', 'duration'].includes(field.type)) {
+            return (React.createElement(TextField, { fullWidth: true, multiline: true, rows: field.type === 'rich-text' ? 6 : 3, name: field.name, label: field.label, value: value, onChange: (e) => handleChange(field.name, e.target.value), required: field.required, error: !!error, helperText: error || field.helperText, disabled: field.disabled || loading }));
+        }
+        // Number-based inputs
+        if (['number', 'currency', 'decimal', 'percentage'].includes(field.type)) {
+            return (React.createElement(TextField, { fullWidth: true, type: "number", name: field.name, label: field.label, value: value, onChange: (e) => handleChange(field.name, e.target.value), required: field.required, error: !!error, helperText: error || field.helperText, disabled: field.disabled || loading, inputProps: {
+                    step: field.type === 'currency' ? '0.01' : field.type === 'decimal' ? '0.001' : '1',
+                    min: field.validation?.min,
+                    max: field.validation?.max
+                } }));
+        }
+        // Boolean checkbox
+        if (field.type === 'boolean') {
+            return (React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: !!value, onChange: (e) => handleChange(field.name, e.target.checked), disabled: field.disabled || loading }), label: field.label }));
+        }
+        // Enum/Select dropdown
+        if (field.type === 'enum') {
+            return (React.createElement(FormControl, { fullWidth: true, error: !!error, disabled: field.disabled || loading },
+                React.createElement(InputLabel, null, field.label),
+                React.createElement(Select, { value: value, label: field.label, onChange: (e) => handleChange(field.name, e.target.value), required: field.required }, field.enumValues?.map((option) => (React.createElement(MenuItem, { key: option, value: option }, option)))),
+                (error || field.helperText) && (React.createElement(FormHelperText, null, error || field.helperText))));
+        }
+        // Multi-select
+        if (field.type === 'multi-select') {
+            return (React.createElement(FormControl, { fullWidth: true, error: !!error, disabled: field.disabled || loading },
+                React.createElement(InputLabel, null, field.label),
+                React.createElement(Select, { multiple: true, value: Array.isArray(value) ? value : [], label: field.label, onChange: (e) => handleChange(field.name, e.target.value), required: field.required }, field.enumValues?.map((option) => (React.createElement(MenuItem, { key: option, value: option }, option)))),
+                (error || field.helperText) && (React.createElement(FormHelperText, null, error || field.helperText))));
+        }
+        // Date picker
+        if (['date', 'datetime'].includes(field.type)) {
+            return (React.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns },
+                React.createElement(DatePicker, { label: field.label, value: value ? new Date(value) : null, onChange: (date) => handleChange(field.name, date?.getTime()), disabled: field.disabled || loading, slotProps: {
+                        textField: {
+                            fullWidth: true,
+                            required: field.required,
+                            error: !!error,
+                            helperText: error || field.helperText
+                        }
+                    } })));
+        }
+        // Color picker
+        if (field.type === 'color') {
+            return (React.createElement(TextField, { fullWidth: true, type: "color", name: field.name, label: field.label, value: value, onChange: (e) => handleChange(field.name, e.target.value), required: field.required, error: !!error, helperText: error || field.helperText, disabled: field.disabled || loading }));
+        }
+        // File/Image/Document upload
+        if (['file', 'image', 'document'].includes(field.type)) {
+            return (React.createElement(Box, null,
+                React.createElement(Typography, { variant: "caption", color: "text.secondary", gutterBottom: true },
+                    field.label,
+                    " ",
+                    field.required && '*'),
+                React.createElement(TextField, { fullWidth: true, type: "file", name: field.name, onChange: (e) => {
+                        const file = e.target.files?.[0];
+                        handleChange(field.name, file);
+                    }, required: field.required, error: !!error, helperText: error || field.helperText, disabled: field.disabled || loading, inputProps: {
+                        accept: field.validation?.fileTypes?.join(',')
+                    } })));
+        }
+        // Fallback for unsupported types (array, object, lookup)
+        return (React.createElement(TextField, { fullWidth: true, name: field.name, label: field.label, value: value, onChange: (e) => handleChange(field.name, e.target.value), required: field.required, error: !!error, helperText: error || `${field.type} field type - advanced configuration needed`, disabled: field.disabled || loading, placeholder: `Enter ${field.type} value...` }));
+    };
+    return (React.createElement(Box, { component: "form", onSubmit: handleSubmit },
+        title && (React.createElement(Typography, { variant: "h6", gutterBottom: true }, title)),
+        submitError && (React.createElement(Alert, { severity: "error", sx: { mb: 2 } }, submitError)),
+        React.createElement(Grid, { container: true, spacing: 2 }, fields.map((field) => (React.createElement(Grid, { item: true, xs: 12, md: columns === 2 ? 6 : 12, key: field.name }, renderField(field))))),
+        React.createElement(Box, { sx: { mt: 3, display: 'flex', gap: 2, justifyContent: 'flex-end' } },
+            onCancel && (React.createElement(Button, { variant: "outlined", onClick: onCancel, disabled: loading }, cancelText)),
+            React.createElement(Button, { type: "submit", variant: "contained", disabled: loading }, loading ? 'Submitting...' : submitText))));
+};