@rebasepro/admin 0.1.0 → 0.2.1

package/src/editor/selectors/text-buttons.tsx

@@ -2,8 +2,7 @@
 import { EditorState, Transaction } from "prosemirror-state";
 import { EditorBubbleItem } from "../components";
 import type { SelectorItem } from "./node-selector";
-import { Button, cls } from "@rebasepro/ui";
-import { BoldIcon, ItalicIcon, StrikethroughIcon, UnderlineIcon, CodeIcon } from "lucide-react";
+import { BoldIcon, Button, cls, CodeIcon, ItalicIcon, StrikethroughIcon, UnderlineIcon } from "@rebasepro/ui";
 import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
 import { isMarkActive } from "../utils/prosemirror-utils";
 import { schema } from "../schema";

package/src/editor/utils/prosemirror-utils.ts

@@ -12,7 +12,7 @@ export function isNodeActive(state: EditorState, type: NodeType, attrs: Record<s
     if (!state || !type) return false;
     const selection = state.selection;
     const { $from, to } = selection;
-    const node = selection instanceof TextSelection ? undefined : (selection as unknown as { node?: ProseMirrorNode }).node;
+    const node = selection instanceof TextSelection ? undefined : (selection as { node?: ProseMirrorNode }).node;
     if (node) {
         return node.type === type && (!attrs || Object.keys(attrs).every((key) => node.attrs[key] === attrs[key]));
     }

package/src/form/EntityForm.tsx

@@ -7,7 +7,7 @@ import type { EntityFormProps, OnUpdateParams } from "../types/components/Entity
 import { deepEqual as equal } from "fast-equals";
 
 import { ErrorBoundary } from "@rebasepro/ui";
-import { AlignLeftIcon, CheckIcon, PencilIcon } from "lucide-react";
+import { AlignLeftIcon, CheckIcon, PencilIcon, useDebouncedCallback } from "@rebasepro/ui";
 import { getDefaultValuesFor, getLocalChangesBackup, isHidden, isReadOnly } from "@rebasepro/common";
 
 import { saveEntityWithCallbacks, useAuthController, useCustomizationController, useData, useSnackbarController, useTranslation, useSlot } from "@rebasepro/core";
@@ -15,6 +15,7 @@ import { getFormFieldKeys } from "@rebasepro/core";
 import { Alert, Chip, cls, iconSize, paperMixin, Tooltip, Typography } from "@rebasepro/ui";
 import { Formex, FormexController, getIn, setIn, useCreateFormex } from "@rebasepro/formex";
 import { useAnalyticsController } from "@rebasepro/core";
+
 import { FormEntry, FormLayout, LabelWithIconAndTooltip, PropertyFieldBinding } from "../form";
 import { z } from "zod";
 import {
@@ -30,7 +31,6 @@ import { EntityFormActions } from "./EntityFormActions";
 import type { EntityFormActionsProps } from "../types/components/EntityFormActionsProps";
 import { LocalChangesMenu } from "./components/LocalChangesMenu";
 
-import { useDebouncedCallback } from "@rebasepro/ui";
 import { getEntityTitlePropertyKey } from "../util/previews";
 import { getValueInPath, isObject, mergeDeep } from "@rebasepro/utils";
 import { useCollectionRegistryController, useSideEntityController, useCMSContext } from "../index";
@@ -163,6 +163,7 @@ export function EntityForm<M extends Record<string, unknown>>({
     EntityFormActionsComponent = EntityFormActions,
     showDefaultActions = true,
     showEntityPath = true,
+    navigateBack: navigateBackProp,
     children
 }: EntityFormProps<M>) {
     const { t } = useTranslation();
@@ -170,13 +171,17 @@ export function EntityForm<M extends Record<string, unknown>>({
     const collectionRegistryController = useCollectionRegistryController();
 
     const navigateBack = useCallback(() => {
-        if (openEntityMode === "side_panel") {
-            // If we are in side panel mode, we close the side panel
+        if (navigateBackProp) {
+            navigateBackProp();
+            return;
+        }
+        if (openEntityMode === "side_panel" || openEntityMode === "dialog") {
+            // If we are in side panel mode or dialog mode, we close the panel
             sideEntityController.close();
         } else {
             window.history.back();
         }
-    }, []);
+    }, [navigateBackProp, openEntityMode, sideEntityController]);
 
     const authController = useAuthController();
     const [status, setStatus] = useState<EntityStatus>(initialStatus);
@@ -755,7 +760,12 @@ export function EntityForm<M extends Record<string, unknown>>({
                     id={`form_${path}`}
                     className={cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit")}>
 
-                    <div className={cls("flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10")}>
+                    <div className={cls(
+                        "flex flex-col w-full",
+                        openEntityMode === "dialog"
+                            ? "pt-4 pb-12 px-6 sm:px-8"
+                            : "pt-12 pb-16 px-4 sm:px-8 md:px-10"
+                    )}>
                         <div
                             className={"flex flex-row gap-4 self-end sticky top-4 z-10"}>
 

package/src/form/EntityFormActions.tsx

@@ -5,8 +5,16 @@ import type { EntityAction, SideEntityController } from "@rebasepro/types";
 import React from "react";
 import { Entity, RebaseContext } from "@rebasepro/types";
 import type { EntityFormActionsProps } from "../types/components/EntityFormActionsProps";
-import { Button, cls, defaultBorderMixin, DialogActions, IconButton, LoadingButton, Typography } from "@rebasepro/ui";
-import { AlertCircleIcon } from "lucide-react";
+import {
+    AlertCircleIcon,
+    Button,
+    cls,
+    defaultBorderMixin,
+    DialogActions,
+    IconButton,
+    LoadingButton,
+    Typography
+} from "@rebasepro/ui";
 import { useTranslation } from "@rebasepro/core";
 import { FormexController } from "@rebasepro/formex";
 import { useCMSContext } from "../index";
@@ -90,7 +98,7 @@ type ActionsViewProps<M extends Record<string, unknown>> = {
     disabled: boolean,
     status: "new" | "existing" | "copy",
     pluginActions?: any[],
-    openEntityMode: "side_panel" | "full_screen" | "split";
+    openEntityMode: "side_panel" | "full_screen" | "split" | "dialog";
     navigateBack: () => void;
     formContext: FormContext,
     formex: FormexController<any>;

package/src/form/PropertyFieldBinding.tsx

@@ -1,4 +1,4 @@
-import type { EntityCollection } from "@rebasepro/types";
+import type { EntityCollection, FieldProps as CoreFieldProps } from "@rebasepro/types";
 import type { FieldProps, PropertyFieldBindingProps } from "../types/fields";
 import type { RebasePlugin, PluginFieldBuilderParams, Property } from "@rebasepro/types";
 import React, { ComponentType, ReactElement, Suspense, useCallback, useRef } from "react";
@@ -118,18 +118,11 @@ function PropertyFieldBindingInternal<M extends Record<string, unknown> = Record
                 } else if (resolvedProperty.ui?.Field) {
                     const resolved = resolveComponentRef(resolvedProperty.ui.Field);
                     if (resolved) {
-                        Component = resolved as ComponentType<FieldProps<any>>;
+                        Component = resolved as ComponentType<FieldProps<Property, unknown, M>>;
                     }
                 } else {
                     const propertyConfig = getFieldConfig(resolvedProperty, customizationController.propertyConfigs);
                     if (!propertyConfig) {
-                        console.log("INTERNAL: Could not find field config for property", {
-                            propertyKey,
-                            property,
-                            resolvedProperty,
-                            fields: customizationController.propertyConfigs,
-                            propertyConfig
-                        });
                         throw new Error(`INTERNAL: Could not find field config for property ${propertyKey}`);
                     }
                     const configProperty = resolveProperty({
@@ -327,14 +320,14 @@ function useWrappedComponent<T, M extends Record<string, any> = any>(
                         fieldConfigId: fieldId,
                         propertyKey,
                         property,
-                        Field: Component as any,
+                        Field: Component as unknown as ComponentType<CoreFieldProps<Property, unknown, Record<string, unknown>>>,
                         plugin,
                         path,
-                        collection: collection as any
+                        collection: collection as EntityCollection | undefined
                     };
                     const enabled = plugin.fieldBuilder.enabled?.(params);
                     if (enabled === undefined || enabled)
-                        Wrapper = plugin.fieldBuilder.wrap(params) as any || Wrapper;
+                        Wrapper = (plugin.fieldBuilder.wrap(params) as unknown as ComponentType<FieldProps<any, any, M>> | null) ?? Wrapper;
                 }
                 if (!fieldId) {
                     console.warn("INTERNAL: Field id not found for property", property);

package/src/form/components/FieldHelperText.tsx

@@ -1,6 +1,5 @@
 import type { Property } from "@rebasepro/types";
-import { IconButton, Tooltip, Typography } from "@rebasepro/ui";
-import { InfoIcon } from "lucide-react";
+import { IconButton, InfoIcon, Tooltip, Typography } from "@rebasepro/ui";
 
 /**
  * Normalize an error value to a displayable string.

package/src/form/components/LocalChangesMenu.tsx

@@ -1,8 +1,23 @@
 
 import type { Properties } from "@rebasepro/types";
 import React, { useState } from "react";
-import { Button, defaultBorderMixin, Dialog, DialogActions, DialogContent, DialogTitle, Menu, MenuItem, Typography , iconSize } from "@rebasepro/ui";
-import { XCircleIcon, CheckIcon, ChevronDownIcon, EyeIcon, AlertTriangleIcon } from "lucide-react";
+import {
+    AlertTriangleIcon,
+    Button,
+    CheckIcon,
+    ChevronDownIcon,
+    defaultBorderMixin,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    EyeIcon,
+    iconSize,
+    Menu,
+    MenuItem,
+    Typography,
+    XCircleIcon
+} from "@rebasepro/ui";
 import { FormexController } from "@rebasepro/formex";
 import { useSnackbarController, useTranslation } from "@rebasepro/core";
 import { flattenKeys, removeEntityFromCache } from "@rebasepro/core";

package/src/form/components/StorageItemPreview.tsx

@@ -5,8 +5,7 @@ import { PreviewSize } from "../../types/components/PropertyPreviewProps";
 import { PropertyPreview } from "../../preview";
 
 import { cls, IconButton, paperMixin, Tooltip } from "@rebasepro/ui";
-import { FileTextIcon, MinusIcon } from "lucide-react";
-import { ErrorBoundary } from "@rebasepro/ui";
+import { ErrorBoundary, FileTextIcon, MinusIcon } from "@rebasepro/ui";
 import { useTranslation } from "@rebasepro/core";
 
 interface StorageItemPreviewProps {

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -11,8 +11,7 @@ import { getIconForProperty } from "../../util/property_utils";
 import { getReferenceFrom } from "@rebasepro/common";
 
 import { useTranslation, ErrorView } from "@rebasepro/core";
-import { Button, cls, ExpandablePanel, fieldBackgroundMixin, Typography } from "@rebasepro/ui";
-import { PencilIcon } from "lucide-react";
+import { Button, cls, ExpandablePanel, fieldBackgroundMixin, PencilIcon, Typography } from "@rebasepro/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { useCollectionRegistryController } from "../../index";
 

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -6,8 +6,23 @@ import { DataType, GeoPoint } from "@rebasepro/types";
 
 import { ArrayContainer } from "../../components/ArrayContainer";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
-import { BooleanSwitchWithLabel, Button, cls, DateTimeField, defaultBorderMixin, ExpandablePanel, IconButton, Menu, MenuItem, TextField, Typography , iconSize } from "@rebasepro/ui";
-import { PlusIcon, ChevronDownIcon, MinusIcon } from "lucide-react";
+import {
+    BooleanSwitchWithLabel,
+    Button,
+    ChevronDownIcon,
+    cls,
+    DateTimeField,
+    defaultBorderMixin,
+    ExpandablePanel,
+    IconButton,
+    iconSize,
+    Menu,
+    MenuItem,
+    MinusIcon,
+    PlusIcon,
+    TextField,
+    Typography
+} from "@rebasepro/ui";
 import { getIconForProperty } from "../../util/property_utils";
 import { useCustomizationController, useTranslation } from "@rebasepro/core";
 import { getIn } from "@rebasepro/formex";

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -125,7 +125,7 @@ export function MapFieldBinding({
 
             <FieldHelperText includeDescription={includeDescription}
                 showError={showError ?? false}
-                error={error && !partOfArray ? error as any : undefined}
+                error={error && !partOfArray ? error : undefined}
                 disabled={disabled}
                 property={property}/>
 

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -4,8 +4,15 @@ import { useAuthController, useStorageSource } from "@rebasepro/core";
 import { getIconForProperty } from "../../util/property_utils";
 import type { FieldProps } from "../../types/fields";
 import type { ArrayProperty, StringProperty } from "@rebasepro/types";
-import { cls, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin, IconButton, Skeleton } from "@rebasepro/ui";
-import { XIcon } from "lucide-react";
+import {
+    cls,
+    fieldBackgroundDisabledMixin,
+    fieldBackgroundHoverMixin,
+    fieldBackgroundMixin,
+    IconButton,
+    Skeleton,
+    XIcon
+} from "@rebasepro/ui";
 import type { RebaseEditorProps } from "../../editor";
 import { resolveStorageFilenameString, resolveStoragePathString } from "@rebasepro/common";
 import { randomString } from "@rebasepro/utils";
@@ -93,7 +100,7 @@ export function MarkdownEditorFieldBinding({
             // Update canonical ref with the proper round-tripped value now that ProseMirror is loaded
             canonicalRef.current = canonicalizeMarkdown(value);
         });
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    }, []);
 
     // Compute the canonical (round-tripped) form of the initial value ONCE.
     // This is what ProseMirror will produce after parse → serialize, so any

package/src/form/field_bindings/MultiSelectFieldBinding.tsx

@@ -7,8 +7,7 @@ import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { EnumValuesChip } from "../../preview";
 import { getIconForProperty } from "../../util/property_utils";
 import { enumToObjectEntries, getLabelOrConfigFrom } from "@rebasepro/common";
-import { MultiSelect, MultiSelectItem , iconSize } from "@rebasepro/ui";
-import { XIcon } from "lucide-react";
+import { iconSize, MultiSelect, MultiSelectItem, XIcon } from "@rebasepro/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**

package/src/form/field_bindings/MultipleRelationFieldBinding.tsx

@@ -9,8 +9,7 @@ import { getIconForProperty } from "../../util/property_utils";
 import { getRelationFrom, resolveRelationProperty } from "@rebasepro/common";
 
 import { useTranslation, ErrorView } from "@rebasepro/core";
-import { Button, cls, ExpandablePanel, fieldBackgroundMixin, Typography } from "@rebasepro/ui";
-import { PencilIcon } from "lucide-react";
+import { Button, cls, ExpandablePanel, fieldBackgroundMixin, PencilIcon, Typography } from "@rebasepro/ui";
 import { RelationPreview } from "../../preview";
 
 /**

package/src/form/field_bindings/ReferenceAsStringFieldBinding.tsx

@@ -23,7 +23,7 @@ import { useCollectionRegistryController } from "../../index";
  * @group Form fields
  */
 export function ReferenceAsStringFieldBinding(props: FieldProps<StringProperty>) {
-    if (typeof (props.property as any).reference?.path !== "string") {
+    if (typeof props.property.reference?.path !== "string") {
         return <ReadOnlyFieldBinding {...props as FieldProps<Property>}/>;
     }
 
@@ -43,7 +43,7 @@ function ReferenceAsStringFieldBindingInternal({
     includeDescription,
     size = "medium"
 }: FieldProps<StringProperty>) {
-    if (!(property as any).reference?.path) {
+    if (!property.reference?.path) {
         throw new Error("Property path is required for ReferenceAsStringFieldBinding");
     }
 
@@ -54,7 +54,7 @@ function ReferenceAsStringFieldBindingInternal({
     });
 
     const collectionRegistryController = useCollectionRegistryController();
-    const path = (property as any).reference.path;
+    const path = property.reference!.path;
     const collection: EntityCollection | undefined = useMemo(() => {
         return path ? collectionRegistryController.getCollection(path) : undefined;
     }, [path]);
@@ -81,7 +81,7 @@ path });
         collection,
         onSingleEntitySelected,
         selectedEntityIds: value ? [value] : undefined,
-        fixedFilter: (property as any).reference.fixedFilter
+        fixedFilter: property.reference?.fixedFilter
     }
     );
 
@@ -106,13 +106,13 @@ path });
 
                 {referenceValue && <ReferencePreview
                     disabled={!path}
-                    previewProperties={(property as any).reference?.previewProperties}
+                    previewProperties={property.reference?.ui?.previewProperties}
                     hover={!disabled}
                     size={size}
                     onClick={disabled || isSubmitting ? undefined : onEntryClick}
                     reference={referenceValue}
-                    includeEntityLink={(property as any).reference?.includeEntityLink}
-                    includeId={(property as any).reference?.includeId}
+                    includeEntityLink={property.reference?.includeEntityLink}
+                    includeId={property.reference?.includeId}
                 />}
 
                 {!value && <div className="justify-center text-left">