@donotdev/ui 0.0.10 → 0.0.11

package/dist/crud/components/EntityFormRenderer.js

@@ -0,0 +1,275 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// packages/ui/src/crud/components/EntityFormRenderer.tsx
+/**
+ * @fileoverview EntityFormRenderer component
+ * @description Dumb renderer that composes form from entity definition.
+ * All orchestration logic lives in useEntityForm.
+ *
+ * @version 0.0.7
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+import { useEffect, useId, useMemo, useState } from 'react';
+import { FormProvider } from 'react-hook-form';
+import { Badge, Button, DropdownMenu, Grid, Stack, Spinner, } from '@donotdev/components';
+import { useTranslation } from '@donotdev/core';
+import { useNavigate } from '../../routing';
+import { DisplayFieldRenderer, FormFieldRenderer, UploadProvider, useEntityForm, useUnsavedChangesWarning, useConfirmNavigation, useFormStore, } from '@donotdev/crud';
+/**
+ * EntityFormRenderer - Dumb component that renders a form from entity definition.
+ *
+ * All orchestration (uploads, validation, status tracking) is handled by useEntityForm.
+ * This component just:
+ * - Generates formId
+ * - Renders fields
+ * - Renders submit button with status from useEntityForm
+ *
+ * @version 0.0.7
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+export function EntityFormRenderer({ entity, onSubmit, t, className = '', submitText, loading = false, defaultValues, submitVariant = 'primary', secondaryButtonText, secondaryButtonVariant = 'outline', onSecondarySubmit, viewerRole, operation = defaultValues ? 'edit' : 'create', autoSave = operation === 'create', formId: externalFormId, cancelText, cancelPath, successPath, onCancel, warnOnUnsavedChanges = true, unsavedChangesMessage, hideVisibilityInfo = false, }) {
+    const navigate = useNavigate();
+    // Generate stable form ID
+    const generatedFormId = useId();
+    const formId = externalFormId ?? `entity-form-${entity.name}-${generatedFormId}`;
+    // Use entity name as i18n namespace
+    const { t: translationFn } = useTranslation(entity.namespace);
+    const { t: tCrud } = useTranslation('crud');
+    const translate = t || translationFn;
+    // Preview role state for View As toggle (only used when visibility info is shown)
+    const [previewRole, setPreviewRole] = useState('super');
+    // Visibility → Badge variant mapping (inline, no separate file needed)
+    const visibilityBadgeVariant = {
+        guest: 'muted',
+        user: 'secondary',
+        admin: 'warning',
+        super: 'destructive',
+        technical: 'accent',
+    };
+    // Role hierarchy for filtering (higher index = more access)
+    const roleHierarchy = ['guest', 'user', 'admin', 'super'];
+    // Role display labels (hardcoded English - universal technical terms)
+    const roleLabels = {
+        guest: 'Guest',
+        user: 'User',
+        admin: 'Admin',
+        super: 'Super',
+        technical: 'System',
+    };
+    // Preview dropdown menu items
+    const previewMenuItems = useMemo(() => roleHierarchy.map((role) => ({
+        label: roleLabels[role],
+        checked: previewRole === role,
+        onClick: () => setPreviewRole(role),
+    })), [previewRole]);
+    // useEntityForm handles all orchestration
+    const form = useEntityForm(entity, {
+        formId,
+        operation,
+        defaultValues,
+        viewerRole,
+        t: translate,
+        autoSave,
+    });
+    const { control, handleSubmit, formState: { errors }, fields: rawFields, formStatus, uploadProgress, cleanup, isDirty, resetForm, } = form;
+    // Filter fields based on previewRole when visibility info is shown
+    const renderableFields = useMemo(() => {
+        if (hideVisibilityInfo)
+            return rawFields;
+        const previewRoleIndex = roleHierarchy.indexOf(previewRole);
+        return rawFields.filter(({ config }) => {
+            const fieldVisibility = config.visibility;
+            // 'hidden' fields are never shown, 'technical' always shown as read-only
+            if (fieldVisibility === 'hidden')
+                return false;
+            if (fieldVisibility === 'technical')
+                return true;
+            const fieldRoleIndex = roleHierarchy.indexOf(fieldVisibility);
+            return fieldRoleIndex <= previewRoleIndex;
+        });
+    }, [rawFields, hideVisibilityInfo, previewRole]);
+    // Sync isDirty to FormStore (single source of truth)
+    useEffect(() => {
+        if (formId) {
+            useFormStore.getState().setIsDirty(formId, isDirty);
+        }
+    }, [formId, isDirty]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return cleanup;
+    }, [cleanup]);
+    // Compute i18n messages once (DRY, performance)
+    const unsavedChangesLeaveMessage = useMemo(() => unsavedChangesMessage ||
+        tCrud('messages.unsavedChangesLeave', {
+            defaultValue: 'You have unsaved changes. Are you sure you want to leave?',
+        }), [unsavedChangesMessage, tCrud]);
+    const unsavedChangesDiscardMessage = useMemo(() => unsavedChangesMessage ||
+        tCrud('messages.unsavedChangesDiscard', {
+            defaultValue: 'You have unsaved changes. Discard them?',
+        }), [unsavedChangesMessage, tCrud]);
+    // Warn about unsaved changes when navigating away (browser refresh/close)
+    // SPA navigation blocking is handled by router hooks via FormStore
+    useUnsavedChangesWarning({
+        isDirty,
+        enabled: warnOnUnsavedChanges,
+        message: unsavedChangesLeaveMessage,
+    });
+    // Use framework helper for cancel confirmation (DRY, SSR-safe)
+    const confirmNavigation = useConfirmNavigation(isDirty, unsavedChangesDiscardMessage);
+    // Handle cancel with confirmation
+    const handleCancel = async () => {
+        if (isDirty) {
+            const confirmed = await confirmNavigation();
+            if (!confirmed)
+                return;
+        }
+        resetForm();
+        // If onCancel callback provided, use it (takes precedence)
+        if (onCancel) {
+            onCancel();
+        }
+        else {
+            // Otherwise, navigate back or to cancelPath if provided
+            if (cancelPath) {
+                navigate(cancelPath);
+            }
+            else {
+                navigate('back');
+            }
+        }
+    };
+    // Wrap onSubmit to navigate optimistically (fire and forget)
+    // handleSubmit from react-hook-form expects: (data: EntityData) => void | Promise<void>
+    // Our onSubmit prop is (data: T) => void | Promise<void>, where T extends EntityRecord
+    // EntityData should be compatible with T, so we can safely pass it
+    const handleFormSubmit = (data) => {
+        // Call onSubmit (don't await - optimistic update pattern)
+        // Type assertion is safe: EntityData is the validated form data, T is EntityRecord
+        onSubmit(data);
+        // Navigate immediately (optimistic navigation - feels fast)
+        // If onSubmit is async, navigation happens while it's processing in background
+        if (successPath) {
+            navigate(successPath);
+        }
+        else {
+            // Default: navigate back (optimistic - user came from list, go back there)
+            navigate('back');
+        }
+    };
+    // Determine if cancel button should show
+    // Show by default, hide only if cancelText is explicitly null
+    const showCancelButton = cancelText !== null;
+    const cancelButtonText = cancelText ?? tCrud('form.cancel', { defaultValue: 'Cancel' });
+    // Common button container style (sticky footer)
+    const buttonContainerStyle = {
+        gridColumn: '1 / -1',
+        position: 'sticky',
+        bottom: 0,
+        backgroundColor: 'var(--background)',
+        borderTop: '1px solid var(--border)',
+        paddingTop: 'var(--gap-md)',
+        paddingBottom: 'var(--gap-md)',
+        zIndex: 10,
+        marginTop: 'var(--gap-lg)',
+    };
+    // Auto-detect loading for edit forms waiting for data
+    const isLoading = loading || (operation === 'edit' && !defaultValues);
+    // Compute button state from form status
+    const buttonState = useMemo(() => {
+        if (formStatus === 'uploading') {
+            return {
+                loading: true,
+                loadingText: uploadProgress < 100
+                    ? tCrud('form.uploading', {
+                        progress: Math.round(uploadProgress),
+                        defaultValue: `Uploading ${Math.round(uploadProgress)}%...`,
+                    })
+                    : tCrud('form.processing', { defaultValue: 'Processing...' }),
+                progress: uploadProgress,
+            };
+        }
+        if (formStatus === 'validating') {
+            return {
+                loading: true,
+                loadingText: tCrud('form.validating', {
+                    defaultValue: 'Validating...',
+                }),
+            };
+        }
+        if (formStatus === 'submitting') {
+            return {
+                loading: true,
+                loadingText: tCrud('form.saving', { defaultValue: 'Saving...' }),
+            };
+        }
+        return { loading: false };
+    }, [formStatus, uploadProgress, tCrud]);
+    return (_jsx(FormProvider, { ...form, children: _jsx(UploadProvider, { formId: formId, children: _jsxs("div", { style: {
+                    position: 'relative',
+                    width: '100%',
+                    gridColumn: '1 / -1',
+                    display: 'contents',
+                }, children: [isLoading && _jsx(Spinner, { overlay: true }), _jsxs("form", { onSubmit: handleSubmit(handleFormSubmit), noValidate: true, className: className, style: { width: '100%', gridColumn: '1 / -1', display: 'contents' }, children: [renderableFields.map(({ name, config, editable }) => {
+                                // Show visibility badge for non-guest fields when visibility info is enabled
+                                const showBadge = !hideVisibilityInfo && config.visibility !== 'guest';
+                                const badgeVariant = config.visibility !== 'hidden'
+                                    ? visibilityBadgeVariant[config.visibility]
+                                    : undefined;
+                                const badgeLabel = roleLabels[config.visibility] ??
+                                    config.visibility;
+                                // Wrap field with visibility badge when enabled
+                                const fieldElement = !editable ? (_jsx(DisplayFieldRenderer, { name: name, config: config, value: defaultValues?.[name], t: translate }, name)) : (_jsx(FormFieldRenderer, { name: name, config: config, control: control, errors: errors, t: translate }, name));
+                                // If no badge needed, return field directly
+                                if (!showBadge)
+                                    return fieldElement;
+                                // Wrap field with badge indicator
+                                return (_jsxs("div", { style: { position: 'relative' }, children: [_jsx(Badge, { as: "span", variant: badgeVariant, style: {
+                                                position: 'absolute',
+                                                top: 0,
+                                                insetInlineEnd: 0,
+                                                fontSize: 'var(--font-size-xs)',
+                                                zIndex: 1,
+                                            }, children: badgeLabel }), fieldElement] }, name));
+                            }), (() => {
+                                // Define all possible buttons (conditionally included)
+                                const buttons = [];
+                                // Cancel button
+                                if (showCancelButton && cancelButtonText) {
+                                    buttons.push(_jsx(Button, { type: "button", onClick: handleCancel, disabled: buttonState.loading, variant: "outline", className: "dndev-w-full", children: cancelButtonText }, "cancel"));
+                                }
+                                // Preview dropdown
+                                if (!hideVisibilityInfo) {
+                                    const previewVariant = visibilityBadgeVariant[previewRole] || 'muted';
+                                    buttons.push(_jsx(DropdownMenu, { trigger: _jsxs(Button, { type: "button", variant: previewVariant, disabled: buttonState.loading, className: "dndev-w-full", children: [tCrud('visibility.preview', {
+                                                    defaultValue: 'Preview',
+                                                }), ": ", roleLabels[previewRole]] }), items: previewMenuItems }, "preview"));
+                                }
+                                // Secondary submit button
+                                if (secondaryButtonText) {
+                                    buttons.push(_jsx(Button, { type: "button", onClick: () => {
+                                            if (onSecondarySubmit) {
+                                                const currentValues = form.getValues();
+                                                onSecondarySubmit(currentValues);
+                                            }
+                                        }, loading: buttonState.loading, loadingText: buttonState.loadingText, progress: buttonState.progress, variant: secondaryButtonVariant, className: "dndev-w-full", children: secondaryButtonText }, "secondary"));
+                                }
+                                // Primary submit button (always shown)
+                                buttons.push(_jsx(Button, { type: "submit", loading: buttonState.loading, loadingText: buttonState.loadingText, progress: buttonState.progress, variant: submitVariant, className: "dndev-w-full", children: submitText ||
+                                        tCrud('form.submit', { defaultValue: 'Submit' }) }, "submit"));
+                                const buttonCount = buttons.length;
+                                // Single button: use Stack
+                                if (buttonCount === 1) {
+                                    return (_jsx(Stack, { direction: "column", gap: "tight", style: buttonContainerStyle, children: buttons[0] }));
+                                }
+                                // Multiple buttons: use Grid with proportional columns (Submit gets 2fr)
+                                const templateColumns = buttonCount === 2
+                                    ? '1fr 2fr' // Cancel/Preview + Submit
+                                    : buttonCount === 3
+                                        ? '1fr 1fr 2fr' // Cancel + Preview + Submit
+                                        : '1fr 1fr 1fr 2fr'; // Cancel + Preview + Secondary + Submit
+                                return (_jsx(Grid, { cols: [1, buttonCount, buttonCount, buttonCount], templateColumns: templateColumns, gap: "tight", style: buttonContainerStyle, children: buttons }));
+                            })()] })] }) }) }));
+}
+export default EntityFormRenderer;

package/dist/crud/components/EntityList.d.ts

@@ -0,0 +1,14 @@
+import type { EntityListProps } from '@donotdev/core';
+export type { EntityListProps };
+/**
+ * Entity List Component - Table view for admin/internal operations
+ *
+ * Features:
+ * - Filters section (collapsible) with actions and filter inputs
+ * - Results section (collapsible) with DataTable
+ * - Excel-like table display with formatted values
+ * - Edit and Delete actions (admin only)
+ * - Auto-routing when handlers not provided
+ */
+export declare function EntityList({ entity, userRole, basePath, onClick, hideFilters, pagination, pageSize: pageSizeProp, queryOptions, }: EntityListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EntityList.d.ts.map

package/dist/crud/components/EntityList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntityList.d.ts","sourceRoot":"","sources":["../../../src/crud/components/EntityList.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,YAAY,EAAE,eAAe,EAAE,CAAC;AAEhC;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,QAAkB,EAClB,QAAQ,EACR,OAAO,EACP,WAAmB,EACnB,UAAqB,EACrB,QAAQ,EAAE,YAAY,EACtB,YAAY,GACb,EAAE,eAAe,2CAsTjB"}

package/dist/crud/components/EntityList.js

@@ -0,0 +1,201 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// packages/ui/src/crud/components/EntityList.tsx
+/**
+ * @fileoverview Entity List Component
+ * @description Table view for admin/internal CRUD operations.
+ * Features: Filters section + Results section with DataTable
+ *
+ * **Routing:** Convention basePath = `/${collection}`. View/Edit = basePath/:id, Create = basePath/new.
+ * Override basePath for nested routes; use onClick(id) to open sheet instead of navigating.
+ *
+ * @version 0.3.2
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+import { RefreshCw, Plus, Trash2, Edit, Search } from 'lucide-react';
+import { useMemo, useCallback, useState } from 'react';
+import { DataTable, Button, Stack, ActionButton, Section, Input, } from '@donotdev/components';
+import { useTranslation } from '@donotdev/core';
+import { useNavigate } from '../../routing';
+import { translateFieldLabel, useCrud, useCrudList, EntityFilters, matchesFilter, formatValue, } from '@donotdev/crud';
+/**
+ * Entity List Component - Table view for admin/internal operations
+ *
+ * Features:
+ * - Filters section (collapsible) with actions and filter inputs
+ * - Results section (collapsible) with DataTable
+ * - Excel-like table display with formatted values
+ * - Edit and Delete actions (admin only)
+ * - Auto-routing when handlers not provided
+ */
+export function EntityList({ entity, userRole = 'guest', basePath, onClick, hideFilters = false, pagination = 'client', pageSize: pageSizeProp, queryOptions, }) {
+    const navigate = useNavigate();
+    const base = basePath ?? `/${entity.collection}`;
+    // Server-side pagination state (only used when pagination='server')
+    const [currentPage, setCurrentPage] = useState(1);
+    // For server-side, we need to track pageSize state (DataTable will call onPageSizeChange)
+    // For client-side, we just pass pageSizeProp to DataTable and it handles its own state
+    const [serverPageSize, setServerPageSize] = useState(pageSizeProp);
+    // Separation of Concerns:
+    // Client mode: fetches ALL items, DataTable handles pagination
+    // Server mode: fetches per page, controlled pagination
+    const { data: listData, loading, mutate: refreshList, } = useCrudList(entity, {
+        pagination,
+        ...(queryOptions && { queryOptions }),
+        ...(pagination === 'server' && {
+            page: currentPage,
+            pageSize: serverPageSize,
+        }),
+    });
+    // useCrud -> handles actions (delete)
+    const { delete: deleteItem } = useCrud(entity);
+    const { t: tCrud } = useTranslation('crud');
+    const data = listData?.items || [];
+    // Entity + crud namespaces so formatValue can resolve crud:price.* etc.
+    const { t } = useTranslation([entity.namespace, 'crud']);
+    // Filter state - supports string, number range {min, max}, date range {min, max}
+    const [filters, setFilters] = useState({});
+    const [searchQuery, setSearchQuery] = useState('');
+    // Refresh handler - triggers manual refetch in useList
+    const handleRefresh = useCallback(async () => {
+        await refreshList();
+    }, [refreshList]);
+    // Edit button: always navigate to basePath/:id
+    const handleEdit = useCallback((id) => {
+        navigate(`${base}/${id}`);
+    }, [base, navigate]);
+    // Row click: onClick(id) if provided, else navigate to basePath/:id
+    const handleView = useCallback((id) => {
+        if (onClick) {
+            onClick(id);
+        }
+        else {
+            navigate(`${base}/${id}`);
+        }
+    }, [base, navigate, onClick]);
+    // Add New: navigate to basePath/new
+    const handleCreate = useCallback(() => {
+        navigate(`${base}/new`);
+    }, [base, navigate]);
+    // Delete handler - store handles optimistic removal automatically
+    const handleDelete = useCallback(async (itemId) => {
+        await deleteItem(itemId);
+    }, [deleteItem]);
+    // Update filters (for EntityFilters component)
+    const handleFiltersChange = useCallback((newFilters) => {
+        setFilters(newFilters);
+    }, []);
+    // Apply search and filters to data
+    // @todo Server-side filtering: Currently only handles client-side filtering.
+    // When pagination='server', filters should be sent to the server via useCrudList options.
+    // Until then, filters are applied client-side after fetching.
+    const filteredData = useMemo(() => {
+        let result = data;
+        // Apply search query (searches all fields)
+        if (searchQuery) {
+            const searchLower = searchQuery.toLowerCase();
+            result = result.filter((item) => {
+                return Object.values(item).some((value) => {
+                    if (value === null || value === undefined)
+                        return false;
+                    return String(value).toLowerCase().includes(searchLower);
+                });
+            });
+        }
+        // Apply column filters
+        if (Object.keys(filters).length > 0) {
+            result = result.filter((item) => {
+                return Object.entries(filters).every(([fieldName, filterValue]) => {
+                    const itemValue = item[fieldName];
+                    const fieldConfig = entity.fields[fieldName];
+                    const fieldType = fieldConfig?.type || 'text';
+                    return matchesFilter(itemValue, filterValue, fieldType);
+                });
+            });
+        }
+        return result;
+    }, [data, searchQuery, filters, entity.fields]);
+    // Generate columns from entity.listFields or entity.fields
+    const columns = useMemo(() => {
+        const fieldsToShow = entity.listFields || Object.keys(entity.fields);
+        const baseColumns = fieldsToShow
+            .map((fieldName) => {
+            const fieldConfig = entity.fields[fieldName];
+            if (!fieldConfig)
+                return null;
+            const label = translateFieldLabel(fieldName, fieldConfig, t);
+            const fieldType = fieldConfig.type || 'text';
+            const isNumeric = fieldType === 'number' || fieldType === 'range';
+            const align = isNumeric ? 'end' : 'start';
+            return {
+                key: fieldName,
+                title: label,
+                dataIndex: fieldName,
+                sortable: true,
+                filterable: true,
+                align,
+                render: (value, record) => formatValue(value, fieldConfig, t, { compact: true }),
+            };
+        })
+            .filter(Boolean);
+        // Add actions column at the front (for mobile accessibility)
+        baseColumns.unshift({
+            key: '_actions',
+            title: tCrud('actions.label', { defaultValue: 'Actions' }),
+            dataIndex: undefined,
+            sortable: false,
+            width: 120,
+            align: 'center',
+            render: (_, record) => (_jsxs(Stack, { direction: "row", gap: "tight", align: "center", justify: "center", children: [_jsx(Button, { variant: "outline", icon: Edit, onClick: (e) => {
+                            e.stopPropagation();
+                            handleEdit(record.id);
+                        }, "aria-label": tCrud('edit', { defaultValue: 'Edit' }) }), _jsx(ActionButton, { action: async () => {
+                            await handleDelete(record.id);
+                        }, confirmText: tCrud('delete.confirm', {
+                            defaultValue: 'Are you sure you want to delete this item?',
+                        }), confirmTitle: tCrud('delete.title', {
+                            defaultValue: 'Delete Item',
+                        }), loadingText: tCrud('delete.loading', {
+                            defaultValue: 'Deleting...',
+                        }), variant: "destructive", icon: Trash2, "aria-label": tCrud('delete', { defaultValue: 'Delete' }), children: tCrud('delete', { defaultValue: 'Delete' }) })] })),
+        });
+        return baseColumns;
+    }, [entity, t, tCrud, handleEdit, handleDelete]);
+    // Entity name for section title
+    const entityName = t('name', { defaultValue: entity.name });
+    // Result count
+    const resultCount = filteredData.length;
+    // Always show table structure - DataTable will show skeleton rows when loading
+    return (_jsxs(_Fragment, { children: [_jsx(Section, { title: tCrud('filters.title', {
+                    entity: entityName,
+                    defaultValue: `Browse ${entityName} - Filters`,
+                }), collapsible: true, defaultOpen: true, children: _jsxs(Stack, { gap: "medium", children: [_jsxs(Stack, { direction: "row", gap: "tight", align: "center", className: "dndev-w-full", style: { display: 'grid', gridTemplateColumns: '1fr auto auto' }, children: [_jsx(Input, { placeholder: tCrud('search.placeholder', {
+                                        defaultValue: 'Search...',
+                                    }), value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), icon: Search, className: "dndev-w-full" }), _jsx(Button, { icon: RefreshCw, variant: "outline", onClick: handleRefresh, disabled: loading, display: "compact", "aria-label": tCrud('refresh', { defaultValue: 'Refresh' }) }), _jsx(Button, { icon: Plus, onClick: handleCreate, display: "compact", children: tCrud('addNew', { defaultValue: 'Add New' }) })] }), !hideFilters && (_jsx(EntityFilters, { entity: entity, data: data, filters: filters, onFiltersChange: handleFiltersChange, fieldsToFilter: entity.listFields }))] }) }), _jsx(Section, { title: loading
+                    ? tCrud('results.title.fetching', {
+                        defaultValue: 'Fetching...',
+                    })
+                    : tCrud('results.title.count', {
+                        count: resultCount,
+                        defaultValue: resultCount === 1
+                            ? 'Found 1 occurrence'
+                            : `Found ${resultCount} occurrences`,
+                    }), collapsible: true, defaultOpen: true, children: _jsx(DataTable, { data: filteredData, columns: columns, sortable: true, searchable: false, pagination: true, loading: loading, onRowClick: (item) => handleView(item.id), 
+                    // Pagination labels (translated)
+                    showingLabel: tCrud('pagination.showing', {
+                        defaultValue: 'Showing {{from}} to {{to}} of {{total}} entries',
+                    }), paginationPreviousLabel: tCrud('pagination.previous', {
+                        defaultValue: 'Previous',
+                    }), paginationNextLabel: tCrud('pagination.next', {
+                        defaultValue: 'Next',
+                    }), paginationItemsPerPagePlaceholder: tCrud('pagination.itemsPerPagePlaceholder', {
+                        defaultValue: 'Items per page',
+                    }), ...(pageSizeProp && { pageSize: pageSizeProp }), ...(pagination === 'server' && {
+                        currentPage,
+                        pageSize: serverPageSize,
+                        total: listData?.total,
+                        onPageChange: setCurrentPage,
+                        onPageSizeChange: setServerPageSize,
+                    }) }) })] }));
+}

