@firecms/core 3.0.0-tw4.2 → 3.0.0

package/dist/util/entity_cache.d.ts

@@ -12,7 +12,6 @@ export declare function hasEntityInCache(path: string): boolean;
  * Retrieves an entity from the in-memory cache or `localStorage`.
  * If the entity is not in the cache but exists in `localStorage`, it loads it into the cache.
  * @param path - The unique path/key for the entity.
- * @param useLocalStorage
  * @returns The cached entity or `undefined` if not found.
  */
 export declare function getEntityFromCache(path: string): object | undefined;

package/dist/util/strings.d.ts

@@ -4,3 +4,4 @@ export declare function randomString(strLength?: number): string;
 export declare function randomColor(): string;
 export declare function slugify(text?: string, separator?: string, lowercase?: boolean): string;
 export declare function unslugify(slug?: string): string;
+export declare function prettifyIdentifier(input: string): string;

package/dist/util/strings.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-tw4.2",
+  "version": "3.0.0",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -53,9 +53,9 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/editor": "^3.0.0-tw4.2",
-    "@firecms/formex": "^3.0.0-tw4.2",
-    "@firecms/ui": "^3.0.0-tw4.2",
+    "@firecms/editor": "^3.0.0",
+    "@firecms/formex": "^3.0.0",
+    "@firecms/ui": "^3.0.0",
     "@radix-ui/react-portal": "^1.1.10",
     "clsx": "^2.1.1",
     "compressorjs": "^1.2.1",
@@ -108,7 +108,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "1292c52536d1485a6dd0803de81e05448cb0a36e",
+  "gitHead": "d106a7fde537c4330ae4ba5471c74d4536dea710",
   "publishConfig": {
     "access": "public"
   },

package/src/app/Scaffold.tsx

