@rebasepro/admin 0.8.0 → 0.9.1-canary.09aaf62

package/src/components/{EntityDetailView.tsx → DetailViewBinding.tsx}

@@ -1,11 +1,11 @@
-import type { ComponentRef, EntityCollection, EntityCustomViewParams, FormViewConfig } from "@rebasepro/types";
+import type { ComponentRef, CollectionConfig, EntityCustomViewParams, FormViewConfig } from "@rebasepro/types";
 import type { FormContext } from "../types/fields";
 import type { PluginFormActionProps } from "@rebasepro/types";
 import React, { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Entity, EntityStatus, getCollectionDataPath, Property } from "@rebasepro/types";
-import { PluginProviderStack, resolveComponentRef, useComponentOverride, CollectionComponentOverrideProvider } from "@rebasepro/core";
+import { PluginProviderStack, resolveComponentRef, useComponentOverride, CollectionScopeProvider } from "@rebasepro/app";
 
-import { EntityCollectionView, EntityView } from "../components";
+import { CollectionViewBinding, EntityViewBinding } from "../components";
 import { CircularProgressCenter, iconSize } from "@rebasepro/ui";
 import {
     Alert,
@@ -25,7 +25,7 @@ import {
     Typography
 } from "@rebasepro/ui";
 import { ErrorBoundary } from "@rebasepro/ui";
-import { ErrorView, createFormexStub, usePermissions, useTranslation, getIcon } from "@rebasepro/core";
+import { ErrorView, createFormexStub, usePermissions, useTranslation, getIcon } from "@rebasepro/app";
 import {
     getSubcollections,
     removeInitialAndTrailingSlashes,
@@ -34,20 +34,20 @@ import {
 import { resolvedSelectedEntityView } from "../util/resolutions";
 import {
     useCustomizationController,
-    useEntityFetch,
+    useFetch,
     useRebaseContext,
     useLargeLayout,
     useSlot
-} from "@rebasepro/core";
+} from "@rebasepro/app";
 import { useUrlController, useCollectionRegistryController } from "../index";
 import { useNavigate } from "react-router-dom";
 import { getValueInPath } from "@rebasepro/utils";
 import { getEntityTitlePropertyKey, resolveTitleToString } from "../util/previews";
-import { EntityJsonPreview } from "../components/EntityJsonPreview";
+import { JsonPreviewBinding } from "../components/JsonPreviewBinding";
 
 const EntityHistoryView = lazy(() => import("../components/history").then(m => ({ default: m.EntityHistoryView })));
 
-import { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE } from "../util/entity_view_constants";
+import { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE } from "../util/view_constants";
 
 export type BarActionsParams = {
     values: object,
@@ -60,12 +60,12 @@ export type OnTabChangeParams<M extends Record<string, unknown>> = {
     path: string;
     entityId?: string | number;
     selectedTab?: string;
-    collection: EntityCollection<M>;
+    collection: CollectionConfig<M>;
 };
 
-export interface EntityDetailViewProps<M extends Record<string, unknown> = Record<string, unknown>> {
+export interface DetailViewBindingProps<M extends Record<string, unknown> = Record<string, unknown>> {
     path: string;
-    collection: EntityCollection<M>;
+    collection: CollectionConfig<M>;
     entityId: string | number;
     selectedTab?: string;
     parentCollectionSlugs: string[];
@@ -76,16 +76,16 @@ export interface EntityDetailViewProps<M extends Record<string, unknown> = Recor
     barActions?: (params: BarActionsParams) => React.ReactNode;
 }
 
-export function EntityDetailView<M extends Record<string, unknown>>({
+export function DetailViewBinding<M extends Record<string, unknown>>({
     entityId,
     ...props
-}: EntityDetailViewProps<M>) {
+}: DetailViewBindingProps<M>) {
 
     const {
         entity,
         dataLoading,
         dataLoadingError
-    } = useEntityFetch<M>({
+    } = useFetch<M>({
         path: props.path,
         entityId: entityId,
         collection: props.collection,
@@ -105,7 +105,7 @@ export function EntityDetailView<M extends Record<string, unknown>>({
     }
 
     const content = (
-        <EntityDetailViewInner<M>
+        <DetailViewBindingInner<M>
             {...props}
             entityId={entityId}
             entity={entity}
@@ -113,17 +113,14 @@ export function EntityDetailView<M extends Record<string, unknown>>({
         />
     );
 
-    if (props.collection.components) {
-        return (
-            <CollectionComponentOverrideProvider overrides={props.collection.components}>
-                {content}
-            </CollectionComponentOverrideProvider>
-        );
-    }
-    return content;
+    return (
+        <CollectionScopeProvider collection={props.collection}>
+            {content}
+        </CollectionScopeProvider>
+    );
 }
 
-function EntityDetailViewInner<M extends Record<string, unknown>>({
+function DetailViewBindingInner<M extends Record<string, unknown>>({
     path,
     entityId,
     selectedTab: selectedTabProp,
@@ -136,11 +133,11 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
     dataLoading,
     layout = "full_screen",
     barActions
-}: EntityDetailViewProps<M> & {
+}: DetailViewBindingProps<M> & {
     entity?: Entity<M>,
     dataLoading: boolean,
 }) {
-    const ResolvedCollectionView = useComponentOverride("Collection.View", EntityCollectionView);
+    const ResolvedCollectionView = useComponentOverride("Collection.View", CollectionViewBinding);
     const { t } = useTranslation();
     const context = useRebaseContext();
     const urlController = useUrlController();
@@ -166,7 +163,7 @@ entityId }
     ), [collection, entityId]);
 
     // Track whether the user has explicitly clicked a tab in this component
-    // instance. See EntityEditViewInner for full explanation.
+    // instance. See EditViewBindingInner for full explanation.
     const userHasChangedTab = useRef(false);
 
     const [selectedTab, setSelectedTab] = useState<string>(() => {
@@ -264,7 +261,7 @@ entityId }
     const pluginActionsTop = useSlot("form.actions.top", formActionTopProps);
 
     // Resolve formView.Builder if provided
-    const formViewConfig = (collection as EntityCollection<M> & { formView?: FormViewConfig<M> }).formView;
+    const formViewConfig = (collection as CollectionConfig<M> & { formView?: FormViewConfig<M> }).formView;
     const FormViewBuilder = formViewConfig?.Builder ? resolveComponentRef<EntityCustomViewParams>(formViewConfig.Builder as ComponentRef<EntityCustomViewParams>) : null;
 
     // Title resolution
@@ -323,7 +320,7 @@ entityId }
         key={"json_view"}
         role="tabpanel">
         <ErrorBoundary>
-            <EntityJsonPreview values={usedEntity?.values ?? {}} />
+            <JsonPreviewBinding values={usedEntity?.values ?? {}} />
         </ErrorBoundary>
     </div> : null;
 
@@ -405,7 +402,7 @@ entityId }
 
         return (
             <>
-                {usedEntity && <EntityView
+                {usedEntity && <EntityViewBinding
                     entity={usedEntity}
                     collection={collection}
                     path={path}
@@ -639,7 +636,7 @@ entityId }
     return result;
 }
 
-function DetailViewSkeleton({ collection }: { collection: EntityCollection<Record<string, unknown>> }) {
+function DetailViewSkeleton({ collection }: { collection: CollectionConfig<Record<string, unknown>> }) {
     return (
         <div className="flex-1 flex flex-row w-full overflow-y-auto justify-center">
             <div className="relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit">

package/src/components/DrawerNavigationGroup.tsx

@@ -2,9 +2,9 @@ import type { NavigationEntry } from "@rebasepro/types";
 import React from "react";
 import { ChevronDownIcon, cls, iconSize, Typography } from "@rebasepro/ui";
 
-import { IconForView } from "@rebasepro/core";
+import { IconForView } from "@rebasepro/app";
 import { DrawerNavigationItem } from "./DrawerNavigationItem";
-import { useTranslation, useComponentOverride } from "@rebasepro/core";
+import { useTranslation, useComponentOverride } from "@rebasepro/app";
 
 export interface DrawerNavigationGroupProps {
     /**

package/src/components/{EntityEditViewFormActions.tsx → EditFormActions.tsx}

@@ -1,7 +1,7 @@
 
-import type { EntityCollection } from "@rebasepro/types";
+import type { CollectionConfig } from "@rebasepro/types";
 import type { FormContext } from "../types/fields";
-import type { EntityAction, EntityActionClickProps, SideEntityController } from "@rebasepro/types";
+import type { EntityAction, EntityActionClickProps, SidePanelController } from "@rebasepro/types";
 import React, { useMemo } from "react";
 import { Entity, getCollectionDataPath, RebaseContext } from "@rebasepro/types";
 import type { EntityFormActionsProps } from "../types/components/EntityFormActionsProps";
@@ -14,14 +14,14 @@ import {
     useCustomizationController,
     useSnackbarController,
     useTranslation
-} from "@rebasepro/core";
+} from "@rebasepro/app";
 import { SideDialogController, useSideDialogContext } from "./SideDialogs";
-import { FormexController } from "@rebasepro/formex";
-import { ErrorTooltip } from "@rebasepro/core";
-import { usePermissions } from "@rebasepro/core";
+import { FormexController } from "@rebasepro/forms";
+import { ErrorTooltip } from "@rebasepro/app";
+import { usePermissions } from "@rebasepro/app";
 import { useCMSContext } from "../index";
 
-export function EntityEditViewFormActions({
+export function EditFormActions({
     collection,
     path,
     entity,
@@ -39,7 +39,7 @@ export function EntityEditViewFormActions({
 
     const { canCreate, canDelete } = usePermissions();
     const context = useCMSContext();
-    const sideEntityController = context.sideEntityController;
+    const sidePanelController = context.sidePanelController;
     const sideDialogContext = useSideDialogContext();
     const customizationController = useCustomizationController();
     const { t } = useTranslation();
@@ -70,7 +70,7 @@ export function EntityEditViewFormActions({
         formActions,
         collection,
         context,
-        sideEntityController,
+        sidePanelController,
         disabled,
         status,
         sideDialogContext,
@@ -89,7 +89,7 @@ export function EntityEditViewFormActions({
         formActions,
         collection,
         context,
-        sideEntityController,
+        sidePanelController,
         sideDialogContext,
         disabled,
         status,
@@ -116,9 +116,9 @@ type ActionsViewProps<M extends Record<string, unknown>> = {
     savingError: Error | undefined,
     entity: Entity<M> | undefined,
     formActions: EntityAction[],
-    collection: EntityCollection,
+    collection: CollectionConfig,
     context: RebaseContext,
-    sideEntityController: SideEntityController,
+    sidePanelController: SidePanelController,
     disabled: boolean,
     status: "new" | "existing" | "copy",
     sideDialogContext: SideDialogController,
@@ -137,7 +137,7 @@ function buildBottomActions<M extends Record<string, unknown>>({
     formActions,
     collection,
     context,
-    sideEntityController,
+    sidePanelController,
     disabled,
     status,
     sideDialogContext,
@@ -171,7 +171,7 @@ function buildBottomActions<M extends Record<string, unknown>>({
                     path: getCollectionDataPath(collection),
                     collection: collection,
                     context,
-                    sideEntityController,
+                    sidePanelController,
                     openEntityMode,
                     navigateBack,
                     formContext
@@ -243,7 +243,7 @@ function buildSideActions<M extends Record<string, unknown>>({
     formActions,
     collection,
     context,
-    sideEntityController,
+    sidePanelController,
     disabled,
     status,
     sideDialogContext,
@@ -295,7 +295,7 @@ function buildSideActions<M extends Record<string, unknown>>({
                     path: getCollectionDataPath(collection),
                     collection: collection,
                     context,
-                    sideEntityController,
+                    sidePanelController,
                     openEntityMode,
                     navigateBack,
                     formContext

package/src/components/{EntityEditView.tsx → EditViewBinding.tsx}

@@ -1,11 +1,11 @@
-import type { ComponentRef, EntityCollection, EntityCustomViewParams, FormViewConfig } from "@rebasepro/types";
+import type { ComponentRef, CollectionConfig, EntityCustomViewParams, FormViewConfig } from "@rebasepro/types";
 import type { FormContext } from "../types/fields";
 import type { PluginFormActionProps } from "@rebasepro/types";
 import React, { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Entity, EntityStatus, getCollectionDataPath } from "@rebasepro/types";
-import { PluginProviderStack, resolveComponentRef, useComponentOverride, CollectionComponentOverrideProvider } from "@rebasepro/core";
+import { PluginProviderStack, resolveComponentRef, useComponentOverride, CollectionScopeProvider } from "@rebasepro/app";
 
-import { EntityCollectionView, EntityView } from "../components";
+import { CollectionViewBinding, EntityViewBinding } from "../components";
 import { CircularProgressCenter, iconSize } from "@rebasepro/ui";
 import {
     CenteredView,
@@ -23,7 +23,7 @@ import {
     Typography
 } from "@rebasepro/ui";
 import { ErrorBoundary } from "@rebasepro/ui";
-import { ErrorView } from "@rebasepro/core";
+import { ErrorView } from "@rebasepro/app";
 import {
     getSubcollections,
     removeInitialAndTrailingSlashes,
@@ -32,26 +32,26 @@ import {
 import { resolvedSelectedEntityView } from "../util/resolutions";
 import {
     useCustomizationController,
-    useEntityFetch,
+    useFetch,
     useRebaseContext,
     useLargeLayout,
     useSlot,
     getIcon
-} from "@rebasepro/core";
-import { getEntityFromMemoryCache } from "@rebasepro/core";
+} from "@rebasepro/app";
+import { getEntityFromMemoryCache } from "@rebasepro/app";
 import { EntityFormBinding } from "../form";
 import type { EntityFormBindingProps } from "../form";
 import type { OnUpdateParams } from "../types/components/EntityFormProps";
-import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
-import { EntityJsonPreview } from "../components/EntityJsonPreview";
+import { EditFormActions } from "./EditFormActions";
+import { JsonPreviewBinding } from "../components/JsonPreviewBinding";
 // Lazy-load history view — only loaded when user clicks the HistoryIcon tab
 const EntityHistoryView = lazy(() => import("../components/history").then(m => ({ default: m.EntityHistoryView })));
-import { createFormexStub, getEntityFromCache } from "@rebasepro/core";
-import { usePermissions } from "@rebasepro/core";
+import { createFormexStub, getEntityFromCache } from "@rebasepro/app";
+import { usePermissions } from "@rebasepro/app";
 import { useUrlController } from "../index";
 import { useNavigate } from "react-router-dom";
 
-import { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE } from "../util/entity_view_constants";
+import { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE } from "../util/view_constants";
 export { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE };
 
 export type BarActionsParams = {
@@ -65,16 +65,16 @@ export type OnTabChangeParams<M extends Record<string, unknown>> = {
     path: string;
     entityId?: string | number;
     selectedTab?: string;
-    collection: EntityCollection<M>;
+    collection: CollectionConfig<M>;
 
 };
 
-export interface EntityEditViewProps<M extends Record<string, unknown> = Record<string, unknown>> {
+export interface EditViewBindingProps<M extends Record<string, unknown> = Record<string, unknown>> {
     /**
      * The CMS path of the entity, e.g. "users" or "products".
      */
     path: string;
-    collection: EntityCollection<M>;
+    collection: CollectionConfig<M>;
     entityId?: string | number;
     databaseId?: string;
     copy?: boolean;
@@ -90,26 +90,26 @@ export interface EntityEditViewProps<M extends Record<string, unknown> = Record<
     /**
      * Pre-populate the form with these values when creating a new entity.
      * Only applied when the form is in "new" mode (no entityId).
-     * Sourced from EntitySidePanelProps (side panel) or location.state (full screen).
+     * Sourced from SidePanelBindingProps (side panel) or location.state (full screen).
      */
     defaultValues?: Partial<M>;
 }
 
 /**
  * This is the default view that is used as the content of a side panel when
- * an entity is opened.
+ * a record is opened.
  */
-export function EntityEditView<M extends Record<string, unknown>>({
+export function EditViewBinding<M extends Record<string, unknown>>({
     entityId,
     ...props
-}: EntityEditViewProps<M>) {
+}: EditViewBindingProps<M>) {
 
     const {
         entity,
         dataLoading,
 
         dataLoadingError
-    } = useEntityFetch<M>({
+    } = useFetch<M>({
         path: props.path,
         entityId: entityId,
         collection: props.collection,
@@ -148,7 +148,7 @@ export function EntityEditView<M extends Record<string, unknown>>({
     }
 
     const content = (
-        <EntityEditViewInner<M> {...props}
+        <EditViewBindingInner<M> {...props}
             entityId={entityId}
             entity={entity}
             initialDirtyValues={initialDirtyValues as Partial<M>}
@@ -159,17 +159,14 @@ export function EntityEditView<M extends Record<string, unknown>>({
         />
     );
 
-    if (props.collection.components) {
-        return (
-            <CollectionComponentOverrideProvider overrides={props.collection.components}>
-                {content}
-            </CollectionComponentOverrideProvider>
-        );
-    }
-    return content;
+    return (
+        <CollectionScopeProvider collection={props.collection}>
+            {content}
+        </CollectionScopeProvider>
+    );
 }
 
-export function EntityEditViewInner<M extends Record<string, unknown>>({
+export function EditViewBindingInner<M extends Record<string, unknown>>({
     path,
     entityId,
     selectedTab: selectedTabProp,
@@ -188,7 +185,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
     setStatus,
     formProps,
     canEdit
-}: EntityEditViewProps<M> & {
+}: EditViewBindingProps<M> & {
     entity?: Entity<M>,
     initialDirtyValues?: Partial<M>, // dirty cached entity in memory
     dataLoading: boolean,
@@ -197,9 +194,9 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
     canEdit?: boolean,
 }) {
 
-    const ResolvedFormActions = useComponentOverride("Entity.FormActions", EntityEditViewFormActions);
+    const ResolvedFormActions = useComponentOverride("EditView.FormActions", EditFormActions);
     const ResolvedEntityForm = useComponentOverride("Entity.Form", EntityFormBinding) as typeof EntityFormBinding;
-    const ResolvedCollectionView = useComponentOverride("Collection.View", EntityCollectionView);
+    const ResolvedCollectionView = useComponentOverride("Collection.View", CollectionViewBinding);
 
     const context = useRebaseContext();
     const urlController = useUrlController();
@@ -392,7 +389,7 @@ parentEntityIds,
         key={"json_view"}
         role="tabpanel">
         <ErrorBoundary>
-            <EntityJsonPreview
+            <JsonPreviewBinding
                 values={formContext?.values ?? entity?.values ?? {}} />
         </ErrorBoundary>
     </div> : null;
@@ -462,7 +459,7 @@ parentEntityIds,
     }, [status, onTabChange, path, entityId, collection]);
 
     // Resolve formView.Builder if provided
-    const formViewConfig = (collection as EntityCollection<M> & { formView?: FormViewConfig<M> }).formView;
+    const formViewConfig = (collection as CollectionConfig<M> & { formView?: FormViewConfig<M> }).formView;
     const FormViewBuilder = formViewConfig?.Builder ? resolveComponentRef<EntityCustomViewParams>(formViewConfig.Builder as ComponentRef<EntityCustomViewParams>) : null;
     const formViewIncludeActions = formViewConfig?.includeActions !== false;
 
@@ -486,7 +483,7 @@ parentEntityIds,
                     </Suspense>
                 </ErrorBoundary>
             ) : (
-                <EntityView
+                <EntityViewBinding
                     className={"px-8 h-full overflow-auto"}
                     entity={entity}
                     path={path}
@@ -718,7 +715,7 @@ parentEntityIds,
     return result;
 }
 
-function EntityFormSkeleton({ collection }: { collection: EntityCollection }) {
+function EntityFormSkeleton({ collection }: { collection: CollectionConfig }) {
     return (
         <div className="flex-1 flex flex-row w-full overflow-y-auto justify-center">
             <div className="relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit">

package/src/components/{EntityPreview.tsx → EntityPreviewBinding.tsx}

@@ -1,4 +1,4 @@
-import type { EntityCollection } from "@rebasepro/types";
+import type { CollectionConfig } from "@rebasepro/types";
 import type { Property } from "@rebasepro/types";
 import * as React from "react";
 import { useEffect, useMemo } from "react";
@@ -21,18 +21,18 @@ import {
     useCustomizationController,
     useData,
     ErrorView
-} from "@rebasepro/core";
-import { useAnalyticsController } from "@rebasepro/core";
-import { IconForView } from "@rebasepro/core";
+} from "@rebasepro/app";
+import { useAnalyticsController } from "@rebasepro/app";
+import { IconForView } from "@rebasepro/app";
 import { getPropertyInPath } from "../util/property_utils";
 import { getEntityPreviewKeys, getEntityTitlePropertyKey } from "../util/previews";
 import { getValueInPath } from "@rebasepro/utils";
-import { useCollectionRegistryController, useSideEntityController } from "../index";
+import { useCollectionRegistryController, useSidePanel } from "../index";
 
-export type EntityPreviewProps = {
+export type EntityPreviewBindingProps = {
     size?: PreviewSize,
     actions?: React.ReactNode,
-    collection?: EntityCollection,
+    collection?: CollectionConfig,
     hover?: boolean;
     previewKeys?: string[],
     disabled?: boolean,
@@ -42,16 +42,16 @@ export type EntityPreviewProps = {
     includeEntityLink?: boolean,
     includeImage?: boolean,
     onClick?: (e: React.SyntheticEvent) => void;
-    onSideEntityClick?: (entity: Entity) => void,
+    onSidePanelClick?: (entity: Entity) => void,
 };
 
-export type EntityPreviewDataProps = {
+export type EntityPreviewBindingDataProps = {
     size?: "smallest" | "small" | "medium" | "large",
     actions?: React.ReactNode,
-    collection?: EntityCollection,
+    collection?: CollectionConfig,
     previewKeys?: string[],
     entity: Entity<any>,
-    onSideEntityClick?: (entity: Entity) => void,
+    onSidePanelClick?: (entity: Entity) => void,
     includeId?: boolean,
     includeTitle?: boolean,
     includeEntityLink?: boolean,
@@ -59,25 +59,25 @@ export type EntityPreviewDataProps = {
 };
 
 /**
- * This component contains the main logic and content for displaying an entity preview,
- * without any container wrapper. Used internally by EntityPreview.
+ * This component contains the main logic and content for displaying a entity preview,
+ * without any container wrapper. Used internally by EntityPreviewBinding.
  */
-export function EntityPreviewData({
+export function EntityPreviewBindingData({
     actions,
     collection: collectionProp,
     previewKeys,
     size = "medium",
     includeId = true,
-    onSideEntityClick,
+    onSidePanelClick,
     includeTitle = true,
     includeEntityLink = true,
     includeImage = true,
     entity
-}: EntityPreviewDataProps) {
+}: EntityPreviewBindingDataProps) {
 
     const authController = useAuthController();
     const analyticsController = useAnalyticsController();
-    const sideEntityController = useSideEntityController();
+    const sidePanelController = useSidePanel();
     const customizationController = useCustomizationController();
 
     const collectionRegistryController = useCollectionRegistryController();
@@ -194,12 +194,12 @@ export function EntityPreviewData({
                             onClick={(e) => {
                                 e.stopPropagation();
                                 e.preventDefault();
-                                onSideEntityClick?.(entity);
+                                onSidePanelClick?.(entity);
                                 analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
                                     path: entity.path,
                                     entityId: entity.id
                                 });
-                                sideEntityController.open({
+                                sidePanelController.open({
                                     entityId: entity.id,
                                     path: entity.path,
                                     collection,
@@ -216,11 +216,11 @@ export function EntityPreviewData({
     );
 }
 
-export function EntityPreviewWithId({
+export function EntityPreviewBindingWithId({
     entityId,
     path,
     ...props
-}: Omit<EntityPreviewProps, "entity"> & {
+}: Omit<EntityPreviewBindingProps, "entity"> & {
     entityId: string | number;
     path: string;
     databaseId?: string;
@@ -236,7 +236,7 @@ export function EntityPreviewWithId({
             setEntity(undefined);
             return;
         }
-        const fetchEntity = async () => {
+        const fetchOne = async () => {
             setDataLoading(true);
             try {
                 const fetchedEntity = await dataClient.collection(path).findById(entityId);
@@ -255,7 +255,7 @@ export function EntityPreviewWithId({
             }
         }
 
-        fetchEntity();
+        fetchOne();
 
         return () => {
             isMounted = false;
@@ -284,16 +284,16 @@ export function EntityPreviewWithId({
         );
     }
 
-    return <EntityPreviewData
+    return <EntityPreviewBindingData
         {...props}
         entity={entity}/>;
 }
 
 /**
- * This view is used to display a preview of an entity.
+ * This view is used to display a preview of a entity.
  * It is used by default in reference fields and whenever a reference is displayed.
  */
-export function EntityPreview({
+export function EntityPreviewBinding({
     actions,
     disabled,
     hover,
@@ -305,16 +305,16 @@ export function EntityPreview({
     includeTitle = true,
     includeEntityLink = true,
     includeImage = true,
-    onSideEntityClick,
+    onSidePanelClick,
     entity
-}: EntityPreviewProps) {
+}: EntityPreviewBindingProps) {
 
     return (
         <EntityPreviewContainer
             onClick={disabled ? undefined : onClick}
             hover={disabled ? undefined : hover}
             size={size}>
-            <EntityPreviewData
+            <EntityPreviewBindingData
                 actions={actions}
                 collection={collection}
                 previewKeys={previewKeys}
@@ -323,7 +323,7 @@ export function EntityPreview({
                 includeTitle={includeTitle}
                 includeEntityLink={includeEntityLink}
                 includeImage={includeImage}
-                onSideEntityClick={onSideEntityClick}
+                onSidePanelClick={onSidePanelClick}
                 entity={entity}
             />
         </EntityPreviewContainer>