package/dist/crud/components/index.d.ts

@@ -1,13 +1,15 @@
 /**
- * @fileoverview CRUD display components
- * @description Display components for CRUD operations (form components moved to @donotdev/crud)
+ * @fileoverview CRUD components
+ * @description CRUD components with routing support (moved from @donotdev/crud)
  *
- * @version 0.0.1
+ * @version 0.0.3
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
-export { DisplayFieldRenderer } from './DisplayFieldRenderer';
 export { EntityDisplayRenderer } from './EntityDisplayRenderer';
+export { EntityList } from './EntityList';
+export { EntityCardList } from './EntityCardList';
+export { EntityFormRenderer } from './EntityFormRenderer';
 export * from './Form';
-export * from './fields/display';
+export type { EntityListProps, EntityCardListProps, EntityFormRendererProps, EntityDisplayRendererProps, } from '@donotdev/core';
 //# sourceMappingURL=index.d.ts.map

package/dist/crud/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/crud/components/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/crud/components/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,QAAQ,CAAC;AAEvB,YAAY,EACV,eAAe,EACf,mBAAmB,EACnB,uBAAuB,EACvB,0BAA0B,GAC3B,MAAM,gBAAgB,CAAC"}

package/dist/crud/components/index.js

@@ -1,13 +1,14 @@
 // packages/ui/src/crud/components/index.ts
 /**
- * @fileoverview CRUD display components
- * @description Display components for CRUD operations (form components moved to @donotdev/crud)
+ * @fileoverview CRUD components
+ * @description CRUD components with routing support (moved from @donotdev/crud)
  *
- * @version 0.0.1
+ * @version 0.0.3
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
-export { DisplayFieldRenderer } from './DisplayFieldRenderer';
 export { EntityDisplayRenderer } from './EntityDisplayRenderer';
+export { EntityList } from './EntityList';
+export { EntityCardList } from './EntityCardList';
+export { EntityFormRenderer } from './EntityFormRenderer';
 export * from './Form';
-export * from './fields/display';