@@ -228,7 +228,7 @@ function DrawerWrapper(props: {
                    open={props.open}
                    onOpenChange={props.setDrawerOpen}
                    title={"Navigation drawer"}
-                   overlayClassName={"bg-white bg-opacity-80 bg-white/80"}
+                   overlayClassName={"bg-white bg-opacity-80"}
             >
                 {innerDrawer}
             </Sheet>

package/src/components/ArrayContainer.tsx

@@ -186,7 +186,7 @@ export function ArrayContainerItem({
         <div
             ref={nodeRef}
             style={style}
-            className={`relative ${!isDragging ? "hover\\:bg-surface-accent-50 dark\\:hover\\:bg-surface-800 dark\\:hover\\:bg-opacity-20 dark\\:hover\\:bg-surface-800/20" : ""} rounded-md opacity-100`}
+            className={`relative ${!isDragging ? "hover\\:bg-surface-accent-50 dark\\:hover\\:bg-surface-800 dark\\:hover\\:bg-opacity-20" : ""} rounded-md opacity-100`}
         >
             <div className="flex items-start">
                 <div className="flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark">

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -75,7 +75,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
     return (
         <div
             className={cls(
-                "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 bg-surface-50/90 dark:bg-opacity-90 dark:bg-surface-900/90 z-10",
+                "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 dark:bg-opacity-90 z-10",
                 frozen ? "sticky left-0" : ""
             )}
             onClick={useCallback((event: any) => {

package/src/components/EntityCollectionTable/internal/EntityTableCell.tsx

@@ -188,9 +188,9 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
             <div
                 className={cls(
                     "transition-colors duration-100 ease-in-out",
-                    `flex relative h-full rounded-md p-${p} border border-4 border-opacity-75`,
+                    `flex relative h-full rounded-md p-${p} border border-4  border-opacity-75`,
                     onHover && !disabled ? "bg-surface-50 dark:bg-surface-900" : "",
-                    saved ? "bg-surface-100/75 dark:bg-surface-800/75" : "",
+                    saved ? "bg-surface-100 bg-opacity-75 dark:bg-surface-800 dark:bg-opacity-75" : "",
                     hideOverflow ? "overflow-hidden" : "",
                     isSelected ? "bg-surface-50 dark:bg-surface-900" : "",
                     borderClass
@@ -237,7 +237,7 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                 {disabled && onHover && disabledTooltip &&
                     <div className="absolute top-1 right-1 text-xs">
                         <Tooltip title={disabledTooltip}>
-                            <DoNotDisturbOnIcon size={"smallest"} color={"disabled"} className={"text-text-disabled"}/>
+                            <DoNotDisturbOnIcon size={"smallest"} color={"disabled"} className={"text-surface-500"}/>
                         </Tooltip>
                     </div>}
 

package/src/components/ReferenceWidget.tsx

@@ -136,7 +136,7 @@ export function ReferenceWidget<M extends Record<string, any>>({
         "min-w-80 flex flex-col gap-4",
         "relative transition-colors duration-200 ease-in rounded font-medium",
         disabled ? "bg-opacity-50" : "hover:bg-opacity-75",
-        "text-opacity-50 text-text-primary/50 dark:text-white dark:text-opacity-50 dark:text-white/50",
+        "text-opacity-50 dark:text-white dark:text-opacity-50",
         className
     )}
     >

package/src/components/SelectableTable/SelectableTable.tsx

@@ -247,7 +247,7 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
                     checkFilterCombination={checkFilterCombination}
                     createFilterField={filterable ? createFilterField : undefined}
                     rowClassName={useCallback((entity: Entity<M>) => {
-                        return highlightedRow?.(entity) ? "bg-surface-100 bg-opacity-75 bg-surface-100/75 dark:bg-surface-800 dark:bg-opacity-75 dark:bg-surface-800/75" : "";
+                        return highlightedRow?.(entity) ? "bg-surface-100 bg-opacity-75 dark:bg-surface-800 dark:bg-opacity-75" : "";
                     }, [highlightedRow])}
                     className="flex-grow"
                     emptyComponent={emptyComponent}

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -87,7 +87,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                 <div
                     className={cls("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center bg-surface-50 dark:bg-surface-900",
                         "text-text-secondary hover:text-text-primary dark:text-text-secondary-dark dark:hover:text-text-primary-dark",
-                        "hover:bg-surface-100 dark:hover:bg-surface-800 hover:bg-opacity-50 hover:bg-surface-100/50 dark:hover:bg-opacity-50 dark:hover:bg-surface-800/50",
+                        "hover:bg-surface-100 dark:hover:bg-surface-800 hover:bg-opacity-50 dark:hover:bg-opacity-50",
                         column.frozen ? "sticky left-0 z-10" : "relative z-0"
                     )}
                     style={{

package/src/components/VirtualTable/VirtualTableRow.tsx

@@ -29,7 +29,7 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
         return (
             <div
                 className={cls(
-                    "flex min-w-full text-sm border-b border-surface-200 dark:border-surface-800 border-opacity-40 border-surface-200/40 dark:border-opacity-40 dark:border-surface-800/40",
+                    "flex min-w-full text-sm border-b border-surface-200 dark:border-surface-800 border-opacity-40 dark:border-opacity-40",
                     rowClassName ? rowClassName(rowData) : "",
                     {
                         "hover:bg-opacity-95": hoverRow,

package/src/core/DefaultDrawer.tsx

@@ -85,7 +85,7 @@ export function DefaultDrawer({
 
                     {groupsWithoutAdmin.map((group) => (
                         <div
-                            className={"bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 dark:bg-surface-800/30 bg-surface-50 dark:bg-surface-800/30  my-4 rounded-lg ml-3 mr-1"}
+                            className={"bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 my-4 rounded-lg ml-3 mr-1"}
                             key={`drawer_group_${group}`}>
                             {buildGroupHeader(group)}
                             {Object.values(navigationEntries)

package/src/core/DrawerNavigationItem.tsx

@@ -34,13 +34,13 @@ export function DrawerNavigationItem({
                 transition: drawerOpen ? "width 150ms ease-in" : undefined
             }}
             className={({ isActive }: any) => cls("rounded-lg truncate",
-                "hover:bg-surface-accent-300 hover:bg-opacity-75 hover:bg-surface-accent-300/75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 dark:hover:bg-surface-accent-800/75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white hover:bg-surface-accent-300/75 dark:hover:bg-surface-accent-800/75",
+                "hover:bg-surface-accent-300 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white",
                 "flex flex-row items-center mr-8",
                 // "transition-all ease-in-out delay-100 duration-300",
                 // drawerOpen ? "w-full" : "w-18",
                 drawerOpen ? "pl-4 h-10" : "pl-4 h-9",
                 "font-semibold text-xs",
-                isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50 bg-surface-accent-200/60 dark:bg-surface-800/50" : ""
+                isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50" : ""
             )}
             to={url}
         >
@@ -49,9 +49,8 @@ export function DrawerNavigationItem({
 
             <div
                 className={cls(
-                    "text-text-primary dark:text-surface-200",
                     drawerOpen ? "opacity-100" : "opacity-0 hidden",
-                    "ml-4 font-inherit"
+                    "ml-4 font-inherit text-inherit"
                 )}>
                 {name.toUpperCase()}
             </div>

package/src/core/SideDialogs.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { useSideDialogsController } from "../hooks";
 import { SideDialogPanelProps } from "../types";
 import { Sheet } from "@firecms/ui";
@@ -61,15 +61,15 @@ export function SideDialogs() {
                 <SideDialogView
                     key={`side_dialog_${index}`}
                     panel={panel}
-                    offsetPosition={sidePanels.length - index - 1}/>)
+                    offsetPosition={sidePanels.length - index - 1} />)
         }
     </>;
 }
 
 function SideDialogView({
-                            offsetPosition,
-                            panel
-                        }: {
+    offsetPosition,
+    panel
+}: {
     offsetPosition: number,
     panel?: SideDialogPanelProps
 }) {
@@ -134,7 +134,18 @@ function SideDialogView({
 
             <Sheet
                 open={Boolean(panel)}
-                onOpenChange={(open) => !open && onCloseRequest()}
+                onOpenChange={(open) => {
+                    if (!open) {
+                        // Check if any suggestion menu is visible in DOM
+                        const suggestionMenu = document.querySelector("[data-suggestion-menu=\"true\"]");
+                        if (suggestionMenu && window.getComputedStyle(suggestionMenu).visibility !== "hidden") {
+                            // Don't close the sheet if a suggestion menu is visible
+                            // Let Tiptap handle closing the menu first
+                            return;
+                        }
+                        onCloseRequest();
+                    }
+                }}
                 title={"Side dialog " + panel?.key}
             >
                 {panel &&
@@ -150,7 +161,7 @@ function SideDialogView({
                         </ErrorBoundary>
                     </div>}
 
-                {!panel && <div style={{ width }}/>}
+                {!panel && <div style={{ width }} />}
 
             </Sheet>
 
@@ -158,7 +169,7 @@ function SideDialogView({
                 open={drawerCloseRequested}
                 handleOk={drawerCloseRequested ? handleDrawerCloseOk : handleNavigationOk}
                 handleCancel={drawerCloseRequested ? handleDrawerCloseCancel : handleNavigationCancel}
-                body={blockedNavigationMessage}/>
+                body={blockedNavigationMessage} />
 
         </SideDialogContext.Provider>
 

package/src/hooks/useProjectLog.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { AuthController, DataSourceDelegate, FireCMSPlugin } from "../types";
 
 export const DEFAULT_SERVER_DEV = "https://api-kdoe6pj3qq-ey.a.run.app";
-export const DEFAULT_SERVER = "https://api-drplyi3b6q-ey.a.run.app";
+export const DEFAULT_SERVER = "https://api.firecms.co";
 
 export type AccessResponse = {
     blocked?: boolean;

package/src/preview/components/EmptyValue.tsx

@@ -6,5 +6,5 @@ import React from "react";
 export function EmptyValue() {
 
     return <div
-        className="rounded-full bg-surface-200 bg-opacity-30 bg-surface-200/30 dark:bg-opacity-20 dark:bg-surface-200/20 w-5 h-2 inline-block"/>;
+        className="rounded-full bg-surface-200 bg-opacity-30 dark:bg-opacity-20 w-5 h-2 inline-block"/>;
 }

package/src/util/entity_cache.ts

@@ -122,7 +122,6 @@ export function hasEntityInCache(path: string): boolean {
  * Retrieves an entity from the in-memory cache or `localStorage`.
  * If the entity is not in the cache but exists in `localStorage`, it loads it into the cache.
  * @param path - The unique path/key for the entity.
- * @param useLocalStorage
  * @returns The cached entity or `undefined` if not found.
  */
 export function getEntityFromCache(path: string): object | undefined {
@@ -134,10 +133,6 @@ export function getEntityFromCache(path: string): object | undefined {
             const entityString = localStorage.getItem(key);
             if (entityString) {
                 const entity: object = JSON.parse(entityString, customReviver);
-                console.log("Loaded entity from localStorage:", {
-                    key,
-                    entity
-                });
                 return entity;
             }
         } catch (error) {

package/src/util/strings.test.ts

@@ -0,0 +1,101 @@
+import { prettifyIdentifier } from "./strings";
+
+describe("prettifyIdentifier", () => {
+    it("should return empty string for empty input", () => {
+        expect(prettifyIdentifier("")).toBe("");
+    });
+
+    it("should handle camelCase", () => {
+        expect(prettifyIdentifier("displayName")).toBe("Display Name");
+        expect(prettifyIdentifier("firstName")).toBe("First Name");
+        expect(prettifyIdentifier("lastName")).toBe("Last Name");
+        expect(prettifyIdentifier("emailAddress")).toBe("Email Address");
+    });
+
+    it("should handle PascalCase", () => {
+        expect(prettifyIdentifier("DisplayName")).toBe("Display Name");
+        expect(prettifyIdentifier("FirstName")).toBe("First Name");
+        expect(prettifyIdentifier("UserProfile")).toBe("User Profile");
+    });
+
+    it("should handle snake_case", () => {
+        expect(prettifyIdentifier("display_name")).toBe("Display Name");
+        expect(prettifyIdentifier("first_name")).toBe("First Name");
+        expect(prettifyIdentifier("user_profile")).toBe("User Profile");
+    });
+
+    it("should handle kebab-case", () => {
+        expect(prettifyIdentifier("display-name")).toBe("Display Name");
+        expect(prettifyIdentifier("first-name")).toBe("First Name");
+        expect(prettifyIdentifier("user-profile")).toBe("User Profile");
+    });
+
+    it("should handle mixed separators", () => {
+        expect(prettifyIdentifier("display_name-test")).toBe("Display Name Test");
+        expect(prettifyIdentifier("first-name_last")).toBe("First Name Last");
+    });
+
+    it("should handle acronyms correctly", () => {
+        expect(prettifyIdentifier("imageURL")).toBe("Image URL");
+        expect(prettifyIdentifier("XMLParser")).toBe("XML Parser");
+        expect(prettifyIdentifier("HTTPSConnection")).toBe("HTTPS Connection");
+        expect(prettifyIdentifier("parseHTML")).toBe("Parse HTML");
+    });
+
+    it("should handle consecutive uppercase letters", () => {
+        expect(prettifyIdentifier("URLParser")).toBe("URL Parser");
+        expect(prettifyIdentifier("HTMLElement")).toBe("HTML Element");
+        expect(prettifyIdentifier("APIKey")).toBe("API Key");
+    });
+
+    it("should handle single words", () => {
+        expect(prettifyIdentifier("name")).toBe("Name");
+        expect(prettifyIdentifier("title")).toBe("Title");
+        expect(prettifyIdentifier("description")).toBe("Description");
+    });
+
+    it("should handle all uppercase", () => {
+        expect(prettifyIdentifier("NAME")).toBe("NAME");
+        expect(prettifyIdentifier("TITLE")).toBe("TITLE");
+    });
+
+    it("should handle all lowercase", () => {
+        expect(prettifyIdentifier("name")).toBe("Name");
+        expect(prettifyIdentifier("title")).toBe("Title");
+    });
+
+    it("should handle multiple consecutive separators", () => {
+        expect(prettifyIdentifier("display__name")).toBe("Display Name");
+        expect(prettifyIdentifier("first--name")).toBe("First Name");
+        expect(prettifyIdentifier("user___profile")).toBe("User Profile");
+    });
+
+    it("should trim whitespace", () => {
+        expect(prettifyIdentifier("  displayName  ")).toBe("Display Name");
+        expect(prettifyIdentifier(" first_name ")).toBe("First Name");
+    });
+
+    it("should handle numbers", () => {
+        expect(prettifyIdentifier("user123")).toBe("User123");
+        expect(prettifyIdentifier("item1Name")).toBe("Item1Name");
+        expect(prettifyIdentifier("version2Point0")).toBe("Version2Point0");
+    });
+
+    it("should handle complex combinations", () => {
+        expect(prettifyIdentifier("userProfileURLParser")).toBe("User Profile URL Parser");
+        expect(prettifyIdentifier("parse_HTML_document")).toBe("Parse HTML Document");
+        expect(prettifyIdentifier("API-key-validator")).toBe("API Key Validator");
+    });
+
+    it("should handle edge cases with underscores and hyphens at boundaries", () => {
+        expect(prettifyIdentifier("_displayName")).toBe("Display Name");
+        expect(prettifyIdentifier("displayName_")).toBe("Display Name");
+        expect(prettifyIdentifier("-displayName-")).toBe("Display Name");
+    });
+
+    it("should handle already formatted strings", () => {
+        expect(prettifyIdentifier("Display Name")).toBe("Display Name");
+        expect(prettifyIdentifier("First Name")).toBe("First Name");
+    });
+});
+

package/src/util/strings.ts

@@ -61,3 +61,24 @@ export function unslugify(slug?: string): string {
         return slug.trim();
     }
 }
+
+export function prettifyIdentifier(input: string) {
+    if (!input) return "";
+
+    let text = input;
+
+    // 1. Handle camelCase and Acronyms
+    // Group 1 ($1 $2): Lowercase followed by Uppercase (e.g., imageURL -> image URL)
+    // Group 2 ($3 $4): Uppercase followed by Uppercase+lowercase (e.g., XMLParser -> XML Parser)
+    text = text.replace(/([a-z])([A-Z])|([A-Z])([A-Z][a-z])/g, "$1$3 $2$4");
+
+    // 2. Replace hyphens/underscores with spaces
+    text = text.replace(/[_-]+/g, " ");
+
+    // 3. Capitalize first letter of each word (Title Case)
+    const s = text
+        .trim()
+        .replace(/\b\w/g, (char) => char.toUpperCase());
+    console.log("Prettified identifier:", { input,s });
+    return s;
+}